@reckona/mreact-compat 0.0.91 → 0.0.93

package/dist/host-reconciler.js

@@ -1,14 +1,19 @@
-import { Activity, ERROR_BOUNDARY_TYPE, FORWARD_REF_TYPE, Fragment, LAZY_TYPE, MEMO_TYPE, Profiler, STRICT_MODE_TYPE, Suspense, SuspenseList, isReactCompatElement, isReactCompatPortal, } from "./element.js";
-import { isReactCompatConsumer, isReactCompatProvider, renderWithContextProvider, useContext, } from "./context.js";
+import { Activity, ERROR_BOUNDARY_TYPE, FORWARD_REF_TYPE, Fragment, HOST_OWN_PROPS_META, LAZY_TYPE, MEMO_TYPE, Profiler, STRICT_MODE_TYPE, Suspense, SuspenseList, isReactCompatElement, isReactCompatPortal, } from "./element.js";
+import { consumerContext, isReactCompatConsumer, isReactCompatProvider, renderWithContextProvider, useContext, } from "./context.js";
 import { applyPostChildFormProps, applyProps } from "./dom-props.js";
-import { syncChildNodes, syncScopedChildNodes } from "./dom-children.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 { createFiber, createWorkInProgress } from "./fiber.js";
-import { renderWithRootRuntime, renderWithProfiler, renderWithStrictMode, restoreRuntimeSnapshot, takeRuntimeSnapshot, getDevToolsHookState, } from "./hooks.js";
+import { renderWithRootRuntime, renderWithProfiler, renderWithStrictModeMemoCapture, renderStrictModeReplay, runWithHostCommit, restoreRuntimeSnapshot, takeRuntimeSnapshot, getDevToolsHookState, hasContextDependency, hasChangedContextDependency, } from "./hooks.js";
 import { isThenable } from "./thenable.js";
-import { isClassComponentType, recoverClassComponentError, renderClassComponentWithRuntime, } from "./class-component.js";
-import { areMemoPropsEqual, getPendingProps } from "./prop-comparison.js";
+import { hasDirtyClassUpdate, isClassComponentType, recoverClassComponentError, renderClassComponentWithRuntime, } from "./class-component.js";
+import { areMemoPropsEqual, getPendingProps, shallowEqual } from "./prop-comparison.js";
 import { reportElementTextMismatch, reportExtraHydrationNodes, reportHydrationNodeTypeMismatch, reportMissingHydrationNode, reportReactSuspenseServerError, reportRecoverable, withHydrationComponentStack, } from "./hydration.js";
+const committedPortalContainers = new Set();
+const SKIP_COMMIT_PATH = "\0";
+const hasOwnProperty = Object.prototype.hasOwnProperty;
 let suspensePrimaryRenderDepth = 0;
 export function canRenderHostFiber(node) {
     if (node === null ||
@@ -66,9 +71,11 @@ export function canRenderHostFiber(node) {
 }
 export function renderHostFiberRoot(root, element, runtime, options = {}) {
     const workInProgress = createWorkInProgress(root.current, { children: element });
-    const result = reconcileHostChild(workInProgress, root.current.child, element, runtime, options.previousNodes === undefined ? "0" : "", options);
+    const rootDocument = root.container.ownerDocument;
+    const result = reconcileHostChild(workInProgress, root.current.child, element, runtime, options.previousNodes === undefined ? "0" : "", { ...options, documentRef: options.documentRef ?? rootDocument });
     workInProgress.child = result.fiber;
     workInProgress.memoizedProps = { children: element };
+    root.refCleanupKnown = true;
     return workInProgress;
 }
 export function renderHydratingHostFiberRoot(root, element, runtime, scope, options = {}) {
@@ -85,35 +92,111 @@ export function renderHydratingHostFiberRoot(root, element, runtime, scope, opti
     });
 }
 export function commitHostFiberRoot(root, finishedWork, options = {}) {
-    const nodes = commitHostChildren(finishedWork.child, root.container, root.container, "0", options);
-    syncChildNodes(root.container, nodes);
+    runWithHostCommit(() => {
+        try {
+            committedPortalContainers.clear();
+            const commitPath = getRootCommitPath(options);
+            if (!hasChildListMutation(finishedWork)) {
+                commitHostDirtyChildren(finishedWork.child, root.container, root.container, commitPath, options);
+                return;
+            }
+            if (!finishedWork.childListChanged &&
+                finishedWork.subtreeChildListChanged &&
+                commitHostKeyedChildListMutation(finishedWork.child, root.container, root.container, commitPath, options)) {
+                return;
+            }
+            const nodes = commitHostChildren(finishedWork.child, root.container, root.container, commitPath, options);
+            syncChildNodes(root.container, nodes);
+        }
+        finally {
+            committedPortalContainers.clear();
+        }
+    });
 }
 export function commitHydratingHostFiberRoot(root, finishedWork, scope, options = {}) {
-    const eventRoot = root.container;
-    const nodes = commitHostChildren(finishedWork.child, scope.parent, eventRoot, "", options);
-    syncScopedChildNodes(scope.parent, scope.before, scope.after, nodes);
+    runWithHostCommit(() => {
+        try {
+            committedPortalContainers.clear();
+            const eventRoot = root.container;
+            const nodes = commitHostChildren(finishedWork.child, scope.parent, eventRoot, "", options);
+            syncScopedChildNodes(scope.parent, scope.before, scope.after, nodes);
+        }
+        finally {
+            committedPortalContainers.clear();
+        }
+    });
     if (options.consumeResumeMarkers === true) {
         scope.before?.parentNode?.removeChild(scope.before);
         scope.after?.parentNode?.removeChild(scope.after);
     }
 }
 function reconcileHostChild(parent, currentFirstChild, node, runtime, path, options = {}) {
-    const children = normalizeChildren(node);
-    const existingByKey = collectExistingKeyedFibers(currentFirstChild);
+    resetFiberRefSubtree(parent);
+    parent.subtreeFlags = NoFlags;
+    parent.childListChanged = false;
+    parent.subtreeChildListChanged = false;
+    if (node === null || node === undefined || typeof node === "boolean") {
+        parent.childListChanged = currentFirstChild !== undefined;
+        return { fiber: undefined, consumed: 0 };
+    }
+    const children = Array.isArray(node) ? node : undefined;
+    const rowResult = children === undefined
+        ? undefined
+        : reconcileKeyedRowHostChildren(parent, currentFirstChild, children, options);
+    if (rowResult !== undefined) {
+        return rowResult;
+    }
+    const childCount = children === undefined ? 1 : children.length;
+    const hasKeyedChildren = children !== undefined && hasKeyedChild(children);
+    let existingByKey;
+    let currentKeyed = currentFirstChild;
     let currentUnkeyed = currentFirstChild;
     let first;
     let previous;
     let consumed = 0;
-    children.forEach((child, index) => {
+    let skipRemainingKeyedLookup = false;
+    for (let index = 0; index < childCount; index += 1) {
+        const child = children === undefined ? node : children[index];
         const key = getNodeKey(child);
-        const matchedCurrent = key === undefined ? currentUnkeyed : existingByKey.get(key);
+        let matchedCurrent;
+        if (key === undefined) {
+            matchedCurrent = currentUnkeyed;
+        }
+        else if (skipRemainingKeyedLookup) {
+            matchedCurrent = undefined;
+        }
+        else if (existingByKey !== undefined) {
+            matchedCurrent = existingByKey.get(key);
+        }
+        else if (currentKeyed?.key === key) {
+            matchedCurrent = currentKeyed;
+            currentKeyed = currentKeyed.sibling;
+        }
+        else if (children !== undefined &&
+            currentKeyed?.sibling?.key === key &&
+            canSkipSingleDeletedKeyedFiber(children, index, currentKeyed.sibling)) {
+            matchedCurrent = currentKeyed.sibling;
+            currentKeyed = currentKeyed.sibling.sibling;
+        }
+        else {
+            if (children !== undefined &&
+                hasKeyedChildren &&
+                canSkipRemainingKeyedLookup(currentKeyed, children, index)) {
+                skipRemainingKeyedLookup = true;
+                currentKeyed = undefined;
+            }
+            else if (hasKeyedChildren) {
+                existingByKey = collectExistingKeyedFibers(currentKeyed);
+                matchedCurrent = existingByKey.get(key);
+            }
+        }
         const previousNodes = options.previousNodes === undefined
             ? undefined
             : options.previousNodes.slice(consumed);
-        const result = createHostFiber(parent, matchedCurrent, child, key, runtime, joinPath(path, getNodePathSegment(child, index)), previousNodes === undefined ? options : { ...options, previousNodes });
+        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) {
-            return;
+            continue;
         }
         if (key === undefined) {
             currentUnkeyed = currentUnkeyed?.sibling;
@@ -127,7 +210,7 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
         }
         fiber.return = parent;
         fiber.sibling = undefined;
-        fiber.pendingProps = getPendingProps(child);
+        bubbleHostChild(parent, fiber);
         if (fiber.tag !== "memo" &&
             fiber.tag !== "function-component" &&
             fiber.tag !== "forward-ref" &&
@@ -138,10 +221,361 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
             fiber.memoizedState = index;
         }
         previous = fiber;
-    });
+    }
+    parent.childListChanged = childFiberListShapeChanged(currentFirstChild, first);
     return { fiber: first, consumed };
 }
+function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, options) {
+    if (children.length === 0 ||
+        currentFirstChild === undefined ||
+        options.previousNodes !== undefined ||
+        !shouldUseDirectHostTextChild()) {
+        return undefined;
+    }
+    let currentKeyed = currentFirstChild;
+    let first;
+    let previous;
+    let listShapeChanged = currentFirstChild === undefined;
+    let skipRemainingKeyedLookup = false;
+    let subtreeFlags = NoFlags;
+    let subtreeChildListChanged = false;
+    let hasRefSubtree = false;
+    const currentSiblingCount = countFiberSiblings(currentFirstChild);
+    const canReuseUnchangedRows = currentSiblingCount === children.length ||
+        isKeyedAppendOnly(currentFirstChild, children, currentSiblingCount);
+    const row = createKeyedRowHostElementScratch();
+    for (let index = 0; index < children.length; index += 1) {
+        const child = children[index];
+        if (!readKeyedRowHostElement(child, row)) {
+            return undefined;
+        }
+        let matchedCurrent;
+        if (skipRemainingKeyedLookup) {
+            matchedCurrent = undefined;
+        }
+        else if (currentKeyed === undefined) {
+            listShapeChanged = true;
+            skipRemainingKeyedLookup = true;
+            matchedCurrent = undefined;
+        }
+        else if (currentKeyed?.key === row.key) {
+            matchedCurrent = currentKeyed;
+            currentKeyed = currentKeyed.sibling;
+        }
+        else if (currentKeyed?.sibling?.key === row.key &&
+            canSkipSingleDeletedKeyedFiber(children, index, currentKeyed.sibling)) {
+            listShapeChanged = true;
+            matchedCurrent = currentKeyed.sibling;
+            currentKeyed = currentKeyed.sibling.sibling;
+        }
+        else if (canSkipRemainingKeyedLookup(currentKeyed, children, index)) {
+            listShapeChanged = true;
+            skipRemainingKeyedLookup = true;
+            currentKeyed = undefined;
+            matchedCurrent = undefined;
+        }
+        else {
+            return undefined;
+        }
+        const fiber = matchedCurrent === undefined
+            ? createKeyedRowHostFiber(parent, undefined, row, options)
+            : (canReuseUnchangedRows ? getReusableKeyedRowHostFiber(matchedCurrent, row) : undefined) ??
+                createKeyedRowHostFiber(parent, matchedCurrent, row, options);
+        if (first === undefined) {
+            first = fiber;
+        }
+        else if (previous !== undefined) {
+            previous.sibling = fiber;
+        }
+        fiber.return = parent;
+        fiber.sibling = undefined;
+        if (fiber.hasRefSubtree) {
+            hasRefSubtree = true;
+        }
+        subtreeFlags |= fiber.flags | fiber.subtreeFlags;
+        subtreeChildListChanged =
+            subtreeChildListChanged ||
+                fiber.childListChanged ||
+                fiber.subtreeChildListChanged;
+        if (fiber.memoizedState === undefined) {
+            fiber.memoizedState = index;
+        }
+        previous = fiber;
+    }
+    if (currentKeyed !== undefined) {
+        listShapeChanged = true;
+    }
+    parent.hasRefSubtree = hasRefSubtree;
+    parent.subtreeFlags = subtreeFlags;
+    parent.subtreeChildListChanged = subtreeChildListChanged;
+    parent.childListChanged = listShapeChanged;
+    return { fiber: first, consumed: 0 };
+}
+function countFiberSiblings(first) {
+    let count = 0;
+    let cursor = first;
+    while (cursor !== undefined) {
+        count += 1;
+        cursor = cursor.sibling;
+    }
+    return count;
+}
+function isKeyedAppendOnly(currentFirstChild, children, currentSiblingCount) {
+    if (children.length <= currentSiblingCount) {
+        return false;
+    }
+    let current = currentFirstChild;
+    for (let index = 0; index < currentSiblingCount; index += 1) {
+        if (current === undefined || current.key !== getNodeKey(children[index])) {
+            return false;
+        }
+        current = current.sibling;
+    }
+    return current === undefined;
+}
+function getReusableKeyedRowHostFiber(current, row) {
+    if (current.tag !== "host-component" ||
+        current.type !== row.type ||
+        current.hydrateExisting ||
+        current.child !== undefined ||
+        !isHostElement(current.stateNode)) {
+        return undefined;
+    }
+    const previousProps = current.memoizedProps ?? current.pendingProps;
+    if (typeof previousProps !== "object" || previousProps === null) {
+        return undefined;
+    }
+    const previousRecord = previousProps;
+    if (getHostOwnPropsMeta(previousRecord) !== row.meta ||
+        getDirectHostTextChild(previousRecord.children) !== row.text) {
+        return undefined;
+    }
+    current.pendingProps = row.element.props;
+    current.flags = NoFlags;
+    current.subtreeFlags = NoFlags;
+    current.childListChanged = false;
+    current.subtreeChildListChanged = false;
+    current.hostChildListChanged = false;
+    current.hasRefSubtree = false;
+    return current;
+}
+function createKeyedRowHostElementScratch() {
+    return {
+        element: undefined,
+        key: "",
+        type: "",
+        meta: 0,
+        text: "",
+    };
+}
+function readKeyedRowHostElement(node, row) {
+    if (!isReactCompatElement(node) ||
+        typeof node.type !== "string" ||
+        node.key === null ||
+        node.ref !== null) {
+        return false;
+    }
+    const props = node.props;
+    const meta = getHostOwnPropsMeta(props);
+    const text = meta === undefined ? undefined : getDirectHostTextChild(props.children);
+    if (meta === undefined || text === undefined) {
+        return false;
+    }
+    row.element = node;
+    row.key = node.key;
+    row.type = node.type;
+    row.meta = meta;
+    row.text = text;
+    return true;
+}
+function createKeyedRowHostFiber(parent, current, row, options) {
+    const node = row.element;
+    const elementNamespace = namespaceForHostElement(options.namespace ?? "html", row.type);
+    const fiber = current?.tag === "host-component" && current.type === row.type
+        ? createWorkInProgress(current, node.props)
+        : createFiber("host-component", node.props, row.key);
+    fiber.type = row.type;
+    fiber.stateNode =
+        current?.tag === "host-component" &&
+            current.type === row.type &&
+            isHostElement(current.stateNode) &&
+            hostElementMatches(current.stateNode, row.type, elementNamespace)
+            ? current.stateNode
+            : createHostElement(getDocumentRef(options), row.type, options.namespace ?? "html");
+    fiber.child = undefined;
+    fiber.pendingProps = node.props;
+    fiber.hostChildListChanged = false;
+    fiber.hasRefSubtree = false;
+    if (current === undefined || fiber.alternate !== current) {
+        fiber.flags |= Placement;
+        fiber.hostChildListChanged = true;
+        return fiber;
+    }
+    const previousProps = current.memoizedProps ?? current.pendingProps;
+    const previousMeta = typeof previousProps === "object" && previousProps !== null
+        ? getHostOwnPropsMeta(previousProps)
+        : undefined;
+    const previousText = getDirectHostTextChild(hostFiberChildrenProp(previousProps));
+    if (previousMeta !== row.meta || previousText !== row.text) {
+        fiber.flags |= Update;
+    }
+    return fiber;
+}
+function canReuseStaticHostSubtree(fiber) {
+    let cursor = fiber;
+    while (cursor !== undefined) {
+        if (cursor.tag !== "host-component" &&
+            cursor.tag !== "host-text" &&
+            cursor.tag !== "fragment" &&
+            cursor.tag !== "strict-mode") {
+            return false;
+        }
+        if (cursor.child !== undefined && !canReuseStaticHostSubtree(cursor.child)) {
+            return false;
+        }
+        cursor = cursor.sibling;
+    }
+    return true;
+}
+function canSkipSingleDeletedKeyedFiber(children, index, matched) {
+    const nextKey = index + 1 < children.length ? getNodeKey(children[index + 1]) : undefined;
+    const afterMatched = matched.sibling;
+    return nextKey === undefined ? afterMatched === undefined : afterMatched?.key === nextKey;
+}
+function canSkipRemainingKeyedLookup(current, children, startIndex) {
+    const currentRange = readContiguousNumericFiberKeyRange(current);
+    if (currentRange === undefined) {
+        return false;
+    }
+    const nextRange = readContiguousNumericNodeKeyRange(children, startIndex);
+    if (nextRange === undefined) {
+        return false;
+    }
+    return (currentRange.end < nextRange.start ||
+        nextRange.end < currentRange.start);
+}
+function readContiguousNumericFiberKeyRange(fiber) {
+    let cursor = fiber;
+    let start;
+    let previous;
+    while (cursor !== undefined) {
+        const value = parseNumericKey(cursor.key);
+        if (value === undefined || (previous !== undefined && value !== previous + 1)) {
+            return undefined;
+        }
+        start ??= value;
+        previous = value;
+        cursor = cursor.sibling;
+    }
+    return start === undefined || previous === undefined
+        ? undefined
+        : { start, end: previous };
+}
+function readContiguousNumericNodeKeyRange(children, startIndex) {
+    let start;
+    let previous;
+    for (let index = startIndex; index < children.length; index += 1) {
+        const value = parseNumericKey(getNodeKey(children[index]));
+        if (value === undefined || (previous !== undefined && value !== previous + 1)) {
+            return undefined;
+        }
+        start ??= value;
+        previous = value;
+    }
+    return start === undefined || previous === undefined
+        ? undefined
+        : { start, end: previous };
+}
+function parseNumericKey(key) {
+    if (key === undefined || key.length === 0) {
+        return undefined;
+    }
+    const value = Number(key);
+    return Number.isSafeInteger(value) && String(value) === key ? value : undefined;
+}
+function childFiberListShapeChanged(current, next) {
+    let currentCursor = current;
+    let nextCursor = next;
+    while (currentCursor !== undefined && nextCursor !== undefined) {
+        const isSameSlot = nextCursor === currentCursor ||
+            nextCursor.alternate === currentCursor;
+        if (!isSameSlot ||
+            currentCursor.tag !== nextCursor.tag ||
+            currentCursor.type !== nextCursor.type ||
+            currentCursor.key !== nextCursor.key) {
+            return true;
+        }
+        currentCursor = currentCursor.sibling;
+        nextCursor = nextCursor.sibling;
+    }
+    return currentCursor !== undefined || nextCursor !== undefined;
+}
+function bubbleHostChild(parent, child) {
+    if (child.hasRefSubtree) {
+        parent.hasRefSubtree = true;
+    }
+    parent.subtreeFlags |= child.flags | child.subtreeFlags;
+    parent.subtreeChildListChanged =
+        parent.subtreeChildListChanged ||
+            child.childListChanged ||
+            child.subtreeChildListChanged;
+}
+function resetFiberRefSubtree(fiber) {
+    fiber.hasRefSubtree = false;
+}
+function includeNodeRef(fiber, node) {
+    fiber.hasRefSubtree =
+        fiber.hasRefSubtree ||
+            (isReactCompatElement(node) && node.ref !== null);
+}
+function markHostFiberEffects(fiber, current, node) {
+    if (current === undefined || fiber.alternate !== current) {
+        fiber.flags |= Placement;
+        fiber.hostChildListChanged = true;
+        return;
+    }
+    if (fiber.tag === "host-text") {
+        if (!Object.is(current.memoizedProps ?? current.pendingProps, fiber.pendingProps)) {
+            fiber.flags |= Update;
+        }
+        return;
+    }
+    if (fiber.tag !== "host-component") {
+        return;
+    }
+    const previousProps = current.memoizedProps ?? current.pendingProps;
+    const nextProps = fiber.pendingProps;
+    fiber.hostChildListChanged = hostChildListChanged(previousProps, nextProps);
+    if (!hostOwnPropsEqual(previousProps, nextProps) || hostDirectTextChildChanged(previousProps, nextProps)) {
+        fiber.flags |= Update;
+    }
+    if (isReactCompatElement(node) && node.ref !== null) {
+        fiber.flags |= Update;
+    }
+}
 function createHostFiber(parent, current, node, key, runtime, path, options = {}) {
+    const result = createHostFiberImpl(parent, current, node, key, runtime, path, options);
+    if (result.fiber !== undefined) {
+        if (canFinalizeNewHostFiber(result.fiber, current, node, options)) {
+            result.fiber.flags |= Placement;
+            result.fiber.hostChildListChanged = true;
+            return result;
+        }
+        result.fiber.pendingProps = getPendingProps(node);
+        includeNodeRef(result.fiber, node);
+        markHostFiberEffects(result.fiber, current, node);
+    }
+    return result;
+}
+function canFinalizeNewHostFiber(fiber, current, node, options) {
+    return (current === undefined &&
+        options.previousNodes === undefined &&
+        fiber.tag === "host-component" &&
+        isReactCompatElement(node) &&
+        node.ref === null &&
+        typeof node.type === "string");
+}
+function createHostFiberImpl(parent, current, node, key, runtime, path, options = {}) {
     if (node === null || node === undefined || typeof node === "boolean") {
         return { fiber: undefined, consumed: 0 };
     }
@@ -161,7 +595,7 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
                 ? existing
                 : current?.tag === "host-text" && current.stateNode instanceof Text
                     ? current.stateNode
-                    : document.createTextNode("");
+                    : getDocumentRef(options).createTextNode("");
         if (existing instanceof Text && existing.data !== String(node)) {
             reportRecoverable(options, "text", path, new Error("Hydration text mismatch."));
         }
@@ -267,7 +701,7 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
         const render = typeof children === "function"
             ? children
             : () => null;
-        const childResult = reconcileHostChild(fiber, current?.tag === "context-consumer" ? current.child : undefined, render(useContext(node.type.context)), runtime, `${path}.consumer`, options);
+        const childResult = reconcileHostChild(fiber, current?.tag === "context-consumer" ? current.child : undefined, render(useContext(consumerContext(node.type))), runtime, `${path}.consumer`, options);
         fiber.child = childResult.fiber;
         return { fiber, consumed: childResult.consumed };
     }
@@ -280,7 +714,7 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
             ? createWorkInProgress(current, node.props)
             : createFiber("forward-ref", node.props, key);
         fiber.type = forwardRefType;
-        const rendered = renderWithRootRuntime(runtime, path, () => forwardRefType.render(node.props, node.ref));
+        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 childResult = reconcileHostChild(fiber, current?.tag === "forward-ref" ? current.child : undefined, rendered, runtime, `${path}.forwardRef`, childOptions);
@@ -301,7 +735,8 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
             : createFiber("memo", node.props, key);
         fiber.type = memoType;
         if (previousMemoState !== undefined &&
-            !hasDirtyInstance(runtime, previousMemoState.instanceKeys) &&
+            !hasDirtyInstance(runtime, previousMemoState.instanceKeys, memoPath) &&
+            !hasUnflushedMountEffectInstance(runtime, previousMemoState.instanceKeys) &&
             areMemoPropsEqual(memoType, previousMemoState.props, node.props)) {
             markActiveInstanceKeys(runtime, previousMemoState.instanceKeys);
             fiber.child = current?.child;
@@ -314,6 +749,11 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
         };
         const childResult = createHostFiber(fiber, current?.tag === "memo" ? current.child : undefined, renderedElement, key, runtime, memoPath, options);
         fiber.child = childResult.fiber;
+        if (fiber.child !== undefined) {
+            fiber.child.return = fiber;
+            fiber.child.sibling = undefined;
+            bubbleHostChild(fiber, fiber.child);
+        }
         fiber.memoizedState = {
             props: { ...node.props },
             instanceKeys: collectInstanceKeys(runtime, memoPath),
@@ -336,6 +776,11 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
             };
             const childResult = createHostFiber(fiber, current?.tag === "lazy" ? current.child : undefined, renderedElement, key, runtime, `${path}.lazy`, options);
             fiber.child = childResult.fiber;
+            if (fiber.child !== undefined) {
+                fiber.child.return = fiber;
+                fiber.child.sibling = undefined;
+                bubbleHostChild(fiber, fiber.child);
+            }
             return { fiber, consumed: childResult.consumed };
         }
         if (lazyType.status === "rejected") {
@@ -371,7 +816,16 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
             ? createWorkInProgress(current, node.props)
             : createFiber("class-component", node.props, key);
         fiber.type = classType;
-        const rendered = renderClassComponentWithRuntime(classType, node.props, runtime, path);
+        const previousClassChildKeys = collectInstanceKeys(runtime, `${path}.class`);
+        const currentClassInstance = current?.tag === "class-component" && current.type === classType
+            ? current.stateNode
+            : undefined;
+        const rendered = renderClassComponentWithRuntime(classType, node.props, runtime, path, {
+            ...(currentClassInstance === undefined
+                ? {}
+                : { currentInstance: currentClassInstance }),
+            hasDirtyDescendant: hasDirtyInstance(runtime, previousClassChildKeys, `${path}.class`),
+        });
         applyRef(node.ref, rendered.kind === "skip" ? current?.stateNode : rendered.instance);
         if (rendered.kind === "skip") {
             fiber.child = current?.child;
@@ -397,31 +851,62 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
         if (runtime === undefined) {
             return { fiber: undefined, consumed: 0 };
         }
+        const previousFunctionState = current?.tag === "function-component"
+            ? current.stateNode
+            : undefined;
         const fiber = current?.tag === "function-component" && current.type === node.type
             ? createWorkInProgress(current, node.props)
             : createFiber("function-component", node.props, key);
         fiber.type = node.type;
-        const rendered = renderWithRootRuntime(runtime, path, () => node.type(node.props));
+        const canReuseSameElement = previousFunctionState !== undefined &&
+            previousFunctionState.hasContextDependencies !== true &&
+            previousFunctionState.element === node;
+        const canReuseExternalStoreSnapshot = previousFunctionState !== undefined &&
+            runtime.externalStoreUpdate &&
+            shallowEqual(previousFunctionState.props, node.props) &&
+            !hasChangedContextDependency(runtime, previousFunctionState.instanceKeys);
+        if (runtime.strictReplayDepth === 0 &&
+            previousFunctionState !== undefined &&
+            (canReuseSameElement || canReuseExternalStoreSnapshot) &&
+            !hasDirtyInstance(runtime, previousFunctionState.instanceKeys, path) &&
+            !hasUnflushedMountEffectInstance(runtime, previousFunctionState.instanceKeys) &&
+            !hasPendingAsyncChild(current?.child)) {
+            markActiveInstanceKeys(runtime, previousFunctionState.instanceKeys);
+            fiber.child = current?.child;
+            fiber.memoizedState = current?.memoizedState;
+            fiber.stateNode = previousFunctionState;
+            return { fiber, consumed: options.previousNodes?.length ?? 0 };
+        }
+        const rendered = renderWithRootRuntime(runtime, path, () => node.type(node.props), node.type);
         fiber.memoizedState = getDevToolsHookState(runtime, path);
         const childOptions = withHydrationComponentStack(options, getComponentName(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);
+        fiber.stateNode = {
+            element: node,
+            props: { ...node.props },
+            instanceKeys,
+            hasContextDependencies: hasContextDependency(runtime, instanceKeys),
+        };
         return { fiber, consumed: childResult.consumed };
     }
     if (typeof node.type !== "string") {
         return { fiber: undefined, consumed: 0 };
     }
+    const elementNamespace = namespaceForHostElement(options.namespace ?? "html", node.type);
+    const childNamespace = namespaceForHostChildren(elementNamespace, node.type);
     const fiber = current?.tag === "host-component" && current.type === node.type
         ? createWorkInProgress(current, node.props)
         : createFiber("host-component", node.props, key);
     const existing = options.previousNodes?.[0];
-    const existingElement = existing instanceof HTMLElement ? existing : undefined;
+    const existingElement = isHostElement(existing) ? existing : undefined;
     const tagMatches = existingElement !== undefined &&
-        existingElement.tagName.toLowerCase() === node.type;
+        hostElementMatches(existingElement, node.type, elementNamespace);
     if (existing === undefined && options.previousNodes !== undefined) {
         reportMissingHydrationNode(options, path);
     }
-    else if (existing !== undefined && !(existing instanceof HTMLElement)) {
+    else if (existing !== undefined && !isHostElement(existing)) {
         reportHydrationNodeTypeMismatch(options, path, `<${node.type}>`, existing);
     }
     if (existingElement !== undefined && !tagMatches) {
@@ -434,16 +919,40 @@ function createHostFiber(parent, current, node, key, runtime, path, options = {}
             ? existingElement
             : current?.tag === "host-component" &&
                 current.type === node.type &&
-                current.stateNode instanceof HTMLElement
+                isHostElement(current.stateNode) &&
+                hostElementMatches(current.stateNode, node.type, elementNamespace)
                 ? current.stateNode
-                : document.createElement(node.type);
+                : createHostElement(getDocumentRef(options), node.type, options.namespace ?? "html");
     fiber.hydrateExisting = tagMatches && options.previousNodes !== undefined;
     const previousChildNodes = tagMatches && existingElement !== undefined
         ? Array.from(existingElement.childNodes)
         : undefined;
-    const childResult = reconcileHostChild(fiber, current?.tag === "host-component" ? current.child : undefined, node.props.children, runtime, `${path}.c`, previousChildNodes === undefined
-        ? options
-        : { ...options, previousNodes: previousChildNodes });
+    const directTextChild = shouldUseDirectHostTextChild() && previousChildNodes === undefined
+        ? getDirectHostTextChild(node.props.children)
+        : undefined;
+    if (previousChildNodes === undefined &&
+        current?.tag === "host-component" &&
+        current.type === node.type &&
+        Object.is(hostFiberChildrenProp(current.memoizedProps), node.props.children) &&
+        !hasDirtyInstance(runtime, [], `${path}.c`) &&
+        canReuseStaticHostSubtree(current.child)) {
+        fiber.child = current.child;
+        if (fiber.child !== undefined) {
+            fiber.child.return = fiber;
+        }
+        parent.child ??= fiber;
+        return { fiber, consumed: existing === undefined ? 0 : 1 };
+    }
+    if (directTextChild !== undefined) {
+        fiber.child = undefined;
+        parent.child ??= fiber;
+        return { fiber, consumed: existing === undefined ? 0 : 1 };
+    }
+    const childResult = reconcileHostChild(fiber, current?.tag === "host-component" ? current.child : undefined, node.props.children, runtime, `${path}.c`, {
+        ...options,
+        namespace: childNamespace,
+        ...(previousChildNodes === undefined ? {} : { previousNodes: previousChildNodes }),
+    });
     fiber.child = childResult.fiber;
     if (previousChildNodes !== undefined) {
         reportExtraHydrationNodes(options, `${path}.c`, previousChildNodes, childResult.consumed);
@@ -461,86 +970,416 @@ function commitHostChildren(fiber, parent, eventRoot, path, options = {}) {
     let cursor = fiber;
     let index = 0;
     while (cursor !== undefined) {
-        nodes.push(...commitHostFiber(cursor, parent, eventRoot, joinPath(path, String(index)), options));
+        for (const node of commitHostFiber(cursor, parent, eventRoot, joinCommitPath(path, String(index)), options)) {
+            nodes.push(node);
+        }
         cursor = cursor.sibling;
         index += 1;
     }
     return nodes;
 }
+function commitHostDirtyChildren(fiber, parent, eventRoot, path, options = {}) {
+    let cursor = fiber;
+    let index = 0;
+    while (cursor !== undefined) {
+        if (hasHostCommitWork(cursor)) {
+            commitHostDirtyFiber(cursor, parent, eventRoot, joinCommitPath(path, String(index)), options);
+        }
+        cursor = cursor.sibling;
+        index += 1;
+    }
+}
+function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
+    if (fiber.tag === "host-text") {
+        commitHostFiber(fiber, parent, eventRoot, path, options);
+        return;
+    }
+    if (fiber.tag === "host-component") {
+        const element = fiber.stateNode;
+        if (!isHostElement(element)) {
+            finishCommittedFiber(fiber);
+            return;
+        }
+        const props = fiber.pendingProps;
+        const propsAreUnchanged = fiber.hydrateExisting !== true &&
+            hostPropsEqual(fiber.memoizedProps, props);
+        const propsAreChildrenOnly = fiber.hydrateExisting !== true &&
+            hostPropsAreChildrenOnly(fiber.memoizedProps) &&
+            hostPropsAreChildrenOnly(props);
+        const textOnlyRowUpdate = fiber.hydrateExisting !== true &&
+            isRowTextOnlyUpdate(fiber.memoizedProps, props);
+        if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+            applyProps(element, props, path, {
+                ...options,
+                eventRoot,
+                preserveHydrationAttributes: fiber.hydrateExisting,
+            });
+            applyRef(props.ref, element);
+        }
+        const directTextChild = fiber.child === undefined && fiber.hydrateExisting !== true
+            ? getDirectHostTextChild(props.children)
+            : undefined;
+        if (directTextChild !== undefined) {
+            syncDirectHostTextChild(element, directTextChild);
+        }
+        else if (fiber.subtreeFlags !== NoFlags) {
+            commitHostDirtyChildren(fiber.child, element, eventRoot, `${path}.c`, options);
+        }
+        if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+            applyPostChildFormProps(element, props);
+        }
+        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);
+        }
+        fiber.memoizedProps = fiber.pendingProps;
+        finishCommittedFiber(fiber);
+        return;
+    }
+    if (fiber.subtreeFlags !== NoFlags) {
+        commitHostDirtyChildren(fiber.child, parent, eventRoot, path, options);
+    }
+    fiber.memoizedProps = fiber.pendingProps;
+    finishCommittedFiber(fiber);
+}
+function hasHostCommitWork(fiber) {
+    return (fiber.flags !== NoFlags ||
+        fiber.subtreeFlags !== NoFlags ||
+        fiber.hostChildListChanged ||
+        fiber.childListChanged ||
+        fiber.subtreeChildListChanged ||
+        fiber.hydrateExisting);
+}
+function commitHostKeyedChildListMutation(fiber, parent, eventRoot, path, options = {}) {
+    let cursor = fiber;
+    let index = 0;
+    let committed = false;
+    while (cursor !== undefined) {
+        if (!hasHostCommitWork(cursor)) {
+            cursor = cursor.sibling;
+            index += 1;
+            continue;
+        }
+        const childPath = joinCommitPath(path, String(index));
+        const didCommit = commitHostKeyedChildListMutationFiber(cursor, parent, eventRoot, childPath, options);
+        if (!didCommit) {
+            return false;
+        }
+        committed = true;
+        cursor = cursor.sibling;
+        index += 1;
+    }
+    return committed;
+}
+function commitHostKeyedChildListMutationFiber(fiber, parent, eventRoot, path, options = {}) {
+    if (fiber.childListChanged) {
+        const mutationParent = fiber.tag === "host-component" && isHostElement(fiber.stateNode)
+            ? fiber.stateNode
+            : parent;
+        if (fiber.tag === "host-component" && !isHostElement(fiber.stateNode)) {
+            return false;
+        }
+        if (commitHostAppendSuffix(fiber, mutationParent, eventRoot, path, options)) {
+            finishHostPassthroughFiber(fiber);
+            return true;
+        }
+        if (commitHostSingleRemoval(fiber, mutationParent)) {
+            finishHostPassthroughFiber(fiber);
+            return true;
+        }
+        return false;
+    }
+    if (fiber.subtreeChildListChanged) {
+        if (fiber.tag === "host-component") {
+            const element = fiber.stateNode;
+            if (!isHostElement(element)) {
+                return false;
+            }
+            if (!commitHostKeyedChildListMutation(fiber.child, element, eventRoot, `${path}.c`, options)) {
+                return false;
+            }
+            finishHostPassthroughFiber(fiber);
+            return true;
+        }
+        if (!commitHostKeyedChildListMutation(fiber.child, parent, eventRoot, path, options)) {
+            return false;
+        }
+        finishHostPassthroughFiber(fiber);
+        return true;
+    }
+    commitHostDirtyFiber(fiber, parent, eventRoot, path, options);
+    return true;
+}
+function commitHostAppendSuffix(fiber, parent, eventRoot, path, options) {
+    const append = getPlacementAppendSuffix(fiber.child) ?? getAppendSuffix(fiber.alternate?.child, fiber.child);
+    if (append === undefined) {
+        return false;
+    }
+    let cursor = append.fiber;
+    let index = append.index;
+    while (cursor !== undefined) {
+        for (const node of commitHostFiber(cursor, parent, eventRoot, joinCommitPath(path, String(index)), options)) {
+            parent.appendChild(node);
+        }
+        cursor = cursor.sibling;
+        index += 1;
+    }
+    return true;
+}
+function getPlacementAppendSuffix(next) {
+    let nextCursor = next;
+    let index = 0;
+    while (nextCursor !== undefined) {
+        if ((nextCursor.flags & Placement) !== NoFlags) {
+            if (index === 0) {
+                return undefined;
+            }
+            let appendCursor = nextCursor;
+            while (appendCursor !== undefined) {
+                if ((appendCursor.flags & Placement) === NoFlags) {
+                    return undefined;
+                }
+                appendCursor = appendCursor.sibling;
+            }
+            return { fiber: nextCursor, index };
+        }
+        if (hasHostCommitWork(nextCursor)) {
+            return undefined;
+        }
+        nextCursor = nextCursor.sibling;
+        index += 1;
+    }
+    return undefined;
+}
+function commitHostSingleRemoval(fiber, parent) {
+    const removed = getSingleRemovedFiber(fiber.alternate?.child, fiber.child);
+    if (removed === undefined) {
+        return false;
+    }
+    let removedAny = false;
+    for (const node of collectCommittedHostNodes(removed)) {
+        if (node.parentNode !== parent) {
+            return false;
+        }
+        parent.removeChild(node);
+        removedAny = true;
+    }
+    return removedAny;
+}
+function getAppendSuffix(current, next) {
+    let currentCursor = current;
+    let nextCursor = next;
+    let index = 0;
+    while (currentCursor !== undefined && nextCursor !== undefined) {
+        if (!isSameFiberSlot(currentCursor, nextCursor) || hasHostCommitWork(nextCursor)) {
+            return undefined;
+        }
+        currentCursor = currentCursor.sibling;
+        nextCursor = nextCursor.sibling;
+        index += 1;
+    }
+    if (currentCursor !== undefined || nextCursor === undefined) {
+        return undefined;
+    }
+    return { fiber: nextCursor, index };
+}
+function getSingleRemovedFiber(current, next) {
+    let currentCursor = current;
+    let nextCursor = next;
+    while (currentCursor !== undefined && nextCursor !== undefined) {
+        if (!isSameFiberSlot(currentCursor, nextCursor)) {
+            break;
+        }
+        if (hasHostCommitWork(nextCursor)) {
+            return undefined;
+        }
+        currentCursor = currentCursor.sibling;
+        nextCursor = nextCursor.sibling;
+    }
+    if (currentCursor === undefined) {
+        return undefined;
+    }
+    const removed = currentCursor;
+    currentCursor = currentCursor.sibling;
+    while (currentCursor !== undefined && nextCursor !== undefined) {
+        if (!isSameFiberSlot(currentCursor, nextCursor) || hasHostCommitWork(nextCursor)) {
+            return undefined;
+        }
+        currentCursor = currentCursor.sibling;
+        nextCursor = nextCursor.sibling;
+    }
+    return currentCursor === undefined && nextCursor === undefined ? removed : undefined;
+}
+function isSameFiberSlot(current, next) {
+    return ((next === current || next.alternate === current) &&
+        current.tag === next.tag &&
+        current.type === next.type &&
+        current.key === next.key);
+}
+function collectCommittedHostNodes(fiber) {
+    if ((fiber.tag === "host-component" || fiber.tag === "host-text") &&
+        fiber.stateNode instanceof Node) {
+        return [fiber.stateNode];
+    }
+    const nodes = [];
+    let child = fiber.child;
+    while (child !== undefined) {
+        nodes.push(...collectCommittedHostNodes(child));
+        child = child.sibling;
+    }
+    return nodes;
+}
+function finishHostPassthroughFiber(fiber) {
+    fiber.memoizedProps = fiber.pendingProps;
+    finishCommittedFiber(fiber);
+}
 function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
     if (fiber.tag === "host-text") {
         const text = fiber.stateNode;
         if (!(text instanceof Text)) {
+            finishCommittedFiber(fiber);
             return [];
         }
-        text.data = String(fiber.pendingProps);
+        const nextText = String(fiber.pendingProps);
+        if (text.data !== nextText) {
+            text.data = nextText;
+        }
         fiber.memoizedProps = fiber.pendingProps;
+        finishCommittedFiber(fiber);
         return [text];
     }
     if (fiber.tag === "host-component") {
         const element = fiber.stateNode;
-        if (!(element instanceof HTMLElement)) {
+        if (!isHostElement(element)) {
+            finishCommittedFiber(fiber);
             return [];
         }
-        applyProps(element, fiber.pendingProps, path, {
-            ...options,
-            eventRoot,
-            preserveHydrationAttributes: fiber.hydrateExisting,
-        });
-        applyRef(fiber.pendingProps.ref, element);
-        const childNodes = commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
-        syncChildNodes(element, childNodes);
-        applyPostChildFormProps(element, fiber.pendingProps);
-        fiber.memoizedProps = fiber.pendingProps;
+        if (fiber.hydrateExisting !== true &&
+            fiber.flags === NoFlags &&
+            fiber.subtreeFlags === NoFlags &&
+            fiber.hostChildListChanged !== true) {
+            fiber.memoizedProps = fiber.pendingProps;
+            return [element];
+        }
+        const props = fiber.pendingProps;
+        const propsAreUnchanged = fiber.hydrateExisting !== true &&
+            hostPropsEqual(fiber.memoizedProps, props);
+        const propsAreChildrenOnly = fiber.hydrateExisting !== true &&
+            hostPropsAreChildrenOnly(fiber.memoizedProps) &&
+            hostPropsAreChildrenOnly(props);
+        const textOnlyRowUpdate = fiber.hydrateExisting !== true &&
+            isRowTextOnlyUpdate(fiber.memoizedProps, props);
+        if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+            applyProps(element, props, path, {
+                ...options,
+                eventRoot,
+                preserveHydrationAttributes: fiber.hydrateExisting,
+            });
+            applyRef(props.ref, element);
+        }
+        const directTextChild = fiber.child === undefined && fiber.hydrateExisting !== true
+            ? getDirectHostTextChild(props.children)
+            : undefined;
+        if (directTextChild !== undefined) {
+            syncDirectHostTextChild(element, directTextChild);
+        }
+        else if (fiber.hostChildListChanged ||
+            fiber.childListChanged ||
+            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)) {
+                syncChildNodes(element, childNodes);
+            }
+        }
+        else if (fiber.subtreeFlags !== NoFlags) {
+            commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
+        }
+        if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+            applyPostChildFormProps(element, props);
+        }
+        fiber.memoizedProps = props;
+        finishCommittedFiber(fiber);
         return [element];
     }
     if (fiber.tag === "fragment") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.f`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.f`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "profiler") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.profiler`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.profiler`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "strict-mode") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.strict`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.strict`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "suspense") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.s`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.s`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "suspense-list") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.sl`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.sl`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "context-provider" || fiber.tag === "context-consumer") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.ctx`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.ctx`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "function-component") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.fc`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.fc`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "forward-ref") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.fr`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.fr`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "memo") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.memo`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.memo`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "lazy") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.lazy`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.lazy`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "error-boundary") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.eb`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.eb`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "class-component") {
         fiber.memoizedProps = fiber.pendingProps;
-        return commitHostChildren(fiber.child, parent, eventRoot, `${path}.class`, options);
+        const nodes = commitHostChildren(fiber.child, parent, eventRoot, `${path}.class`, options);
+        finishCommittedFiber(fiber);
+        return nodes;
     }
     if (fiber.tag === "portal") {
         const container = fiber.stateNode;
@@ -548,13 +1387,206 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
             return [];
         }
         setLogicalEventParent(container, parent);
-        const childNodes = commitHostChildren(fiber.child, container, container, `${path}.portal`, options);
-        syncChildNodes(container, childNodes);
+        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)
+            : [];
+        syncOwnedChildNodes(container, previousNodes, childNodes);
+        fiber.memoizedState = childNodes;
         fiber.memoizedProps = fiber.pendingProps;
+        finishCommittedFiber(fiber);
         return [];
     }
+    finishCommittedFiber(fiber);
     return [];
 }
+function finishCommittedFiber(fiber) {
+    fiber.flags = NoFlags;
+    fiber.subtreeFlags = NoFlags;
+    fiber.childListChanged = false;
+    fiber.subtreeChildListChanged = false;
+    fiber.hostChildListChanged = false;
+}
+function hasChildListMutation(fiber) {
+    return fiber.childListChanged || fiber.subtreeChildListChanged;
+}
+function hostPropsEqual(previous, next) {
+    if (previous === next) {
+        return true;
+    }
+    if (typeof previous !== "object" || previous === null) {
+        return false;
+    }
+    const previousProps = previous;
+    let previousCount = 0;
+    let nextCount = 0;
+    for (const key in previousProps) {
+        if (!hasOwnProperty.call(previousProps, key)) {
+            continue;
+        }
+        previousCount += 1;
+        if (!hasOwnProperty.call(next, key)) {
+            return false;
+        }
+        if (!Object.is(previousProps[key], next[key])) {
+            return false;
+        }
+    }
+    for (const key in next) {
+        if (hasOwnProperty.call(next, key)) {
+            nextCount += 1;
+        }
+    }
+    return previousCount === nextCount;
+}
+function hostOwnPropsEqual(previous, next) {
+    if (previous === next) {
+        return true;
+    }
+    if (typeof previous !== "object" || previous === null) {
+        return false;
+    }
+    const previousProps = previous;
+    const previousMeta = getHostOwnPropsMeta(previousProps);
+    const nextMeta = getHostOwnPropsMeta(next);
+    if (previousMeta !== undefined && nextMeta !== undefined) {
+        return previousMeta === nextMeta;
+    }
+    let previousCount = 0;
+    let nextCount = 0;
+    for (const key in previousProps) {
+        if (!hasOwnProperty.call(previousProps, key) || key === "children") {
+            continue;
+        }
+        previousCount += 1;
+        if (!hasOwnProperty.call(next, key)) {
+            return false;
+        }
+        if (!Object.is(previousProps[key], next[key])) {
+            return false;
+        }
+    }
+    for (const key in next) {
+        if (hasOwnProperty.call(next, key) && key !== "children") {
+            nextCount += 1;
+        }
+    }
+    return previousCount === nextCount;
+}
+function getHostOwnPropsMeta(props) {
+    return props[HOST_OWN_PROPS_META];
+}
+function hostDirectTextChildChanged(previous, next) {
+    const previousText = getDirectHostTextChild(hostFiberChildrenProp(previous));
+    const nextText = getDirectHostTextChild(next.children);
+    return (previousText !== undefined || nextText !== undefined) && previousText !== nextText;
+}
+function hostChildListChanged(previous, next) {
+    const previousChildren = hostFiberChildrenProp(previous);
+    const nextChildren = next.children;
+    if (Object.is(previousChildren, nextChildren)) {
+        return false;
+    }
+    if (getDirectHostTextChild(previousChildren) !== undefined ||
+        getDirectHostTextChild(nextChildren) !== undefined) {
+        return false;
+    }
+    if (sameSingleHostChild(previousChildren, nextChildren)) {
+        return false;
+    }
+    if (sameHostChildList(previousChildren, nextChildren)) {
+        return false;
+    }
+    return true;
+}
+function sameSingleHostChild(previous, next) {
+    return (isReactCompatElement(previous) &&
+        isReactCompatElement(next) &&
+        previous.key === next.key &&
+        previous.type === next.type);
+}
+function sameHostChildList(previous, next) {
+    if (!Array.isArray(previous) || !Array.isArray(next) || previous.length !== next.length) {
+        return false;
+    }
+    for (let index = 0; index < previous.length; index += 1) {
+        const previousChild = previous[index];
+        const nextChild = next[index];
+        if (Object.is(previousChild, nextChild)) {
+            continue;
+        }
+        if (!sameSingleHostChild(previousChild, nextChild)) {
+            return false;
+        }
+    }
+    return (previous.length > 0 ||
+        (Array.isArray(previous) && Array.isArray(next)));
+}
+function hostPropsAreChildrenOnly(props) {
+    if (typeof props !== "object" || props === null) {
+        return false;
+    }
+    for (const key in props) {
+        if (Object.prototype.hasOwnProperty.call(props, key) &&
+            key !== "children") {
+            return false;
+        }
+    }
+    return true;
+}
+function isRowTextOnlyUpdate(previous, next) {
+    if (typeof previous !== "object" || previous === null) {
+        return false;
+    }
+    const previousProps = previous;
+    const previousMeta = getHostOwnPropsMeta(previousProps);
+    const nextMeta = getHostOwnPropsMeta(next);
+    if (previousMeta === undefined || previousMeta !== nextMeta) {
+        return false;
+    }
+    const previousText = getDirectHostTextChild(previousProps.children);
+    const nextText = getDirectHostTextChild(next.children);
+    return previousText !== undefined && nextText !== undefined && previousText !== nextText;
+}
+function hostFiberChildrenProp(props) {
+    return typeof props === "object" && props !== null
+        ? props.children
+        : undefined;
+}
+function getDirectHostTextChild(children) {
+    return typeof children === "string" || typeof children === "number"
+        ? String(children)
+        : undefined;
+}
+function shouldUseDirectHostTextChild() {
+    const globalProcess = globalThis
+        .process;
+    return globalProcess?.env?.NODE_ENV === "production";
+}
+function syncDirectHostTextChild(element, text) {
+    const firstChild = element.firstChild;
+    if (firstChild instanceof Text && firstChild.nextSibling === null) {
+        if (firstChild.data !== text) {
+            firstChild.data = text;
+        }
+        return;
+    }
+    element.textContent = text;
+}
+function shouldPreserveContentEditableChildren(element, props, childNodes) {
+    void childNodes;
+    if (!element.hasAttribute("contenteditable") ||
+        element.getAttribute("contenteditable") === "false") {
+        return false;
+    }
+    const children = props.children;
+    return (children === undefined ||
+        children === null ||
+        children === false ||
+        (Array.isArray(children) && children.length === 0));
+}
 function createSuspenseFiber(current, element, key, runtime, path, options = {}) {
     if (runtime === undefined) {
         return { fiber: undefined, consumed: 0 };
@@ -609,17 +1641,17 @@ function createStrictModeFiber(current, element, key, runtime, path, options = {
         ? createWorkInProgress(current, element.props)
         : createFiber("strict-mode", element.props, key);
     fiber.type = element.type;
+    const { result: childResult, memoValues, memoValuesByHook } = renderWithStrictModeMemoCapture(runtime, () => reconcileHostChild(fiber, current?.tag === "strict-mode" ? current.child : undefined, element.props.children, runtime, `${path}.strict`, options));
+    fiber.child = childResult.fiber;
     const snapshot = takeRuntimeSnapshot(runtime);
     try {
-        createHostFiber(fiber, undefined, element.props.children, undefined, runtime, `${path}.strict.preview`, options.previousNodes === undefined
+        renderStrictModeReplay(runtime, memoValues, memoValuesByHook, () => reconcileHostChild(fiber, childResult.fiber, element.props.children, runtime, `${path}.strict`, options.previousNodes === undefined
             ? options
-            : { ...options, previousNodes: [] });
+            : { ...options, previousNodes: [] }));
     }
     finally {
         restoreRuntimeSnapshot(runtime, snapshot);
     }
-    const childResult = renderWithStrictMode(runtime, () => reconcileHostChild(fiber, current?.tag === "strict-mode" ? current.child : undefined, element.props.children, runtime, `${path}.strict`, options));
-    fiber.child = childResult.fiber;
     return { fiber, consumed: childResult.consumed };
 }
 function createSuspenseListFiber(current, element, key, runtime, path, options = {}) {
@@ -680,6 +1712,7 @@ function reconcileSuspenseListForwards(parent, currentFirstChild, children, runt
         }
         fiber.return = parent;
         fiber.sibling = undefined;
+        bubbleHostChild(parent, fiber);
         if (first === undefined) {
             first = fiber;
         }
@@ -710,6 +1743,7 @@ function reconcileSuspenseListBackwards(parent, currentFirstChild, children, run
         }
         fiber.return = parent;
         fiber.sibling = undefined;
+        bubbleHostChild(parent, fiber);
         fibers.unshift(fiber);
         if (isSuspendedSuspenseFiber(fiber)) {
             break;
@@ -737,6 +1771,25 @@ function hasSuspendedChild(fiber) {
     }
     return false;
 }
+function hasPendingAsyncChild(fiber) {
+    let cursor = fiber;
+    while (cursor !== undefined) {
+        if (isPendingLazyFiber(cursor) || isSuspendedSuspenseFiber(cursor)) {
+            return true;
+        }
+        if (cursor.child !== undefined && hasPendingAsyncChild(cursor.child)) {
+            return true;
+        }
+        cursor = cursor.sibling;
+    }
+    return false;
+}
+function isPendingLazyFiber(fiber) {
+    if (fiber.tag !== "lazy" || !isLazyType(fiber.type)) {
+        return false;
+    }
+    return fiber.type.status !== "resolved" || fiber.child === undefined;
+}
 function isSuspendedSuspenseFiber(fiber) {
     return (fiber.tag === "suspense" &&
         fiber.memoizedState?.didSuspend === true);
@@ -819,7 +1872,7 @@ function createPortalFiber(parent, current, portal, key, runtime, path, options
         ? createWorkInProgress(current, portal.children)
         : createFiber("portal", portal.children, key);
     fiber.stateNode = portal.container;
-    const childResult = reconcileHostChild(fiber, current?.tag === "portal" ? current.child : undefined, portal.children, runtime, `${path}.portal`, options);
+    const childResult = reconcileHostChild(fiber, current?.tag === "portal" ? current.child : undefined, portal.children, runtime, `${path}.portal`, { ...options, documentRef: portal.container.ownerDocument });
     fiber.child = childResult.fiber;
     fiber.return = parent;
     return { fiber, consumed: childResult.consumed };
@@ -830,6 +1883,9 @@ function normalizeChildren(node) {
     }
     return Array.isArray(node) ? node : [node];
 }
+function getDocumentRef(options) {
+    return options.documentRef ?? document;
+}
 function collectExistingKeyedFibers(firstChild) {
     const keyed = new Map();
     let cursor = firstChild;
@@ -844,10 +1900,43 @@ function collectExistingKeyedFibers(firstChild) {
 function getNodeKey(node) {
     return isReactCompatElement(node) && node.key !== null ? node.key : undefined;
 }
+function hasKeyedChild(children) {
+    for (const child of children) {
+        if (getNodeKey(child) !== undefined) {
+            return true;
+        }
+    }
+    return false;
+}
 function getNodePathSegment(node, index) {
     const key = getNodeKey(node);
     return key === undefined ? String(index) : `k:${key}`;
 }
+function getReconcileChildPath(path, node, index, options) {
+    if (!shouldTrackReconcilePath(node, options)) {
+        return "";
+    }
+    return joinPath(path, getNodePathSegment(node, index));
+}
+function shouldTrackReconcilePath(node, options) {
+    if (options.previousNodes !== undefined ||
+        options.hydration?.onRecoverableError !== undefined ||
+        options.resumeId !== undefined) {
+        return true;
+    }
+    return !isHostElementWithDirectTextChild(node);
+}
+function isHostElementWithDirectTextChild(node) {
+    return (isReactCompatElement(node) &&
+        typeof node.type === "string" &&
+        getDirectHostTextChild(node.props.children) !== undefined);
+}
+function getRootCommitPath(options) {
+    return options.hydration?.onRecoverableError === undefined ? SKIP_COMMIT_PATH : "0";
+}
+function joinCommitPath(path, segment) {
+    return path === SKIP_COMMIT_PATH ? "" : joinPath(path, segment);
+}
 function getComponentName(component) {
     return component.name === "" ? "Anonymous" : component.name;
 }
@@ -877,8 +1966,34 @@ function markActiveInstanceKeys(runtime, keys) {
         runtime.activeInstanceKeys?.add(key);
     }
 }
-function hasDirtyInstance(runtime, keys) {
-    return keys.some((key) => runtime.instances.get(key)?.dirty === true);
+function hasDirtyInstance(runtime, keys, prefix) {
+    if (runtime === undefined) {
+        return false;
+    }
+    if (hasDirtyClassUpdate(runtime, keys, prefix)) {
+        return true;
+    }
+    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;
+        }
+    }
+    return false;
+}
+function hasUnflushedMountEffectInstance(runtime, keys) {
+    return keys.some((key) => {
+        const instance = runtime.instances.get(key);
+        return instance?.hooks?.some((slot) => slot?.kind === "effect" &&
+            slot.disposed !== true &&
+            slot.mounted !== true) === true;
+    });
 }
 function applyRef(ref, node) {
     if (typeof ref === "function") {