@roots/bud-client 6.6.8 → 6.6.10

package/lib/hot/client.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="webpack-env" />
 /**
  * Initializes bud.js HMR handling
- *
- * @public
  */
 export declare const client: (queryString: string, webpackHot: __WebpackModuleApi.Hot) => Promise<boolean>;
 //# sourceMappingURL=client.d.ts.map

package/lib/hot/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/hot/client.ts"],"names":[],"mappings":";AASA;;;;GAIG;AACH,eAAO,MAAM,MAAM,gBACJ,MAAM,cACP,mBAAmB,GAAG,qBA6InC,CAAA"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/hot/client.ts"],"names":[],"mappings":";AASA;;GAEG;AACH,eAAO,MAAM,MAAM,gBACJ,MAAM,cACP,mBAAmB,GAAG,qBA6InC,CAAA"}

package/lib/hot/client.js

@@ -16,8 +16,6 @@ import { makeLogger } from './log.js';
 import * as clientOptions from './options.js';
 /**
  * Initializes bud.js HMR handling
- *
- * @public
  */
 export const client = (queryString, webpackHot) => __awaiter(void 0, void 0, void 0, function* () {
     /* Guard: EventSource browser support */

package/lib/hot/components/overlay/overlay.component.d.ts

@@ -1,7 +1,5 @@
 /**
  * Component container
- *
- * @public
  */
 export declare class Component extends HTMLElement {
     name: string;

package/lib/hot/components/overlay/overlay.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/hot/components/overlay/overlay.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACjC,IAAI,EAAE,MAAM,CAAgB;IAEnC;;;;OAIG;IACI,OAAO,EAAE,GAAG,CAAA;IAEZ,iBAAiB,EAAE,GAAG,CAAA;IAE7B,IAAW,OAAO,WAEjB;;IAOM,YAAY,IAAI,IAAI;IA+G3B,WAAkB,kBAAkB,aAEnC;IAEM,wBAAwB;IAsBxB,iBAAiB;CAGzB"}
+{"version":3,"file":"overlay.component.d.ts","sourceRoot":"","sources":["../../../../src/hot/components/overlay/overlay.component.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW;IACjC,IAAI,EAAE,MAAM,CAAgB;IAEnC;;;;OAIG;IACI,OAAO,EAAE,GAAG,CAAA;IAEZ,iBAAiB,EAAE,GAAG,CAAA;IAE7B,IAAW,OAAO,WAEjB;;IAOM,YAAY,IAAI,IAAI;IA+G3B,WAAkB,kBAAkB,aAEnC;IAEM,wBAAwB;IAsBxB,iBAAiB;CAGzB"}

package/lib/hot/components/overlay/overlay.component.js

@@ -1,7 +1,5 @@
 /**
  * Component container
- *
- * @public
  */
 export class Component extends HTMLElement {
     get message() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@roots/bud-client",
   "description": "Client scripts for @roots/bud",
-  "version": "6.6.8",
+  "version": "6.6.10",
   "homepage": "https://roots.io/bud",
   "repository": {
     "type": "git",
@@ -10,12 +10,14 @@
   },
   "contributors": [
     {
-      "name": "kellymears",
+      "name": "Kelly Mears",
+      "email": "developers@tinypixel.dev",
       "url": "https://github.com/kellymears"
     },
     {
-      "name": "QWp6t",
-      "url": "https://github.com/QWp6t"
+      "name": "Ben Word",
+      "email": "ben@benword.com",
+      "url": "https://github.com/retlehs"
     }
   ],
   "license": "MIT",
@@ -34,7 +36,9 @@
     "node": ">=16"
   },
   "files": [
-    "lib/"
+    "docs",
+    "lib",
+    "src"
   ],
   "main": "./lib/index.cjs",
   "module": "./lib/index.mjs",
@@ -52,10 +56,23 @@
     }
   },
   "devDependencies": {
+    "@roots/bud": "6.6.10",
     "@skypack/package-check": "0.2.2",
-    "@types/node": "16.18.6",
+    "@types/node": "16.18.11",
     "@types/webpack-env": "1.18.0"
   },
+  "peerDependencies": {
+    "@roots/bud": "*",
+    "@types/webpack-env": "*"
+  },
+  "peerDependenciesMeta": {
+    "@roots/bud": {
+      "optional": true
+    },
+    "@types/webpack-env": {
+      "optional": true
+    }
+  },
   "volta": {
     "extends": "../../../package.json"
   }

package/src/hot/client.test.ts

@@ -0,0 +1,78 @@
+/* eslint-disable no-console */
+/**
+ * @vitest-environment jsdom
+ */
+import {describe, expect, it, vi} from 'vitest'
+
+import {client} from './client.js'
+import {injectEvents} from './events.js'
+import * as options from './options.js'
+
+// @ts-ignore
+global.EventSource = class Events {
+  public constructor() {}
+}
+
+window.EventSource = global.EventSource
+
+const Events = injectEvents(global.EventSource)
+
+// @ts-ignore
+const webpackHotMock = {
+  hot: vi.fn(),
+  status: vi.fn(),
+} as __WebpackModuleApi.Hot
+
+describe(`@roots/bud-client`, () => {
+  it(`should be a fn module`, () => {
+    expect(client).toBeInstanceOf(Function)
+  })
+
+  it(`should add window.bud`, async () => {
+    await client(`?name=test`, webpackHotMock)
+    expect(window.bud).toBeDefined()
+  })
+
+  it(`should add window.bud.hmr as an instance of EventSource`, async () => {
+    await client(`?name=test`, webpackHotMock)
+    expect(window.bud?.hmr?.test).toBeInstanceOf(EventSource)
+  })
+
+  it(`should set clientOptions`, async () => {
+    await client(`?name=test`, webpackHotMock)
+    expect(options.data).toEqual(
+      expect.objectContaining({
+        debug: true,
+        indicator: true,
+        log: true,
+        name: `@roots/bud-client`,
+        overlay: true,
+        path: `/bud/hot`,
+        reload: true,
+        timeout: 2000,
+      }),
+    )
+  })
+
+  it(`should call listener from onmessage`, async () => {
+    await client(`?name=test`, webpackHotMock)
+    const events = Events.make(options.data)
+
+    const listenerMock = vi.fn(async () => {})
+    events.addListener(listenerMock)
+
+    await events.onmessage(
+      // @ts-ignore
+      {
+        data: `{
+        "data": {
+          "hash": "test",
+          "action": "update"
+        }
+      }`,
+      },
+    )
+
+    expect(listenerMock).toHaveBeenCalled()
+  })
+})

package/src/hot/client.ts

@@ -0,0 +1,156 @@
+/* eslint-disable no-console */
+/* global __resourceQuery */
+/* global __webpack_hash__ */
+
+import * as components from './components/index.js'
+import {injectEvents} from './events.js'
+import {makeLogger} from './log.js'
+import * as clientOptions from './options.js'
+
+/**
+ * Initializes bud.js HMR handling
+ */
+export const client = async (
+  queryString: string,
+  webpackHot: __WebpackModuleApi.Hot,
+) => {
+  /* Guard: EventSource browser support */
+  if (typeof window?.EventSource === `undefined`) {
+    console.error(
+      `[bud] hot module reload requires EventSource to work. https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events#Tools`,
+    )
+    return false
+  }
+  /* Guard: webpackHot api availability */
+  if (!webpackHot) {
+    console.error(
+      `[bud] hot module reload requires the webpack hot api to be available`,
+    )
+    return false
+  }
+
+  /* Set client options from URL params */
+  const options = clientOptions.setFromParameters(queryString)
+  /* Setup logger */
+  const logger = makeLogger(options)
+
+  if (typeof window.bud === `undefined`) {
+    window.bud = {
+      current: {},
+      hmr: {},
+      controllers: [],
+      listeners: {},
+    }
+  }
+
+  if (!window.bud.current[options.name]) {
+    window.bud.current[options.name] = null
+  }
+
+  const isStale = (hash?: string) => {
+    if (hash) window.bud.current[options.name] = hash
+    return __webpack_hash__ === window.bud.current[options.name]
+  }
+
+  /**
+   * Webpack HMR check handler
+   *
+   * @internal
+   */
+  const check = async () => {
+    if (webpackHot.status() === `idle`) {
+      await webpackHot.check(false)
+
+      requestAnimationFrame(async function whenReady() {
+        if (webpackHot.status() === `ready`) {
+          await update()
+        } else {
+          requestAnimationFrame(whenReady)
+        }
+      })
+    }
+  }
+
+  /**
+   * Webpack HMR unaccepted module handler
+   *
+   * @internal
+   */
+  const onUnacceptedOrDeclined = (
+    info: __WebpackModuleApi.HotNotifierInfo,
+  ) => {
+    console.warn(`[${options.name}] ${info.type}`, info)
+    options.reload && window.location.reload()
+  }
+
+  /**
+   * Webpack HMR error handler
+   *
+   * @internal
+   */
+  const onErrored = (error: any) => {
+    window.bud.controllers.map(controller =>
+      controller?.update({
+        errors: [error],
+      }),
+    )
+  }
+
+  /**
+   * Webpack HMR update handler
+   *
+   * @internal
+   */
+  const update = async () => {
+    try {
+      await webpackHot.apply({
+        ignoreUnaccepted: true,
+        ignoreDeclined: true,
+        ignoreErrored: true,
+        onErrored,
+        onUnaccepted: onUnacceptedOrDeclined,
+        onDeclined: onUnacceptedOrDeclined,
+      })
+
+      if (!isStale()) await check()
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+
+  /* Instantiate indicator, overlay */
+  await components.make(options)
+
+  /* Instantiate eventSource */
+  const events = injectEvents(EventSource).make(options)
+
+  if (!window.bud.listeners[options.name]) {
+    window.bud.listeners[options.name] = async payload => {
+      if (!payload) return
+
+      if (options.reload && payload.action === `reload`)
+        return window.location.reload()
+
+      if (payload.name !== options.name) return
+      window.bud.controllers.map(controller => controller?.update(payload))
+
+      if (payload.errors?.length > 0) return
+
+      if (payload.action === `built` || payload.action === `sync`) {
+        if (isStale(payload.hash)) return
+
+        if (payload.action === `built`) {
+          logger.log(`built in ${payload.time}ms`)
+        }
+
+        await check()
+      }
+    }
+
+    /*
+     * Instantiate HMR event source
+     * and register client listeners
+     */
+    events.addListener(window.bud.listeners[options.name])
+  }
+}

package/src/hot/components/index.ts

@@ -0,0 +1,33 @@
+interface ControllerModule {
+  make: () => Promise<Controller>
+}
+
+export const make: (
+  options: Options,
+) => Promise<Array<Controller>> = async options => {
+  if (options.indicator && !customElements.get(`bud-activity-indicator`)) {
+    await import(`./indicator/index.js`)
+      .then(makeController)
+      .then(maybePushController)
+  }
+
+  if (options.overlay && !customElements.get(`bud-error`)) {
+    await import(`./overlay/index.js`)
+      .then(makeController)
+      .then(maybePushController)
+  }
+
+  return window.bud.controllers
+}
+
+const makeController = async (
+  module: ControllerModule,
+): Promise<Controller | undefined> => {
+  if (!module) return
+  return await module.make()
+}
+
+const maybePushController = (controller: Controller | undefined) => {
+  if (!controller) return
+  window.bud.controllers.push(controller)
+}

package/src/hot/components/indicator/index.ts

@@ -0,0 +1,11 @@
+import {Component} from './indicator.component.js'
+import {Controller} from './indicator.controller.js'
+
+export const make = async (): Promise<{
+  update: (data: Payload) => void
+}> => {
+  if (customElements.get(`bud-activity-indicator`)) return
+  customElements.define(`bud-activity-indicator`, Component)
+
+  return new Controller()
+}

package/src/hot/components/indicator/indicator.component.ts

@@ -0,0 +1,216 @@
+import {pulse} from './indicator.pulse.js'
+
+/**
+ * Indicator web component
+ * @public
+ */
+export class Component extends HTMLElement {
+  /**
+   * Has component rendered
+   * @public
+   */
+  public rendered: boolean
+
+  /**
+   * Component name
+   * @public
+   */
+  public name: string = `bud-activity-indicator`
+
+  /**
+   * Root div querySelector selector
+   * @public
+   */
+  public get selector() {
+    return `.${this.name}`
+  }
+
+  /**
+   * Timer
+   * @public
+   */
+  public hideTimeout: NodeJS.Timer
+
+  /**
+   * Get accessor: has errors
+   * @public
+   */
+  public get hasErrors(): boolean {
+    return this.getAttribute(`has-errors`) == `true`
+  }
+
+  /**
+   * Get accessor: has warnings
+   * @public
+   */
+  public get hasWarnings(): boolean {
+    return this.getAttribute(`has-warnings`) == `true`
+  }
+
+  /**
+   * Status indicator colors
+   * @public
+   */
+  public colors: Record<string, [number, number, number, number]> = {
+    success: [4, 120, 87, 1],
+    error: [220, 38, 38, 1],
+    warn: [252, 211, 77, 1],
+    pending: [59, 130, 246, 1],
+  }
+
+  /**
+   * Class constructor
+   * @public
+   */
+  public constructor() {
+    super()
+    this.renderShadow()
+  }
+
+  /**
+   * Render status indicator
+   * @public
+   */
+  public renderShadow() {
+    const container = document.createElement(`div`)
+    container.classList.add(this.name)
+    container.innerHTML = `
+    <style>
+    .bud-activity-indicator {
+      position: fixed;
+      width: 10px;
+      height: 10px;
+      left: 10px;
+      bottom: 10px;
+      z-index: 9999;
+      margin: 5px;
+      padding: 5px;
+      -webkit-transition:
+        all .6s ease-in-out,
+      transition:
+        all .6s ease-in-out;
+      animation-fill-mode: forwards;
+      pointer-events: none;
+      border-radius: 50%;
+      transform: scale(0);
+      opacity: 0;
+    }
+
+    .show {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 1);
+      transform: scale(1);
+      transition:
+        all .6s ease-in-out;
+    }
+
+    ${pulse(`success`, this.colors.success)}
+    ${pulse(`error`, this.colors.error)}
+    ${pulse(`warning`, this.colors.warn)}
+    ${pulse(`pending`, this.colors.pending)}
+
+    </style>
+    `
+
+    this.attachShadow({mode: `open`}).appendChild(container)
+  }
+
+  /**
+   * Show status indicator
+   * @public
+   */
+  public show() {
+    this.hideTimeout && clearTimeout(this.hideTimeout)
+    this.shadowRoot.querySelector(this.selector).classList.add(`show`)
+  }
+
+  /**
+   * Hide status indicator
+   */
+  public hide() {
+    this.hideTimeout = setTimeout(() => {
+      this.shadowRoot.querySelector(this.selector).classList.remove(`show`)
+    }, 2000)
+  }
+
+  /**
+   * Status is pending
+   * @public
+   */
+  public onPending() {
+    this.show()
+
+    this.shadowRoot
+      .querySelector(this.selector)
+      .classList.remove(`error`, `warning`, `success`)
+
+    this.shadowRoot.querySelector(this.selector).classList.add(`pending`)
+
+    this.hide()
+  }
+
+  /**
+   * Status is success
+   * @public
+   */
+  public onSuccess() {
+    this.show()
+
+    this.shadowRoot
+      .querySelector(this.selector)
+      .classList.remove(`error`, `warning`, `pending`)
+
+    this.shadowRoot.querySelector(this.selector).classList.add(`success`)
+
+    this.hide()
+  }
+
+  /**
+   * Status is error
+   * @public
+   */
+  public onError() {
+    this.show()
+
+    this.shadowRoot
+      .querySelector(this.selector)
+      .classList.remove(`warning`, `success`, `pending`)
+    this.shadowRoot.querySelector(this.selector).classList.add(`error`)
+  }
+
+  /**
+   * Status is warning
+   * @public
+   */
+  public onWarning() {
+    this.show()
+
+    this.shadowRoot
+      .querySelector(this.selector)
+      .classList.remove(`error`, `success`, `pending`)
+
+    this.shadowRoot.querySelector(this.selector).classList.add(`warning`)
+  }
+
+  public static get observedAttributes() {
+    return [`has-errors`, `has-warnings`, `action`]
+  }
+
+  public attributeChangedCallback() {
+    if (this.hasAttribute(`has-errors`)) return this.onError()
+    if (this.hasAttribute(`has-warnings`)) return this.onWarning()
+
+    if (
+      !this.hasAttribute(`has-errors`) &&
+      !this.hasAttribute(`has-warnings`) &&
+      this.getAttribute(`action`) === `built`
+    )
+      return this.onSuccess()
+
+    if (
+      this.getAttribute(`action`) == `building` ||
+      this.getAttribute(`action`) == `sync`
+    )
+      return this.onPending()
+  }
+}

package/src/hot/components/indicator/indicator.controller.ts

@@ -0,0 +1,76 @@
+/**
+ * Activity indicator controller
+ * @public
+ */
+export class Controller {
+  /**
+   * DOM node
+   * @public
+   */
+  public node: HTMLElement
+
+  /**
+   * Active WHM payload
+   * @public
+   */
+  public payload = null
+
+  /**
+   * Timer handler
+   * @public
+   */
+  public timer: NodeJS.Timeout
+
+  /**
+   * Initialization
+   * @public
+   */
+  public constructor() {
+    this.node = document.createElement(`bud-activity-indicator`)
+    this.update = this.update.bind(this)
+  }
+
+  /**
+   * Append `bud-error` element to the DOM
+   *
+   * @public
+   */
+  public addNode() {
+    if (document.body.querySelector(`bud-activity-indicator`)) {
+      if (typeof this.timer.unref === `function`) this.timer.unref()
+      this.removeNode()
+    }
+
+    document.body?.appendChild(this.node)
+    this.timer = setTimeout(this.removeNode, 3000)
+  }
+
+  /**
+   * Remove `bud-error` element from the DOM (if present)
+   *
+   * @public
+   */
+  public removeNode() {
+    document.body.querySelector(`bud-activity-indicator`)?.remove()
+  }
+
+  /**
+   * Update activity indicator
+   * @public
+   */
+  public update(payload: Payload) {
+    this.node.toggleAttribute(
+      `has-errors`,
+      payload.errors?.length ? true : false,
+    )
+
+    this.node.toggleAttribute(
+      `has-warnings`,
+      payload.warnings?.length ? true : false,
+    )
+
+    this.node.setAttribute(`action`, payload.action)
+
+    this.addNode()
+  }
+}

package/src/hot/components/indicator/indicator.pulse.ts

@@ -0,0 +1,43 @@
+export interface pulse {
+  (name: string, color: [number, number, number]): string
+}
+
+/**
+ * CSS animation for reload indicator
+ * @public
+ */
+export const pulse = (
+  name: string,
+  color: [number, number, number, number],
+): string => `
+  .${name} {
+    box-shadow: 0 0 0 0 rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]});
+    animation: ${name}__pulse 2s infinite;
+    transition: all 0.4s ease-in-out;
+  }
+
+  .${name}:not(.show) {
+    background-color: rgba(${color[0]}, ${color[1]}, ${color[2]}, 0);
+  }
+
+  .${name}.show {
+    background-color: rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]});
+  }
+
+  @keyframes ${name}__pulse {
+    0% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7);
+    }
+
+    70% {
+      transform: scale(1);
+      box-shadow: 0 0 0 10px rgba(${color[0]}, ${color[1]}, ${color[2]}, 0);
+    }
+
+    100% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(${color[0]}, ${color[1]}, ${color[2]}, 0);
+    }
+  }
+`

package/src/hot/components/overlay/index.ts

@@ -0,0 +1,12 @@
+import {Component} from './overlay.component.js'
+import {Controller} from './overlay.controller.js'
+
+export const make = async (): Promise<{
+  update: (data: Payload) => void
+}> => {
+  if (customElements.get(`bud-error`)) return
+
+  customElements.define(`bud-error`, Component)
+
+  return new Controller()
+}

package/src/hot/components/overlay/overlay.component.ts

@@ -0,0 +1,165 @@
+/**
+ * Component container
+ */
+export class Component extends HTMLElement {
+  public name: string = `bud-overlay`
+
+  /**
+   * WHM payload
+   *
+   * @public
+   */
+  public payload: any
+
+  public documentBodyStyle: any
+
+  public get message() {
+    return this.getAttribute(`message`)
+  }
+
+  public constructor() {
+    super()
+    this.renderShadow()
+  }
+
+  public renderShadow(): void {
+    const container = document.createElement(`div`)
+    container.classList.add(`overlay`)
+    container.innerHTML = `
+      <style>
+        .overlay {
+          width: 100vw;
+          backdrop-filter: blur(10px);
+          display: flex;
+          height: 100vh;
+          border-top: 2px solid transparent;
+          overflow-x: hidden;
+          overflow-y: scroll;
+          position: absolute;
+          top: -1000px;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          opacity: 0;
+          transition: opacity 0.2s ease-in-out, border 0.4s ease-in-out;
+          justify-content: center;
+        }
+
+        .visible {
+          position: fixed;
+          top: 0;
+          z-index: 9998;
+          opacity: 1;
+          border-top: 5px solid red;
+          transition: opacity 0.2s ease-in-out, border 0.4s ease-in-out;
+          max-width: 100vw;
+        }
+
+        .messages {
+          background-color: white;
+          border-radius: 5px;
+          filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+          display: flex;
+          align-self: center;
+          width: 800px;
+          max-width: 90vw;
+          margin-left: auto;
+          margin-right: auto;
+          flex-direction: column;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: center;
+          padding: 2rem 2rem 0rem 2rem;
+        }
+
+        .visible .messages > div {
+          position: relative;
+          top: 0;
+          opacity: 1;
+          transition: all: 0.2s ease-in-out;
+        }
+
+        .messages > div {
+          position: relative;
+          top: 20px;
+          opacity: 0;
+          transition: all: 0.2s ease-in-out;
+          align-items: center;
+          align-content: center;
+          color: rgba(0, 0, 0, 0.87);
+          flex-direction: column;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+          padding: 0rem 2rem 2rem 2rem;
+          width: 100%;
+          max-width:95vw;
+        }
+
+        .messages > div > pre {
+          font-weight: 300;
+          font-size: 0.8rem;
+          overflow-x: scroll;
+        }
+
+        pre {
+          background: #303030;
+          color: #f1f1f1;
+          padding: 10px 16px;
+          border-radius: 2px;
+          border-top: 4px solid #dd0303;
+          -moz-box-shadow: inset 0 0 10px #000;
+          box-shadow: inset 0 0 10px #000;
+          counter-reset: line;
+        }
+
+        pre span {
+          display: block;
+          line-height: 1.5rem;
+        }
+
+        pre span:before {
+          counter-increment: line;
+          content: counter(line);
+          display: inline-block;
+          border-right: 1px solid #ddd;
+          padding: 0 .5em;
+          margin-right: .5em;
+          color: #888;
+          width: 30px;
+        }
+      </style>
+      <div class="messages"></div>
+    `
+
+    this.attachShadow({mode: `open`}).appendChild(container)
+  }
+
+  public static get observedAttributes() {
+    return [`message`]
+  }
+
+  public attributeChangedCallback() {
+    if (!this.documentBodyStyle)
+      this.documentBodyStyle = document.body?.style
+
+    if (this.getAttribute(`message`)) {
+      document.body.style.overflow = `hidden`
+
+      this.shadowRoot.querySelector(`.overlay`).classList.add(`visible`)
+
+      this.shadowRoot.querySelector(`.messages`).innerHTML =
+        this.getAttribute(`message`)
+
+      return
+    }
+
+    if (this.documentBodyStyle?.overflow && document?.body?.style) {
+      document.body.style.overflow = this.documentBodyStyle.overflow
+    }
+
+    this.shadowRoot.querySelector(`.overlay`).classList.remove(`visible`)
+  }
+
+  public connectedCallback() {
+    if (document.body?.style) this.documentBodyStyle = document.body.style
+  }
+}

package/src/hot/components/overlay/overlay.controller.ts

@@ -0,0 +1,86 @@
+const ansiPattern = [
+  `[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)`,
+  `(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))`,
+].join(`|`)
+
+const stripAnsi = (body: string) =>
+  body?.replace?.(new RegExp(ansiPattern, `g`), ``) ?? body
+
+/**
+ * Overlay controller
+ * @public
+ */
+export class Controller {
+  /**
+   * Element
+   * @public
+   */
+  public element: HTMLElement
+
+  /**
+   * HMR update
+   * @public
+   */
+  public payload: Payload
+
+  /**
+   * Formatted error message
+   * @public
+   */
+  public get message(): string {
+    return this.payload.errors?.reduce((a, c) => {
+      const msg = c?.message ?? c?.error ?? c
+      if (!msg) return a
+      return `${a}
+        <div>
+          <pre>${stripAnsi(msg)}</pre>
+        </div>`
+    }, ``)
+  }
+
+  /**
+   * Class constructor
+   *
+   * @public
+   */
+  public constructor() {
+    this.update = this.update.bind(this)
+    this.element = document.createElement(`bud-error`)
+  }
+
+  /**
+   * Append `bud-error` element to the DOM
+   *
+   * @public
+   */
+  public createError() {
+    !document.body.querySelector(`bud-error`) &&
+      document.body?.appendChild(this.element)
+  }
+
+  /**
+   * Remove `bud-error` element from the DOM (if present)
+   *
+   * @public
+   */
+  public removeError() {
+    document.body.querySelector(`bud-error`)?.remove()
+  }
+
+  /**
+   * Update DOM
+   *
+   * @public
+   */
+  public update(payload: Payload): void {
+    this.payload = payload
+
+    this.element.setAttribute(`message`, this.message ?? ``)
+
+    if (this.payload.errors?.length > 0) {
+      return this.createError()
+    }
+
+    this.removeError()
+  }
+}

package/src/hot/events.ts

@@ -0,0 +1,95 @@
+/* eslint-disable no-console */
+
+export const injectEvents = (
+  eventSource: new (path: string) => EventSource,
+) => {
+  /**
+   * EventSource wrapper
+   *
+   * @remarks
+   * wraps EventSource in a function to allow for
+   * mocking in tests
+   *
+   * @public
+   */
+  return class Events extends eventSource {
+    /**
+     * Registered listeners
+     *
+     * @public
+     */
+    public listeners: Set<Listener> = new Set<Listener>()
+
+    /**
+     * Class constructor
+     *
+     * @remarks
+     * Singleton interface, so this is private.
+     *
+     * @public
+     */
+    private constructor(
+      public options: Partial<Options> & {name: string; path: string},
+    ) {
+      super(options.path)
+
+      this.onopen = this.onopen.bind(this)
+      this.onmessage = this.onmessage.bind(this)
+      this.addListener = this.addListener.bind(this)
+    }
+
+    /**
+     * Singleton constructor
+     *
+     * @public
+     */
+    public static make(
+      options: Partial<Options> & {name: string; path: string},
+    ): Events {
+      if (typeof window.bud.hmr[options.name] === `undefined`)
+        Object.assign(window.bud.hmr, {
+          [options.name]: new Events(options),
+        })
+
+      return window.bud.hmr[options.name]
+    }
+
+    /**
+     * EventSource `onopen` handler
+     * @public
+     */
+    public override onopen = function () {}
+
+    /**
+     * EventSource `onmessage` handler
+     * @public
+     */
+    public override onmessage = async function (payload: MessageEvent) {
+      if (!payload?.data || payload.data == `\uD83D\uDC93`) {
+        return
+      }
+
+      try {
+        const data = JSON.parse(payload.data)
+        if (!data) return
+
+        await Promise.all(
+          [...this.listeners].map(async listener => {
+            return await listener(data)
+          }),
+        )
+      } catch (ex) {
+        console.warn(`Invalid HMR message: ${payload.data} \n  ${ex}`)
+      }
+    }
+
+    /**
+     * EventSource `addMessageListener` handler
+     * @public
+     */
+    public addListener(listener: Listener): this {
+      this.listeners.add(listener)
+      return this
+    }
+  }
+}

package/src/hot/index.cts

@@ -0,0 +1,7 @@
+/* eslint-disable no-console */
+/* global __resourceQuery */
+/* global module */
+
+import {client} from './client.js'
+
+client(__resourceQuery, module.hot)

package/src/hot/index.mts

@@ -0,0 +1,9 @@
+/* eslint-disable no-console */
+/* global __resourceQuery */
+/* global module */
+
+;(async () =>
+  await import(`./client.js`).then(
+    async module =>
+      await module.client(__resourceQuery, import.meta.webpackHot),
+  ))()

package/src/hot/log.ts

@@ -0,0 +1,42 @@
+/* eslint-disable no-console */
+
+export const makeLogger = (options: Options) => {
+  return {
+    log: makeLog(options),
+    error: makeError(options),
+    warn: makeWarn(options),
+    info: makeInfo(options),
+  }
+}
+
+let lastLog: string = null
+export const makeLog = options => {
+  return (...args) => {
+    if (options.log) {
+      if (lastLog === args.join(``)) return
+      lastLog = args.join(``)
+
+      console.log(`[${options.name}]`, ...args)
+    }
+  }
+}
+
+export const makeInfo = options => {
+  return (...args) => {
+    if (options.log) {
+      console.info(`[${options.name}]`, ...args)
+    }
+  }
+}
+
+export const makeError = options => {
+  return (...args) => {
+    console.error(`[${options.name}]`, ...args)
+  }
+}
+
+export const makeWarn = options => {
+  return (...args) => {
+    console.warn(`[${options.name}]`, ...args)
+  }
+}

package/src/hot/options.ts

@@ -0,0 +1,40 @@
+/**
+ * Client options
+ * @public
+ */
+let data: Options = {
+  timeout: 2000,
+  reload: true,
+  name: `@roots/bud-client`,
+  debug: true,
+  log: true,
+  indicator: true,
+  overlay: true,
+  path: `/bud/hot`,
+}
+
+/**
+ * Get client option
+ * @public
+ */
+const get = (name?: string, key?: string) =>
+  key ? data[name][key] : data[name]
+
+/**
+ * Set client data based on URL parameters
+ * @public
+ */
+const setFromParameters = (query: string): Options => {
+  let parsedParams: Partial<Options> = {}
+
+  new window.URLSearchParams(query).forEach((value, key) => {
+    parsedParams[key] =
+      value === `true` ? true : value === `false` ? false : value
+  })
+
+  data[parsedParams.name] = {...data, ...parsedParams}
+
+  return data[parsedParams.name]
+}
+
+export {data, get, setFromParameters}

package/src/index.cts

@@ -0,0 +1,16 @@
+// Copyright © Roots Software Foundation LLC
+// Licensed under the MIT license.
+
+/**
+ * `@roots/bud` client scripts
+ *
+ * You should not import this root module.
+ * Import the components from the submodules instead.
+ *
+ * @see https://bud.js.org
+ * @see https://github.com/roots/bud
+ *
+ *  @packageDocumentation
+ */
+
+export {}

package/src/index.mts

@@ -0,0 +1,16 @@
+// Copyright © Roots Software Foundation LLC
+// Licensed under the MIT license.
+
+/**
+ * `@roots/bud` client scripts
+ *
+ * You should not import this root module.
+ * Import the components from the submodules instead.
+ *
+ * @see https://bud.js.org
+ * @see https://github.com/roots/bud
+ *
+ *  @packageDocumentation
+ */
+
+export {}

package/src/intercept/index.ts

@@ -0,0 +1,33 @@
+type Target = HTMLAnchorElement | HTMLLinkElement | HTMLFormElement
+type ElementTuple = [HTMLCollectionOf<Target>, any]
+
+const intercept = (...args: [string, string]) => {
+  args.every(arg => typeof arg === `string`) &&
+    setInterval(
+      () =>
+        [
+          [document.getElementsByTagName(`a`), `href`],
+          [document.getElementsByTagName(`link`), `href`],
+        ]
+          .map(
+            ([elements, attribute]: ElementTuple): [
+              Array<Target>,
+              any,
+            ] => [Array.from(elements), attribute],
+          )
+          .forEach(([elements, attribute]: [Array<Target>, any]) =>
+            elements
+              .filter(el => el.hasAttribute(attribute))
+              .filter(el => !el.hasAttribute(`__bud_processed`))
+              .filter(el => el.getAttribute(attribute).startsWith(args[0]))
+              .map(el => {
+                const value = el.getAttribute(attribute).replace(...args)
+                el.setAttribute(attribute, value)
+                el.toggleAttribute(`__bud_processed`)
+              }),
+          ),
+      1000,
+    )
+}
+
+export default intercept

package/src/intercept/proxy-click-interceptor.ts

@@ -0,0 +1,18 @@
+/* eslint-disable no-console */
+/* global __resourceQuery */
+
+import intercept from './index.js'
+
+window.requestAnimationFrame(async function ready() {
+  if (!__resourceQuery) return
+
+  const params = new URLSearchParams(__resourceQuery)
+  if (!params || !params.has(`search`) || !params.has(`replace`)) return
+
+  const search = decodeURI(params.get(`search`))
+  const replace = decodeURI(params.get(`replace`))
+
+  return document.body
+    ? intercept(search, replace)
+    : window.requestAnimationFrame(ready)
+})

package/src/types/index.d.ts

@@ -0,0 +1,54 @@
+declare var __resourceQuery: string
+declare var __webpack_hash__: string
+
+interface Listener {
+  (event: Payload): void
+}
+
+declare interface Events {
+  options: Partial<Options> & {name: string; path: string}
+  listeners: Set<Listener>
+  addListener(fn: Listener): this
+  onopen: (ev?: Event) => void
+  onmessage: (ev?: MessageEvent) => void
+}
+
+declare interface Payload {
+  name: string
+  type: `middleware` | __WebpackModuleApi.HotNotifierInfo[`type`]
+  action: 'reload' | 'sync' | 'building' | 'built'
+  hash?: string
+  time?: number
+  errors?: Array<Record<string, any>>
+  warnings?: Array<string>
+  message?: string
+  modules?: Record<string, Array<string>>
+}
+
+declare interface Controller {
+  update: (payload: Partial<Payload>) => void
+}
+
+declare interface Options {
+  timeout: number
+  reload: boolean
+  debug: boolean
+  log: boolean
+  name: string
+  path: string
+  indicator: boolean
+  overlay: boolean
+}
+
+declare var bud: {
+  current?: Record<string, string>
+  controllers?: Array<Controller>
+  hmr?: Record<string, Events & EventSource>
+  listeners?: Record<string, Listener>
+}
+
+declare module global {
+  interface Window {
+    bud: typeof bud
+  }
+}