@microsoft/webui-framework 0.0.25 → 0.0.26

package/dist/component-asset/loader.js

@@ -1,9 +1,15 @@
 import { getTemplate, prepareAssetTemplateData, registerTemplateData, } from '../template.js';
-import { readComponentAssetModule, sameComponents, validateAsset, } from './asset.js';
-import { prepareAssetStyles, readNonce, registerAssetStyles, } from './resources.js';
+import { prepareAssetComponentStyles, readComponentAssetModule, sameComponents, validateAsset, } from './asset.js';
+import { hasRegisteredComponentStyleResource, registerPreparedComponentStyles, sameComponentStyleClosure, sameComponentStyleResource, validateComponentStylesRegistration, } from '../element/styles.js';
+import { prepareComponentStyleLinks, prepareRegisteredLinkStyles, } from '../element/link-styles.js';
 const assetModulePromises = new Map();
-export function loadComponentAsset(tag, url) {
-    const assetUrl = new URL(url, document.baseURI);
+export function loadComponentAsset(tag, source) {
+    if (typeof source === 'function') {
+        return Promise.resolve()
+            .then(source)
+            .then(imported => registerRootAsset(tag, `component asset loader for <${tag}>`, imported));
+    }
+    const assetUrl = new URL(source, document.baseURI);
     const href = assetUrl.href;
     return loadAssetModule(href, () => import(assetUrl.href))
         .then(imported => registerRootAsset(tag, href, imported));
@@ -17,10 +23,27 @@ async function registerRootAsset(expectedRoot, href, imported) {
     validateExternalComponents(asset);
     const root = prepareComponentPayload(asset);
     const chunks = await prepareAssetImports(asset.imports);
+    const graph = [...chunks, root];
+    validatePreparedGraph(graph);
+    for (let i = 0; i < chunks.length; i++) {
+        registerComponentResources(chunks[i]);
+    }
+    registerComponentResources(root);
+    let pendingStyles;
     for (let i = 0; i < chunks.length; i++) {
-        registerComponentPayload(chunks[i]);
+        const ready = chunks[i].linkStyles;
+        if (!ready)
+            continue;
+        (pendingStyles ??= []).push(ready);
     }
-    registerComponentPayload(root);
+    if (root.linkStyles)
+        (pendingStyles ??= []).push(root.linkStyles);
+    if (pendingStyles)
+        await Promise.all(pendingStyles);
+    for (let i = 0; i < chunks.length; i++) {
+        registerComponentTemplates(chunks[i]);
+    }
+    registerComponentTemplates(root);
 }
 function loadAssetModule(href, load) {
     let promise = assetModulePromises.get(href);
@@ -57,19 +80,83 @@ function importAndPrepareChunk(assetImport) {
     });
 }
 function prepareComponentPayload(asset) {
+    const componentStyles = prepareAssetComponentStyles(asset.componentStyles);
     prepareAssetTemplateData(asset.templates, asset.templateFunctions);
+    const templateLinkStyles = prepareRegisteredLinkStyles(asset.templates);
+    const componentStyleLinks = prepareComponentStyleLinks(componentStyles);
+    let linkStyles = templateLinkStyles;
+    if (templateLinkStyles && componentStyleLinks) {
+        linkStyles = Promise.all([templateLinkStyles, componentStyleLinks]).then(() => { });
+    }
+    else {
+        linkStyles = templateLinkStyles ?? componentStyleLinks;
+    }
     return {
         asset,
-        styles: prepareAssetStyles(asset.templateStyles),
+        componentStyles,
+        linkStyles,
     };
 }
-function registerComponentPayload(prepared) {
-    const { asset, styles } = prepared;
+function registerComponentResources(prepared) {
+    registerPreparedComponentStyles(prepared.componentStyles);
+}
+function registerComponentTemplates(prepared) {
+    const { asset } = prepared;
     if (componentsAlreadyRegistered(asset.components))
         return;
-    registerAssetStyles(styles, readNonce());
     registerTemplateData(asset.templates, asset.templateFunctions);
-    validateRequiredComponents(asset);
+}
+function validatePreparedGraph(graph) {
+    const resources = new Map();
+    const closures = new Map();
+    const provided = new Set();
+    for (let i = 0; i < graph.length; i++) {
+        const prepared = graph[i];
+        validateComponentStylesRegistration(prepared.componentStyles);
+        for (const component of prepared.asset.components)
+            provided.add(component);
+        const styles = prepared.componentStyles;
+        for (const id of Object.keys(styles.resources)) {
+            const resource = styles.resources[id];
+            const current = resources.get(id);
+            if (current && !sameComponentStyleResource(current, resource)) {
+                throw new Error(`[WebUI] Conflicting component style resource "${id}".`);
+            }
+            resources.set(id, resource);
+        }
+        for (const root of Object.keys(styles.closures)) {
+            const closure = styles.closures[root];
+            const current = closures.get(root);
+            if (current && !sameComponentStyleClosure(current, closure)) {
+                throw new Error(`[WebUI] Conflicting component style closure "${root}".`);
+            }
+            closures.set(root, closure);
+        }
+    }
+    for (let i = 0; i < graph.length; i++) {
+        const styles = graph[i].componentStyles;
+        for (const root of Object.keys(styles.closures)) {
+            for (const id of styles.closures[root]) {
+                if (!resources.has(id) &&
+                    !hasRegisteredComponentStyleResource(id)) {
+                    throw new Error(`[WebUI] Component style closure "${root}" references missing resource "${id}".`);
+                }
+            }
+        }
+    }
+    const missing = [];
+    for (let i = 0; i < graph.length; i++) {
+        const asset = graph[i].asset;
+        for (const required of asset.requiredComponents) {
+            if (provided.has(required) || getTemplate(required))
+                continue;
+            if (missing.indexOf(required) < 0)
+                missing.push(required);
+        }
+    }
+    if (missing.length === 0)
+        return;
+    throw new Error(`[WebUI] Component asset is missing required templ${missing.length === 1 ? 'ate' : 'ates'} ${missing.map(tag => `<${tag}>`).join(', ')}. Load the application entry bundle and protocol before deferred component assets.`);
 }
 function componentsAlreadyRegistered(components) {
     if (components.length === 0)
@@ -91,14 +178,3 @@ function validateExternalComponents(asset) {
         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

@@ -1,6 +1,7 @@
 export type ComponentAssetState = Record<string, unknown>;
+export type ComponentAssetSource = string | URL | (() => Promise<unknown>);
 export interface ComponentAssetManifestEntry<Data extends ComponentAssetState = ComponentAssetState> {
-    asset: string | URL;
+    asset: ComponentAssetSource;
     module?: () => Promise<unknown>;
     data?: () => Promise<Data>;
 }

package/dist/component-asset.d.ts

@@ -1,4 +1,4 @@
 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 type { ComponentAssetCreateOptions, ComponentAssetManifest, ComponentAssetManifestEntry, ComponentAssetPreload, ComponentAssetRegistry, ComponentAssetSource, ComponentAssetState, } from './component-asset/manifest.js';
 export declare function defineComponentAssets(manifest: ComponentAssetManifest): ComponentAssetRegistry;

package/dist/component-asset.js

@@ -1,4 +1,6 @@
 import { loadComponentAsset } from './component-asset/loader.js';
+import { takeGeneratedComponentAssetStyles } from './component-asset/generated-manifest.js';
+import { preloadComponentAssetStyles } from './element/link-styles.js';
 export function defineComponentAssets(manifest) {
     const preloads = new Map();
     function preload(tag) {
@@ -9,6 +11,10 @@ export function defineComponentAssets(manifest) {
         if (!entry) {
             throw new Error(`[WebUI] No component asset manifest entry for <${tag}>.`);
         }
+        const styles = takeGeneratedComponentAssetStyles(tag);
+        if (styles) {
+            preloadComponentAssetStyles(styles);
+        }
         const next = {
             asset: loadComponentAsset(tag, entry.asset),
         };
@@ -18,8 +24,12 @@ export function defineComponentAssets(manifest) {
         if (entry.data) {
             next.data = entry.data();
         }
-        next.asset.catch(() => { });
-        next.module?.catch(() => { });
+        const evictFailedResources = () => {
+            if (preloads.get(tag) === next)
+                preloads.delete(tag);
+        };
+        next.asset.catch(evictFailedResources);
+        next.module?.catch(evictFailedResources);
         next.data?.catch(() => { });
         preloads.set(tag, next);
         return next;

package/dist/element/link-styles.d.ts

@@ -0,0 +1,20 @@
+import type { TemplateBlockMeta, TemplateMeta } from '../template-types.js';
+import type { ComponentStyles } from './styles.js';
+interface ElementBinding {
+    readonly element: Element;
+}
+interface DeferredContentCallbacks {
+    readonly afterAppend?: () => void;
+    readonly beforeAppend?: () => void;
+    readonly hasAuthorHydrationLifecycle?: boolean;
+}
+export declare function prepareTemplateLinkStyles(meta: TemplateBlockMeta): Promise<void> | undefined;
+export declare function prepareRegisteredLinkStyles(templates: Record<string, TemplateMeta>): Promise<void> | undefined;
+export declare function prepareComponentStyleLinks(styles: ComponentStyles): Promise<void> | undefined;
+export declare function preloadComponentAssetStyles(hrefs: readonly string[]): Promise<void> | undefined;
+export declare function installComponentLinkStyles(host: HTMLElement, root: ShadowRoot, links: readonly HTMLLinkElement[]): void;
+export declare function templateMayContainLinkStyles(meta: TemplateBlockMeta): boolean;
+export declare function installTemplateLinkStyles(host: HTMLElement, meta: TemplateMeta, shadowRoot: ShadowRoot | null, stagingRoot: ParentNode, bindings: readonly ElementBinding[], deferredCallbacks?: DeferredContentCallbacks): boolean;
+export declare function cancelTemplateLinkStyleMount(root: ShadowRoot): boolean;
+export declare function rewriteCssUrls(cssText: string, stylesheetHref: string): string | undefined;
+export {};