vite-plugin-virtual

vite-plugin-virtual

Virtual modules with HMR plugin for Vite

Getting Started

Install Vite Plugin Virtual:

$ npm install -D vite-plugin-virtual

Add to your vite.config.js:

import virtual from 'vite-plugin-virtual'

export default {
  plugins: [
    virtual({
      'virtual:module': `export default { hello: 'world' }`,
      'virtual:config': { hello: 'world' }
    })
  ]
}

In your sources you can now import the virtual modules

import obj from 'virtual:config'

console.log(obj)

Updating virtual modules

You can update the virtual module during dev

import virtual, { updateVirtualModule } from 'vite-plugin-virtual'

const plugin = virtual({
  'virtual:module': `export default { hello: 'world' }`,
  'virtual:config': { hello: 'world' },
  'virtual:lazy': () => `Hello ${'computed'} world`,
})

updateVirtualModule(plugin, 'virtual:config', { hello: 'new message' })

Manual invalidation

You can invalidate the virtual module during dev in case the config changes

import virtual, { invalidateVirtualModule } from 'vite-plugin-virtual'

const modules = {
  'virtual:module': `export default { hello: 'world' }`,
  'virtual:config': { hello: 'world' }
}

const plugin = virtual(modules)

const server: ViteDevServer

modules['virtual:config'] = { hello: 'new message' }
invalidateVirtualModule(server, 'virtual:config')

Types

To enable TypeScript IntelliSense for a virtual module, you can use ambient modules to declare the module in a .d.ts file included by your TS setup:

declare module 'virtual:config' {
  export const hello: string;
}

For more details refer to the TypeScript docs for ambient modules.

Credits

• Adapted logic from @rollup/plugin-virtual
• Project setup adopted from @antfu's Vite plugins

License

MIT License © 2021 patak-js