@reckona/mreact-compat 0.0.164 → 0.0.165

package/dist/host-reconciler.js

@@ -3,8 +3,8 @@ import { consumerContext, isReactCompatConsumer, isReactCompatProvider, renderWi
 import { applyPostChildFormProps, applyProps } from "./dom-props.js";
 import { syncChildNodes, syncOwnedChildNodes, syncScopedChildNodes } from "./dom-children.js";
 import { setLogicalEventParent } from "./host-event-binder.js";
-import { NoFlags, Placement, Update } from "./fiber-flags.js";
-import { createHostElement, hostElementMatches, isHostElement, namespaceForHostChildren, namespaceForHostElement, } from "./dom-host-rules.js";
+import { ChildDeletion, NoFlags, Placement, Update } from "./fiber-flags.js";
+import { createHostElement, hostElementMatches, isDomHostElement, isHostElement, namespaceForHostChildren, namespaceForHostElement, } from "./dom-host-rules.js";
 import { createFiber, createWorkInProgress } from "./fiber.js";
 import { renderWithRootRuntime, renderWithProfiler, renderWithStrictModeMemoCapture, renderStrictModeReplay, runWithHostCommit, restoreRuntimeSnapshot, takeRuntimeSnapshot, getDevToolsHookState, collectRuntimeInstanceKeys, hasContextDependency, hasChangedContextDependency, subscribeReactiveTextBinding, } from "./hooks.js";
 import { isThenable } from "./thenable.js";
@@ -12,6 +12,7 @@ import { hasDirtyClassUpdate, isClassComponentType, recoverClassComponentError,
 import { areMemoPropsEqual, getPendingProps, shallowEqual } from "./prop-comparison.js";
 import { reportElementTextMismatch, reportExtraHydrationNodes, reportHydrationNodeTypeMismatch, reportMissingHydrationNode, reportReactSuspenseServerError, reportRecoverable, withHydrationComponentStack, } from "./hydration.js";
 const committedPortalContainers = new Set();
+const pendingHostRefUpdates = [];
 const SKIP_COMMIT_PATH = "\0";
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 let suspensePrimaryRenderDepth = 0;
@@ -93,35 +94,55 @@ export function renderHydratingHostFiberRoot(root, element, runtime, scope, opti
 }
 export function commitHostFiberRoot(root, finishedWork, options = {}) {
     runWithHostCommit(() => {
+        let committed = false;
         try {
             committedPortalContainers.clear();
+            pendingHostRefUpdates.length = 0;
             const commitPath = getRootCommitPath(options);
             if (!hasChildListMutation(finishedWork)) {
                 commitHostDirtyChildren(finishedWork.child, root.container, root.container, commitPath, options);
+                committed = true;
                 return;
             }
             if (!finishedWork.childListChanged &&
                 finishedWork.subtreeChildListChanged &&
                 commitHostKeyedChildListMutation(finishedWork.child, root.container, root.container, commitPath, options)) {
+                committed = true;
                 return;
             }
             const nodes = commitHostChildren(finishedWork.child, root.container, root.container, commitPath, options);
             syncChildNodes(root.container, nodes);
+            committed = true;
         }
         finally {
+            if (committed) {
+                flushPendingHostRefUpdates();
+            }
+            else {
+                pendingHostRefUpdates.length = 0;
+            }
             committedPortalContainers.clear();
         }
     });
 }
 export function commitHydratingHostFiberRoot(root, finishedWork, scope, options = {}) {
     runWithHostCommit(() => {
+        let committed = false;
         try {
             committedPortalContainers.clear();
+            pendingHostRefUpdates.length = 0;
             const eventRoot = root.container;
             const nodes = commitHostChildren(finishedWork.child, scope.parent, eventRoot, "", options);
             syncScopedChildNodes(scope.parent, scope.before, scope.after, nodes);
+            committed = true;
         }
         finally {
+            if (committed) {
+                flushPendingHostRefUpdates();
+            }
+            else {
+                pendingHostRefUpdates.length = 0;
+            }
             committedPortalContainers.clear();
         }
     });
@@ -137,6 +158,9 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
     parent.subtreeChildListChanged = false;
     if (node === null || node === undefined || typeof node === "boolean") {
         parent.childListChanged = currentFirstChild !== undefined;
+        if (currentFirstChild !== undefined) {
+            markOptimizedChildrenForDeletion(parent, currentFirstChild);
+        }
         return { fiber: undefined, consumed: 0 };
     }
     const children = Array.isArray(node) ? node : undefined;
@@ -155,6 +179,7 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
     let previous;
     let consumed = 0;
     let skipRemainingKeyedLookup = false;
+    const usedCurrentChildren = currentFirstChild === undefined ? undefined : new Set();
     for (let index = 0; index < childCount; index += 1) {
         const child = children === undefined ? node : children[index];
         const key = getNodeKey(child);
@@ -196,8 +221,18 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
         const result = createHostFiber(parent, matchedCurrent, child, key, runtime, getReconcileChildPath(path, child, index, options), previousNodes === undefined ? options : { ...options, previousNodes });
         const fiber = result.fiber;
         if (fiber === undefined) {
+            if (matchedCurrent !== undefined) {
+                usedCurrentChildren?.add(matchedCurrent);
+                markOptimizedChildForDeletion(parent, matchedCurrent);
+            }
             continue;
         }
+        if (matchedCurrent !== undefined) {
+            usedCurrentChildren?.add(matchedCurrent);
+            if (fiber !== matchedCurrent && fiber.alternate !== matchedCurrent) {
+                markOptimizedChildForDeletion(parent, matchedCurrent);
+            }
+        }
         if (key === undefined) {
             currentUnkeyed = currentUnkeyed?.sibling;
         }
@@ -222,6 +257,7 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
         }
         previous = fiber;
     }
+    markUnusedCurrentChildrenForDeletion(parent, currentFirstChild, usedCurrentChildren);
     parent.childListChanged = childFiberListShapeChanged(currentFirstChild, first);
     return { fiber: first, consumed };
 }
@@ -240,6 +276,7 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
     let subtreeFlags = NoFlags;
     let subtreeChildListChanged = false;
     let hasRefSubtree = false;
+    let appendSuffix;
     const canReuseUnchangedRows = hasSameKeyOrderPrefix(currentFirstChild, children);
     const row = createKeyedRowHostElementScratch();
     for (let index = 0; index < children.length; index += 1) {
@@ -248,12 +285,14 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
             return undefined;
         }
         let matchedCurrent;
+        let matchedByAppendSuffix = false;
         if (skipRemainingKeyedLookup) {
             matchedCurrent = undefined;
         }
         else if (currentKeyed === undefined) {
             listShapeChanged = true;
             skipRemainingKeyedLookup = true;
+            matchedByAppendSuffix = true;
             matchedCurrent = undefined;
         }
         else if (currentKeyed?.key === row.key) {
@@ -262,12 +301,16 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
         }
         else if (currentKeyed?.sibling?.key === row.key &&
             canSkipSingleDeletedKeyedFiber(children, index, currentKeyed.sibling)) {
+            const deleted = currentKeyed;
+            const matched = currentKeyed.sibling;
             listShapeChanged = true;
-            matchedCurrent = currentKeyed.sibling;
-            currentKeyed = currentKeyed.sibling.sibling;
+            markOptimizedChildForDeletion(parent, deleted);
+            matchedCurrent = matched;
+            currentKeyed = matched.sibling;
         }
         else if (canSkipRemainingKeyedLookup(currentKeyed, children, index)) {
             listShapeChanged = true;
+            markOptimizedChildrenForDeletion(parent, currentKeyed);
             skipRemainingKeyedLookup = true;
             currentKeyed = undefined;
             matchedCurrent = undefined;
@@ -279,6 +322,9 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
             ? createKeyedRowHostFiber(parent, undefined, row, options)
             : (canReuseUnchangedRows ? getReusableKeyedRowHostFiber(matchedCurrent, row) : undefined) ??
                 createKeyedRowHostFiber(parent, matchedCurrent, row, options);
+        if (matchedByAppendSuffix && appendSuffix === undefined) {
+            appendSuffix = { fiber, index };
+        }
         if (first === undefined) {
             first = fiber;
         }
@@ -302,13 +348,41 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
     }
     if (currentKeyed !== undefined) {
         listShapeChanged = true;
+        markOptimizedChildrenForDeletion(parent, currentKeyed);
     }
     parent.hasRefSubtree = hasRefSubtree;
     parent.subtreeFlags = subtreeFlags;
     parent.subtreeChildListChanged = subtreeChildListChanged;
     parent.childListChanged = listShapeChanged;
+    if (appendSuffix !== undefined && canStoreAppendSuffixCommitHint(parent)) {
+        parent.memoizedState = appendSuffix;
+    }
     return { fiber: first, consumed: 0 };
 }
+function canStoreAppendSuffixCommitHint(parent) {
+    return (parent.tag === "fragment" ||
+        parent.tag === "host-component" ||
+        parent.tag === "host-root");
+}
+function markOptimizedChildForDeletion(parent, _child) {
+    parent.flags |= ChildDeletion;
+}
+function markOptimizedChildrenForDeletion(parent, _firstChild) {
+    parent.flags |= ChildDeletion;
+}
+function markUnusedCurrentChildrenForDeletion(parent, firstChild, used) {
+    if (firstChild === undefined || used === undefined) {
+        return;
+    }
+    let cursor = firstChild;
+    while (cursor !== undefined) {
+        if (!used.has(cursor)) {
+            parent.flags |= ChildDeletion;
+            return;
+        }
+        cursor = cursor.sibling;
+    }
+}
 function hasSameKeyOrderPrefix(currentFirstChild, children) {
     let current = currentFirstChild;
     for (let index = 0; index < children.length; index += 1) {
@@ -579,7 +653,7 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
                 ? existing
                 : current?.tag === "host-text" && current.stateNode instanceof Text
                     ? current.stateNode
-                    : getDocumentRef(options).createTextNode("");
+                    : createHostTextNode(getDocumentRef(options));
         if (existing instanceof Text && existing.data !== String(node)) {
             reportRecoverable(options, "text", path, new Error("Hydration text mismatch."));
         }
@@ -1005,13 +1079,12 @@ function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
             !propsAreChildrenOnly &&
             fiber.hydrateExisting !== true &&
             isRowTextOnlyUpdate(fiber.memoizedProps, props);
-        if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+        if (isDomHostElement(element) && !propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
             applyProps(element, props, path, {
                 ...options,
                 eventRoot,
                 preserveHydrationAttributes: fiber.hydrateExisting,
             });
-            applyChangedRef(previousProps?.ref, props.ref, element);
         }
         if (directTextChild !== undefined) {
             const text = syncDirectHostTextChild(element, directTextChild);
@@ -1021,24 +1094,45 @@ function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
             fiber.childListChanged ||
             fiber.subtreeChildListChanged) {
             const childNodes = commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
-            if (!(childNodes.length === 0 && committedPortalContainers.has(element)) &&
-                !shouldPreserveContentEditableChildren(element, props, childNodes)) {
+            if (!(isDomHostElement(element) && childNodes.length === 0 && committedPortalContainers.has(element)) &&
+                !(isDomHostElement(element) && shouldPreserveContentEditableChildren(element, props, childNodes))) {
                 syncChildNodes(element, childNodes);
             }
         }
         else if (fiber.subtreeFlags !== NoFlags) {
             commitHostDirtyChildren(fiber.child, element, eventRoot, `${path}.c`, options);
         }
-        applyPostChildFormProps(element, props, previousProps);
+        if (isDomHostElement(element)) {
+            applyPostChildFormProps(element, props, previousProps);
+        }
+        applyChangedRef(previousProps?.ref, props.ref, element);
         fiber.memoizedProps = props;
         finishCommittedFiber(fiber);
         return;
     }
     if (fiber.tag === "portal") {
         const container = fiber.stateNode;
-        if (container instanceof Element) {
-            setLogicalEventParent(container, parent);
-            commitHostDirtyChildren(fiber.child, container, container, `${path}.portal`, options);
+        if (isPortalHostContainer(container)) {
+            if (container instanceof Element) {
+                setLogicalEventParent(container, parent);
+            }
+            const portalEventRoot = container instanceof Element && eventRoot !== container && eventRoot.contains(container)
+                ? eventRoot
+                : container instanceof Element
+                    ? container
+                    : eventRoot;
+            const portalOptions = withPortalDocumentRef(options, container);
+            if (fiber.childListChanged ||
+                fiber.subtreeChildListChanged ||
+                (fiber.subtreeFlags & Placement) !== NoFlags) {
+                const childNodes = commitHostChildren(fiber.child, container, portalEventRoot, `${path}.portal`, portalOptions);
+                const previousNodes = committedHostNodesFromState(fiber.alternate?.memoizedState);
+                syncOwnedChildNodes(container, previousNodes, childNodes);
+                fiber.memoizedState = childNodes;
+            }
+            else {
+                commitHostDirtyChildren(fiber.child, container, portalEventRoot, `${path}.portal`, portalOptions);
+            }
         }
         fiber.memoizedProps = fiber.pendingProps;
         finishCommittedFiber(fiber);
@@ -1080,6 +1174,10 @@ function commitHostKeyedChildListMutation(fiber, parent, eventRoot, path, option
     return committed;
 }
 function commitHostKeyedChildListMutationFiber(fiber, parent, eventRoot, path, options = {}) {
+    if (fiber.tag === "portal") {
+        commitHostDirtyFiber(fiber, parent, eventRoot, path, options);
+        return true;
+    }
     if (fiber.childListChanged) {
         const mutationParent = fiber.tag === "host-component" && isHostElement(fiber.stateNode)
             ? fiber.stateNode
@@ -1119,10 +1217,14 @@ function commitHostKeyedChildListMutationFiber(fiber, parent, eventRoot, path, o
     return true;
 }
 function commitHostAppendSuffix(fiber, parent, eventRoot, path, options) {
-    const append = getAppendSuffix(fiber.alternate?.child, fiber.child);
+    const appendHint = readAppendSuffixCommitHint(fiber.memoizedState);
+    const append = appendHint ?? getAppendSuffix(fiber.alternate?.child, fiber.child);
     if (append === undefined) {
         return false;
     }
+    if (appendHint !== undefined) {
+        fiber.memoizedState = undefined;
+    }
     let cursor = append.fiber;
     let index = append.index;
     while (cursor !== undefined) {
@@ -1134,6 +1236,15 @@ function commitHostAppendSuffix(fiber, parent, eventRoot, path, options) {
     }
     return true;
 }
+function readAppendSuffixCommitHint(value) {
+    if (typeof value !== "object" || value === null) {
+        return undefined;
+    }
+    const candidate = value;
+    return candidate.fiber !== undefined && typeof candidate.index === "number"
+        ? { fiber: candidate.fiber, index: candidate.index }
+        : undefined;
+}
 function commitHostSingleRemoval(fiber, parent) {
     const removed = getSingleRemovedFiber(fiber.alternate?.child, fiber.child);
     if (removed === undefined) {
@@ -1276,13 +1387,12 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
             !propsAreChildrenOnly &&
             fiber.hydrateExisting !== true &&
             isRowTextOnlyUpdate(fiber.memoizedProps, props);
-        if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+        if (isDomHostElement(element) && !propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
             applyProps(element, props, path, {
                 ...options,
                 eventRoot,
                 preserveHydrationAttributes: fiber.hydrateExisting,
             });
-            applyChangedRef(previousProps?.ref, props.ref, element);
         }
         if (directTextChild !== undefined) {
             const text = syncDirectHostTextChild(element, directTextChild);
@@ -1294,15 +1404,18 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
             fiber.hydrateExisting === true ||
             (fiber.subtreeFlags & Placement) !== NoFlags) {
             const childNodes = commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
-            if (!(childNodes.length === 0 && committedPortalContainers.has(element)) &&
-                !shouldPreserveContentEditableChildren(element, props, childNodes)) {
+            if (!(isDomHostElement(element) && childNodes.length === 0 && committedPortalContainers.has(element)) &&
+                !(isDomHostElement(element) && shouldPreserveContentEditableChildren(element, props, childNodes))) {
                 syncChildNodes(element, childNodes);
             }
         }
         else if (fiber.subtreeFlags !== NoFlags) {
             commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
         }
-        applyPostChildFormProps(element, props, previousProps);
+        if (isDomHostElement(element)) {
+            applyPostChildFormProps(element, props, previousProps);
+        }
+        applyChangedRef(previousProps?.ref, props.ref, element);
         fiber.memoizedProps = props;
         finishCommittedFiber(fiber);
         return [element];
@@ -1381,16 +1494,21 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
     }
     if (fiber.tag === "portal") {
         const container = fiber.stateNode;
-        if (!(container instanceof Element)) {
+        if (!isPortalHostContainer(container)) {
             return [];
         }
-        setLogicalEventParent(container, parent);
-        committedPortalContainers.add(container);
-        const portalEventRoot = eventRoot !== container && eventRoot.contains(container) ? eventRoot : container;
-        const childNodes = commitHostChildren(fiber.child, container, portalEventRoot, `${path}.portal`, options);
-        const previousNodes = Array.isArray(fiber.alternate?.memoizedState)
-            ? fiber.alternate.memoizedState.filter((node) => node instanceof Node)
-            : [];
+        if (container instanceof Element) {
+            setLogicalEventParent(container, parent);
+            committedPortalContainers.add(container);
+        }
+        const portalEventRoot = container instanceof Element && eventRoot !== container && eventRoot.contains(container)
+            ? eventRoot
+            : container instanceof Element
+                ? container
+                : eventRoot;
+        const portalOptions = withPortalDocumentRef(options, container);
+        const childNodes = commitHostChildren(fiber.child, container, portalEventRoot, `${path}.portal`, portalOptions);
+        const previousNodes = committedHostNodesFromState(fiber.alternate?.memoizedState);
         syncOwnedChildNodes(container, previousNodes, childNodes);
         fiber.memoizedState = childNodes;
         fiber.memoizedProps = fiber.pendingProps;
@@ -1907,6 +2025,12 @@ function normalizeChildren(node) {
 function getDocumentRef(options) {
     return options.documentRef ?? document;
 }
+function createHostTextNode(documentRef) {
+    if ("createTextNode" in documentRef && typeof documentRef.createTextNode === "function") {
+        return documentRef.createTextNode("");
+    }
+    return document.createTextNode("");
+}
 function collectExistingKeyedFibers(firstChild) {
     const keyed = new Map();
     let cursor = firstChild;
@@ -2029,7 +2153,47 @@ function applyChangedRef(previousRef, nextRef, node) {
     if (Object.is(previousRef, nextRef)) {
         return;
     }
-    applyRef(previousRef, null);
-    applyRef(nextRef, node);
+    queueHostRefUpdate(previousRef, null);
+    queueHostRefUpdate(nextRef, node);
+}
+function queueHostRefUpdate(ref, node) {
+    if (ref === null || ref === undefined) {
+        return;
+    }
+    pendingHostRefUpdates.push({ ref, node });
+}
+function flushPendingHostRefUpdates() {
+    const pending = pendingHostRefUpdates.splice(0);
+    for (const { ref, node } of pending) {
+        applyRef(ref, node);
+    }
+}
+function isPortalHostContainer(value) {
+    if (value instanceof Element) {
+        return true;
+    }
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    const candidate = value;
+    return (typeof candidate.appendChild === "function" &&
+        typeof candidate.insertBefore === "function" &&
+        typeof candidate.removeChild === "function" &&
+        typeof candidate.ownerDocument?.createElement === "function");
+}
+function withPortalDocumentRef(options, container) {
+    const ownerDocument = container.ownerDocument;
+    if (typeof ownerDocument === "object" &&
+        ownerDocument !== null &&
+        typeof ownerDocument.createElement === "function") {
+        return {
+            ...options,
+            documentRef: ownerDocument,
+        };
+    }
+    return options;
+}
+function committedHostNodesFromState(state) {
+    return Array.isArray(state) ? state : [];
 }
 //# sourceMappingURL=host-reconciler.js.map