@roots/bud-client 6.17.0 → 6.19.0

package/README.md

@@ -66,9 +66,6 @@ However, the amount of effort needed to maintain and develop new features and pr
 <a href="https://wordpress.com/">
 <img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="200" height="150"/>
 </a>
-<a href="https://pantheon.io/">
-<img src="https://cdn.roots.io/app/uploads/pantheon.svg" alt="Pantheon" width="200" height="150"/>
-</a>
 <a href="https://worksitesafety.ca/careers/">
 <img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="200" height="150"/>
 </a>

package/lib/hot/client.js

@@ -65,13 +65,14 @@ export const client = async (queryString, webpackHot) => {
         console.warn(`[${options.name}] ${info.type}`, info);
         options.reload && window.location.reload();
     };
+    const onAccepted = (info) => {
+        window.bud.controllers.map(controller => controller?.update({ action: `sync`, errors: [] }));
+    };
     /**
      * Webpack HMR error handler
      */
     const onErrored = (error) => {
-        window.bud.controllers.map(controller => controller?.update({
-            errors: [error],
-        }));
+        window.bud.controllers.map(controller => controller?.update({ errors: [error] }));
     };
     /**
      * Webpack HMR update handler
@@ -82,6 +83,7 @@ export const client = async (queryString, webpackHot) => {
                 ignoreDeclined: true,
                 ignoreErrored: true,
                 ignoreUnaccepted: true,
+                onAccepted,
                 onDeclined: onUnacceptedOrDeclined,
                 onErrored,
                 onUnaccepted: onUnacceptedOrDeclined,

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

@@ -11,7 +11,7 @@ export declare class Component extends HTMLElement {
     /**
      * Timer
      */
-    hideTimeout: NodeJS.Timer;
+    timeout: NodeJS.Timeout;
     /**
      * Component name
      */

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

@@ -35,6 +35,7 @@ export class Component extends HTMLElement {
             .querySelector(this.selector)
             .classList.remove(`warning`, `success`, `pending`);
         this.shadowRoot.querySelector(this.selector).classList.add(`error`);
+        this.hide();
     }
     /**
      * Status is pending
@@ -67,19 +68,17 @@ export class Component extends HTMLElement {
             .querySelector(this.selector)
             .classList.remove(`error`, `success`, `pending`);
         this.shadowRoot.querySelector(this.selector).classList.add(`warning`);
+        this.hide();
     }
     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();
+            return this.onSuccess();
+        this.onPending();
     }
     /**
      * Get accessor: has errors
@@ -97,7 +96,7 @@ export class Component extends HTMLElement {
      * Hide status indicator
      */
     hide() {
-        this.hideTimeout = setTimeout(() => {
+        this.timeout = setTimeout(() => {
             this.shadowRoot.querySelector(this.selector).classList.remove(`show`);
         }, 2000);
     }
@@ -156,7 +155,7 @@ export class Component extends HTMLElement {
      * Show status indicator
      */
     show() {
-        this.hideTimeout && clearTimeout(this.hideTimeout);
+        this.timeout && clearTimeout(this.timeout);
         this.shadowRoot.querySelector(this.selector).classList.add(`show`);
     }
 }

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

@@ -35,8 +35,8 @@ export class Controller {
      * Update activity indicator
      */
     update(payload) {
-        this.node.toggleAttribute(`has-errors`, payload.errors?.length ? true : false);
-        this.node.toggleAttribute(`has-warnings`, payload.warnings?.length ? true : false);
+        this.node.toggleAttribute(`has-errors`, payload.errors?.length > 0);
+        this.node.toggleAttribute(`has-warnings`, payload.warnings?.length > 0);
         this.node.setAttribute(`action`, payload.action);
         this.addNode();
     }

package/lib/lazy.js

@@ -12,7 +12,7 @@ const lazy = async function lazy(module, handler, errorHandler) {
         return await handler(request);
     }
     catch (error) {
-        const handle = errorHandler ? errorHandler : defaultErrorHandler;
+        const handle = errorHandler ?? defaultErrorHandler;
         handle(error);
     }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roots/bud-client",
-  "version": "6.17.0",
+  "version": "6.19.0",
   "description": "Client scripts for @roots/bud",
   "engines": {
     "node": ">=16"
@@ -69,10 +69,10 @@
   "types": "./lib/index.d.ts",
   "module": "./lib/index.mjs",
   "devDependencies": {
-    "@roots/bud": "6.17.0",
+    "@roots/bud": "6.19.0",
     "@skypack/package-check": "0.2.2",
-    "@types/node": "18.17.19",
-    "@types/webpack-env": "1.18.1"
+    "@types/node": "20.10.4",
+    "@types/webpack-env": "1.18.4"
   },
   "dependencies": {
     "tslib": "2.6.2"

package/src/hot/client.ts

@@ -83,15 +83,18 @@ export const client = async (
     options.reload && window.location.reload()
   }
 
+  const onAccepted = (info: __WebpackModuleApi.HotNotifierInfo) => {
+    window.bud.controllers.map(
+      controller => controller?.update({action: `sync`, errors: []}),
+    )
+  }
+
   /**
    * Webpack HMR error handler
    */
   const onErrored = (error: any) => {
     window.bud.controllers.map(
-      controller =>
-        controller?.update({
-          errors: [error],
-        }),
+      controller => controller?.update({errors: [error]}),
     )
   }
 
@@ -104,6 +107,7 @@ export const client = async (
         ignoreDeclined: true,
         ignoreErrored: true,
         ignoreUnaccepted: true,
+        onAccepted,
         onDeclined: onUnacceptedOrDeclined,
         onErrored,
         onUnaccepted: onUnacceptedOrDeclined,

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

@@ -20,7 +20,7 @@ export class Component extends HTMLElement {
   /**
    * Timer
    */
-  public hideTimeout: NodeJS.Timer
+  public timeout: NodeJS.Timeout
 
   /**
    * Component name
@@ -50,6 +50,8 @@ export class Component extends HTMLElement {
       .querySelector(this.selector)
       .classList.remove(`warning`, `success`, `pending`)
     this.shadowRoot.querySelector(this.selector).classList.add(`error`)
+
+    this.hide()
   }
   /**
    * Status is pending
@@ -90,23 +92,20 @@ export class Component extends HTMLElement {
       .classList.remove(`error`, `success`, `pending`)
 
     this.shadowRoot.querySelector(this.selector).classList.add(`warning`)
+
+    this.hide()
   }
   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()
+      return this.onSuccess()
+
+    this.onPending()
   }
 
   /**
@@ -127,7 +126,7 @@ export class Component extends HTMLElement {
    * Hide status indicator
    */
   public hide() {
-    this.hideTimeout = setTimeout(() => {
+    this.timeout = setTimeout(() => {
       this.shadowRoot.querySelector(this.selector).classList.remove(`show`)
     }, 2000)
   }
@@ -190,7 +189,7 @@ export class Component extends HTMLElement {
    * Show status indicator
    */
   public show() {
-    this.hideTimeout && clearTimeout(this.hideTimeout)
+    this.timeout && clearTimeout(this.timeout)
     this.shadowRoot.querySelector(this.selector).classList.add(`show`)
   }
 }

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

@@ -49,15 +49,9 @@ export class Controller {
    * Update activity indicator
    */
   public update(payload: Payload) {
-    this.node.toggleAttribute(
-      `has-errors`,
-      payload.errors?.length ? true : false,
-    )
+    this.node.toggleAttribute(`has-errors`, payload.errors?.length > 0)
 
-    this.node.toggleAttribute(
-      `has-warnings`,
-      payload.warnings?.length ? true : false,
-    )
+    this.node.toggleAttribute(`has-warnings`, payload.warnings?.length > 0)
 
     this.node.setAttribute(`action`, payload.action)
 

package/src/lazy.ts

@@ -33,7 +33,7 @@ const lazy: lazy = async function lazy<T = any>(
     const {default: request} = await module
     return await handler(request)
   } catch (error: unknown) {
-    const handle = errorHandler ? errorHandler : defaultErrorHandler
+    const handle = errorHandler ?? defaultErrorHandler
     handle(error)
   }
 }

package/src/types/index.d.ts

@@ -16,7 +16,7 @@ declare interface Events {
 declare interface Payload {
   name: string
   type: `middleware` | __WebpackModuleApi.HotNotifierInfo[`type`]
-  action: 'reload' | 'sync' | 'building' | 'built'
+  action?: 'reload' | 'sync' | 'building' | 'built'
   hash?: string
   time?: number
   errors?: Array<Record<string, any>>