@reckona/mreact-compat 0.0.152 → 0.0.154

package/src/element.ts

@@ -11,7 +11,6 @@ export const Suspense = Symbol.for("react.suspense");
 export const SuspenseList = Symbol.for("react.suspense_list");
 export const Activity = Symbol.for("react.activity");
 export const Profiler = Symbol.for("react.profiler");
-export const HOST_OWN_PROPS_META = Symbol.for("modular.react.host_own_props_meta");
 export const HOST_CHILDREN_ONLY_PROPS_META = Symbol.for(
   "modular.react.host_children_only_props_meta",
 );
@@ -376,63 +375,11 @@ function isReactCompatContextProviderShorthand(
 }
 
 function setHostOwnPropsMeta(props: Record<string, unknown>): void {
-  const dataKey = props["data-key"];
-
-  if (typeof dataKey !== "number" || !Number.isSafeInteger(dataKey) || dataKey < 0) {
-    if (hostPropsAreChildrenOnly(props)) {
-      (props as { [HOST_CHILDREN_ONLY_PROPS_META]?: true })[
-        HOST_CHILDREN_ONLY_PROPS_META
-      ] = true;
-    }
-    return;
+  if (hostPropsAreChildrenOnly(props)) {
+    (props as { [HOST_CHILDREN_ONLY_PROPS_META]?: true })[
+      HOST_CHILDREN_ONLY_PROPS_META
+    ] = true;
   }
-
-  let selectedState = 0;
-
-  for (const name in props) {
-    if (!hasOwnProperty.call(props, name) || name === "children") {
-      continue;
-    }
-
-    if (name === "data-key") {
-      continue;
-    }
-
-    if (name === "className") {
-      const value = props[name];
-
-      if (value === undefined) {
-        continue;
-      }
-
-      if (value !== "selected") {
-        return;
-      }
-
-      selectedState |= 1;
-      continue;
-    }
-
-    if (name === "data-selected") {
-      const value = props[name];
-
-      if (value === undefined) {
-        continue;
-      }
-
-      if (value !== "true") {
-        return;
-      }
-
-      selectedState |= 2;
-      continue;
-    }
-
-    return;
-  }
-
-  (props as { [HOST_OWN_PROPS_META]?: number })[HOST_OWN_PROPS_META] =
-    dataKey * 4 + selectedState;
 }
 
 function hostPropsAreChildrenOnly(props: Record<string, unknown>): boolean {

package/src/events.ts

@@ -18,6 +18,7 @@ const reactPropToNativeEvent = new Map<string, string[]>([
   ["onCompositionUpdate", ["compositionupdate"]],
   ["onContextMenu", ["contextmenu"]],
   ["onDoubleClick", ["dblclick"]],
+  ["onDrag", ["drag"]],
   ["onDragEnd", ["dragend"]],
   ["onDragEnter", ["dragenter"]],
   ["onDragExit", ["dragexit"]],
@@ -57,6 +58,7 @@ const nativeEventToReactProps = new Map<string, string[]>([
   ["compositionupdate", ["onCompositionUpdate"]],
   ["contextmenu", ["onContextMenu"]],
   ["dblclick", ["onDoubleClick"]],
+  ["drag", ["onDrag"]],
   ["dragend", ["onDragEnd"]],
   ["dragenter", ["onDragEnter"]],
   ["dragexit", ["onDragExit"]],

package/src/fiber-reconciler.ts

@@ -529,7 +529,7 @@ function captureThrownValue(
     }
 
     if (!isThenable(thrownValue) && boundary.tag === "class-component") {
-      const captured = captureClassErrorBoundary(root, boundary, thrownValue);
+      const captured = captureClassErrorBoundary(root, boundary, source, thrownValue);
 
       if (captured !== undefined) {
         return captured;
@@ -574,6 +574,7 @@ function beginClassComponent(
 function captureClassErrorBoundary(
   root: FiberRoot,
   boundary: Fiber,
+  source: Fiber,
   thrownValue: unknown,
 ): Fiber | undefined {
   if (!isClassComponentType(boundary.type)) {
@@ -598,7 +599,9 @@ function captureClassErrorBoundary(
     };
   }
 
-  instance.componentDidCatch?.(error, { componentStack: "" });
+  instance.componentDidCatch?.(error, {
+    componentStack: componentStackFromFiber(source, boundary),
+  });
   boundary.child = reconcileChildFibers(
     boundary,
     boundary.alternate?.child,
@@ -607,6 +610,55 @@ function captureClassErrorBoundary(
   return boundary.child ?? completeUnitOfWork(root, boundary);
 }
 
+function componentStackFromFiber(source: Fiber, boundary: Fiber): string {
+  const names: string[] = [];
+  let cursor: Fiber | undefined = source;
+
+  while (cursor !== undefined) {
+    const name = componentNameForFiber(cursor);
+    if (name !== undefined) {
+      names.push(name);
+    }
+    if (cursor === boundary) {
+      break;
+    }
+    cursor = cursor.return;
+  }
+
+  return names.length === 0
+    ? "\n    at Anonymous"
+    : names.map((name) => `\n    at ${name}`).join("");
+}
+
+function componentNameForFiber(fiber: Fiber): string | undefined {
+  if (fiber.tag === "host-component") {
+    return String(fiber.type);
+  }
+
+  if (fiber.tag === "function-component" || fiber.tag === "class-component") {
+    return componentNameFromType(fiber.type);
+  }
+
+  if (fiber.tag === "memo" && isMemoType(fiber.type)) {
+    return componentNameFromType(fiber.type.type);
+  }
+
+  if (fiber.tag === "forward-ref" && isForwardRefType(fiber.type)) {
+    return componentNameFromType(fiber.type.render);
+  }
+
+  return undefined;
+}
+
+function componentNameFromType(type: unknown): string {
+  const displayName = (type as { displayName?: unknown } | undefined)?.displayName;
+  if (typeof displayName === "string" && displayName !== "") {
+    return displayName;
+  }
+  const name = (type as { name?: unknown } | undefined)?.name;
+  return typeof name === "string" && name !== "" ? name : "Anonymous";
+}
+
 function isClassErrorBoundary(
   type: ClassComponentType,
   instance: ClassComponentInstance,

package/src/hooks.ts

@@ -24,6 +24,7 @@ export interface RootRuntime {
   profilerBaseDurations: Map<string, number>;
   pendingProfilerCommits: PendingProfilerCommit[];
   pendingInsertionEffects: PendingEffect[];
+  pendingImperativeHandleEffects: PendingEffect[];
   pendingLayoutEffects: PendingEffect[];
   pendingEffects: PendingEffect[];
   externalStoreChecks: ExternalStoreCheck[];
@@ -39,7 +40,7 @@ export interface RootRuntime {
   strictMemoReplay: { values: readonly unknown[]; index: number } | undefined;
   strictMemoReplayByHook: ReadonlyMap<string, unknown> | undefined;
   profilerFlushDepth: number;
-  effectFlushPhase: "insertion" | "layout" | "normal" | undefined;
+  effectFlushPhase: "insertion" | "imperative-handle" | "layout" | "normal" | undefined;
   externalStoreUpdate: boolean;
   renderPhaseUpdate: boolean;
   rerender(priority?: RenderPriority): void;
@@ -147,7 +148,7 @@ type HookSlot =
   | { kind: "debug"; value: unknown }
   | {
       kind: "effect";
-      effectKind: "insertion" | "layout" | "normal";
+      effectKind: "insertion" | "imperative-handle" | "layout" | "normal";
       callback: EffectCallback;
       deps?: readonly unknown[];
       cleanup?: () => void;
@@ -191,7 +192,6 @@ let automaticRerenderScheduled = false;
 let effectFlushRerenderDepth = 0;
 let strictMemoOwnerId = 0;
 const strictMemoObjectOwnerIds = new WeakMap<object, number>();
-const strictMemoPrimitiveOwnerIds = new Map<unknown, number>();
 const queuedTransitionRerenders = new Map<RootRuntime, TransitionContext>();
 const queuedEventRerenders = new Set<RootRuntime>();
 export const version = "19.2.6";
@@ -285,6 +285,7 @@ export interface RuntimeSnapshot {
   portalContainers: Set<Element>;
   portalNodes: Map<Element, Set<Node>>;
   pendingInsertionEffectsLength: number;
+  pendingImperativeHandleEffectsLength: number;
   pendingLayoutEffectsLength: number;
   pendingEffectsLength: number;
   pendingProfilerCommitsLength: number;
@@ -314,6 +315,7 @@ export function createRootRuntime(
     profilerBaseDurations: new Map(),
     pendingProfilerCommits: [],
     pendingInsertionEffects: [],
+    pendingImperativeHandleEffects: [],
     pendingLayoutEffects: [],
     pendingEffects: [],
     externalStoreChecks: [],
@@ -338,6 +340,7 @@ export function createRootRuntime(
       this.activeProfilerPaths = new Set();
       this.pendingProfilerCommits = [];
       this.pendingInsertionEffects = [];
+      this.pendingImperativeHandleEffects = [];
       this.pendingLayoutEffects = [];
       this.pendingEffects = [];
       this.externalStoreChecks = [];
@@ -368,6 +371,8 @@ export function createRootRuntime(
       try {
         this.effectFlushPhase = "insertion";
         flushPendingEffects(this.pendingInsertionEffects);
+        this.effectFlushPhase = "imperative-handle";
+        flushPendingEffects(this.pendingImperativeHandleEffects);
         this.effectFlushPhase = "layout";
         const strictLayoutEffects = flushPendingEffects(this.pendingLayoutEffects);
         this.effectFlushPhase = "normal";
@@ -662,6 +667,7 @@ export function takeRuntimeSnapshot(runtime: RootRuntime): RuntimeSnapshot {
     portalContainers: new Set(runtime.portalContainers),
     portalNodes: clonePortalNodes(runtime.portalNodes),
     pendingInsertionEffectsLength: runtime.pendingInsertionEffects.length,
+    pendingImperativeHandleEffectsLength: runtime.pendingImperativeHandleEffects.length,
     pendingLayoutEffectsLength: runtime.pendingLayoutEffects.length,
     pendingEffectsLength: runtime.pendingEffects.length,
     pendingProfilerCommitsLength: runtime.pendingProfilerCommits.length,
@@ -684,6 +690,7 @@ export function restoreRuntimeSnapshot(
   snapshot: RuntimeSnapshot,
 ): void {
   runtime.pendingInsertionEffects.length = snapshot.pendingInsertionEffectsLength;
+  runtime.pendingImperativeHandleEffects.length = snapshot.pendingImperativeHandleEffectsLength;
   runtime.pendingLayoutEffects.length = snapshot.pendingLayoutEffectsLength;
   runtime.pendingEffects.length = snapshot.pendingEffectsLength;
   runtime.pendingProfilerCommits.length = snapshot.pendingProfilerCommitsLength;
@@ -908,16 +915,20 @@ export function useReducer<TState, TAction, TInitial = TState>(
     ),
   );
   const reducerRef = runWithoutDevToolsHookTracking(() => useRef(reducer));
+  const stateRef = runWithoutDevToolsHookTracking(() => useRef(state));
   const dispatchRef = runWithoutDevToolsHookTracking(() =>
     useRef<((action: TAction) => void) | undefined>(
       undefined,
     )
   );
   reducerRef.current = reducer;
+  stateRef.current = state;
 
   if (dispatchRef.current === undefined) {
     dispatchRef.current = (action: TAction): void => {
-      setState((previousState) => reducerRef.current(previousState, action));
+      const nextState = reducerRef.current(stateRef.current, action);
+      stateRef.current = nextState;
+      setState(nextState);
     };
   }
 
@@ -995,7 +1006,7 @@ export function useImperativeHandle<T>(
   deps?: readonly unknown[],
 ): void {
   runWithoutDevToolsHookTracking(() =>
-    useInsertionEffect(() => {
+    useEffectImpl("imperative-handle", () => {
       const handle = create();
       assignRef(ref, handle);
       return () => {
@@ -1076,10 +1087,14 @@ function getStrictMemoHookKey(
   instance: ComponentInstance,
   index: number,
 ): string {
-  return `${instance.path}:${getStrictMemoOwnerId(instance.owner)}:${index}`;
+  return `${instance.path}:${getStrictMemoOwnerKey(instance.owner)}:${index}`;
 }
 
-function getStrictMemoOwnerId(owner: unknown): number {
+export function __getStrictMemoOwnerKeyForTesting(owner: unknown): string {
+  return getStrictMemoOwnerKey(owner);
+}
+
+function getStrictMemoOwnerKey(owner: unknown): string {
   if ((typeof owner === "object" && owner !== null) || typeof owner === "function") {
     const objectOwner = owner as object;
     let ownerId = strictMemoObjectOwnerIds.get(objectOwner);
@@ -1087,15 +1102,17 @@ function getStrictMemoOwnerId(owner: unknown): number {
       ownerId = strictMemoOwnerId++;
       strictMemoObjectOwnerIds.set(objectOwner, ownerId);
     }
-    return ownerId;
+    return `o:${ownerId}`;
   }
 
-  let ownerId = strictMemoPrimitiveOwnerIds.get(owner);
-  if (ownerId === undefined) {
-    ownerId = strictMemoOwnerId++;
-    strictMemoPrimitiveOwnerIds.set(owner, ownerId);
+  if (typeof owner === "symbol") {
+    const globalKey = Symbol.keyFor(owner);
+    return globalKey === undefined
+      ? `p:symbol:${String(owner)}`
+      : `p:symbol-global:${globalKey}`;
   }
-  return ownerId;
+
+  return `p:${typeof owner}:${String(owner)}`;
 }
 
 function assignRef<T>(ref: unknown, value: T | null): void {
@@ -1567,6 +1584,7 @@ export function runWithHostCommit<T>(callback: () => T): T {
 }
 
 export function useTransition(): [boolean, StartTransition] {
+  const instance = requireInstance();
   const [pending, setPending] = runWithoutDevToolsHookTracking(() => useState(false));
   const startTransitionWithPending: StartTransition = (scope) => {
     setPending(true);
@@ -1575,6 +1593,10 @@ export function useTransition(): [boolean, StartTransition] {
       transitionVersion: ++transitionVersion,
     };
     scheduleCallback("low", () => {
+      if (instance.disposed === true) {
+        return;
+      }
+
       if (!isTransitionContextCurrent(context)) {
         setPending(false);
         return;
@@ -1582,6 +1604,9 @@ export function useTransition(): [boolean, StartTransition] {
 
       runTransitionScope(() => {
         scope();
+        if (instance.disposed === true) {
+          return;
+        }
         setPending(false);
       }, context);
     });
@@ -1721,7 +1746,7 @@ function isTransitionContextCurrent(context: TransitionContext): boolean {
 }
 
 function useEffectImpl(
-  effectKind: "insertion" | "layout" | "normal",
+  effectKind: "insertion" | "imperative-handle" | "layout" | "normal",
   callback: EffectCallback,
   deps?: readonly unknown[],
 ): void {
@@ -1763,12 +1788,15 @@ function useEffectImpl(
 
   slot.strictReplay =
     (runtime.strictModeDepth > 0 || runtime.strictReplayDepth > 0) &&
-    effectKind !== "insertion";
+    effectKind !== "insertion" &&
+    effectKind !== "imperative-handle";
 
   if (shouldRun) {
     const queue =
       effectKind === "insertion"
         ? runtime.pendingInsertionEffects
+        : effectKind === "imperative-handle"
+        ? runtime.pendingImperativeHandleEffects
         : effectKind === "layout"
         ? runtime.pendingLayoutEffects
         : runtime.pendingEffects;

package/src/host-reconciler.ts

@@ -4,7 +4,6 @@ import {
   FORWARD_REF_TYPE,
   Fragment,
   HOST_CHILDREN_ONLY_PROPS_META,
-  HOST_OWN_PROPS_META,
   LAZY_TYPE,
   MEMO_TYPE,
   Profiler,
@@ -571,8 +570,8 @@ function getReusableKeyedRowHostFiber(
   const previousRecord = previousProps as Record<string, unknown>;
 
   if (
-    getHostOwnPropsMeta(previousRecord) !== row.meta ||
-    getDirectHostTextChild(previousRecord.children) !== row.text
+    getDirectHostTextChild(previousRecord.children) !== row.text ||
+    !hostOwnPropsEqual(previousRecord, row.element.props)
   ) {
     return undefined;
   }
@@ -591,7 +590,6 @@ interface KeyedRowHostElement {
   element: ReactCompatElement;
   key: string;
   type: string;
-  meta: number;
   text: string;
 }
 
@@ -600,7 +598,6 @@ function createKeyedRowHostElementScratch(): KeyedRowHostElement {
     element: undefined as unknown as ReactCompatElement,
     key: "",
     type: "",
-    meta: 0,
     text: "",
   };
 }
@@ -618,18 +615,17 @@ function readKeyedRowHostElement(
     return false;
   }
 
-  const props = node.props as Record<string, unknown>;
-  const meta = getHostOwnPropsMeta(props);
-  const text = meta === undefined ? undefined : getDirectHostTextChild(props.children);
+  // Any keyed host row whose children collapse to a single text value
+  // qualifies; row props are compared per reuse with hostOwnPropsEqual.
+  const text = getDirectHostTextChild((node.props as Record<string, unknown>).children);
 
-  if (meta === undefined || text === undefined) {
+  if (text === undefined) {
     return false;
   }
 
   row.element = node;
   row.key = node.key;
   row.type = node.type;
-  row.meta = meta;
   row.text = text;
   return true;
 }
@@ -667,13 +663,9 @@ function createKeyedRowHostFiber(
   }
 
   const previousProps = current.memoizedProps ?? current.pendingProps;
-  const previousMeta =
-    typeof previousProps === "object" && previousProps !== null
-      ? getHostOwnPropsMeta(previousProps as Record<string, unknown>)
-      : undefined;
   const previousText = getDirectHostTextChild(hostFiberChildrenProp(previousProps));
 
-  if (previousMeta !== row.meta || previousText !== row.text) {
+  if (previousText !== row.text || !hostOwnPropsEqual(previousProps, row.element.props)) {
     fiber.flags |= Update;
   }
 
@@ -1642,6 +1634,8 @@ function commitHostDirtyFiber(
         hostPropsAreChildrenOnly(fiber.memoizedProps) &&
         hostPropsAreChildrenOnly(props));
     const textOnlyRowUpdate =
+      !propsAreUnchanged &&
+      !propsAreChildrenOnly &&
       fiber.hydrateExisting !== true &&
       isRowTextOnlyUpdate(fiber.memoizedProps, props);
 
@@ -2032,6 +2026,8 @@ function commitHostFiber(
         hostPropsAreChildrenOnly(fiber.memoizedProps) &&
         hostPropsAreChildrenOnly(props));
     const textOnlyRowUpdate =
+      !propsAreUnchanged &&
+      !propsAreChildrenOnly &&
       fiber.hydrateExisting !== true &&
       isRowTextOnlyUpdate(fiber.memoizedProps, props);
 
@@ -2243,12 +2239,6 @@ function hostOwnPropsEqual(previous: unknown, next: Record<string, unknown>): bo
   }
 
   const previousProps = previous as Record<string, unknown>;
-  const previousMeta = getHostOwnPropsMeta(previousProps);
-  const nextMeta = getHostOwnPropsMeta(next);
-
-  if (previousMeta !== undefined && nextMeta !== undefined) {
-    return previousMeta === nextMeta;
-  }
 
   let previousCount = 0;
   let nextCount = 0;
@@ -2276,10 +2266,6 @@ function hostOwnPropsEqual(previous: unknown, next: Record<string, unknown>): bo
   return previousCount === nextCount;
 }
 
-function getHostOwnPropsMeta(props: Record<string, unknown>): number | undefined {
-  return (props as { [HOST_OWN_PROPS_META]?: number })[HOST_OWN_PROPS_META];
-}
-
 function hostDirectTextChildChanged(previous: unknown, next: Record<string, unknown>): boolean {
   const previousText = getDirectHostTextChild(hostFiberChildrenProp(previous));
   const nextText = getDirectHostTextChild(next.children);
@@ -2379,17 +2365,15 @@ function isRowTextOnlyUpdate(previous: unknown, next: Record<string, unknown>):
   }
 
   const previousProps = previous as Record<string, unknown>;
-  const previousMeta = getHostOwnPropsMeta(previousProps);
-  const nextMeta = getHostOwnPropsMeta(next);
-
-  if (previousMeta === undefined || previousMeta !== nextMeta) {
-    return false;
-  }
-
   const previousText = getDirectHostTextChild(previousProps.children);
   const nextText = getDirectHostTextChild(next.children);
 
-  return previousText !== undefined && nextText !== undefined && previousText !== nextText;
+  return (
+    previousText !== undefined &&
+    nextText !== undefined &&
+    previousText !== nextText &&
+    hostOwnPropsEqual(previousProps, next)
+  );
 }
 
 function hostFiberChildrenProp(props: unknown): unknown {
@@ -2404,10 +2388,33 @@ function getDirectHostTextChild(children: unknown): string | undefined {
     : undefined;
 }
 
+// This package has no Node type dependency; declare the minimal process
+// shape needed for the literal process.env.NODE_ENV expression below.
+declare const process: { env: Record<string, string | undefined> };
+
+type HostFastPathMode = "static-fast" | "dynamic";
+
+const hostFastPathMode: HostFastPathMode = (() => {
+  try {
+    // The literal process.env.NODE_ENV member expression is what bundler
+    // define rewriting matches; a globalThis.process indirection is never
+    // rewritten and leaves deployed browser bundles without any fast path.
+    return process.env.NODE_ENV === "production" ? "static-fast" : "dynamic";
+  } catch {
+    // No process global at all: an unbundled browser runtime. Treat it as
+    // production rather than running every host update on the slow path.
+    return "static-fast";
+  }
+})();
+
 function shouldUseDirectHostTextChild(): boolean {
-  const globalProcess = (globalThis as { process?: { env?: Record<string, string | undefined> } })
-    .process;
-  return globalProcess?.env?.NODE_ENV === "production";
+  if (hostFastPathMode === "static-fast") {
+    return true;
+  }
+
+  // Node dev/test environments keep the per-call env read so test harnesses
+  // can flip NODE_ENV (vi.stubEnv) without re-importing this module.
+  return process.env.NODE_ENV === "production";
 }
 
 function syncDirectHostTextChild(element: Element, text: string): Text {

package/src/index.ts

@@ -91,6 +91,6 @@ export {
   useTransition,
   version,
 } from "./hooks.js";
-export { renderToString } from "./server-render.js";
+export { renderChildToString, renderToString } from "./server-render.js";
 export type { StartTransition, TransitionScope } from "./hooks.js";
 export { default } from "./react-default.js";

package/src/react-default.ts

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