@roots/bud-client 6.12.3 → 6.13.1

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

@@ -2,27 +2,11 @@ const ansiPattern = [
     `[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)`,
     `(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))`,
 ].join(`|`);
-const stripAnsi = (body) => { var _a, _b; return (_b = (_a = body === null || body === void 0 ? void 0 : body.replace) === null || _a === void 0 ? void 0 : _a.call(body, new RegExp(ansiPattern, `g`), ``)) !== null && _b !== void 0 ? _b : body; };
+const stripAnsi = (body) => body?.replace?.(new RegExp(ansiPattern, `g`), ``) ?? body;
 /**
  * Overlay controller
  */
 export class Controller {
-    /**
-     * Formatted error message
-     */
-    get message() {
-        var _a;
-        return (_a = this.payload.errors) === null || _a === void 0 ? void 0 : _a.reduce((a, c) => {
-            var _a, _b;
-            const msg = (_b = (_a = c === null || c === void 0 ? void 0 : c.message) !== null && _a !== void 0 ? _a : c === null || c === void 0 ? void 0 : c.error) !== null && _b !== void 0 ? _b : c;
-            if (!msg)
-                return a;
-            return `${a}
-        <div>
-          <pre>${stripAnsi(msg)}</pre>
-        </div>`;
-        }, ``);
-    }
     /**
      * Class constructor
      */
@@ -34,25 +18,36 @@ export class Controller {
      * Append `bud-error` element to the DOM
      */
     createError() {
-        var _a;
         !document.body.querySelector(`bud-error`) &&
-            ((_a = document.body) === null || _a === void 0 ? void 0 : _a.appendChild(this.element));
+            document.body?.appendChild(this.element);
+    }
+    /**
+     * Formatted error message
+     */
+    get message() {
+        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)
      */
     removeError() {
-        var _a;
-        (_a = document.body.querySelector(`bud-error`)) === null || _a === void 0 ? void 0 : _a.remove();
+        document.body.querySelector(`bud-error`)?.remove();
     }
     /**
      * Update DOM
      */
     update(payload) {
-        var _a, _b;
         this.payload = payload;
-        this.element.setAttribute(`message`, (_a = this.message) !== null && _a !== void 0 ? _a : ``);
-        if (((_b = this.payload.errors) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        this.element.setAttribute(`message`, this.message ?? ``);
+        if (this.payload.errors?.length > 0) {
             return this.createError();
         }
         this.removeError();

package/lib/hot/events.d.ts

@@ -9,20 +9,20 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
          * @public
          */
         listeners: Set<Listener>;
-        options: Partial<Options> & {
-            name: string;
-            path: string;
-        };
         /**
-         * EventSource `onopen` handler
+         * EventSource `onmessage` handler
          * @public
          */
-        onopen: () => void;
+        onmessage: (payload: MessageEvent) => Promise<void>;
         /**
-         * EventSource `onmessage` handler
+         * EventSource `onopen` handler
          * @public
          */
-        onmessage: (payload: MessageEvent) => Promise<void>;
+        onopen: () => void;
+        options: Partial<Options> & {
+            name: string;
+            path: string;
+        };
         /**
          * EventSource `addMessageListener` handler
          * @public
@@ -33,9 +33,9 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
         readonly url: string;
         readonly withCredentials: boolean;
         close(): void;
-        readonly CLOSED: number;
-        readonly CONNECTING: number;
-        readonly OPEN: number;
+        readonly CONNECTING: 0;
+        readonly OPEN: 1;
+        readonly CLOSED: 2;
         addEventListener<K extends keyof EventSourceEventMap>(type: K, listener: (this: EventSource, ev: EventSourceEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: (this: EventSource, event: MessageEvent<any>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
@@ -59,20 +59,20 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
          * @public
          */
         listeners: Set<Listener>;
-        options: Partial<Options> & {
-            name: string;
-            path: string;
-        };
         /**
-         * EventSource `onopen` handler
+         * EventSource `onmessage` handler
          * @public
          */
-        onopen: () => void;
+        onmessage: (payload: MessageEvent) => Promise<void>;
         /**
-         * EventSource `onmessage` handler
+         * EventSource `onopen` handler
          * @public
          */
-        onmessage: (payload: MessageEvent) => Promise<void>;
+        onopen: () => void;
+        options: Partial<Options> & {
+            name: string;
+            path: string;
+        };
         /**
          * EventSource `addMessageListener` handler
          * @public
@@ -83,9 +83,9 @@ export declare const injectEvents: (eventSource: new (path: string) => EventSour
         readonly url: string;
         readonly withCredentials: boolean;
         close(): void;
-        readonly CLOSED: number;
-        readonly CONNECTING: number;
-        readonly OPEN: number;
+        readonly CONNECTING: 0;
+        readonly OPEN: 1;
+        readonly CLOSED: 2;
         addEventListener<K extends keyof EventSourceEventMap>(type: K, listener: (this: EventSource, ev: EventSourceEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: (this: EventSource, event: MessageEvent<any>) => any, options?: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

package/lib/hot/events.js

@@ -1,13 +1,4 @@
 /* eslint-disable no-console */
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 export const injectEvents = (eventSource) => {
     /**
      * EventSource wrapper
@@ -34,31 +25,29 @@ export const injectEvents = (eventSource) => {
              * @public
              */
             this.listeners = new Set();
-            /**
-             * EventSource `onopen` handler
-             * @public
-             */
-            this.onopen = function () { };
             /**
              * EventSource `onmessage` handler
              * @public
              */
-            this.onmessage = function (payload) {
-                return __awaiter(this, void 0, void 0, function* () {
-                    if (!(payload === null || payload === void 0 ? void 0 : payload.data) || payload.data == `\uD83D\uDC93`) {
+            this.onmessage = async function (payload) {
+                if (!payload?.data || payload.data == `\uD83D\uDC93`) {
+                    return;
+                }
+                try {
+                    const data = JSON.parse(payload.data);
+                    if (!data)
                         return;
-                    }
-                    try {
-                        const data = JSON.parse(payload.data);
-                        if (!data)
-                            return;
-                        yield Promise.all([...this.listeners].map((listener) => __awaiter(this, void 0, void 0, function* () {
-                            return yield listener(data);
-                        })));
-                    }
-                    catch (ex) { }
-                });
+                    await Promise.all([...this.listeners].map(async (listener) => {
+                        return await listener(data);
+                    }));
+                }
+                catch (ex) { }
             };
+            /**
+             * EventSource `onopen` handler
+             * @public
+             */
+            this.onopen = function () { };
             this.onopen = this.onopen.bind(this);
             this.onmessage = this.onmessage.bind(this);
             this.addListener = this.addListener.bind(this);

package/lib/hot/index.js

@@ -0,0 +1,16 @@
+/* eslint-disable no-console */
+/* global __resourceQuery */
+/* global module */
+import { client } from './client.js';
+try {
+    client(__resourceQuery, import.meta.webpackHot);
+}
+catch (err) {
+    console.error(err);
+    try {
+        client(__resourceQuery, module.hot);
+    }
+    catch (error) {
+        console.error(error);
+    }
+}

package/lib/hot/log.d.ts

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

package/lib/hot/log.js

@@ -1,10 +1,10 @@
 /* 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;

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
@@ -24,7 +24,7 @@ const setFromParameters = (query) => {
         parsedParams[key] =
             value === `true` ? true : value === `false` ? false : value;
     });
-    data[parsedParams.name] = Object.assign(Object.assign({}, data), parsedParams);
+    data[parsedParams.name] = { ...data, ...parsedParams };
     return data[parsedParams.name];
 };
 export { data, get, setFromParameters };

package/{src/index.mts → lib/index.js}

@@ -1,6 +1,5 @@
 // Copyright © Roots Software Foundation LLC
 // Licensed under the MIT license.
-
 /**
  * `@roots/bud` client scripts
  *
@@ -12,5 +11,4 @@
  *
  *  @packageDocumentation
  */
-
-export {}
+export {};

package/lib/intercept/proxy-click-interceptor.js

@@ -1,26 +1,15 @@
 /* eslint-disable no-console */
 /* global __resourceQuery */
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import intercept from './index.js';
-window.requestAnimationFrame(function ready() {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (!__resourceQuery)
-            return;
-        const params = new URLSearchParams(__resourceQuery);
-        if (!params || !params.has(`search`) || !params.has(`replace`))
-            return;
-        const search = decodeURI(params.get(`search`));
-        const replace = decodeURI(params.get(`replace`));
-        return document.body
-            ? intercept(search, replace)
-            : window.requestAnimationFrame(ready);
-    });
+window.requestAnimationFrame(async function ready() {
+    if (!__resourceQuery)
+        return;
+    const params = new URLSearchParams(__resourceQuery);
+    if (!params || !params.has(`search`) || !params.has(`replace`))
+        return;
+    const search = decodeURI(params.get(`search`));
+    const replace = decodeURI(params.get(`replace`));
+    return document.body
+        ? intercept(search, replace)
+        : window.requestAnimationFrame(ready);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roots/bud-client",
-  "version": "6.12.3",
+  "version": "6.13.1",
   "description": "Client scripts for @roots/bud",
   "engines": {
     "node": ">=16"
@@ -43,13 +43,14 @@
     "lib",
     "src"
   ],
+  "type": "module",
   "exports": {
     ".": {
-      "require": "./lib/index.cjs",
-      "default": "./lib/index.mjs"
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
     },
     "./lib/*": {
-      "require": "./lib/*",
+      "import": "./lib/*",
       "default": "./lib/*"
     }
   },
@@ -64,16 +65,15 @@
     }
   },
   "types": "./lib/index.d.ts",
-  "main": "./lib/index.cjs",
   "module": "./lib/index.mjs",
   "devDependencies": {
-    "@roots/bud": "6.12.3",
+    "@roots/bud": "6.13.1",
     "@skypack/package-check": "0.2.2",
-    "@types/node": "18.16.6",
-    "@types/webpack-env": "1.18.0"
+    "@types/node": "18.16.16",
+    "@types/webpack-env": "1.18.1"
   },
   "dependencies": {
-    "tslib": "2.5.0"
+    "tslib": "2.5.3"
   },
   "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()
@@ -111,12 +111,14 @@ export const client = async (
   }
 
   /* Instantiate indicator, overlay */
-  await components.make(options)
+  try {
+    await components.make(options)
+  } catch (error) {}
 
   /* Instantiate eventSource */
   const events = injectEvents(EventSource).make(options)
 
-  if (!window.bud.listeners[options.name]) {
+  if (!window.bud.listeners?.[options.name]) {
     window.bud.listeners[options.name] = async payload => {
       if (!payload) return
 

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`)
   }
 }