@reckona/mreact-compat 0.0.170 → 0.0.172

package/dist/host-reconciler.js

@@ -1,4 +1,5 @@
-import { Activity, ERROR_BOUNDARY_TYPE, FORWARD_REF_TYPE, Fragment, HOST_CHILDREN_ONLY_PROPS_META, LAZY_TYPE, MEMO_TYPE, Profiler, REACTIVE_TEXT_BINDING_META, STRICT_MODE_TYPE, Suspense, SuspenseList, isReactCompatElement, isReactCompatPortal, } from "./element.js";
+import { Activity, ERROR_BOUNDARY_TYPE, FORWARD_REF_TYPE, Fragment, HOST_CHILDREN_ONLY_PROPS_META, LAZY_TYPE, MEMO_TYPE, Profiler, REACTIVE_DOM_BLOCK_TYPE, REACTIVE_TEXT_BINDING_META, STRICT_MODE_TYPE, Suspense, SuspenseList, isReactCompatElement, isReactCompatPortal, } from "./element.js";
+import { createReactivePropCell, createReactivePropProxy, setReactivePropCell, } from "./reactive-prop-cell.js";
 import { consumerContext, isReactCompatConsumer, isReactCompatProvider, renderWithContextProvider, useContext, } from "./context.js";
 import { applyPostChildFormProps, applyProps } from "./dom-props.js";
 import { syncChildNodes, syncOwnedChildNodes, syncScopedChildNodes } from "./dom-children.js";
@@ -13,6 +14,7 @@ import { areMemoPropsEqual, getPendingProps, shallowEqual } from "./prop-compari
 import { reportElementTextMismatch, reportExtraHydrationNodes, reportHydrationNodeTypeMismatch, reportMissingHydrationNode, reportReactSuspenseServerError, reportRecoverable, withHydrationComponentStack, } from "./hydration.js";
 const committedPortalContainers = new Set();
 const pendingHostRefUpdates = [];
+const emptyInstanceKeys = [];
 const SKIP_COMMIT_PATH = "\0";
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 let suspensePrimaryRenderDepth = 0;
@@ -49,6 +51,9 @@ export function canRenderHostFiber(node) {
     if (node.type === ERROR_BOUNDARY_TYPE) {
         return true;
     }
+    if (node.type === REACTIVE_DOM_BLOCK_TYPE) {
+        return true;
+    }
     if (isReactCompatProvider(node.type)) {
         return canRenderHostFiber(node.props.children);
     }
@@ -100,7 +105,12 @@ export function commitHostFiberRoot(root, finishedWork, options = {}) {
             pendingHostRefUpdates.length = 0;
             const commitPath = getRootCommitPath(options);
             if (!hasChildListMutation(finishedWork)) {
-                commitHostDirtyChildren(finishedWork.child, root.container, root.container, commitPath, options);
+                commitHostDirtyChildrenOf(finishedWork, finishedWork.child, root.container, root.container, commitPath, options);
+                committed = true;
+                return;
+            }
+            if (finishedWork.childListChanged &&
+                commitHostKeyedChildListMutationFiber(finishedWork, root.container, root.container, commitPath, options)) {
                 committed = true;
                 return;
             }
@@ -151,6 +161,33 @@ export function commitHydratingHostFiberRoot(root, finishedWork, scope, options
         scope.after?.parentNode?.removeChild(scope.after);
     }
 }
+export function disposeHostFiberResources(fiber) {
+    if (fiber === undefined || fiber.hasDisposableResources !== true) {
+        return;
+    }
+    // Dispose this fiber and its SUBTREE only — not its siblings. This is called
+    // once per deleted fiber, and deleted siblings are disposed by their own
+    // calls; walking siblings here re-walked the whole deleted list per deletion
+    // (O(n^2) on a cleared 1k-row reactive list). The dedupe set is allocated
+    // once for the subtree walk.
+    const seen = new Set();
+    if (fiber.tag === "reactive-dom-block") {
+        disposeReactiveDomBlockState(fiber.stateNode, seen);
+    }
+    disposeHostFiberChildResources(fiber.child, seen);
+}
+function disposeHostFiberChildResources(fiber, seen) {
+    let cursor = fiber;
+    while (cursor !== undefined) {
+        if (cursor.hasDisposableResources === true) {
+            if (cursor.tag === "reactive-dom-block") {
+                disposeReactiveDomBlockState(cursor.stateNode, seen);
+            }
+            disposeHostFiberChildResources(cursor.child, seen);
+        }
+        cursor = cursor.sibling;
+    }
+}
 function reconcileHostChild(parent, currentFirstChild, node, runtime, path, options = {}) {
     resetFiberRefSubtree(parent);
     parent.subtreeFlags = NoFlags;
@@ -166,7 +203,8 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
     const children = Array.isArray(node) ? node : undefined;
     const rowResult = children === undefined
         ? undefined
-        : reconcileKeyedRowHostChildren(parent, currentFirstChild, children, options);
+        : reconcileKeyedRowHostChildren(parent, currentFirstChild, children, options) ??
+            reconcileKeyedMemoRowHostChildren(parent, currentFirstChild, children, runtime, path, options);
     if (rowResult !== undefined) {
         return rowResult;
     }
@@ -182,6 +220,7 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
     let skipRemainingKeyedLookup = false;
     let sequentialCurrentCursor = currentFirstChild;
     let childListOrderChanged = false;
+    let dirtyChildren;
     let usedCurrentChildren = currentFirstChild === undefined || hasKeyedChildren ? undefined : new Set();
     const ensureUsedCurrentChildren = () => {
         if (usedCurrentChildren === undefined) {
@@ -224,11 +263,17 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
         else if (children !== undefined &&
             currentKeyed?.sibling?.key === key &&
             canSkipSingleDeletedKeyedFiber(children, index, currentKeyed.sibling)) {
+            const deleted = currentKeyed;
+            const matched = currentKeyed.sibling;
+            const suffixResult = tryReuseDependencyFreeMemoRemovalSuffix(parent, children, index, deleted, matched, runtime, options, first, previous, consumed);
+            if (suffixResult !== undefined) {
+                return suffixResult;
+            }
             childListOrderChanged = true;
             ensureUsedCurrentChildren();
-            matchedCurrent = currentKeyed.sibling;
+            matchedCurrent = matched;
             canReuseMatchedCurrentFiber = false;
-            currentKeyed = currentKeyed.sibling.sibling;
+            currentKeyed = matched.sibling;
         }
         else {
             if (children !== undefined &&
@@ -287,6 +332,13 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
             && fiber.memoizedState === undefined) {
             fiber.memoizedState = index;
         }
+        else if (fiber.tag === "memo" &&
+            (fiber.stateNode === undefined || typeof fiber.stateNode === "number")) {
+            fiber.stateNode = index;
+        }
+        if (hasHostCommitWork(fiber)) {
+            (dirtyChildren ??= []).push(fiber);
+        }
         previous = fiber;
     }
     if (usedCurrentChildren === undefined && hasKeyedChildren && currentKeyed !== undefined) {
@@ -297,6 +349,7 @@ function reconcileHostChild(parent, currentFirstChild, node, runtime, path, opti
     }
     parent.childListChanged =
         childListOrderChanged || childFiberListShapeChanged(currentFirstChild, first);
+    recordDirtyChildCommitHints(parent, dirtyChildren);
     return { fiber: first, consumed };
 }
 function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, options) {
@@ -315,6 +368,7 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
     let subtreeFlags = NoFlags;
     let subtreeChildListChanged = false;
     let hasRefSubtree = false;
+    let hasDisposableResources = false;
     let appendSuffix;
     const canReuseUnchangedRows = hasSameKeyOrderPrefix(currentFirstChild, children);
     const row = createKeyedRowHostElementScratch();
@@ -375,6 +429,9 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
         if (fiber.hasRefSubtree) {
             hasRefSubtree = true;
         }
+        if (fiber.hasDisposableResources) {
+            hasDisposableResources = true;
+        }
         subtreeFlags |= fiber.flags | fiber.subtreeFlags;
         subtreeChildListChanged =
             subtreeChildListChanged ||
@@ -390,6 +447,7 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
         markOptimizedChildrenForDeletion(parent, currentKeyed);
     }
     parent.hasRefSubtree = hasRefSubtree;
+    parent.hasDisposableResources = hasDisposableResources;
     parent.subtreeFlags = subtreeFlags;
     parent.subtreeChildListChanged = subtreeChildListChanged;
     parent.childListChanged = listShapeChanged;
@@ -398,6 +456,270 @@ function reconcileKeyedRowHostChildren(parent, currentFirstChild, children, opti
     }
     return { fiber: first, consumed: 0 };
 }
+function isKeyedMemoRowCandidate(node) {
+    return (isReactCompatElement(node) &&
+        node.key !== null &&
+        node.ref === null &&
+        isMemoType(node.type));
+}
+// Marker the compiler stamps on a lowered host-only component that returns its
+// props verbatim as a reactive block (`createReactiveDomBlock(render, props)`).
+// Such a component is pure and structurally static, so on a props change the
+// reconciler can drive its committed block straight through the prop cell instead
+// of re-invoking the component (the block's bound DOM updates via subscriptions).
+const STATIC_REACTIVE_BLOCK_MARKER = "__mreactStaticBlock";
+function isStaticReactiveBlockComponent(type) {
+    return (typeof type === "function" &&
+        type[STATIC_REACTIVE_BLOCK_MARKER] === true);
+}
+// In-place bailout for a keyed memo row whose props are unchanged and which has
+// no hook/context/effect dependencies. The caller has proven the key order is
+// unchanged (hasSameKeyOrderPrefix), so the fiber keeps its position and can be
+// reused WITHOUT createWorkInProgress — no allocation, and the retained subtree
+// (including any reactive-dom-block subscriptions) is left untouched. Returns
+// undefined when the row must re-render or has dependencies (handled by the
+// general per-child path instead). Mirrors tryReuseDependencyFreeMemoBailout +
+// getMemoBailoutFiber's in-place branch, but is safe to reuse a fiber with
+// disposable resources because a stable position means nothing is disposed.
+function tryReuseDependencyFreeKeyedMemoRow(matched, child) {
+    if (matched.tag !== "memo" ||
+        matched.type !== child.type ||
+        matched.hasRefSubtree === true ||
+        matched.hydrateExisting === true) {
+        return undefined;
+    }
+    const state = matched.memoizedState;
+    if (state === undefined ||
+        state.hasDirtyInstanceDependencies !== false ||
+        state.hasUnflushedEffectDependencies !== false ||
+        state.hasRetainedInstanceDependencies !== false ||
+        !areMemoPropsEqual(child.type, state.props, child.props)) {
+        return undefined;
+    }
+    matched.pendingProps = child.props;
+    matched.flags = NoFlags;
+    matched.subtreeFlags = NoFlags;
+    matched.childListChanged = false;
+    matched.subtreeChildListChanged = false;
+    matched.hostChildListChanged = false;
+    matched.child = getSkippedChild(matched);
+    return matched;
+}
+// In-place CHANGED-row update for a keyed memo row whose inner component is a
+// compiler-marked static reactive block (returns its props verbatim as the block
+// props). Instead of re-invoking the component to rebuild a throwaway block
+// element, push the new props straight into the committed block's prop cell — the
+// bound DOM updates via subscriptions, exactly as the normal block re-render path
+// would, but without the memo/component render machinery. Same-order is proven by
+// the caller, so the fiber is reused in place. Returns undefined when this is not
+// a marked, dependency-free, single-block memo row (the general path handles it).
+function tryCellUpdateStaticBlockMemoRow(matched, child) {
+    if (matched.tag !== "memo" ||
+        matched.type !== child.type ||
+        matched.hasRefSubtree === true ||
+        matched.hydrateExisting === true ||
+        !isStaticReactiveBlockComponent(matched.type.type)) {
+        return undefined;
+    }
+    const state = matched.memoizedState;
+    if (state === undefined ||
+        state.hasDirtyInstanceDependencies !== false ||
+        state.hasUnflushedEffectDependencies !== false ||
+        state.hasRetainedInstanceDependencies !== false) {
+        return undefined;
+    }
+    // Navigate memo -> component fiber -> reactive-dom-block fiber. The marked
+    // component renders exactly one static block, so anything else is unexpected.
+    const componentFiber = matched.child;
+    if (componentFiber === undefined || componentFiber.sibling !== undefined) {
+        return undefined;
+    }
+    const blockFiber = componentFiber.child;
+    if (blockFiber === undefined ||
+        blockFiber.tag !== "reactive-dom-block" ||
+        blockFiber.sibling !== undefined) {
+        return undefined;
+    }
+    const blockState = blockFiber.stateNode;
+    if (blockState?.propCell === undefined) {
+        return undefined;
+    }
+    // Drive the bound DOM through the prop cell (the marker guarantees the block's
+    // props are the component's props verbatim), then reuse the memo fiber in place.
+    setReactivePropCell(blockState.propCell, child.props);
+    matched.memoizedState = { ...state, props: child.props };
+    matched.pendingProps = child.props;
+    matched.flags = NoFlags;
+    matched.subtreeFlags = NoFlags;
+    matched.childListChanged = false;
+    matched.subtreeChildListChanged = false;
+    matched.hostChildListChanged = false;
+    matched.child = getSkippedChild(matched);
+    return matched;
+}
+// Fast path for a keyed list of memo-wrapped rows (e.g. `<RowMemo key={id} />`)
+// whose key order is UNCHANGED between renders — the js-framework-benchmark
+// "select row" and "partial update" shapes. Walks current fibers and new
+// children in lockstep: unchanged rows bail in place (no allocation, no general
+// keyed-reconcile machinery), changed rows re-render through the proven
+// per-child path. Any reorder / insert / delete / non-memo child / length change
+// makes it return undefined so the general reconcile takes over.
+function reconcileKeyedMemoRowHostChildren(parent, currentFirstChild, children, runtime, path, options) {
+    if (children.length === 0 ||
+        currentFirstChild === undefined ||
+        runtime === undefined ||
+        options.previousNodes !== undefined ||
+        !isKeyedMemoRowCandidate(children[0]) ||
+        !hasSameKeyOrderPrefix(currentFirstChild, children)) {
+        return undefined;
+    }
+    let currentKeyed = currentFirstChild;
+    let first;
+    let previous;
+    let subtreeFlags = NoFlags;
+    let subtreeChildListChanged = false;
+    let hasRefSubtree = false;
+    let hasDisposableResources = false;
+    let dirtyChildren;
+    for (let index = 0; index < children.length; index += 1) {
+        const child = children[index];
+        if (currentKeyed === undefined || !isKeyedMemoRowCandidate(child)) {
+            return undefined;
+        }
+        const matched = currentKeyed;
+        currentKeyed = currentKeyed.sibling;
+        const childElement = child;
+        let fiber = tryReuseDependencyFreeKeyedMemoRow(matched, childElement) ??
+            tryCellUpdateStaticBlockMemoRow(matched, childElement);
+        if (fiber === undefined) {
+            const result = createHostFiber(parent, matched, child, childElement.key ?? undefined, runtime, getReconcileChildPath(path, child, index, options), options, false);
+            fiber = result.fiber;
+            if (fiber === undefined) {
+                return undefined;
+            }
+            if (fiber !== matched && fiber.alternate !== matched) {
+                markOptimizedChildForDeletion(parent, matched);
+            }
+        }
+        if (first === undefined) {
+            first = fiber;
+        }
+        else if (previous !== undefined) {
+            previous.sibling = fiber;
+        }
+        fiber.return = parent;
+        fiber.sibling = undefined;
+        if (fiber.hasRefSubtree) {
+            hasRefSubtree = true;
+        }
+        if (fiber.hasDisposableResources) {
+            hasDisposableResources = true;
+        }
+        subtreeFlags |= fiber.flags | fiber.subtreeFlags;
+        subtreeChildListChanged =
+            subtreeChildListChanged || fiber.childListChanged || fiber.subtreeChildListChanged;
+        if (fiber.tag === "memo" &&
+            (fiber.stateNode === undefined || typeof fiber.stateNode === "number")) {
+            fiber.stateNode = index;
+        }
+        if (hasHostCommitWork(fiber)) {
+            (dirtyChildren ??= []).push(fiber);
+        }
+        previous = fiber;
+    }
+    if (currentKeyed !== undefined) {
+        return undefined;
+    }
+    parent.hasRefSubtree = hasRefSubtree;
+    parent.hasDisposableResources = hasDisposableResources;
+    parent.subtreeFlags = subtreeFlags;
+    parent.subtreeChildListChanged = subtreeChildListChanged;
+    parent.childListChanged = false;
+    recordDirtyChildCommitHints(parent, dirtyChildren);
+    return { fiber: first, consumed: 0 };
+}
+function canReuseDependencyFreeMemoAtKey(current, node, key) {
+    return (current !== undefined &&
+        current.key === key &&
+        current.tag === "memo" &&
+        current.type === node.type &&
+        current.hasRefSubtree !== true &&
+        current.hasDisposableResources !== true &&
+        current.hydrateExisting !== true &&
+        isMemoType(node.type));
+}
+function tryReuseDependencyFreeMemoRemovalSuffix(parent, children, startIndex, removed, matchedCurrent, runtime, options, prefixFirst, prefixPrevious, consumed) {
+    if (runtime === undefined ||
+        options.previousNodes !== undefined ||
+        removed.hasRefSubtree) {
+        return undefined;
+    }
+    const suffix = [];
+    let current = matchedCurrent;
+    for (let index = startIndex; index < children.length; index += 1) {
+        const child = children[index];
+        const key = getNodeKey(child);
+        if (key === undefined || !isReactCompatElement(child) || !isMemoType(child.type)) {
+            return undefined;
+        }
+        if (!canReuseDependencyFreeMemoAtKey(current, child, key)) {
+            return undefined;
+        }
+        if (current === undefined) {
+            return undefined;
+        }
+        const matched = current;
+        const fiber = reuseDependencyFreeMemoFiber(matched, child);
+        if (fiber === undefined) {
+            return undefined;
+        }
+        suffix.push(fiber);
+        current = matched.sibling;
+    }
+    if (current !== undefined) {
+        return undefined;
+    }
+    let first = prefixFirst;
+    let previous = prefixPrevious;
+    for (const fiber of suffix) {
+        if (first === undefined) {
+            first = fiber;
+        }
+        else if (previous !== undefined) {
+            previous.sibling = fiber;
+        }
+        fiber.return = parent;
+        fiber.sibling = undefined;
+        previous = fiber;
+    }
+    parent.childListChanged = true;
+    parent.deletions = [removed];
+    markOptimizedChildForDeletion(parent, removed);
+    return { fiber: first, consumed };
+}
+function reuseDependencyFreeMemoFiber(current, node) {
+    if (!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;
+    }
+    current.pendingProps = node.props;
+    current.flags = NoFlags;
+    current.subtreeFlags = NoFlags;
+    current.childListChanged = false;
+    current.subtreeChildListChanged = false;
+    current.hostChildListChanged = false;
+    current.type = node.type;
+    current.child = getSkippedChild(current);
+    current.memoizedState = previousMemoState;
+    return current;
+}
 function canStoreAppendSuffixCommitHint(parent) {
     return (parent.tag === "fragment" ||
         parent.tag === "host-component" ||
@@ -459,6 +781,7 @@ function getReusableKeyedRowHostFiber(current, row) {
     current.subtreeChildListChanged = false;
     current.hostChildListChanged = false;
     current.hasRefSubtree = false;
+    current.hasDisposableResources = false;
     return current;
 }
 function createKeyedRowHostElementScratch() {
@@ -512,6 +835,7 @@ function createKeyedRowHostFiber(parent, current, row, options) {
     fiber.pendingProps = node.props;
     fiber.hostChildListChanged = false;
     fiber.hasRefSubtree = false;
+    fiber.hasDisposableResources = false;
     if (current === undefined || fiber.alternate !== current) {
         fiber.flags |= Placement;
         fiber.hostChildListChanged = true;
@@ -617,14 +941,25 @@ function bubbleHostChild(parent, child) {
     if (child.hasRefSubtree) {
         parent.hasRefSubtree = true;
     }
+    if (child.hasDisposableResources) {
+        parent.hasDisposableResources = true;
+    }
     parent.subtreeFlags |= child.flags | child.subtreeFlags;
     parent.subtreeChildListChanged =
         parent.subtreeChildListChanged ||
             child.childListChanged ||
             child.subtreeChildListChanged;
 }
+function recordDirtyChildCommitHints(parent, dirtyChildren) {
+    if (parent.childListChanged || dirtyChildren === undefined || dirtyChildren.length === 0) {
+        return;
+    }
+    // Reuse the effect-list slot only when there are no child-list deletions.
+    parent.deletions = dirtyChildren;
+}
 function resetFiberRefSubtree(fiber) {
     fiber.hasRefSubtree = false;
+    fiber.hasDisposableResources = false;
 }
 function includeNodeRef(fiber, node) {
     fiber.hasRefSubtree =
@@ -722,6 +1057,12 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         }
         return { fiber: undefined, consumed: 0 };
     }
+    // Host elements (string type) are by far the most common node. Dispatch them
+    // before the component-type checks below, none of which a string can match,
+    // so each reconciled host element skips ~12 type comparisons / probes.
+    if (typeof node.type === "string") {
+        return createHostComponentFiber(parent, current, node, key, runtime, path, options);
+    }
     if (node.type === Fragment) {
         const fiber = current?.tag === "fragment"
             ? createWorkInProgress(current, node.props.children)
@@ -790,6 +1131,36 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         }
         return { fiber, consumed: options.previousNodes?.length ?? 0 };
     }
+    if (node.type === REACTIVE_DOM_BLOCK_TYPE) {
+        const blockProps = node.props.blockProps;
+        if (current?.tag === "reactive-dom-block") {
+            // Re-render: reuse the committed DOM/subscriptions and push the new props
+            // into the prop cell instead of re-running render(). Bound text/attributes
+            // update via their reactive subscriptions; the subtree is never reconciled.
+            const fiber = createWorkInProgress(current, node.props);
+            fiber.type = node.type;
+            fiber.hasDisposableResources = true;
+            const previousState = current.stateNode;
+            if (previousState?.propCell !== undefined && blockProps !== undefined) {
+                setReactivePropCell(previousState.propCell, blockProps);
+            }
+            fiber.stateNode = previousState;
+            return { fiber, consumed: options.previousNodes?.length ?? 0 };
+        }
+        const fiber = createFiber("reactive-dom-block", node.props, key);
+        fiber.type = node.type;
+        fiber.hasDisposableResources = true;
+        const render = node.props.render;
+        if (blockProps !== undefined) {
+            const propCell = createReactivePropCell(blockProps);
+            const result = render(createReactivePropProxy(propCell));
+            fiber.stateNode = { node: result.node, dispose: result.dispose, propCell };
+        }
+        else {
+            fiber.stateNode = render();
+        }
+        return { fiber, consumed: options.previousNodes?.length ?? 0 };
+    }
     if (isReactCompatProvider(node.type)) {
         const fiber = current?.tag === "context-provider" && current.type === node.type
             ? createWorkInProgress(current, node.props)
@@ -858,8 +1229,11 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
             : createFiber("memo", node.props, key);
         fiber.type = memoType;
         const renderedElement = {
-            ...node,
+            $$typeof: node.$$typeof,
             type: memoType.type,
+            key: node.key,
+            ref: node.ref,
+            props: node.props,
         };
         const childResult = createHostFiber(fiber, current?.tag === "memo" ? current.child : undefined, renderedElement, key, runtime, memoPath, options);
         fiber.child = childResult.fiber;
@@ -868,7 +1242,7 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
             fiber.child.sibling = undefined;
             bubbleHostChild(fiber, fiber.child);
         }
-        const instanceKeys = collectInstanceKeys(runtime, memoPath);
+        const instanceKeys = collectMemoInstanceKeys(runtime, memoPath);
         const hasClassDescendant = hasClassComponentDescendant(fiber.child);
         fiber.memoizedState = {
             props: node.props,
@@ -890,8 +1264,11 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         fiber.type = lazyType;
         if (lazyType.status === "resolved" && lazyType.resolved !== undefined) {
             const renderedElement = {
-                ...node,
+                $$typeof: node.$$typeof,
                 type: lazyType.resolved,
+                key: node.key,
+                ref: node.ref,
+                props: node.props,
             };
             const childResult = createHostFiber(fiber, current?.tag === "lazy" ? current.child : undefined, renderedElement, key, runtime, `${path}.lazy`, options);
             fiber.child = childResult.fiber;
@@ -1006,45 +1383,64 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         const instanceKeys = collectInstanceKeys(runtime, path);
         fiber.stateNode = {
             element: node,
-            props: { ...node.props },
+            props: node.props,
             instanceKeys,
             hasContextDependencies: hasContextDependency(runtime, instanceKeys),
         };
         return { fiber, consumed: childResult.consumed };
     }
+    return { fiber: undefined, consumed: 0 };
+}
+// The host-component reconcile, split out of createHostFiberImpl so host
+// elements can be dispatched before the component-type checks. Only called with
+// a string element type.
+function createHostComponentFiber(parent, current, node, key, runtime, path, options) {
     if (typeof node.type !== "string") {
         return { fiber: undefined, consumed: 0 };
     }
+    const initialHostOnlyFiber = tryCreateInitialHostOnlyFiber(current, node, key, options);
+    if (initialHostOnlyFiber !== undefined) {
+        return { fiber: initialHostOnlyFiber, 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)
+    const reusableCurrent = current?.tag === "host-component" && current.type === node.type ? current : undefined;
+    const fiber = reusableCurrent !== undefined
+        ? createWorkInProgress(reusableCurrent, node.props)
         : createFiber("host-component", node.props, key);
+    // The hydration node bookkeeping only matters when hydrating. Skipping it for
+    // the common (non-hydration) render avoids an isHostElement(undefined) probe
+    // and the mismatch checks on every reconciled element.
     const existing = options.previousNodes?.[0];
-    const existingElement = isHostElement(existing) ? existing : undefined;
-    const tagMatches = existingElement !== undefined &&
-        hostElementMatches(existingElement, node.type, elementNamespace);
-    if (existing === undefined && options.previousNodes !== undefined) {
-        reportMissingHydrationNode(options, path);
-    }
-    else if (existing !== undefined && !isHostElement(existing)) {
-        reportHydrationNodeTypeMismatch(options, path, `<${node.type}>`, existing);
-    }
-    if (existingElement !== undefined && !tagMatches) {
-        reportRecoverable(options, "tag", path, new Error(`Hydration tag mismatch: expected <${node.type}> but found <${existingElement.tagName.toLowerCase()}>.`));
-        reportElementTextMismatch(options, `${path}.c`, existingElement, node.props.children);
+    let existingElement;
+    let tagMatches = false;
+    if (options.previousNodes !== undefined) {
+        existingElement = isHostElement(existing) ? existing : undefined;
+        tagMatches =
+            existingElement !== undefined &&
+                hostElementMatches(existingElement, node.type, elementNamespace);
+        if (existing === undefined) {
+            reportMissingHydrationNode(options, path);
+        }
+        else if (!isHostElement(existing)) {
+            reportHydrationNodeTypeMismatch(options, path, `<${node.type}>`, existing);
+        }
+        if (existingElement !== undefined && !tagMatches) {
+            reportRecoverable(options, "tag", path, new Error(`Hydration tag mismatch: expected <${node.type}> but found <${existingElement.tagName.toLowerCase()}>.`));
+            reportElementTextMismatch(options, `${path}.c`, existingElement, node.props.children);
+        }
     }
     fiber.type = node.type;
+    // When reusing a same-type current fiber, its stateNode was created for this
+    // exact tag and namespace (same tree position), so the hostElementMatches
+    // re-check (localName + namespaceURI reads) is redundant.
     fiber.stateNode =
         tagMatches
             ? existingElement
-            : current?.tag === "host-component" &&
-                current.type === node.type &&
-                isHostElement(current.stateNode) &&
-                hostElementMatches(current.stateNode, node.type, elementNamespace)
-                ? current.stateNode
+            : reusableCurrent !== undefined && isHostElement(reusableCurrent.stateNode)
+                ? reusableCurrent.stateNode
                 : createHostElement(getDocumentRef(options), node.type, options.namespace ?? "html");
-    fiber.hydrateExisting = tagMatches && options.previousNodes !== undefined;
+    fiber.hydrateExisting = tagMatches;
     const previousChildNodes = tagMatches && existingElement !== undefined
         ? Array.from(existingElement.childNodes)
         : undefined;
@@ -1069,11 +1465,7 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         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 }),
-    });
+    const childResult = reconcileHostChild(fiber, current?.tag === "host-component" ? current.child : undefined, node.props.children, runtime, `${path}.c`, getHostChildFiberOptions(options, childNamespace, previousChildNodes));
     fiber.child = childResult.fiber;
     if (previousChildNodes !== undefined) {
         reportExtraHydrationNodes(options, `${path}.c`, previousChildNodes, childResult.consumed);
@@ -1086,6 +1478,114 @@ function isFunctionComponentType(value) {
         typeof value.prototype?.render !==
             "function");
 }
+function tryCreateInitialHostOnlyFiber(current, node, key, options) {
+    if (current !== undefined ||
+        options.previousNodes !== undefined ||
+        !shouldUseDirectHostTextChild() ||
+        typeof node.type !== "string" ||
+        !canCreateInitialHostOnlyNode(node)) {
+        return undefined;
+    }
+    return createInitialHostOnlyElementFiber(node, key, options.namespace ?? "html", getDocumentRef(options));
+}
+function createInitialHostOnlyElementFiber(node, key, namespace, documentRef) {
+    const elementType = node.type;
+    const elementNamespace = namespaceForHostElement(namespace, elementType);
+    const childNamespace = namespaceForHostChildren(elementNamespace, elementType);
+    const fiber = createFiber("host-component", node.props, key);
+    fiber.type = elementType;
+    fiber.stateNode = createHostElement(documentRef, elementType, namespace);
+    fiber.flags |= Placement;
+    fiber.hostChildListChanged = true;
+    if (getDirectHostTextChild(node.props.children) === undefined) {
+        fiber.child = createInitialHostOnlyChildList(fiber, node.props.children, childNamespace, documentRef);
+    }
+    return fiber;
+}
+function createInitialHostOnlyChildList(parent, children, namespace, documentRef) {
+    const normalized = normalizeChildren(children);
+    let first;
+    let previous;
+    for (let index = 0; index < normalized.length; index += 1) {
+        const child = normalized[index];
+        const fiber = createInitialHostOnlyChildFiber(child, namespace, documentRef);
+        if (fiber === undefined) {
+            continue;
+        }
+        fiber.return = parent;
+        fiber.memoizedState = index;
+        if (first === undefined) {
+            first = fiber;
+        }
+        else if (previous !== undefined) {
+            previous.sibling = fiber;
+        }
+        bubbleHostChild(parent, fiber);
+        previous = fiber;
+    }
+    return first;
+}
+function createInitialHostOnlyChildFiber(node, namespace, documentRef) {
+    if (node === null || node === undefined || typeof node === "boolean") {
+        return undefined;
+    }
+    if (typeof node === "string" || typeof node === "number") {
+        const fiber = createFiber("host-text", String(node));
+        fiber.stateNode = createHostTextNode(documentRef);
+        fiber.flags |= Placement;
+        return fiber;
+    }
+    if (Array.isArray(node)) {
+        const fiber = createFiber("fragment", node);
+        fiber.child = createInitialHostOnlyChildList(fiber, node, namespace, documentRef);
+        return fiber.child === undefined ? undefined : fiber;
+    }
+    if (!isReactCompatElement(node) || typeof node.type !== "string") {
+        return undefined;
+    }
+    return createInitialHostOnlyElementFiber(node, node.key === null ? undefined : node.key, namespace, documentRef);
+}
+function canCreateInitialHostOnlyNode(node) {
+    if (node === null ||
+        node === undefined ||
+        typeof node === "boolean" ||
+        typeof node === "string" ||
+        typeof node === "number") {
+        return true;
+    }
+    if (Array.isArray(node)) {
+        return node.every(canCreateInitialHostOnlyNode);
+    }
+    if (!isReactCompatElement(node) ||
+        typeof node.type !== "string" ||
+        node.ref !== null ||
+        hasInitialHostOnlyExcludedProps(node.props)) {
+        return false;
+    }
+    return canCreateInitialHostOnlyNode(node.props.children);
+}
+function hasInitialHostOnlyExcludedProps(props) {
+    return (hasOwnProperty.call(props, REACTIVE_TEXT_BINDING_META) ||
+        props.dangerouslySetInnerHTML !== undefined ||
+        props.contentEditable === true ||
+        props.suppressContentEditableWarning === true ||
+        props.value !== undefined ||
+        props.defaultValue !== undefined ||
+        props.checked !== undefined ||
+        props.defaultChecked !== undefined);
+}
+function getHostChildFiberOptions(options, namespace, previousNodes) {
+    const namespaceUnchanged = options.namespace === namespace ||
+        (options.namespace === undefined && namespace === "html");
+    if (previousNodes === undefined && namespaceUnchanged) {
+        return options;
+    }
+    return {
+        ...options,
+        namespace,
+        ...(previousNodes === undefined ? {} : { previousNodes }),
+    };
+}
 function commitHostChildren(fiber, parent, eventRoot, path, options = {}) {
     const nodes = [];
     let cursor = fiber;
@@ -1110,6 +1610,29 @@ function commitHostDirtyChildren(fiber, parent, eventRoot, path, options = {}) {
         index += 1;
     }
 }
+function commitHostDirtyChildrenOf(owner, fiber, parent, eventRoot, path, options = {}) {
+    const dirtyChildren = readDirtyChildCommitHints(owner);
+    if (dirtyChildren === undefined) {
+        commitHostDirtyChildren(fiber, parent, eventRoot, path, options);
+        return;
+    }
+    for (let index = 0; index < dirtyChildren.length; index += 1) {
+        const dirtyChild = dirtyChildren[index];
+        if (dirtyChild !== undefined && hasHostCommitWork(dirtyChild)) {
+            commitHostDirtyFiber(dirtyChild, parent, eventRoot, joinCommitPath(path, String(getDirtyChildCommitIndex(dirtyChild, index))), options);
+        }
+    }
+    owner.deletions = undefined;
+}
+function readDirtyChildCommitHints(fiber) {
+    return fiber.childListChanged ? undefined : fiber.deletions;
+}
+function getDirtyChildCommitIndex(fiber, fallback) {
+    if (typeof fiber.memoizedState === "number") {
+        return fiber.memoizedState;
+    }
+    return typeof fiber.stateNode === "number" ? fiber.stateNode : fallback;
+}
 function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
     if (fiber.tag === "host-text") {
         commitHostFiber(fiber, parent, eventRoot, path, options);
@@ -1121,6 +1644,7 @@ function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
             finishCommittedFiber(fiber);
             return;
         }
+        const isDomElement = isDomHostElement(element);
         const props = fiber.pendingProps;
         const previousProps = fiber.memoizedProps;
         const directTextChild = fiber.child === undefined && fiber.hydrateExisting !== true
@@ -1140,7 +1664,7 @@ function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
             !propsAreChildrenOnly &&
             fiber.hydrateExisting !== true &&
             isRowTextOnlyUpdate(fiber.memoizedProps, props);
-        if (isDomHostElement(element) && !propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+        if (isDomElement && !propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
             applyProps(element, props, path, {
                 ...options,
                 eventRoot,
@@ -1155,15 +1679,15 @@ function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
             fiber.childListChanged ||
             fiber.subtreeChildListChanged) {
             const childNodes = commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
-            if (!(isDomHostElement(element) && childNodes.length === 0 && committedPortalContainers.has(element)) &&
-                !(isDomHostElement(element) && shouldPreserveContentEditableChildren(element, props, childNodes))) {
+            if (!(isDomElement && childNodes.length === 0 && committedPortalContainers.has(element)) &&
+                !(isDomElement && shouldPreserveContentEditableChildren(element, props, childNodes))) {
                 syncChildNodes(element, childNodes);
             }
         }
         else if (fiber.subtreeFlags !== NoFlags) {
-            commitHostDirtyChildren(fiber.child, element, eventRoot, `${path}.c`, options);
+            commitHostDirtyChildrenOf(fiber, fiber.child, element, eventRoot, `${path}.c`, options);
         }
-        if (isDomHostElement(element)) {
+        if (isDomElement && isFormHostType(fiber.type)) {
             applyPostChildFormProps(element, props, previousProps);
         }
         applyChangedRef(previousProps?.ref, props.ref, element);
@@ -1192,15 +1716,20 @@ function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
                 fiber.memoizedState = childNodes;
             }
             else {
-                commitHostDirtyChildren(fiber.child, container, portalEventRoot, `${path}.portal`, portalOptions);
+                commitHostDirtyChildrenOf(fiber, fiber.child, container, portalEventRoot, `${path}.portal`, portalOptions);
             }
         }
         fiber.memoizedProps = fiber.pendingProps;
         finishCommittedFiber(fiber);
         return;
     }
+    if (fiber.tag === "reactive-dom-block") {
+        fiber.memoizedProps = fiber.pendingProps;
+        finishCommittedFiber(fiber);
+        return;
+    }
     if (fiber.subtreeFlags !== NoFlags) {
-        commitHostDirtyChildren(fiber.child, parent, eventRoot, path, options);
+        commitHostDirtyChildrenOf(fiber, fiber.child, parent, eventRoot, path, options);
     }
     fiber.memoizedProps = fiber.pendingProps;
     finishCommittedFiber(fiber);
@@ -1307,7 +1836,9 @@ function readAppendSuffixCommitHint(value) {
         : undefined;
 }
 function commitHostSingleRemoval(fiber, parent) {
-    const removed = getSingleRemovedFiber(fiber.alternate?.child, fiber.child);
+    const removed = fiber.deletions?.length === 1
+        ? fiber.deletions[0]
+        : getSingleRemovedFiber(fiber.alternate?.child, fiber.child);
     if (removed === undefined) {
         return false;
     }
@@ -1319,6 +1850,9 @@ function commitHostSingleRemoval(fiber, parent) {
         parent.removeChild(node);
         removedAny = true;
     }
+    if (removedAny) {
+        fiber.deletions = undefined;
+    }
     return removedAny;
 }
 function getAppendSuffix(current, next) {
@@ -1372,6 +1906,10 @@ function isSameFiberSlot(current, next) {
         current.key === next.key);
 }
 function collectCommittedHostNodes(fiber) {
+    if (fiber.tag === "reactive-dom-block") {
+        const node = getReactiveDomBlockNode(fiber.stateNode);
+        return node === undefined ? [] : [node];
+    }
     if ((fiber.tag === "host-component" || fiber.tag === "host-text") &&
         fiber.stateNode instanceof Node) {
         return [fiber.stateNode];
@@ -1385,6 +1923,9 @@ function collectCommittedHostNodes(fiber) {
     return nodes;
 }
 function hasCommittedHostNode(fiber) {
+    if (fiber.tag === "reactive-dom-block") {
+        return getReactiveDomBlockNode(fiber.stateNode) !== undefined;
+    }
     if ((fiber.tag === "host-component" || fiber.tag === "host-text") &&
         fiber.stateNode instanceof Node) {
         return true;
@@ -1428,6 +1969,12 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
         finishCommittedFiber(fiber);
         return [text];
     }
+    if (fiber.tag === "reactive-dom-block") {
+        const node = getReactiveDomBlockNode(fiber.stateNode);
+        fiber.memoizedProps = fiber.pendingProps;
+        finishCommittedFiber(fiber);
+        return node === undefined ? [] : [node];
+    }
     if (fiber.tag === "host-component") {
         const element = fiber.stateNode;
         if (!isHostElement(element)) {
@@ -1443,6 +1990,7 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
             fiber.memoizedProps = fiber.pendingProps;
             return [element];
         }
+        const isDomElement = isDomHostElement(element);
         const props = fiber.pendingProps;
         const previousProps = fiber.memoizedProps;
         const directTextChild = fiber.child === undefined && fiber.hydrateExisting !== true
@@ -1462,7 +2010,7 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
             !propsAreChildrenOnly &&
             fiber.hydrateExisting !== true &&
             isRowTextOnlyUpdate(fiber.memoizedProps, props);
-        if (isDomHostElement(element) && !propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+        if (isDomElement && !propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
             applyProps(element, props, path, {
                 ...options,
                 eventRoot,
@@ -1479,15 +2027,15 @@ 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 (!(isDomHostElement(element) && childNodes.length === 0 && committedPortalContainers.has(element)) &&
-                !(isDomHostElement(element) && shouldPreserveContentEditableChildren(element, props, childNodes))) {
+            if (!(isDomElement && childNodes.length === 0 && committedPortalContainers.has(element)) &&
+                !(isDomElement && shouldPreserveContentEditableChildren(element, props, childNodes))) {
                 syncChildNodes(element, childNodes);
             }
         }
         else if (fiber.subtreeFlags !== NoFlags) {
             commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
         }
-        if (isDomHostElement(element)) {
+        if (isDomElement && isFormHostType(fiber.type)) {
             applyPostChildFormProps(element, props, previousProps);
         }
         applyChangedRef(previousProps?.ref, props.ref, element);
@@ -1600,6 +2148,26 @@ function finishCommittedFiber(fiber) {
     fiber.subtreeChildListChanged = false;
     fiber.hostChildListChanged = false;
 }
+function getReactiveDomBlockNode(state) {
+    if (typeof state === "object" &&
+        state !== null &&
+        "node" in state &&
+        state.node instanceof Node) {
+        return state.node;
+    }
+    return undefined;
+}
+function disposeReactiveDomBlockState(state, seen) {
+    if (typeof state !== "object" || state === null || seen.has(state)) {
+        return;
+    }
+    seen.add(state);
+    const dispose = state.dispose;
+    if (typeof dispose === "function") {
+        dispose();
+        state.dispose = undefined;
+    }
+}
 function hasChildListMutation(fiber) {
     return fiber.childListChanged || fiber.subtreeChildListChanged;
 }
@@ -1746,6 +2314,12 @@ function getDirectHostTextChild(children) {
         ? String(children)
         : undefined;
 }
+// Only these host tags carry post-child form value/checked semantics. Gating on
+// the (cheap, already-known) type string lets the commit skip applyPostChildFormProps
+// and its instanceof probes for every other element.
+function isFormHostType(type) {
+    return type === "input" || type === "textarea" || type === "select";
+}
 const hostFastPathMode = (() => {
     try {
         // The literal process.env.NODE_ENV member expression is what bundler
@@ -2016,7 +2590,23 @@ function tryReuseMemoBailout(current, node, runtime, path, options, canReuseCurr
         !areMemoPropsEqual(node.type, previousMemoState.props, node.props)) {
         return undefined;
     }
-    const fiber = getMemoBailoutFiber(runtime, current, node.props, previousMemoState, canReuseCurrentFiber);
+    if (memoStateNeedsActiveInstanceMark(previousMemoState)) {
+        markActiveInstanceKeys(runtime, previousMemoState.instanceKeys);
+    }
+    const fiber = canReuseCurrentFiber &&
+        current.hasRefSubtree !== true &&
+        current.hasDisposableResources !== true &&
+        current.hydrateExisting !== true
+        ? current
+        : createWorkInProgress(current, node.props);
+    if (fiber === current) {
+        current.pendingProps = node.props;
+        current.flags = NoFlags;
+        current.subtreeFlags = NoFlags;
+        current.childListChanged = false;
+        current.subtreeChildListChanged = false;
+        current.hostChildListChanged = false;
+    }
     fiber.type = node.type;
     fiber.child = getSkippedChild(current);
     fiber.memoizedState = previousMemoState;
@@ -2239,6 +2829,24 @@ function isLazyType(value) {
 function collectInstanceKeys(runtime, prefix) {
     return collectRuntimeInstanceKeys(runtime, prefix);
 }
+function collectMemoInstanceKeys(runtime, prefix) {
+    return readDependencyFreeMemoInstanceKey(runtime, prefix) === undefined
+        ? collectInstanceKeys(runtime, prefix)
+        : emptyInstanceKeys;
+}
+function readDependencyFreeMemoInstanceKey(runtime, prefix) {
+    const keys = runtime.instanceKeysByPrefix.get(prefix);
+    if (keys === undefined || keys.size !== 1 || !keys.has(prefix)) {
+        return undefined;
+    }
+    const instance = runtime.instances.get(prefix);
+    if (instance === undefined ||
+        instance.contextDependencies !== undefined ||
+        (instance.hooks !== undefined && instance.hooks.length > 0)) {
+        return undefined;
+    }
+    return prefix;
+}
 function markActiveInstanceKeys(runtime, keys) {
     for (const key of keys) {
         runtime.activeInstanceKeys?.add(key);
@@ -2254,6 +2862,9 @@ function memoStateNeedsActiveInstanceMark(state) {
     return state.hasRetainedInstanceDependencies !== false;
 }
 function getMemoBailoutFiber(runtime, current, pendingProps, state, canReuseCurrentFiber) {
+    if (memoStateNeedsActiveInstanceMark(state)) {
+        markActiveInstanceKeys(runtime, state.instanceKeys);
+    }
     if (canReuseCurrentFiber && canReuseMemoBailoutFiber(current, state)) {
         current.pendingProps = pendingProps;
         current.flags = NoFlags;
@@ -2264,14 +2875,12 @@ function getMemoBailoutFiber(runtime, current, pendingProps, state, canReuseCurr
         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.hasDisposableResources !== true &&
         current.hydrateExisting !== true);
 }
 function hasDirtyInstanceDependencies(runtime, keys) {