@roots/bud-client 2023.11.26-7 → 2023.11.28-1115

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.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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roots/bud-client",
-  "version": "2023.11.26-7",
+  "version": "2023.11.28-1115",
   "description": "Client scripts for @roots/bud",
   "engines": {
     "node": ">=16"
@@ -69,7 +69,7 @@
   "types": "./lib/index.d.ts",
   "module": "./lib/index.mjs",
   "devDependencies": {
-    "@roots/bud": "2023.11.26-7",
+    "@roots/bud": "2023.11.28-1115",
     "@skypack/package-check": "0.2.2",
     "@types/node": "20.9.0",
     "@types/webpack-env": "1.18.4"

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

@@ -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()
   }
 
   /**

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/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>>