@roots/bud-client 6.15.1 → 6.16.0

package/lib/hot/client.js

@@ -29,6 +29,9 @@ export const client = async (queryString, webpackHot) => {
             current: {},
             hmr: {},
             listeners: {},
+            reload: () => {
+                window.location.reload();
+            },
         };
     }
     if (!window.bud.current[options.name]) {
@@ -102,7 +105,7 @@ export const client = async (queryString, webpackHot) => {
             if (!payload)
                 return;
             if (options.reload && payload.action === `reload`)
-                return window.location.reload();
+                return window.bud.reload();
             if (payload.name !== options.name)
                 return;
             window.bud.controllers.map(controller => controller?.update(payload));

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

@@ -3,6 +3,7 @@
  * Indicator web component
  */
 export declare class Component extends HTMLElement {
+    static get observedAttributes(): string[];
     /**
      * Status indicator colors
      */
@@ -23,20 +24,6 @@ export declare class Component extends HTMLElement {
      * Class constructor
      */
     constructor();
-    static get observedAttributes(): string[];
-    attributeChangedCallback(): void;
-    /**
-     * Get accessor: has errors
-     */
-    get hasErrors(): boolean;
-    /**
-     * Get accessor: has warnings
-     */
-    get hasWarnings(): boolean;
-    /**
-     * Hide status indicator
-     */
-    hide(): void;
     /**
      * Status is error
      */
@@ -53,6 +40,19 @@ export declare class Component extends HTMLElement {
      * Status is warning
      */
     onWarning(): void;
+    attributeChangedCallback(): void;
+    /**
+     * Get accessor: has errors
+     */
+    get hasErrors(): boolean;
+    /**
+     * Get accessor: has warnings
+     */
+    get hasWarnings(): boolean;
+    /**
+     * Hide status indicator
+     */
+    hide(): void;
     /**
      * Render status indicator
      */

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

@@ -3,6 +3,9 @@ import { pulse } from './indicator.pulse.js';
  * Indicator web component
  */
 export class Component extends HTMLElement {
+    static get observedAttributes() {
+        return [`has-errors`, `has-warnings`, `action`];
+    }
     /**
      * Class constructor
      */
@@ -23,42 +26,6 @@ export class Component extends HTMLElement {
         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
-     */
-    get hasErrors() {
-        return this.getAttribute(`has-errors`) == `true`;
-    }
-    /**
-     * Get accessor: has warnings
-     */
-    get hasWarnings() {
-        return this.getAttribute(`has-warnings`) == `true`;
-    }
-    /**
-     * Hide status indicator
-     */
-    hide() {
-        this.hideTimeout = setTimeout(() => {
-            this.shadowRoot.querySelector(this.selector).classList.remove(`show`);
-        }, 2000);
-    }
     /**
      * Status is error
      */
@@ -101,6 +68,39 @@ export class Component extends HTMLElement {
             .classList.remove(`error`, `success`, `pending`);
         this.shadowRoot.querySelector(this.selector).classList.add(`warning`);
     }
+    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
+     */
+    get hasErrors() {
+        return this.getAttribute(`has-errors`) == `true`;
+    }
+    /**
+     * Get accessor: has warnings
+     */
+    get hasWarnings() {
+        return this.getAttribute(`has-warnings`) == `true`;
+    }
+    /**
+     * Hide status indicator
+     */
+    hide() {
+        this.hideTimeout = setTimeout(() => {
+            this.shadowRoot.querySelector(this.selector).classList.remove(`show`);
+        }, 2000);
+    }
     /**
      * Render status indicator
      */

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

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

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

@@ -2,14 +2,14 @@
  * Component container
  */
 export class Component extends HTMLElement {
+    static get observedAttributes() {
+        return [`message`];
+    }
     constructor() {
         super();
         this.name = `bud-overlay`;
         this.renderShadow();
     }
-    static get observedAttributes() {
-        return [`message`];
-    }
     attributeChangedCallback() {
         if (!this.documentBodyStyle)
             this.documentBodyStyle = document.body?.style;

package/lib/hot/events.js

@@ -7,6 +7,17 @@ export const injectEvents = (eventSource) => {
      * mocking in tests
      */
     return class Events extends eventSource {
+        /**
+         * Singleton constructor
+         *
+         */
+        static make(options) {
+            if (typeof window.bud.hmr[options.name] === `undefined`)
+                Object.assign(window.bud.hmr, {
+                    [options.name]: new Events(options),
+                });
+            return window.bud.hmr[options.name];
+        }
         /**
          * Class constructor
          *
@@ -46,17 +57,6 @@ export const injectEvents = (eventSource) => {
             this.onmessage = this.onmessage.bind(this);
             this.addListener = this.addListener.bind(this);
         }
-        /**
-         * Singleton constructor
-         *
-         */
-        static make(options) {
-            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 `addMessageListener` handler
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roots/bud-client",
-  "version": "6.15.1",
+  "version": "6.16.0",
   "description": "Client scripts for @roots/bud",
   "engines": {
     "node": ">=16"
@@ -69,13 +69,13 @@
   "types": "./lib/index.d.ts",
   "module": "./lib/index.mjs",
   "devDependencies": {
-    "@roots/bud": "6.15.1",
+    "@roots/bud": "6.16.0",
     "@skypack/package-check": "0.2.2",
-    "@types/node": "18.17.5",
+    "@types/node": "18.17.9",
     "@types/webpack-env": "1.18.1"
   },
   "dependencies": {
-    "tslib": "2.6.1"
+    "tslib": "2.6.2"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/hot/client.ts

@@ -21,6 +21,7 @@ export const client = async (
     )
     return false
   }
+
   /* Guard: webpackHot api availability */
   if (!webpackHot) {
     console.error(
@@ -40,6 +41,9 @@ export const client = async (
       current: {},
       hmr: {},
       listeners: {},
+      reload: () => {
+        window.location.reload()
+      },
     }
   }
 
@@ -124,7 +128,7 @@ export const client = async (
       if (!payload) return
 
       if (options.reload && payload.action === `reload`)
-        return window.location.reload()
+        return window.bud.reload()
 
       if (payload.name !== options.name) return
       window.bud.controllers.map(controller => controller?.update(payload))

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

@@ -4,6 +4,9 @@ import {pulse} from './indicator.pulse.js'
  * Indicator web component
  */
 export class Component extends HTMLElement {
+  public static get observedAttributes() {
+    return [`has-errors`, `has-warnings`, `action`]
+  }
   /**
    * Status indicator colors
    */
@@ -37,51 +40,6 @@ export class Component extends HTMLElement {
     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
-   */
-  public get hasErrors(): boolean {
-    return this.getAttribute(`has-errors`) == `true`
-  }
-
-  /**
-   * Get accessor: has warnings
-   */
-  public get hasWarnings(): boolean {
-    return this.getAttribute(`has-warnings`) == `true`
-  }
-
-  /**
-   * Hide status indicator
-   */
-  public hide() {
-    this.hideTimeout = setTimeout(() => {
-      this.shadowRoot.querySelector(this.selector).classList.remove(`show`)
-    }, 2000)
-  }
-
   /**
    * Status is error
    */
@@ -93,7 +51,6 @@ export class Component extends HTMLElement {
       .classList.remove(`warning`, `success`, `pending`)
     this.shadowRoot.querySelector(this.selector).classList.add(`error`)
   }
-
   /**
    * Status is pending
    */
@@ -108,7 +65,6 @@ export class Component extends HTMLElement {
 
     this.hide()
   }
-
   /**
    * Status is success
    */
@@ -123,7 +79,6 @@ export class Component extends HTMLElement {
 
     this.hide()
   }
-
   /**
    * Status is warning
    */
@@ -136,6 +91,46 @@ export class Component extends HTMLElement {
 
     this.shadowRoot.querySelector(this.selector).classList.add(`warning`)
   }
+  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
+   */
+  public get hasErrors(): boolean {
+    return this.getAttribute(`has-errors`) == `true`
+  }
+
+  /**
+   * Get accessor: has warnings
+   */
+  public get hasWarnings(): boolean {
+    return this.getAttribute(`has-warnings`) == `true`
+  }
+
+  /**
+   * Hide status indicator
+   */
+  public hide() {
+    this.hideTimeout = setTimeout(() => {
+      this.shadowRoot.querySelector(this.selector).classList.remove(`show`)
+    }, 2000)
+  }
 
   /**
    * Render status indicator

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

@@ -2,6 +2,9 @@
  * Component container
  */
 export class Component extends HTMLElement {
+  public static get observedAttributes() {
+    return [`message`]
+  }
   public documentBodyStyle: any
 
   public name: string = `bud-overlay`
@@ -16,10 +19,6 @@ export class Component extends HTMLElement {
     this.renderShadow()
   }
 
-  public static get observedAttributes() {
-    return [`message`]
-  }
-
   public attributeChangedCallback() {
     if (!this.documentBodyStyle)
       this.documentBodyStyle = document.body?.style

package/src/hot/events.ts

@@ -11,6 +11,20 @@ export const injectEvents = (eventSource: EventSourceFactory) => {
    * mocking in tests
    */
   return class Events extends eventSource {
+    /**
+     * Singleton constructor
+     *
+     */
+    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]
+    }
     /**
      * Registered listeners
      */
@@ -58,21 +72,6 @@ export const injectEvents = (eventSource: EventSourceFactory) => {
       this.addListener = this.addListener.bind(this)
     }
 
-    /**
-     * Singleton constructor
-     *
-     */
-    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 `addMessageListener` handler
      */

package/src/types/index.d.ts

@@ -41,10 +41,11 @@ declare interface Options {
 }
 
 declare var bud: {
-  current?: Record<string, string>
-  controllers?: Array<Controller>
-  hmr?: Record<string, Events & EventSource>
-  listeners?: Record<string, Listener>
+  current: Record<string, string>
+  controllers: Array<Controller>
+  hmr: Record<string, Events & EventSource>
+  listeners: Record<string, Listener>
+  reload: () => void
 }
 
 declare module global {