ESBuild Plugin: Setup and usage docs. (#14720)

* Prep readme for Typedoc. Clean up metadata.

* Add license.

* Ignore generated readme.

* Flesh out TypeDoc.

* Flesh out copy, usage.

* web: Update package-lock.
This commit is contained in:
Teffen Ellis
2025-05-28 13:35:53 +02:00
committed by GitHub
parent c4bb19051d
commit 8f32242787
12 changed files with 447 additions and 48 deletions

View File

@ -0,0 +1,59 @@
_An ESBuild development plugin that watches for file changes and triggers automatic browser refreshes._
## Quick start
```sh
npm install -D @goauthentik/esbuild-plugin-live-reload
# Or with Yarn:
yarn add -D @goauthentik/esbuild-plugin-live-reload
```
### 1. Configure ESBuild
```js
import { liveReloadPlugin } from "@goauthentik/esbuild-plugin-live-reload";
import esbuild from "esbuild";
const NodeEnvironment = process.env.NODE_ENV || "development";
/**
* @type {esbuild.BuildOptions}
*/
const buildOptions = {
// ... Your build options.
define: {
"process.env.NODE_ENV": JSON.stringify(NodeEnvironment),
},
plugins: [
/** @see {@link LiveReloadPluginOptions} */
liveReloadPlugin(),
],
};
const buildContext = await esbuild.context(buildOptions);
await buildContext.rebuild();
await buildContext.watch();
```
### 2. Connect your browser
Add the following import near the beginning of your application's entry point.
```js
if (process.env.NODE_ENV === "development") {
await import("@goauthentik/esbuild-plugin-live-reload/client");
}
```
That's it! Your browser will now automatically refresh whenever ESBuild finishes rebuilding your code.
## About authentik
[authentik](https://goauthentik.io) is an open source Identity Provider that unifies your identity needs into a single platform, replacing Okta, Active Directory, and Auth0.
We built this plugin to streamline our development workflow, and we're sharing it with the community. If you have any questions, feature requests, or bug reports, please [open an issue](https://github.com/goauthentik/authentik/issues/new/choose).
## License
This code is licensed under the [MIT License](https://www.tldrlegal.com/license/mit-license)

View File

@ -0,0 +1,3 @@
README.md
node_modules
_media

View File

@ -0,0 +1,3 @@
node_modules
./README.md
out

View File

@ -0,0 +1,18 @@
The MIT License (MIT)
Copyright (c) 2025 Authentik Security, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
associated documentation files (the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge, publish, distribute,
sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial
portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -1,40 +0,0 @@
# `@goauthentik/esbuild-plugin-live-reload`
_A plugin that enables live reloading of ESBuild during development._
## Usage
### Node.js setup
```js
import { liveReloadPlugin } from "@goauthentik/esbuild-plugin-live-reload";
import esbuild from "esbuild";
const NodeEnvironment = process.env.NODE_ENV || "development";
/**
* @type {esbuild.BuildOptions}
*/
const buildOptions = {
// ... Your build options.
define: {
"process.env.NODE_ENV": JSON.stringify(NodeEnvironment),
},
plugins: [liveReloadPlugin(/** @see {@link LiveReloadPluginOptions} */)],
};
const buildContext = await esbuild.context(buildOptions);
await buildContext.rebuild();
await buildContext.watch();
```
### Browser setup
```js
// Place this at the beginning of your application's entry point.
if (process.env.NODE_ENV === "development") {
await import("@goauthentik/esbuild-plugin-live-reload/client");
}
```

View File

@ -28,6 +28,8 @@ const log = console.debug.bind(console, logPrefix);
* ```
*
* @implements {Disposable}
* @category Plugin
* runtime browser
*/
export class ESBuildObserver extends EventSource {
/**

View File

@ -1,2 +1,6 @@
/**
* @remarks Live reload plugin for ESBuild.
*/
export * from "./client/index.js";
export * from "./plugin/index.js";

View File

@ -19,6 +19,8 @@
"esbuild": "^0.25.4",
"prettier": "^3.5.3",
"prettier-plugin-packagejson": "^2.5.14",
"typedoc": "^0.28.5",
"typedoc-plugin-markdown": "^4.6.3",
"typescript": "^5.8.3"
},
"engines": {
@ -569,6 +571,20 @@
"node": ">=18"
}
},
"node_modules/@gerrit0/mini-shiki": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/@gerrit0/mini-shiki/-/mini-shiki-3.4.2.tgz",
"integrity": "sha512-3jXo5bNjvvimvdbIhKGfFxSnKCX+MA8wzHv55ptzk/cx8wOzT+BRcYgj8aFN3yTiTs+zvQQiaZFr7Jce1ZG3fw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@shikijs/engine-oniguruma": "^3.4.2",
"@shikijs/langs": "^3.4.2",
"@shikijs/themes": "^3.4.2",
"@shikijs/types": "^3.4.2",
"@shikijs/vscode-textmate": "^10.0.2"
}
},
"node_modules/@goauthentik/prettier-config": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@goauthentik/prettier-config/-/prettier-config-1.0.5.tgz",
@ -659,6 +675,55 @@
"url": "https://opencollective.com/pkgr"
}
},
"node_modules/@shikijs/engine-oniguruma": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.4.2.tgz",
"integrity": "sha512-zcZKMnNndgRa3ORja6Iemsr3DrLtkX3cAF7lTJkdMB6v9alhlBsX9uNiCpqofNrXOvpA3h6lHcLJxgCIhVOU5Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@shikijs/types": "3.4.2",
"@shikijs/vscode-textmate": "^10.0.2"
}
},
"node_modules/@shikijs/langs": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.4.2.tgz",
"integrity": "sha512-H6azIAM+OXD98yztIfs/KH5H4PU39t+SREhmM8LaNXyUrqj2mx+zVkr8MWYqjceSjDw9I1jawm1WdFqU806rMA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@shikijs/types": "3.4.2"
}
},
"node_modules/@shikijs/themes": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.4.2.tgz",
"integrity": "sha512-qAEuAQh+brd8Jyej2UDDf+b4V2g1Rm8aBIdvt32XhDPrHvDkEnpb7Kzc9hSuHUxz0Iuflmq7elaDuQAP9bHIhg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@shikijs/types": "3.4.2"
}
},
"node_modules/@shikijs/types": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.4.2.tgz",
"integrity": "sha512-zHC1l7L+eQlDXLnxvM9R91Efh2V4+rN3oMVS2swCBssbj2U/FBwybD1eeLaq8yl/iwT+zih8iUbTBCgGZOYlVg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@shikijs/vscode-textmate": "^10.0.2",
"@types/hast": "^3.0.4"
}
},
"node_modules/@shikijs/vscode-textmate": {
"version": "10.0.2",
"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
"integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
"dev": true,
"license": "MIT"
},
"node_modules/@trivago/prettier-plugin-sort-imports": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.2.tgz",
@ -694,6 +759,16 @@
}
}
},
"node_modules/@types/hast": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "*"
}
},
"node_modules/@types/node": {
"version": "22.15.21",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.21.tgz",
@ -704,6 +779,37 @@
"undici-types": "~6.21.0"
}
},
"node_modules/@types/unist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
"dev": true,
"license": "MIT"
},
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true,
"license": "Python-2.0"
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true,
"license": "MIT"
},
"node_modules/brace-expansion": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
"integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
"dev": true,
"license": "MIT",
"dependencies": {
"balanced-match": "^1.0.0"
}
},
"node_modules/debug": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@ -745,6 +851,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/esbuild": {
"version": "0.25.4",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.4.tgz",
@ -865,6 +984,16 @@
"node": ">=6"
}
},
"node_modules/linkify-it": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
"integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"uc.micro": "^2.0.0"
}
},
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@ -872,6 +1001,54 @@
"dev": true,
"license": "MIT"
},
"node_modules/lunr": {
"version": "2.3.9",
"resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
"integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
"dev": true,
"license": "MIT"
},
"node_modules/markdown-it": {
"version": "14.1.0",
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
"integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
"dev": true,
"license": "MIT",
"dependencies": {
"argparse": "^2.0.1",
"entities": "^4.4.0",
"linkify-it": "^5.0.0",
"mdurl": "^2.0.0",
"punycode.js": "^2.3.1",
"uc.micro": "^2.1.0"
},
"bin": {
"markdown-it": "bin/markdown-it.mjs"
}
},
"node_modules/mdurl": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
"dev": true,
"license": "MIT"
},
"node_modules/minimatch": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
},
"engines": {
"node": ">=16 || 14 >=14.17"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@ -950,6 +1127,16 @@
}
}
},
"node_modules/punycode.js": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
"integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/semver": {
"version": "7.7.2",
"dev": true,
@ -1016,6 +1203,43 @@
"url": "https://github.com/sponsors/SuperchupuDev"
}
},
"node_modules/typedoc": {
"version": "0.28.5",
"resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.28.5.tgz",
"integrity": "sha512-5PzUddaA9FbaarUzIsEc4wNXCiO4Ot3bJNeMF2qKpYlTmM9TTaSHQ7162w756ERCkXER/+o2purRG6YOAv6EMA==",
"dev": true,
"license": "Apache-2.0",
"dependencies": {
"@gerrit0/mini-shiki": "^3.2.2",
"lunr": "^2.3.9",
"markdown-it": "^14.1.0",
"minimatch": "^9.0.5",
"yaml": "^2.7.1"
},
"bin": {
"typedoc": "bin/typedoc"
},
"engines": {
"node": ">= 18",
"pnpm": ">= 10"
},
"peerDependencies": {
"typescript": "5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x"
}
},
"node_modules/typedoc-plugin-markdown": {
"version": "4.6.3",
"resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-4.6.3.tgz",
"integrity": "sha512-86oODyM2zajXwLs4Wok2mwVEfCwCnp756QyhLGX2IfsdRYr1DXLCgJgnLndaMUjJD7FBhnLk2okbNE9PdLxYRw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 18"
},
"peerDependencies": {
"typedoc": "0.28.x"
}
},
"node_modules/typescript": {
"version": "5.8.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
@ -1030,10 +1254,30 @@
"node": ">=14.17"
}
},
"node_modules/uc.micro": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
"integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
"dev": true,
"license": "MIT"
},
"node_modules/undici-types": {
"version": "6.21.0",
"dev": true,
"license": "MIT"
},
"node_modules/yaml": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
"integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
"dev": true,
"license": "ISC",
"bin": {
"yaml": "bin.mjs"
},
"engines": {
"node": ">= 14.6"
}
}
}
}

View File

@ -1,10 +1,14 @@
{
"name": "@goauthentik/esbuild-plugin-live-reload",
"version": "1.0.5",
"description": "ESBuild plugin to watch for file changes and trigger client-side reloads.",
"description": "ESBuild + browser refresh. Build completes, page reloads.",
"license": "MIT",
"scripts": {
"build": "tsc -p ."
"build": "npm run build:types && npm run build:docs",
"build:docs": "typedoc",
"build:types": "tsc -p .",
"prettier": "prettier --cache --write -u .",
"prettier-check": "prettier --cache --check -u ."
},
"main": "index.js",
"type": "module",
@ -34,6 +38,8 @@
"esbuild": "^0.25.4",
"prettier": "^3.5.3",
"prettier-plugin-packagejson": "^2.5.14",
"typedoc": "^0.28.5",
"typedoc-plugin-markdown": "^4.6.3",
"typescript": "^5.8.3"
},
"peerDependencies": {
@ -42,6 +48,19 @@
"engines": {
"node": ">=22"
},
"keywords": [
"esbuild",
"live-reload",
"browser",
"refresh",
"reload",
"authentik"
],
"repository": {
"type": "git",
"url": "git+https://github.com/goauthentik/authentik.git",
"directory": "web/packages/esbuild-plugin-live-reload"
},
"types": "./out/index.d.ts",
"files": [
"./index.js",

View File

@ -7,12 +7,18 @@
*/
import { findFreePorts } from "find-free-ports";
import * as http from "node:http";
import * as path from "node:path";
import { resolve as resolvePath } from "node:path";
/**
* Serializes a custom event to a text stream.
*
* @param {Event} event
* @returns {string}
*
* @category Server API
* @ignore
* @internal
* @runtime node
*/
export function serializeCustomEventToStream(event) {
// @ts-expect-error - TS doesn't know about the detail property
@ -54,17 +60,26 @@ async function findDisparatePort() {
* @property {string} pathname
* @property {EventTarget} dispatcher
* @property {string} [logPrefix]
*
* @category Server API
* @runtime node
*/
/**
* @typedef {(req: http.IncomingMessage, res: http.ServerResponse) => void} RequestHandler
*
* @category Server API
* @runtime node
*/
/**
* Create an event request handler.
*
* @param {EventServerInit} options
* @returns {RequestHandler}
* @category ESBuild
*
* @category Server API
* @runtime node
*/
export function createRequestHandler({ pathname, dispatcher, logPrefix = "Build Observer" }) {
const log = console.log.bind(console, `[${logPrefix}]`);
@ -129,6 +144,9 @@ export function createRequestHandler({ pathname, dispatcher, logPrefix = "Build
/**
* Options for the build observer plugin.
*
* @category Plugin API
* @runtime node
*
* @typedef {object} LiveReloadPluginOptions
*
* @property {HTTPServer | HTTPSServer} [server] A server to listen on. If not provided, a new server will be created.
@ -141,8 +159,7 @@ export function createRequestHandler({ pathname, dispatcher, logPrefix = "Build
/**
* Creates a plugin that listens for build events and sends them to a server-sent event stream.
*
* @param {
* } [options]
* @param {LiveReloadPluginOptions} [options]
* @returns {import('esbuild').Plugin}
*/
export function liveReloadPlugin(options = {}) {
@ -234,7 +251,7 @@ export function liveReloadPlugin(options = {}) {
location: error.location
? {
...error.location,
file: path.resolve(relativeRoot, error.location.file),
file: resolvePath(relativeRoot, error.location.file),
}
: null,
})),

View File

@ -6,5 +6,9 @@
"baseUrl": ".",
"checkJs": true,
"emitDeclarationOnly": true
}
},
"exclude": [
// ---
"**/out/**/*"
]
}

View File

@ -0,0 +1,66 @@
{
"$schema": "https://typedoc-plugin-markdown.org/schema.json",
"entryPoints": ["./plugin/index.js"],
"plugin": ["typedoc-plugin-markdown"],
"name": "ESBuild Plugin Live Reload",
"formatWithPrettier": true,
"prettierConfigFile": "@goauthentik/prettier-config",
"flattenOutputFiles": true,
"readme": ".github/README.md",
"mergeReadme": true,
"enumMembersFormat": "table",
"parametersFormat": "table",
"interfacePropertiesFormat": "table",
"typeDeclarationFormat": "table",
"indexFormat": "table",
"router": "module",
"jsDocCompatibility": true,
"defaultCategory": "Plugin API",
"disableSources": true,
"out": ".",
"cleanOutputDir": false,
"blockTags": [
"@runtime",
"@file",
"@defaultValue",
"@deprecated",
"@example",
"@param",
"@privateRemarks",
"@remarks",
"@returns",
"@see",
"@throws",
"@typeParam",
"@author",
"@callback",
"@category",
"@categoryDescription",
"@default",
"@document",
"@extends",
"@augments",
"@yields",
"@group",
"@groupDescription",
"@import",
"@inheritDoc",
"@jsx",
"@license",
"@module",
"@mergeModuleWith",
"@prop",
"@property",
"@return",
"@satisfies",
"@since",
"@template",
"@type",
"@typedef",
"@summary",
"@preventInline",
"@inlineType",
"@preventExpand",
"@expandType"
]
}