Manually invalidate virtual module

[benjaminpreiss]

I am building a library which adds virtual: module imports to specific files depending on a changing configuration file.

The problem is, that vite does detect changes in the configuration file / files imported from the configuration file but does not retrigger transforms in the virtual modules.

How can I make my vite plugin retrigger transform / load when the configuration file changes?

I was thinking there must be a cache invalidation option for specific files which I can call?

Very thankful for help.

[connormckelvey]

@benjaminpreiss I've been trying to hack together some something similar and here is what I came up with:

function myVitePlugin(options) {
  const virtualModuleId = 'virtual:my-module'
  const resolvedVirtualModuleId = '\0' + virtualModuleId
  
  return {
    name: 'vite-plugin-my-plugin',
    configureServer(server) {
      server.watcher.add(`files/to/watch`)
    },

   async handleHotUpdate({ server, modules, file, timestamp }) {
      // do pre-flight checks
      // ...

      server.hot.send({ type: 'full-reload' })
      server.moduleGraph.invalidateAll()
      return []
    },

    resolveId(id: string) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId
      }
    },

    load(id: string) {
      if (id !== resolvedVirtualModuleId) {
        return
      }

      // do loading
      // ...
    },
  }
}

I'm sure there's lot's of dragons there, as it invalidates all modules. The main issue with the pattern I think you and I are both using is that we are introducing a virtual module which has hidden (in vite's eyes) dependencies on other files.

Both the modules and server.moduleGraph from the HmrContext in the handleHotUpdate hook are empty. The handleHotUpdate is getting called because the watcher detected a change to the file added the watcher the configureServer hook but vite has no idea of the relationship between the virtual module and that file.

To solve this issue I'm thinking about injecting import statements referencing the dependent files into the code I'm generating for my virtual module to complete the graph.

[connormckelvey]

Update: ok yeah, just make sure there are import statements in the code you generate for your virtual module that reference the files you care about watching and reloading. You'll likely need to handle the load hook (and others maybe) for those file, but otherwise, it just works and you don't need to manually watch files or trigger reloads.

[dolbex]

Update: ok yeah, just make sure there are import statements in the code you generate for your virtual module that reference the files you care about watching and reloading. You'll likely need to handle the load hook (and others maybe) for those file, but otherwise, it just works and you don't need to manually watch files or trigger reloads.

@connormckelvey - I am currently in the middle of the exaaaact same battle and cannot seem to figure it out. I don't know if it makes a difference but I'm working on a module that is being used on it's own playground. Even with the import statements I'm unable to trigger an SSR reload of the data coming from the virtual: module. Any help would be hugely appreciated here. Happy to DM you somewhere / jump on the phone / buy you 5 beers :)

Just for context here is my load function:

      load(id) {
        if (id === resolvedVirtualSliceModuleId) {
          return `
          import SlicesTestingHmrSliceConfig from '/components/slices/testing/SlicesTestingHmrSliceConfig.vue';
          
          export default ${JSON.stringify(newSliceConfig)};

          const slicefields = [
          SlicesTestingHmrSliceConfig.fields
          ]

          export { SlicesTestingHmrSliceConfig }`
        }
}

[bienoubien-studio]

Thanks @connormckelvey, I've used your exemple and end up with this solution, if it can help someone :

export function browserConfig(): Plugin {
  const virtualModuleId = 'virtual:browser-config';
  const resolvedVirtualModuleId = '\0' + virtualModuleId;
  
  return {
    name: 'rizom:browser-config',
    
    configureServer(server) {
      const configDir = path.resolve(process.cwd(), '.rizom');
      server.watcher.add(path.join(configDir, '**'));
    },

    async handleHotUpdate({ server, file }) {
      
      if(file.includes('config.browser.txt')){
        const module = server.moduleGraph.getModuleById(resolvedVirtualModuleId);
        if (module) {
          server.moduleGraph.invalidateModule(module);
          return [module]
        }
      }
    },
    
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedVirtualModuleId;
      }
    },

    load(id){
        // virtual module stuff
    }
  }
}