https://github.com/fi3ework/vite-plugin-web-components-hmr

Provides Vite HMR for web components(vanilla, Lit, Fast, List, Haunted).
https://github.com/fi3ework/vite-plugin-web-components-hmr

fast-element haunted hmr list-elements lit lit-element lit-html vite vite-plugin web-components

Last synced: 27 days ago
JSON representation

Provides Vite HMR for web components(vanilla, Lit, Fast, List, Haunted).

• Host: GitHub
• URL: https://github.com/fi3ework/vite-plugin-web-components-hmr
• Owner: fi3ework
• License: mit
• Created: 2023-01-07T18:21:42.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-14T05:31:32.000Z (9 months ago)
• Last Synced: 2024-10-03T09:26:23.330Z (about 1 month ago)
• Topics: fast-element, haunted, hmr, list-elements, lit, lit-element, lit-html, vite, vite-plugin, web-components
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vite-plugin-web-components-hmr
• Size: 3.49 MB
• Stars: 7
• Watchers: 2
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
🫡 This repository is heavily forked from [@open-wc/dev-server-hmr](https://github.com/open-wc/open-wc/tree/c5444f79ac863d68abdbf84e5c49d9b07223bd1c/packages/dev-server-hmr) under [MIT](https://github.com/open-wc/open-wc/blob/c5444f79ac/LICENSE) licence, and adapting for the Vite plugin system.

---

## Installation

```bash

# pnpm

pnpm add vite-plugin-web-components-hmr -D

# yarn

yarn add vite-plugin-web-components-hmr -D

# npm

npm i vite-plugin-web-components-hmr -D

```

## Usage

The options for the plugin is exactly the same as [@open-wc/dev-server-hmr](https://www.npmjs.com/package/@open-wc/dev-server-hmr). Check the documentation [here](https://www.npmjs.com/package/@open-wc/dev-server-hmr).

```js

// example for using with Lit

import { defineConfig } from 'vite'

import { hmrPlugin, presets } from 'vite-plugin-web-components-hmr'

export default defineConfig({

  plugins: [

    hmrPlugin({

      include: ['./src/**/*.ts'],

      presets: [presets.lit],

    }),

  ],

})

```