@microsoft/webui-framework 0.0.18 → 0.0.20

package/dist/element/diff.js

@@ -1,8 +1,3 @@
-function asParent(node) {
-    if (!node)
-        return null;
-    return 'childNodes' in node ? node : null;
-}
 export function dotWalk(cursor, path, from) {
     let start = from;
     for (let i = from; i <= path.length; i++) {
@@ -15,111 +10,223 @@ export function dotWalk(cursor, path, from) {
     }
     return cursor;
 }
-function itemKey(item, keyPath) {
-    if (keyPath === undefined || keyPath === '')
-        return null;
-    const v = dotWalk(item, keyPath, 0);
-    return v != null ? String(v) : '';
-}
 function itemScope(rep, item) {
-    return { name: rep.itemVar, value: item, parent: rep.scope };
+    return { name: rep.itemVar, value: item, parent: rep.scope, known: true };
 }
-export function syncRepeat(host, rep) {
-    const resolved = host.$resolveValue(rep.collection, rep.scope);
-    const items = Array.isArray(resolved) ? resolved : [];
-    let container = rep.container
-        ?? (rep.start ? asParent(rep.start.parentNode) : null)
-        ?? (rep.owner.nodes[0] ? asParent(rep.owner.nodes[0].parentNode) : null);
-    if (!container)
+export function createRepeatKeyState(path) {
+    return {
+        path,
+        warned: false,
+        keys: [],
+        nextKeys: [],
+        map: new Map(),
+    };
+}
+export function seedHydratedRepeatKeys(rep, items) {
+    const state = rep.keyState;
+    if (!state || items.length !== rep.instances.length)
         return;
-    rep.container = container;
-    if (!rep.synced && items.length === 0 && rep.instances.length > 0)
+    if (!collectRepeatKeys(items, state))
         return;
-    rep.synced = true;
-    if (items.length === 0) {
-        for (let i = 0; i < rep.instances.length; i += 1) {
-            host.$removeInstance(rep.instances[i].instance);
-        }
-        rep.instances = [];
+    commitKeyIdentity(state);
+}
+function setItemScope(instance, item) {
+    if (!instance.scope)
         return;
+    instance.scope.value = item;
+    instance.scope.known = true;
+}
+function syncPositional(host, rep, items, container) {
+    const instances = rep.instances;
+    const oldLength = instances.length;
+    const reuseCount = Math.min(oldLength, items.length);
+    let nextCount = reuseCount;
+    let created = false;
+    for (let i = 0; i < reuseCount; i += 1) {
+        setItemScope(instances[i], items[i]);
     }
-    const keyPath = rep.keyPath;
-    const hasKeys = keyPath !== undefined && keyPath !== '';
-    const oldInstances = rep.instances;
-    if (!hasKeys) {
-        const oldLength = oldInstances.length;
-        const reuseCount = Math.min(oldLength, items.length);
-        let nextCount = reuseCount;
-        for (let i = 0; i < reuseCount; i += 1) {
-            const entry = oldInstances[i];
-            entry.value = items[i];
-            if (entry.instance.scope)
-                entry.instance.scope.value = items[i];
-        }
-        for (let i = reuseCount; i < items.length; i += 1) {
-            const scope = itemScope(rep, items[i]);
-            const instance = host.$createBlockInstance(rep.blockIndex, scope);
-            if (instance) {
-                oldInstances[nextCount] = { key: null, value: items[i], instance };
-                nextCount += 1;
-            }
+    for (let i = reuseCount; i < items.length; i += 1) {
+        const instance = host.$createBlockInstance(rep.blockIndex, itemScope(rep, items[i]), rep.owner, container);
+        if (instance) {
+            instances[nextCount] = instance;
+            nextCount += 1;
+            created = true;
         }
-        for (let i = reuseCount; i < oldLength; i += 1) {
-            host.$removeInstance(oldInstances[i].instance);
+    }
+    for (let i = reuseCount; i < oldLength; i += 1) {
+        host.$removeInstance(instances[i]);
+    }
+    instances.length = nextCount;
+    const removed = oldLength > reuseCount;
+    let cursor = rep.start;
+    for (let i = 0; i < instances.length; i += 1) {
+        cursor = host.$insertInstanceAfter(cursor, container, instances[i]);
+    }
+    for (let i = 0; i < reuseCount; i += 1) {
+        host.$updateInstance(instances[i]);
+    }
+    if (created || removed)
+        host.$changeStructure(removed ? rep.owner : undefined);
+}
+function readRepeatKey(item, path) {
+    if (path.length === 0)
+        return item;
+    return dotWalk(item, path, 0);
+}
+function isRepeatKey(value) {
+    return (typeof value === 'string' ||
+        (typeof value === 'number' && Number.isFinite(value)));
+}
+function collectRepeatKeys(items, state) {
+    const keys = state.nextKeys;
+    const seen = state.map;
+    keys.length = items.length;
+    seen.clear();
+    for (let i = 0; i < items.length; i += 1) {
+        let value;
+        try {
+            value = readRepeatKey(items[i], state.path);
         }
-        oldInstances.length = nextCount;
-        let cursor = rep.start;
-        for (let i = 0; i < oldInstances.length; i += 1) {
-            cursor = host.$insertInstanceAfter(cursor, container, oldInstances[i].instance);
+        catch {
+            keys.length = 0;
+            seen.clear();
+            return false;
         }
-        for (let i = 0; i < reuseCount; i += 1) {
-            host.$updateInstance(oldInstances[i].instance);
+        if (!isRepeatKey(value) || seen.has(value)) {
+            keys.length = 0;
+            seen.clear();
+            return false;
         }
-        return;
-    }
-    const oldByKey = new Map();
-    for (let i = 0; i < oldInstances.length; i += 1) {
-        const entry = oldInstances[i];
-        const k = entry.key;
-        if (k != null)
-            oldByKey.set(k, entry);
+        keys[i] = value;
+        seen.set(value, null);
     }
+    seen.clear();
+    return true;
+}
+function commitKeyIdentity(state) {
+    const oldKeys = state.keys;
+    state.keys = state.nextKeys;
+    state.nextKeys = oldKeys;
+    state.nextKeys.length = 0;
+}
+function clearKeyIdentity(state) {
+    state.keys.length = 0;
+    state.nextKeys.length = 0;
+    state.map.clear();
+}
+function warnKeyFallback(rep, state) {
+    if (state.warned)
+        return;
+    state.warned = true;
+    const key = state.path.length === 0
+        ? rep.itemVar
+        : `${rep.itemVar}.${state.path}`;
+    console.warn(`[webui] repeat "${rep.collection}" produced duplicate or invalid values for child key="${key}"; using positional reconciliation`);
+}
+function reconcileByKey(host, rep, items, container, state) {
+    const instances = rep.instances;
+    const map = state.map;
     let nextCount = 0;
+    let created = false;
+    let removed = false;
     for (let i = 0; i < items.length; i += 1) {
-        const item = items[i];
-        const key = itemKey(item, keyPath);
-        const existing = key != null ? oldByKey.get(key) : undefined;
-        if (existing) {
-            oldByKey.set(key, undefined);
-            existing.value = item;
-            existing.key = key;
-            if (existing.instance.scope)
-                existing.instance.scope.value = item;
-            oldInstances[nextCount] = existing;
-            nextCount += 1;
+        const key = state.nextKeys[i];
+        let instance = map.get(key);
+        if (instance) {
+            map.set(key, null);
+            setItemScope(instance, items[i]);
         }
         else {
-            const scope = itemScope(rep, item);
-            const instance = host.$createBlockInstance(rep.blockIndex, scope);
-            if (instance) {
-                oldInstances[nextCount] = { key: key ?? null, value: item, instance };
-                nextCount += 1;
-            }
+            instance = host.$createBlockInstance(rep.blockIndex, itemScope(rep, items[i]), rep.owner, container) ?? undefined;
+            if (instance)
+                created = true;
+        }
+        if (instance) {
+            instances[nextCount] = instance;
+            state.nextKeys[nextCount] = key;
+            nextCount += 1;
         }
     }
-    for (const leftover of oldByKey.values()) {
-        if (leftover)
-            host.$removeInstance(leftover.instance);
+    state.nextKeys.length = nextCount;
+    for (const instance of map.values()) {
+        if (instance) {
+            host.$removeInstance(instance);
+            removed = true;
+        }
     }
-    oldInstances.length = nextCount;
     let cursor = rep.start;
-    for (let i = 0; i < oldInstances.length; i += 1) {
-        cursor = host.$insertInstanceAfter(cursor, container, oldInstances[i].instance);
+    for (let i = 0; i < nextCount; i += 1) {
+        cursor = host.$insertInstanceAfter(cursor, container, instances[i]);
+    }
+    for (let i = 0; i < nextCount; i += 1) {
+        if (map.get(state.nextKeys[i]) === null) {
+            host.$updateInstance(instances[i]);
+        }
+    }
+    map.clear();
+    instances.length = nextCount;
+    commitKeyIdentity(state);
+    if (created || removed)
+        host.$changeStructure(removed ? rep.owner : undefined);
+}
+function syncKeyed(host, rep, items, container, state) {
+    if (!collectRepeatKeys(items, state)) {
+        warnKeyFallback(rep, state);
+        clearKeyIdentity(state);
+        syncPositional(host, rep, items, container);
+        return;
+    }
+    let sharedOrder = true;
+    const sharedLength = Math.min(state.keys.length, state.nextKeys.length);
+    for (let i = 0; sharedOrder && i < sharedLength; i += 1) {
+        sharedOrder = state.keys[i] === state.nextKeys[i];
     }
-    for (let i = 0; i < oldInstances.length; i += 1) {
-        const entry = oldInstances[i];
-        if (entry.key != null && oldByKey.has(entry.key) && oldByKey.get(entry.key) === undefined) {
-            host.$updateInstance(entry.instance);
+    if (state.keys.length !== rep.instances.length || sharedOrder) {
+        syncPositional(host, rep, items, container);
+        if (rep.instances.length === items.length) {
+            commitKeyIdentity(state);
+        }
+        else {
+            clearKeyIdentity(state);
         }
+        return;
+    }
+    for (let i = 0; i < state.keys.length; i += 1) {
+        state.map.set(state.keys[i], rep.instances[i]);
+    }
+    reconcileByKey(host, rep, items, container, state);
+}
+export function syncRepeat(host, rep) {
+    const resolved = host.$resolveValue(rep.collection, rep.scope);
+    const items = Array.isArray(resolved) ? resolved : [];
+    const container = (rep.container
+        ?? rep.start?.parentNode
+        ?? rep.owner.nodes[0]?.parentNode);
+    if (!container)
+        return;
+    rep.container = container;
+    if (!rep.synced
+        && rep.instances.length > 0
+        && !host.$hasStateRoot(rep.collection, rep.scope))
+        return;
+    rep.synced = true;
+    if (items.length === 0) {
+        const hadInstances = rep.instances.length !== 0;
+        for (let i = 0; i < rep.instances.length; i += 1) {
+            host.$removeInstance(rep.instances[i]);
+        }
+        rep.instances.length = 0;
+        if (hadInstances)
+            host.$changeStructure(rep.owner);
+        if (rep.keyState) {
+            clearKeyIdentity(rep.keyState);
+        }
+        return;
+    }
+    if (rep.keyState) {
+        syncKeyed(host, rep, items, container, rep.keyState);
+    }
+    else {
+        syncPositional(host, rep, items, container);
     }
 }

package/dist/element/markers.js

@@ -6,16 +6,24 @@ const MARKER_REPEAT_ITEM = 'wi';
 export function collectItemMarkers(repeatStart) {
     const items = [];
     let end = null;
+    let depth = 1;
     let node = repeatStart.nextSibling;
     while (node) {
         if (node.nodeType === 8) {
             const data = node.data;
-            if (data === MARKER_REPEAT_END) {
-                end = node;
-                break;
+            if (data === MARKER_REPEAT_START) {
+                depth++;
             }
-            if (data === MARKER_REPEAT_ITEM)
+            else if (data === MARKER_REPEAT_END) {
+                depth--;
+                if (depth === 0) {
+                    end = node;
+                    break;
+                }
+            }
+            else if (data === MARKER_REPEAT_ITEM && depth === 1) {
                 items.push(node);
+            }
         }
         node = node.nextSibling;
     }
@@ -28,7 +36,7 @@ export function nextElement(marker) {
             return node;
         if (node.nodeType === 8) {
             const data = node.data;
-            if (data === MARKER_REPEAT_END || data === MARKER_REPEAT_ITEM)
+            if (data === MARKER_REPEAT_END || data === MARKER_REPEAT_ITEM || data === MARKER_COND_END)
                 return null;
         }
         node = node.nextSibling;

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.d.ts

@@ -8,14 +8,10 @@ export declare class WebUIElement extends TemplateElement {
     $emit(name: string, detail?: unknown): boolean;
     protected $finalize(instance: TemplateInstance, root: Node, meta: TemplateBlockMeta, resolver: (root: Node, path: TemplateNodePath) => Node | null, scope?: ScopeFrame): void;
     private $wireEvents;
-    private $resolveDelegatedEvents;
     private $wireRoot;
-    private $addDelegatedEvent;
-    private $dispatchDelegatedEvent;
     private $addEvent;
     private $addCleanup;
     private $callEventHandler;
-    private $callEventHandlerWithCurrentTarget;
     private $resolveEventArgs;
     private $resolveEventArg;
     private $wireRefs;

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);
@@ -28,32 +29,16 @@ export class WebUIElement extends TemplateElement {
         const groups = meta.eg;
         if (!groups)
             return;
-        const delegateTarget = this.shadowRoot ?? this;
         for (let i = 0; i < groups.length; i++) {
             const [eventName, bindings] = groups[i];
-            const bucket = this.$resolveDelegatedEvents(root, bindings, resolver, scope);
-            this.$addDelegatedEvent(instance, delegateTarget, eventName, bucket);
-        }
-    }
-    $resolveDelegatedEvents(root, bindings, resolver, scope) {
-        const entries = [];
-        for (let i = 0; i < bindings.length; i++) {
-            const [handlerName, args, target, usesEvent] = bindings[i];
-            const el = resolver(root, target);
-            if (!el || el.nodeType !== 1)
-                continue;
-            const method = this[handlerName];
-            if (typeof method !== 'function')
-                continue;
-            entries.push({
-                target: el,
-                method: method,
-                args,
-                usesEvent: usesEvent === 1,
-                scope,
-            });
+            for (let j = 0; j < bindings.length; j++) {
+                const [handlerName, args, target] = bindings[j];
+                const el = resolver(root, target);
+                if (el && el.nodeType === 1) {
+                    this.$addEvent(instance, el, eventName, handlerName, args, scope);
+                }
+            }
         }
-        return entries;
     }
     $wireRoot(instance, re) {
         const target = this.shadowRoot ?? this;
@@ -61,27 +46,6 @@ export class WebUIElement extends TemplateElement {
             this.$addEvent(instance, target, re[i][0], re[i][1], re[i][2], undefined);
         }
     }
-    $addDelegatedEvent(instance, target, eventName, entries) {
-        if (entries.length === 0)
-            return;
-        const listener = (event) => {
-            this.$dispatchDelegatedEvent(entries, event);
-        };
-        target.addEventListener(eventName, listener);
-        this.$addCleanup(instance, () => target.removeEventListener(eventName, listener));
-    }
-    $dispatchDelegatedEvent(entries, event) {
-        let current = event.target;
-        while (current) {
-            for (let i = 0; i < entries.length; i++) {
-                const entry = entries[i];
-                if (entry.target === current) {
-                    this.$callEventHandler(entry.method, entry.args, event, entry.scope, entry.target, entry.usesEvent);
-                }
-            }
-            current = current.parentNode;
-        }
-    }
     $addEvent(instance, target, eventName, handlerName, args, scope) {
         const method = this[handlerName];
         if (typeof method !== 'function')
@@ -93,11 +57,7 @@ export class WebUIElement extends TemplateElement {
     $addCleanup(instance, cleanup) {
         (instance.cleanups ??= []).push(cleanup);
     }
-    $callEventHandler(method, args, event, scope, currentTarget, usesEvent = false) {
-        if (currentTarget && usesEvent) {
-            this.$callEventHandlerWithCurrentTarget(method, args, event, scope, currentTarget);
-            return;
-        }
+    $callEventHandler(method, args, event, scope) {
         switch (args.length) {
             case 0:
                 method.call(this);
@@ -118,24 +78,6 @@ export class WebUIElement extends TemplateElement {
                 method.apply(this, this.$resolveEventArgs(args, event, scope));
         }
     }
-    $callEventHandlerWithCurrentTarget(method, args, event, scope, currentTarget) {
-        const descriptor = Object.getOwnPropertyDescriptor(event, 'currentTarget');
-        Object.defineProperty(event, 'currentTarget', {
-            configurable: true,
-            value: currentTarget,
-        });
-        try {
-            this.$callEventHandler(method, args, event, scope);
-        }
-        finally {
-            if (descriptor) {
-                Object.defineProperty(event, 'currentTarget', descriptor);
-            }
-            else {
-                delete event.currentTarget;
-            }
-        }
-    }
     $resolveEventArgs(args, event, scope) {
         const resolved = [];
         for (let i = 0; i < args.length; i++) {

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/lifecycle.d.ts

@@ -1,2 +1,19 @@
 export declare function hydrationStart(): void;
 export declare function hydrationEnd(): void;
+export declare function beginStreamingGate(): void;
+export declare function abortStreamingGate(): void;
+export declare function markBoundaryPending(): void;
+export declare function markBoundaryCommitted(terminal: boolean): void;
+export declare function markLateActivationPending(): void;
+export declare function settleLateActivation(): void;
+export declare function __getLifecycleStateForTests(): {
+    pendingCount: number;
+    started: boolean;
+    completed: boolean;
+    streamingGateActive: boolean;
+    streamingGateAborted: boolean;
+    terminalReached: boolean;
+    pendingBoundaries: number;
+    pendingLateActivations: number;
+};
+export declare function __resetLifecycleForTests(): void;