@reckona/mreact-compat 0.0.164 → 0.0.165

package/src/host-reconciler.ts

@@ -27,13 +27,15 @@ import {
 import { applyPostChildFormProps, applyProps } from "./dom-props.js";
 import { syncChildNodes, syncOwnedChildNodes, syncScopedChildNodes } from "./dom-children.js";
 import { setLogicalEventParent } from "./host-event-binder.js";
-import { NoFlags, Placement, Update } from "./fiber-flags.js";
+import { ChildDeletion, NoFlags, Placement, Update } from "./fiber-flags.js";
 import {
   createHostElement,
   hostElementMatches,
+  isDomHostElement,
   isHostElement,
   namespaceForHostChildren,
   namespaceForHostElement,
+  type CustomHostDocument,
   type HostNamespace,
 } from "./dom-host-rules.js";
 import { createFiber, createWorkInProgress, type Fiber, type FiberRoot } from "./fiber.js";
@@ -90,13 +92,14 @@ interface SuspenseFiberState {
 }
 
 const committedPortalContainers = new Set<Element>();
+const pendingHostRefUpdates: { ref: unknown; node: unknown }[] = [];
 
 interface FiberHydrationOptions extends RenderOptions {
   previousNodes?: readonly Node[];
   resumeId?: string;
   consumeResumeMarkers?: boolean;
   namespace?: HostNamespace;
-  documentRef?: Document;
+  documentRef?: Document | CustomHostDocument;
 }
 
 const SKIP_COMMIT_PATH = "\0";
@@ -107,6 +110,11 @@ interface FiberReconcileResult {
   consumed: number;
 }
 
+interface AppendSuffixCommitHint {
+  fiber: Fiber;
+  index: number;
+}
+
 interface ReactSuspenseBoundary {
   previousNodes?: Node[];
   consumed: number;
@@ -241,11 +249,14 @@ export function commitHostFiberRoot(
   options: RenderOptions = {},
 ): void {
   runWithHostCommit(() => {
+    let committed = false;
     try {
       committedPortalContainers.clear();
+      pendingHostRefUpdates.length = 0;
       const commitPath = getRootCommitPath(options);
       if (!hasChildListMutation(finishedWork)) {
         commitHostDirtyChildren(finishedWork.child, root.container, root.container, commitPath, options);
+        committed = true;
         return;
       }
 
@@ -254,12 +265,19 @@ export function commitHostFiberRoot(
         finishedWork.subtreeChildListChanged &&
         commitHostKeyedChildListMutation(finishedWork.child, root.container, root.container, commitPath, options)
       ) {
+        committed = true;
         return;
       }
 
       const nodes = commitHostChildren(finishedWork.child, root.container, root.container, commitPath, options);
       syncChildNodes(root.container, nodes);
+      committed = true;
     } finally {
+      if (committed) {
+        flushPendingHostRefUpdates();
+      } else {
+        pendingHostRefUpdates.length = 0;
+      }
       committedPortalContainers.clear();
     }
   });
@@ -272,12 +290,20 @@ export function commitHydratingHostFiberRoot(
   options: FiberHydrationOptions = {},
 ): void {
   runWithHostCommit(() => {
+    let committed = false;
     try {
       committedPortalContainers.clear();
+      pendingHostRefUpdates.length = 0;
       const eventRoot = root.container;
       const nodes = commitHostChildren(finishedWork.child, scope.parent, eventRoot, "", options);
       syncScopedChildNodes(scope.parent, scope.before, scope.after, nodes);
+      committed = true;
     } finally {
+      if (committed) {
+        flushPendingHostRefUpdates();
+      } else {
+        pendingHostRefUpdates.length = 0;
+      }
       committedPortalContainers.clear();
     }
   });
@@ -303,6 +329,9 @@ function reconcileHostChild(
 
   if (node === null || node === undefined || typeof node === "boolean") {
     parent.childListChanged = currentFirstChild !== undefined;
+    if (currentFirstChild !== undefined) {
+      markOptimizedChildrenForDeletion(parent, currentFirstChild);
+    }
     return { fiber: undefined, consumed: 0 };
   }
 
@@ -324,6 +353,8 @@ function reconcileHostChild(
   let previous: Fiber | undefined;
   let consumed = 0;
   let skipRemainingKeyedLookup = false;
+  const usedCurrentChildren =
+    currentFirstChild === undefined ? undefined : new Set<Fiber>();
 
   for (let index = 0; index < childCount; index += 1) {
     const child = children === undefined ? node : children[index];
@@ -376,9 +407,20 @@ function reconcileHostChild(
     const fiber = result.fiber;
 
     if (fiber === undefined) {
+      if (matchedCurrent !== undefined) {
+        usedCurrentChildren?.add(matchedCurrent);
+        markOptimizedChildForDeletion(parent, matchedCurrent);
+      }
       continue;
     }
 
+    if (matchedCurrent !== undefined) {
+      usedCurrentChildren?.add(matchedCurrent);
+      if (fiber !== matchedCurrent && fiber.alternate !== matchedCurrent) {
+        markOptimizedChildForDeletion(parent, matchedCurrent);
+      }
+    }
+
     if (key === undefined) {
       currentUnkeyed = currentUnkeyed?.sibling;
     }
@@ -407,6 +449,7 @@ function reconcileHostChild(
     previous = fiber;
   }
 
+  markUnusedCurrentChildrenForDeletion(parent, currentFirstChild, usedCurrentChildren);
   parent.childListChanged = childFiberListShapeChanged(currentFirstChild, first);
 
   return { fiber: first, consumed };
@@ -435,6 +478,7 @@ function reconcileKeyedRowHostChildren(
   let subtreeFlags = NoFlags;
   let subtreeChildListChanged = false;
   let hasRefSubtree = false;
+  let appendSuffix: AppendSuffixCommitHint | undefined;
   const canReuseUnchangedRows = hasSameKeyOrderPrefix(currentFirstChild, children);
   const row = createKeyedRowHostElementScratch();
 
@@ -446,12 +490,14 @@ function reconcileKeyedRowHostChildren(
     }
 
     let matchedCurrent: Fiber | undefined;
+    let matchedByAppendSuffix = false;
 
     if (skipRemainingKeyedLookup) {
       matchedCurrent = undefined;
     } else if (currentKeyed === undefined) {
       listShapeChanged = true;
       skipRemainingKeyedLookup = true;
+      matchedByAppendSuffix = true;
       matchedCurrent = undefined;
     } else if (currentKeyed?.key === row.key) {
       matchedCurrent = currentKeyed;
@@ -460,11 +506,15 @@ function reconcileKeyedRowHostChildren(
       currentKeyed?.sibling?.key === row.key &&
       canSkipSingleDeletedKeyedFiber(children, index, currentKeyed.sibling)
     ) {
+      const deleted = currentKeyed;
+      const matched = currentKeyed.sibling;
       listShapeChanged = true;
-      matchedCurrent = currentKeyed.sibling;
-      currentKeyed = currentKeyed.sibling.sibling;
+      markOptimizedChildForDeletion(parent, deleted);
+      matchedCurrent = matched;
+      currentKeyed = matched.sibling;
     } else if (canSkipRemainingKeyedLookup(currentKeyed, children, index)) {
       listShapeChanged = true;
+      markOptimizedChildrenForDeletion(parent, currentKeyed);
       skipRemainingKeyedLookup = true;
       currentKeyed = undefined;
       matchedCurrent = undefined;
@@ -478,6 +528,10 @@ function reconcileKeyedRowHostChildren(
         : (canReuseUnchangedRows ? getReusableKeyedRowHostFiber(matchedCurrent, row) : undefined) ??
           createKeyedRowHostFiber(parent, matchedCurrent, row, options);
 
+    if (matchedByAppendSuffix && appendSuffix === undefined) {
+      appendSuffix = { fiber, index };
+    }
+
     if (first === undefined) {
       first = fiber;
     } else if (previous !== undefined) {
@@ -502,15 +556,55 @@ function reconcileKeyedRowHostChildren(
 
   if (currentKeyed !== undefined) {
     listShapeChanged = true;
+    markOptimizedChildrenForDeletion(parent, currentKeyed);
   }
 
   parent.hasRefSubtree = hasRefSubtree;
   parent.subtreeFlags = subtreeFlags;
   parent.subtreeChildListChanged = subtreeChildListChanged;
   parent.childListChanged = listShapeChanged;
+  if (appendSuffix !== undefined && canStoreAppendSuffixCommitHint(parent)) {
+    parent.memoizedState = appendSuffix;
+  }
   return { fiber: first, consumed: 0 };
 }
 
+function canStoreAppendSuffixCommitHint(parent: Fiber): boolean {
+  return (
+    parent.tag === "fragment" ||
+    parent.tag === "host-component" ||
+    parent.tag === "host-root"
+  );
+}
+
+function markOptimizedChildForDeletion(parent: Fiber, _child: Fiber): void {
+  parent.flags |= ChildDeletion;
+}
+
+function markOptimizedChildrenForDeletion(parent: Fiber, _firstChild: Fiber): void {
+  parent.flags |= ChildDeletion;
+}
+
+function markUnusedCurrentChildrenForDeletion(
+  parent: Fiber,
+  firstChild: Fiber | undefined,
+  used: ReadonlySet<Fiber> | undefined,
+): void {
+  if (firstChild === undefined || used === undefined) {
+    return;
+  }
+
+  let cursor: Fiber | undefined = firstChild;
+
+  while (cursor !== undefined) {
+    if (!used.has(cursor)) {
+      parent.flags |= ChildDeletion;
+      return;
+    }
+    cursor = cursor.sibling;
+  }
+}
+
 function hasSameKeyOrderPrefix(
   currentFirstChild: Fiber,
   children: readonly ReactCompatNode[],
@@ -927,7 +1021,7 @@ function createHostFiberImpl(
         ? existing
         : current?.tag === "host-text" && current.stateNode instanceof Text
           ? current.stateNode
-          : getDocumentRef(options).createTextNode("");
+          : createHostTextNode(getDocumentRef(options));
 
     if (existing instanceof Text && existing.data !== String(node)) {
       reportRecoverable(
@@ -1627,13 +1721,12 @@ function commitHostDirtyFiber(
       fiber.hydrateExisting !== true &&
       isRowTextOnlyUpdate(fiber.memoizedProps, props);
 
-    if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+    if (isDomHostElement(element) && !propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
       applyProps(element, props, path, {
         ...options,
         eventRoot,
         preserveHydrationAttributes: fiber.hydrateExisting,
       });
-      applyChangedRef(previousProps?.ref, props.ref, element);
     }
 
     if (directTextChild !== undefined) {
@@ -1646,16 +1739,19 @@ function commitHostDirtyFiber(
     ) {
       const childNodes = commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
       if (
-        !(childNodes.length === 0 && committedPortalContainers.has(element)) &&
-        !shouldPreserveContentEditableChildren(element, props, childNodes)
+        !(isDomHostElement(element) && childNodes.length === 0 && committedPortalContainers.has(element)) &&
+        !(isDomHostElement(element) && shouldPreserveContentEditableChildren(element, props, childNodes))
       ) {
-        syncChildNodes(element, childNodes);
+        syncChildNodes(element as ParentNode, childNodes);
       }
     } else if (fiber.subtreeFlags !== NoFlags) {
       commitHostDirtyChildren(fiber.child, element, eventRoot, `${path}.c`, options);
     }
 
-    applyPostChildFormProps(element, props, previousProps);
+    if (isDomHostElement(element)) {
+      applyPostChildFormProps(element, props, previousProps);
+    }
+    applyChangedRef(previousProps?.ref, props.ref, element);
     fiber.memoizedProps = props;
     finishCommittedFiber(fiber);
     return;
@@ -1664,9 +1760,42 @@ function commitHostDirtyFiber(
   if (fiber.tag === "portal") {
     const container = fiber.stateNode;
 
-    if (container instanceof Element) {
-      setLogicalEventParent(container, parent);
-      commitHostDirtyChildren(fiber.child, container, container, `${path}.portal`, options);
+    if (isPortalHostContainer(container)) {
+      if (container instanceof Element) {
+        setLogicalEventParent(container, parent);
+      }
+      const portalEventRoot =
+        container instanceof Element && eventRoot !== container && eventRoot.contains(container)
+          ? eventRoot
+          : container instanceof Element
+          ? container
+          : eventRoot;
+      const portalOptions = withPortalDocumentRef(options, container);
+
+      if (
+        fiber.childListChanged ||
+        fiber.subtreeChildListChanged ||
+        (fiber.subtreeFlags & Placement) !== NoFlags
+      ) {
+        const childNodes = commitHostChildren(
+          fiber.child,
+          container as ParentNode,
+          portalEventRoot,
+          `${path}.portal`,
+          portalOptions,
+        );
+        const previousNodes = committedHostNodesFromState(fiber.alternate?.memoizedState);
+        syncOwnedChildNodes(container as ParentNode, previousNodes, childNodes);
+        fiber.memoizedState = childNodes;
+      } else {
+        commitHostDirtyChildren(
+          fiber.child,
+          container as ParentNode,
+          portalEventRoot,
+          `${path}.portal`,
+          portalOptions,
+        );
+      }
     }
     fiber.memoizedProps = fiber.pendingProps;
     finishCommittedFiber(fiber);
@@ -1737,6 +1866,11 @@ function commitHostKeyedChildListMutationFiber(
   path: string,
   options: RenderOptions = {},
 ): boolean {
+  if (fiber.tag === "portal") {
+    commitHostDirtyFiber(fiber, parent, eventRoot, path, options);
+    return true;
+  }
+
   if (fiber.childListChanged) {
     const mutationParent =
       fiber.tag === "host-component" && isHostElement(fiber.stateNode)
@@ -1793,17 +1927,28 @@ function commitHostAppendSuffix(
   path: string,
   options: RenderOptions,
 ): boolean {
-  const append = getAppendSuffix(fiber.alternate?.child, fiber.child);
+  const appendHint = readAppendSuffixCommitHint(fiber.memoizedState);
+  const append = appendHint ?? getAppendSuffix(fiber.alternate?.child, fiber.child);
 
   if (append === undefined) {
     return false;
   }
 
+  if (appendHint !== undefined) {
+    fiber.memoizedState = undefined;
+  }
+
   let cursor: Fiber | undefined = append.fiber;
   let index = append.index;
 
   while (cursor !== undefined) {
-    for (const node of commitHostFiber(cursor, parent, eventRoot, joinCommitPath(path, String(index)), options)) {
+    for (const node of commitHostFiber(
+      cursor,
+      parent,
+      eventRoot,
+      joinCommitPath(path, String(index)),
+      options,
+    )) {
       parent.appendChild(node);
     }
     cursor = cursor.sibling;
@@ -1813,6 +1958,17 @@ function commitHostAppendSuffix(
   return true;
 }
 
+function readAppendSuffixCommitHint(value: unknown): AppendSuffixCommitHint | undefined {
+  if (typeof value !== "object" || value === null) {
+    return undefined;
+  }
+
+  const candidate = value as Partial<AppendSuffixCommitHint>;
+  return candidate.fiber !== undefined && typeof candidate.index === "number"
+    ? { fiber: candidate.fiber, index: candidate.index }
+    : undefined;
+}
+
 function commitHostSingleRemoval(fiber: Fiber, parent: ParentNode): boolean {
   const removed = getSingleRemovedFiber(fiber.alternate?.child, fiber.child);
 
@@ -2016,13 +2172,12 @@ function commitHostFiber(
       fiber.hydrateExisting !== true &&
       isRowTextOnlyUpdate(fiber.memoizedProps, props);
 
-    if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
+    if (isDomHostElement(element) && !propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
       applyProps(element, props, path, {
         ...options,
         eventRoot,
         preserveHydrationAttributes: fiber.hydrateExisting,
       });
-      applyChangedRef(previousProps?.ref, props.ref, element);
     }
     if (directTextChild !== undefined) {
       const text = syncDirectHostTextChild(element, directTextChild);
@@ -2036,16 +2191,19 @@ function commitHostFiber(
     ) {
       const childNodes = commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
       if (
-        !(childNodes.length === 0 && committedPortalContainers.has(element)) &&
-        !shouldPreserveContentEditableChildren(element, props, childNodes)
+        !(isDomHostElement(element) && childNodes.length === 0 && committedPortalContainers.has(element)) &&
+        !(isDomHostElement(element) && shouldPreserveContentEditableChildren(element, props, childNodes))
       ) {
-        syncChildNodes(element, childNodes);
+        syncChildNodes(element as ParentNode, childNodes);
       }
     } else if (fiber.subtreeFlags !== NoFlags) {
       commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
     }
 
-    applyPostChildFormProps(element, props, previousProps);
+    if (isDomHostElement(element)) {
+      applyPostChildFormProps(element, props, previousProps);
+    }
+    applyChangedRef(previousProps?.ref, props.ref, element);
     fiber.memoizedProps = props;
     finishCommittedFiber(fiber);
     return [element];
@@ -2138,25 +2296,30 @@ function commitHostFiber(
   if (fiber.tag === "portal") {
     const container = fiber.stateNode;
 
-    if (!(container instanceof Element)) {
+    if (!isPortalHostContainer(container)) {
       return [];
     }
 
-    setLogicalEventParent(container, parent);
-    committedPortalContainers.add(container);
+    if (container instanceof Element) {
+      setLogicalEventParent(container, parent);
+      committedPortalContainers.add(container);
+    }
     const portalEventRoot =
-      eventRoot !== container && eventRoot.contains(container) ? eventRoot : container;
+      container instanceof Element && eventRoot !== container && eventRoot.contains(container)
+        ? eventRoot
+        : container instanceof Element
+        ? container
+        : eventRoot;
+    const portalOptions = withPortalDocumentRef(options, container);
     const childNodes = commitHostChildren(
       fiber.child,
-      container,
+      container as ParentNode,
       portalEventRoot,
       `${path}.portal`,
-      options,
+      portalOptions,
     );
-    const previousNodes = Array.isArray(fiber.alternate?.memoizedState)
-      ? fiber.alternate.memoizedState.filter((node): node is Node => node instanceof Node)
-      : [];
-    syncOwnedChildNodes(container, previousNodes, childNodes);
+    const previousNodes = committedHostNodesFromState(fiber.alternate?.memoizedState);
+    syncOwnedChildNodes(container as ParentNode, previousNodes, childNodes);
     fiber.memoizedState = childNodes;
     fiber.memoizedProps = fiber.pendingProps;
     finishCommittedFiber(fiber);
@@ -2968,10 +3131,18 @@ function normalizeChildren(node: ReactCompatNode): ReactCompatNode[] {
   return Array.isArray(node) ? node : [node];
 }
 
-function getDocumentRef(options: FiberHydrationOptions): Document {
+function getDocumentRef(options: FiberHydrationOptions): Document | CustomHostDocument {
   return options.documentRef ?? document;
 }
 
+function createHostTextNode(documentRef: Document | CustomHostDocument): Text {
+  if ("createTextNode" in documentRef && typeof documentRef.createTextNode === "function") {
+    return documentRef.createTextNode("");
+  }
+
+  return document.createTextNode("");
+}
+
 function collectExistingKeyedFibers(
   firstChild: Fiber | undefined,
 ): Map<string, Fiber> {
@@ -3184,6 +3355,64 @@ function applyChangedRef(previousRef: unknown, nextRef: unknown, node: unknown):
     return;
   }
 
-  applyRef(previousRef, null);
-  applyRef(nextRef, node);
+  queueHostRefUpdate(previousRef, null);
+  queueHostRefUpdate(nextRef, node);
+}
+
+function queueHostRefUpdate(ref: unknown, node: unknown): void {
+  if (ref === null || ref === undefined) {
+    return;
+  }
+
+  pendingHostRefUpdates.push({ ref, node });
+}
+
+function flushPendingHostRefUpdates(): void {
+  const pending = pendingHostRefUpdates.splice(0);
+  for (const { ref, node } of pending) {
+    applyRef(ref, node);
+  }
+}
+
+function isPortalHostContainer(value: unknown): value is ParentNode {
+  if (value instanceof Element) {
+    return true;
+  }
+
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+
+  const candidate = value as Partial<ParentNode> & {
+    ownerDocument?: { createElement?: unknown };
+  };
+  return (
+    typeof candidate.appendChild === "function" &&
+    typeof candidate.insertBefore === "function" &&
+    typeof candidate.removeChild === "function" &&
+    typeof candidate.ownerDocument?.createElement === "function"
+  );
+}
+
+function withPortalDocumentRef(
+  options: RenderOptions,
+  container: ParentNode,
+): RenderOptions & { documentRef?: Document | CustomHostDocument } {
+  const ownerDocument = (container as { ownerDocument?: unknown }).ownerDocument;
+  if (
+    typeof ownerDocument === "object" &&
+    ownerDocument !== null &&
+    typeof (ownerDocument as { createElement?: unknown }).createElement === "function"
+  ) {
+    return {
+      ...options,
+      documentRef: ownerDocument as Document | CustomHostDocument,
+    };
+  }
+
+  return options;
+}
+
+function committedHostNodesFromState(state: unknown): Node[] {
+  return Array.isArray(state) ? state as Node[] : [];
 }

package/src/root.ts

@@ -6,7 +6,7 @@ import {
   type RenderPriority,
   type RootRuntime,
 } from "./hooks.js";
-import { removeChildIfPresent } from "./dom-children.js";
+import { collectOwnedChildNodes, removeChildIfPresent } from "./dom-children.js";
 import { commitDevToolsRoot, unmountDevToolsRoot } from "./devtools.js";
 import {
   applyStreamingHydrationFragments,
@@ -532,7 +532,8 @@ function removeStalePortalNodes(
   snapshot: PortalRenderSnapshot,
   runtime: RootRuntime,
 ): void {
-  for (const [container, nodes] of snapshot.nodes) {
+  for (const container of snapshot.containers) {
+    const nodes = snapshot.nodes.get(container) ?? new Set(collectOwnedChildNodes(container));
     const currentNodes = runtime.portalNodes.get(container);
 
     for (const node of nodes) {