@microsoft/webui-framework 0.0.20 → 0.0.22

package/README.md

@@ -257,11 +257,17 @@ export const settingsAssets = defineComponentAssets({
 });
 ```
 
-The asset module carries the component's template and style payload. Use
-`preload(tag)` to start template, module, and optional data work early, then
-`create(tag)` to create the element after template/module work is ready.
-Concurrent asset requests share one in-flight load and CSS module styles are
-deduped. `create(tag)` does not block on optional data by default. Use
+The asset graph keeps entry-owned templates external, leaves single-root
+dependencies inline, and emits dependencies shared by multiple roots once as
+flat dynamic chunks. Component assets cannot be combined with `<route>`. Load
+the normal entry bundle first so external prerequisites are registered.
+
+Shared chunk filenames are generated and must not be copied into the manifest.
+Each root asset carries its own dynamic imports; `--metafile` is available for
+analysis and build tooling. `preload(tag)` starts template, module, and optional
+data work. Concurrent roots share in-flight chunk imports by resolved URL and
+CSS module styles are deduped. `create(tag)` creates the element after
+template/module work is ready and does not block on optional data by default. Use
 `create(tag, { awaitData: true, dataTimeoutMs: 150 })` only when a component must
 wait briefly for state before mounting.
 
@@ -602,7 +608,7 @@ interface TemplateMeta {
   eg?: [event, [[handler, argSpecs, targetPath, usesEvent?]]][]; // Events
   b?: TemplateBlockMeta[];             // Nested block metadata
   sa?: string;                         // Adopted stylesheet specifier
-  sd?: boolean;                        // Shadow DOM flag for client-created
+  sd?: 1;                              // Shadow DOM flag for client-created
   re?: [event, handler, argSpecs][];    // Root-level events
   tr?: string[];                       // Template state roots
   ta?: string[];                       // Host attributes aligned with tr

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

@@ -0,0 +1,22 @@
+import type { CompiledConditionFn, TemplateMeta } from '../template.js';
+export interface ComponentAssetImport {
+    components: string[];
+    href: string;
+    load: () => Promise<unknown>;
+}
+export interface ComponentAsset {
+    type: 'webui-component-asset';
+    version: 2;
+    kind: 'root' | 'chunk';
+    root?: string;
+    components: string[];
+    requiredComponents: string[];
+    externalComponents: string[];
+    imports: ComponentAssetImport[];
+    templateStyles: string[];
+    templates: Record<string, TemplateMeta>;
+    templateFunctions?: Record<string, CompiledConditionFn[]>;
+}
+export declare function readComponentAssetModule(module: unknown): unknown;
+export declare function validateAsset(value: unknown, expectedKind: ComponentAsset['kind']): asserts value is ComponentAsset;
+export declare function sameComponents(left: readonly string[], right: readonly string[]): boolean;

package/dist/component-asset/asset.js

@@ -0,0 +1,171 @@
+const ASSET_TYPE = 'webui-component-asset';
+const ASSET_VERSION = 2;
+export function readComponentAssetModule(module) {
+    if (!isObject(module) || !isObject(module.default)) {
+        throw new Error('[WebUI] Component asset module must default-export an asset object.');
+    }
+    return module.default;
+}
+export function validateAsset(value, expectedKind) {
+    if (!isObject(value)) {
+        throw new Error('[WebUI] Component asset default export must be an object.');
+    }
+    const asset = value;
+    if (asset.type !== ASSET_TYPE) {
+        throw new Error(`[WebUI] Invalid component asset type: ${String(asset.type)}`);
+    }
+    if (asset.version !== ASSET_VERSION) {
+        throw new Error(`[WebUI] Unsupported component asset version: ${String(asset.version)}`);
+    }
+    if (asset.kind !== expectedKind) {
+        throw new Error(`[WebUI] Expected component asset kind "${expectedKind}", received "${String(asset.kind)}".`);
+    }
+    validateUniqueStringArray(asset.components, 'components');
+    validateUniqueStringArray(asset.requiredComponents, 'requiredComponents');
+    validateUniqueStringArray(asset.externalComponents, 'externalComponents');
+    if (!Array.isArray(asset.imports)) {
+        throw new Error('[WebUI] Component asset imports must be an array.');
+    }
+    validateStringArray(asset.templateStyles, 'templateStyles');
+    if (!isObject(asset.templates)) {
+        throw new Error('[WebUI] Component asset templates must be an object.');
+    }
+    let root;
+    if (expectedKind === 'root') {
+        if (typeof asset.root !== 'string' || asset.root.length === 0) {
+            throw new Error('[WebUI] Component asset root must name its root component.');
+        }
+        root = asset.root;
+    }
+    else {
+        validateChunkShape(asset.root, asset.imports, asset.externalComponents);
+    }
+    for (let i = 0; i < asset.imports.length; i++) {
+        validateAssetImport(asset.imports[i]);
+    }
+    validateAssetPayload(asset.components, asset.templates, asset.templateFunctions);
+    validateAssetCoverage(root, asset.components, asset.requiredComponents, asset.externalComponents, asset.imports);
+}
+export function sameComponents(left, right) {
+    if (left.length !== right.length)
+        return false;
+    for (let i = 0; i < left.length; i++) {
+        if (left[i] !== right[i])
+            return false;
+    }
+    return true;
+}
+function isObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function validateChunkShape(root, imports, externalComponents) {
+    if (root !== undefined) {
+        throw new Error('[WebUI] Shared component asset chunks cannot declare a root.');
+    }
+    if (imports.length !== 0) {
+        throw new Error('[WebUI] Shared component asset chunks cannot import other chunks.');
+    }
+    if (externalComponents.length !== 0) {
+        throw new Error('[WebUI] Shared component asset chunks cannot declare external components.');
+    }
+}
+function validateAssetImport(value) {
+    if (!isObject(value)) {
+        throw new Error('[WebUI] Component asset import must be an object.');
+    }
+    const assetImport = value;
+    validateUniqueStringArray(assetImport.components, 'import components');
+    if (assetImport.components.length === 0) {
+        throw new Error('[WebUI] Component asset imports must provide at least one component.');
+    }
+    if (typeof assetImport.href !== 'string' || assetImport.href.length === 0) {
+        throw new Error('[WebUI] Component asset import href must be a non-empty string.');
+    }
+    if (typeof assetImport.load !== 'function') {
+        throw new Error('[WebUI] Component asset import load must be a function.');
+    }
+}
+function validateUniqueStringArray(value, field) {
+    validateStringArray(value, field);
+    const seen = new Set();
+    for (let i = 0; i < value.length; i++) {
+        if (seen.has(value[i])) {
+            throw new Error(`[WebUI] Component asset ${field} cannot contain duplicate <${value[i]}> entries.`);
+        }
+        seen.add(value[i]);
+    }
+}
+function validateStringArray(value, field) {
+    if (!Array.isArray(value)) {
+        throw new Error(`[WebUI] Component asset ${field} must be an array.`);
+    }
+    for (let i = 0; i < value.length; i++) {
+        if (typeof value[i] !== 'string' || value[i].length === 0) {
+            throw new Error(`[WebUI] Component asset ${field} must contain non-empty strings.`);
+        }
+    }
+}
+function validateAssetCoverage(root, components, requiredComponents, externalComponents, imports) {
+    const required = new Set(requiredComponents);
+    if (root && !required.has(root)) {
+        throw new Error(`[WebUI] Component asset root <${root}> must include itself in requiredComponents.`);
+    }
+    const providers = new Set();
+    const addProvider = (component) => {
+        if (!required.has(component)) {
+            throw new Error(`[WebUI] Component asset provides undeclared template <${component}>. Add it to requiredComponents.`);
+        }
+        if (providers.has(component)) {
+            throw new Error(`[WebUI] Component asset assigns required template <${component}> to more than one payload, import, or external prerequisite.`);
+        }
+        providers.add(component);
+    };
+    for (let i = 0; i < components.length; i++)
+        addProvider(components[i]);
+    for (let i = 0; i < externalComponents.length; i++)
+        addProvider(externalComponents[i]);
+    for (let i = 0; i < imports.length; i++) {
+        const imported = imports[i].components;
+        for (let j = 0; j < imported.length; j++)
+            addProvider(imported[j]);
+    }
+    for (let i = 0; i < requiredComponents.length; i++) {
+        const component = requiredComponents[i];
+        if (!providers.has(component)) {
+            throw new Error(`[WebUI] Component asset required template <${component}> has no payload, import, or external prerequisite.`);
+        }
+    }
+}
+function validateAssetPayload(components, templates, templateFunctions) {
+    const declared = new Set(components);
+    const templateNames = Object.keys(templates);
+    for (let i = 0; i < templateNames.length; i++) {
+        const template = templateNames[i];
+        if (!declared.has(template)) {
+            throw new Error(`[WebUI] Component asset templates contain undeclared payload <${template}>.`);
+        }
+    }
+    for (let i = 0; i < components.length; i++) {
+        const component = components[i];
+        if (!Object.prototype.hasOwnProperty.call(templates, component)) {
+            throw new Error(`[WebUI] Component asset payload <${component}> is missing its template metadata.`);
+        }
+    }
+    if (templateFunctions === undefined)
+        return;
+    if (!isObject(templateFunctions)) {
+        throw new Error('[WebUI] Component asset templateFunctions must be an object.');
+    }
+    const functionNames = Object.keys(templateFunctions);
+    for (let i = 0; i < functionNames.length; i++) {
+        const component = functionNames[i];
+        if (!declared.has(component)) {
+            throw new Error(`[WebUI] Component asset templateFunctions contains undeclared payload <${component}>.`);
+        }
+        const functions = templateFunctions[component];
+        if (!Array.isArray(functions) ||
+            functions.some(candidate => typeof candidate !== 'function')) {
+            throw new Error(`[WebUI] Component asset templateFunctions for <${component}> must contain only functions.`);
+        }
+    }
+}

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

@@ -0,0 +1 @@
+export declare function loadComponentAsset(tag: string, url: string | URL): Promise<void>;

package/dist/component-asset/loader.js

@@ -0,0 +1,104 @@
+import { getTemplate, prepareAssetTemplateData, registerTemplateData, } from '../template.js';
+import { readComponentAssetModule, sameComponents, validateAsset, } from './asset.js';
+import { prepareAssetStyles, readNonce, registerAssetStyles, } from './resources.js';
+const assetModulePromises = new Map();
+export function loadComponentAsset(tag, url) {
+    const assetUrl = new URL(url, document.baseURI);
+    const href = assetUrl.href;
+    return loadAssetModule(href, () => import(assetUrl.href))
+        .then(imported => registerRootAsset(tag, href, imported));
+}
+async function registerRootAsset(expectedRoot, href, imported) {
+    const asset = readComponentAssetModule(imported);
+    validateAsset(asset, 'root');
+    if (asset.root !== expectedRoot) {
+        throw new Error(`[WebUI] Component asset manifest expected <${expectedRoot}> but ${href} exports <${String(asset.root)}>.`);
+    }
+    validateExternalComponents(asset);
+    const root = prepareComponentPayload(asset);
+    const chunks = await prepareAssetImports(asset.imports);
+    for (let i = 0; i < chunks.length; i++) {
+        registerComponentPayload(chunks[i]);
+    }
+    registerComponentPayload(root);
+}
+function loadAssetModule(href, load) {
+    let promise = assetModulePromises.get(href);
+    if (promise)
+        return promise;
+    promise = Promise.resolve()
+        .then(load)
+        .finally(() => {
+        assetModulePromises.delete(href);
+    });
+    assetModulePromises.set(href, promise);
+    return promise;
+}
+async function prepareAssetImports(imports) {
+    const pending = [];
+    for (let i = 0; i < imports.length; i++) {
+        const assetImport = imports[i];
+        if (componentsAlreadyRegistered(assetImport.components))
+            continue;
+        pending.push(importAndPrepareChunk(assetImport));
+    }
+    return Promise.all(pending);
+}
+function importAndPrepareChunk(assetImport) {
+    const href = new URL(assetImport.href, document.baseURI).href;
+    return loadAssetModule(href, assetImport.load)
+        .then(imported => {
+        const chunk = readComponentAssetModule(imported);
+        validateAsset(chunk, 'chunk');
+        if (!sameComponents(chunk.components, assetImport.components)) {
+            throw new Error(`[WebUI] Shared component asset ${href} does not provide the components declared by its root import.`);
+        }
+        return prepareComponentPayload(chunk);
+    });
+}
+function prepareComponentPayload(asset) {
+    prepareAssetTemplateData(asset.templates, asset.templateFunctions);
+    return {
+        asset,
+        styles: prepareAssetStyles(asset.templateStyles),
+    };
+}
+function registerComponentPayload(prepared) {
+    const { asset, styles } = prepared;
+    if (componentsAlreadyRegistered(asset.components))
+        return;
+    registerAssetStyles(styles, readNonce());
+    registerTemplateData(asset.templates, asset.templateFunctions);
+    validateRequiredComponents(asset);
+}
+function componentsAlreadyRegistered(components) {
+    if (components.length === 0)
+        return false;
+    for (let i = 0; i < components.length; i++) {
+        if (!getTemplate(components[i]))
+            return false;
+    }
+    return true;
+}
+function validateExternalComponents(asset) {
+    const missing = [];
+    for (let i = 0; i < asset.externalComponents.length; i++) {
+        const component = asset.externalComponents[i];
+        if (!getTemplate(component))
+            missing.push(component);
+    }
+    if (missing.length === 0)
+        return;
+    throw new Error(`[WebUI] Component asset requires entr${missing.length === 1 ? 'y template' : 'y templates'} ${missing.map(tag => `<${tag}>`).join(', ')}. Load the application entry bundle and protocol before deferred component assets.`);
+}
+function validateRequiredComponents(asset) {
+    const missing = [];
+    for (let i = 0; i < asset.requiredComponents.length; i++) {
+        const component = asset.requiredComponents[i];
+        if (!getTemplate(component))
+            missing.push(component);
+    }
+    if (missing.length === 0)
+        return;
+    throw new Error(`[WebUI] Component asset is missing required template${missing.length === 1 ? '' : 's'}: ${missing.map(tag => `<${tag}>`).join(', ')}. Ensure the application entry bundle and protocol are loaded before deferred component assets.`);
+}

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

@@ -0,0 +1,20 @@
+export type ComponentAssetState = Record<string, unknown>;
+export interface ComponentAssetManifestEntry<Data extends ComponentAssetState = ComponentAssetState> {
+    asset: string | URL;
+    module?: () => Promise<unknown>;
+    data?: () => Promise<Data>;
+}
+export type ComponentAssetManifest = Record<string, ComponentAssetManifestEntry>;
+export interface ComponentAssetPreload<Data extends ComponentAssetState = ComponentAssetState> {
+    asset: Promise<void>;
+    module?: Promise<unknown>;
+    data?: Promise<Data>;
+}
+export interface ComponentAssetCreateOptions {
+    awaitData?: boolean;
+    dataTimeoutMs?: number;
+}
+export interface ComponentAssetRegistry {
+    preload<Data extends ComponentAssetState = ComponentAssetState>(tag: string): ComponentAssetPreload<Data>;
+    create(tag: string, options?: ComponentAssetCreateOptions): Promise<HTMLElement>;
+}

package/dist/component-asset/manifest.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,83 @@
+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;
+}

package/dist/component-asset.d.ts

@@ -1,30 +1,4 @@
-import { type CompiledConditionFn, type TemplateMeta } from './template.js';
-export interface ComponentAsset {
-    type?: 'webui-component-asset';
-    version?: number;
-    components?: string[];
-    templateStyles?: string[];
-    templates?: Record<string, TemplateMeta>;
-    templateFunctions?: Record<string, CompiledConditionFn[]>;
-}
-export type ComponentAssetState = Record<string, unknown>;
-export interface ComponentAssetManifestEntry<Data extends ComponentAssetState = ComponentAssetState> {
-    asset: string | URL;
-    module?: () => Promise<unknown>;
-    data?: () => Promise<Data>;
-}
-export type ComponentAssetManifest = Record<string, ComponentAssetManifestEntry>;
-export interface ComponentAssetPreload<Data extends ComponentAssetState = ComponentAssetState> {
-    asset: Promise<void>;
-    module?: Promise<unknown>;
-    data?: Promise<Data>;
-}
-export interface ComponentAssetCreateOptions {
-    awaitData?: boolean;
-    dataTimeoutMs?: number;
-}
-export interface ComponentAssetRegistry {
-    preload<Data extends ComponentAssetState = ComponentAssetState>(tag: string): ComponentAssetPreload<Data>;
-    create(tag: string, options?: ComponentAssetCreateOptions): Promise<HTMLElement>;
-}
+import type { ComponentAssetManifest, ComponentAssetRegistry } from './component-asset/manifest.js';
+export type { ComponentAsset, ComponentAssetImport, } from './component-asset/asset.js';
+export type { ComponentAssetCreateOptions, ComponentAssetManifest, ComponentAssetManifestEntry, ComponentAssetPreload, ComponentAssetRegistry, ComponentAssetState, } from './component-asset/manifest.js';
 export declare function defineComponentAssets(manifest: ComponentAssetManifest): ComponentAssetRegistry;

package/dist/component-asset.js

@@ -1,12 +1,4 @@
-import { getTemplate, registerTemplateData, } from './template.js';
-const ASSET_TYPE = 'webui-component-asset';
-const ASSET_VERSION = 1;
-const injectedAssetStyles = new Set();
-const assetLoadPromises = new Map();
-let assetStylesSeeded = false;
-function assetGlobal() {
-    return window.__webui;
-}
+import { loadComponentAsset } from './component-asset/loader.js';
 export function defineComponentAssets(manifest) {
     const preloads = new Map();
     function preload(tag) {
@@ -85,129 +77,3 @@ function dataWithTimeout(data, timeoutMs) {
         }),
     ]);
 }
-function loadComponentAsset(tag, url) {
-    if (getTemplate(tag))
-        return Promise.resolve();
-    const assetUrl = new URL(url, document.baseURI);
-    const href = assetUrl.href;
-    let promise = assetLoadPromises.get(href);
-    if (promise)
-        return promise;
-    promise = importAndRegisterComponentAsset(assetUrl)
-        .finally(() => {
-        assetLoadPromises.delete(href);
-    });
-    assetLoadPromises.set(href, promise);
-    return promise;
-}
-function registerComponentAsset(asset) {
-    validateAsset(asset);
-    if (asset.templates && templatesAlreadyRegistered(asset.templates))
-        return;
-    registerAssetStyles(asset.templateStyles, readNonce());
-    if (asset.templates) {
-        registerTemplateData(asset.templates, asset.templateFunctions);
-    }
-}
-async function importAndRegisterComponentAsset(assetUrl) {
-    const imported = await import(assetUrl.href);
-    registerComponentAsset(readComponentAssetModule(imported));
-}
-function readComponentAssetModule(module) {
-    if (!isObject(module) || !isObject(module.default)) {
-        throw new Error('[WebUI] Component asset module must default-export an asset object.');
-    }
-    return module.default;
-}
-function isObject(value) {
-    return typeof value === 'object' && value !== null;
-}
-function validateAsset(asset) {
-    if (asset.type !== ASSET_TYPE) {
-        throw new Error(`[WebUI] Invalid component asset type: ${String(asset.type)}`);
-    }
-    if (asset.version !== ASSET_VERSION) {
-        throw new Error(`[WebUI] Unsupported component asset version: ${String(asset.version)}`);
-    }
-}
-function templatesAlreadyRegistered(templates) {
-    const tags = Object.keys(templates);
-    if (tags.length === 0)
-        return false;
-    for (let i = 0; i < tags.length; i++) {
-        if (!getTemplate(tags[i]))
-            return false;
-    }
-    return true;
-}
-function readNonce() {
-    const nonce = assetGlobal()?.nonce;
-    if (nonce)
-        return nonce;
-    const meta = document.querySelector('meta[name="webui-nonce"]');
-    return meta?.content ?? '';
-}
-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 registerAssetStyles(templateStyles, nonce) {
-    if (!templateStyles || templateStyles.length === 0)
-        return;
-    seedAssetStyleSet();
-    for (let i = 0; i < templateStyles.length; i++) {
-        const imports = parseImportMap(templateStyles[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 parseImportMap(scriptMarkup) {
-    const trimmed = scriptMarkup.trim();
-    if (!trimmed.startsWith('<script')) {
-        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;
-}

package/dist/streaming-activation.js

@@ -5,7 +5,7 @@ export function activateRootsBetween(startMarker, endMarker, state, updates) {
     if (!root) {
         throw new Error('boundary start marker was detached before activation');
     }
-    const failure = activateDeferredTree(startMarker.nextSibling, root, endMarker, state, updates ? { updates, retainedRoots: updates.roots } : undefined);
+    const failure = activateDeferredTree(startMarker.nextSibling, root, endMarker, state, updates ? { updates, countRetention: true } : undefined);
     if (!failure)
         return;
     abandonDeferredRange(startMarker, endMarker);

package/dist/streaming-coordinator.js

@@ -5,6 +5,7 @@ import { abandonDeferredDocumentRoots, abandonDeferredRange, } from './streaming
 import { abandonPendingWaiters, configureStreamingFailureHandler, elementHasPendingStateForTests, pendingTagWaiterCountForTests, pendingUndefinedRootCountForTests, resetDeferredActivationForTests, } from './streaming-deferred.js';
 import { findBoundaryScript, findEndMarkerByPrefix, findStartMarkerByPrefix, removeBoundaryScaffolding, resolveBoundaryRange, streamingErrorMessage, } from './streaming-dom.js';
 import { parseBoundaryEnvelope, RECORD_KIND_STATE_UPDATE, RECORD_KIND_TERMINAL, RECORD_KIND_UPDATABLE_CHECKPOINT, } from './streaming-protocol.js';
+import { applyStateUpdate } from './streaming-state.js';
 const MAX_QUEUED_BOUNDARIES = 512;
 const MAX_UPDATABLE_BOUNDARIES = 128;
 const MAX_RETAINED_UPDATE_ROOTS = 50_000;
@@ -201,14 +202,18 @@ function commitCheckpoint(bootstrap, range, sequence, target, updatable, sentine
         applyBoundaryBootstrap(bootstrap);
         if (range.start && range.end) {
             const boundary = updatable
-                ? { roots: [], pendingRoots: 0 }
+                ? { roots: [], retained: 0, pendingRoots: 0 }
                 : undefined;
             activateRootsBetween(range.start, range.end, bootstrap.state, boundary);
             if (boundary)
                 retainUpdatableBoundary(target, boundary);
         }
         else if (updatable) {
-            retainUpdatableBoundary(target, { roots: [], pendingRoots: 0 });
+            retainUpdatableBoundary(target, {
+                roots: [],
+                retained: 0,
+                pendingRoots: 0,
+            });
         }
         committed = true;
     }
@@ -227,11 +232,11 @@ function retainUpdatableBoundary(target, boundary) {
     if (updatableBoundaries.size >= MAX_UPDATABLE_BOUNDARIES) {
         throw new Error(`updatable boundary count exceeds ${MAX_UPDATABLE_BOUNDARIES}`);
     }
-    if (retainedUpdateRoots + boundary.roots.length >
+    if (retainedUpdateRoots + boundary.retained >
         MAX_RETAINED_UPDATE_ROOTS) {
         throw new Error(`retained update root count exceeds ${MAX_RETAINED_UPDATE_ROOTS}`);
     }
-    retainedUpdateRoots += boundary.roots.length;
+    retainedUpdateRoots += boundary.retained;
     updatableBoundaries.set(target, boundary);
 }
 function commitStateUpdate(boundary, patch, target, sequence, sentinel, scriptEl) {
@@ -246,16 +251,8 @@ function commitStateUpdate(boundary, patch, target, sequence, sentinel, scriptEl
         }
         for (let i = 0; i < boundary.roots.length; i++) {
             const root = boundary.roots[i];
-            if (root.hasAttribute('data-ws'))
-                continue;
-            try {
-                if (typeof root.setState !== 'function') {
-                    throw new Error('no setState() method');
-                }
-                root.setState(patch);
-            }
-            catch (error) {
-                console.error(`[WebUI] streaming: state update failed for <${root.tagName.toLowerCase()}>: ${streamingErrorMessage(error)}`);
+            if (!applyStateUpdate(root, patch)) {
+                throw new Error(`<${root.tagName.toLowerCase()}> activated without a setState() method`);
             }
         }
         notifyCommit(`${BOUNDARY_MARK_PREFIX}${target}${UPDATE_MARK_SUFFIX}`, sequence, 'update');

package/dist/streaming-deferred.d.ts

@@ -5,15 +5,15 @@ export declare const ELEMENT_LIMIT_FAILURE = 5;
 export declare const MAX_PENDING_UNDEFINED_ROOTS = 50000;
 export interface PendingBoundaryUpdates {
     readonly roots: Element[];
+    retained: number;
     pendingRoots: number;
     patch?: Record<string, unknown>;
 }
 export interface DeferredActivationOptions {
     updates?: PendingBoundaryUpdates;
-    retainedRoots?: Element[];
+    countRetention?: boolean;
 }
 export declare function configureStreamingFailureHandler(handler: (reason: string) => void): void;
-export declare function activateElement(el: Element, state: Record<string, unknown> | undefined, updates?: PendingBoundaryUpdates): number;
 export declare function activateDeferredTree(first: Node | null, root: Node, end: Node | null, state: Record<string, unknown> | undefined, options?: DeferredActivationOptions): string | null;
 export declare function abandonPendingWaiters(): void;
 export declare function resetDeferredActivationForTests(): void;

package/dist/streaming-deferred.js

@@ -2,6 +2,7 @@ import { markLateActivationPending, settleLateActivation, } from './lifecycle.js
 import { abandonDeferredDescendants, abandonDeferredElement, } from './streaming-cleanup.js';
 import { firstNodeWithin, MAX_ELEMENTS_PER_BOUNDARY, MAX_MARKER_SCAN_NODES, nextAfterSubtreeWithin, nextWithinRoot, safeRemoveAttribute, streamingErrorMessage, } from './streaming-dom.js';
 import { PENDING_ROOT_CONNECTED, STREAMED_HOST_ATTR, STREAMING_BOUNDARY_ACTIVATE, } from './streaming-mode.js';
+import { applyStateUpdate } from './streaming-state.js';
 const ACTIVATION_ACTIVATED = 1;
 const ACTIVATION_STATIC_HOST_OPT_OUT = 2;
 export const ACTIVATION_MISSING_TEMPLATE = 3;
@@ -25,9 +26,12 @@ function fail(reason) {
     }
     failureHandler(reason);
 }
-export function activateElement(el, state, updates) {
-    if (!el.hasAttribute(STREAMED_HOST_ATTR))
-        return ELEMENT_IGNORED;
+function requireStateUpdate(el, patch) {
+    if (applyStateUpdate(el, patch))
+        return;
+    fail(`<${el.tagName.toLowerCase()}> activated without a setState() method`);
+}
+function activateMarkedElement(el, state, updates) {
     const tag = el.tagName.toLowerCase();
     if (tag.indexOf('-') === -1)
         return ELEMENT_IGNORED;
@@ -99,7 +103,7 @@ function activatePendingRoot(tag, waiter, el) {
     let updates;
     try {
         updates = takePendingUpdates(el);
-        const state = mergePendingUpdates(takePendingState(el), updates);
+        const state = takePendingState(el);
         const outcome = invokeActivationHook(el, state);
         if (outcome === ACTIVATION_MISSING_TEMPLATE) {
             abandonDeferredDescendants(el);
@@ -107,6 +111,11 @@ function activatePendingRoot(tag, waiter, el) {
             fail(`template metadata missing while activating <${tag}>`);
             return;
         }
+        if (updates) {
+            updates.roots.push(el);
+            if (updates.patch)
+                requireStateUpdate(el, updates.patch);
+        }
         const failure = activateDeferredTree(firstNodeWithin(el), el, null, state, updates ? { updates } : undefined);
         if (failure)
             fail(failure);
@@ -126,6 +135,8 @@ function activatePendingRoot(tag, waiter, el) {
     }
 }
 export function activateDeferredTree(first, root, end, state, options) {
+    const updates = options?.updates;
+    const countRetention = options?.countRetention === true && updates !== undefined;
     let node = first;
     let resumeAfterDeferred = null;
     let skippingDeferredDescendants = false;
@@ -136,15 +147,14 @@ export function activateDeferredTree(first, root, end, state, options) {
             return `streaming boundary walk exceeds ${MAX_MARKER_SCAN_NODES} nodes`;
         }
         visited++;
-        if (node.nodeType === 1) {
-            const el = node;
-            if (options?.retainedRoots &&
-                el.hasAttribute(STREAMED_HOST_ATTR)) {
-                if (options.retainedRoots.length >= MAX_ELEMENTS_PER_BOUNDARY) {
-                    return `updatable streaming boundary exceeds ${MAX_ELEMENTS_PER_BOUNDARY} roots`;
-                }
-                options.retainedRoots.push(el);
+        const isElement = node.nodeType === 1;
+        const marked = isElement &&
+            node.hasAttribute(STREAMED_HOST_ATTR);
+        if (countRetention && marked) {
+            if (updates.retained >= MAX_ELEMENTS_PER_BOUNDARY) {
+                return `updatable streaming boundary exceeds ${MAX_ELEMENTS_PER_BOUNDARY} roots`;
             }
+            updates.retained++;
         }
         if (skippingDeferredDescendants &&
             node !== resumeAfterDeferred) {
@@ -152,27 +162,38 @@ export function activateDeferredTree(first, root, end, state, options) {
             continue;
         }
         skippingDeferredDescendants = false;
-        if (node.nodeType === 1) {
+        if (isElement) {
             if (elements >= MAX_ELEMENTS_PER_BOUNDARY) {
                 return `streaming boundary exceeds ${MAX_ELEMENTS_PER_BOUNDARY} elements`;
             }
             elements++;
-            try {
-                const outcome = activateElement(node, state, options?.updates);
-                if (outcome === ACTIVATION_MISSING_TEMPLATE) {
-                    return `template metadata missing while activating <${node.tagName.toLowerCase()}>`;
-                }
-                if (outcome === ELEMENT_LIMIT_FAILURE) {
-                    return `pending undefined root count exceeds ${MAX_PENDING_UNDEFINED_ROOTS}`;
+            if (marked) {
+                const el = node;
+                try {
+                    const outcome = activateMarkedElement(el, state, updates);
+                    if (outcome === ACTIVATION_MISSING_TEMPLATE) {
+                        return `template metadata missing while activating <${el.tagName.toLowerCase()}>`;
+                    }
+                    if (outcome === ELEMENT_LIMIT_FAILURE) {
+                        return `pending undefined root count exceeds ${MAX_PENDING_UNDEFINED_ROOTS}`;
+                    }
+                    if (outcome === ELEMENT_DEFERRED) {
+                        resumeAfterDeferred = nextAfterSubtreeWithin(node, root);
+                        skippingDeferredDescendants = true;
+                    }
+                    else if (updates &&
+                        (outcome === ACTIVATION_ACTIVATED ||
+                            outcome === ACTIVATION_STATIC_HOST_OPT_OUT)) {
+                        updates.roots.push(el);
+                        if (updates.patch) {
+                            requireStateUpdate(el, updates.patch);
+                        }
+                    }
                 }
-                if (outcome === ELEMENT_DEFERRED) {
-                    resumeAfterDeferred = nextAfterSubtreeWithin(node, root);
-                    skippingDeferredDescendants = true;
+                catch (error) {
+                    reportActivationFailure(el.tagName.toLowerCase(), error);
                 }
             }
-            catch (error) {
-                reportActivationFailure(node.tagName.toLowerCase(), error);
-            }
         }
         node = nextWithinRoot(node, root);
     }
@@ -232,13 +253,6 @@ function takePendingUpdates(el) {
         updates.pendingRoots--;
     return updates;
 }
-function mergePendingUpdates(state, updates) {
-    if (!updates?.patch)
-        return state;
-    return state
-        ? { ...state, ...updates.patch }
-        : { ...updates.patch };
-}
 function invokeActivationHook(el, state) {
     const hook = el[STREAMING_BOUNDARY_ACTIVATE];
     if (typeof hook !== 'function')

package/dist/streaming-state.d.ts

@@ -0,0 +1 @@
+export declare function applyStateUpdate(el: Element, patch: Record<string, unknown>): boolean;

package/dist/streaming-state.js

@@ -0,0 +1,13 @@
+import { streamingErrorMessage } from './streaming-dom.js';
+export function applyStateUpdate(el, patch) {
+    const root = el;
+    if (typeof root.setState !== 'function')
+        return false;
+    try {
+        root.setState(patch);
+    }
+    catch (error) {
+        console.error(`[WebUI] streaming: state update failed for <${root.tagName.toLowerCase()}>: ${streamingErrorMessage(error)}`);
+    }
+    return true;
+}

package/dist/template-types.d.ts

@@ -48,6 +48,6 @@ export interface TemplateMeta extends TemplateBlockMeta {
     re?: [string, string, CompiledEventArgs][];
     tr?: string[];
     ta?: string[];
-    sd?: boolean;
+    sd?: 1;
     th?: boolean | 1;
 }

package/dist/template.d.ts

@@ -14,4 +14,5 @@ declare global {
 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 prepareAssetTemplateData(templates: Record<string, TemplateMeta>, templateFns?: Record<string, CompiledConditionFn[]>): void;
 export declare function deferTemplateDefinition(tagName: string, ctor: Function, define: () => void): void;

package/dist/template.js

@@ -1,9 +1,11 @@
 import { dispatchTemplatesRegistered, templateRegistrationDetail, TEMPLATES_REGISTERED_EVENT, } from './template-events.js';
 const WEBUI_DATA_ID = 'webui-data';
 const normalizedTemplates = new WeakSet();
+const assetNormalizedTemplates = new WeakSet();
 let webuiDataLoaded = false;
 const pendingTemplateDefinitions = new Map();
 function acceptTemplateData(templates, templateFns) {
+    prepareTemplateData(templates, templateFns);
     const w = window;
     if (!w.__webui)
         w.__webui = {};
@@ -21,9 +23,7 @@ function acceptTemplateData(templates, templateFns) {
     const names = Object.keys(templates);
     for (let i = 0; i < names.length; i++) {
         const tag = names[i];
-        const meta = templates[tag];
-        w.__webui.templates[tag] = meta;
-        normalizeTemplate(tag, meta);
+        w.__webui.templates[tag] = templates[tag];
     }
     for (let i = 0; i < names.length; i++) {
         const pending = pendingTemplateDefinitions.get(names[i]);
@@ -60,6 +60,25 @@ export function registerTemplateData(templates, templateFns) {
         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) {
@@ -89,10 +108,14 @@ function loadWebUIDataBlock() {
     el.remove();
     webuiDataLoaded = true;
 }
-function normalizeTemplate(name, meta) {
+function normalizeTemplate(name, meta, suppliedFns) {
     if (normalizedTemplates.has(meta))
         return;
-    const fns = window.__webui?.templateFns?.[name] ?? [];
+    const fns = suppliedFns ?? window.__webui?.templateFns?.[name] ?? [];
+    normalizeTemplateConditions(name, meta, fns);
+    normalizedTemplates.add(meta);
+}
+function normalizeTemplateConditions(name, meta, fns) {
     const stack = [meta];
     while (stack.length > 0) {
         const block = stack.pop();
@@ -116,7 +139,6 @@ function normalizeTemplate(name, meta) {
                 stack.push(children[i]);
         }
     }
-    normalizedTemplates.add(meta);
 }
 function normalizeCondition(tagName, condition, fns) {
     const first = condition[0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/webui-framework",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "description": "WebUI Framework Next — Preact-inspired lightweight Web Component runtime with SSR hydration and compiled-template path mapping.",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@playwright/test": "^1.61.1",
     "@types/node": "^26.1.0",
     "typescript": "^6.0.3",
-    "@microsoft/webui-test-support": "0.0.20"
+    "@microsoft/webui-test-support": "0.0.22"
   },
   "scripts": {
     "build": "tsc",