@remix-run/ui 0.1.1 → 0.2.0

package/dist/runtime/reconcile.js

@@ -1,16 +1,14 @@
 import { createComponent, Frame } from "./component.js";
 import { createFrame } from "./frame.js";
 import { createRangeRoot } from "./vdom.js";
-import { isCommittedComponentNode, isComponentNode, isCommittedHostNode, isCommittedTextNode, isFragmentNode, isHostNode, isTextNode, findContextFromAncestry, } from "./vnode.js";
+import { isCommittedComponentNode, isComponentNode, isCommittedHostNode, isCommittedTextNode, isFragmentNode, isHostNode, isNonRenderNode, isTextNode, findContextFromAncestry, } from "./vnode.js";
 import { invariant } from "./invariant.js";
-import { diffHostProps } from "./diff-props.js";
+import { patchHostProps } from "./core/props.js";
 import { skipComments, logHydrationMismatch } from "./client-entries.js";
 import { toVNode } from "./to-vnode.js";
 import { bindMixinRuntime, cancelPendingMixinRemoval, dispatchMixinBeforeUpdate, dispatchMixinCommit, getMixinRuntimeSignal, prepareMixinRemoval, resolveMixedProps, teardownMixins, } from "./mixins/mixin.js";
+import { isOnMixinDescriptor } from "./mixins/on-mixin.js";
 const SVG_NS = 'http://www.w3.org/2000/svg';
-// Internal diffing flags (modeled after Preact)
-const INSERT_VNODE = 1 << 0;
-const MATCHED = 1 << 1;
 let idCounter = 0;
 let persistedRemovalToken = 0;
 const persistedMixinNodes = new Set();
@@ -60,6 +58,7 @@ function findMatchingPersistedMixinNode(type, key, domParent) {
     }
     return null;
 }
+const EMPTY_DIRECT_EVENT_DESCRIPTORS = [];
 function shouldRestoreControlledReflectionOnInput(node, state) {
     // Some controls dispatch `input` before `change` for the same interaction.
     // When checked/value state is typically handled on `change`, restoring on the
@@ -179,6 +178,17 @@ function setPropertyReflection(element, key, value) {
 }
 function resolveNodeMixProps(node, frame, scheduler, state) {
     let mix = node.props.mix;
+    let directEventDescriptors = resolveDirectEventDescriptors(mix);
+    if (directEventDescriptors) {
+        if (state) {
+            teardownMixins(state);
+        }
+        node._mixState = undefined;
+        node._mixedProps = node.props;
+        node._directEventDescriptors = directEventDescriptors;
+        return node.props;
+    }
+    node._directEventDescriptors = undefined;
     if (state == null && (mix == null || (Array.isArray(mix) && mix.length === 0))) {
         node._mixState = undefined;
         node._mixedProps = node.props;
@@ -201,6 +211,21 @@ function resolveNodeMixProps(node, frame, scheduler, state) {
     node._mixedProps = resolved.props;
     return resolved.props;
 }
+function resolveDirectEventDescriptors(mix) {
+    if (!mix)
+        return EMPTY_DIRECT_EVENT_DESCRIPTORS;
+    if (!Array.isArray(mix)) {
+        return isOnMixinDescriptor(mix) ? [mix] : null;
+    }
+    return areOnMixinDescriptors(mix) ? mix : null;
+}
+function areOnMixinDescriptors(descriptors) {
+    for (let item of descriptors) {
+        if (!isOnMixinDescriptor(item))
+            return false;
+    }
+    return true;
+}
 function enqueueMixinBindingUpdate(done) {
     let node = this.target;
     let state = node._mixState;
@@ -213,7 +238,7 @@ function enqueueMixinBindingUpdate(done) {
             dispatchMixinBeforeUpdate(state);
             let prevProps = getHostProps(node);
             let nextProps = resolveNodeMixProps(node, this.frame, this.scheduler, state);
-            diffHostProps(prevProps, nextProps, this.node);
+            patchHostProps(prevProps, nextProps, this.node);
             dispatchMixinCommit(state);
             done(state ? getMixinRuntimeSignal(state) : AbortSignal.abort());
         },
@@ -258,6 +283,9 @@ export function diffVNodes(curr, next, domParent, frame, scheduler, styles, vPar
         replace(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor);
         return rootCursor;
     }
+    if (isNonRenderNode(curr) && isNonRenderNode(next)) {
+        return rootCursor;
+    }
     if (isCommittedTextNode(curr) && isTextNode(next)) {
         diffText(curr, next, vParent);
         return rootCursor;
@@ -271,7 +299,7 @@ export function diffVNodes(curr, next, domParent, frame, scheduler, styles, vPar
         return rootCursor;
     }
     if (isFragmentNode(curr) && isFragmentNode(next)) {
-        diffChildren(curr._children, next._children, domParent, frame, scheduler, styles, vParent, rootTarget, undefined, anchor);
+        diffChildren(curr._children, next._children, domParent, frame, scheduler, styles, next, rootTarget, undefined, anchor);
         return rootCursor;
     }
     if (curr.type === Frame && next.type === Frame) {
@@ -294,7 +322,7 @@ function replace(curr, next, domParent, frame, scheduler, styles, vParent, rootT
         }
         return;
     }
-    let replacementAnchor = findNextSiblingDomAnchor(curr, vParent) ?? anchor;
+    let replacementAnchor = findNextSiblingDomAnchor(curr) ?? anchor;
     remove(curr, domParent, scheduler, styles);
     insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replacementAnchor);
 }
@@ -319,16 +347,20 @@ function diffHost(curr, next, frame, scheduler, styles, vParent, rootTarget) {
         curr._dom.innerHTML = '';
     }
     diffChildren(curr._children, next._children, curr._dom, frame, scheduler, styles, next, rootTarget);
-    diffHostProps(currProps, nextProps, curr._dom);
+    patchHostProps(currProps, nextProps, curr._dom);
     next._dom = curr._dom;
     next._parent = vParent;
     next._controller = curr._controller;
+    next._directEventState = curr._directEventState;
     next._controlledState = curr._controlledState;
+    syncDirectEventListeners(next);
     if (next._controlledState || shouldTrackControlledReflection(nextProps)) {
         ensureControlledReflection(next, scheduler);
         syncControlledReflection(next, nextProps);
     }
-    bindNodeMixRuntime(next, frame, scheduler, styles);
+    if (next._mixState) {
+        bindNodeMixRuntime(next, frame, scheduler, styles);
+    }
     if (shouldDispatchMixinLifecycle) {
         scheduler.enqueueCommitPhase([() => dispatchMixinCommit(nextMixState)]);
     }
@@ -338,11 +370,94 @@ function setupHostNode(node, dom, scheduler) {
     node._dom = dom;
     let props = getHostProps(node);
     let committedNode = node;
+    syncDirectEventListeners(committedNode);
     if (shouldTrackControlledReflection(props)) {
         ensureControlledReflection(committedNode, scheduler);
         syncControlledReflection(committedNode, props);
     }
 }
+function syncDirectEventListeners(node) {
+    let descriptors = node._directEventDescriptors;
+    if (!descriptors) {
+        teardownDirectEventListeners(node);
+        return;
+    }
+    if (descriptors.length === 0) {
+        teardownDirectEventListeners(node);
+        return;
+    }
+    let state = node._directEventState;
+    if (!state) {
+        state = { bindings: [] };
+        node._directEventState = state;
+    }
+    let bindings = state.bindings;
+    for (let index = 0; index < descriptors.length; index++) {
+        let descriptor = descriptors[index];
+        let [type, handler, captureBoolean = false] = descriptor.args;
+        let binding = bindings[index];
+        if (!binding) {
+            binding = createDirectEventBinding(type, handler, captureBoolean);
+            bindings[index] = binding;
+            attachDirectEventBinding(node._dom, binding);
+            continue;
+        }
+        if (binding.type !== type || binding.capture !== captureBoolean) {
+            removeDirectEventBinding(node._dom, binding);
+            binding.type = type;
+            binding.capture = captureBoolean;
+            attachDirectEventBinding(node._dom, binding);
+        }
+        binding.handler = handler;
+    }
+    for (let index = descriptors.length; index < bindings.length; index++) {
+        removeDirectEventBinding(node._dom, bindings[index]);
+    }
+    bindings.length = descriptors.length;
+}
+function createDirectEventBinding(type, handler, capture) {
+    let binding = {
+        type,
+        handler,
+        capture,
+        reentry: null,
+        stableHandler: null,
+    };
+    return binding;
+}
+function getStableDirectEventHandler(binding) {
+    if (binding.stableHandler)
+        return binding.stableHandler;
+    binding.stableHandler = (event) => {
+        invokeDirectEventBinding(binding, event);
+    };
+    return binding.stableHandler;
+}
+function attachDirectEventBinding(dom, binding) {
+    dom.addEventListener(binding.type, getStableDirectEventHandler(binding), binding.capture);
+}
+function removeDirectEventBinding(dom, binding) {
+    if (binding.stableHandler) {
+        dom.removeEventListener(binding.type, binding.stableHandler, binding.capture);
+    }
+    binding.reentry?.abort(new DOMException('', 'AbortError'));
+    binding.reentry = null;
+}
+function teardownDirectEventListeners(node) {
+    let state = node._directEventState;
+    if (!state)
+        return;
+    for (let binding of state.bindings) {
+        removeDirectEventBinding(node._dom, binding);
+    }
+    state.bindings.length = 0;
+    node._directEventState = undefined;
+}
+function invokeDirectEventBinding(binding, event) {
+    binding.reentry?.abort(new DOMException('', 'EventReentry'));
+    binding.reentry = new AbortController();
+    void binding.handler(event, binding.reentry.signal);
+}
 function diffText(curr, next, vParent) {
     if (curr._text !== next._text) {
         curr._dom.textContent = next._text;
@@ -369,6 +484,9 @@ function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget,
     let doInsert = anchor
         ? (dom) => domParent.insertBefore(dom, anchor)
         : (dom) => domParent.appendChild(dom);
+    if (isNonRenderNode(node)) {
+        return cursor;
+    }
     if (isTextNode(node)) {
         if (cursor instanceof Text) {
             node._parent = vParent;
@@ -414,9 +532,11 @@ function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget,
                 }
                 // Render explicit <head> children directly into document.head.
                 diffChildren(null, node._children, targetHead, frame, scheduler, styles, node, rootTarget, childCursor);
-                diffHostProps({}, hostProps, targetHead);
+                patchHostProps({}, hostProps, targetHead);
                 setupHostNode(node, targetHead, scheduler);
-                bindNodeMixRuntime(node, frame, scheduler, styles);
+                if (node._mixState) {
+                    bindNodeMixRuntime(node, frame, scheduler, styles);
+                }
                 return cursor;
             }
         }
@@ -432,7 +552,7 @@ function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget,
             let cursorTag = node._svg ? cursor.tagName : cursor.tagName.toLowerCase();
             if (cursorTag === node.type) {
                 let nextCursor = cursor.nextSibling;
-                diffHostProps({}, hostProps, cursor);
+                patchHostProps({}, hostProps, cursor);
                 // Handle innerHTML prop
                 if (hostProps.innerHTML != null) {
                     cursor.innerHTML = hostProps.innerHTML;
@@ -443,7 +563,9 @@ function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget,
                     diffChildren(null, node._children, cursor, frame, scheduler, styles, node, rootTarget, childCursor);
                 }
                 setupHostNode(node, cursor, scheduler);
-                bindNodeMixRuntime(node, frame, scheduler, styles);
+                if (node._mixState) {
+                    bindNodeMixRuntime(node, frame, scheduler, styles);
+                }
                 return nextCursor;
             }
             else {
@@ -455,7 +577,7 @@ function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget,
                     if (nextTag === node.type) {
                         let nextCursor = nextSibling.nextSibling;
                         // Found a match after skipping - adopt it and leave skipped node in place
-                        diffHostProps({}, hostProps, nextSibling);
+                        patchHostProps({}, hostProps, nextSibling);
                         if (hostProps.innerHTML != null) {
                             nextSibling.innerHTML = hostProps.innerHTML;
                         }
@@ -464,7 +586,9 @@ function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget,
                             diffChildren(null, node._children, nextSibling, frame, scheduler, styles, node, rootTarget, childCursor);
                         }
                         setupHostNode(node, nextSibling, scheduler);
-                        bindNodeMixRuntime(node, frame, scheduler, styles);
+                        if (node._mixState) {
+                            bindNodeMixRuntime(node, frame, scheduler, styles);
+                        }
                         return nextCursor;
                     }
                 }
@@ -476,7 +600,7 @@ function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget,
         let dom = node._svg
             ? document.createElementNS(SVG_NS, node.type)
             : document.createElement(node.type);
-        diffHostProps({}, hostProps, dom);
+        patchHostProps({}, hostProps, dom);
         // Handle innerHTML prop
         if (hostProps.innerHTML != null) {
             dom.innerHTML = hostProps.innerHTML;
@@ -485,14 +609,16 @@ function insert(node, domParent, frame, scheduler, styles, vParent, rootTarget,
             diffChildren(null, node._children, dom, frame, scheduler, styles, node, rootTarget);
         }
         setupHostNode(node, dom, scheduler);
-        bindNodeMixRuntime(node, frame, scheduler, styles, false, domParent);
+        if (node._mixState) {
+            bindNodeMixRuntime(node, frame, scheduler, styles, false, domParent);
+        }
         doInsert(dom);
         return cursor;
     }
     if (isFragmentNode(node)) {
         // Insert fragment children in order before the same anchor
         for (let child of node._children) {
-            cursor = insert(child, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
+            cursor = insert(child, domParent, frame, scheduler, styles, node, rootTarget, anchor, cursor);
         }
         return cursor;
     }
@@ -783,6 +909,8 @@ function findFrameEndComment(start) {
     return null;
 }
 export function renderComponent(handle, currContent, next, domParent, frame, scheduler, styles, rootTarget, vParent, anchor, cursor) {
+    if (handle.isRemoved())
+        return cursor;
     let [element, tasks] = handle.render(next.props);
     let content = toVNode(element);
     let newCursor = diffVNodes(currContent, content, domParent, frame, scheduler, styles, next, rootTarget, anchor, cursor);
@@ -835,6 +963,7 @@ function cleanupDescendants(node, scheduler, styles) {
             cleanupDescendants(child, scheduler, styles);
         }
         teardownMixins(node._mixState);
+        teardownDirectEventListeners(node);
         teardownControlledReflection(node);
         if (node._controller)
             node._controller.abort();
@@ -916,6 +1045,7 @@ function performHostNodeRemoval(node, domParent, scheduler, styles) {
         }
     }
     teardownMixins(node._mixState);
+    teardownDirectEventListeners(node);
     teardownControlledReflection(node);
     // Never remove the real document.head node when reconciling a <head> vnode.
     if (!isHeadHostNode(node)) {
@@ -925,55 +1055,35 @@ function performHostNodeRemoval(node, domParent, scheduler, styles) {
         node._controller.abort();
 }
 function diffChildren(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, cursor, anchor) {
-    let nextLength = next.length;
-    // Warn when duplicate keys are present among siblings. Duplicate keys are
-    // still processed (last one wins), but they make keyed diffing ambiguous.
-    let hasKeys = false;
-    let seenKeys;
-    let duplicateKeys;
-    for (let i = 0; i < nextLength; i++) {
-        let node = next[i];
-        if (node && node.key != null) {
-            hasKeys = true;
-            if (!seenKeys) {
-                seenKeys = new Set([node.key]);
-                continue;
-            }
-            if (seenKeys.has(node.key)) {
-                if (!duplicateKeys) {
-                    duplicateKeys = new Set();
-                }
-                duplicateKeys.add(node.key);
-            }
-            else {
-                seenKeys.add(node.key);
-            }
-        }
-    }
-    if (duplicateKeys?.size) {
-        let quotedKeys = Array.from(duplicateKeys, (key) => `"${key}"`);
-        console.warn(`Duplicate keys detected in siblings: ${quotedKeys.join(', ')}. Keys should be unique.`);
-    }
-    // Initial mount / hydration: delegate to insert() for each child so that
-    // hydration cursors and creation logic remain centralized there.
+    let hasKeys = hasKeyedChildren(next);
     if (curr === null) {
+        if (hasKeys) {
+            warnDuplicateKeys(next);
+        }
         for (let node of next) {
             cursor = insert(node, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
         }
         vParent._children = next;
         return cursor;
     }
-    let currLength = curr.length;
-    // Detect if any keys are present in the new children. If not, we can fall
-    // back to the simpler index-based diff which is cheaper and matches
-    // pre-existing behavior.
+    if (next.length === 0 &&
+        anchor === undefined &&
+        !parentUsesInnerHTML(vParent) &&
+        canBulkClearChildren(curr)) {
+        for (let node of curr) {
+            cleanupDescendants(node, scheduler, styles);
+        }
+        domParent.textContent = '';
+        vParent._children = next;
+        return;
+    }
     if (!hasKeys) {
-        for (let i = 0; i < nextLength; i++) {
-            let currentNode = i < currLength ? curr[i] : null;
+        for (let i = 0; i < next.length; i++) {
+            let currentNode = i < curr.length ? curr[i] : null;
             diffVNodes(currentNode, next[i], domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
         }
-        if (currLength > nextLength) {
-            for (let i = nextLength; i < currLength; i++) {
+        if (curr.length > next.length) {
+            for (let i = next.length; i < curr.length; i++) {
                 let node = curr[i];
                 if (node)
                     remove(node, domParent, scheduler, styles);
@@ -982,167 +1092,302 @@ function diffChildren(curr, next, domParent, frame, scheduler, styles, vParent,
         vParent._children = next;
         return;
     }
-    if (currLength === nextLength) {
-        let canDiffByPosition = true;
-        for (let i = 0; i < nextLength; i++) {
-            let currentNode = curr[i];
-            let nextNode = next[i];
-            if (!currentNode || currentNode.key !== nextNode.key || currentNode.type !== nextNode.type) {
-                canDiffByPosition = false;
-                break;
-            }
-        }
-        if (canDiffByPosition) {
-            for (let i = 0; i < nextLength; i++) {
-                diffVNodes(curr[i], next[i], domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
-            }
-            vParent._children = next;
-            return;
-        }
+    patchKeyedChildren(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, cursor, anchor);
+    return;
+}
+function parentUsesInnerHTML(parent) {
+    return isHostNode(parent) && getHostProps(parent).innerHTML != null;
+}
+function canBulkClearChildren(children) {
+    for (let child of children) {
+        if (!canBulkClearNode(child))
+            return false;
     }
-    // --- O(n + m) keyed diff with Map-based lookup ------------------------------
-    let oldChildren = curr;
-    let oldChildrenLength = currLength;
-    let remainingOldChildren = oldChildrenLength;
-    // Build key → index map for O(1) lookup: O(m)
-    let oldKeyMap = new Map();
-    for (let i = 0; i < oldChildrenLength; i++) {
-        let c = oldChildren[i];
-        if (c) {
-            c._flags = 0;
-            if (c.key != null) {
-                oldKeyMap.set(c.key, i);
-            }
+    return true;
+}
+function canBulkClearNode(node) {
+    if (isCommittedTextNode(node))
+        return true;
+    if (isCommittedHostNode(node)) {
+        if (node._mixState)
+            return false;
+        for (let child of node._children) {
+            if (!canBulkClearNode(child))
+                return false;
         }
+        return true;
     }
-    let skew = 0;
-    let newChildren = new Array(nextLength);
-    // First pass: match new children to old ones using Map lookup: O(n)
-    for (let i = 0; i < nextLength; i++) {
-        let childVNode = next[i];
-        if (!childVNode) {
-            newChildren[i] = childVNode;
+    if (isFragmentNode(node)) {
+        return canBulkClearChildren(node._children);
+    }
+    if (isCommittedComponentNode(node)) {
+        return canBulkClearNode(node._content);
+    }
+    return false;
+}
+function hasKeyedChildren(children) {
+    for (let node of children) {
+        if (node.key != null)
+            return true;
+    }
+    return false;
+}
+function warnDuplicateKeys(children) {
+    let seenKeys;
+    let duplicateKeys;
+    for (let node of children) {
+        if (node.key == null)
+            continue;
+        if (!seenKeys) {
+            seenKeys = new Set([node.key]);
             continue;
         }
-        newChildren[i] = childVNode;
-        childVNode._parent = vParent;
-        let skewedIndex = i + skew;
-        let matchingIndex = -1;
-        let key = childVNode.key;
-        let type = childVNode.type;
-        if (key != null) {
-            // O(1) Map lookup for keyed children
-            let mapIndex = oldKeyMap.get(key);
-            if (mapIndex !== undefined) {
-                let candidate = oldChildren[mapIndex];
-                let candidateFlags = candidate?._flags ?? 0;
-                if (candidate && (candidateFlags & MATCHED) === 0 && candidate.type === type) {
-                    matchingIndex = mapIndex;
-                }
-            }
+        if (seenKeys.has(node.key)) {
+            duplicateKeys ??= new Set();
+            duplicateKeys.add(node.key);
         }
         else {
-            // Non-keyed children use positional identity only - no searching
-            let searchVNode = oldChildren[skewedIndex];
-            let searchFlags = searchVNode?._flags ?? 0;
-            let available = searchVNode != null && (searchFlags & MATCHED) === 0;
-            if (available && searchVNode.key == null && type === searchVNode.type) {
-                matchingIndex = skewedIndex;
+            seenKeys.add(node.key);
+        }
+    }
+    if (duplicateKeys?.size) {
+        let quotedKeys = Array.from(duplicateKeys, (key) => `"${key}"`);
+        console.warn(`Duplicate keys detected in siblings: ${quotedKeys.join(', ')}. Keys should be unique.`);
+    }
+}
+function patchKeyedChildren(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, cursor, anchor) {
+    let matches = matchKeyedChildrenInOrder(curr, next) ??
+        matchKeyedChildrenAfterSingleRemoval(curr, next) ??
+        matchKeyedChildrenAfterPairSwap(curr, next);
+    if (!matches) {
+        warnDuplicateKeys(next);
+        matches = matchKeyedChildren(curr, next);
+    }
+    let matchAnalysis = analyzeKeyedChildMatches(curr.length, matches);
+    if (matchAnalysis.hasRemovals) {
+        let usedOldIndexes = new Uint8Array(curr.length);
+        for (let match of matches) {
+            if (match.oldIndex >= 0) {
+                usedOldIndexes[match.oldIndex] = 1;
             }
         }
-        childVNode._index = matchingIndex;
-        let matchedOldVNode = null;
-        if (matchingIndex !== -1) {
-            matchedOldVNode = oldChildren[matchingIndex];
-            remainingOldChildren--;
-            if (matchedOldVNode) {
-                matchedOldVNode._flags = (matchedOldVNode._flags ?? 0) | MATCHED;
+        for (let oldIndex = 0; oldIndex < curr.length; oldIndex++) {
+            if (usedOldIndexes[oldIndex] === 0) {
+                remove(curr[oldIndex], domParent, scheduler, styles);
             }
         }
-        // Determine whether this is a mount vs move and mark INSERT_VNODE
-        let oldDom = matchedOldVNode && findFirstDomAnchor(matchedOldVNode);
-        let isMounting = !matchedOldVNode || !oldDom;
-        if (isMounting) {
-            if (matchingIndex === -1) {
-                // Adjust skew similar to Preact when lengths differ
-                if (nextLength > oldChildrenLength) {
-                    skew--;
-                }
-                else if (nextLength < oldChildrenLength) {
-                    skew++;
+    }
+    vParent._children = next;
+    for (let index = 0; index < next.length; index++) {
+        let match = matches[index];
+        let oldNode = match.oldIndex >= 0 ? curr[match.oldIndex] : null;
+        diffVNodes(oldNode, next[index], domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
+    }
+    if (matchAnalysis.canSkipPlacement) {
+        return;
+    }
+    let stableIndexes = lisMatches(matches);
+    let stableCursor = stableIndexes.length - 1;
+    let placementAnchor = anchor ?? null;
+    for (let index = next.length - 1; index >= 0; index--) {
+        let nextNode = next[index];
+        let isStable = stableIndexes[stableCursor] === index;
+        if (isStable) {
+            stableCursor--;
+        }
+        else {
+            placeVNode(nextNode, domParent, placementAnchor);
+        }
+        placementAnchor = findFirstDomAnchor(nextNode) ?? placementAnchor;
+    }
+}
+function matchKeyedChildren(curr, next) {
+    let oldKeyMap = new Map();
+    let usedOldIndexes = new Set();
+    let unkeyedSearchStart = 0;
+    for (let index = 0; index < curr.length; index++) {
+        let key = curr[index].key;
+        if (key != null)
+            oldKeyMap.set(key, index);
+    }
+    return next.map((nextNode) => {
+        let oldIndex = -1;
+        if (nextNode.key != null) {
+            let keyedOldIndex = oldKeyMap.get(nextNode.key);
+            if (keyedOldIndex !== undefined) {
+                let oldNode = curr[keyedOldIndex];
+                if (!usedOldIndexes.has(keyedOldIndex) && oldNode.type === nextNode.type) {
+                    oldIndex = keyedOldIndex;
                 }
             }
-            childVNode._flags = (childVNode._flags ?? 0) | INSERT_VNODE;
         }
-        else if (matchingIndex !== i + skew) {
-            if (matchingIndex === i + skew - 1) {
-                skew--;
-            }
-            else if (matchingIndex === i + skew + 1) {
-                skew++;
-            }
-            else {
-                if (matchingIndex > i + skew)
-                    skew--;
-                else
-                    skew++;
-                childVNode._flags = (childVNode._flags ?? 0) | INSERT_VNODE;
+        else {
+            for (let index = unkeyedSearchStart; index < curr.length; index++) {
+                let oldNode = curr[index];
+                if (usedOldIndexes.has(index) || oldNode.key != null || oldNode.type !== nextNode.type) {
+                    continue;
+                }
+                oldIndex = index;
+                unkeyedSearchStart = index + 1;
+                break;
             }
         }
+        if (oldIndex >= 0)
+            usedOldIndexes.add(oldIndex);
+        return { oldIndex };
+    });
+}
+function matchKeyedChildrenInOrder(curr, next) {
+    let length = Math.min(curr.length, next.length);
+    let matches = [];
+    for (let index = 0; index < length; index++) {
+        let nextNode = next[index];
+        if (nextNode.key == null)
+            return null;
+        let oldNode = curr[index];
+        if (oldNode.key !== nextNode.key || oldNode.type !== nextNode.type) {
+            return null;
+        }
+        matches.push({ oldIndex: index });
     }
-    // Unmount any old children that weren't matched
-    if (remainingOldChildren) {
-        for (let i = 0; i < oldChildrenLength; i++) {
-            let oldVNode = oldChildren[i];
-            if (oldVNode && ((oldVNode._flags ?? 0) & MATCHED) === 0) {
-                remove(oldVNode, domParent, scheduler, styles);
-            }
+    for (let index = length; index < next.length; index++) {
+        if (next[index].key == null)
+            return null;
+        matches.push({ oldIndex: -1 });
+    }
+    return matches;
+}
+function matchKeyedChildrenAfterSingleRemoval(curr, next) {
+    if (curr.length !== next.length + 1)
+        return null;
+    let matches = [];
+    let oldIndex = 0;
+    let skippedOldNode = false;
+    for (let nextIndex = 0; nextIndex < next.length; nextIndex++) {
+        let nextNode = next[nextIndex];
+        if (nextNode.key == null)
+            return null;
+        let oldNode = curr[oldIndex];
+        if (oldNode.key === nextNode.key && oldNode.type === nextNode.type) {
+            matches.push({ oldIndex });
+            oldIndex++;
+            continue;
+        }
+        if (skippedOldNode)
+            return null;
+        skippedOldNode = true;
+        oldIndex++;
+        oldNode = curr[oldIndex];
+        if (oldNode.key !== nextNode.key || oldNode.type !== nextNode.type) {
+            return null;
         }
+        matches.push({ oldIndex });
+        oldIndex++;
     }
-    // Second pass: diff matched pairs and place/move DOM nodes in the correct
-    // order, similar to Preact's diffChildren + insert.
-    vParent._children = newChildren;
-    let lastPlaced = null;
-    for (let i = 0; i < nextLength; i++) {
-        let childVNode = newChildren[i];
-        if (!childVNode)
+    return matches;
+}
+function matchKeyedChildrenAfterPairSwap(curr, next) {
+    if (curr.length !== next.length)
+        return null;
+    let matches = [];
+    let firstMismatch = -1;
+    let secondMismatch = -1;
+    for (let index = 0; index < next.length; index++) {
+        let nextNode = next[index];
+        if (nextNode.key == null)
+            return null;
+        let oldNode = curr[index];
+        if (oldNode.key === nextNode.key && oldNode.type === nextNode.type) {
+            matches.push({ oldIndex: index });
             continue;
-        let idx = childVNode._index ?? -1;
-        let oldVNode = idx >= 0 ? oldChildren[idx] : null;
-        diffVNodes(oldVNode, childVNode, domParent, frame, scheduler, styles, vParent, rootTarget, anchor, cursor);
-        let shouldPlace = (childVNode._flags ?? 0) & INSERT_VNODE;
-        let firstDom = findFirstDomAnchor(childVNode);
-        let lastDom = firstDom ? findLastDomAnchor(childVNode) : null;
-        if (shouldPlace && firstDom && lastDom && firstDom.parentNode === domParent) {
-            let target;
-            if (lastPlaced === null) {
-                if (vParent._rangeStart && vParent._rangeStart.parentNode === domParent) {
-                    target = vParent._rangeStart.nextSibling;
-                }
-                else {
-                    target = domParent.firstChild;
-                }
+        }
+        if (firstMismatch === -1) {
+            firstMismatch = index;
+        }
+        else if (secondMismatch === -1) {
+            secondMismatch = index;
+        }
+        else {
+            return null;
+        }
+        matches.push({ oldIndex: -1 });
+    }
+    if (firstMismatch === -1)
+        return matches;
+    if (secondMismatch === -1)
+        return null;
+    let firstOldNode = curr[firstMismatch];
+    let secondOldNode = curr[secondMismatch];
+    let firstNextNode = next[firstMismatch];
+    let secondNextNode = next[secondMismatch];
+    if (firstOldNode.key !== secondNextNode.key ||
+        firstOldNode.type !== secondNextNode.type ||
+        secondOldNode.key !== firstNextNode.key ||
+        secondOldNode.type !== firstNextNode.type) {
+        return null;
+    }
+    matches[firstMismatch] = { oldIndex: secondMismatch };
+    matches[secondMismatch] = { oldIndex: firstMismatch };
+    return matches;
+}
+function analyzeKeyedChildMatches(currentLength, matches) {
+    let hasRemovals = matches.length !== currentLength;
+    let canSkipPlacement = true;
+    let lastOldIndex = -1;
+    let sawNewNode = false;
+    for (let match of matches) {
+        if (match.oldIndex < 0) {
+            hasRemovals = true;
+            sawNewNode = true;
+            continue;
+        }
+        if (sawNewNode || match.oldIndex < lastOldIndex) {
+            canSkipPlacement = false;
+        }
+        lastOldIndex = match.oldIndex;
+    }
+    return { hasRemovals, canSkipPlacement };
+}
+function lisMatches(matches) {
+    let predecessors = Array.from({ length: matches.length });
+    let tails = [];
+    for (let index = 0; index < matches.length; index++) {
+        let value = matches[index].oldIndex + 1;
+        if (value === 0)
+            continue;
+        let low = 0;
+        let high = tails.length;
+        while (low < high) {
+            let middle = (low + high) >> 1;
+            if (matches[tails[middle]].oldIndex + 1 < value) {
+                low = middle + 1;
             }
             else {
-                target = lastPlaced.nextSibling;
-            }
-            if (target === null && anchor)
-                target = anchor;
-            // If target lies within the range we're moving, skip the move.
-            if (target && domRangeContainsNode(firstDom, lastDom, target)) {
-                // no-op
-            }
-            else if (firstDom !== target) {
-                moveDomRange(domParent, firstDom, lastDom, target);
+                high = middle;
             }
         }
-        if (lastDom)
-            lastPlaced = lastDom;
-        // Clear internal flags for next diff
-        childVNode._flags = 0;
-        childVNode._index = undefined;
+        predecessors[index] = low > 0 ? tails[low - 1] : -1;
+        tails[low] = index;
     }
-    return;
+    let cursor = tails.at(-1) ?? -1;
+    for (let index = tails.length - 1; index >= 0; index--) {
+        tails[index] = cursor;
+        cursor = predecessors[cursor] ?? -1;
+    }
+    return tails;
+}
+function placeVNode(node, domParent, anchor) {
+    let firstDom = findFirstDomAnchor(node);
+    if (!firstDom || firstDom.parentNode !== domParent)
+        return;
+    let lastDom = findLastDomAnchor(node);
+    if (!lastDom)
+        return;
+    if (anchor && domRangeContainsNode(firstDom, lastDom, anchor))
+        return;
+    if (firstDom === anchor)
+        return;
+    moveDomRange(domParent, firstDom, lastDom, anchor);
 }
 export function findFirstDomAnchor(node) {
     if (!node)
@@ -1221,10 +1466,13 @@ function shouldDispatchInlineMixinLifecycle(node) {
     }
     return true;
 }
-export function findNextSiblingDomAnchor(curr, vParent) {
+export function findNextSiblingDomAnchor(curr) {
+    let vParent = curr._parent;
     if (!vParent || !Array.isArray(vParent._children))
         return null;
     let children = vParent._children;
+    if (children.length === 0)
+        return findNextSiblingDomAnchor(vParent);
     let idx = children.indexOf(curr);
     if (idx === -1)
         return null;
@@ -1233,6 +1481,9 @@ export function findNextSiblingDomAnchor(curr, vParent) {
         if (dom)
             return dom;
     }
+    if (isFragmentNode(vParent)) {
+        return findNextSiblingDomAnchor(vParent);
+    }
     return null;
 }
 function reclaimPersistedMixinNode(persistedNode, newNode, frame, scheduler, styles, vParent, rootTarget) {
@@ -1242,17 +1493,21 @@ function reclaimPersistedMixinNode(persistedNode, newNode, frame, scheduler, sty
     newNode._parent = vParent;
     newNode._controller = persistedNode._controller;
     newNode._mixState = persistedNode._mixState;
+    newNode._directEventState = persistedNode._directEventState;
     newNode._controlledState = persistedNode._controlledState;
     let prevProps = getHostProps(persistedNode);
     let nextProps = resolveNodeMixProps(newNode, frame, scheduler, newNode._mixState);
     if (shouldDispatchInlineMixinLifecycle(persistedNode._dom)) {
         dispatchMixinBeforeUpdate(newNode._mixState);
     }
-    diffHostProps(prevProps, nextProps, persistedNode._dom);
+    patchHostProps(prevProps, nextProps, persistedNode._dom);
+    syncDirectEventListeners(newNode);
     ensureControlledReflection(newNode, scheduler);
     syncControlledReflection(newNode, nextProps);
     diffChildren(persistedNode._children, newNode._children, persistedNode._dom, frame, scheduler, styles, newNode, rootTarget);
-    bindNodeMixRuntime(newNode, frame, scheduler, styles, true);
+    if (newNode._mixState) {
+        bindNodeMixRuntime(newNode, frame, scheduler, styles, true);
+    }
     if (shouldDispatchInlineMixinLifecycle(persistedNode._dom)) {
         scheduler.enqueueCommitPhase([
             () => dispatchMixinCommit(newNode._mixState),