@swiftwc/ui 0.0.0-dev.86 → 0.0.0-dev.87

package/generated/morphdom/html.d.ts

@@ -0,0 +1,8 @@
+type RawValue = string | number | boolean | null | undefined | RawValue[];
+export declare class TrustedMarkup {
+    readonly value: string;
+    constructor(value: string);
+    toString(): string;
+}
+export default function (strings: TemplateStringsArray, ...values: (RawValue | TrustedMarkup)[]): TrustedMarkup;
+export {};

package/generated/morphdom/html.js

@@ -0,0 +1,37 @@
+const ESCAPE_MAP = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function escapeHtml(str) {
+    return str.replace(/[&<>"']/g, (ch) => ESCAPE_MAP[ch]);
+}
+// values built via `raw` itself are trusted markup; wrap them so `stringify`
+// knows to skip escaping — same idea as lit-html's `unsafeHTML`
+export class TrustedMarkup {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+    toString() {
+        return this.value;
+    }
+}
+function stringify(value) {
+    if (value === null || value === undefined || value === false)
+        return '';
+    if (value instanceof TrustedMarkup)
+        return value.value;
+    if (Array.isArray(value))
+        return value.map(stringify).join('');
+    return escapeHtml(String(value));
+}
+export default function (strings, ...values) {
+    let out = strings[0];
+    for (let i = 0; i < values.length; i++) {
+        out += stringify(values[i]) + strings[i + 1];
+    }
+    return new TrustedMarkup(out.replace(/>\s+</g, '><').trim());
+}

package/generated/morphdom/index.d.ts

@@ -0,0 +1,6 @@
+export { default as html } from './html';
+export * from './html';
+export { default as morph } from './morph';
+export * from './morph';
+export { default as queryMorph } from './query-morph';
+export * from './query-morph';

package/generated/morphdom/index.js

@@ -0,0 +1,6 @@
+export { default as html } from './html';
+export * from './html';
+export { default as morph } from './morph';
+export * from './morph';
+export { default as queryMorph } from './query-morph';
+export * from './query-morph';

package/generated/morphdom/morph.d.ts

@@ -0,0 +1,4 @@
+import type { TrustedMarkup } from './html';
+export default function (template: TrustedMarkup, fromEl?: Element, options?: {
+    cb: () => void;
+}): void;

package/generated/morphdom/morph.js

@@ -0,0 +1,9 @@
+import morphdom from '../internal/vendor/morphdom';
+export default function (template, fromEl, options) {
+    if (!fromEl)
+        return;
+    morphdom(fromEl, template.toString(), {
+        onBeforeElUpdated: (fromEl, toEl) => !fromEl.isEqualNode(toEl),
+        onBeforeElChildrenUpdated: (fromEl, toEl) => !toEl.matches('image-view,navigation-title'), // NOTE: image-view will alter it's contents! This is required to not empty it up again!
+    });
+}

package/generated/morphdom/query-morph.d.ts

@@ -0,0 +1,5 @@
+import type { TrustedMarkup } from './html';
+export default function (scopedSelector: string, template: TrustedMarkup, container?: Element, options?: {
+    cb?: () => boolean;
+    removeIf?: boolean;
+}): void;

package/generated/morphdom/query-morph.js

@@ -0,0 +1,12 @@
+import { $ } from '../internal/utils';
+import morph from './morph';
+export default function (scopedSelector, template, container, options) {
+    if (false === options?.cb?.())
+        return;
+    if ('boolean' === typeof options?.removeIf && options?.removeIf)
+        return container?.querySelector(`:scope>${scopedSelector}`)?.remove();
+    const fromEl = container?.querySelector(`:scope>${scopedSelector}`) ?? container?.appendChild($(template.toString(), '>1'));
+    if (!fromEl)
+        return;
+    morph(template, fromEl);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.86",
+  "version": "0.0.0-dev.87",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -58,17 +58,18 @@
   "scripts": {
     "prebuild": "rm -rf generated",
     "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
-    "postbuild": "npm run format:write",
+    "postbuild": "npm run format:write && vitest run --dom",
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "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:tpl && 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:morphdom && 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:morphdom": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/morphdom --exclude \".\\.test\\.ts\"",
     "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",

package/web-components.html-data/en.json

@@ -420,6 +420,9 @@
         {
           "name": "navigation-inline-subtitle"
         },
+        {
+          "name": "navigation-icon"
+        },
         {
           "name": "navigation-bar-title-display-mode"
         }

package/generated/internal/utils/render-label-icon.d.ts

@@ -1,2 +0,0 @@
-import type { LabelView } from '../../components';
-export default function (label: LabelView, systemImage: string | null): void;

package/generated/internal/utils/render-label-icon.js

@@ -1,19 +0,0 @@
-import $ from './cash';
-export default function (label, systemImage) {
-    const img = label.querySelector(':scope>[slot=icon]');
-    // image ??= this.appendChild($(`<i slot="icon" style="line-height: 1.05"></i>`, '>1'))
-    // image.setAttribute('class', `ph ph-${newValue}`)
-    if (systemImage) {
-        if (!img) {
-            // const newImg = $(`<i slot="icon" style="line-height: 1.05" class="ph ph-${systemImage}"></i>`, '>1')
-            const newImg = $(`<image-view slot="icon"></image-view>`, '>1');
-            newImg.setAttribute('system-name', systemImage);
-            // DOM manipulation last
-            label.appendChild(newImg);
-        }
-        else if (systemImage !== img.getAttribute('system-name'))
-            img.setAttribute('system-name', systemImage);
-    }
-    else
-        img?.remove();
-}

package/generated/internal/utils/render-label-title.d.ts

@@ -1,2 +0,0 @@
-import type { LabelView } from '../../components';
-export default function (label: LabelView, textContent: string | null): void;

package/generated/internal/utils/render-label-title.js

@@ -1,16 +0,0 @@
-import $ from './cash';
-export default function (label, textContent) {
-    const span = label.querySelector(':scope>:not([slot])');
-    if (textContent) {
-        if (!span) {
-            // const newSpan = $(`<span></span>`, '>1')
-            // newSpan.textContent = title
-            // DOM manipulation last
-            label.appendChild(Object.assign($(`<span></span>`, '>1'), { textContent }));
-        }
-        else if (textContent !== span.textContent)
-            span.textContent = textContent;
-    }
-    else
-        span?.remove();
-}

package/generated/internal/utils/render-label.d.ts

@@ -1 +0,0 @@
-export default function (selector: string, template: string, container?: Element, title?: string | null, systemImage?: string | null): void;

package/generated/internal/utils/render-label.js

@@ -1,19 +0,0 @@
-import $ from './cash';
-import renderLabelIcon from './render-label-icon';
-import renderLabelTitle from './render-label-title';
-export default function (selector, template, container, title, systemImage) {
-    const existing = container?.querySelector(selector);
-    if (existing) {
-        for (const { name, value } of $(template, '>1').attributes)
-            if (!existing.hasAttribute(name))
-                existing.setAttribute(name, value);
-        renderLabelIcon(existing, systemImage ?? null);
-        renderLabelTitle(existing, title ?? null);
-    }
-    else {
-        const newLabel = $(template, '>1');
-        renderLabelIcon(newLabel, systemImage ?? null);
-        renderLabelTitle(newLabel, title ?? null);
-        container?.appendChild(newLabel);
-    }
-}