### bun-html-live-reload v0.1 Usage Example

Source: https://github.com/aabccd021/bun-html-live-reload/blob/main/README.md

Presents a code example demonstrating the usage of bun-html-live-reload version 0.1. This version wrapped the entire Bun server and included options for watching paths and build configurations.

```ts
import { withHtmlLiveReload } from "bun-html-live-reload";
import { $ } from "bun";

export default Bun.serve(
  withHtmlLiveReload(
    {
      fetch: (request) => {
        /* ... */
      }
    },
    {
      watchPath: path.resolve(import.meta.dir, "src"),
      buildConfig: {
        entrypoints: ["./src/index.tsx"],
        outdir: "./build"
      },
      onChange: async () => {
        await $`rm -r ./dist`;
      }
    }
  )
);
```

--------------------------------

### Install bun-html-live-reload

Source: https://github.com/aabccd021/bun-html-live-reload/blob/main/README.md

Installs the bun-html-live-reload package as a development dependency using Bun's package manager.

```sh
bun add -d bun-html-live-reload
```

--------------------------------

### bun-html-live-reload v1.0 Migration Example

Source: https://github.com/aabccd021/bun-html-live-reload/blob/main/README.md

Illustrates the updated usage pattern for bun-html-live-reload version 1.0, showing how to adapt from v0.1. This version separates the build process and file watching from the live reload integration, utilizing `reloadClients` for manual refreshes after builds.

```ts
import { withHtmlLiveReload, reloadClients } from "bun-html-live-reload";
import { FSWatcher, watch } from "fs";
import { $ } from "bun";

const buildConfig = {
  entrypoints: ["./src/index.tsx"],
  outdir: "./build"
};

Bun.build(buildConfig);

watch(path.resolve(import.meta.url, "src")).on("change", async () => {
  await $`rm -r ./dist`;
  await Bun.build(buildConfig);
  reloadClients();
});

Bun.serve({
  fetch: withHtmlLiveReload(async (request) => {
    /* ... */
  })
});
```

--------------------------------

### Configure bun-html-live-reload Options

Source: https://github.com/aabccd021/bun-html-live-reload/blob/main/README.md

Illustrates how to customize the behavior of bun-html-live-reload by providing an options object to `withHtmlLiveReload`. This allows specifying custom paths for SSE and the live reload script, and disabling auto-reloading.

```ts
Bun.serve({
  fetch: withHtmlLiveReload(
    async (request) => {
      /* ... */
    },
    {
      // SSE Path
      // default: "/__dev__/reload"
      eventPath: "/__reload",

      // Live reload script path
      // default: "/__dev__/reload.js"
      scriptPath: "/__reload.js",

      // Wether to enable auto reload.
      // If false, you need to manually call `reloadClients` function to reload clients.
      // default: true
      autoReload: false
    }
  )
});
```

--------------------------------

### Basic HTML Live Reload with Bun.serve

Source: https://github.com/aabccd021/bun-html-live-reload/blob/main/README.md

Demonstrates how to integrate bun-html-live-reload with Bun's HTTP server. It wraps the fetch function to enable live reloading for HTML responses, requiring the 'Content-Type: text/html' header.

```ts
// example.ts
import { withHtmlLiveReload } from "bun-html-live-reload";

Bun.serve({
  fetch: withHtmlLiveReload(async (request) => {
    return new Response("<div>hello world</div>", {
      headers: { "Content-Type": "text/html" }
    });
  })
});
```

--------------------------------

### Manually Trigger Live Reload for Clients

Source: https://github.com/aabccd021/bun-html-live-reload/blob/main/README.md

Shows how to use the `reloadClients` function to programmatically refresh connected browser tabs. This is useful for scenarios where auto-reloading is disabled or when a custom build process requires a manual refresh.

```ts
import { withHtmlLiveReload, reloadClients } from "bun-html-live-reload";

Bun.serve({
  fetch: withHtmlLiveReload(async (request) => {
    /* ... */
  })
});

// reload clients every second
setInterval(() => {
  reloadClients();
}, 1000);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.