@microsoft/webui-framework 0.0.18 → 0.0.19

package/dist/element/types.d.ts

@@ -11,6 +11,7 @@ export declare const ATTR_KIND_ATTRIBUTE = 0;
 export declare const ATTR_KIND_COMPLEX = 1;
 export declare const ATTR_KIND_BOOLEAN = 2;
 export declare const ATTR_KIND_TEMPLATE = 3;
+export declare function hasNativeLiveProperty(element: Element, name: string): boolean;
 export interface AttrBinding {
     element: Element;
     name: string;
@@ -24,9 +25,12 @@ export interface ScopeFrame {
     name: string;
     value: unknown;
     parent?: ScopeFrame;
+    known?: boolean;
 }
 export interface TemplateInstance {
     scope?: ScopeFrame;
+    parent?: TemplateInstance;
+    container: (ParentNode & Node) | null;
     nodes: Node[];
     texts: TextBinding[];
     attrs: AttrBinding[];
@@ -39,8 +43,17 @@ export interface CondBinding {
     blockIndex: number;
     anchor: Comment;
     scope?: ScopeFrame;
+    owner: TemplateInstance;
     instance: TemplateInstance | null;
 }
+export type RepeatKey = string | number;
+export interface RepeatKeyState {
+    path: string;
+    warned: boolean;
+    keys: RepeatKey[];
+    nextKeys: RepeatKey[];
+    map: Map<RepeatKey, TemplateInstance | null>;
+}
 export interface RepeatBinding {
     markerId: number;
     collection: string;
@@ -51,21 +64,16 @@ export interface RepeatBinding {
     end: Comment | null;
     scope?: ScopeFrame;
     owner: TemplateInstance;
-    instances: RepeatItemInstance[];
-    rootTag: string | null;
-    keyAttribute?: string;
-    keyPath?: string;
+    instances: TemplateInstance[];
+    keyState?: RepeatKeyState;
     synced?: boolean;
 }
-export interface RepeatItemInstance {
-    key: string | null;
-    value: unknown;
-    instance: TemplateInstance;
-}
 export interface RepeatHost {
     $resolveValue(path: string, scope?: ScopeFrame): unknown;
-    $createBlockInstance(blockIndex: number, scope?: ScopeFrame): TemplateInstance | null;
+    $hasStateRoot(path: string, scope?: ScopeFrame): boolean;
+    $createBlockInstance(blockIndex: number, scope?: ScopeFrame, parent?: TemplateInstance, container?: ParentNode & Node): TemplateInstance | null;
     $updateInstance(instance: TemplateInstance): void;
     $removeInstance(instance: TemplateInstance): void;
+    $changeStructure(removedFrom?: TemplateInstance): void;
     $insertInstanceAfter(cursor: Node | null, container: ParentNode & Node, instance: TemplateInstance): Node | null;
 }

package/dist/element/types.js

@@ -2,3 +2,6 @@ export const ATTR_KIND_ATTRIBUTE = 0;
 export const ATTR_KIND_COMPLEX = 1;
 export const ATTR_KIND_BOOLEAN = 2;
 export const ATTR_KIND_TEMPLATE = 3;
+export function hasNativeLiveProperty(element, name) {
+    return element.localName.indexOf('-') === -1 && name in element;
+}

package/dist/element.js

@@ -1,11 +1,12 @@
 import { TemplateElement } from './template-element.js';
-import { getObservableNames, isAttributeProperty, syncAttrProperties, } from './decorators.js';
+import { attributeNameForProperty, getObservableNames, syncAttrProperties, } from './decorators.js';
 export class WebUIElement extends TemplateElement {
     $observableNames() {
         return getObservableNames(this.constructor);
     }
     $shouldApplySSRState(key) {
-        return !isAttributeProperty(this.constructor, key);
+        const attribute = attributeNameForProperty(this.constructor, key);
+        return attribute === undefined || !this.hasAttribute(attribute);
     }
     $syncAuthoredAttributes() {
         syncAttrProperties(this, this.constructor);

package/dist/hydration-mismatch.js

@@ -1,4 +1,4 @@
-import { ATTR_KIND_BOOLEAN, ATTR_KIND_COMPLEX, ATTR_KIND_TEMPLATE, } from './element/types.js';
+import { ATTR_KIND_BOOLEAN, ATTR_KIND_COMPLEX, ATTR_KIND_TEMPLATE, hasNativeLiveProperty, } from './element/types.js';
 export function reportHydrationMismatch(tag, writes, index, ctx) {
     const mismatched = [];
     for (const path of writes) {
@@ -51,7 +51,8 @@ export function attrDiffersFromDom(b, ctx) {
         case ATTR_KIND_TEMPLATE:
             return (el.getAttribute(b.name) ?? '') !== ctx.resolveParts(b.parts, b.scope);
         default: {
-            if (b.name === 'value' || b.name === 'checked' || b.name === 'selected')
+            if ((b.name === 'value' || b.name === 'checked' || b.name === 'selected')
+                && hasNativeLiveProperty(el, b.name))
                 return false;
             const v = ctx.resolveValue(b.path, b.scope);
             return (el.getAttribute(b.name) ?? '') !== (v == null ? '' : String(v));

package/dist/index.js

@@ -1,5 +1,5 @@
 import { installTemplateElementRuntime } from './static-host.js';
-installTemplateElementRuntime();
+setTimeout(installTemplateElementRuntime, 0);
 export { WebUIElement } from './element.js';
 export { observable, attr } from './decorators.js';
 export { getTemplate, registerTemplateData } from './template.js';

package/dist/static-host.js

@@ -1,6 +1,6 @@
 import { TemplateElement } from './template-element.js';
 import { getTemplateRegistry } from './template.js';
-import { templateAttributeForRoot, templateNeedsStaticHost } from './template-roots.js';
+import { templateNeedsStaticHost } from './template-roots.js';
 import { TEMPLATES_REGISTERED_EVENT, templateRegistrationDetail, } from './template-events.js';
 let runtimeInstalled = false;
 function defineTemplateHost(tag, meta) {
@@ -12,16 +12,25 @@ function defineTemplateHost(tag, meta) {
     if (!w.__webui.templates[tag])
         w.__webui.templates[tag] = meta;
     class StaticTemplateHost extends TemplateElement {
-        $shouldApplyTemplateStateFromSSR(key) {
-            const attr = templateAttributeForRoot(meta, key);
-            return attr === undefined || !this.hasAttribute(attr);
+        $afterExternalStateWrite(applied) {
+            if (applied)
+                this.$activateDeferredSSR();
+        }
+        $shouldDeferSSRHydration() {
+            return true;
+        }
+        $shouldApplySSRBootstrapState() {
+            return false;
         }
     }
     StaticTemplateHost.define(tag);
 }
 function defineMissingTemplateHost(tag, meta) {
-    if (!templateNeedsStaticHost(meta) || customElements.get(tag))
+    if (!templateNeedsStaticHost(meta) ||
+        window.__webui?.templateHostExclusions?.has(tag) ||
+        customElements.get(tag)) {
         return;
+    }
     defineTemplateHost(tag, meta);
 }
 function defineTemplateHosts(templates = getTemplateRegistry()) {
@@ -45,10 +54,9 @@ export function installTemplateElementRuntime() {
     runtimeInstalled = true;
     window.addEventListener(TEMPLATES_REGISTERED_EVENT, (event) => {
         const detail = templateRegistrationDetail(event);
-        if (!detail)
+        if (!detail?.templates)
             return;
-        if (detail.templates)
-            defineTemplateHosts(detail.templates);
+        defineTemplateHosts(detail.templates);
     });
     if (document.readyState === 'loading') {
         document.addEventListener('DOMContentLoaded', () => defineTemplateHosts(), { once: true });

package/dist/template-element.d.ts

@@ -6,6 +6,9 @@ export declare class TemplateElement extends HTMLElement {
     private $meta?;
     private $ready;
     private $hydrated;
+    private $deferredSSR;
+    private $activatingDeferredSSR;
+    private $hasUnknownScopes;
     private $templateState;
     private $dirtyPaths;
     private $pendingFlush;
@@ -19,15 +22,20 @@ export declare class TemplateElement extends HTMLElement {
     private $mount;
     disconnectedCallback(): void;
     $destroy(): void;
-    private $teardown;
-    private $teardownInstanceCleanups;
+    private $clearRepeatBinding;
+    private $clearInstance;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     setState(state: Record<string, unknown>): void;
     protected $observableNames(): Set<string>;
+    protected $beforeExternalStateWrite(): void;
+    protected $afterExternalStateWrite(_applied: boolean): void;
+    protected $shouldDeferSSRHydration(): boolean;
+    protected $activateDeferredSSR(): void;
+    protected $shouldApplySSRBootstrapState(): boolean;
     protected $shouldApplySSRState(_key: string): boolean;
     protected $syncAuthoredAttributes(): void;
     protected $shouldApplyTemplateStateFromSSR(_key: string): boolean;
-    protected $setTemplateState(key: string, value: unknown): void;
+    protected $setTemplateState(key: string, value: unknown): boolean;
     private $writeTemplateState;
     private $templateMeta;
     private $templateRootForAttribute;
@@ -44,33 +52,36 @@ export declare class TemplateElement extends HTMLElement {
     private $parseTemplate;
     private $createStagingRoot;
     private $appendStagedChildren;
-    private $releaseStagingRepeatContainers;
+    private $replaceInstanceContainer;
     private $wire;
     private $hydrate;
-    private $collectBetween;
+    private $collectConditionalRange;
+    private $hasRootStructuralSlot;
     private $hydrateCondContent;
     private $findMarker;
-    private $hasContentAfterMarker;
     private $findSSRText;
     private $findSSRSlotRef;
     private $rootTag;
     private $wireAttrs;
     protected $finalize(_instance: TemplateInstance, _root: Node, _meta: TemplateBlockMeta, _resolver: (root: Node, path: TemplateNodePath) => Node | null, _scope?: ScopeFrame): void;
     private $makeAttr;
-    private $repeatMaps;
     private $buildPathIndex;
     private $updateBindings;
+    private $scopeIsKnown;
     $updateInstance(instance: TemplateInstance): void;
     private $patchText;
     private $patchAttr;
     private $toggleCond;
     $resolveValue(path: string, scope?: ScopeFrame): unknown;
+    $hasStateRoot(path: string, scope?: ScopeFrame): boolean;
     private $resolveComponentRoot;
     private $resolveParts;
     $block(blockIndex: number): TemplateBlockMeta | undefined;
-    $createBlockInstance(blockIndex: number, scope?: ScopeFrame): TemplateInstance | null;
+    $createBlockInstance(blockIndex: number, scope?: ScopeFrame, parent?: TemplateInstance, container?: ParentNode & Node): TemplateInstance | null;
     $removeInstance(instance: TemplateInstance): void;
+    private $disposeInstance;
+    private $compactNodeArray;
+    $changeStructure(removedFrom?: TemplateInstance): void;
     $insertInstanceAfter(cursor: Node | null, container: ParentNode & Node, instance: TemplateInstance): Node | null;
-    private $singleDynamic;
 }
 export {};