open-index/open-npm huggingface dataset:
npm package: @gtrabanco/elysia-hmr-html
Description: Elysia plugin to make hmr with html files
Author: Gabriel Trabanco
Latest version: 1.2.0

Esta documentación está disponible también en español en el archivo [🇪🇸 README.es.md](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`](example) directory (is explained in this file).

## KNOWN ISSUES

- There is an issue with server sent events currently in Bun:
  - https://github.com/oven-sh/bun/issues/17947
  - https://github.com/elysiajs/elysia/issues/909#issuecomment-2667693911
  - https://github.com/elysiajs/elysia/issues/755
  - https://github.com/elysiajs/elysia/issues/732

**RECOMMENDED**: Use default Websockets implementation instead of SSE.

## Requirements

- Browser with [Server Sent Events Support](https://caniuse.com/eventsource) or [Websockets](https://caniuse.com/websockets)
- [Elysia 1.1.0](https://elysiajs.com/) or newer package installed
- Bun. Not tested with NodeJS, but probably you will need [some wrappers](https://github.com/jhmaster2000/node-bun), [Elysia/node package](https://github.com/elysiajs/node-adapter) and [HTMLRewriter](https://www.npmjs.com/package/html-rewriter-wasm) package.
- You need to set `idleTimeout` to 0 in your server if you use SSE but it could fail as well. I had no issues but maybe you need this also for Websockets.

## Installation

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

## Usage

```ts
import { Elysia } from 'elysia';
import { staticPlugin } from '@elysiajs/static'
import { hmr } from '@gtrabanco/elysia-hmr-html';

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

## Run the included example

```bash
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](https://elysiajs.com/)
- [Browser support of Server Sent Events in CanIUse](https://caniuse.com/eventsource)
- [MDN Server Sent Events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events)
- [BroadcastChannel](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
- [Websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
npm package: @gtrabanco/elysia-inject-html
Description: Elysia plugin to inject HTML into the DOM
Author: Gabriel Trabanco
Latest version: 1.1.0

# Description

This is a plugin for elysia that injects html/js code in the response page.

# Installation

```bash
bun add --exact @gtrabanco/elysia-inject-html
```

# Usage

```js
import { Elysia } from 'elysia';
import { injectHtml } from '@gtrabanco/elysia-inject-html';

const app = new Elysia()
  .use(injectCode({
    selector: 'body'
    code: '<script>alert("Hello World!")</script>'
  }))
  .get('/index.html', () =>
    new Response('<html><body></body></html>', {
      headers: {
        'content-type': 'text/html'
      }
    }))
  .listen(8080);
```

You can provide multiple code with the same selector by providing an array of strings:

```js
const app = new Elysia()
  .use(injectHtml({
    selector: 'body'
    code: [
      '<script>alert("Hello World!")</script>',
      '<script>alert("Hello World 2!")</script>'
    ]
  }))
  .get('/index.html', () =>
    new Response('<html><body></body></html>', {
      headers: {
        'content-type': 'text/html'
      }
    }))
  .listen(8080);
```

## Known limitations

Currently it is not working if you create two similar plugins or two plugins that call `afterHandle` because it will fail. This is confirmed until Elysia 0.7.9.