@roots/bud-client 0.0.0

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

@@ -0,0 +1,216 @@
+import {pulse} from './indicator.pulse.js'
+
+/**
+ * Indicator web component
+ * @public
+ */
+export class Component extends HTMLElement {
+  /**
+   * Has component rendered
+   * @public
+   */
+  public rendered: boolean
+
+  /**
+   * Component name
+   * @public
+   */
+  public name: string = `bud-activity-indicator`
+
+  /**
+   * Root div querySelector selector
+   * @public
+   */
+  public get selector() {
+    return `.${this.name}`
+  }
+
+  /**
+   * Timer
+   * @public
+   */
+  public hideTimeout: NodeJS.Timer
+
+  /**
+   * Get accessor: has errors
+   * @public
+   */
+  public get hasErrors(): boolean {
+    return this.getAttribute(`has-errors`) == `true`
+  }
+
+  /**
+   * Get accessor: has warnings
+   * @public
+   */
+  public get hasWarnings(): boolean {
+    return this.getAttribute(`has-warnings`) == `true`
+  }
+
+  /**
+   * Status indicator colors
+   * @public
+   */
+  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],
+  }
+
+  /**
+   * Class constructor
+   * @public
+   */
+  public constructor() {
+    super()
+    this.renderShadow()
+  }
+
+  /**
+   * Render status indicator
+   * @public
+   */
+  public renderShadow() {
+    const container = document.createElement(`div`)
+    container.classList.add(this.name)
+    container.innerHTML = `
+    <style>
+    .bud-activity-indicator {
+      position: fixed;
+      width: 10px;
+      height: 10px;
+      left: 10px;
+      bottom: 10px;
+      z-index: 9999;
+      margin: 5px;
+      padding: 5px;
+      -webkit-transition:
+        all .6s ease-in-out,
+      transition:
+        all .6s ease-in-out;
+      animation-fill-mode: forwards;
+      pointer-events: none;
+      border-radius: 50%;
+      transform: scale(0);
+      opacity: 0;
+    }
+
+    .show {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 1);
+      transform: scale(1);
+      transition:
+        all .6s ease-in-out;
+    }
+
+    ${pulse(`success`, this.colors.success)}
+    ${pulse(`error`, this.colors.error)}
+    ${pulse(`warning`, this.colors.warn)}
+    ${pulse(`pending`, this.colors.pending)}
+
+    </style>
+    `
+
+    this.attachShadow({mode: `open`}).appendChild(container)
+  }
+
+  /**
+   * Show status indicator
+   * @public
+   */
+  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
+   */
+  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
+   */
+  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
+   * @public
+   */
+  public onError() {
+    this.show()
+
+    this.shadowRoot
+      .querySelector(this.selector)
+      .classList.remove(`warning`, `success`, `pending`)
+    this.shadowRoot.querySelector(this.selector).classList.add(`error`)
+  }
+
+  /**
+   * Status is warning
+   * @public
+   */
+  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()
+  }
+}

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

@@ -0,0 +1,76 @@
+/**
+ * Activity indicator controller
+ * @public
+ */
+export class Controller {
+  /**
+   * DOM node
+   * @public
+   */
+  public node: HTMLElement
+
+  /**
+   * Active WHM payload
+   * @public
+   */
+  public payload = null
+
+  /**
+   * Timer handler
+   * @public
+   */
+  public timer: NodeJS.Timeout
+
+  /**
+   * Initialization
+   * @public
+   */
+  public constructor() {
+    this.node = document.createElement(`bud-activity-indicator`)
+    this.update = this.update.bind(this)
+  }
+
+  /**
+   * Append `bud-error` element to the DOM
+   *
+   * @public
+   */
+  public addNode() {
+    if (document.body.querySelector(`bud-activity-indicator`)) {
+      if (typeof this.timer.unref === `function`) this.timer.unref()
+      this.removeNode()
+    }
+
+    document.body?.appendChild(this.node)
+    this.timer = setTimeout(this.removeNode, 3000)
+  }
+
+  /**
+   * Remove `bud-error` element from the DOM (if present)
+   *
+   * @public
+   */
+  public removeNode() {
+    document.body.querySelector(`bud-activity-indicator`)?.remove()
+  }
+
+  /**
+   * Update activity indicator
+   * @public
+   */
+  public update(payload: Payload) {
+    this.node.toggleAttribute(
+      `has-errors`,
+      payload.errors?.length ? true : false,
+    )
+
+    this.node.toggleAttribute(
+      `has-warnings`,
+      payload.warnings?.length ? true : false,
+    )
+
+    this.node.setAttribute(`action`, payload.action)
+
+    this.addNode()
+  }
+}

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

@@ -0,0 +1,43 @@
+export interface pulse {
+  (name: string, color: [number, number, number]): string
+}
+
+/**
+ * CSS animation for reload indicator
+ * @public
+ */
+export const pulse = (
+  name: string,
+  color: [number, number, number, number],
+): string => `
+  .${name} {
+    box-shadow: 0 0 0 0 rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]});
+    animation: ${name}__pulse 2s infinite;
+    transition: all 0.4s ease-in-out;
+  }
+
+  .${name}:not(.show) {
+    background-color: rgba(${color[0]}, ${color[1]}, ${color[2]}, 0);
+  }
+
+  .${name}.show {
+    background-color: rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]});
+  }
+
+  @keyframes ${name}__pulse {
+    0% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7);
+    }
+
+    70% {
+      transform: scale(1);
+      box-shadow: 0 0 0 10px rgba(${color[0]}, ${color[1]}, ${color[2]}, 0);
+    }
+
+    100% {
+      transform: scale(0.95);
+      box-shadow: 0 0 0 0 rgba(${color[0]}, ${color[1]}, ${color[2]}, 0);
+    }
+  }
+`

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

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

package/src/hot/components/overlay/overlay.component.ts

@@ -0,0 +1,165 @@
+/**
+ * Component container
+ */
+export class Component extends HTMLElement {
+  public name: string = `bud-overlay`
+
+  /**
+   * WHM payload
+   *
+   * @public
+   */
+  public payload: any
+
+  public documentBodyStyle: any
+
+  public get message() {
+    return this.getAttribute(`message`)
+  }
+
+  public constructor() {
+    super()
+    this.renderShadow()
+  }
+
+  public renderShadow(): void {
+    const container = document.createElement(`div`)
+    container.classList.add(`overlay`)
+    container.innerHTML = `
+      <style>
+        .overlay {
+          width: 100vw;
+          backdrop-filter: blur(10px);
+          display: flex;
+          height: 100vh;
+          border-top: 2px solid transparent;
+          overflow-x: hidden;
+          overflow-y: scroll;
+          position: absolute;
+          top: -1000px;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          opacity: 0;
+          transition: opacity 0.2s ease-in-out, border 0.4s ease-in-out;
+          justify-content: center;
+        }
+
+        .visible {
+          position: fixed;
+          top: 0;
+          z-index: 9998;
+          opacity: 1;
+          border-top: 5px solid red;
+          transition: opacity 0.2s ease-in-out, border 0.4s ease-in-out;
+          max-width: 100vw;
+        }
+
+        .messages {
+          background-color: white;
+          border-radius: 5px;
+          filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+          display: flex;
+          align-self: center;
+          width: 800px;
+          max-width: 90vw;
+          margin-left: auto;
+          margin-right: auto;
+          flex-direction: column;
+          flex-wrap: wrap;
+          align-items: center;
+          align-content: center;
+          padding: 2rem 2rem 0rem 2rem;
+        }
+
+        .visible .messages > div {
+          position: relative;
+          top: 0;
+          opacity: 1;
+          transition: all: 0.2s ease-in-out;
+        }
+
+        .messages > div {
+          position: relative;
+          top: 20px;
+          opacity: 0;
+          transition: all: 0.2s ease-in-out;
+          align-items: center;
+          align-content: center;
+          color: rgba(0, 0, 0, 0.87);
+          flex-direction: column;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+          padding: 0rem 2rem 2rem 2rem;
+          width: 100%;
+          max-width:95vw;
+        }
+
+        .messages > div > pre {
+          font-weight: 300;
+          font-size: 0.8rem;
+          overflow-x: scroll;
+        }
+
+        pre {
+          background: #303030;
+          color: #f1f1f1;
+          padding: 10px 16px;
+          border-radius: 2px;
+          border-top: 4px solid #dd0303;
+          -moz-box-shadow: inset 0 0 10px #000;
+          box-shadow: inset 0 0 10px #000;
+          counter-reset: line;
+        }
+
+        pre span {
+          display: block;
+          line-height: 1.5rem;
+        }
+
+        pre span:before {
+          counter-increment: line;
+          content: counter(line);
+          display: inline-block;
+          border-right: 1px solid #ddd;
+          padding: 0 .5em;
+          margin-right: .5em;
+          color: #888;
+          width: 30px;
+        }
+      </style>
+      <div class="messages"></div>
+    `
+
+    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

@@ -0,0 +1,86 @@
+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: string) =>
+  body?.replace?.(new RegExp(ansiPattern, `g`), ``) ?? body
+
+/**
+ * Overlay controller
+ * @public
+ */
+export class Controller {
+  /**
+   * Element
+   * @public
+   */
+  public element: HTMLElement
+
+  /**
+   * HMR update
+   * @public
+   */
+  public payload: Payload
+
+  /**
+   * Formatted error message
+   * @public
+   */
+  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
+   *
+   * @public
+   */
+  public constructor() {
+    this.update = this.update.bind(this)
+    this.element = document.createElement(`bud-error`)
+  }
+
+  /**
+   * Append `bud-error` element to the DOM
+   *
+   * @public
+   */
+  public createError() {
+    !document.body.querySelector(`bud-error`) &&
+      document.body?.appendChild(this.element)
+  }
+
+  /**
+   * Remove `bud-error` element from the DOM (if present)
+   *
+   * @public
+   */
+  public removeError() {
+    document.body.querySelector(`bud-error`)?.remove()
+  }
+
+  /**
+   * Update DOM
+   *
+   * @public
+   */
+  public update(payload: Payload): void {
+    this.payload = payload
+
+    this.element.setAttribute(`message`, this.message ?? ``)
+
+    if (this.payload.errors?.length > 0) {
+      return this.createError()
+    }
+
+    this.removeError()
+  }
+}

package/src/hot/events.ts

@@ -0,0 +1,93 @@
+/* eslint-disable no-console */
+
+export const injectEvents = (
+  eventSource: new (path: string) => EventSource,
+) => {
+  /**
+   * EventSource wrapper
+   *
+   * @remarks
+   * wraps EventSource in a function to allow for
+   * mocking in tests
+   *
+   * @public
+   */
+  return class Events extends eventSource {
+    /**
+     * Registered listeners
+     *
+     * @public
+     */
+    public listeners: Set<Listener> = new Set<Listener>()
+
+    /**
+     * Class constructor
+     *
+     * @remarks
+     * Singleton interface, so this is private.
+     *
+     * @public
+     */
+    private constructor(
+      public options: Partial<Options> & {name: string; path: string},
+    ) {
+      super(options.path)
+
+      this.onopen = this.onopen.bind(this)
+      this.onmessage = this.onmessage.bind(this)
+      this.addListener = this.addListener.bind(this)
+    }
+
+    /**
+     * Singleton constructor
+     *
+     * @public
+     */
+    public static make(
+      options: Partial<Options> & {name: string; path: string},
+    ): Events {
+      if (typeof window.bud.hmr[options.name] === `undefined`)
+        Object.assign(window.bud.hmr, {
+          [options.name]: new Events(options),
+        })
+
+      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
+     */
+    public addListener(listener: Listener): this {
+      this.listeners.add(listener)
+      return this
+    }
+  }
+}

package/src/hot/index.cts

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

package/src/hot/index.mts

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