@roots/bud-client 6.13.0 → 6.14.0

package/lib/hot/index.js

@@ -2,15 +2,11 @@
 /* global __resourceQuery */
 /* global module */
 import { client } from './client.js';
-try {
-    client(__resourceQuery, import.meta.webpackHot);
-}
-catch (err) {
-    console.error(err);
+(async function () {
     try {
-        client(__resourceQuery, module.hot);
+        await client(__resourceQuery, import.meta.webpackHot);
     }
-    catch (error) {
-        console.error(error);
+    catch (err) {
+        console.error(err);
     }
-}
+})();

package/lib/hot/log.d.ts

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

package/lib/hot/log.js

@@ -1,36 +1,32 @@
 /* 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;
-export const makeLog = options => {
+export const makeLog = (options) => {
     return (...args) => {
         if (options.log) {
-            if (lastLog === args.join(``))
-                return;
-            lastLog = args.join(``);
             console.log(`[${options.name}]`, ...args);
         }
     };
 };
-export const makeInfo = options => {
+export const makeInfo = (options) => {
     return (...args) => {
         if (options.log) {
             console.info(`[${options.name}]`, ...args);
         }
     };
 };
-export const makeError = options => {
+export const makeError = (options) => {
     return (...args) => {
         console.error(`[${options.name}]`, ...args);
     };
 };
-export const makeWarn = options => {
+export const makeWarn = (options) => {
     return (...args) => {
         console.warn(`[${options.name}]`, ...args);
     };

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,24 +1,24 @@
 {
   "name": "@roots/bud-client",
-  "version": "6.13.0",
+  "version": "6.14.0",
   "description": "Client scripts for @roots/bud",
   "engines": {
     "node": ">=16"
   },
   "contributors": [
     {
-      "name": "Kelly Mears",
       "email": "developers@tinypixel.dev",
+      "name": "Kelly Mears",
       "url": "https://github.com/kellymears"
     },
     {
-      "name": "Ben Word",
       "email": "ben@benword.com",
+      "name": "Ben Word",
       "url": "https://github.com/retlehs"
     },
     {
-      "name": "Brandon",
       "email": "brandon@tendency.me",
+      "name": "Brandon",
       "url": "https://github.com/Log1x"
     }
   ],
@@ -45,14 +45,8 @@
   ],
   "type": "module",
   "exports": {
-    ".": {
-      "import": "./lib/index.js",
-      "default": "./lib/index.js"
-    },
-    "./lib/*": {
-      "import": "./lib/*",
-      "default": "./lib/*"
-    }
+    ".": "./lib/index.js",
+    "./lib/*": "./lib/*"
   },
   "typesVersions": {
     "*": {
@@ -67,13 +61,13 @@
   "types": "./lib/index.d.ts",
   "module": "./lib/index.mjs",
   "devDependencies": {
-    "@roots/bud": "6.13.0",
+    "@roots/bud": "6.14.0",
     "@skypack/package-check": "0.2.2",
-    "@types/node": "18.16.12",
-    "@types/webpack-env": "1.18.0"
+    "@types/node": "18.16.18",
+    "@types/webpack-env": "1.18.1"
   },
   "dependencies": {
-    "tslib": "2.5.0"
+    "tslib": "2.6.0"
   },
   "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/index.ts

@@ -1,32 +1,20 @@
-interface ControllerModule {
-  make: () => Promise<Controller>
-}
+import * as Indicator from './indicator/index.js'
+import * as Overlay from './overlay/index.js'
 
 export const make: (
   options: Options,
 ) => Promise<Array<Controller>> = 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: ControllerModule,
-): Promise<Controller | undefined> => {
-  if (!module) return
-  return await module.make()
-}
-
 const maybePushController = (controller: Controller | undefined) => {
   if (!controller) return
   window.bud.controllers.push(controller)

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

@@ -1,9 +1,7 @@
 import {Component} from './indicator.component.js'
 import {Controller} from './indicator.controller.js'
 
-export const make = async (): Promise<{
-  update: (data: Payload) => void
-}> => {
+export const make = () => {
   if (customElements.get(`bud-activity-indicator`)) return
   customElements.define(`bud-activity-indicator`, Component)
 

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

@@ -1,9 +1,9 @@
 import {Component} from './overlay.component.js'
 import {Controller} from './overlay.controller.js'
 
-export const make = async (): Promise<{
+export const make = (): {
   update: (data: Payload) => void
-}> => {
+} => {
   if (customElements.get(`bud-error`)) return
 
   customElements.define(`bud-error`, Component)

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