@roots/bud-client 6.12.3 → 6.13.1

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

package/src/hot/events.ts

@@ -18,6 +18,33 @@ export const injectEvents = (
      */
     public listeners: Set<Listener> = new Set<Listener>()
 
+    /**
+     * EventSource `onmessage` handler
+     * @public
+     */
+    public override onmessage = async function (payload: MessageEvent) {
+      if (!payload?.data || payload.data == `\uD83D\uDC93`) {
+        return
+      }
+
+      try {
+        const data = JSON.parse(payload.data)
+        if (!data) return
+
+        await Promise.all(
+          [...this.listeners].map(async listener => {
+            return await listener(data)
+          }),
+        )
+      } catch (ex) {}
+    }
+
+    /**
+     * EventSource `onopen` handler
+     * @public
+     */
+    public override onopen = function () {}
+
     /**
      * Class constructor
      *
@@ -52,33 +79,6 @@ export const injectEvents = (
       return window.bud.hmr[options.name]
     }
 
-    /**
-     * EventSource `onopen` handler
-     * @public
-     */
-    public override onopen = function () {}
-
-    /**
-     * EventSource `onmessage` handler
-     * @public
-     */
-    public override onmessage = async function (payload: MessageEvent) {
-      if (!payload?.data || payload.data == `\uD83D\uDC93`) {
-        return
-      }
-
-      try {
-        const data = JSON.parse(payload.data)
-        if (!data) return
-
-        await Promise.all(
-          [...this.listeners].map(async listener => {
-            return await listener(data)
-          }),
-        )
-      } catch (ex) {}
-    }
-
     /**
      * EventSource `addMessageListener` handler
      * @public

package/src/hot/index.ts

@@ -0,0 +1,17 @@
+/* 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/src/hot/log.ts

@@ -2,10 +2,10 @@
 
 export const makeLogger = (options: Options) => {
   return {
-    log: makeLog(options),
     error: makeError(options),
-    warn: makeWarn(options),
     info: makeInfo(options),
+    log: makeLog(options),
+    warn: makeWarn(options),
   }
 }
 

package/src/hot/options.ts

@@ -2,14 +2,14 @@
  * Client options
  */
 let data: Options = {
-  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,
 }
 
 /**

package/src/intercept/index.ts

@@ -1,4 +1,4 @@
-type Target = HTMLAnchorElement | HTMLLinkElement | HTMLFormElement
+type Target = HTMLAnchorElement | HTMLFormElement | HTMLLinkElement
 type ElementTuple = [HTMLCollectionOf<Target>, any]
 
 const intercept = (...args: [string, string]) => {

package/lib/hot/index.cjs

@@ -1,5 +0,0 @@
-/* eslint-disable no-console */
-/* global __resourceQuery */
-/* global module */
-import { client } from './client.js';
-client(__resourceQuery, module.hot);

package/lib/hot/index.d.mts

@@ -1 +0,0 @@
-export {};

package/lib/hot/index.mjs

@@ -1,17 +0,0 @@
-/* eslint-disable no-console */
-/* global __resourceQuery */
-/* global module */
-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());
-    });
-};
-;
-(() => __awaiter(void 0, void 0, void 0, function* () {
-    return yield import(`./client.js`).then((module) => __awaiter(void 0, void 0, void 0, function* () { return yield module.client(__resourceQuery, import.meta.webpackHot); }));
-}))();
-export {};

package/lib/index.cjs

@@ -1,3 +0,0 @@
-// Copyright © Roots Software Foundation LLC
-// Licensed under the MIT license.
-export {};

package/lib/index.d.mts

@@ -1,12 +0,0 @@
-/**
- * `@roots/bud` client scripts
- *
- * You should not import this root module.
- * Import the components from the submodules instead.
- *
- * @see https://bud.js.org
- * @see https://github.com/roots/bud
- *
- *  @packageDocumentation
- */
-export {};

package/lib/index.mjs

@@ -1,3 +0,0 @@
-// Copyright © Roots Software Foundation LLC
-// Licensed under the MIT license.
-export {};

package/src/hot/client.test.ts

@@ -1,78 +0,0 @@
-/* eslint-disable no-console */
-/**
- * @vitest-environment jsdom
- */
-import {describe, expect, it, vi} from 'vitest'
-
-import {client} from './client.js'
-import {injectEvents} from './events.js'
-import * as options from './options.js'
-
-// @ts-ignore
-global.EventSource = class Events {
-  public constructor() {}
-}
-
-window.EventSource = global.EventSource
-
-const Events = injectEvents(global.EventSource)
-
-// @ts-ignore
-const webpackHotMock = {
-  hot: vi.fn(),
-  status: vi.fn(),
-} as __WebpackModuleApi.Hot
-
-describe(`@roots/bud-client`, () => {
-  it(`should be a fn module`, () => {
-    expect(client).toBeInstanceOf(Function)
-  })
-
-  it(`should add window.bud`, async () => {
-    await client(`?name=test`, webpackHotMock)
-    expect(window.bud).toBeDefined()
-  })
-
-  it(`should add window.bud.hmr as an instance of EventSource`, async () => {
-    await client(`?name=test`, webpackHotMock)
-    expect(window.bud?.hmr?.test).toBeInstanceOf(EventSource)
-  })
-
-  it(`should set clientOptions`, async () => {
-    await client(`?name=test`, webpackHotMock)
-    expect(options.data).toEqual(
-      expect.objectContaining({
-        debug: true,
-        indicator: true,
-        log: true,
-        name: `@roots/bud-client`,
-        overlay: true,
-        path: `/bud/hot`,
-        reload: true,
-        timeout: 2000,
-      }),
-    )
-  })
-
-  it(`should call listener from onmessage`, async () => {
-    await client(`?name=test`, webpackHotMock)
-    const events = Events.make(options.data)
-
-    const listenerMock = vi.fn(async () => {})
-    events.addListener(listenerMock)
-
-    await events.onmessage(
-      // @ts-ignore
-      {
-        data: `{
-        "data": {
-          "hash": "test",
-          "action": "update"
-        }
-      }`,
-      },
-    )
-
-    expect(listenerMock).toHaveBeenCalled()
-  })
-})

package/src/hot/index.cts

@@ -1,7 +0,0 @@
-/* eslint-disable no-console */
-/* global __resourceQuery */
-/* global module */
-
-import {client} from './client.js'
-
-client(__resourceQuery, module.hot)

package/src/hot/index.mts

@@ -1,9 +0,0 @@
-/* eslint-disable no-console */
-/* global __resourceQuery */
-/* global module */
-
-;(async () =>
-  await import(`./client.js`).then(
-    async module =>
-      await module.client(__resourceQuery, import.meta.webpackHot),
-  ))()