@roots/bud-client 6.13.0 → 6.13.1

package/lib/hot/client.js

@@ -25,9 +25,9 @@ export const client = async (queryString, webpackHot) => {
     const logger = makeLogger(options);
     if (typeof window.bud === `undefined`) {
         window.bud = {
+            controllers: [],
             current: {},
             hmr: {},
-            controllers: [],
             listeners: {},
         };
     }
@@ -76,12 +76,12 @@ export const client = async (queryString, webpackHot) => {
     const update = async () => {
         try {
             await webpackHot.apply({
-                ignoreUnaccepted: true,
                 ignoreDeclined: true,
                 ignoreErrored: true,
+                ignoreUnaccepted: true,
+                onDeclined: onUnacceptedOrDeclined,
                 onErrored,
                 onUnaccepted: onUnacceptedOrDeclined,
-                onDeclined: onUnacceptedOrDeclined,
             });
             if (!isStale())
                 await check();

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

@@ -4,49 +4,43 @@
  */
 export declare class Component extends HTMLElement {
     /**
-     * Has component rendered
-     */
-    rendered: boolean;
-    /**
-     * Component name
-     */
-    name: string;
-    /**
-     * Root div querySelector selector
+     * Status indicator colors
      */
-    get selector(): string;
+    colors: Record<string, [number, number, number, number]>;
     /**
      * Timer
      */
     hideTimeout: NodeJS.Timer;
     /**
-     * Get accessor: has errors
-     */
-    get hasErrors(): boolean;
-    /**
-     * Get accessor: has warnings
+     * Component name
      */
-    get hasWarnings(): boolean;
+    name: string;
     /**
-     * Status indicator colors
+     * Has component rendered
      */
-    colors: Record<string, [number, number, number, number]>;
+    rendered: boolean;
     /**
      * Class constructor
      */
     constructor();
+    static get observedAttributes(): string[];
+    attributeChangedCallback(): void;
     /**
-     * Render status indicator
+     * Get accessor: has errors
      */
-    renderShadow(): void;
+    get hasErrors(): boolean;
     /**
-     * Show status indicator
+     * Get accessor: has warnings
      */
-    show(): void;
+    get hasWarnings(): boolean;
     /**
      * Hide status indicator
      */
     hide(): void;
+    /**
+     * Status is error
+     */
+    onError(): void;
     /**
      * Status is pending
      */
@@ -55,14 +49,20 @@ export declare class Component extends HTMLElement {
      * Status is success
      */
     onSuccess(): void;
-    /**
-     * Status is error
-     */
-    onError(): void;
     /**
      * Status is warning
      */
     onWarning(): void;
-    static get observedAttributes(): string[];
-    attributeChangedCallback(): void;
+    /**
+     * Render status indicator
+     */
+    renderShadow(): void;
+    /**
+     * Root div querySelector selector
+     */
+    get selector(): string;
+    /**
+     * Show status indicator
+     */
+    show(): void;
 }

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

@@ -4,10 +4,40 @@ import { pulse } from './indicator.pulse.js';
  */
 export class Component extends HTMLElement {
     /**
-     * Root div querySelector selector
+     * Class constructor
      */
-    get selector() {
-        return `.${this.name}`;
+    constructor() {
+        super();
+        /**
+         * Status indicator colors
+         */
+        this.colors = {
+            error: [220, 38, 38, 1],
+            pending: [59, 130, 246, 1],
+            success: [4, 120, 87, 1],
+            warn: [252, 211, 77, 1],
+        };
+        /**
+         * Component name
+         */
+        this.name = `bud-activity-indicator`;
+        this.renderShadow();
+    }
+    static get observedAttributes() {
+        return [`has-errors`, `has-warnings`, `action`];
+    }
+    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();
     }
     /**
      * Get accessor: has errors
@@ -22,24 +52,54 @@ export class Component extends HTMLElement {
         return this.getAttribute(`has-warnings`) == `true`;
     }
     /**
-     * Class constructor
+     * Hide status indicator
      */
-    constructor() {
-        super();
-        /**
-         * Component name
-         */
-        this.name = `bud-activity-indicator`;
-        /**
-         * Status indicator colors
-         */
-        this.colors = {
-            success: [4, 120, 87, 1],
-            error: [220, 38, 38, 1],
-            warn: [252, 211, 77, 1],
-            pending: [59, 130, 246, 1],
-        };
-        this.renderShadow();
+    hide() {
+        this.hideTimeout = setTimeout(() => {
+            this.shadowRoot.querySelector(this.selector).classList.remove(`show`);
+        }, 2000);
+    }
+    /**
+     * Status is error
+     */
+    onError() {
+        this.show();
+        this.shadowRoot
+            .querySelector(this.selector)
+            .classList.remove(`warning`, `success`, `pending`);
+        this.shadowRoot.querySelector(this.selector).classList.add(`error`);
+    }
+    /**
+     * Status is pending
+     */
+    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
+     */
+    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 warning
+     */
+    onWarning() {
+        this.show();
+        this.shadowRoot
+            .querySelector(this.selector)
+            .classList.remove(`error`, `success`, `pending`);
+        this.shadowRoot.querySelector(this.selector).classList.add(`warning`);
     }
     /**
      * Render status indicator
@@ -86,6 +146,12 @@ export class Component extends HTMLElement {
     `;
         this.attachShadow({ mode: `open` }).appendChild(container);
     }
+    /**
+     * Root div querySelector selector
+     */
+    get selector() {
+        return `.${this.name}`;
+    }
     /**
      * Show status indicator
      */
@@ -93,70 +159,4 @@ export class Component extends HTMLElement {
         this.hideTimeout && clearTimeout(this.hideTimeout);
         this.shadowRoot.querySelector(this.selector).classList.add(`show`);
     }
-    /**
-     * Hide status indicator
-     */
-    hide() {
-        this.hideTimeout = setTimeout(() => {
-            this.shadowRoot.querySelector(this.selector).classList.remove(`show`);
-        }, 2000);
-    }
-    /**
-     * Status is pending
-     */
-    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
-     */
-    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
-     */
-    onError() {
-        this.show();
-        this.shadowRoot
-            .querySelector(this.selector)
-            .classList.remove(`warning`, `success`, `pending`);
-        this.shadowRoot.querySelector(this.selector).classList.add(`error`);
-    }
-    /**
-     * Status is warning
-     */
-    onWarning() {
-        this.show();
-        this.shadowRoot
-            .querySelector(this.selector)
-            .classList.remove(`error`, `success`, `pending`);
-        this.shadowRoot.querySelector(this.selector).classList.add(`warning`);
-    }
-    static get observedAttributes() {
-        return [`has-errors`, `has-warnings`, `action`];
-    }
-    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/lib/hot/components/overlay/overlay.component.d.ts

@@ -2,16 +2,16 @@
  * Component container
  */
 export declare class Component extends HTMLElement {
+    documentBodyStyle: any;
     name: string;
     /**
      * WHM payload
      */
     payload: any;
-    documentBodyStyle: any;
-    get message(): string;
     constructor();
-    renderShadow(): void;
     static get observedAttributes(): string[];
     attributeChangedCallback(): void;
     connectedCallback(): void;
+    get message(): string;
+    renderShadow(): void;
 }

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

@@ -2,14 +2,36 @@
  * Component container
  */
 export class Component extends HTMLElement {
-    get message() {
-        return this.getAttribute(`message`);
-    }
     constructor() {
         super();
         this.name = `bud-overlay`;
         this.renderShadow();
     }
+    static get observedAttributes() {
+        return [`message`];
+    }
+    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`);
+    }
+    connectedCallback() {
+        if (document.body?.style)
+            this.documentBodyStyle = document.body.style;
+    }
+    get message() {
+        return this.getAttribute(`message`);
+    }
     renderShadow() {
         const container = document.createElement(`div`);
         container.classList.add(`overlay`);
@@ -119,26 +141,4 @@ export class Component extends HTMLElement {
     `;
         this.attachShadow({ mode: `open` }).appendChild(container);
     }
-    static get observedAttributes() {
-        return [`message`];
-    }
-    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`);
-    }
-    connectedCallback() {
-        if (document.body?.style)
-            this.documentBodyStyle = document.body.style;
-    }
 }

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

@@ -10,10 +10,6 @@ export declare class Controller {
      * HMR update
      */
     payload: Payload;
-    /**
-     * Formatted error message
-     */
-    get message(): string;
     /**
      * Class constructor
      */
@@ -22,6 +18,10 @@ export declare class Controller {
      * Append `bud-error` element to the DOM
      */
     createError(): void;
+    /**
+     * Formatted error message
+     */
+    get message(): string;
     /**
      * Remove `bud-error` element from the DOM (if present)
      */

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

@@ -7,20 +7,6 @@ const stripAnsi = (body) => body?.replace?.(new RegExp(ansiPattern, `g`), ``) ??
  * Overlay controller
  */
 export class Controller {
-    /**
-     * Formatted error message
-     */
-    get message() {
-        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
      */
@@ -35,6 +21,20 @@ export class Controller {
         !document.body.querySelector(`bud-error`) &&
             document.body?.appendChild(this.element);
     }
+    /**
+     * Formatted error message
+     */
+    get message() {
+        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>`;
+        }, ``);
+    }
     /**
      * Remove `bud-error` element from the DOM (if present)
      */

package/lib/hot/events.d.ts

@@ -9,20 +9,20 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
          * @public
          */
         listeners: Set<Listener>;
-        options: Partial<Options> & {
-            name: string;
-            path: string;
-        };
         /**
-         * EventSource `onopen` handler
+         * EventSource `onmessage` handler
          * @public
          */
-        onopen: () => void;
+        onmessage: (payload: MessageEvent) => Promise<void>;
         /**
-         * EventSource `onmessage` handler
+         * EventSource `onopen` handler
          * @public
          */
-        onmessage: (payload: MessageEvent) => Promise<void>;
+        onopen: () => void;
+        options: Partial<Options> & {
+            name: string;
+            path: string;
+        };
         /**
          * EventSource `addMessageListener` handler
          * @public
@@ -59,20 +59,20 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
          * @public
          */
         listeners: Set<Listener>;
-        options: Partial<Options> & {
-            name: string;
-            path: string;
-        };
         /**
-         * EventSource `onopen` handler
+         * EventSource `onmessage` handler
          * @public
          */
-        onopen: () => void;
+        onmessage: (payload: MessageEvent) => Promise<void>;
         /**
-         * EventSource `onmessage` handler
+         * EventSource `onopen` handler
          * @public
          */
-        onmessage: (payload: MessageEvent) => Promise<void>;
+        onopen: () => void;
+        options: Partial<Options> & {
+            name: string;
+            path: string;
+        };
         /**
          * EventSource `addMessageListener` handler
          * @public

package/lib/hot/events.js

@@ -25,11 +25,6 @@ export const injectEvents = (eventSource) => {
              * @public
              */
             this.listeners = new Set();
-            /**
-             * EventSource `onopen` handler
-             * @public
-             */
-            this.onopen = function () { };
             /**
              * EventSource `onmessage` handler
              * @public
@@ -48,6 +43,11 @@ export const injectEvents = (eventSource) => {
                 }
                 catch (ex) { }
             };
+            /**
+             * EventSource `onopen` handler
+             * @public
+             */
+            this.onopen = function () { };
             this.onopen = this.onopen.bind(this);
             this.onmessage = this.onmessage.bind(this);
             this.addListener = this.addListener.bind(this);

package/lib/hot/log.d.ts

@@ -1,8 +1,8 @@
 export declare const makeLogger: (options: Options) => {
-    log: (...args: any[]) => void;
     error: (...args: any[]) => void;
-    warn: (...args: any[]) => void;
     info: (...args: any[]) => void;
+    log: (...args: any[]) => void;
+    warn: (...args: any[]) => void;
 };
 export declare const makeLog: (options: any) => (...args: any[]) => void;
 export declare const makeInfo: (options: any) => (...args: any[]) => void;

package/lib/hot/log.js

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
 export const makeLogger = (options) => {
     return {
-        log: makeLog(options),
         error: makeError(options),
-        warn: makeWarn(options),
         info: makeInfo(options),
+        log: makeLog(options),
+        warn: makeWarn(options),
     };
 };
 let lastLog = null;

package/lib/hot/options.js

@@ -2,14 +2,14 @@
  * Client options
  */
 let data = {
-    timeout: 2000,
-    reload: true,
-    name: `@roots/bud-client`,
     debug: true,
-    log: true,
     indicator: true,
+    log: true,
+    name: `@roots/bud-client`,
     overlay: true,
     path: `/bud/hot`,
+    reload: true,
+    timeout: 2000,
 };
 /**
  * Get client option

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roots/bud-client",
-  "version": "6.13.0",
+  "version": "6.13.1",
   "description": "Client scripts for @roots/bud",
   "engines": {
     "node": ">=16"
@@ -67,13 +67,13 @@
   "types": "./lib/index.d.ts",
   "module": "./lib/index.mjs",
   "devDependencies": {
-    "@roots/bud": "6.13.0",
+    "@roots/bud": "6.13.1",
     "@skypack/package-check": "0.2.2",
-    "@types/node": "18.16.12",
-    "@types/webpack-env": "1.18.0"
+    "@types/node": "18.16.16",
+    "@types/webpack-env": "1.18.1"
   },
   "dependencies": {
-    "tslib": "2.5.0"
+    "tslib": "2.5.3"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/hot/client.ts

@@ -36,9 +36,9 @@ export const client = async (
 
   if (typeof window.bud === `undefined`) {
     window.bud = {
+      controllers: [],
       current: {},
       hmr: {},
-      controllers: [],
       listeners: {},
     }
   }
@@ -96,12 +96,12 @@ export const client = async (
   const update = async () => {
     try {
       await webpackHot.apply({
-        ignoreUnaccepted: true,
         ignoreDeclined: true,
         ignoreErrored: true,
+        ignoreUnaccepted: true,
+        onDeclined: onUnacceptedOrDeclined,
         onErrored,
         onUnaccepted: onUnacceptedOrDeclined,
-        onDeclined: onUnacceptedOrDeclined,
       })
 
       if (!isStale()) await check()

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

@@ -5,9 +5,19 @@ import {pulse} from './indicator.pulse.js'
  */
 export class Component extends HTMLElement {
   /**
-   * Has component rendered
+   * Status indicator colors
    */
-  public rendered: boolean
+  public colors: Record<string, [number, number, number, number]> = {
+    error: [220, 38, 38, 1],
+    pending: [59, 130, 246, 1],
+    success: [4, 120, 87, 1],
+    warn: [252, 211, 77, 1],
+  }
+
+  /**
+   * Timer
+   */
+  public hideTimeout: NodeJS.Timer
 
   /**
    * Component name
@@ -15,16 +25,39 @@ export class Component extends HTMLElement {
   public name: string = `bud-activity-indicator`
 
   /**
-   * Root div querySelector selector
+   * Has component rendered
    */
-  public get selector() {
-    return `.${this.name}`
-  }
+  public rendered: boolean
 
   /**
-   * Timer
+   * Class constructor
    */
-  public hideTimeout: NodeJS.Timer
+  public constructor() {
+    super()
+    this.renderShadow()
+  }
+
+  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()
+  }
 
   /**
    * Get accessor: has errors
@@ -41,21 +74,67 @@ export class Component extends HTMLElement {
   }
 
   /**
-   * Status indicator colors
+   * Hide status indicator
    */
-  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],
+  public hide() {
+    this.hideTimeout = setTimeout(() => {
+      this.shadowRoot.querySelector(this.selector).classList.remove(`show`)
+    }, 2000)
   }
 
   /**
-   * Class constructor
+   * Status is error
    */
-  public constructor() {
-    super()
-    this.renderShadow()
+  public onError() {
+    this.show()
+
+    this.shadowRoot
+      .querySelector(this.selector)
+      .classList.remove(`warning`, `success`, `pending`)
+    this.shadowRoot.querySelector(this.selector).classList.add(`error`)
+  }
+
+  /**
+   * Status is pending
+   */
+  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 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 warning
+   */
+  public onWarning() {
+    this.show()
+
+    this.shadowRoot
+      .querySelector(this.selector)
+      .classList.remove(`error`, `success`, `pending`)
+
+    this.shadowRoot.querySelector(this.selector).classList.add(`warning`)
   }
 
   /**
@@ -106,96 +185,17 @@ export class Component extends HTMLElement {
   }
 
   /**
-   * Show status indicator
-   */
-  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 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 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
+   * Root div querySelector selector
    */
-  public onError() {
-    this.show()
-
-    this.shadowRoot
-      .querySelector(this.selector)
-      .classList.remove(`warning`, `success`, `pending`)
-    this.shadowRoot.querySelector(this.selector).classList.add(`error`)
+  public get selector() {
+    return `.${this.name}`
   }
 
   /**
-   * Status is warning
+   * Show status indicator
    */
-  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()
+  public show() {
+    this.hideTimeout && clearTimeout(this.hideTimeout)
+    this.shadowRoot.querySelector(this.selector).classList.add(`show`)
   }
 }

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

@@ -2,6 +2,8 @@
  * Component container
  */
 export class Component extends HTMLElement {
+  public documentBodyStyle: any
+
   public name: string = `bud-overlay`
 
   /**
@@ -9,17 +11,45 @@ export class Component extends HTMLElement {
    */
   public payload: any
 
-  public documentBodyStyle: any
-
-  public get message() {
-    return this.getAttribute(`message`)
-  }
-
   public constructor() {
     super()
     this.renderShadow()
   }
 
+  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
+  }
+
+  public get message() {
+    return this.getAttribute(`message`)
+  }
+
   public renderShadow(): void {
     const container = document.createElement(`div`)
     container.classList.add(`overlay`)
@@ -130,34 +160,4 @@ export class Component extends HTMLElement {
 
     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

@@ -20,20 +20,6 @@ export class Controller {
    */
   public payload: Payload
 
-  /**
-   * Formatted error message
-   */
-  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
    */
@@ -50,6 +36,20 @@ export class Controller {
       document.body?.appendChild(this.element)
   }
 
+  /**
+   * Formatted error message
+   */
+  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>`
+    }, ``)
+  }
+
   /**
    * Remove `bud-error` element from the DOM (if present)
    */

package/src/hot/events.ts

@@ -18,6 +18,33 @@ export const injectEvents = (
      */
     public listeners: Set<Listener> = new Set<Listener>()
 
+    /**
+     * 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) {}
+    }
+
+    /**
+     * EventSource `onopen` handler
+     * @public
+     */
+    public override onopen = function () {}
+
     /**
      * Class constructor
      *
@@ -52,33 +79,6 @@ export const injectEvents = (
       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) {}
-    }
-
     /**
      * EventSource `addMessageListener` handler
      * @public

package/src/hot/log.ts

@@ -2,10 +2,10 @@
 
 export const makeLogger = (options: Options) => {
   return {
-    log: makeLog(options),
     error: makeError(options),
-    warn: makeWarn(options),
     info: makeInfo(options),
+    log: makeLog(options),
+    warn: makeWarn(options),
   }
 }
 

package/src/hot/options.ts

@@ -2,14 +2,14 @@
  * Client options
  */
 let data: Options = {
-  timeout: 2000,
-  reload: true,
-  name: `@roots/bud-client`,
   debug: true,
-  log: true,
   indicator: true,
+  log: true,
+  name: `@roots/bud-client`,
   overlay: true,
   path: `/bud/hot`,
+  reload: true,
+  timeout: 2000,
 }
 
 /**

package/src/intercept/index.ts

@@ -1,4 +1,4 @@
-type Target = HTMLAnchorElement | HTMLLinkElement | HTMLFormElement
+type Target = HTMLAnchorElement | HTMLFormElement | HTMLLinkElement
 type ElementTuple = [HTMLCollectionOf<Target>, any]
 
 const intercept = (...args: [string, string]) => {