https://github.com/patak-dev/vite-plugin-virtual

Virtual modules plugin for Vite
https://github.com/patak-dev/vite-plugin-virtual

Last synced: 6 days ago
JSON representation

Virtual modules plugin for Vite

• Host: GitHub
• URL: https://github.com/patak-dev/vite-plugin-virtual
• Owner: patak-dev
• License: mit
• Created: 2021-04-07T07:49:24.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-08-23T06:58:29.000Z (4 months ago)
• Last Synced: 2024-12-09T06:11:39.507Z (14 days ago)
• Language: TypeScript
• Size: 176 KB
• Stars: 74
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-virtual

[![npm version](https://badgen.net/npm/v/vite-plugin-virtual)](https://www.npmjs.com/package/vite-plugin-virtual)

[![monthly downloads](https://badgen.net/npm/dm/vite-plugin-virtual)](https://www.npmjs.com/package/vite-plugin-virtual)

[![license](https://badgen.net/npm/license/vite-plugin-virtual)](https://github.com/patak-js/vite-plugin-virtual/blob/main/LICENSE)

> Virtual modules with HMR plugin for [Vite](https://github.com/vitejs/vite)

## Getting Started

Install Vite Plugin Virtual:

```bash

$ npm install -D vite-plugin-virtual

```

Add to your `vite.config.js`:

```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

```js

import obj from 'virtual:config'

console.log(obj)

```

## Updating virtual modules

You can update the virtual module during dev

```js

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

```js

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:

```ts

declare module 'virtual:config' {

  export const hello: string;

}

```

   

For more details refer to the [TypeScript docs for ambient modules](https://www.typescriptlang.org/docs/handbook/modules/reference.html#ambient-modules).

## Credits

- Adapted logic from [@rollup/plugin-virtual](https://github.com/rollup/plugins/tree/master/packages/virtual)

- Project setup adopted from [@antfu's Vite plugins](https://github.com/antfu/vite-plugin-pwa)

## License

MIT License © 2021 [patak-js](https://github.com/patak-js)