@reckona/mreact-compat 0.0.183 → 0.0.184

package/src/root.ts

@@ -32,6 +32,10 @@ import {
   enqueueRootRender,
 } from "./fiber-work-loop.js";
 import { commitFiberRoot, detachFiberRefs } from "./fiber-commit.js";
+import {
+  withBatchedDelegatedRootReleases,
+  withDeferredDelegatedEventPromotions,
+} from "@reckona/mreact-reactive-dom";
 import {
   canRenderHostFiber,
   commitHydratingHostFiberRoot,
@@ -40,7 +44,6 @@ import {
   renderHostFiberRoot,
 } from "./fiber-host.js";
 import type { Fiber, FiberRoot } from "./fiber.js";
-import { renderIntoContainer } from "./reconciler.js";
 
 /** Root controller returned by createRoot and hydrateRoot. */
 export interface Root {
@@ -113,7 +116,7 @@ export function createRoot(
           );
         }
 
-        renderIntoContainer(container, runtime.currentElement, runtime);
+        throwUnsupportedRootNode();
       });
     }
   }, options);
@@ -126,17 +129,19 @@ export function createRoot(
           return renderHostFiberIntoContainer(container, fiberRoot, runtime, element);
         }
 
-        renderIntoContainer(container, element, runtime);
+        throwUnsupportedRootNode();
       });
     },
     unmount() {
-      runtime.currentElement = undefined;
-      runtime.dispose();
-      detachFiberRefs(fiberRoot.current);
-      disposeHostFiberResources(fiberRoot.current);
-      runtime.instances.clear();
-      unmountDevToolsRoot(container);
-      clearElementChildren(container);
+      withBatchedDelegatedRootReleases(() => {
+        runtime.currentElement = undefined;
+        runtime.dispose();
+        detachFiberRefs(fiberRoot.current);
+        disposeHostFiberResources(fiberRoot.current);
+        runtime.instances.clear();
+        unmountDevToolsRoot(container);
+        clearElementChildren(container);
+      });
     },
   };
 }
@@ -153,7 +158,10 @@ function renderHostFiberIntoContainer(
     let committed = false;
 
     try {
-      const finishedWork = renderHostFiberRoot(fiberRoot, element, runtime);
+      const deferred = withDeferredDelegatedEventPromotions(() =>
+        renderHostFiberRoot(fiberRoot, element, runtime)
+      );
+      const finishedWork = deferred.value;
 
       if (runtime.renderPhaseUpdate) {
         runtime.renderPhaseUpdate = false;
@@ -165,9 +173,10 @@ function renderHostFiberIntoContainer(
       }
 
       fiberRoot.finishedWork = finishedWork;
-      commitFiberRoot(fiberRoot);
+      withBatchedDelegatedRootReleases(() => commitFiberRoot(fiberRoot));
       collectPortalNodes(fiberRoot.current, runtime, portalSnapshot);
       removeStalePortalNodes(portalSnapshot, runtime);
+      deferred.promote?.();
       commitDevToolsRoot(container, fiberRoot);
       runtime.idMode = "client";
       committed = true;
@@ -203,13 +212,16 @@ function renderHydratingHostFiberIntoContainer(
 
     try {
       const scope = getHydrationScope(container, options.resumeId);
-      const finishedWork = renderHydratingHostFiberRoot(
-        fiberRoot,
-        element,
-        runtime,
-        scope,
-        options,
+      const deferred = withDeferredDelegatedEventPromotions(() =>
+        renderHydratingHostFiberRoot(
+          fiberRoot,
+          element,
+          runtime,
+          scope,
+          options,
+        )
       );
+      const finishedWork = deferred.value;
 
       if (runtime.renderPhaseUpdate) {
         runtime.renderPhaseUpdate = false;
@@ -220,7 +232,9 @@ function renderHydratingHostFiberIntoContainer(
         continue;
       }
 
-      commitHydratingHostFiberRoot(fiberRoot, finishedWork, scope, options);
+      withBatchedDelegatedRootReleases(() =>
+        commitHydratingHostFiberRoot(fiberRoot, finishedWork, scope, options)
+      );
       fiberRoot.current = finishedWork;
       fiberRoot.current.stateNode = fiberRoot;
       fiberRoot.finishedWork = undefined;
@@ -228,6 +242,7 @@ function renderHydratingHostFiberIntoContainer(
       fiberRoot.workInProgressRootRenderLanes = 0;
       collectPortalNodes(fiberRoot.current, runtime, portalSnapshot);
       removeStalePortalNodes(portalSnapshot, runtime);
+      deferred.promote?.();
       commitDevToolsRoot(container, fiberRoot);
       runtime.idMode = "client";
       committed = true;
@@ -302,12 +317,7 @@ export function hydrateRoot(
               );
         }
 
-        renderIntoContainer(
-          container,
-          runtime.currentElement,
-          runtime,
-          useHydratingRerender ? renderOptions : {},
-        );
+        throwUnsupportedRootNode();
       });
     }
   }, {
@@ -325,17 +335,19 @@ export function hydrateRoot(
           return renderHostFiberIntoContainer(container, fiberRoot, runtime, nextElement);
         }
 
-        renderIntoContainer(container, nextElement, runtime);
+        throwUnsupportedRootNode();
       });
     },
     unmount() {
-      runtime.currentElement = undefined;
-      runtime.dispose();
-      detachFiberRefs(fiberRoot.current);
-      disposeHostFiberResources(fiberRoot.current);
-      runtime.instances.clear();
-      unmountDevToolsRoot(container);
-      clearElementChildren(container);
+      withBatchedDelegatedRootReleases(() => {
+        runtime.currentElement = undefined;
+        runtime.dispose();
+        detachFiberRefs(fiberRoot.current);
+        disposeHostFiberResources(fiberRoot.current);
+        runtime.instances.clear();
+        unmountDevToolsRoot(container);
+        clearElementChildren(container);
+      });
     },
   };
 
@@ -348,15 +360,19 @@ export function hydrateRoot(
         runtime,
         element,
         renderOptions,
-      );
-    }
+    );
+  }
 
-    renderIntoContainer(container, element, runtime, renderOptions);
+  throwUnsupportedRootNode();
   });
   replayQueuedHydrationEvents(container);
   return root;
 }
 
+function throwUnsupportedRootNode(): never {
+  throw new Error("Unsupported react-compat root node. Pass a valid React-compatible element, portal, fragment, primitive, array, or nullish value.");
+}
+
 function laneForRenderPriority(priority: RenderPriority): Lane {
   if (priority === "transition") {
     return TransitionLane;

package/src/server-render.ts

@@ -369,39 +369,61 @@ function isEventHandlerName(name: string): boolean {
   );
 }
 
+type AttributeNameClassification =
+  | { kind: "skip" }
+  | { kind: "style" }
+  | {
+      kind: "attribute";
+      attributeName: string;
+      booleanishString: boolean;
+      dataAttribute: boolean;
+      dangerousHtml: boolean;
+    };
+
+const ATTRIBUTE_CLASSIFICATION_CACHE = new Map<string, AttributeNameClassification>();
+const ATTRIBUTE_CLASSIFICATION_CACHE_LIMIT = 1024;
+let attributeClassificationCacheMissCount = 0;
+
+export const __serverRenderAttributeCacheForTesting = {
+  clear() {
+    ATTRIBUTE_CLASSIFICATION_CACHE.clear();
+    attributeClassificationCacheMissCount = 0;
+  },
+  missCount() {
+    return attributeClassificationCacheMissCount;
+  },
+  size() {
+    return ATTRIBUTE_CLASSIFICATION_CACHE.size;
+  },
+};
+
 function renderHtmlAttribute(name: string, value: unknown): string {
   if (
     value === null ||
     value === undefined ||
-    typeof value === "function" ||
-    name === "children" ||
-    name === "key" ||
-    name === "ref" ||
-    isEventHandlerName(name)
+    typeof value === "function"
   ) {
     return "";
   }
 
-  if (name === "style") {
-    const style = renderStyleAttribute(value);
-    return style === "" ? "" : ` style="${escapeHtml(style)}"`;
-  }
-
-  const attributeName = toHtmlAttributeName(name);
+  const classification = classifyAttributeName(name);
 
-  if (!VALID_ATTRIBUTE_NAME.test(attributeName)) {
+  if (classification.kind === "skip") {
     return "";
   }
 
-  if (isEventHandlerName(attributeName)) {
-    return "";
+  if (classification.kind === "style") {
+    const style = renderStyleAttribute(value);
+    return style === "" ? "" : ` style="${escapeHtml(style)}"`;
   }
 
-  if (typeof value === "boolean" && isBooleanishStringAttribute(attributeName)) {
+  const { attributeName } = classification;
+
+  if (typeof value === "boolean" && classification.booleanishString) {
     return ` ${attributeName}="${value ? "true" : "false"}"`;
   }
 
-  if (typeof value === "boolean" && isDataAttribute(attributeName)) {
+  if (typeof value === "boolean" && classification.dataAttribute) {
     return ` ${attributeName}="${value ? "true" : "false"}"`;
   }
 
@@ -409,7 +431,7 @@ function renderHtmlAttribute(name: string, value: unknown): string {
     return "";
   }
 
-  if (isDangerousHtmlAttribute(attributeName)) {
+  if (classification.dangerousHtml) {
     return isDangerousHtmlOptIn(value)
       ? ` ${attributeName}="${escapeHtml(value.__html)}"`
       : "";
@@ -434,6 +456,50 @@ function renderHtmlAttribute(name: string, value: unknown): string {
 
 const VALID_ATTRIBUTE_NAME = /^[A-Za-z_][\w.\-:]*$/;
 
+function classifyAttributeName(name: string): AttributeNameClassification {
+  const cached = ATTRIBUTE_CLASSIFICATION_CACHE.get(name);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  attributeClassificationCacheMissCount += 1;
+
+  const classification = createAttributeNameClassification(name);
+  if (ATTRIBUTE_CLASSIFICATION_CACHE.size < ATTRIBUTE_CLASSIFICATION_CACHE_LIMIT) {
+    ATTRIBUTE_CLASSIFICATION_CACHE.set(name, classification);
+  }
+  return classification;
+}
+
+function createAttributeNameClassification(name: string): AttributeNameClassification {
+  if (
+    name === "children" ||
+    name === "key" ||
+    name === "ref" ||
+    isEventHandlerName(name)
+  ) {
+    return { kind: "skip" };
+  }
+
+  if (name === "style") {
+    return { kind: "style" };
+  }
+
+  const attributeName = toHtmlAttributeName(name);
+
+  if (!VALID_ATTRIBUTE_NAME.test(attributeName) || isEventHandlerName(attributeName)) {
+    return { kind: "skip" };
+  }
+
+  return {
+    kind: "attribute",
+    attributeName,
+    booleanishString: isBooleanishStringAttribute(attributeName),
+    dataAttribute: isDataAttribute(attributeName),
+    dangerousHtml: isDangerousHtmlAttribute(attributeName),
+  };
+}
+
 function isBooleanishStringAttribute(attributeName: string): boolean {
   // Callers pass the already-mapped HTML attribute name.
   const lowerCased = attributeName.toLowerCase();

package/src/server.ts

@@ -0,0 +1,62 @@
+export {
+  Component,
+  PureComponent,
+} from "./class-component.js";
+export {
+  Fragment,
+  Activity,
+  Profiler,
+  Suspense,
+  SuspenseList,
+  StrictMode,
+  Children,
+  cloneElement,
+  createElement,
+  createErrorBoundary,
+  createRef,
+  forwardRef,
+  isValidElement,
+  lazy,
+  memo,
+} from "./element.js";
+export type {
+  ErrorBoundaryOptions,
+  ElementType,
+  ReactCompatElement,
+  ReactCompatNode,
+  ReactCompatRenderableElement,
+} from "./element.js";
+export {
+  createContext,
+  renderContextConsumerToString,
+  renderContextProviderToString,
+  useContext,
+} from "./context.js";
+export {
+  useCallback,
+  useDebugValue,
+  useDeferredValue,
+  useEffectEvent,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useInsertionEffect,
+  useLayoutEffect,
+  useMemo,
+  useOptimistic,
+  useReducer,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  use,
+  useActionState,
+  cache,
+  cacheSignal,
+  captureOwnerStack,
+  startTransition,
+  unstable_useCacheRefresh,
+  useTransition,
+  version,
+} from "./hooks.js";
+export { renderChildToString, renderToString } from "./server-render.js";
+export type { StartTransition, TransitionScope } from "./hooks.js";