@microsoft/webui-framework 0.0.28 → 0.0.29

package/dist/template.js

@@ -1,215 +1,13 @@
-import { dispatchTemplatesRegistered, templateRegistrationDetail, TEMPLATES_REGISTERED_EVENT, } from './template-events.js';
-import { prepareComponentStyles, registerComponentStyles, registerPreparedComponentStyles, requireComponentStyles, validateComponentStylesRegistration, } from './element/styles.js';
+export * from './template-registry.js';
+import { installTemplateResourcePreparation } from './template-registry.js';
+import { registerPreparedComponentStyles, requireComponentStyles, validateComponentStylesRegistration, } from './element/style-catalog.js';
 import { prepareComponentStyleLinks, prepareRegisteredLinkStyles, } from './element/link-styles.js';
-const WEBUI_DATA_ID = 'webui-data';
-const HYDRATION_COMPLETE_EVENT = 'webui:hydration-complete';
-const TEMPLATE_FN_COUNT = Symbol.for('microsoft.webui.templateFnCount');
-const normalizedTemplates = new WeakSet();
-const assetNormalizedTemplates = new WeakSet();
-let webuiDataLoaded = false;
-function runtimeTemplateFnCount(registry) {
-    const count = registry[TEMPLATE_FN_COUNT];
-    if (typeof count === 'number')
-        return count;
-    const initialized = Object.keys(registry).length;
-    registry[TEMPLATE_FN_COUNT] = initialized;
-    return initialized;
-}
-const pendingTemplateDefinitions = new Map();
-function acceptTemplateData(templates, templateFns, componentStyles) {
-    validateComponentStylesRegistration(componentStyles);
-    prepareTemplateData(templates, templateFns);
-    if (componentStyles) {
-        registerPreparedComponentStyles(componentStyles);
-    }
-    const w = window;
-    if (!w.__webui)
-        w.__webui = {};
-    if (!w.__webui.templates)
-        w.__webui.templates = {};
-    const names = Object.keys(templates);
-    for (let i = 0; i < names.length; i++) {
-        const tag = names[i];
-        w.__webui.templates[tag] = templates[tag];
-    }
-    for (let i = 0; i < names.length; i++) {
-        const pending = pendingTemplateDefinitions.get(names[i]);
-        if (!pending)
-            continue;
-        pendingTemplateDefinitions.delete(names[i]);
-        pending.define();
-    }
-    return names.length > 0;
-}
 if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+    installTemplateResourcePreparation(prepareRegisteredLinkStyles);
     window.__webuiRegisterComponentStyles = (value) => {
         const styles = requireComponentStyles(value);
         validateComponentStylesRegistration(styles);
         registerPreparedComponentStyles(styles);
         return prepareComponentStyleLinks(styles);
     };
-    if (window.__webui?.componentStyles) {
-        registerComponentStyles(window.__webui.componentStyles);
-    }
-    window.addEventListener(TEMPLATES_REGISTERED_EVENT, (event) => {
-        const detail = templateRegistrationDetail(event);
-        if (!detail?.templates)
-            return;
-        const styles = detail.componentStyles === undefined
-            ? undefined
-            : prepareComponentStyles(detail.componentStyles);
-        acceptTemplateData(detail.templates, undefined, styles);
-        const ready = prepareRegisteredLinkStyles(detail.templates);
-        if (ready)
-            detail.waitUntil?.(ready);
-    });
-    window.addEventListener(HYDRATION_COMPLETE_EVENT, releaseNonRoutedSSRBootstrapState, { once: true });
-}
-export function getTemplate(name) {
-    let meta = window.__webui?.templates?.[name];
-    if (!meta) {
-        loadWebUIDataBlock();
-        meta = window.__webui?.templates?.[name];
-    }
-    if (meta)
-        normalizeTemplate(name, meta);
-    return meta;
-}
-export function getTemplateRegistry() {
-    loadWebUIDataBlock();
-    return window.__webui?.templates;
-}
-export function registerTemplateData(templates, templateFns, componentStylesValue) {
-    const componentStyles = prepareComponentStyles(componentStylesValue);
-    if (acceptTemplateData(templates, templateFns, componentStyles)) {
-        dispatchTemplatesRegistered(templates);
-    }
-}
-function prepareTemplateData(templates, templateFns) {
-    const names = Object.keys(templates);
-    for (let i = 0; i < names.length; i++) {
-        const name = names[i];
-        normalizeTemplate(name, templates[name], templateFns?.[name]);
-    }
-}
-export function prepareAssetTemplateData(templates, templateFns) {
-    const names = Object.keys(templates);
-    for (let i = 0; i < names.length; i++) {
-        const name = names[i];
-        const meta = templates[name];
-        if (assetNormalizedTemplates.has(meta))
-            continue;
-        normalizeTemplateConditions(name, meta, templateFns?.[name] ?? []);
-        normalizedTemplates.add(meta);
-        assetNormalizedTemplates.add(meta);
-    }
-}
-export function deferTemplateDefinition(tagName, ctor, define) {
-    const pending = pendingTemplateDefinitions.get(tagName);
-    if (pending) {
-        if (pending.ctor === ctor) {
-            throw new Error(`[WebUI] <${tagName}> is already pending definition.`);
-        }
-        throw new Error(`[WebUI] <${tagName}> already has a pending authored definition.`);
-    }
-    pendingTemplateDefinitions.set(tagName, { ctor, define });
-}
-function loadWebUIDataBlock() {
-    if (webuiDataLoaded || window.__webui?.state !== undefined || typeof document === 'undefined')
-        return;
-    const el = document.getElementById(WEBUI_DATA_ID);
-    if (!el) {
-        webuiDataLoaded = true;
-        return;
-    }
-    const text = el.textContent;
-    if (text) {
-        const templateFns = window.__webui?.templateFns;
-        const componentAssetStyles = window.__webui?.componentAssetStyles;
-        const parsed = JSON.parse(text);
-        if (templateFns)
-            parsed.templateFns = templateFns;
-        if (componentAssetStyles)
-            parsed.componentAssetStyles = componentAssetStyles;
-        window.__webui = parsed;
-        el.remove();
-        webuiDataLoaded = true;
-        if (parsed.componentStyles !== undefined) {
-            registerComponentStyles(parsed.componentStyles);
-        }
-        return;
-    }
-    el.remove();
-    webuiDataLoaded = true;
-}
-export function releaseSSRBootstrapState() {
-    const runtime = window.__webui;
-    if (runtime?.state !== undefined) {
-        delete runtime.state;
-    }
-}
-export function releaseNonRoutedSSRBootstrapState() {
-    const runtime = window.__webui;
-    if (runtime?.chain === undefined &&
-        runtime?.templateHostExclusions === undefined) {
-        releaseSSRBootstrapState();
-    }
-}
-function normalizeTemplate(name, meta, suppliedFns) {
-    if (normalizedTemplates.has(meta))
-        return;
-    const runtimeFns = window.__webui?.templateFns;
-    const fns = suppliedFns ?? runtimeFns?.[name] ?? [];
-    normalizeTemplateConditions(name, meta, fns);
-    normalizedTemplates.add(meta);
-    if (suppliedFns === undefined && runtimeFns?.[name] === fns) {
-        let remaining = runtimeTemplateFnCount(runtimeFns);
-        delete runtimeFns[name];
-        remaining--;
-        runtimeFns[TEMPLATE_FN_COUNT] = remaining;
-        if (remaining === 0 && window.__webui) {
-            const liveCount = Object.keys(runtimeFns).length;
-            if (liveCount === 0) {
-                delete window.__webui.templateFns;
-            }
-            else {
-                runtimeFns[TEMPLATE_FN_COUNT] = liveCount;
-            }
-        }
-    }
-}
-function normalizeTemplateConditions(name, meta, fns) {
-    const stack = [meta];
-    while (stack.length > 0) {
-        const block = stack.pop();
-        if (!block)
-            continue;
-        if (block.a) {
-            for (let i = 0; i < block.a.length; i++) {
-                const attr = block.a[i];
-                if (attr[1] === 2)
-                    normalizeCondition(name, attr[2], fns);
-            }
-        }
-        if (block.c) {
-            for (let i = 0; i < block.c.length; i++) {
-                normalizeCondition(name, block.c[i][0], fns);
-            }
-        }
-        const children = block.b;
-        if (children) {
-            for (let i = 0; i < children.length; i++)
-                stack.push(children[i]);
-        }
-    }
-}
-function normalizeCondition(tagName, condition, fns) {
-    const first = condition[0];
-    if (typeof first === 'function')
-        return;
-    const fn = fns[first];
-    if (typeof fn !== 'function') {
-        throw new Error(`[WebUI] Missing condition closure ${first} for <${tagName}>.`);
-    }
-    condition[0] = fn;
 }

package/dist/trusted-types-policy.d.ts

@@ -0,0 +1,4 @@
+import type { TemplateBlockMeta } from './template-types.js';
+export declare function registerTrustedTemplateBlock(meta: TemplateBlockMeta): void;
+export declare function setTemplateContent(target: HTMLTemplateElement, meta: TemplateBlockMeta): void;
+export declare function setImportMapContent(script: HTMLScriptElement, specifier: string, css: string, view: Window | null): void;

package/dist/trusted-types-policy.js

@@ -0,0 +1,62 @@
+let documentPolicies;
+let templateHTML;
+function getDocumentPolicy(view) {
+    if (!view?.trustedTypes)
+        return undefined;
+    const existing = documentPolicies?.get(view);
+    if (existing)
+        return existing;
+    const capability = {};
+    const authorize = (input, token) => {
+        if (token !== capability) {
+            throw new TypeError('[WebUI] Only the compiled-template runtime may use this Trusted Types policy.');
+        }
+        return input;
+    };
+    let policy;
+    try {
+        policy = view.trustedTypes.createPolicy('webui', {
+            createHTML: authorize,
+            createScript: authorize,
+        });
+    }
+    catch (cause) {
+        throw new Error('[WebUI] Cannot create Trusted Types policy "webui". Allow "webui" in CSP, share one framework module, and do not pre-create the policy.', { cause });
+    }
+    const trust = { policy, capability };
+    (documentPolicies ??= new WeakMap()).set(view, trust);
+    return trust;
+}
+export function registerTrustedTemplateBlock(meta) {
+    const view = window;
+    if (!view.trustedTypes)
+        return;
+    templateHTML ??= new WeakMap();
+    if (!templateHTML.has(meta))
+        templateHTML.set(meta, meta.h);
+}
+export function setTemplateContent(target, meta) {
+    const trust = getDocumentPolicy(window);
+    if (!trust) {
+        target.innerHTML = meta.h;
+        return;
+    }
+    const html = templateHTML?.get(meta);
+    if (html === undefined || html !== meta.h) {
+        throw new Error('[WebUI] Unregistered or modified compiled template. Register only immutable compiler output.');
+    }
+    target.innerHTML = trust.policy.createHTML(html, trust.capability);
+}
+export function setImportMapContent(script, specifier, css, view) {
+    if (script.type !== 'importmap') {
+        throw new TypeError('[WebUI] CSS data requires a script with type="importmap".');
+    }
+    const json = JSON.stringify({
+        imports: { [specifier]: `data:text/css,${encodeURIComponent(css)}` },
+    });
+    const trust = getDocumentPolicy(view);
+    if (trust)
+        script.textContent = trust.policy.createScript(json, trust.capability);
+    else
+        script.textContent = json;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/webui-framework",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "publishConfig": {
     "tag": "latest"
   },
@@ -43,10 +43,10 @@
     "dist/"
   ],
   "devDependencies": {
-    "@playwright/test": "^1.61.1",
-    "@types/node": "^26.1.0",
-    "typescript": "7.0.2",
-    "@microsoft/webui-test-support": "0.0.28"
+    "@microsoft/webui-test-support": "0.0.29",
+    "@playwright/test": "^1.63.0",
+    "@types/node": "^26.5.1",
+    "typescript": "7.0.2"
   },
   "scripts": {
     "build": "tsc",