@gtrabanco/elysia-hmr-html v1.0.0

Esta documentación está disponible también en español en el archivo 🇪🇸 README.es.md.

Elysia HMR HTML Plugin

This plugin adds fast-refreash using Server Sent Events to your html files.

You can view a example in example directory (is explained in this file).

Requisitos

• Browser with Server Sent Events Support
• Elysia package installed
• Bun. Not tested with NodeJS, but probably you will need some wrappers, Elysia/node package and HTMLRewriter package.

Installation

bun add --exact @gtrabanco/elysia-hmr-html

Usage

import { Elysia } from 'elysia';
import { staticPlugin } from '@elysiajs/static'
import { hmr } from '../src';

const app = new Elysia()
  .use(hmr({
    prefixToWatch: 'example/public' // Local path to watch for changes
  }))
  .use(staticPlugin({
    assets: 'example/public',
    prefix: '',
  })).listen(process.env.PORT || 0, ({ hostname, port }) => { console.log(`Elysia server started http://${hostname}:${port}`) });

Run the included example

git clone https://github.com/gtrabanco/elysia-hmr-html
cd elysia-hmr-html
bun install
PORT=3000 bun example

After that open https://localhost:3000/index.html in your browser and open ${EDITOR} example/public/index.html

Change something and save, you will see the changes in the browser :)

Other

This plugin requires on @gtrabanco/elysia-inject-html package.

This plugin listen in BroadcastChannel on client in the channel with configured hmrEventName value. If you send the pathname to the file in the same domain as value it will only refreash only that page but if you send * value, it will refresh all pages listen for that event (in the same domain).

More information

• Elysia
• Browser support of Server Sent Events in CanIUse
• MDN Server Sent Events
• BroadcastChannel