@roots/bud-client 6.13.0 → 6.14.0

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/index.js

@@ -1,21 +1,14 @@
+import * as Indicator from './indicator/index.js';
+import * as Overlay from './overlay/index.js';
 export const make = async (options) => {
     if (options.indicator && !customElements.get(`bud-activity-indicator`)) {
-        await import(`./indicator/index.js`)
-            .then(makeController)
-            .then(maybePushController);
+        maybePushController(Indicator.make());
     }
     if (options.overlay && !customElements.get(`bud-error`)) {
-        await import(`./overlay/index.js`)
-            .then(makeController)
-            .then(maybePushController);
+        maybePushController(Overlay.make());
     }
     return window.bud.controllers;
 };
-const makeController = async (module) => {
-    if (!module)
-        return;
-    return await module.make();
-};
 const maybePushController = (controller) => {
     if (!controller)
         return;

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

@@ -1,3 +1,2 @@
-export declare const make: () => Promise<{
-    update: (data: Payload) => void;
-}>;
+import { Controller } from './indicator.controller.js';
+export declare const make: () => Controller;

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

@@ -1,6 +1,6 @@
 import { Component } from './indicator.component.js';
 import { Controller } from './indicator.controller.js';
-export const make = async () => {
+export const make = () => {
     if (customElements.get(`bud-activity-indicator`))
         return;
     customElements.define(`bud-activity-indicator`, Component);

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/index.d.ts

@@ -1,3 +1,3 @@
-export declare const make: () => Promise<{
+export declare const make: () => {
     update: (data: Payload) => void;
-}>;
+};

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

@@ -1,6 +1,6 @@
 import { Component } from './overlay.component.js';
 import { Controller } from './overlay.controller.js';
-export const make = async () => {
+export const make = () => {
     if (customElements.get(`bud-error`))
         return;
     customElements.define(`bud-error`, Component);

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

@@ -1,31 +1,29 @@
-export declare const injectEvents: (eventSource: new (path: string) => EventSource) => {
+interface EventSourceFactory {
+    new (path: string): EventSource;
+}
+export declare const injectEvents: (eventSource: EventSourceFactory) => {
     new (options: Partial<Options> & {
         name: string;
         path: string;
     }): {
         /**
          * Registered listeners
-         *
-         * @public
          */
         listeners: Set<Listener>;
-        options: Partial<Options> & {
-            name: string;
-            path: string;
-        };
-        /**
-         * EventSource `onopen` handler
-         * @public
-         */
-        onopen: () => void;
         /**
          * EventSource `onmessage` handler
-         * @public
          */
         onmessage: (payload: MessageEvent) => Promise<void>;
+        /**
+         * EventSource `onopen` handler
+         */
+        onopen: () => void;
+        options: Partial<Options> & {
+            name: string;
+            path: string;
+        };
         /**
          * EventSource `addMessageListener` handler
-         * @public
          */
         addListener(listener: Listener): this;
         onerror: (this: EventSource, ev: Event) => any;
@@ -47,7 +45,6 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
     /**
      * Singleton constructor
      *
-     * @public
      */
     make(options: Partial<Options> & {
         name: string;
@@ -55,27 +52,22 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
     }): {
         /**
          * Registered listeners
-         *
-         * @public
          */
         listeners: Set<Listener>;
-        options: Partial<Options> & {
-            name: string;
-            path: string;
-        };
-        /**
-         * EventSource `onopen` handler
-         * @public
-         */
-        onopen: () => void;
         /**
          * EventSource `onmessage` handler
-         * @public
          */
         onmessage: (payload: MessageEvent) => Promise<void>;
+        /**
+         * EventSource `onopen` handler
+         */
+        onopen: () => void;
+        options: Partial<Options> & {
+            name: string;
+            path: string;
+        };
         /**
          * EventSource `addMessageListener` handler
-         * @public
          */
         addListener(listener: Listener): this;
         onerror: (this: EventSource, ev: Event) => any;
@@ -95,3 +87,4 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
         dispatchEvent(event: Event): boolean;
     };
 };
+export {};

package/lib/hot/events.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 export const injectEvents = (eventSource) => {
     /**
      * EventSource wrapper
@@ -14,25 +13,16 @@ export const injectEvents = (eventSource) => {
          * @remarks
          * Singleton interface, so this is private.
          *
-         * @public
          */
         constructor(options) {
             super(options.path);
             this.options = options;
             /**
              * Registered listeners
-             *
-             * @public
              */
             this.listeners = new Set();
-            /**
-             * EventSource `onopen` handler
-             * @public
-             */
-            this.onopen = function () { };
             /**
              * EventSource `onmessage` handler
-             * @public
              */
             this.onmessage = async function (payload) {
                 if (!payload?.data || payload.data == `\uD83D\uDC93`) {
@@ -48,6 +38,10 @@ export const injectEvents = (eventSource) => {
                 }
                 catch (ex) { }
             };
+            /**
+             * EventSource `onopen` handler
+             */
+            this.onopen = function () { };
             this.onopen = this.onopen.bind(this);
             this.onmessage = this.onmessage.bind(this);
             this.addListener = this.addListener.bind(this);
@@ -55,7 +49,6 @@ export const injectEvents = (eventSource) => {
         /**
          * Singleton constructor
          *
-         * @public
          */
         static make(options) {
             if (typeof window.bud.hmr[options.name] === `undefined`)
@@ -66,7 +59,6 @@ export const injectEvents = (eventSource) => {
         }
         /**
          * EventSource `addMessageListener` handler
-         * @public
          */
         addListener(listener) {
             this.listeners.add(listener);