@jgoz/esbuild-plugin-livereload v2.0.4

@jgoz/esbuild-plugin-livereload

An esbuild plugin that reloads the browser window after you make changes. CSS-only changes are hot reloaded (i.e., without a full page refresh) by default.

Features

• Reloads the browser window when new JS assets are emitted
• Hot-reloads CSS files (configurable) without flashes of unstyled content
• Adds a dismissable error/warning overlay for esbuild output
  • Can be used by other plugins by importing the notify function

How is this different from esbuild's built-in livereload (0.17.0+)?

• Doesn't require use of esbuild's serve() API
• Doesn't require any extra code — client script is injected into the bundle
• Includes an overlay for displaying error messages in the browser

Install

$ npm i @jgoz/esbuild-plugin-livereload

Usage

Add it to your esbuild plugins:

const esbuild = require('esbuild');
const { livereloadPlugin } = require('@jgoz/esbuild-plugin-livereload');

await esbuild.build({
  // ...
  plugins: [livereloadPlugin()],
});

Note that this will have no effect for Node programs.

Plugin API

function livereloadPlugin(options?: LivereloadPluginOptions): Plugin

Plugin options:

Notification API

If you are implementing an esbuild plugin that can emit its own errors or warnings, you may add this package as an optional peerDependency and use the notify function to send those messages to the error overlay.

function notify(errorSource: string, msg: ClientMessage): void

Notifies connected clients that errors or warnings occurred from a given source. If there are no errors and the notification originates from esbuild, the page will be sent a reload request.

ClientMessage