Custom ModuleGraph for Virtual Modules

[djdjz7]

If we provide a virtual module, vite currently does not know its "implicit" dependencies, as shown in #15504 and my own experiences.

For example: I have multiple *.json files in my public/data directory and I would like to aggregate them into one single index file. So I wrote a plugin, which iterates through all *.json files in the directory, parse them, and export the index as an object.

However, if any of these *.json files changed, a hot reload needs to take place to reload the virtual module, and there is no shortcut to do this currently in vite (again, because vite has no idea of these "implicit" dependencies), and here is my workaround:

handleHotUpdate({ server, file }) {
  if (file.includes('public/data/entries')) {
    const thisModule = server.moduleGraph.getModuleById(
      resolvedVirtualModuleId,
    )
    if (thisModule) return [thisModule]
  }
}

I wonder if this could become a feature of vite, where users explicitly tell vite the implicit dependencies through the plugin api, for example:

implicitDependencies: ["public/data/entries/**/*.json"]

so that vite can automatically configure file watchers etc. and do the hot reload for me.

[hi-ogawa]

There's this.addWatchFile https://rollupjs.org/plugin-development/#this-addwatchfile which is not well documented on Vite usage, but it can achieve something similar.

load(id) {
  if (id === '\0virtual:xxx') {
    let result = [];
    for (const file of glob("public/data/entries/**/*.json")) {
      this.addWatchFile(file);
      result.push(readJson(file));
    }
    return `export default ${JSON.stringify(output)}`
  }
}

[djdjz7]

Thanks for your patience and after trying to build a minimum reproduction, I think the problem lies in the v-for directive of vue.

One more question: if I understand the code correctly, this.addWatchFile cannot trigger rebuild on file creation?

[hi-ogawa]

One more question: if I understand the code correctly, this.addWatchFile cannot trigger rebuild on file creation?

Yeah, you might still need your own handleHotUpdate to take care new files added under directory. Vite internally uses such logic for import.meta.glob for example (EDIT: ah maybe not, i'm not sure 😅) You might find the discussion here helpful #18552.

[djdjz7]

Extremely sorry to bother you again, but I think I have demolished my previous assumption and have reproduced the issue without vue here

I have found that Vite will not reload a module if two conditions are met:

• it is a virtual module;
• it is exported in *.json format and is imported with with { type: "json" } notation.

Please refer to the repo's readme file for reproduction steps.

[hi-ogawa]

I'm not sure where the difference come from. Technically json module having dependencies on other files is odd, but this could be a bug. Please feel free to create an issue.

[hi-ogawa]

Hmm, I think I understood the reason now. addWatchFile dependency mechanism is probably handled as a part of import analysis, so this won't apply to json module.

vite/packages/vite/src/node/plugins/importAnalysis.ts

Lines 768 to 770 in b1412cb

	// attached by pluginContainer.addWatchFile
	const pluginImports = (this as unknown as TransformPluginContext)
	._addedImports

I think using js module like testPluginAsString is what's intended for now. For your use case, I think you can try import.meta.glob to collect json files and that might be easier. https://vite.dev/guide/features.html#custom-queries