@dxos/ui 0.8.4-main.c85a9c8dae → 0.8.4-main.e00bdcdb52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.e00bdcdb52",
   "description": "Core UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -21,16 +21,13 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@dxos/ui-types": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/ui-types": "0.8.4-main.e00bdcdb52",
+    "@dxos/ui-theme": "0.8.4-main.e00bdcdb52"
   },
   "publishConfig": {
     "access": "public"

package/src/domino.test.ts

@@ -69,7 +69,35 @@ describe('domino', () => {
   });
 
   test('Domino creates nested SVG elements', () => {
-    const svg = Domino.of('svg', Domino.SVG).children(Domino.of('circle', Domino.SVG)).root;
+    const svg = Domino.of('svg', Domino.SVG).append(Domino.of('circle', Domino.SVG)).root;
     expect(svg.querySelector('circle')).toBeTruthy();
   });
+
+  test('Domino on() respects AddEventListenerOptions (once)', () => {
+    let count = 0;
+    const el = Domino.of('button').on('click', () => count++, { once: true }).root;
+    el.click();
+    el.click();
+    expect(count).toBe(1);
+  });
+
+  test('Domino mount() attaches to parent and stays chainable', () => {
+    const parent = document.createElement('div');
+    const el = Domino.of('span').text('hi').mount(parent).classNames('mounted').root;
+    expect(parent.firstChild).toBe(el);
+    expect(el.textContent).toBe('hi');
+    expect(el.classList.contains('mounted')).toBe(true);
+  });
+
+  test('Domino.iconsUrl can be overridden at module level', () => {
+    const original = Domino.iconsUrl;
+    try {
+      Domino.iconsUrl = 'https://example.test/icons.svg';
+      expect(Domino.icon('foo')).toBe('https://example.test/icons.svg#foo');
+      const svg = Domino.svg('foo').root;
+      expect(svg.querySelector('use')?.getAttribute('href')).toBe('https://example.test/icons.svg#foo');
+    } finally {
+      Domino.iconsUrl = original;
+    }
+  });
 });

package/src/domino.ts

@@ -5,8 +5,14 @@
 import { mx } from '@dxos/ui-theme';
 import { type ClassNameValue } from '@dxos/ui-types';
 
-// From icon-plugin.
-const ICONS_URL = '/icons.svg';
+/**
+ * Base URL of the icon sprite sheet emitted by `@dxos/vite-plugin-icons`.
+ * Defaults to `/icons.svg` which works inside hosted apps served at the
+ * site root. Callers running in a different origin context (e.g. browser
+ * extensions that inject into arbitrary pages) can override by assigning
+ * `Domino.iconsUrl` before first use.
+ */
+const DEFAULT_ICONS_URL = '/icons.svg';
 
 /**
  * Super lightweight chainable DOM builder.
@@ -14,16 +20,21 @@ const ICONS_URL = '/icons.svg';
 export class Domino<T extends HTMLElement | SVGElement> {
   static SVG = 'http://www.w3.org/2000/svg';
 
-  static icon = (icon: string) => ICONS_URL + '#' + icon;
+  /** Overridable at module level so `Domino.svg()` can resolve from any origin. */
+  static iconsUrl: string = DEFAULT_ICONS_URL;
+
+  // TODO(burdon): Make private.
+  static icon = (icon: string) => Domino.iconsUrl + '#' + icon;
 
   /**
    * Creates an SVG icon element from the icon sprite sheet.
    */
+  // TODO(burdon): Rename icon.
   static svg = (icon: string) =>
     Domino.of('svg', Domino.SVG)
       .classNames('shrink-0 h-[1em] w-[1em]')
       .attributes({ viewBox: '0 0 256 256' })
-      .children(Domino.of('use', Domino.SVG).attributes({ href: Domino.icon(icon) }));
+      .append(Domino.of('use', Domino.SVG).attributes({ href: Domino.icon(icon) }));
 
   /**
    * Create builder from DOM node.
@@ -76,13 +87,32 @@ export class Domino<T extends HTMLElement | SVGElement> {
     return this;
   }
 
-  children<C extends HTMLElement | SVGElement>(...children: Domino<C>[]): this {
+  append<C extends HTMLElement | SVGElement>(...children: Domino<C>[]): this {
     children.forEach((child) => this._el.appendChild(child.root));
     return this;
   }
 
-  on(event: string, handler: (e: Event) => void): this {
-    this._el.addEventListener(event, handler);
+  /**
+   * Typed event listener. Accepts the standard `AddEventListenerOptions`
+   * third argument so callers can opt into `capture`, `once`, `passive`.
+   */
+  on<K extends keyof HTMLElementEventMap>(
+    event: K,
+    handler: (e: HTMLElementEventMap[K]) => void,
+    options?: boolean | AddEventListenerOptions,
+  ): this;
+  on(event: string, handler: (e: Event) => void, options?: boolean | AddEventListenerOptions): this;
+  on(event: string, handler: (e: Event) => void, options?: boolean | AddEventListenerOptions): this {
+    this._el.addEventListener(event, handler, options);
+    return this;
+  }
+
+  /**
+   * Convenience for attaching the root element to a parent node — useful at
+   * the end of a chain to avoid a trailing `.root` / `parent.appendChild()`.
+   */
+  mount(parent: Node): this {
+    parent.appendChild(this._el);
     return this;
   }