Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aabccd021/bun-html-live-reload
Automatically reload html when Bun hot reloads
https://github.com/aabccd021/bun-html-live-reload
Last synced: 2 days ago
JSON representation
Automatically reload html when Bun hot reloads
- Host: GitHub
- URL: https://github.com/aabccd021/bun-html-live-reload
- Owner: aabccd021
- License: mit
- Created: 2023-03-04T22:30:46.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-06T00:31:01.000Z (3 days ago)
- Last Synced: 2024-11-06T01:27:01.390Z (3 days ago)
- Language: TypeScript
- Size: 51.8 KB
- Stars: 30
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-bun - bun-html-live-reload - Automatically reload html when Bun server hot reloads. (Extensions / Utilities)
README
# bun-html-live-reload
HTML live reload for Bun
## Installation
```sh
bun add -d bun-html-live-reload
```
## Getting Started
```ts
// example.ts
import { withHtmlLiveReload } from "bun-html-live-reload";
export default withHtmlLiveReload({
fetch: () => {
return new Response("
hello world", {
headers: { "Content-Type": "text/html" },
});
},
});
```
- Wrap your regular [hot reloading Bun server](https://bun.sh/docs/runtime/hot#http-servers) with `withHtmlLiveReload`.
- Run the server with `bun --hot example.ts`, open browser, and try to edit the `hello world` part.
- The page should live reload as you edit!
## Response Header
This plugin relies on response header to identify html file,
so don't forget to add `{ headers: { "Content-Type": "text/html" }, }` to your `Response`.
## Options
### `wsPath`
URL path used for websocket connection.
This library relies on websocket to live reload an HTML.
The path `wsPath` will be used to upgrade HTTP connection to websocket one.
For example, the default `wsPath` value `__bun_live_reload_websocket__`,
will upgrade `http://localhost:3000/__bun_live_reload_websocket__`
to `ws://localhost:3000/__bun_live_reload_websocket__`.
```ts
export default withHtmlLiveReload(
{
fetch: () => {
return new Response("
hello world", {
headers: { "Content-Type": "text/html" },
});
},
},
{
wsPath: "your_ws_path",
}
);
```
### React HMR: `watchPath`, `buildConfig`, and `onChange`
The `watchPath` is the file or folder path that should be watched to trigger the reloads. This could be used to reload html files on changing files in other folders like `src` for react projects.
The `buildConfig` is used for running the `Bun.build()` command when the files in the `watchPath` change. The `Bun.build()` command will always be run once before starting the server.
The `onChange` is a function which runs before `Bun.build()` when using `buildConfig` when the files in `watchPath` change. This command does not run at start.
```ts
export default withHtmlLiveReload(
{
...
},
{
watchPath: path.resolve(import.meta.dir, "src"),
buildConfig: {
entrypoints: ["./src/index.tsx"],
outdir: "./build"
},
onChange: async () => {
await $`rm -r ./dist`
}
}
);
```