@lynx-js/react 0.121.0 → 0.121.2

package/runtime/lib/element-template/background/instance.d.ts

@@ -1,4 +1,4 @@
-import type { SerializableValue } from '../protocol/types.js';
+import type { ElementTemplateHandleSlotsCommand, RuntimeOptionsCommand, SerializableValue, TypedElementAttributesCommand, UpdateTypedListItemCommand } from '../protocol/types.js';
 export declare const BUILTIN_RAW_TEXT_TEMPLATE_KEY = "_et_builtin_raw_text";
 export declare class BackgroundElementTemplateInstance {
     instanceId: number;
@@ -8,32 +8,61 @@ export declare class BackgroundElementTemplateInstance {
     lastChild: BackgroundElementTemplateInstance | null;
     nextSibling: BackgroundElementTemplateInstance | null;
     previousSibling: BackgroundElementTemplateInstance | null;
+    __slotIndex: number;
     attributeSlots: SerializableValue[];
-    elementSlots: BackgroundElementTemplateInstance[][];
     private rawAttributeSlots;
-    private hasEmittedCreate;
+    protected isMaterializedOnMainThread: boolean;
+    private listItemPlatformInfo;
     get parentNode(): BackgroundElementTemplateInstance | null;
     get childNodes(): BackgroundElementTemplateInstance[];
+    get elementSlots(): BackgroundElementTemplateInstance[][];
     nodeType: number;
     constructor(type: string, initialAttributeSlots?: SerializableValue[]);
     emitCreate(): void;
-    private isPendingCreate;
-    private canEmitPatch;
+    private needsMainThreadCreate;
+    private markSubtreeDetachedFromMainThread;
+    releaseDetachedSubtreeFromManager(): void;
+    private restoreManagerRegistration;
+    private releaseSubtreeFromManager;
+    emitMainThreadCreateIfNeeded(): void;
+    protected canEmitUpdatePatch(): boolean;
+    protected cleanupDetachedChildForLifetimeRemoval(child: BackgroundElementTemplateInstance, canEmitUpdatePatch: boolean): void;
     appendChild(child: BackgroundElementTemplateInstance): void;
     insertBefore(child: BackgroundElementTemplateInstance, beforeChild: BackgroundElementTemplateInstance | null, silent?: boolean): void;
     removeChild(child: BackgroundElementTemplateInstance, silent?: boolean): void;
     tearDown(): void;
+    queueRefCleanupForSubtree(): void;
     getRawAttributeSlot(attrSlotIndex: number): unknown;
-    markCreateEmittedForHydration(): void;
-    prepareAttributeSlotsForNative(): void;
+    markMaterializedByHydration(): void;
+    prepareAttributeSlotsForNative(options?: {
+        queueRefEffects?: boolean;
+    }): void;
+    prepareAttributeSlotsForHydration(): void;
     setAttribute(key: string, value: unknown): void;
     get text(): string;
     set text(value: string);
     get data(): string;
     set data(value: string);
+    getListItemPlatformInfo(): Record<string, SerializableValue>;
+    private notifyParentListOfLogicalChildUpdate;
 }
-export declare class BackgroundElementTemplateSlot extends BackgroundElementTemplateInstance {
-    partId: number;
+export declare class BackgroundTypedElementTemplateInstance extends BackgroundElementTemplateInstance {
+    constructor(type: string);
+    emitCreate(): void;
+    setAttribute(key: string, value: unknown): void;
+    protected getTypedAttributesForCreate(): TypedElementAttributesCommand | null;
+    protected getElementSlotsForCreate(): ElementTemplateHandleSlotsCommand | null;
+    protected getRuntimeOptionsForCreate(): RuntimeOptionsCommand | null;
+}
+export declare class BackgroundListElementTemplateInstance extends BackgroundTypedElementTemplateInstance {
     constructor();
+    protected getRuntimeOptionsForCreate(): RuntimeOptionsCommand;
+    insertBefore(child: BackgroundElementTemplateInstance, beforeChild: BackgroundElementTemplateInstance | null, silent?: boolean): void;
+    removeChild(child: BackgroundElementTemplateInstance, silent?: boolean): void;
+    notifyLogicalChildUpdated(child: BackgroundElementTemplateInstance): void;
+    private emitTypedListItemInsert;
+    private emitTypedListItemRemove;
+    private emitTypedListItemUpdate;
 }
+export declare function toUpdateTypedListItemCommand(child: BackgroundElementTemplateInstance): UpdateTypedListItemCommand;
 export declare function collectElementTemplateSubtreeHandleIds(root: BackgroundElementTemplateInstance): number[];

package/runtime/lib/element-template/background/instance.js

@@ -1,12 +1,13 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { prepareAttributeSlots as prepareRawAttributeSlots } from './attr-slots.js';
-import { globalCommitContext, markRemovedSubtreeForCurrentCommit } from './commit-context.js';
+import { prepareAttributeSlots as prepareRawAttributeSlots, queueRefAttributeSlotUpdates } from './attr-slots.js';
+import { globalCommitContext, markRemovedSubtreeForPostDispatchTeardown } from './commit-context.js';
 import { isElementTemplateHydrated } from './commit-hook.js';
 import { backgroundElementTemplateInstanceManager } from './manager.js';
 import { isDirectOrDeepEqual } from '../../utils.js';
 import { ElementTemplateUpdateOps } from '../protocol/opcodes.js';
+import { parseElementTemplateType } from '../protocol/template-type.js';
 function pushOp(...items) {
     globalCommitContext.ops.push(...items);
 }
@@ -23,12 +24,8 @@ function stringifyRawTextValue(value) {
     }
     return '';
 }
-function syncElementSlotChildren(parent, slotId, children) {
-    if (!parent || slotId < 0) {
-        return;
-    }
-    parent.elementSlots[slotId] = [...children];
-}
+const EMPTY_LIST_ITEM_PLATFORM_INFO = {};
+const EMPTY_REMOVED_SUBTREE_HANDLE_IDS = [];
 export class BackgroundElementTemplateInstance {
     instanceId = 0; // Assigned by manager
     type;
@@ -37,11 +34,12 @@ export class BackgroundElementTemplateInstance {
     lastChild = null;
     nextSibling = null;
     previousSibling = null;
+    __slotIndex = 0;
     // Shadow State for Hydration
     attributeSlots;
-    elementSlots = [];
     rawAttributeSlots;
-    hasEmittedCreate = false;
+    isMaterializedOnMainThread = false;
+    listItemPlatformInfo;
     get parentNode() {
         return this.parent;
     }
@@ -54,6 +52,15 @@ export class BackgroundElementTemplateInstance {
         }
         return nodes;
     }
+    get elementSlots() {
+        const elementSlots = [];
+        let child = this.firstChild;
+        while (child) {
+            (elementSlots[child.__slotIndex] ??= []).push(child);
+            child = child.nextSibling;
+        }
+        return elementSlots;
+    }
     nodeType;
     constructor(type, initialAttributeSlots) {
         this.type = type;
@@ -71,23 +78,111 @@ export class BackgroundElementTemplateInstance {
         }
     }
     emitCreate() {
-        if (this.hasEmittedCreate) {
+        if (this.isMaterializedOnMainThread) {
             return;
         }
-        if (this.instanceId === 0 && __DEV__) {
+        if (__DEV__ && this.instanceId === 0) {
             lynx.reportError(new Error('ElementTemplate patch has illegal handleId 0.'));
             return;
         }
-        pushOp(ElementTemplateUpdateOps.createTemplate, this.instanceId, this.type, null, this.attributeSlots, this.elementSlots.map((children) => children.map((child) => child.instanceId)));
-        this.hasEmittedCreate = true;
+        this.restoreManagerRegistration();
+        // Walk the linked-list children once to build the slot-indexed handle list
+        // for the createTemplate op. Going via `this.elementSlots` would allocate
+        // the full `Instance[][]` intermediate just to throw it away here.
+        const serializedSlots = [];
+        let child = this.firstChild;
+        while (child) {
+            (serializedSlots[child.__slotIndex] ??= []).push(child.instanceId);
+            child = child.nextSibling;
+        }
+        const nativeTemplate = parseElementTemplateType(this.type);
+        pushOp(ElementTemplateUpdateOps.createTemplate, this.instanceId, nativeTemplate.templateKey, nativeTemplate.bundleUrl, this.attributeSlots, serializedSlots);
+        this.isMaterializedOnMainThread = true;
+    }
+    needsMainThreadCreate() {
+        return this.instanceId !== 0 && !this.isMaterializedOnMainThread;
+    }
+    markSubtreeDetachedFromMainThread() {
+        if (this.instanceId !== 0) {
+            this.isMaterializedOnMainThread = false;
+        }
+        let child = this.firstChild;
+        while (child) {
+            child.markSubtreeDetachedFromMainThread();
+            child = child.nextSibling;
+        }
+    }
+    releaseDetachedSubtreeFromManager() {
+        if (this.parent !== null || this.isMaterializedOnMainThread) {
+            return;
+        }
+        this.releaseSubtreeFromManager();
+    }
+    restoreManagerRegistration() {
+        if (this.instanceId === 0) {
+            return;
+        }
+        const instances = backgroundElementTemplateInstanceManager.values;
+        const existing = instances.get(this.instanceId);
+        if (existing === this) {
+            return;
+        }
+        if (existing) {
+            throw new Error(`ElementTemplate handleId ${this.instanceId} is already bound.`);
+        }
+        instances.set(this.instanceId, this);
+    }
+    releaseSubtreeFromManager() {
+        const instances = backgroundElementTemplateInstanceManager.values;
+        if (instances.get(this.instanceId) === this) {
+            instances.delete(this.instanceId);
+        }
+        let child = this.firstChild;
+        while (child) {
+            child.releaseSubtreeFromManager();
+            child = child.nextSibling;
+        }
     }
-    isPendingCreate() {
-        return this.instanceId > 0 && !this.hasEmittedCreate;
+    emitMainThreadCreateIfNeeded() {
+        if (!this.needsMainThreadCreate()) {
+            return;
+        }
+        // An unmaterialized subtree may receive attr updates before it is inserted;
+        // prepare here so ref attach happens once, at the create boundary.
+        this.prepareAttributeSlotsForNative();
+        this.emitCreate();
     }
-    canEmitPatch() {
+    canEmitUpdatePatch() {
         // Background tree construction is local until hydrate binds it to main-thread
-        // instances. Only hydrated and already-created owners can emit update ops.
-        return isElementTemplateHydrated() && !this.isPendingCreate();
+        // instances. Only hydrated and materialized owners can emit update ops.
+        return isElementTemplateHydrated() && !this.needsMainThreadCreate();
+    }
+    cleanupDetachedChildForLifetimeRemoval(child, canEmitUpdatePatch) {
+        if (canEmitUpdatePatch) {
+            child.markSubtreeDetachedFromMainThread();
+            // The removed JS object graph may outlive the detach until GC, so keep
+            // it pending and tear it down on the Snapshot-aligned delayed boundary.
+            markRemovedSubtreeForPostDispatchTeardown(child);
+            child.queueRefCleanupForSubtree();
+            return;
+        }
+        // Mirrors `shouldQueueRefEffects` in `setAttribute`: pre-hydration
+        // commits and post-hydration materialized children publish their refs
+        // to user effects. Post-hydration unmaterialized children defer attach
+        // to `emitCreate`, which never fires for a subtree torn down before
+        // insert — so cleaning up there would emit a spurious detach.
+        const refAttachWasPublished = !isElementTemplateHydrated()
+            || !child.needsMainThreadCreate();
+        if (refAttachWasPublished) {
+            // Run before any tearDown below: `tearDown` clears `rawAttributeSlots`,
+            // which `queueRefCleanupForSubtree` walks to enqueue the detach.
+            child.queueRefCleanupForSubtree();
+        }
+        if (child.needsMainThreadCreate()) {
+            // An unmaterialized subtree has no main-thread registry entry, so it
+            // can be released from the background manager without delayed cleanup.
+            child.tearDown();
+        }
     }
     // DOM API for Preact
     appendChild(child) {
@@ -126,31 +221,12 @@ export class BackgroundElementTemplateInstance {
             this.lastChild = child;
             child.nextSibling = null;
         }
-        if (child instanceof BackgroundElementTemplateSlot) {
-            syncElementSlotChildren(this, child.partId, collectChildren(child));
-        }
-        if (this instanceof BackgroundElementTemplateSlot) {
-            const slotId = this.partId;
-            const parent = this.parent;
-            if (parent) {
-                syncElementSlotChildren(parent, slotId, collectChildren(this));
-            }
-            if (silent) {
-                return;
-            }
-            if (slotId !== -1 && parent) {
-                if (!parent.canEmitPatch()) {
-                    return;
-                }
-                const beforeId = beforeChild ? beforeChild.instanceId : 0;
-                emitCreateRecursive(child);
-                pushOp(ElementTemplateUpdateOps.insertNode, parent.instanceId, slotId, child.instanceId, beforeId);
-            }
-            return;
-        }
-        if (silent) {
+        if (silent || !this.canEmitUpdatePatch()) {
             return;
         }
+        const beforeId = (beforeChild && beforeChild.__slotIndex === child.__slotIndex) ? beforeChild.instanceId : 0;
+        emitMainThreadCreateRecursive(child);
+        pushOp(ElementTemplateUpdateOps.insertNode, this.instanceId, child.__slotIndex, child.instanceId, beforeId);
     }
     removeChild(child, silent) {
         if (child.parent !== this) {
@@ -171,37 +247,15 @@ export class BackgroundElementTemplateInstance {
         child.parent = null;
         child.nextSibling = null;
         child.previousSibling = null;
-        if (child instanceof BackgroundElementTemplateSlot && child.partId >= 0) {
-            this.elementSlots[child.partId] = [];
-        }
-        if (this instanceof BackgroundElementTemplateSlot) {
-            const slotId = this.partId;
-            const parent = this.parent;
-            if (parent) {
-                syncElementSlotChildren(parent, slotId, collectChildren(this));
-            }
-            if (silent) {
-                return;
-            }
-            if (slotId !== -1 && parent) {
-                if (!parent.canEmitPatch()) {
-                    if (child.isPendingCreate()) {
-                        // A never-created subtree has no main-thread registry entry, so it
-                        // can be released from the background manager without delayed cleanup.
-                        child.tearDown();
-                    }
-                    return;
-                }
-                pushOp(ElementTemplateUpdateOps.removeNode, parent.instanceId, slotId, child.instanceId, collectElementTemplateSubtreeHandleIds(child));
-                // The removed JS object graph may outlive the detach until GC, so keep
-                // it pending and tear it down on the Snapshot-aligned delayed boundary.
-                markRemovedSubtreeForCurrentCommit(child);
-            }
-            return;
-        }
+        const slotId = child.__slotIndex;
         if (silent) {
             return;
         }
+        const canEmitUpdatePatch = this.canEmitUpdatePatch();
+        if (canEmitUpdatePatch) {
+            pushOp(ElementTemplateUpdateOps.removeNode, this.instanceId, slotId, child.instanceId, collectElementTemplateSubtreeHandleIds(child));
+        }
+        this.cleanupDetachedChildForLifetimeRemoval(child, canEmitUpdatePatch);
     }
     tearDown() {
         // Recursively tear down children first
@@ -219,35 +273,69 @@ export class BackgroundElementTemplateInstance {
         this.nextSibling = null;
         this.attributeSlots = [];
         this.rawAttributeSlots = undefined;
-        this.elementSlots = [];
         // Remove from manager
         if (this.instanceId) {
             backgroundElementTemplateInstanceManager.values.delete(this.instanceId);
         }
     }
+    queueRefCleanupForSubtree() {
+        if (this.rawAttributeSlots) {
+            queueRefAttributeSlotUpdates(this.type, this.instanceId, this.rawAttributeSlots);
+        }
+        let child = this.firstChild;
+        while (child) {
+            child.queueRefCleanupForSubtree();
+            child = child.nextSibling;
+        }
+    }
     getRawAttributeSlot(attrSlotIndex) {
         return this.rawAttributeSlots?.[attrSlotIndex] ?? this.attributeSlots[attrSlotIndex];
     }
-    markCreateEmittedForHydration() {
+    markMaterializedByHydration() {
         // Hydration binds this object to a template that already exists on the main
-        // thread; future updates must treat it as created without emitting create.
-        this.hasEmittedCreate = true;
+        // thread; future updates must treat it as materialized without emitting create.
+        this.isMaterializedOnMainThread = true;
+        this.restoreManagerRegistration();
     }
-    prepareAttributeSlotsForNative() {
+    prepareAttributeSlotsForNative(options) {
         if (!this.rawAttributeSlots) {
             return;
         }
-        this.attributeSlots = prepareRawAttributeSlots(this.type, this.instanceId, this.rawAttributeSlots);
+        this.attributeSlots = prepareRawAttributeSlots(this.type, this.instanceId, this.rawAttributeSlots, {
+            queueRefEffects: options?.queueRefEffects ?? true,
+        });
+    }
+    prepareAttributeSlotsForHydration() {
+        // Hydrate only rebinds the selector marker to the stable handle. The ref was
+        // already made visible to user effects on the pre-hydration commit path.
+        this.prepareAttributeSlotsForNative({
+            queueRefEffects: false,
+        });
     }
     setAttribute(key, value) {
         if (isBuiltinRawTextTemplateKey(this.type) && (key === '0' || key === 'data')) {
             this.text = String(value);
         }
+        else if (key === '__listItemPlatformInfo') {
+            const previous = this.getListItemPlatformInfo();
+            const next = value;
+            this.listItemPlatformInfo = next;
+            if (!isDirectOrDeepEqual(previous, next)) {
+                this.notifyParentListOfLogicalChildUpdate();
+            }
+        }
         else if (key === 'attributeSlots' && Array.isArray(value)) {
             const previousSlots = this.attributeSlots;
+            const previousRawSlots = this.rawAttributeSlots ?? previousSlots;
             const isHydrated = isElementTemplateHydrated();
-            const canEmitPatch = isHydrated && !this.isPendingCreate();
-            const nextSlots = prepareRawAttributeSlots(this.type, this.instanceId, value);
+            const canEmitUpdatePatch = isHydrated && !this.needsMainThreadCreate();
+            // Pre-hydration commits must expose refs to effects, while post-hydration
+            // unmaterialized nodes defer ref attach to create emission to avoid dupes.
+            const shouldQueueRefEffects = !isHydrated || canEmitUpdatePatch;
+            const nextSlots = prepareRawAttributeSlots(this.type, this.instanceId, value, {
+                previousRawSlots,
+                queueRefEffects: shouldQueueRefEffects,
+            });
             this.rawAttributeSlots = nextSlots === value ? undefined : value;
             const maxLength = Math.max(previousSlots.length, nextSlots.length);
             this.attributeSlots = nextSlots;
@@ -257,23 +345,12 @@ export class BackgroundElementTemplateInstance {
                 if (isDirectOrDeepEqual(previousValue, nextValue)) {
                     continue;
                 }
-                if (!canEmitPatch) {
+                if (!canEmitUpdatePatch) {
                     continue;
                 }
                 pushOp(ElementTemplateUpdateOps.setAttribute, this.instanceId, slotIndex, nextValue ?? null);
             }
         }
-        else if (key === 'id' && this instanceof BackgroundElementTemplateSlot) {
-            const previousPartId = this.partId;
-            this.partId = Number(value);
-            if (this.parent && previousPartId >= 0 && previousPartId !== this.partId) {
-                this.parent.elementSlots[previousPartId] = [];
-            }
-            syncElementSlotChildren(this.parent, this.partId, collectChildren(this));
-        }
-        else {
-            return;
-        }
     }
     get text() {
         return stringifyRawTextValue(this.attributeSlots[0]);
@@ -288,7 +365,7 @@ export class BackgroundElementTemplateInstance {
         }
         this.rawAttributeSlots = undefined;
         this.attributeSlots = [text];
-        if (!this.canEmitPatch()) {
+        if (!this.canEmitUpdatePatch()) {
             return;
         }
         pushOp(ElementTemplateUpdateOps.setAttribute, this.instanceId, 0, text);
@@ -299,12 +376,125 @@ export class BackgroundElementTemplateInstance {
     set data(value) {
         this.text = value;
     }
+    getListItemPlatformInfo() {
+        return this.listItemPlatformInfo ?? EMPTY_LIST_ITEM_PLATFORM_INFO;
+    }
+    notifyParentListOfLogicalChildUpdate() {
+        if (this.parent instanceof BackgroundListElementTemplateInstance) {
+            this.parent.notifyLogicalChildUpdated(this);
+        }
+    }
+}
+function toTypedAttributesCommand(value) {
+    if (value == null || typeof value !== 'object' || Array.isArray(value)) {
+        return null;
+    }
+    return value;
+}
+export class BackgroundTypedElementTemplateInstance extends BackgroundElementTemplateInstance {
+    constructor(type) {
+        super(type);
+    }
+    emitCreate() {
+        if (this.isMaterializedOnMainThread) {
+            return;
+        }
+        if (__DEV__ && this.instanceId === 0) {
+            lynx.reportError(new Error('ElementTemplate patch has illegal handleId 0.'));
+            return;
+        }
+        pushOp(ElementTemplateUpdateOps.createTypedElement, this.instanceId, this.type, this.getTypedAttributesForCreate(), this.getElementSlotsForCreate(), this.getRuntimeOptionsForCreate());
+        this.isMaterializedOnMainThread = true;
+    }
+    setAttribute(key, value) {
+        if (key !== 'attributes') {
+            super.setAttribute(key, value);
+            return;
+        }
+        const previousValue = this.attributeSlots[0];
+        const nextValue = toTypedAttributesCommand(value);
+        this.attributeSlots = [nextValue];
+        if (isElementTemplateHydrated()
+            && this.isMaterializedOnMainThread
+            && !isDirectOrDeepEqual(previousValue, nextValue)) {
+            pushOp(ElementTemplateUpdateOps.setAttribute, this.instanceId, 0, nextValue);
+        }
+    }
+    getTypedAttributesForCreate() {
+        return toTypedAttributesCommand(this.attributeSlots[0]);
+    }
+    getElementSlotsForCreate() {
+        return null;
+    }
+    getRuntimeOptionsForCreate() {
+        return null;
+    }
 }
-export class BackgroundElementTemplateSlot extends BackgroundElementTemplateInstance {
-    partId = -1;
+export class BackgroundListElementTemplateInstance extends BackgroundTypedElementTemplateInstance {
     constructor() {
-        super('slot');
+        super('list');
+    }
+    getRuntimeOptionsForCreate() {
+        const listChildren = [];
+        let child = this.firstChild;
+        while (child) {
+            listChildren.push(toUpdateTypedListItemCommand(child));
+            child = child.nextSibling;
+        }
+        return {
+            listChildren,
+        };
+    }
+    insertBefore(child, beforeChild, silent) {
+        const previousParent = child.parent;
+        super.insertBefore(child, beforeChild, true);
+        if (!silent) {
+            if (previousParent instanceof BackgroundListElementTemplateInstance) {
+                previousParent.emitTypedListItemRemove(child, EMPTY_REMOVED_SUBTREE_HANDLE_IDS);
+            }
+            this.emitTypedListItemInsert(child, beforeChild);
+        }
+    }
+    removeChild(child, silent) {
+        super.removeChild(child, true);
+        if (!silent) {
+            const canEmitUpdatePatch = this.canEmitUpdatePatch();
+            const removedSubtreeHandleIds = canEmitUpdatePatch
+                ? collectElementTemplateSubtreeHandleIds(child)
+                : EMPTY_REMOVED_SUBTREE_HANDLE_IDS;
+            this.cleanupDetachedChildForLifetimeRemoval(child, canEmitUpdatePatch);
+            this.emitTypedListItemRemove(child, removedSubtreeHandleIds);
+        }
+    }
+    notifyLogicalChildUpdated(child) {
+        this.emitTypedListItemUpdate(child);
     }
+    emitTypedListItemInsert(child, beforeChild) {
+        if (!isElementTemplateHydrated() || !this.isMaterializedOnMainThread) {
+            return;
+        }
+        emitMainThreadCreateRecursive(child);
+        pushOp(ElementTemplateUpdateOps.insertTypedListItem, this.instanceId, toUpdateTypedListItemCommand(child), beforeChild?.instanceId ?? 0);
+    }
+    emitTypedListItemRemove(child, removedSubtreeHandleIds) {
+        if (!isElementTemplateHydrated() || !this.isMaterializedOnMainThread) {
+            return;
+        }
+        pushOp(ElementTemplateUpdateOps.removeTypedListItem, this.instanceId, child.instanceId, removedSubtreeHandleIds);
+    }
+    emitTypedListItemUpdate(child) {
+        if (!isElementTemplateHydrated() || !this.isMaterializedOnMainThread) {
+            return;
+        }
+        pushOp(ElementTemplateUpdateOps.updateTypedListItem, this.instanceId, toUpdateTypedListItemCommand(child));
+    }
+}
+export function toUpdateTypedListItemCommand(child) {
+    return {
+        __etHandleRef: child.instanceId,
+        type: child.type,
+        platformInfo: child.getListItemPlatformInfo(),
+    };
 }
 export function collectElementTemplateSubtreeHandleIds(root) {
     const handles = [];
@@ -312,7 +502,7 @@ export function collectElementTemplateSubtreeHandleIds(root) {
     return handles;
 }
 function collectElementTemplateSubtreeHandleIdsImpl(instance, handles) {
-    if (!(instance instanceof BackgroundElementTemplateSlot) && instance.instanceId !== 0) {
+    if (instance.instanceId !== 0) {
         handles.push(instance.instanceId);
     }
     let child = instance.firstChild;
@@ -321,29 +511,18 @@ function collectElementTemplateSubtreeHandleIdsImpl(instance, handles) {
         child = child.nextSibling;
     }
 }
-function emitCreateRecursive(instance) {
+function emitMainThreadCreateRecursive(instance) {
     if (!isElementTemplateHydrated()
-        || instance.instanceId < 0
-        || instance instanceof BackgroundElementTemplateSlot) {
+        || instance.instanceId === 0) {
         return;
     }
-    for (const slotChildren of instance.elementSlots) {
-        if (!slotChildren) {
-            continue;
-        }
-        for (const child of slotChildren) {
-            emitCreateRecursive(child);
-        }
-    }
-    instance.emitCreate();
-}
-function collectChildren(slot) {
-    const res = [];
-    let child = slot.firstChild;
+    // Walk children in linked-list order; the slot-grouped view would just be
+    // discarded here since we recurse into every child regardless of slot.
+    let child = instance.firstChild;
     while (child) {
-        res.push(child);
+        emitMainThreadCreateRecursive(child);
         child = child.nextSibling;
     }
-    return res;
+    instance.emitMainThreadCreateIfNeeded();
 }
 //# sourceMappingURL=instance.js.map