@swiftwc/ui 0.0.0-dev.67 → 0.0.0-dev.68

package/generated/client/index.d.ts

@@ -11,7 +11,10 @@ export declare const alert: (title?: string, message?: string, actions?: {
     role?: string;
 }[], options?: {
     titleVisibility?: boolean;
-}) => Promise<string>;
+    signal?: AbortSignal;
+}) => Promise<string | undefined> & {
+    dismiss: (reason?: unknown) => void;
+};
 export declare const confirmationDialog: (trigger: HTMLElement, title: string, message?: string, actions?: {
     label?: string;
     image?: string;

package/generated/client/index.js

@@ -5,6 +5,7 @@ import { NavigationPath } from '../internal/class/navigation-path';
 import { queryInsertPosition, startViewTransition } from '../internal/privateNamespace';
 import { $, devFlags, kebabCase, onoff } from '../internal/utils';
 import { Snapshot } from '../snapshot';
+import { html, render } from '../tpl';
 //#region polyfills
 export const polyfills = new Map();
 for (const [k, Ctor] of Object.entries(Components)) {
@@ -174,47 +175,61 @@ if (mediaQueryList.matches)
     ])
         document.addEventListener(k, v, { passive: true });
 //#region fns
-export const alert = async (title, message, actions, options) => {
-    return await navigator.locks.request('alert:', async () => {
-        const dialog = $(`<dialog is="alert-dialog"></dialog>`, '>1'), vStack = dialog.querySelector(':scope>v-stack') ?? dialog.appendChild($(`<v-stack spacing="1" alignment="fill"></v-stack>`, '>1'));
-        if (title) {
-            const label = $(`<label-view font="headline"></label-view>`, '>1');
-            label.setAttribute('title', title);
-            vStack.insertAdjacentElement('beforeend', label);
-        }
-        if (message) {
-            const label = $(`<label-view foreground="secondary" font="callout"></label-view>`, '>1');
-            label.setAttribute('title', message);
-            vStack.insertAdjacentElement('beforeend', label);
-        }
-        for (const [index, action] of (actions ?? [
-            {
-                role: 'close',
-            },
-        ]).entries()) {
-            const btn = $(`<button type="button" tabindex="0" is="bordered-button"></button>`, '>1');
-            btn.setAttribute('value', `${index}`);
-            if (action?.role)
-                btn.setAttribute('role', action.role);
-            if (action.label || action.image) {
-                const label = $(`<label-view></label-view>`, '>1');
-                if (action.label)
-                    label.setAttribute('title', action.label);
-                if (action.image)
-                    label.setAttribute('system-image', action.image);
-                btn.appendChild(label);
-            }
-            dialog.insertAdjacentElement('beforeend', btn);
-        }
+// const a = alert('Saving…', 'Please wait')
+// // later, e.g. save completed early
+// a.dismiss()          // silently resolves undefined, closes+removes dialog
+// // or
+// a.dismiss(new Error('cancelled')) // rejects instead
+// const result = await a // still works normally if not dismissed
+// const ac = new AbortController()
+// const a = alert('Uploading…', 'Please wait', undefined, { signal: ac.signal })
+// // elsewhere, e.g. upload finished before the user dismissed
+// ac.abort() // dialog closes silently, a rejects with AbortError
+// // or still works standalone
+// a.dismiss() // same effect, no signal needed
+export const alert = (title, message, actions, options) => {
+    const { promise, resolve, reject } = Promise.withResolvers();
+    let dialog;
+    let off;
+    const dismiss = (reason) => {
+        off?.();
+        dialog?.close();
+        dialog?.remove();
+        reason === undefined ? resolve(undefined) : reject(reason instanceof Error ? reason : new DOMException('Alert dismissed', 'AbortError'));
+    };
+    if (options?.signal)
+        if (options.signal.aborted)
+            dismiss(options.signal.reason); // already aborted before we even started — settle immediately, skip showing anything
+        else
+            options.signal.addEventListener('abort', () => dismiss(options.signal.reason), { once: true });
+    navigator.locks
+        .request('alert:', async () => {
+        if (options?.signal?.aborted)
+            return; // in case it was aborted while queued behind another lock holder
+        const mount = document.createElement('div');
+        render(html `<dialog is="alert-dialog">
+          <v-stack spacing="1" alignment="fill">
+            ${title ? html `<label-view font="headline" title="${title}"></label-view>` : null}
+            ${message ? html `<label-view foreground="secondary" font="callout" title="${message}"></label-view>` : null}
+          </v-stack>
+          ${(actions ?? [{ role: 'close' }]).map((action, index) => html `
+              <button type="button" tabindex="0" is="bordered-button" value="${index}" role="${action.role ?? null}">
+                ${action.label || action.image ? html `<label-view title="${action.label ?? null}" system-image="${action.image ?? null}"></label-view>` : null}
+              </button>
+            `)}
+        </dialog>`, mount);
+        dialog = mount.firstElementChild;
         document.body.insertAdjacentElement('beforeend', dialog);
         dialog.showModal();
-        const { promise, resolve } = Promise.withResolvers(), off = onoff('alert:return', (evt) => {
+        off = onoff('alert:return', (evt) => {
             const { detail } = evt;
-            off();
+            off?.();
             resolve(detail.returnValue);
         }, alertDialog, { once: true }).on();
         return promise;
-    });
+    })
+        .catch(() => { });
+    return Object.assign(promise, { dismiss });
 };
 export const confirmationDialog = async (trigger, title, message, actions, options) => {
     const newAnchorName = `--confirmation-dialog-${self.crypto.randomUUID()}`;

package/generated/tpl/html.d.ts

@@ -0,0 +1,5 @@
+export interface TemplateResult {
+    strings: TemplateStringsArray;
+    values: unknown[];
+}
+export default function (strings: TemplateStringsArray, ...values: unknown[]): TemplateResult;

package/generated/tpl/html.js

@@ -0,0 +1,3 @@
+export default function (strings, ...values) {
+    return { strings, values };
+}

package/generated/tpl/index.d.ts

@@ -0,0 +1,4 @@
+export { default as html } from './html';
+export * from './html';
+export { default as render } from './render';
+export * from './render';

package/generated/tpl/index.js

@@ -0,0 +1,4 @@
+export { default as html } from './html';
+export * from './html';
+export { default as render } from './render';
+export * from './render';

package/generated/tpl/render.d.ts

@@ -0,0 +1,2 @@
+import type { TemplateResult } from './html';
+export default function (result: TemplateResult, container: Element | ShadowRoot): void;

package/generated/tpl/render.js

@@ -0,0 +1,135 @@
+// --- Template preparation (runs ONCE per unique template literal) -----
+const MARKER = '\uD83D\uDD25PART\uD83D\uDD25'; // unlikely-collision sentinel
+const templateCache = new WeakMap();
+function prepare(strings) {
+    let cached = templateCache.get(strings);
+    if (cached)
+        return cached;
+    const partDescriptors = [];
+    let htmlStr = '';
+    strings.forEach((chunk, i) => {
+        htmlStr += chunk;
+        if (i < strings.length - 1) {
+            // Is this interpolation inside an attribute value?
+            // e.g. `...aria-checked="${...}"` — chunk ends with `attr="` or `attr='` or `attr=`
+            const attrMatch = /([a-zA-Z0-9_-]+)=(["']?)$/.exec(chunk);
+            if (attrMatch) {
+                partDescriptors.push({ type: 'attr', name: attrMatch[1] });
+                htmlStr += MARKER; // becomes the attribute's value
+            }
+            else {
+                partDescriptors.push({ type: 'child' });
+                // start/end comment pair — gives us a stable region to patch later,
+                // and room to grow into list/array rendering without a redesign
+                htmlStr += `<!--${MARKER}-->`;
+            }
+        }
+    });
+    const element = document.createElement('template');
+    element.innerHTML = htmlStr;
+    cached = { element, partDescriptors };
+    templateCache.set(strings, cached);
+    return cached;
+}
+const instanceCache = new WeakMap();
+function createInstance(prepared) {
+    const fragment = prepared.element.content.cloneNode(true);
+    const parts = [];
+    // Walk the clone once, in the same order `prepare()` emitted markers,
+    // and bind each descriptor to a real node.
+    const walker = document.createTreeWalker(fragment, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+    let descriptorIndex = 0;
+    const descriptors = prepared.partDescriptors;
+    let node;
+    while ((node = walker.nextNode())) {
+        if (descriptorIndex >= descriptors.length)
+            break;
+        if (node.nodeType === Node.COMMENT_NODE && node.data === MARKER) {
+            const start = node;
+            const end = document.createComment(MARKER);
+            start.after(end);
+            parts.push({ type: 'child', start, end, committed: undefined });
+            descriptorIndex++;
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            for (const attr of Array.from(el.attributes)) {
+                if (attr.value === MARKER) {
+                    const desc = descriptors[descriptorIndex];
+                    if (desc.type === 'attr') {
+                        parts.push({ type: 'attr', el, name: desc.name, committed: undefined });
+                        descriptorIndex++;
+                    }
+                }
+            }
+        }
+    }
+    return { fragment, parts };
+}
+// --- Committing values into parts (the only thing that runs per update) -
+function isTemplateResult(v) {
+    return !!v && typeof v === 'object' && 'strings' in v && 'values' in v;
+}
+function toNode(value) {
+    if (value instanceof Node)
+        return value;
+    if (isTemplateResult(value)) {
+        const { fragment, parts } = createInstance(prepare(value.strings));
+        parts.forEach((part, i) => {
+            const v = value.values[i];
+            part.type === 'child' ? commitChild(part, v) : commitAttr(part, v);
+        });
+        return fragment;
+    }
+    return document.createTextNode(String(value));
+}
+function commitChild(part, value) {
+    if (value === part.committed)
+        return; // dirty-check, skip untouched parts
+    // clear everything between start/end
+    let n = part.start.nextSibling;
+    while (n && n !== part.end) {
+        const next = n.nextSibling;
+        n.remove();
+        n = next;
+    }
+    for (const item of Array.isArray(value) ? value : [value]) {
+        if (item === null || item === undefined || item === false)
+            continue;
+        part.end.before(toNode(item));
+    }
+    part.committed = value;
+}
+function commitAttr(part, value) {
+    if (value === part.committed)
+        return;
+    if (value === null || value === undefined || value === false) {
+        part.el.removeAttribute(part.name);
+    }
+    else {
+        part.el.setAttribute(part.name, String(value));
+    }
+    part.committed = value;
+}
+// --- Public render() ----------------------------------------------------
+export default function (result, container) {
+    const prepared = prepare(result.strings);
+    let instance = instanceCache.get(container);
+    if (!instance || instance.strings !== result.strings) {
+        // first render, OR the template shape changed entirely — full (re)build
+        container.textContent = '';
+        const { fragment, parts } = createInstance(prepared);
+        container.append(fragment);
+        instance = { strings: result.strings, fragmentRoot: fragment, parts };
+        instanceCache.set(container, instance);
+    }
+    // same template shape as last time → patch existing DOM nodes only,
+    // no innerHTML, no re-clone, no focus/scroll loss
+    instance.parts.forEach((part, i) => {
+        const value = result.values[i];
+        if (part.type === 'child')
+            commitChild(part, value);
+        else
+            commitAttr(part, value);
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.67",
+  "version": "0.0.0-dev.68",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -63,11 +63,12 @@
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
     "build:manifest": "tsx scripts/make-manifest.ts",
-    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:i18n",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:tpl && npm run build:barrels:i18n",
     "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
     "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
     "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
     "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "build:barrels:tpl": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/tpl --exclude \".\\.test\\.ts\"",
     "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",