@reckona/mreact-compat 0.0.185 → 0.0.187

package/dist/host-reconciler.js

@@ -12,8 +12,10 @@ import { isThenable } from "./thenable.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";
+import { withBatchedDelegatedRootReleases } from "@reckona/mreact-reactive-dom";
 const committedPortalContainers = new Set();
 const pendingHostRefUpdates = [];
+const pendingReactiveDomBlockAfterCommits = [];
 const emptyInstanceKeys = [];
 const SKIP_COMMIT_PATH = "\0";
 const hasOwnProperty = Object.prototype.hasOwnProperty;
@@ -106,25 +108,30 @@ export function commitHostFiberRoot(root, finishedWork, options = {}) {
         try {
             committedPortalContainers.clear();
             pendingHostRefUpdates.length = 0;
+            pendingReactiveDomBlockAfterCommits.length = 0;
             const commitPath = getRootCommitPath(options);
             if (!hasChildListMutation(finishedWork)) {
                 commitHostDirtyChildrenOf(finishedWork, finishedWork.child, root.container, root.container, commitPath, options);
+                flushPendingReactiveDomBlockAfterCommits();
                 committed = true;
                 return;
             }
             if (finishedWork.childListChanged &&
                 commitHostKeyedChildListMutationFiber(finishedWork, root.container, root.container, commitPath, options)) {
+                flushPendingReactiveDomBlockAfterCommits();
                 committed = true;
                 return;
             }
             if (!finishedWork.childListChanged &&
                 finishedWork.subtreeChildListChanged &&
                 commitHostKeyedChildListMutation(finishedWork.child, root.container, root.container, commitPath, options)) {
+                flushPendingReactiveDomBlockAfterCommits();
                 committed = true;
                 return;
             }
             const nodes = commitHostChildren(finishedWork.child, root.container, root.container, commitPath, options);
             syncChildNodes(root.container, nodes);
+            flushPendingReactiveDomBlockAfterCommits();
             committed = true;
         }
         finally {
@@ -144,9 +151,11 @@ export function commitHydratingHostFiberRoot(root, finishedWork, scope, options
         try {
             committedPortalContainers.clear();
             pendingHostRefUpdates.length = 0;
+            pendingReactiveDomBlockAfterCommits.length = 0;
             const eventRoot = root.container;
             const nodes = commitHostChildren(finishedWork.child, scope.parent, eventRoot, "", options);
             syncScopedChildNodes(scope.parent, scope.before, scope.after, nodes);
+            flushPendingReactiveDomBlockAfterCommits();
             committed = true;
         }
         finally {
@@ -155,6 +164,7 @@ export function commitHydratingHostFiberRoot(root, finishedWork, scope, options
             }
             else {
                 pendingHostRefUpdates.length = 0;
+                pendingReactiveDomBlockAfterCommits.length = 0;
             }
             committedPortalContainers.clear();
         }
@@ -168,23 +178,27 @@ 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);
+    withBatchedDelegatedRootReleases(() => {
+        // 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);
+    });
 }
 export function disposeUnretainedHostFiberResources(fiber, retained) {
     if (fiber === undefined || fiber.hasDisposableResources !== true || retained.has(fiber)) {
         return;
     }
-    const seen = new Set();
-    disposeUnretainedHostFiberSubtreeResources(fiber, seen, retained);
+    withBatchedDelegatedRootReleases(() => {
+        const seen = new Set();
+        disposeUnretainedHostFiberSubtreeResources(fiber, seen, retained);
+    });
 }
 function disposeHostFiberChildResources(fiber, seen) {
     let cursor = fiber;
@@ -496,6 +510,9 @@ function isStaticReactiveBlockComponent(type) {
     return (typeof type === "function" &&
         type[STATIC_REACTIVE_BLOCK_MARKER] === true);
 }
+function consumeReactiveDomBlockHydrationNode(previousNodes) {
+    return previousNodes === undefined || previousNodes.length === 0 ? 0 : 1;
+}
 function areCompilerMemoComparePropsEqual(memoType, previousProps, nextProps) {
     const keys = memoType[MEMO_COMPARE_PROPS_MARKER];
     if (keys === undefined) {
@@ -1322,7 +1339,7 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
                 setReactivePropCell(previousState.propCell, blockProps);
             }
             fiber.stateNode = previousState;
-            return { fiber, consumed: options.previousNodes?.length ?? 0 };
+            return { fiber, consumed: consumeReactiveDomBlockHydrationNode(options.previousNodes) };
         }
         const fiber = createFiber("reactive-dom-block", node.props, key);
         fiber.type = node.type;
@@ -1336,7 +1353,7 @@ function createHostFiberImpl(parent, current, node, key, runtime, path, options
         else {
             fiber.stateNode = render();
         }
-        return { fiber, consumed: options.previousNodes?.length ?? 0 };
+        return { fiber, consumed: consumeReactiveDomBlockHydrationNode(options.previousNodes) };
     }
     if (isReactCompatProvider(node.type)) {
         const fiber = current?.tag === "context-provider" && current.type === node.type
@@ -1865,6 +1882,7 @@ function commitHostDirtyFiber(fiber, parent, eventRoot, path, options = {}) {
             if (!(isDomElement && childNodes.length === 0 && committedPortalContainers.has(element)) &&
                 !(isDomElement && shouldPreserveContentEditableChildren(element, props, childNodes))) {
                 syncChildNodes(element, childNodes);
+                flushPendingReactiveDomBlockAfterCommits();
             }
         }
         else if (fiber.subtreeFlags !== NoFlags) {
@@ -2155,6 +2173,7 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
     }
     if (fiber.tag === "reactive-dom-block") {
         const node = getReactiveDomBlockNode(fiber.stateNode);
+        enqueueReactiveDomBlockAfterCommit(fiber.stateNode);
         fiber.memoizedProps = fiber.pendingProps;
         finishCommittedFiber(fiber);
         return node === undefined ? [] : [node];
@@ -2214,6 +2233,7 @@ function commitHostFiber(fiber, parent, eventRoot, path, options = {}) {
             if (!(isDomElement && childNodes.length === 0 && committedPortalContainers.has(element)) &&
                 !(isDomElement && shouldPreserveContentEditableChildren(element, props, childNodes))) {
                 syncChildNodes(element, childNodes);
+                flushPendingReactiveDomBlockAfterCommits();
             }
         }
         else if (fiber.subtreeFlags !== NoFlags) {
@@ -2341,6 +2361,18 @@ function getReactiveDomBlockNode(state) {
     }
     return undefined;
 }
+function enqueueReactiveDomBlockAfterCommit(state) {
+    const afterCommit = state?.afterCommit;
+    if (typeof afterCommit === "function") {
+        pendingReactiveDomBlockAfterCommits.push(afterCommit);
+    }
+}
+function flushPendingReactiveDomBlockAfterCommits() {
+    const pending = pendingReactiveDomBlockAfterCommits.splice(0);
+    for (const afterCommit of pending) {
+        afterCommit();
+    }
+}
 function disposeReactiveDomBlockState(state, seen) {
     if (typeof state !== "object" || state === null || seen.has(state)) {
         return;