@microsoft/webui-framework 0.0.25 → 0.0.26

package/dist/template-events.d.ts

@@ -1,6 +1,13 @@
 import type { TemplateMeta } from './template.js';
 export declare const TEMPLATES_REGISTERED_EVENT = "webui:templates-registered";
+export interface TemplateRegistrationDetail {
+    templates?: Record<string, TemplateMeta>;
+    componentStyles?: unknown;
+    waitUntil?: (promise: PromiseLike<unknown>) => void;
+}
 export declare function dispatchTemplatesRegistered(templates: Record<string, TemplateMeta>): void;
 export declare function templateRegistrationDetail(event: Event): {
     templates?: Record<string, TemplateMeta>;
+    componentStyles?: unknown;
+    waitUntil?: (promise: PromiseLike<unknown>) => void;
 } | undefined;

package/dist/template-events.js

@@ -18,6 +18,12 @@ export function templateRegistrationDetail(event) {
         templates: typeof templates === 'object' && templates !== null
             ? templates
             : undefined,
+        componentStyles: detail.componentStyles,
+        waitUntil: typeof detail.waitUntil === 'function'
+            ? detail.waitUntil
+            : undefined,
     };
-    return payload.templates ? payload : undefined;
+    return payload.templates || payload.componentStyles !== undefined || payload.waitUntil
+        ? payload
+        : undefined;
 }

package/dist/template-types.d.ts

@@ -44,11 +44,10 @@ export interface TemplateBlockMeta {
 }
 export interface TemplateMeta extends TemplateBlockMeta {
     b?: TemplateBlockMeta[];
-    sa?: string;
     re?: [string, string, CompiledEventArgs][];
     tr?: string[];
     ta?: string[];
     sd?: 1;
     th?: boolean | 1;
-    wp?: 1 | 2;
+    wp?: 1 | 2 | 3 | 4;
 }

package/dist/template.d.ts

@@ -1,19 +1,25 @@
 export type { CompiledAttrGroupMeta, CompiledAttrMeta, CompiledAttrPart, CompiledCondition, CompiledConditionFn, CompiledConditionalMeta, CompiledEventArg, CompiledEventArgs, CompiledEventBindingMeta, CompiledEventGroupMeta, SerializedCompiledCondition, TemplateCondition, CompiledTextRunMeta, TemplateBlockMeta, TemplateMeta, TemplateNodeIndex, TemplateSlot, } from './template-types.js';
+import { type ComponentStyles } from './element/styles.js';
 import type { CompiledConditionFn, TemplateMeta } from './template-types.js';
 declare global {
     interface WebUIRuntimeGlobal {
         state?: Record<string, unknown>;
         templates?: Record<string, TemplateMeta>;
         templateFns?: Record<string, CompiledConditionFn[]>;
+        componentAssetStyles?: Record<string, readonly string[]>;
         templateHostExclusions?: Set<string>;
+        componentStyles?: ComponentStyles;
         [key: string]: unknown;
     }
     interface Window {
         __webui?: WebUIRuntimeGlobal;
+        __webuiRegisterComponentStyles?: (value: unknown) => Promise<void> | undefined;
     }
 }
 export declare function getTemplate(name: string): TemplateMeta | undefined;
 export declare function getTemplateRegistry(): Record<string, TemplateMeta> | undefined;
-export declare function registerTemplateData(templates: Record<string, TemplateMeta>, templateFns?: Record<string, CompiledConditionFn[]>): void;
+export declare function registerTemplateData(templates: Record<string, TemplateMeta>, templateFns?: Record<string, CompiledConditionFn[]>, componentStylesValue?: ComponentStyles | unknown): void;
 export declare function prepareAssetTemplateData(templates: Record<string, TemplateMeta>, templateFns?: Record<string, CompiledConditionFn[]>): void;
 export declare function deferTemplateDefinition(tagName: string, ctor: Function, define: () => void): void;
+export declare function releaseSSRBootstrapState(): void;
+export declare function releaseNonRoutedSSRBootstrapState(): void;

package/dist/template.js

@@ -1,25 +1,32 @@
 import { dispatchTemplatesRegistered, templateRegistrationDetail, TEMPLATES_REGISTERED_EVENT, } from './template-events.js';
+import { prepareComponentStyles, registerComponentStyles, registerPreparedComponentStyles, requireComponentStyles, validateComponentStylesRegistration, } from './element/styles.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) {
+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 = {};
-    if (templateFns) {
-        if (!w.__webui.templateFns)
-            w.__webui.templateFns = {};
-        const fnNames = Object.keys(templateFns);
-        for (let i = 0; i < fnNames.length; i++) {
-            const tag = fnNames[i];
-            w.__webui.templateFns[tag] = templateFns[tag];
-        }
-    }
     const names = Object.keys(templates);
     for (let i = 0; i < names.length; i++) {
         const tag = names[i];
@@ -35,11 +42,28 @@ function acceptTemplateData(templates, templateFns) {
     return names.length > 0;
 }
 if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+    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 templates = templateRegistrationDetail(event)?.templates;
-        if (templates)
-            acceptTemplateData(templates);
+        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];
@@ -55,8 +79,9 @@ export function getTemplateRegistry() {
     loadWebUIDataBlock();
     return window.__webui?.templates;
 }
-export function registerTemplateData(templates, templateFns) {
-    if (acceptTemplateData(templates, templateFns)) {
+export function registerTemplateData(templates, templateFns, componentStylesValue) {
+    const componentStyles = prepareComponentStyles(componentStylesValue);
+    if (acceptTemplateData(templates, templateFns, componentStyles)) {
         dispatchTemplatesRegistered(templates);
     }
 }
@@ -100,20 +125,58 @@ function loadWebUIDataBlock() {
     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 fns = suppliedFns ?? window.__webui?.templateFns?.[name] ?? [];
+    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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/webui-framework",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "type": "module",
   "description": "WebUI Framework Next — Preact-inspired lightweight Web Component runtime with SSR hydration and compiled-template path mapping.",
   "license": "MIT",
@@ -28,6 +28,12 @@
         "types": "./dist/lazy-hydration-entry.d.ts",
         "default": "./dist/lazy-hydration-entry.js"
       }
+    },
+    "./interaction-hydration.js": {
+      "import": {
+        "types": "./dist/interaction-hydration.d.ts",
+        "default": "./dist/interaction-hydration.js"
+      }
     }
   },
   "files": [
@@ -36,8 +42,8 @@
   "devDependencies": {
     "@playwright/test": "^1.61.1",
     "@types/node": "^26.1.0",
-    "typescript": "^6.0.3",
-    "@microsoft/webui-test-support": "0.0.25"
+    "typescript": "7.0.2",
+    "@microsoft/webui-test-support": "0.0.26"
   },
   "scripts": {
     "build": "tsc",

package/dist/component-asset/resources.d.ts

@@ -1,4 +0,0 @@
-export type PreparedAssetStyles = Record<string, string>[];
-export declare function prepareAssetStyles(templateStyles: readonly string[]): PreparedAssetStyles;
-export declare function readNonce(): string;
-export declare function registerAssetStyles(preparedStyles: readonly Record<string, string>[], nonce: string): void;

package/dist/component-asset/resources.js

@@ -1,83 +0,0 @@
-const injectedAssetStyles = new Set();
-let assetStylesSeeded = false;
-export function prepareAssetStyles(templateStyles) {
-    const prepared = new Array(templateStyles.length);
-    for (let i = 0; i < templateStyles.length; i++) {
-        prepared[i] = parseImportMap(templateStyles[i]);
-    }
-    return prepared;
-}
-export function readNonce() {
-    const nonce = assetGlobal()?.nonce;
-    if (nonce)
-        return nonce;
-    const meta = document.querySelector('meta[name="webui-nonce"]');
-    return meta?.content ?? '';
-}
-export function registerAssetStyles(preparedStyles, nonce) {
-    if (preparedStyles.length === 0)
-        return;
-    seedAssetStyleSet();
-    for (let i = 0; i < preparedStyles.length; i++) {
-        const imports = preparedStyles[i];
-        const nextImports = {};
-        let hasNewImport = false;
-        const specifiers = Object.keys(imports);
-        for (let j = 0; j < specifiers.length; j++) {
-            const specifier = specifiers[j];
-            if (injectedAssetStyles.has(specifier))
-                continue;
-            injectedAssetStyles.add(specifier);
-            nextImports[specifier] = imports[specifier];
-            hasNewImport = true;
-        }
-        if (!hasNewImport)
-            continue;
-        const script = document.createElement('script');
-        script.type = 'importmap';
-        if (nonce)
-            script.nonce = nonce;
-        script.textContent = JSON.stringify({ imports: nextImports });
-        document.head.appendChild(script);
-    }
-}
-function assetGlobal() {
-    return window.__webui;
-}
-function seedAssetStyleSet() {
-    if (assetStylesSeeded)
-        return;
-    assetStylesSeeded = true;
-    const styles = assetGlobal()?.styles;
-    if (!styles)
-        return;
-    for (let i = 0; i < styles.length; i++) {
-        injectedAssetStyles.add(styles[i]);
-    }
-}
-function parseImportMap(scriptMarkup) {
-    const trimmed = scriptMarkup.trim();
-    if (!trimmed.startsWith('<script type="importmap"')) {
-        throw new Error('[WebUI] Component asset templateStyles entry must be a <script type="importmap"> tag.');
-    }
-    const openTagEnd = trimmed.indexOf('>');
-    const closeTagStart = trimmed.lastIndexOf('</script>');
-    if (openTagEnd < 0 || closeTagStart <= openTagEnd) {
-        throw new Error('[WebUI] Component asset importmap tag is malformed.');
-    }
-    const parsed = JSON.parse(trimmed.substring(openTagEnd + 1, closeTagStart));
-    if (!parsed.imports || typeof parsed.imports !== 'object') {
-        throw new Error('[WebUI] Component asset importmap is missing an imports object.');
-    }
-    const imports = {};
-    const specifiers = Object.keys(parsed.imports);
-    for (let i = 0; i < specifiers.length; i++) {
-        const specifier = specifiers[i];
-        const uri = parsed.imports[specifier];
-        if (typeof uri !== 'string' || !uri.startsWith('data:text/css,')) {
-            throw new Error(`[WebUI] Component asset importmap entry "${specifier}" must be a data:text/css URI.`);
-        }
-        imports[specifier] = uri;
-    }
-    return imports;
-}