@rocket/js 0.0.0 → 0.1.0

package/src/RocketIcon.js

@@ -0,0 +1,291 @@
+/* eslint-disable no-console */
+/** Runs on: browser */
+
+const SHADOW_ICON_STYLE =
+  ':host{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;line-height:1}' +
+  ':host([hidden]){display:none}' +
+  'span[part="icon"]{display:inline-flex;width:100%;height:100%;line-height:1}' +
+  'span[part="icon"]>svg{display:block;width:100%;height:100%}';
+
+/** @type {WeakMap<Document, { defaultLibrary?: string; icons: Record<string, string> } | null>} */
+const manifestCache = new WeakMap();
+
+export class RocketIcon extends HTMLElement {
+  static observedAttributes = ['name', 'library', 'icon-loading', 'aria-label', 'aria-labelledby'];
+
+  /** @type {Map<string, string | Promise<string>>} */
+  static svgCache = new Map();
+
+  /** @type {string | undefined} */
+  pendingUrl;
+
+  /** @type {IntersectionObserver | undefined} */
+  intersectionObserver;
+
+  hasCompletedInitialConnection = false;
+
+  hasSetIconRole = false;
+
+  connectedCallback() {
+    this.ensureShadowRoot();
+    this.syncAccessibilitySemantics();
+    this.hasCompletedInitialConnection = true;
+    if (this.hasRenderedIcon()) {
+      return;
+    }
+    this.resolveIcon();
+  }
+
+  disconnectedCallback() {
+    this.disconnectObserver();
+  }
+
+  /**
+   * @param {string} name
+   * @param {string | null} oldValue
+   * @param {string | null} newValue
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue || !this.hasCompletedInitialConnection) {
+      return;
+    }
+    if (name === 'aria-label' || name === 'aria-labelledby') {
+      this.syncAccessibilitySemantics();
+      return;
+    }
+    this.clearIcon();
+    if (this.isConnected) {
+      this.resolveIcon();
+    }
+  }
+
+  ensureShadowRoot() {
+    if (!this.shadowRoot) {
+      const shadowRoot = this.attachShadow({ mode: 'open' });
+      shadowRoot.innerHTML = `<style>${SHADOW_ICON_STYLE}</style><span part="icon"></span>`;
+      return;
+    }
+    if (!this.iconSlot) {
+      this.shadowRoot.innerHTML = `<style>${SHADOW_ICON_STYLE}</style><span part="icon"></span>`;
+    }
+  }
+
+  get iconSlot() {
+    return this.shadowRoot?.querySelector('[part="icon"]') || null;
+  }
+
+  hasRenderedIcon() {
+    return this.iconSlot?.hasChildNodes() === true;
+  }
+
+  syncAccessibilitySemantics() {
+    const hasIconLabel =
+      hasNonEmptyAttribute(this, 'aria-label') || hasNonEmptyAttribute(this, 'aria-labelledby');
+    if (hasIconLabel) {
+      if (!this.hasAttribute('role')) {
+        this.setAttribute('role', 'img');
+        this.hasSetIconRole = true;
+      }
+      return;
+    }
+
+    if (this.hasSetIconRole && this.getAttribute('role') === 'img') {
+      this.removeAttribute('role');
+    }
+    this.hasSetIconRole = false;
+  }
+
+  clearIcon() {
+    this.disconnectObserver();
+    this.pendingUrl = undefined;
+    const iconSlot = this.iconSlot;
+    if (iconSlot) {
+      iconSlot.innerHTML = '';
+    }
+  }
+
+  resolveIcon() {
+    this.ensureShadowRoot();
+    const name = this.getAttribute('name')?.trim();
+    if (!name) {
+      warn('rocket-icon requires a non-empty name attribute.');
+      return;
+    }
+
+    const loading = this.getAttribute('icon-loading') || 'auto';
+    if (loading === 'server') {
+      warn('Browser-created rocket-icon cannot use icon-loading="server"; using client loading.');
+    } else if (loading !== 'auto' && loading !== 'client') {
+      warn(`Invalid rocket-icon icon-loading ${JSON.stringify(loading)}; using client loading.`);
+    }
+
+    const manifest = readManifest(this.ownerDocument);
+    if (!manifest) {
+      warn(`rocket-icon "${name}" cannot load because the Icon Manifest is missing.`);
+      return;
+    }
+
+    const library = this.getAttribute('library')?.trim() || manifest.defaultLibrary;
+    if (!library) {
+      warn(`rocket-icon "${name}" has no Icon Library in the Icon Manifest.`);
+      return;
+    }
+
+    const key = `${library}:${name}`;
+    const url = manifest.icons[key];
+    if (!url) {
+      warn(`rocket-icon "${key}" is absent from the Icon Manifest.`);
+      return;
+    }
+
+    this.pendingUrl = url;
+    this.observeVisibility(url);
+  }
+
+  /**
+   * @param {string} url
+   */
+  observeVisibility(url) {
+    this.disconnectObserver();
+    if (!('IntersectionObserver' in globalThis)) {
+      warn('rocket-icon cannot load until IntersectionObserver is available.');
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver(entries => {
+      if (!entries.some(entry => entry.isIntersecting)) {
+        return;
+      }
+      this.disconnectObserver();
+      this.loadSvg(url);
+    });
+    this.intersectionObserver.observe(this);
+  }
+
+  disconnectObserver() {
+    this.intersectionObserver?.disconnect();
+    this.intersectionObserver = undefined;
+  }
+
+  /**
+   * @param {string} url
+   */
+  async loadSvg(url) {
+    try {
+      const svg = await cachedSvg(url);
+      if (this.pendingUrl !== url) {
+        return;
+      }
+      const iconSlot = this.iconSlot;
+      if (iconSlot) {
+        iconSlot.innerHTML = svg;
+      }
+    } catch (error) {
+      warn(`rocket-icon failed to fetch ${url}.`, error);
+    }
+  }
+}
+
+/**
+ * @param {string} url
+ */
+async function cachedSvg(url) {
+  const cached = RocketIcon.svgCache.get(url);
+  if (typeof cached === 'string') {
+    return cached;
+  }
+  if (cached) {
+    return cached;
+  }
+  const promise = fetch(url)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      return response.text();
+    })
+    .then(svg => {
+      RocketIcon.svgCache.set(url, svg);
+      return svg;
+    })
+    .catch(error => {
+      RocketIcon.svgCache.delete(url);
+      throw error;
+    });
+  RocketIcon.svgCache.set(url, promise);
+  return promise;
+}
+
+/**
+ * @param {Document} document
+ */
+function readManifest(document) {
+  if (manifestCache.has(document)) {
+    return manifestCache.get(document);
+  }
+  const script = document.querySelector(
+    'script[type="application/json"][data-rocket-icon-manifest]',
+  );
+  if (!script?.textContent) {
+    manifestCache.set(document, null);
+    return null;
+  }
+  try {
+    const manifest = JSON.parse(script.textContent);
+    if (!manifest || typeof manifest !== 'object' || !isPlainRecord(manifest.icons)) {
+      manifestCache.set(document, null);
+      warn('rocket-icon Icon Manifest is invalid.');
+      return null;
+    }
+    const defaultLibrary =
+      typeof manifest.defaultLibrary === 'string' ? manifest.defaultLibrary : undefined;
+    const icons = /** @type {Record<string, string>} */ (manifest.icons);
+    manifestCache.set(document, { defaultLibrary, icons });
+    return { defaultLibrary, icons };
+  } catch (error) {
+    manifestCache.set(document, null);
+    warn('rocket-icon Icon Manifest could not be parsed.', error);
+    return null;
+  }
+}
+
+/**
+ * @param {unknown} value
+ * @returns {value is Record<string, unknown>}
+ */
+function isPlainRecord(value) {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    return false;
+  }
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+
+/**
+ * @param {string} message
+ * @param {unknown} [error]
+ */
+function warn(message, error) {
+  if (!isDevelopment()) {
+    return;
+  }
+  if (error) {
+    console.warn(message, error);
+  } else {
+    console.warn(message);
+  }
+}
+
+function isDevelopment() {
+  const hostname = globalThis.location?.hostname;
+  return (
+    !hostname || hostname === 'localhost' || hostname === '127.0.0.1' || hostname.endsWith('.test')
+  );
+}
+
+/**
+ * @param {Element} element
+ * @param {string} name
+ */
+function hasNonEmptyAttribute(element, name) {
+  return Boolean(element.getAttribute(name)?.trim());
+}

package/src/RocketJsDemo.js

@@ -0,0 +1,397 @@
+/** Runs on: client */
+import { css, html } from 'lit';
+import { LitElement } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import '@awesome.me/webawesome/dist/components/icon/icon.js';
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import { until } from 'lit/directives/until.js';
+import { standaloneDemoPath, standaloneDemoUrl } from './standalone-demo-url.js';
+
+export { standaloneDemoUrl };
+
+/** @type {Record<string, string>} */
+const copyButtonLabels = {
+  copy: 'Copy Standalone Demo URL',
+  success: 'Copied Standalone Demo URL',
+  error: 'Unable to copy Standalone Demo URL',
+};
+
+/**
+ * @param {string} parentUrl
+ * @param {string} demoName
+ */
+export function standaloneDemoPathFromUrl(parentUrl, demoName) {
+  return standaloneDemoPath(new URL(parentUrl).pathname, demoName);
+}
+
+export class RocketJsDemo extends LitElement {
+  static properties = {
+    demo: { type: Function },
+    singleDemo: { type: Boolean, attribute: 'single-demo', reflect: true },
+    _copyState: { type: String, state: true },
+  };
+
+  constructor() {
+    super();
+    /** @type {(options: { wrapperRef?: import('lit/directives/ref.js').Ref }) => import('lit').TemplateResult } */
+    this.demo = () => html`<p>Loading...</p>`;
+    this.preview = createRef();
+    this.singleDemo = false;
+    this._copyState = 'copy';
+    this.copyStateResetDelay = 2000;
+    /** @type {ReturnType<typeof setTimeout> | undefined} */
+    this.copyStateResetTimeout = undefined;
+  }
+
+  get demoName() {
+    return this.getAttribute('demo-name') || '';
+  }
+
+  get standaloneDemoPath() {
+    if (!this.demoName) {
+      return '';
+    }
+    return standaloneDemoPathFromUrl(window.location.href, this.demoName);
+  }
+
+  openStandaloneDemo() {
+    const url = this.standaloneDemoPath;
+    if (!url) {
+      return;
+    }
+
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+
+  async copyStandaloneDemoUrl() {
+    const url = this.standaloneDemoPath;
+    if (!url) {
+      return;
+    }
+
+    this.clearCopyStateResetTimeout();
+    try {
+      await navigator.clipboard.writeText(url);
+      this._copyState = 'success';
+    } catch {
+      this._copyState = 'error';
+    }
+    this.scheduleCopyStateReset();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.clearCopyStateResetTimeout();
+  }
+
+  scheduleCopyStateReset() {
+    this.copyStateResetTimeout = setTimeout(() => {
+      this.copyStateResetTimeout = undefined;
+      this._copyState = 'copy';
+    }, this.copyStateResetDelay);
+  }
+
+  clearCopyStateResetTimeout() {
+    if (this.copyStateResetTimeout !== undefined) {
+      clearTimeout(this.copyStateResetTimeout);
+      this.copyStateResetTimeout = undefined;
+    }
+  }
+
+  /**
+   * @param {PointerEvent} ev
+   */
+  handleResizePointerDown(ev) {
+    const startX = ev.clientX;
+    const element = this.preview.value;
+    if (!element) {
+      return;
+    }
+    const startWidth = element.getBoundingClientRect().width;
+    const target = /** @type {HTMLElement} */ (ev.currentTarget);
+
+    ev.preventDefault();
+    target.setPointerCapture(ev.pointerId);
+    const pointerMoveHandler = (/** @type {PointerEvent} */ ev) => {
+      const diff = ev.clientX - startX;
+      this.setPreviewWidth(startWidth + diff);
+    };
+
+    const pointerUpHandler = (/** @type {PointerEvent} */ ev) => {
+      target.releasePointerCapture(ev.pointerId);
+      target.removeEventListener('pointermove', pointerMoveHandler);
+      target.removeEventListener('pointerup', pointerUpHandler);
+      target.removeEventListener('pointercancel', pointerUpHandler);
+    };
+
+    target.addEventListener('pointermove', pointerMoveHandler);
+    target.addEventListener('pointerup', pointerUpHandler);
+    target.addEventListener('pointercancel', pointerUpHandler);
+  }
+
+  /**
+   * @param {KeyboardEvent} ev
+   */
+  handleResizeKeyDown(ev) {
+    const step = ev.shiftKey ? 64 : 16;
+    if (ev.key === 'ArrowLeft') {
+      ev.preventDefault();
+      this.resizePreviewBy(-step);
+    } else if (ev.key === 'ArrowRight') {
+      ev.preventDefault();
+      this.resizePreviewBy(step);
+    }
+  }
+
+  /**
+   * @param {number} delta
+   */
+  resizePreviewBy(delta) {
+    const element = this.preview.value;
+    if (!element) {
+      return;
+    }
+    this.setPreviewWidth(element.getBoundingClientRect().width + delta);
+  }
+
+  /**
+   * @param {number} width
+   */
+  setPreviewWidth(width) {
+    const element = this.preview.value;
+    if (!(element instanceof HTMLElement)) {
+      return;
+    }
+    const maxWidth = element.parentElement?.getBoundingClientRect().width ?? width;
+    const clampedWidth = Math.min(Math.max(width, 160), maxWidth);
+    element.style.width = `${Math.round(clampedWidth)}px`;
+  }
+
+  render() {
+    if (this.singleDemo) {
+      return html`
+        <div ${ref(this.preview)}>
+          ${until(this.demo({ wrapperRef: this.preview }), 'loading...')}
+        </div>
+      `;
+    }
+    return html`
+      <div id="bg">
+        <div ${ref(this.preview)} id="wrapper">
+          ${until(this.demo({ wrapperRef: this.preview }), 'loading...')}
+          <button
+            type="button"
+            id="resize"
+            aria-label="Resize JavaScript Demo width"
+            title="Resize JavaScript Demo width"
+            @pointerdown=${(/** @type {PointerEvent} */ ev) => this.handleResizePointerDown(ev)}
+            @keydown=${(/** @type {KeyboardEvent} */ ev) => this.handleResizeKeyDown(ev)}
+          >
+            <wa-icon name="grip-vertical" variant="solid"></wa-icon>
+          </button>
+        </div>
+      </div>
+      <div id="bottom">
+        <div id="source-row">
+          <details id="source">
+            <summary>Source</summary>
+            <slot></slot>
+          </details>
+          <div id="standalone-actions" aria-label="Standalone Demo URL actions">
+            <wa-button
+              id="open-standalone-demo"
+              appearance="plain"
+              title="Open Standalone Demo URL"
+              aria-label="Open Standalone Demo URL"
+              @click=${() => this.openStandaloneDemo()}
+            >
+              <wa-icon name="arrow-up-right-from-square" variant="solid"></wa-icon>
+            </wa-button>
+            <wa-button
+              id="copy-standalone-demo"
+              appearance="plain"
+              title=${copyButtonLabels[this._copyState] || copyButtonLabels.copy}
+              aria-label=${copyButtonLabels[this._copyState] || copyButtonLabels.copy}
+              @click=${() => this.copyStandaloneDemoUrl()}
+            >
+              <wa-icon
+                name=${this._copyState === 'success'
+                  ? 'check'
+                  : this._copyState === 'error'
+                    ? 'xmark'
+                    : 'copy'}
+                variant=${this._copyState === 'copy' ? 'regular' : 'solid'}
+              ></wa-icon>
+            </wa-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static styles = [
+    css`
+      :host(:not([single-demo])) {
+        display: block;
+        --resize-width: 1.5rem;
+        --border-color: #dbe3ec;
+        --border: 1px solid var(--border-color);
+        --border-radius: 8px;
+        --frame-header: #f8fafc;
+        --frame-muted: #57606a;
+        --frame-text: #24292f;
+        border: var(--border);
+        border-radius: var(--border-radius);
+        margin-bottom: var(--wa-content-spacing);
+        overflow: hidden;
+      }
+
+      #bg {
+        background-color: #eee;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      #resize {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: var(--resize-width);
+        border-left: var(--border);
+        border-top: 0;
+        border-right: 0;
+        border-bottom: 0;
+        cursor: ew-resize;
+        background: white;
+        color: var(--frame-muted);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0;
+        touch-action: none;
+      }
+
+      #wrapper {
+        position: relative;
+        padding: 1rem calc(1rem + var(--resize-width)) 1rem 1rem;
+        box-sizing: border-box;
+        max-width: 100%;
+        min-width: min-content;
+        background: white;
+      }
+
+      #bottom {
+        position: relative;
+        --standalone-action-size: 2.75rem;
+        --standalone-actions-width: calc(var(--standalone-action-size) * 2);
+        border-top: var(--border);
+      }
+
+      #source-row {
+        position: relative;
+      }
+
+      #source {
+        display: block;
+        min-inline-size: 0;
+      }
+
+      #source summary {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.4rem;
+        min-block-size: var(--standalone-action-size);
+        box-sizing: border-box;
+        cursor: pointer;
+        color: var(--frame-muted);
+        font-size: 0.875rem;
+        font-weight: 600;
+        line-height: 1.2;
+        list-style: none;
+        padding-block: 0;
+        padding-inline: var(--standalone-actions-width);
+      }
+
+      #source summary::marker {
+        content: '';
+      }
+
+      #source summary::-webkit-details-marker {
+        display: none;
+      }
+
+      #source summary::after {
+        content: '';
+        display: inline-block;
+        flex: 0 0 auto;
+        box-sizing: border-box;
+        inline-size: 0.52rem;
+        block-size: 0.52rem;
+        border: solid currentColor;
+        border-width: 0 2px 2px 0;
+        transform: rotate(-45deg);
+        transform-origin: center;
+        transition: transform 120ms ease-in-out;
+      }
+
+      #source[open] summary {
+        border-bottom: var(--border);
+      }
+
+      #source[open] summary::after {
+        transform: rotate(45deg);
+      }
+
+      #standalone-actions {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-end: 0;
+        display: flex;
+        align-items: stretch;
+        block-size: var(--standalone-action-size);
+        border-left: var(--border);
+      }
+
+      #open-standalone-demo,
+      #copy-standalone-demo {
+        inline-size: var(--standalone-action-size);
+      }
+
+      #open-standalone-demo::part(base),
+      #copy-standalone-demo::part(base) {
+        display: inline-grid;
+        place-items: center;
+        min-block-size: var(--standalone-action-size);
+        inline-size: 100%;
+        border: none;
+        border-radius: 0;
+        padding: 0;
+      }
+
+      #copy-standalone-demo::part(base) {
+        border-left: var(--border);
+        border-radius: 0;
+      }
+
+      ::slotted(pre) {
+        font-size: 0.9rem;
+        border-radius: 0;
+      }
+
+      ::slotted(rocket-code-block) {
+        --rocket-code-border-radius: 0 0 calc(var(--border-radius) - 1px)
+          calc(var(--border-radius) - 1px);
+        --rocket-code-frame-border: none;
+        --rocket-code-margin: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        #source summary::after {
+          transition: none;
+        }
+      }
+    `,
+  ];
+}