@reckona/mreact-compat 0.0.90 → 0.0.92

package/src/hydration.ts

@@ -226,7 +226,7 @@ export function withHydrationComponentStack(
 export function reportElementTextMismatch(
   options: RenderOptions,
   path: string,
-  existing: HTMLElement,
+  existing: Element,
   children: ReactCompatNode,
 ): void {
   if (

package/src/index.ts

@@ -86,11 +86,11 @@ export {
   cache,
   cacheSignal,
   captureOwnerStack,
-  renderToString,
   startTransition,
   unstable_useCacheRefresh,
   useTransition,
   version,
 } from "./hooks.js";
+export { renderToString } from "./server-render.js";
 export type { StartTransition, TransitionScope } from "./hooks.js";
 export { default } from "./react-default.js";

package/src/react-default.ts

@@ -61,12 +61,12 @@ import {
   cache,
   cacheSignal,
   captureOwnerStack,
-  renderToString,
   startTransition,
   unstable_useCacheRefresh,
   useTransition,
   version,
 } from "./hooks.js";
+import { renderToString } from "./server-render.js";
 
 const ReactCompat = {
   Component,

package/src/reconciler.ts

@@ -16,12 +16,14 @@ import {
   type ReactCompatPortal,
 } from "./element.js";
 import {
+  consumerContext,
   isReactCompatConsumer,
   isReactCompatProvider,
   renderWithContextProvider,
   useContext,
 } from "./context.js";
 import {
+  clearRuntimePortalNodes,
   hasStableExternalStores,
   restoreRuntimeSnapshot,
   renderWithProfiler,
@@ -32,8 +34,16 @@ import {
 } from "./hooks.js";
 import { commitDevToolsRoot } from "./devtools.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 "./events.js";
+import {
+  createHostElement,
+  hostElementMatches,
+  isHostElement,
+  namespaceForHostChildren,
+  namespaceForHostElement,
+  type HostNamespace,
+} from "./dom-host-rules.js";
 import {
   getHydrationScope,
   reportElementTextMismatch,
@@ -58,6 +68,7 @@ import { areMemoPropsEqual } from "./prop-comparison.js";
 import type { ReconcileResult } from "./reconcile-types.js";
 
 const nodeKeys = new WeakMap<Node, string>();
+type ReconcileOptions = RenderOptions & { namespace?: HostNamespace };
 
 interface MemoRenderState {
   props: Record<string, unknown>;
@@ -81,10 +92,7 @@ export function renderIntoContainer(
     let committed = false;
 
     try {
-      for (const portalContainer of runtime.portalContainers) {
-        portalContainer.replaceChildren();
-      }
-      runtime.portalContainers.clear();
+      clearRuntimePortalNodes(runtime);
 
       const scope = getHydrationScope(container, options.resumeId);
       const renderOptions = { ...options, eventRoot: container };
@@ -126,7 +134,7 @@ function reconcileNodeList(
   node: ReactCompatNode,
   runtime: RootRuntime,
   path: string,
-  options: RenderOptions = {},
+  options: ReconcileOptions = {},
 ): Node[] {
   const result = reconcileNode(parent, previousNodes, node, runtime, path, options);
   return result.nodes;
@@ -138,7 +146,7 @@ function reconcileNode(
   node: ReactCompatNode,
   runtime: RootRuntime,
   path: string,
-  options: RenderOptions = {},
+  options: ReconcileOptions = {},
 ): ReconcileResult {
   if (node === null || node === undefined || typeof node === "boolean") {
     return { nodes: [], consumed: 0 };
@@ -185,19 +193,21 @@ function reconcilePortal(
   parent: ParentNode,
   runtime: RootRuntime,
   path: string,
-  options: RenderOptions = {},
+  options: ReconcileOptions = {},
 ): ReconcileResult {
   runtime.portalContainers.add(portal.container);
   setLogicalEventParent(portal.container, parent);
+  const previousNodes = Array.from(runtime.portalNodes.get(portal.container) ?? []);
   const nodes = reconcileNodeList(
     portal.container,
-    Array.from(portal.container.childNodes),
+    previousNodes,
     portal.children,
     runtime,
     `${path}.portal`,
     { ...options, eventRoot: portal.container },
   );
-  syncChildNodes(portal.container, nodes);
+  syncOwnedChildNodes(portal.container, previousNodes, nodes);
+  runtime.portalNodes.set(portal.container, new Set(nodes));
   return { nodes: [], consumed: 0 };
 }
 
@@ -254,7 +264,7 @@ function reconcileElement(
   element: ReactCompatElement,
   runtime: RootRuntime,
   path: string,
-  options: RenderOptions = {},
+  options: ReconcileOptions = {},
 ): ReconcileResult {
   if (element.type === Fragment) {
     return reconcileNode(
@@ -390,7 +400,7 @@ function reconcileElement(
     return reconcileNode(
       parent,
       previousNodes,
-      render(useContext(elementType.context)),
+      render(useContext(consumerContext(elementType))),
       runtime,
       `${path}.consumer`,
       options,
@@ -407,6 +417,7 @@ function reconcileElement(
         `${path}.forwardRef`,
         options,
       ),
+      elementType,
     );
   }
 
@@ -515,6 +526,7 @@ function reconcileElement(
         `${path}.0`,
         withHydrationComponentStack(options, getComponentName(functionComponent)),
       ),
+      functionComponent,
     );
   }
 
@@ -522,15 +534,17 @@ function reconcileElement(
     throw new Error("Invalid react-compat element type.");
   }
 
+  const elementNamespace = namespaceForHostElement(options.namespace ?? "html", elementType);
+  const childNamespace = namespaceForHostChildren(elementNamespace, elementType);
   const existing = previousNodes[0];
   if (existing === undefined) {
     reportMissingHydrationNode(options, path);
-  } else if (!(existing instanceof HTMLElement)) {
+  } else if (!isHostElement(existing)) {
     reportHydrationNodeTypeMismatch(options, path, `<${elementType}>`, existing);
   }
   if (
-    existing instanceof HTMLElement &&
-    existing.tagName.toLowerCase() !== elementType
+    isHostElement(existing) &&
+    !hostElementMatches(existing, elementType, elementNamespace)
   ) {
     reportRecoverable(
       options,
@@ -543,17 +557,17 @@ function reconcileElement(
     reportElementTextMismatch(options, `${path}.c`, existing, element.props.children);
   }
   const domElement =
-    existing instanceof HTMLElement &&
-    existing.tagName.toLowerCase() === elementType
+    isHostElement(existing) &&
+    hostElementMatches(existing, elementType, elementNamespace)
       ? existing
-      : document.createElement(elementType);
+      : createHostElement(document, elementType, options.namespace ?? "html");
 
   applyProps(domElement, element.props, path, {
     ...options,
     preserveHydrationAttributes:
       options.hydration !== undefined &&
-      existing instanceof HTMLElement &&
-      existing.tagName.toLowerCase() === elementType,
+      isHostElement(existing) &&
+      hostElementMatches(existing, elementType, elementNamespace),
   });
   const previousChildNodes = Array.from(domElement.childNodes);
   const childResult = reconcileNode(
@@ -562,7 +576,7 @@ function reconcileElement(
     element.props.children,
     runtime,
     `${path}.c`,
-    options,
+    { ...options, namespace: childNamespace },
   );
   reportExtraHydrationNodes(
     options,
@@ -570,12 +584,37 @@ function reconcileElement(
     previousChildNodes,
     childResult.consumed,
   );
-  syncChildNodes(domElement, childResult.nodes);
+  if (!shouldPreserveContentEditableChildren(domElement, element.props, childResult.nodes)) {
+    syncChildNodes(domElement, childResult.nodes);
+  }
   applyPostChildFormProps(domElement, element.props);
   applyRef(element.ref, domElement);
   return { nodes: [domElement], consumed: existing === undefined ? 0 : 1 };
 }
 
+function shouldPreserveContentEditableChildren(
+  element: Element,
+  props: Record<string, unknown>,
+  childNodes: readonly Node[],
+): boolean {
+  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 collectKeyedNodes(nodes: readonly Node[]): Map<string, Node> {
   const keyedNodes = new Map<string, Node>();
 

package/src/root.ts

@@ -1,5 +1,6 @@
 import type { ReactCompatNode } from "./element.js";
 import {
+  clearRuntimePortalNodes,
   createRootRuntime,
   flushSyncUpdates,
   hasStableExternalStores,
@@ -30,7 +31,7 @@ import {
   createContainerFiberRoot,
   enqueueRootRender,
 } from "./fiber-work-loop.js";
-import { commitFiberRoot } from "./fiber-commit.js";
+import { commitFiberRoot, detachFiberRefs } from "./fiber-commit.js";
 import {
   canRenderHostFiber,
   commitHydratingHostFiberRoot,
@@ -122,9 +123,10 @@ export function createRoot(
     unmount() {
       runtime.currentElement = undefined;
       runtime.dispose();
+      detachFiberRefs(fiberRoot.current);
       runtime.instances.clear();
       unmountDevToolsRoot(container);
-      container.replaceChildren();
+      clearElementChildren(container);
     },
   };
 }
@@ -140,10 +142,7 @@ function renderHostFiberIntoContainer(
     let committed = false;
 
     try {
-      for (const portalContainer of runtime.portalContainers) {
-        portalContainer.replaceChildren();
-      }
-      runtime.portalContainers.clear();
+      clearRuntimePortalNodes(runtime);
 
       const finishedWork = renderHostFiberRoot(fiberRoot, element, runtime);
 
@@ -153,6 +152,7 @@ function renderHostFiberIntoContainer(
 
       fiberRoot.finishedWork = finishedWork;
       commitFiberRoot(fiberRoot);
+      collectPortalNodes(fiberRoot.current, runtime);
       commitDevToolsRoot(container, fiberRoot);
       committed = true;
       return finishedWork;
@@ -182,10 +182,7 @@ function renderHydratingHostFiberIntoContainer(
     let committed = false;
 
     try {
-      for (const portalContainer of runtime.portalContainers) {
-        portalContainer.replaceChildren();
-      }
-      runtime.portalContainers.clear();
+      clearRuntimePortalNodes(runtime);
 
       const scope = getHydrationScope(container, options.resumeId);
       const finishedWork = renderHydratingHostFiberRoot(
@@ -206,6 +203,7 @@ function renderHydratingHostFiberIntoContainer(
       fiberRoot.finishedWork = undefined;
       fiberRoot.workInProgress = undefined;
       fiberRoot.workInProgressRootRenderLanes = 0;
+      collectPortalNodes(fiberRoot.current, runtime);
       commitDevToolsRoot(container, fiberRoot);
       committed = true;
       return finishedWork;
@@ -286,9 +284,10 @@ export function hydrateRoot(
     unmount() {
       runtime.currentElement = undefined;
       runtime.dispose();
+      detachFiberRefs(fiberRoot.current);
       runtime.instances.clear();
       unmountDevToolsRoot(container);
-      container.replaceChildren();
+      clearElementChildren(container);
     },
   };
 
@@ -411,10 +410,54 @@ export function unmountComponentAtNode(container: Element): boolean {
   }
 
   const hadChildren = container.childNodes.length > 0;
-  container.replaceChildren();
+  clearElementChildren(container);
   return hadChildren;
 }
 
+function clearElementChildren(element: Element): void {
+  if (typeof element.replaceChildren === "function") {
+    element.replaceChildren();
+    return;
+  }
+
+  while (element.firstChild !== null) {
+    element.removeChild(element.firstChild);
+  }
+}
+
+function collectPortalNodes(fiber: Fiber | undefined, runtime: RootRuntime): void {
+  if (fiber === undefined || runtime.portalContainers.size === 0) {
+    return;
+  }
+
+  const deferredSiblings: Fiber[] = [];
+  let cursor: Fiber | undefined = fiber;
+
+  while (cursor !== undefined) {
+    if (cursor.tag === "portal" && cursor.stateNode instanceof Element) {
+      const nodes = Array.isArray(cursor.memoizedState)
+        ? cursor.memoizedState.filter((node): node is Node => node instanceof Node)
+        : [];
+      runtime.portalContainers.add(cursor.stateNode);
+      const ownedNodes = runtime.portalNodes.get(cursor.stateNode) ?? new Set<Node>();
+      for (const node of nodes) {
+        ownedNodes.add(node);
+      }
+      runtime.portalNodes.set(cursor.stateNode, ownedNodes);
+    }
+
+    if (cursor.child !== undefined) {
+      if (cursor.sibling !== undefined) {
+        deferredSiblings.push(cursor.sibling);
+      }
+      cursor = cursor.child;
+      continue;
+    }
+
+    cursor = cursor.sibling ?? deferredSiblings.pop();
+  }
+}
+
 function resolveSelectiveHydrationBoundary(
   container: Element,
   event: Event,