From b23f695f5c05e1877f06043bcaef861a4a7170dc Mon Sep 17 00:00:00 2001 From: John Gozde Date: Tue, 21 May 2024 17:22:17 -0600 Subject: [PATCH] Expose urlHostname option See #114 --- .changeset/modern-eggs-visit.md | 7 +++++ packages/esbuild-plugin-livereload/README.md | 5 ++-- .../src/livereload-plugin.ts | 28 +++++++++++++++++-- .../esbuild-plugin-livereload/src/server.ts | 5 ++-- 4 files changed, 38 insertions(+), 7 deletions(-) create mode 100644 .changeset/modern-eggs-visit.md diff --git a/.changeset/modern-eggs-visit.md b/.changeset/modern-eggs-visit.md new file mode 100644 index 0000000..fd0daf8 --- /dev/null +++ b/.changeset/modern-eggs-visit.md @@ -0,0 +1,7 @@ +--- +'@jgoz/esbuild-plugin-livereload': minor +--- + +Expose urlHostname option + +Fixes #114 diff --git a/packages/esbuild-plugin-livereload/README.md b/packages/esbuild-plugin-livereload/README.md index bfa383c..18c68ec 100644 --- a/packages/esbuild-plugin-livereload/README.md +++ b/packages/esbuild-plugin-livereload/README.md @@ -48,8 +48,9 @@ Note that this will have no effect for Node programs. | Name | Type | Default | Description | | ---- | ---- | ------- | ----------- | | fullReloadOnCssUpdates | `boolean` | `false` | Instead of hot-reloading CSS files, trigger a full page reload when CSS is updated. | -| host | `string` | `127.0.0.1` | Host that the livereload server will run on. | +| host | `string` | `127.0.0.1` | Host that the livereload server will run on.

Setting this value to '0.0.0.0' will allow external connections, e.g., when running the livereload server on a different system from the connecting web browser. This setup likely requires setting `urlHostname` to the either the IP address or local DNS name of the livereload system. | | port | `number` | `53099` | Port that the livereload server will run on. | +| urlHostname | `string` | - | Hostname to use when connecting to the livereload server.

This option might be useful when running the livereload server on a different system from the connecting web browser.

Defaults to the value specified in `host`. | @@ -69,7 +70,7 @@ from esbuild, the page will be sent a reload request. | ---- | ---- | ------- | ----------- | | errorSource (*) | `string` | - | Key to use when identifying these errors and warnings. Previous results will be overwritten for the same `errorSource`. | | msg (*) | `ClientMessage` | - | Object containing errors and warnings from the given source | -| connectedClients | `Set>` | `clients` | Set of long-lived server responses representing clients currently connected to the livereload server. Only required if you are implementing your own livereload server. | +| connectedClients | `Set>` | `clients` | Set of long-lived server responses representing clients currently connected to the livereload server. Only required if you are implementing your own livereload server. | diff --git a/packages/esbuild-plugin-livereload/src/livereload-plugin.ts b/packages/esbuild-plugin-livereload/src/livereload-plugin.ts index 1f594ef..ac9f7eb 100644 --- a/packages/esbuild-plugin-livereload/src/livereload-plugin.ts +++ b/packages/esbuild-plugin-livereload/src/livereload-plugin.ts @@ -59,9 +59,25 @@ export interface LivereloadPluginOptions { /** * Host that the livereload server will run on. * + * Setting this value to '0.0.0.0' will allow external + * connections, e.g., when running the livereload server + * on a different system from the connecting web browser. + * This setup likely requires setting `urlHostname` to the + * either the IP address or local DNS name of the livereload system. + * * @default 127.0.0.1 */ host?: string; + + /** + * Hostname to use when connecting to the livereload server. + * + * This option might be useful when running the livereload + * server on a different system from the connecting web browser. + * + * Defaults to the value specified in `host`. + */ + urlHostname?: string; } /** @@ -72,8 +88,8 @@ export interface LivereloadPluginOptions { * @returns - An esbuild plugin that enables livereload. */ export function livereloadPlugin(options: LivereloadPluginOptions = {}): Plugin { - const { port = 53099, host = '127.0.0.1' } = options; - const baseUrl = `http://${host}:${port}/`; + const { port = 53099, host = '127.0.0.1', urlHostname = host } = options; + const baseUrl = `http://${urlHostname}:${port}/`; return { name: 'livereload-plugin', @@ -82,7 +98,13 @@ export function livereloadPlugin(options: LivereloadPluginOptions = {}): Plugin const bannerTemplate = await fsp.readFile(require.resolve('../banner.js'), 'utf-8'); const banner = bannerTemplate.replace(/{baseUrl}/g, baseUrl); - await createLivereloadServer({ basedir, host, port, onSSE: res => clients.add(res) }); + await createLivereloadServer({ + basedir, + host, + port, + urlHostname, + onSSE: res => clients.add(res), + }); build.initialOptions.banner ??= {}; if (build.initialOptions.banner.js) { diff --git a/packages/esbuild-plugin-livereload/src/server.ts b/packages/esbuild-plugin-livereload/src/server.ts index 0863fcb..098853b 100644 --- a/packages/esbuild-plugin-livereload/src/server.ts +++ b/packages/esbuild-plugin-livereload/src/server.ts @@ -10,6 +10,7 @@ export interface LivereloadServerOptions { basedir: string; port: number; host: string; + urlHostname?: string; onSSE: (res: ServerResponse) => void; } @@ -24,13 +25,13 @@ export type LivereloadRequestHandler = (req: IncomingMessage, res: ServerRespons export async function createLivereloadRequestHandler( options: LivereloadServerOptions, ): Promise { - const { port, host, onSSE, basedir } = options; + const { port, host, onSSE, basedir, urlHostname = host } = options; const distFiles = await fs.promises.readdir(__dirname); return function handleLivereloadRequest(req, res): boolean { if (!req.url) return false; - const url = new URL(req.url, `http://${host}:${port}/`); + const url = new URL(req.url, `http://${urlHostname}:${port}/`); if (url.pathname === '/esbuild') { onSSE(