@microsoft/webui-framework 0.0.25 → 0.0.26

package/dist/element/markers.d.ts

@@ -2,6 +2,9 @@ export declare const MARKER_REPEAT_START = "wr";
 export declare const MARKER_REPEAT_END = "/wr";
 export declare const MARKER_COND_START = "wc";
 export declare const MARKER_COND_END = "/wc";
+export declare const MARKER_RAW_START = "w";
+export declare const MARKER_RAW_END = "/w";
+export declare function rawMarker(index: number, closing?: boolean): string;
 export declare function collectItemMarkers(repeatStart: Comment): {
     items: Comment[];
     end: Comment | null;
@@ -13,6 +16,7 @@ export interface SSRIndex {
     elements: Array<Node | undefined>;
     conds: Comment[];
     repeats: Comment[];
+    raws: Array<[Comment, Comment]>;
 }
 export declare function buildSSRIndex(tplRoot: Node, ssrRoot: Node, needMarkers: boolean, ssrIsSectionChild?: boolean): SSRIndex;
 export declare function findByOrdinal(parent: Node, nodeType: number, ordinal: number): Node | null;

package/dist/element/markers.js

@@ -1,8 +1,24 @@
+import { isComponentStyleResourceMarker } from './styles.js';
 export const MARKER_REPEAT_START = 'wr';
 export const MARKER_REPEAT_END = '/wr';
 export const MARKER_COND_START = 'wc';
 export const MARKER_COND_END = '/wc';
+export const MARKER_RAW_START = 'w';
+export const MARKER_RAW_END = '/w';
 const MARKER_REPEAT_ITEM = 'wi';
+export function rawMarker(index, closing = false) {
+    return `${closing ? MARKER_RAW_END : MARKER_RAW_START}${index}`;
+}
+function isRawStartMarker(data) {
+    if (data.length < 2 || data.charCodeAt(0) !== 119)
+        return false;
+    for (let i = 1; i < data.length; i++) {
+        const code = data.charCodeAt(i);
+        if (code < 48 || code > 57)
+            return false;
+    }
+    return true;
+}
 export function collectItemMarkers(repeatStart) {
     const items = [];
     let end = null;
@@ -36,6 +52,10 @@ export function nextElement(marker) {
             return node;
         if (node.nodeType === 8) {
             const data = node.data;
+            if (isRawStartMarker(data)) {
+                node = skipBlockRange(node, data);
+                continue;
+            }
             if (data === MARKER_REPEAT_END || data === MARKER_REPEAT_ITEM || data === MARKER_COND_END)
                 return null;
         }
@@ -44,7 +64,11 @@ export function nextElement(marker) {
     return null;
 }
 export function skipBlockRange(start, data) {
-    const endTag = data === MARKER_COND_START ? MARKER_COND_END : MARKER_REPEAT_END;
+    const endTag = data === MARKER_COND_START
+        ? MARKER_COND_END
+        : isRawStartMarker(data)
+            ? `/${data}`
+            : MARKER_REPEAT_END;
     let depth = 1;
     let node = start.nextSibling;
     while (node && depth > 0) {
@@ -84,6 +108,7 @@ export function buildSSRIndex(tplRoot, ssrRoot, needMarkers, ssrIsSectionChild =
     const elements = [ssrIsSectionChild ? undefined : ssrRoot];
     const conds = [];
     const repeats = [];
+    const raws = [];
     const stack = [
         {
             t: tplRoot.firstChild,
@@ -109,9 +134,35 @@ export function buildSSRIndex(tplRoot, ssrRoot, needMarkers, ssrIsSectionChild =
                     s = skipBlockRange(s, data);
                     continue;
                 }
+                if (isRawStartMarker(data)) {
+                    const start = s;
+                    let end = start.nextSibling;
+                    let depth = 1;
+                    const endMarker = `/${data}`;
+                    while (end && depth > 0) {
+                        if (end.nodeType === 8) {
+                            const marker = end.data;
+                            if (marker === data)
+                                depth++;
+                            else if (marker === endMarker)
+                                depth--;
+                        }
+                        if (depth > 0)
+                            end = end.nextSibling;
+                    }
+                    if (end) {
+                        raws.push([start, end]);
+                        s = end.nextSibling;
+                    }
+                    else {
+                        s = null;
+                    }
+                    continue;
+                }
             }
             else if (type === 1) {
-                break;
+                if (!isComponentStyleResourceMarker(s))
+                    break;
             }
             s = s.nextSibling;
         }
@@ -135,7 +186,7 @@ export function buildSSRIndex(tplRoot, ssrRoot, needMarkers, ssrIsSectionChild =
             stack.push({ t: null, s: s.firstChild, solo: false });
         }
     }
-    return { elements, conds, repeats };
+    return { elements, conds, repeats, raws };
 }
 export function findByOrdinal(parent, nodeType, ordinal) {
     let count = 0;
@@ -143,12 +194,16 @@ export function findByOrdinal(parent, nodeType, ordinal) {
     while (child) {
         if (child.nodeType === 8) {
             const data = child.data;
-            if (data === MARKER_COND_START || data === MARKER_REPEAT_START) {
+            if (data === MARKER_COND_START
+                || data === MARKER_REPEAT_START
+                || isRawStartMarker(data)) {
                 child = skipBlockRange(child, data);
                 continue;
             }
         }
-        if (child.nodeType === nodeType) {
+        const isStyleResource = child.nodeType === 1 &&
+            isComponentStyleResourceMarker(child);
+        if (child.nodeType === nodeType && !isStyleResource) {
             if (count === ordinal)
                 return child;
             count++;

package/dist/element/styles.d.ts

@@ -1 +1,39 @@
-export declare function injectModuleStyle(specifier: string, shadowRoot: ShadowRoot | null): void;
+export type ComponentStyleResource = ({
+    kind: 'link';
+    href: string;
+} | {
+    kind: 'style';
+    css: string;
+} | {
+    kind: 'module';
+    specifier: string;
+    css: string;
+}) & {
+    members?: string[];
+};
+export interface ComponentStyles {
+    version: 1;
+    strategy: 'link' | 'style' | 'module';
+    resources: Record<string, ComponentStyleResource>;
+    closures: Record<string, string[]>;
+}
+type StyleTarget = Document | ShadowRoot;
+type CssModule = {
+    default: CSSStyleSheet;
+};
+type CssModuleLoader = (specifier: string) => Promise<CssModule>;
+export declare function setCssModuleLoaderForTests(loader?: CssModuleLoader): void;
+export declare function sameComponentStyleResource(current: ComponentStyleResource, next: ComponentStyleResource): boolean;
+export declare function sameComponentStyleClosure(current: readonly string[], next: readonly string[]): boolean;
+export declare function prepareComponentStyles(value: unknown): ComponentStyles | undefined;
+export declare function requireComponentStyles(value: unknown): ComponentStyles;
+export declare function validateComponentStylesRegistration(styles: ComponentStyles | undefined, document?: Document): void;
+export declare function registerPreparedComponentStyles(styles: ComponentStyles, document?: Document): void;
+export declare function registerComponentStyles(value: ComponentStyles | unknown, document?: Document): void;
+export declare function hasRegisteredComponentStyleResource(id: string, document?: Document): boolean;
+export declare function hasComponentStyleWork(rootId: string, document?: Document): boolean;
+export declare function isComponentStyleMarker(element: Element): boolean;
+export declare function isComponentStyleResourceMarker(element: Element): boolean;
+export declare function claimSsrComponentStyles(source: Element, target: StyleTarget): void;
+export declare function installComponentStyles(rootId: string, target: StyleTarget, host?: HTMLElement): Promise<void> | undefined;
+export {};