✨ improve(patch): @roots/bud-client export mapping

sources/@roots/bud-client/package.json

@@ -47,6 +47,14 @@
   "exports": {
     ".": "./lib/index.js",
     "./dom-ready": "./lib/dom-ready.js",
+    "./hot": "./lib/hot/index.js",
+    "./hot/client": "./lib/hot/client/index.js",
+    "./hot/components": "./lib/hot/components/index.js",
+    "./hot/components/indicator": "./lib/hot/components/indicator/index.js",
+    "./hot/components/overlay": "./lib/hot/components/overlay/index.js",
+    "./hot/events": "./lib/hot/events/index.js",
+    "./hot/log": "./lib/hot/log/index.js",
+    "./hot/options": "./lib/hot/options/index.js",
     "./lazy": "./lib/lazy.js",
     "./lib/*": "./lib/*"
   },
@@ -58,11 +66,38 @@
       "dom-ready": [
         "./lib/dom-ready.d.ts"
       ],
+      "hot": [
+        "./lib/hot/index.d.ts"
+      ],
+      "hot/client": [
+        "./lib/hot/client/index.d.ts"
+      ],
+      "hot/components": [
+        "./lib/hot/components/index.d.ts"
+      ],
+      "hot/components/indicator": [
+        "./lib/hot/components/indicator/index.d.ts"
+      ],
+      "hot/components/overlay": [
+        "./lib/hot/components/overlay/index.d.ts"
+      ],
+      "hot/events": [
+        "./lib/hot/events/index.d.ts"
+      ],
+      "hot/log": [
+        "./lib/hot/log/index.d.ts"
+      ],
+      "hot/options": [
+        "./lib/hot/options/index.d.ts"
+      ],
       "lazy": [
         "./lib/lazy.d.ts"
       ],
       "lib/*": [
         "./lib/*"
+      ],
+      "types": [
+        "./lib/types/index.d.ts"
       ]
     }
   },

sources/@roots/bud-client/src/hot/client.ts → sources/@roots/bud-client/src/hot/client/index.ts

@@ -2,15 +2,15 @@
 /* global __resourceQuery */
 /* global __webpack_hash__ */
 
-import * as components from './components/index.js'
-import {injectEvents} from './events.js'
-import {makeLogger} from './log.js'
-import * as clientOptions from './options.js'
+import * as components from '@roots/bud-client/hot/components'
+import {injectEvents} from '@roots/bud-client/hot/events'
+import {makeLogger} from '@roots/bud-client/hot/log'
+import * as clientOptions from '@roots/bud-client/hot/options'
 
 /**
  * Initializes bud.js HMR handling
  */
-export const client = async (
+export const initializeClient = async (
   queryString: string,
   webpackHot: __WebpackModuleApi.Hot,
 ) => {
@@ -21,37 +21,47 @@ export const client = async (
     )
     return false
   }
-  /* Guard: webpackHot api availability */
-  if (!webpackHot) {
-    console.error(
-      `[bud] hot module reload requires the webpack hot api to be available`,
-    )
-    return false
-  }
 
   /* Set client options from URL params */
   const options = clientOptions.setFromParameters(queryString)
+  if (!options.name || !options.path) return
   /* Setup logger */
   const logger = makeLogger(options)
 
-  if (typeof window.bud === `undefined`) {
-    window.bud = {
-      controllers: [],
-      current: {},
-      hmr: {},
-      listeners: {},
-    }
-  }
-
-  if (!window.bud.current[options.name]) {
-    window.bud.current[options.name] = null
+  /**
+   * Setup window.bud
+   */
+  window.bud = {
+    ...(window.bud ?? {}),
+    controllers: window.bud?.controllers ?? [],
+    current: {
+      ...(window.bud?.current ?? {}),
+      [options.name]: window.bud?.current?.[options.name] ?? null,
+    },
+    hmr: window.bud?.hmr ?? {},
+    listeners: window.bud?.listeners ?? {},
   }
 
-  const isStale = (hash?: string) => {
+  /**
+   * Is update stale?
+   */
+  const isStale = (hash?: string): boolean => {
+    if (!options.name) return true
+    if (!window.bud.current) return false
     if (hash) window.bud.current[options.name] = hash
     return __webpack_hash__ === window.bud.current[options.name]
   }
 
+  /**
+   * Unaccepted & declined module handler
+   */
+  const onUnacceptedOrDeclined = (
+    info: __WebpackModuleApi.HotNotifierInfo,
+  ) => {
+    logger.warn(info.type, info)
+    options.reload && window.location.reload()
+  }
+
   /**
    * Webpack HMR check handler
    */
@@ -61,64 +71,38 @@ export const client = async (
 
       requestAnimationFrame(async function whenReady() {
         if (webpackHot.status() === `ready`) {
-          await update()
+          await webpackHot
+            .apply({
+              ignoreDeclined: true,
+              ignoreErrored: true,
+              ignoreUnaccepted: true,
+              onDeclined: onUnacceptedOrDeclined,
+              onErrored: (error: any) => {
+                window.bud.controllers?.map(
+                  c => c?.update({errors: [error]}),
+                )
+              },
+              onUnaccepted: onUnacceptedOrDeclined,
+            })
+            .catch(logger.error)
+
+          if (!isStale()) await check()
         } else {
           requestAnimationFrame(whenReady)
         }
       })
     }
   }
 
-  /**
-   * Webpack HMR unaccepted module handler
-   */
-  const onUnacceptedOrDeclined = (
-    info: __WebpackModuleApi.HotNotifierInfo,
-  ) => {
-    console.warn(`[${options.name}] ${info.type}`, info)
-    options.reload && window.location.reload()
-  }
-
-  /**
-   * Webpack HMR error handler
-   */
-  const onErrored = (error: any) => {
-    window.bud.controllers.map(
-      controller =>
-        controller?.update({
-          errors: [error],
-        }),
-    )
-  }
-
-  /**
-   * Webpack HMR update handler
-   */
-  const update = async () => {
-    try {
-      await webpackHot.apply({
-        ignoreDeclined: true,
-        ignoreErrored: true,
-        ignoreUnaccepted: true,
-        onDeclined: onUnacceptedOrDeclined,
-        onErrored,
-        onUnaccepted: onUnacceptedOrDeclined,
-      })
-
-      if (!isStale()) await check()
-    } catch (error) {
-      logger.error(error)
-    }
-  }
-
   /* Instantiate indicator, overlay */
-  try {
-    await components.make(options)
-  } catch (error) {}
+  await components.make(options).catch(err => {})
 
-  /* Instantiate eventSource */
   const events = injectEvents(EventSource).make(options)
 
+  if (!window.bud.listeners) {
+    window.bud.listeners = {}
+  }
+
   if (!window.bud.listeners?.[options.name]) {
     window.bud.listeners[options.name] = async payload => {
       if (!payload) return
@@ -127,9 +111,10 @@ export const client = async (
         return window.location.reload()
 
       if (payload.name !== options.name) return
-      window.bud.controllers.map(controller => controller?.update(payload))
 
-      if (payload.errors?.length > 0) return
+      window.bud.controllers?.map(controller => controller?.update(payload))
+
+      if (typeof payload.errors !== `undefined` && payload.errors.length > 0) return
 
       if (payload.action === `built` || payload.action === `sync`) {
         if (isStale(payload.hash)) return
@@ -146,6 +131,6 @@ export const client = async (
      * Instantiate HMR event source
      * and register client listeners
      */
-    events.addListener(window.bud.listeners[options.name])
+    options.name && events && events.addListener(window.bud.listeners[options.name])
   }
 }

sources/@roots/bud-client/src/hot/components/index.ts

@@ -1,21 +1,23 @@
-import * as Indicator from './indicator/index.js'
-import * as Overlay from './overlay/index.js'
+import * as Indicator from '@roots/bud-client/hot/components/indicator'
+import * as Overlay from '@roots/bud-client/hot/components/overlay'
 
 export const make: (
   options: Options,
 ) => Promise<Array<Controller>> = async options => {
   if (options.indicator && !customElements.get(`bud-activity-indicator`)) {
-    maybePushController(Indicator.make())
+    const indicator = Indicator.make()
+    if (indicator) maybePushController(indicator)
   }
 
   if (options.overlay && !customElements.get(`bud-error`)) {
-    maybePushController(Overlay.make())
+    const overlay = Overlay.make()
+    if (overlay) maybePushController(overlay)
   }
 
-  return window.bud.controllers
+  return window.bud.controllers ?? []
 }
 
-const maybePushController = (controller: Controller | undefined) => {
+const maybePushController = (controller: any) => {
   if (!controller) return
-  window.bud.controllers.push(controller)
+  window.bud.controllers?.push(controller)
 }

sources/@roots/bud-client/src/hot/components/indicator/indicator.component.ts → sources/@roots/bud-client/src/hot/components/indicator/component.ts

@@ -1,4 +1,4 @@
-import {pulse} from './indicator.pulse.js'
+import {pulse} from './pulse.js'
 
 /**
  * Indicator web component
@@ -17,7 +17,7 @@ export class Component extends HTMLElement {
   /**
    * Timer
    */
-  public hideTimeout: NodeJS.Timer
+  public declare hideTimeout: NodeJS.Timer
 
   /**
    * Component name
@@ -27,7 +27,7 @@ export class Component extends HTMLElement {
   /**
    * Has component rendered
    */
-  public rendered: boolean
+  public declare rendered: boolean
 
   /**
    * Class constructor
@@ -78,7 +78,7 @@ export class Component extends HTMLElement {
    */
   public hide() {
     this.hideTimeout = setTimeout(() => {
-      this.shadowRoot.querySelector(this.selector).classList.remove(`show`)
+      this.shadowRoot?.querySelector(this.selector)?.classList.remove(`show`)
     }, 2000)
   }
 
@@ -89,9 +89,9 @@ export class Component extends HTMLElement {
     this.show()
 
     this.shadowRoot
-      .querySelector(this.selector)
-      .classList.remove(`warning`, `success`, `pending`)
-    this.shadowRoot.querySelector(this.selector).classList.add(`error`)
+      ?.querySelector(this.selector)
+      ?.classList.remove(`warning`, `success`, `pending`)
+    this.shadowRoot?.querySelector(this.selector)?.classList.add(`error`)
   }
 
   /**
@@ -101,10 +101,10 @@ export class Component extends HTMLElement {
     this.show()
 
     this.shadowRoot
-      .querySelector(this.selector)
-      .classList.remove(`error`, `warning`, `success`)
+      ?.querySelector(this.selector)
+      ?.classList.remove(`error`, `warning`, `success`)
 
-    this.shadowRoot.querySelector(this.selector).classList.add(`pending`)
+    this.shadowRoot?.querySelector(this.selector)?.classList.add(`pending`)
 
     this.hide()
   }
@@ -116,10 +116,10 @@ export class Component extends HTMLElement {
     this.show()
 
     this.shadowRoot
-      .querySelector(this.selector)
-      .classList.remove(`error`, `warning`, `pending`)
+      ?.querySelector(this.selector)
+      ?.classList.remove(`error`, `warning`, `pending`)
 
-    this.shadowRoot.querySelector(this.selector).classList.add(`success`)
+    this.shadowRoot?.querySelector(this.selector)?.classList.add(`success`)
 
     this.hide()
   }
@@ -131,10 +131,10 @@ export class Component extends HTMLElement {
     this.show()
 
     this.shadowRoot
-      .querySelector(this.selector)
-      .classList.remove(`error`, `success`, `pending`)
+      ?.querySelector(this.selector)
+      ?.classList.remove(`error`, `success`, `pending`)
 
-    this.shadowRoot.querySelector(this.selector).classList.add(`warning`)
+    this.shadowRoot?.querySelector(this.selector)?.classList.add(`warning`)
   }
 
   /**
@@ -196,6 +196,6 @@ export class Component extends HTMLElement {
    */
   public show() {
     this.hideTimeout && clearTimeout(this.hideTimeout)
-    this.shadowRoot.querySelector(this.selector).classList.add(`show`)
+    this.shadowRoot?.querySelector(this.selector)?.classList.add(`show`)
   }
 }

sources/@roots/bud-client/src/hot/components/indicator/indicator.controller.ts → sources/@roots/bud-client/src/hot/components/indicator/controller.ts

@@ -15,7 +15,7 @@ export class Controller {
   /**
    * Timer handler
    */
-  public timer: NodeJS.Timeout
+  public declare timer: NodeJS.Timeout
 
   /**
    * Initialization

sources/@roots/bud-client/src/hot/components/indicator/index.ts

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