@reckona/mreact-compat 0.0.144 → 0.0.146

package/src/element.ts

@@ -15,6 +15,9 @@ 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",
 );
+export const REACTIVE_TEXT_BINDING_META = Symbol.for(
+  "modular.react.reactive_text_binding_meta",
+);
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 export interface ReactCompatProviderType {
@@ -274,18 +277,19 @@ function copyElementProps(
   base?: Record<string, unknown>,
   omitChildren = false,
 ): Record<string, unknown> {
-  const props: Record<string, unknown> = {};
+  const props: Record<PropertyKey, unknown> = {};
 
   if (base !== undefined) {
     copyOwnStringElementProps(base, props, omitChildren);
   }
 
   if (source === null || source === undefined) {
-    return props;
+    return props as Record<string, unknown>;
   }
 
   copyOwnStringElementProps(source, props, omitChildren);
-  return props;
+  copyOwnSymbolElementProps(source, props);
+  return props as Record<string, unknown>;
 }
 
 function copyOwnStringElementProps(
@@ -310,6 +314,16 @@ function copyOwnStringElementProps(
   }
 }
 
+function copyOwnSymbolElementProps(
+  source: Record<string, unknown>,
+  target: Record<PropertyKey, unknown>,
+): void {
+  const symbolSource = source as Record<PropertyKey, unknown>;
+  for (const symbol of Object.getOwnPropertySymbols(source)) {
+    target[symbol] = symbolSource[symbol];
+  }
+}
+
 function normalizeElementType<P>(type: ElementType<P>): ElementType<P> {
   return isReactCompatContextProviderShorthand(type) ? (type.Provider as ElementType<P>) : type;
 }

package/src/hooks.ts

@@ -11,6 +11,7 @@ import {
   useContext,
   withContextReadObserver,
 } from "./context.js";
+import { REACTIVE_TEXT_BINDING_META } from "./element.js";
 import { isThenable } from "./thenable.js";
 
 export interface RootRuntime {
@@ -124,7 +125,7 @@ export type DevToolsHookValue =
   | { kind: "effect"; effectKind: "insertion" | "layout" | "normal"; deps?: readonly unknown[] };
 
 type HookSlot =
-  | { kind: "state"; value: unknown; hostCommitValue?: unknown }
+  | { kind: "state"; value: unknown; hostCommitValue?: unknown; textBinding?: ReactiveTextBinding }
   | {
       kind: "action-state";
       state: unknown;
@@ -195,6 +196,14 @@ const queuedTransitionRerenders = new Map<RootRuntime, TransitionContext>();
 const queuedEventRerenders = new Set<RootRuntime>();
 export const version = "19.2.6";
 
+export interface ReactiveTextBinding {
+  value: unknown;
+  subscribers: Set<Text>;
+}
+
+const reactiveTextBindingsByNode = new WeakMap<Text, ReactiveTextBinding>();
+const hydratedIdsByRuntime = new WeakMap<RootRuntime, Map<string, string>>();
+
 export function act<T>(callback: () => T): T extends PromiseLike<unknown> ? Promise<void> : void {
   const previousPriority = currentEventPriority;
   currentEventPriority = "discrete";
@@ -778,6 +787,20 @@ export function useState<T>(
     }
 
     slot.value = nextValue;
+    const canUseDirectTextBinding =
+      hookRenderState.hostCommitDepth === 0 &&
+      hookRenderState.currentRuntime !== runtime &&
+      hookRenderState.currentInstance !== instance &&
+      runtime.effectFlushPhase === undefined &&
+      eventBatchDepth === 0 &&
+      transitionDepth === 0 &&
+      optionsAllowDirectTextBinding(value) &&
+      updateDirectTextBinding(slot.textBinding, nextValue);
+
+    if (canUseDirectTextBinding) {
+      return;
+    }
+
     if (hookRenderState.hostCommitDepth > 0) {
       updateHostCommitDirtyState(instance);
       hookRenderState.queuedHostCommitRerenders.add(runtime);
@@ -792,7 +815,86 @@ export function useState<T>(
     value: slot.value,
   });
 
-  return [slot.value as T, setState];
+  const result = [slot.value as T, setState] as [
+    T,
+    (value: T | ((previous: T) => T)) => void,
+  ] & Record<PropertyKey, unknown>;
+  result[REACTIVE_TEXT_BINDING_META] = getStateTextBinding(slot);
+  return result;
+}
+
+export function subscribeReactiveTextBinding(binding: unknown, node: Text): void {
+  if (!isReactiveTextBinding(binding)) {
+    clearReactiveTextBinding(node);
+    return;
+  }
+
+  const previous = reactiveTextBindingsByNode.get(node);
+
+  if (previous !== undefined && previous !== binding) {
+    previous.subscribers.delete(node);
+  }
+
+  reactiveTextBindingsByNode.set(node, binding);
+  binding.subscribers.add(node);
+}
+
+function clearReactiveTextBinding(node: Text): void {
+  const previous = reactiveTextBindingsByNode.get(node);
+
+  if (previous === undefined) {
+    return;
+  }
+
+  previous.subscribers.delete(node);
+  reactiveTextBindingsByNode.delete(node);
+}
+
+function getStateTextBinding(slot: Extract<HookSlot, { kind: "state" }>): ReactiveTextBinding {
+  slot.textBinding ??= {
+    value: slot.value,
+    subscribers: new Set(),
+  };
+  slot.textBinding.value = slot.value;
+  return slot.textBinding;
+}
+
+function optionsAllowDirectTextBinding(value: unknown): boolean {
+  return typeof value !== "function";
+}
+
+function updateDirectTextBinding(binding: ReactiveTextBinding | undefined, value: unknown): boolean {
+  if (binding === undefined || binding.subscribers.size === 0) {
+    return false;
+  }
+
+  let updated = false;
+  const nextText = String(value);
+
+  for (const node of binding.subscribers) {
+    if (node.parentNode === null) {
+      binding.subscribers.delete(node);
+      reactiveTextBindingsByNode.delete(node);
+      continue;
+    }
+
+    if (node.data !== nextText) {
+      node.data = nextText;
+    }
+    updated = true;
+  }
+
+  binding.value = value;
+  return updated;
+}
+
+function isReactiveTextBinding(value: unknown): value is ReactiveTextBinding {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "subscribers" in value &&
+    (value as { subscribers?: unknown }).subscribers instanceof Set
+  );
 }
 
 export function useReducer<TState, TAction, TInitial = TState>(
@@ -853,14 +955,30 @@ export function useRef<T>(initial: T): { current: T } {
 
 export function useId(): string {
   const runtime = requireRuntime();
+  const instance = requireInstance();
+  const idSlotKey = `${instance.path}:${instance.hookIndex}`;
   const idRef = runWithoutDevToolsHookTracking(() =>
     useRef<string | undefined>(undefined)
   );
 
   if (idRef.current === undefined) {
-    const mode = runtime.idMode === "server" ? "R" : "r";
-    idRef.current = `_${runtime.identifierPrefix}${mode}_${runtime.idCounter}_`;
-    runtime.idCounter += 1;
+    const hydratedId = runtime.idMode === "client"
+      ? hydratedIdsByRuntime.get(runtime)?.get(idSlotKey)
+      : undefined;
+
+    if (hydratedId !== undefined) {
+      idRef.current = hydratedId;
+    } else {
+      const mode = runtime.idMode === "server" ? "R" : "r";
+      idRef.current = `_${runtime.identifierPrefix}${mode}_${runtime.idCounter}_`;
+      runtime.idCounter += 1;
+
+      if (runtime.idMode === "server") {
+        const hydratedIds = hydratedIdsByRuntime.get(runtime) ?? new Map<string, string>();
+        hydratedIds.set(idSlotKey, idRef.current);
+        hydratedIdsByRuntime.set(runtime, hydratedIds);
+      }
+    }
   }
 
   recordDevToolsHook("useId", {
@@ -1114,7 +1232,7 @@ export function useLayoutEffect(
 export function useSyncExternalStore<T>(
   subscribe: (listener: () => void) => () => void,
   getSnapshot: () => T,
-  getServerSnapshot: () => T = getSnapshot,
+  getServerSnapshot?: () => T,
 ): T {
   const runtime = requireRuntime();
   const instance = requireInstance();
@@ -1123,7 +1241,12 @@ export function useSyncExternalStore<T>(
   let slot = instance.hooks[index];
 
   if (slot === undefined) {
-    slot = { kind: "store", value: getServerSnapshot() };
+    slot = {
+      kind: "store",
+      value: runtime.idMode === "server" && getServerSnapshot !== undefined
+        ? getServerSnapshot()
+        : getSnapshot(),
+    };
     instance.hooks[index] = slot;
   }
 
@@ -1131,13 +1254,17 @@ export function useSyncExternalStore<T>(
     throw new Error("Hook order changed between renders.");
   }
 
-  const currentSnapshot = getSnapshot();
+  const isHydrationMount =
+    runtime.idMode === "server" && slot.hasMounted !== true && getServerSnapshot !== undefined;
+  const currentSnapshot = isHydrationMount ? slot.value as T : getSnapshot();
 
   if (!Object.is(slot.value, currentSnapshot)) {
     slot.value = currentSnapshot;
   }
 
-  recordExternalStoreCheck(getSnapshot, currentSnapshot);
+  if (!isHydrationMount) {
+    recordExternalStoreCheck(getSnapshot, currentSnapshot);
+  }
 
   runWithoutDevToolsHookTracking(() => useEffect(() => {
     const checkForUpdates = (): void => {

package/src/host-reconciler.ts

@@ -8,6 +8,7 @@ import {
   LAZY_TYPE,
   MEMO_TYPE,
   Profiler,
+  REACTIVE_TEXT_BINDING_META,
   STRICT_MODE_TYPE,
   Suspense,
   SuspenseList,
@@ -49,6 +50,7 @@ import {
   collectRuntimeInstanceKeys,
   hasContextDependency,
   hasChangedContextDependency,
+  subscribeReactiveTextBinding,
   type RootRuntime,
 } from "./hooks.js";
 import { isThenable } from "./thenable.js";
@@ -1653,14 +1655,13 @@ function commitHostDirtyFiber(
     }
 
     if (directTextChild !== undefined) {
-      syncDirectHostTextChild(element, directTextChild);
+      const text = syncDirectHostTextChild(element, directTextChild);
+      subscribeReactiveHostTextBinding(props, text);
     } else if (fiber.subtreeFlags !== NoFlags) {
       commitHostDirtyChildren(fiber.child, element, eventRoot, `${path}.c`, options);
     }
 
-    if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
-      applyPostChildFormProps(element, props);
-    }
+    applyPostChildFormProps(element, props, previousProps);
     fiber.memoizedProps = props;
     finishCommittedFiber(fiber);
     return;
@@ -2043,7 +2044,8 @@ function commitHostFiber(
       applyChangedRef(previousProps?.ref, props.ref, element);
     }
     if (directTextChild !== undefined) {
-      syncDirectHostTextChild(element, directTextChild);
+      const text = syncDirectHostTextChild(element, directTextChild);
+      subscribeReactiveHostTextBinding(props, text);
     } else if (
       fiber.hostChildListChanged ||
       fiber.childListChanged ||
@@ -2061,9 +2063,7 @@ function commitHostFiber(
       commitHostChildren(fiber.child, element, eventRoot, `${path}.c`, options);
     }
 
-    if (!propsAreUnchanged && !propsAreChildrenOnly && !textOnlyRowUpdate) {
-      applyPostChildFormProps(element, props);
-    }
+    applyPostChildFormProps(element, props, previousProps);
     fiber.memoizedProps = props;
     finishCommittedFiber(fiber);
     return [element];
@@ -2410,17 +2410,36 @@ function shouldUseDirectHostTextChild(): boolean {
   return globalProcess?.env?.NODE_ENV === "production";
 }
 
-function syncDirectHostTextChild(element: Element, text: string): void {
+function syncDirectHostTextChild(element: Element, text: string): Text {
   const firstChild = element.firstChild;
 
   if (firstChild instanceof Text && firstChild.nextSibling === null) {
     if (firstChild.data !== text) {
       firstChild.data = text;
     }
-    return;
+    return firstChild;
   }
 
   element.textContent = text;
+  const nextFirstChild = element.firstChild;
+
+  if (!(nextFirstChild instanceof Text)) {
+    const textNode = document.createTextNode(text);
+    element.replaceChildren(textNode);
+    return textNode;
+  }
+
+  return nextFirstChild;
+}
+
+function subscribeReactiveHostTextBinding(
+  props: Record<string, unknown>,
+  text: Text,
+): void {
+  subscribeReactiveTextBinding(
+    (props as Record<PropertyKey, unknown>)[REACTIVE_TEXT_BINDING_META],
+    text,
+  );
 }
 
 function shouldPreserveContentEditableChildren(

package/src/jsx-dev-runtime.ts

@@ -1,4 +1,8 @@
-import { Fragment, jsx } from "./jsx-runtime.js";
+import {
+  Fragment,
+  REACTIVE_TEXT_BINDING_META,
+  jsx,
+} from "./jsx-runtime.js";
 import type {
   ElementType,
   ReactCompatElement,
@@ -10,6 +14,7 @@ import type {
 } from "./jsx-runtime.js";
 
 export { Fragment };
+export { REACTIVE_TEXT_BINDING_META };
 export type {
   FormEvent,
   FormEventHandler,

package/src/jsx-runtime.ts

@@ -1,4 +1,8 @@
-import { createElementFromJsxConfig, Fragment } from "./element.js";
+import {
+  createElementFromJsxConfig,
+  Fragment,
+  REACTIVE_TEXT_BINDING_META,
+} from "./element.js";
 import type {
   ElementType,
   ReactCompatElement,
@@ -6,6 +10,7 @@ import type {
 } from "./element.js";
 
 export { Fragment };
+export { REACTIVE_TEXT_BINDING_META };
 
 export type JSXEvent<
   TCurrentTarget extends EventTarget,

package/src/reconciler.ts

@@ -116,6 +116,7 @@ export function renderIntoContainer(
         scope.before?.parentNode?.removeChild(scope.before);
         scope.after?.parentNode?.removeChild(scope.after);
       }
+      runtime.idMode = "client";
       committed = true;
     } finally {
       runtime.endRender(committed);

package/src/root.ts

@@ -159,6 +159,7 @@ function renderHostFiberIntoContainer(
       collectPortalNodes(fiberRoot.current, runtime);
       removeStalePortalNodes(portalSnapshot, runtime);
       commitDevToolsRoot(container, fiberRoot);
+      runtime.idMode = "client";
       committed = true;
       return finishedWork;
     } finally {
@@ -218,6 +219,7 @@ function renderHydratingHostFiberIntoContainer(
       collectPortalNodes(fiberRoot.current, runtime);
       removeStalePortalNodes(portalSnapshot, runtime);
       commitDevToolsRoot(container, fiberRoot);
+      runtime.idMode = "client";
       committed = true;
       return finishedWork;
     } finally {
@@ -266,17 +268,33 @@ export function hydrateRoot(
   const runtime = createRootRuntime((priority = "sync") => {
     if (runtime.currentElement !== undefined) {
       enqueueRootRender(fiberRoot, runtime.currentElement, laneForRenderPriority(priority), () => {
+        const useHydratingRerender =
+          runtime.idMode === "server" ||
+          renderOptions.resumeId !== undefined ||
+          renderOptions.consumeResumeMarkers !== undefined;
         if (canRenderHostFiber(runtime.currentElement as ReactCompatNode)) {
-          return renderHydratingHostFiberIntoContainer(
-            container,
-            fiberRoot,
-            runtime,
-            runtime.currentElement as ReactCompatNode,
-            renderOptions,
-          );
+          return useHydratingRerender
+            ? renderHydratingHostFiberIntoContainer(
+                container,
+                fiberRoot,
+                runtime,
+                runtime.currentElement as ReactCompatNode,
+                renderOptions,
+              )
+            : renderHostFiberIntoContainer(
+                container,
+                fiberRoot,
+                runtime,
+                runtime.currentElement as ReactCompatNode,
+              );
         }
 
-        renderIntoContainer(container, runtime.currentElement, runtime, renderOptions);
+        renderIntoContainer(
+          container,
+          runtime.currentElement,
+          runtime,
+          useHydratingRerender ? renderOptions : {},
+        );
       });
     }
   }, {