@roots/bud-client 0.0.0

package/lib/hot/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/hot/options.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,QAAA,IAAI,IAAI,EAAE,OAST,CAAA;AAED;;;GAGG;AACH,QAAA,MAAM,GAAG,UAAW,MAAM,QAAQ,MAAM,QACJ,CAAA;AAEpC;;;GAGG;AACH,QAAA,MAAM,iBAAiB,UAAW,MAAM,KAAG,OAW1C,CAAA;AAED,OAAO,EAAC,IAAI,EAAE,GAAG,EAAE,iBAAiB,EAAC,CAAA"}

package/lib/hot/options.js

@@ -0,0 +1,33 @@
+/**
+ * Client options
+ * @public
+ */
+let data = {
+    timeout: 2000,
+    reload: true,
+    name: `@roots/bud-client`,
+    debug: true,
+    log: true,
+    indicator: true,
+    overlay: true,
+    path: `/bud/hot`,
+};
+/**
+ * Get client option
+ * @public
+ */
+const get = (name, key) => key ? data[name][key] : data[name];
+/**
+ * Set client data based on URL parameters
+ * @public
+ */
+const setFromParameters = (query) => {
+    let parsedParams = {};
+    new window.URLSearchParams(query).forEach((value, key) => {
+        parsedParams[key] =
+            value === `true` ? true : value === `false` ? false : value;
+    });
+    data[parsedParams.name] = Object.assign(Object.assign({}, data), parsedParams);
+    return data[parsedParams.name];
+};
+export { data, get, setFromParameters };

package/lib/index.cjs

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

package/lib/index.d.cts

@@ -0,0 +1,13 @@
+/**
+ * `@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 {};
+//# sourceMappingURL=index.d.cts.map

package/lib/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.cts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,CAAA"}

package/lib/index.d.mts

@@ -0,0 +1,13 @@
+/**
+ * `@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 {};
+//# sourceMappingURL=index.d.mts.map

package/lib/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.mts"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,CAAA"}

package/lib/index.mjs

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

package/lib/intercept/index.d.ts

@@ -0,0 +1,3 @@
+declare const intercept: (args_0: string, args_1: string) => void;
+export default intercept;
+//# sourceMappingURL=index.d.ts.map

package/lib/intercept/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/intercept/index.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,SAAS,0CA2Bd,CAAA;AAED,eAAe,SAAS,CAAA"}

package/lib/intercept/index.js

@@ -0,0 +1,18 @@
+const intercept = (...args) => {
+    args.every(arg => typeof arg === `string`) &&
+        setInterval(() => [
+            [document.getElementsByTagName(`a`), `href`],
+            [document.getElementsByTagName(`link`), `href`],
+        ]
+            .map(([elements, attribute]) => [Array.from(elements), attribute])
+            .forEach(([elements, attribute]) => elements
+            .filter(el => el.hasAttribute(attribute))
+            .filter(el => !el.hasAttribute(`__bud_processed`))
+            .filter(el => el.getAttribute(attribute).startsWith(args[0]))
+            .map(el => {
+            const value = el.getAttribute(attribute).replace(...args);
+            el.setAttribute(attribute, value);
+            el.toggleAttribute(`__bud_processed`);
+        })), 1000);
+};
+export default intercept;

package/lib/intercept/proxy-click-interceptor.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=proxy-click-interceptor.d.ts.map

package/lib/intercept/proxy-click-interceptor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"proxy-click-interceptor.d.ts","sourceRoot":"","sources":["../../src/intercept/proxy-click-interceptor.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,26 @@
+/* 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);
+    });
+});

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@roots/bud-client",
+  "description": "Client scripts for @roots/bud",
+  "version": "0.0.0",
+  "homepage": "https://roots.io/bud",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/roots/bud.git",
+    "directory": "sources/@roots/bud-client"
+  },
+  "contributors": [
+    {
+      "name": "Kelly Mears",
+      "email": "developers@tinypixel.dev",
+      "url": "https://github.com/kellymears"
+    },
+    {
+      "name": "Ben Word",
+      "email": "ben@benword.com",
+      "url": "https://github.com/retlehs"
+    }
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/roots/bud/issues"
+  },
+  "funding": {
+    "type": "github sponsors",
+    "url": "https://github.com/sponsors/roots"
+  },
+  "keywords": [
+    "bud",
+    "bud-framework"
+  ],
+  "engines": {
+    "node": ">=16"
+  },
+  "files": [
+    "docs",
+    "lib",
+    "src"
+  ],
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.mts",
+      "require": "./lib/index.cjs",
+      "default": "./lib/index.mjs"
+    },
+    "./lib/*": {
+      "types": "./lib/*.d.mts",
+      "require": "./lib/*",
+      "default": "./lib/*"
+    }
+  },
+  "devDependencies": {
+    "@roots/bud": "0.0.0",
+    "@skypack/package-check": "0.2.2",
+    "@types/node": "18.11.18",
+    "@types/webpack-env": "1.18.0"
+  },
+  "peerDependencies": {
+    "@roots/bud": "*",
+    "@types/webpack-env": "*"
+  },
+  "peerDependenciesMeta": {
+    "@roots/bud": {
+      "optional": true
+    },
+    "@types/webpack-env": {
+      "optional": true
+    }
+  },
+  "volta": {
+    "extends": "../../../package.json"
+  }
+}

package/src/hot/client.test.ts

@@ -0,0 +1,78 @@
+/* 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/client.ts

@@ -0,0 +1,156 @@
+/* eslint-disable no-console */
+/* 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'
+
+/**
+ * Initializes bud.js HMR handling
+ */
+export const client = async (
+  queryString: string,
+  webpackHot: __WebpackModuleApi.Hot,
+) => {
+  /* Guard: EventSource browser support */
+  if (typeof window?.EventSource === `undefined`) {
+    console.error(
+      `[bud] hot module reload requires EventSource to work. https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events#Tools`,
+    )
+    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)
+  /* Setup logger */
+  const logger = makeLogger(options)
+
+  if (typeof window.bud === `undefined`) {
+    window.bud = {
+      current: {},
+      hmr: {},
+      controllers: [],
+      listeners: {},
+    }
+  }
+
+  if (!window.bud.current[options.name]) {
+    window.bud.current[options.name] = null
+  }
+
+  const isStale = (hash?: string) => {
+    if (hash) window.bud.current[options.name] = hash
+    return __webpack_hash__ === window.bud.current[options.name]
+  }
+
+  /**
+   * Webpack HMR check handler
+   *
+   * @internal
+   */
+  const check = async () => {
+    if (webpackHot.status() === `idle`) {
+      await webpackHot.check(false)
+
+      requestAnimationFrame(async function whenReady() {
+        if (webpackHot.status() === `ready`) {
+          await update()
+        } else {
+          requestAnimationFrame(whenReady)
+        }
+      })
+    }
+  }
+
+  /**
+   * Webpack HMR unaccepted module handler
+   *
+   * @internal
+   */
+  const onUnacceptedOrDeclined = (
+    info: __WebpackModuleApi.HotNotifierInfo,
+  ) => {
+    console.warn(`[${options.name}] ${info.type}`, info)
+    options.reload && window.location.reload()
+  }
+
+  /**
+   * Webpack HMR error handler
+   *
+   * @internal
+   */
+  const onErrored = (error: any) => {
+    window.bud.controllers.map(controller =>
+      controller?.update({
+        errors: [error],
+      }),
+    )
+  }
+
+  /**
+   * Webpack HMR update handler
+   *
+   * @internal
+   */
+  const update = async () => {
+    try {
+      await webpackHot.apply({
+        ignoreUnaccepted: true,
+        ignoreDeclined: true,
+        ignoreErrored: true,
+        onErrored,
+        onUnaccepted: onUnacceptedOrDeclined,
+        onDeclined: onUnacceptedOrDeclined,
+      })
+
+      if (!isStale()) await check()
+    } catch (error) {
+      logger.error(error)
+    }
+  }
+
+  /* Instantiate indicator, overlay */
+  await components.make(options)
+
+  /* Instantiate eventSource */
+  const events = injectEvents(EventSource).make(options)
+
+  if (!window.bud.listeners[options.name]) {
+    window.bud.listeners[options.name] = async payload => {
+      if (!payload) return
+
+      if (options.reload && payload.action === `reload`)
+        return window.location.reload()
+
+      if (payload.name !== options.name) return
+      window.bud.controllers.map(controller => controller?.update(payload))
+
+      if (payload.errors?.length > 0) return
+
+      if (payload.action === `built` || payload.action === `sync`) {
+        if (isStale(payload.hash)) return
+
+        if (payload.action === `built`) {
+          logger.log(`built in ${payload.time}ms`)
+        }
+
+        await check()
+      }
+    }
+
+    /*
+     * Instantiate HMR event source
+     * and register client listeners
+     */
+    events.addListener(window.bud.listeners[options.name])
+  }
+}

package/src/hot/components/index.ts

@@ -0,0 +1,33 @@
+interface ControllerModule {
+  make: () => Promise<Controller>
+}
+
+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)
+  }
+
+  if (options.overlay && !customElements.get(`bud-error`)) {
+    await import(`./overlay/index.js`)
+      .then(makeController)
+      .then(maybePushController)
+  }
+
+  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

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