@reckona/mreact-compat 0.0.169 → 0.0.170

package/dist/host-reconciler.js

@@ -172,6 +172,7 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
     }
     const childCount = children === undefined ? 1 : children.length;
     const hasKeyedChildren = children !== undefined && hasKeyedChild(children);
+    const canReuseCurrentFibersInList = !hasKeyedChildren || currentFirstChild === undefined;
     let existingByKey;
     let currentKeyed = currentFirstChild;
     let currentUnkeyed = currentFirstChild;
@@ -179,46 +180,77 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
     let previous;
     let consumed = 0;
     let skipRemainingKeyedLookup = false;
-    const usedCurrentChildren = currentFirstChild === undefined ? undefined : new Set();
+    let sequentialCurrentCursor = currentFirstChild;
+    let childListOrderChanged = false;
+    let usedCurrentChildren = currentFirstChild === undefined || hasKeyedChildren ? undefined : new Set();
+    const ensureUsedCurrentChildren = () => {
+        if (usedCurrentChildren === undefined) {
+            usedCurrentChildren = new Set();
+            let cursor = currentFirstChild;
+            while (cursor !== undefined && cursor !== sequentialCurrentCursor) {
+                usedCurrentChildren.add(cursor);
+                cursor = cursor.sibling;
+            }
+        }
+        return usedCurrentChildren;
+    };
     for (let index = 0; index < childCount; index += 1) {
         const child = children === undefined ? node : children[index];
         const key = getNodeKey(child);
         let matchedCurrent;
+        let canReuseMatchedCurrentFiber = canReuseCurrentFibersInList;
         if (key === undefined) {
+            if (hasKeyedChildren && currentUnkeyed !== undefined) {
+                childListOrderChanged = true;
+                ensureUsedCurrentChildren();
+            }
             matchedCurrent = currentUnkeyed;
         }
         else if (skipRemainingKeyedLookup) {
+            childListOrderChanged = true;
             matchedCurrent = undefined;
         }
         else if (existingByKey !== undefined) {
+            childListOrderChanged = true;
             matchedCurrent = existingByKey.get(key);
+            canReuseMatchedCurrentFiber = matchedCurrent === undefined;
         }
         else if (currentKeyed?.key === key) {
             matchedCurrent = currentKeyed;
+            canReuseMatchedCurrentFiber = true;
             currentKeyed = currentKeyed.sibling;
+            sequentialCurrentCursor = currentKeyed;
         }
         else if (children !== undefined &&
             currentKeyed?.sibling?.key === key &&
             canSkipSingleDeletedKeyedFiber(children, index, currentKeyed.sibling)) {
+            childListOrderChanged = true;
+            ensureUsedCurrentChildren();
             matchedCurrent = currentKeyed.sibling;
+            canReuseMatchedCurrentFiber = false;
             currentKeyed = currentKeyed.sibling.sibling;
         }
         else {
             if (children !== undefined &&
                 hasKeyedChildren &&
                 canSkipRemainingKeyedLookup(currentKeyed, children, index)) {
+                childListOrderChanged = true;
                 skipRemainingKeyedLookup = true;
                 currentKeyed = undefined;
             }
             else if (hasKeyedChildren) {
+                childListOrderChanged = true;
+                ensureUsedCurrentChildren();
                 existingByKey = collectExistingKeyedFibers(currentKeyed);
                 matchedCurrent = existingByKey.get(key);
+                canReuseMatchedCurrentFiber = matchedCurrent === undefined;
             }
         }
-        const previousNodes = options.previousNodes === undefined
+        const memoBailout = tryReuseDependencyFreeMemoBailout(matchedCurrent, child, runtime, options, canReuseMatchedCurrentFiber);
+        const previousNodes = memoBailout !== undefined || options.previousNodes === undefined
             ? undefined
             : options.previousNodes.slice(consumed);
-        const result = createHostFiber(parent, matchedCurrent, child, key, runtime, getReconcileChildPath(path, child, index, options), previousNodes === undefined ? options : { ...options, previousNodes });
+        const result = memoBailout ?? createHostFiber(parent, matchedCurrent, child, key, runtime, getReconcileChildPath(path, child, index, options), previousNodes === undefined ? options : { ...options, previousNodes }, canReuseMatchedCurrentFiber);
         const fiber = result.fiber;
         if (fiber === undefined) {
             if (matchedCurrent !== undefined) {
@@ -257,14 +289,21 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
         }
         previous = fiber;
     }
-    markUnusedCurrentChildrenForDeletion(parent, currentFirstChild, usedCurrentChildren);
-    parent.childListChanged = childFiberListShapeChanged(currentFirstChild, first);
+    if (usedCurrentChildren === undefined && hasKeyedChildren && currentKeyed !== undefined) {
+        markOptimizedChildrenForDeletion(parent, currentKeyed);
+    }
+    else {
+        markUnusedCurrentChildrenForDeletion(parent, currentFirstChild, usedCurrentChildren);
+    }
+    parent.childListChanged =
+        childListOrderChanged || childFiberListShapeChanged(currentFirstChild, first);
     return { fiber: first, consumed };
 }
 function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, options) {
     if (children.length === 0 ||
         currentFirstChild === undefined ||
         options.previousNodes !== undefined ||
+        !isKeyedRowHostElementCandidate(children[0]) ||
         !shouldUseDirectHostTextChild()) {
         return undefined;
     }
@@ -430,6 +469,12 @@ function createKeyedRowHostElementScratch() {
         text: "",
     };
 }
+function isKeyedRowHostElementCandidate(node) {
+    return (isReactCompatElement(node) &&
+        typeof node.type === "string" &&
+        node.key !== null &&
+        node.ref === null);
+}
 function readKeyedRowHostElement(node, row) {
     if (!isReactCompatElement(node) ||
         typeof node.type !== "string" ||
@@ -611,8 +656,8 @@ function markHostFiberEffects(fiber, current, node) {
         fiber.flags |= Update;
     }
 }
-function createHostFiber(parent, current, node, key, runtime, path, options = {}) {
-    const result = createHostFiberImpl(parent, current, node, key, runtime, path, options);
+function createHostFiber(parent, current, node, key, runtime, path, options = {}, canReuseCurrentFiber = true) {
+    const result = createHostFiberImpl(parent, current, node, key, runtime, path, options, canReuseCurrentFiber);
     if (result.fiber !== undefined) {
         if (canFinalizeNewHostFiber(result.fiber, current, node, options)) {
             result.fiber.flags |= Placement;
@@ -633,7 +678,7 @@ function canFinalizeNewHostFiber(fiber, current, node, options) {
         node.ref === null &&
         typeof node.type === "string");
 }
-function createHostFiberImpl(parent, current, node, key, runtime, path, options = {}) {
+function createHostFiberImpl(parent, current, node, key, runtime, path, options = {}, canReuseCurrentFiber = true) {
     if (node === null || node === undefined || typeof node === "boolean") {
         return { fiber: undefined, consumed: 0 };
     }
@@ -667,6 +712,10 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         fiber.child = childResult.fiber;
         return { fiber, consumed: childResult.consumed };
     }
+    const memoBailout = tryReuseMemoBailout(current, node, runtime, path, options, canReuseCurrentFiber);
+    if (memoBailout !== undefined) {
+        return memoBailout;
+    }
     if (!isReactCompatElement(node)) {
         if (isReactCompatPortal(node)) {
             return createPortalFiber(parent, current, node, key, runtime, path, options);
@@ -774,7 +823,7 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         fiber.type = forwardRefType;
         const rendered = renderWithRootRuntime(runtime, path, () => forwardRefType.render(node.props, node.ref), forwardRefType);
         fiber.memoizedState = getDevToolsHookState(runtime, path);
-        const childOptions = withHydrationComponentStack(options, getComponentName(forwardRefType.render));
+        const childOptions = getHydrationChildOptions(options, forwardRefType.render);
         const childResult = reconcileHostChild(fiber, current?.tag === "forward-ref" ? current.child : undefined, rendered, runtime, `${path}.forwardRef`, childOptions);
         fiber.child = childResult.fiber;
         return { fiber, consumed: childResult.consumed };
@@ -785,22 +834,29 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         }
         const memoType = node.type;
         const memoPath = `${path}.memo`;
-        const previousMemoState = current?.tag === "memo"
-            ? current.memoizedState
+        const previousMemoFiber = current?.tag === "memo" && current.type === memoType ? current : undefined;
+        const previousMemoState = previousMemoFiber !== undefined
+            ? previousMemoFiber.memoizedState
             : undefined;
-        const fiber = current?.tag === "memo" && current.type === memoType
-            ? createWorkInProgress(current, node.props)
-            : createFiber("memo", node.props, key);
-        fiber.type = memoType;
-        if (previousMemoState !== undefined &&
-            !hasDirtyInstance(runtime, previousMemoState.instanceKeys, memoPath) &&
-            !hasUnflushedMountEffectInstance(runtime, previousMemoState.instanceKeys) &&
+        if (previousMemoFiber !== undefined &&
+            previousMemoState !== undefined &&
+            !(memoStateNeedsDirtyInstanceCheck(previousMemoState) &&
+                hasDirtyInstance(runtime, previousMemoState.instanceKeys, memoPath)) &&
+            !(memoStateNeedsEffectCheck(previousMemoState) &&
+                hasUnflushedMountEffectInstance(runtime, previousMemoState.instanceKeys)) &&
             areMemoPropsEqual(memoType, previousMemoState.props, node.props)) {
-            markActiveInstanceKeys(runtime, previousMemoState.instanceKeys);
-            fiber.child = getSkippedChild(current);
+            const fiber = getMemoBailoutFiber(runtime, previousMemoFiber, node.props, previousMemoState, canReuseCurrentFiber);
+            fiber.child = getSkippedChild(previousMemoFiber);
             fiber.memoizedState = previousMemoState;
-            return { fiber, consumed: options.previousNodes?.length ?? 0 };
+            return {
+                fiber,
+                consumed: options.previousNodes?.length ?? 0,
+            };
         }
+        const fiber = previousMemoFiber !== undefined
+            ? createWorkInProgress(previousMemoFiber, node.props)
+            : createFiber("memo", node.props, key);
+        fiber.type = memoType;
         const renderedElement = {
             ...node,
             type: memoType.type,
@@ -812,9 +868,14 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
             fiber.child.sibling = undefined;
             bubbleHostChild(fiber, fiber.child);
         }
+        const instanceKeys = collectInstanceKeys(runtime, memoPath);
+        const hasClassDescendant = hasClassComponentDescendant(fiber.child);
         fiber.memoizedState = {
-            props: { ...node.props },
-            instanceKeys: collectInstanceKeys(runtime, memoPath),
+            props: node.props,
+            instanceKeys,
+            hasDirtyInstanceDependencies: hasDirtyInstanceDependencies(runtime, instanceKeys) || hasClassDescendant,
+            hasUnflushedEffectDependencies: hasUnflushedEffectDependencies(runtime, instanceKeys),
+            hasRetainedInstanceDependencies: hasRetainedInstanceDependencies(runtime, instanceKeys) || hasClassDescendant,
         };
         return { fiber, consumed: childResult.consumed };
     }
@@ -891,7 +952,7 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
             fiber.child = getSkippedChild(current);
             return { fiber, consumed: options.previousNodes?.length ?? 0 };
         }
-        const childOptions = withHydrationComponentStack(options, getComponentName(classType));
+        const childOptions = getHydrationChildOptions(options, classType);
         try {
             const childResult = reconcileHostChild(fiber, current?.tag === "class-component" ? current.child : undefined, rendered.node, runtime, `${path}.class`, childOptions);
             fiber.child = childResult.fiber;
@@ -939,7 +1000,7 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         }
         const rendered = renderWithRootRuntime(runtime, path, () => node.type(node.props), node.type);
         fiber.memoizedState = getDevToolsHookState(runtime, path);
-        const childOptions = withHydrationComponentStack(options, getComponentName(node.type));
+        const childOptions = getHydrationChildOptions(options, node.type);
         const childResult = reconcileHostChild(fiber, current?.tag === "function-component" ? current.child : undefined, rendered, runtime, `${path}.0`, childOptions);
         fiber.child = childResult.fiber;
         const instanceKeys = collectInstanceKeys(runtime, path);
@@ -1323,13 +1384,27 @@ function collectCommittedHostNodes(fiber) {
     }
     return nodes;
 }
+function hasCommittedHostNode(fiber) {
+    if ((fiber.tag === "host-component" || fiber.tag === "host-text") &&
+        fiber.stateNode instanceof Node) {
+        return true;
+    }
+    let child = fiber.child;
+    while (child !== undefined) {
+        if (hasCommittedHostNode(child)) {
+            return true;
+        }
+        child = child.sibling;
+    }
+    return false;
+}
 function getSkippedChild(current) {
     const child = current?.child;
     const alternateChild = current?.alternate?.child;
     if (child !== undefined &&
         alternateChild !== undefined &&
-        collectCommittedHostNodes(child).length === 0 &&
-        collectCommittedHostNodes(alternateChild).length > 0) {
+        !hasCommittedHostNode(child) &&
+        hasCommittedHostNode(alternateChild)) {
         return alternateChild;
     }
     return child;
@@ -1923,6 +1998,59 @@ function hasPendingAsyncChild(fiber) {
     }
     return false;
 }
+function tryReuseMemoBailout(current, node, runtime, path, options, canReuseCurrentFiber = true) {
+    if (current?.tag !== "memo" ||
+        runtime === undefined ||
+        !isReactCompatElement(node) ||
+        node.type !== current.type ||
+        !isMemoType(node.type)) {
+        return undefined;
+    }
+    const previousMemoState = current.memoizedState;
+    const memoPath = `${path}.memo`;
+    if (previousMemoState === undefined ||
+        (memoStateNeedsDirtyInstanceCheck(previousMemoState) &&
+            hasDirtyInstance(runtime, previousMemoState.instanceKeys, memoPath)) ||
+        (memoStateNeedsEffectCheck(previousMemoState) &&
+            hasUnflushedMountEffectInstance(runtime, previousMemoState.instanceKeys)) ||
+        !areMemoPropsEqual(node.type, previousMemoState.props, node.props)) {
+        return undefined;
+    }
+    const fiber = getMemoBailoutFiber(runtime, current, node.props, previousMemoState, canReuseCurrentFiber);
+    fiber.type = node.type;
+    fiber.child = getSkippedChild(current);
+    fiber.memoizedState = previousMemoState;
+    return {
+        fiber,
+        consumed: options.previousNodes?.length ?? 0,
+    };
+}
+function tryReuseDependencyFreeMemoBailout(current, node, runtime, options, canReuseCurrentFiber) {
+    if (options.previousNodes !== undefined ||
+        current?.tag !== "memo" ||
+        runtime === undefined ||
+        !isReactCompatElement(node) ||
+        node.type !== current.type ||
+        !isMemoType(node.type)) {
+        return undefined;
+    }
+    const previousMemoState = current.memoizedState;
+    if (previousMemoState === undefined ||
+        previousMemoState.hasDirtyInstanceDependencies !== false ||
+        previousMemoState.hasUnflushedEffectDependencies !== false ||
+        previousMemoState.hasRetainedInstanceDependencies !== false ||
+        !areMemoPropsEqual(node.type, previousMemoState.props, node.props)) {
+        return undefined;
+    }
+    const fiber = getMemoBailoutFiber(runtime, current, node.props, previousMemoState, canReuseCurrentFiber);
+    fiber.type = node.type;
+    fiber.child = getSkippedChild(current);
+    fiber.memoizedState = previousMemoState;
+    return {
+        fiber,
+        consumed: 0,
+    };
+}
 function isPendingLazyFiber(fiber) {
     if (fiber.tag !== "lazy" || !isLazyType(fiber.type)) {
         return false;
@@ -2082,6 +2210,11 @@ function getRootCommitPath(options) {
 function joinCommitPath(path, segment) {
     return path === SKIP_COMMIT_PATH ? "" : joinPath(path, segment);
 }
+function getHydrationChildOptions(options, component) {
+    return options.hydration === undefined
+        ? options
+        : withHydrationComponentStack(options, getComponentName(component));
+}
 function getComponentName(component) {
     return component.name === "" ? "Anonymous" : component.name;
 }
@@ -2111,6 +2244,94 @@ function markActiveInstanceKeys(runtime, keys) {
         runtime.activeInstanceKeys?.add(key);
     }
 }
+function memoStateNeedsDirtyInstanceCheck(state) {
+    return state.hasDirtyInstanceDependencies !== false;
+}
+function memoStateNeedsEffectCheck(state) {
+    return state.hasUnflushedEffectDependencies !== false;
+}
+function memoStateNeedsActiveInstanceMark(state) {
+    return state.hasRetainedInstanceDependencies !== false;
+}
+function getMemoBailoutFiber(runtime, current, pendingProps, state, canReuseCurrentFiber) {
+    if (canReuseCurrentFiber && canReuseMemoBailoutFiber(current, state)) {
+        current.pendingProps = pendingProps;
+        current.flags = NoFlags;
+        current.subtreeFlags = NoFlags;
+        current.childListChanged = false;
+        current.subtreeChildListChanged = false;
+        current.hostChildListChanged = false;
+        return current;
+    }
+    const fiber = createWorkInProgress(current, pendingProps);
+    if (memoStateNeedsActiveInstanceMark(state)) {
+        markActiveInstanceKeys(runtime, state.instanceKeys);
+    }
+    return fiber;
+}
+function canReuseMemoBailoutFiber(current, state) {
+    return (state.hasRetainedInstanceDependencies === false &&
+        current.hasRefSubtree !== true &&
+        current.hydrateExisting !== true);
+}
+function hasDirtyInstanceDependencies(runtime, keys) {
+    for (const key of keys) {
+        const instance = runtime.instances.get(key);
+        if (instance === undefined || instance.contextDependencies !== undefined) {
+            return true;
+        }
+        if (instance.hooks?.some(isDirtyCapableHookSlot) === true) {
+            return true;
+        }
+    }
+    return false;
+}
+function hasRetainedInstanceDependencies(runtime, keys) {
+    for (const key of keys) {
+        const instance = runtime.instances.get(key);
+        if (instance === undefined || instance.contextDependencies !== undefined) {
+            return true;
+        }
+        if (instance.hooks !== undefined && instance.hooks.length > 0) {
+            return true;
+        }
+    }
+    return false;
+}
+function isDirtyCapableHookSlot(slot) {
+    if (slot === undefined) {
+        return false;
+    }
+    return (slot.kind !== "ref" &&
+        slot.kind !== "memo" &&
+        slot.kind !== "debug" &&
+        slot.kind !== "effect");
+}
+function hasUnflushedEffectDependencies(runtime, keys) {
+    for (const key of keys) {
+        const instance = runtime.instances.get(key);
+        if (instance === undefined) {
+            return true;
+        }
+        if (instance.hooks?.some((slot) => slot?.kind === "effect") === true) {
+            return true;
+        }
+    }
+    return false;
+}
+function hasClassComponentDescendant(fiber) {
+    let cursor = fiber;
+    while (cursor !== undefined) {
+        if (cursor.tag === "class-component") {
+            return true;
+        }
+        if (hasClassComponentDescendant(cursor.child)) {
+            return true;
+        }
+        cursor = cursor.sibling;
+    }
+    return false;
+}
 function hasDirtyInstance(runtime, keys, prefix) {
     if (runtime === undefined) {
         return false;
@@ -2118,16 +2339,27 @@ function hasDirtyInstance(runtime, keys, prefix) {
     if (hasDirtyClassUpdate(runtime, keys, prefix)) {
         return true;
     }
+    if (keys.length === 0) {
+        return false;
+    }
     if (keys.some((key) => runtime.instances.get(key)?.dirty === true)) {
         return true;
     }
     if (prefix === undefined) {
         return false;
     }
-    for (const [key, instance] of runtime.instances) {
-        if ((key === prefix || key.startsWith(`${prefix}.`)) &&
-            instance.dirty === true) {
-            return true;
+    // Resolve dirty descendants through the prefix index instead of scanning
+    // every runtime instance. The previous full-map scan made memo/function
+    // bailout O(total instances) per node, i.e. O(n^2) for large keyed lists
+    // (js-framework-benchmark update-every-10th / select). The index is the same
+    // source of truth used by collectRuntimeInstanceKeys.
+    const keysUnderPrefix = runtime.instanceKeysByPrefix.get(prefix);
+    if (keysUnderPrefix !== undefined) {
+        for (const key of keysUnderPrefix) {
+            if (runtime.instances.get(key)?.dirty ===
+                true) {
+                return true;
+            }
         }
     }
     return false;