@reckona/mreact-compat 0.0.171 → 0.0.173

package/src/fiber.ts

@@ -15,6 +15,7 @@ export type FiberTag =
   | "memo"
   | "lazy"
   | "profiler"
+  | "reactive-dom-block"
   | "strict-mode"
   | "suspense"
   | "suspense-list"
@@ -41,6 +42,7 @@ export interface Fiber {
   childLanes: Lanes;
   hydrateExisting: boolean;
   hasRefSubtree: boolean;
+  hasDisposableResources: boolean;
   hostChildListChanged: boolean;
 }
 
@@ -96,6 +98,7 @@ export function createFiber(
     childLanes: NoLanes,
     hydrateExisting: false,
     hasRefSubtree: false,
+    hasDisposableResources: false,
     hostChildListChanged: false,
   };
 }
@@ -157,6 +160,7 @@ export function createWorkInProgress(
   workInProgress.childLanes = current.childLanes;
   workInProgress.hydrateExisting = false;
   workInProgress.hasRefSubtree = current.hasRefSubtree;
+  workInProgress.hasDisposableResources = current.hasDisposableResources;
   workInProgress.hostChildListChanged = current.hostChildListChanged;
   return workInProgress;
 }

package/src/hooks.ts

@@ -1,6 +1,9 @@
 import {
   flushPendingComputed,
   flushQueuedComputations,
+  notifySubscribers,
+  trackSource,
+  type Source,
 } from "@reckona/mreact-reactive-core/internal";
 import { scheduleCallback } from "./fiber-scheduler.js";
 import { removeChildIfPresent } from "./dom-children.js";
@@ -11,7 +14,10 @@ import {
   useContext,
   withContextReadObserver,
 } from "./context.js";
-import { REACTIVE_TEXT_BINDING_META } from "./element.js";
+import {
+  REACTIVE_STATE_BINDING_META,
+  REACTIVE_TEXT_BINDING_META,
+} from "./element.js";
 import { isThenable } from "./thenable.js";
 
 export interface RootRuntime {
@@ -127,7 +133,14 @@ export type DevToolsHookValue =
   | { kind: "effect"; effectKind: "insertion" | "layout" | "normal"; deps?: readonly unknown[] };
 
 type HookSlot =
-  | { kind: "state"; value: unknown; hostCommitValue?: unknown; textBinding?: ReactiveTextBinding }
+  | {
+      kind: "state";
+      value: unknown;
+      dispatch?: (value: unknown) => void;
+      hostCommitValue?: unknown;
+      textBinding?: ReactiveTextBinding;
+      stateBinding?: ReactiveStateBinding;
+    }
   | {
       kind: "action-state";
       state: unknown;
@@ -143,7 +156,13 @@ type HookSlot =
       update: (state: unknown, payload: unknown) => unknown;
       dispatch?: (payload: unknown) => void;
     }
-  | { kind: "store"; value: unknown; hasMounted?: boolean; hostCommitValue?: unknown }
+  | {
+      kind: "store";
+      value: unknown;
+      getSnapshot?: () => unknown;
+      hasMounted?: boolean;
+      hostCommitValue?: unknown;
+    }
   | { kind: "ref"; value: { current: unknown } }
   | { kind: "memo"; value: unknown; deps?: readonly unknown[] }
   | { kind: "debug"; value: unknown }
@@ -158,9 +177,21 @@ type HookSlot =
       strictReplay?: boolean;
     };
 
+interface PendingInstanceContext {
+  runtime: RootRuntime;
+  path: string;
+  owner: unknown;
+  existing: ComponentInstance | undefined;
+}
+
 interface HookRenderState {
   currentRuntime: RootRuntime | undefined;
   currentInstance: ComponentInstance | undefined;
+  // Deferred instance for the component currently rendering. The instance is
+  // only materialized (created, registered, prefix-indexed) when a hook or a
+  // context read first needs it, so components with no hooks/context (e.g. a
+  // pure host-rendering memo row) pay none of that per-render cost.
+  pendingInstance: PendingInstanceContext | undefined;
   currentCacheScope: CacheScope | undefined;
   hostCommitDepth: number;
   queuedHostCommitRerenders: Set<RootRuntime>;
@@ -174,6 +205,7 @@ const hookRenderState =
   ] ??= {
     currentRuntime: undefined,
     currentInstance: undefined,
+    pendingInstance: undefined,
     currentCacheScope: undefined,
     hostCommitDepth: 0,
     queuedHostCommitRerenders: new Set<RootRuntime>(),
@@ -204,6 +236,12 @@ export interface ReactiveTextBinding {
   subscribers: Set<Text>;
 }
 
+export interface ReactiveStateBinding {
+  get(): unknown;
+  source: Source;
+  value: unknown;
+}
+
 const reactiveTextBindingsByNode = new WeakMap<Text, ReactiveTextBinding>();
 const hydratedIdsByRuntime = new WeakMap<RootRuntime, Map<string, string>>();
 
@@ -378,6 +416,9 @@ export function createRootRuntime(
         flushPendingEffects(this.pendingImperativeHandleEffects);
         this.effectFlushPhase = "layout";
         const strictLayoutEffects = flushPendingEffects(this.pendingLayoutEffects);
+        if (flushHostCommitRerenders()) {
+          dedupePendingEffects(this.pendingEffects);
+        }
         this.effectFlushPhase = "normal";
         const strictEffects = flushPendingEffects(this.pendingEffects);
         this.effectFlushPhase = undefined;
@@ -502,25 +543,56 @@ export function renderWithRootRuntime<T>(
 ): T {
   const previousRuntime = hookRenderState.currentRuntime;
   const previousInstance = hookRenderState.currentInstance;
-  let instance = runtime.instances.get(path);
+  const previousPending = hookRenderState.pendingInstance;
 
-  if (instance !== undefined && owner !== undefined && instance.owner !== owner) {
-    cleanupInstance(instance);
-    instance = undefined;
+  let existing = runtime.instances.get(path);
+  if (existing !== undefined && owner !== undefined && existing.owner !== owner) {
+    cleanupInstance(existing);
+    runtime.instances.delete(path);
+    removeInstanceKeyFromIndex(runtime, path);
+    existing = undefined;
   }
 
-  instance ??= {
-    owner,
-    path,
-    hooks: [],
-    hookIndex: 0,
-    dirty: false,
-    devToolsHookSuppressionDepth: 0,
-  };
-  instance.owner = owner;
-  instance.path = path;
-  runtime.instances.set(path, instance);
-  indexInstanceKey(runtime, path);
+  // Defer instance materialization: hooks / context reads call
+  // materializeInstance() lazily. A component that touches neither never
+  // allocates or registers an instance.
+  hookRenderState.currentRuntime = runtime;
+  hookRenderState.currentInstance = undefined;
+  hookRenderState.pendingInstance = { runtime, path, owner, existing };
+
+  try {
+    return withContextReadObserver(recordContextDependency, render);
+  } finally {
+    hookRenderState.currentRuntime = previousRuntime;
+    hookRenderState.currentInstance = previousInstance;
+    hookRenderState.pendingInstance = previousPending;
+  }
+}
+
+// Materialize the deferred instance for the rendering component the first time
+// a hook or context read needs it.
+function materializeInstance(): ComponentInstance {
+  const pending = hookRenderState.pendingInstance;
+  if (pending === undefined) {
+    throw new Error("Hooks can only be called while rendering.");
+  }
+
+  const { runtime, path, owner } = pending;
+  let instance = pending.existing;
+  if (instance === undefined) {
+    instance = {
+      owner,
+      path,
+      hooks: [],
+      hookIndex: 0,
+      dirty: false,
+      devToolsHookSuppressionDepth: 0,
+    };
+    runtime.instances.set(path, instance);
+    indexInstanceKey(runtime, path);
+  } else {
+    instance.owner = owner;
+  }
   runtime.activeInstanceKeys?.add(path);
   instance.hookIndex = 0;
   instance.dirty = false;
@@ -534,17 +606,17 @@ export function renderWithRootRuntime<T>(
     delete instance.devToolsHookTypes;
   }
   instance.devToolsHookSuppressionDepth = 0;
-  hookRenderState.currentRuntime = runtime;
   hookRenderState.currentInstance = instance;
+  hookRenderState.pendingInstance = undefined;
+  return instance;
+}
 
-  try {
-    return withContextReadObserver((context, value) => {
-      (instance.contextDependencies ??= new Map()).set(context, value);
-    }, render);
-  } finally {
-    hookRenderState.currentRuntime = previousRuntime;
-    hookRenderState.currentInstance = previousInstance;
-  }
+function recordContextDependency(
+  context: ReactCompatContextLike<unknown>,
+  value: unknown,
+): void {
+  const instance = hookRenderState.currentInstance ?? materializeInstance();
+  (instance.contextDependencies ??= new Map()).set(context, value);
 }
 
 export function hasChangedContextDependency(
@@ -575,22 +647,27 @@ export function hasContextDependency(
   return keys.some((key) => runtime.instances.get(key)?.contextDependencies !== undefined);
 }
 
+// Shared read-only empty result so components with no registered instances
+// (e.g. hookless rows under lazy instance materialization) don't each allocate
+// a fresh array. Callers treat instance-key lists as read-only.
+const EMPTY_INSTANCE_KEYS: string[] = [];
+
 export function collectRuntimeInstanceKeys(runtime: RootRuntime, prefix: string): string[] {
   const keys = runtime.instanceKeysByPrefix.get(prefix);
 
   if (keys === undefined) {
-    return [];
+    return EMPTY_INSTANCE_KEYS;
   }
 
-  const activeKeys: string[] = [];
+  let activeKeys: string[] | undefined;
 
   for (const key of keys) {
     if (runtime.instances.has(key)) {
-      activeKeys.push(key);
+      (activeKeys ??= []).push(key);
     }
   }
 
-  return activeKeys;
+  return activeKeys ?? EMPTY_INSTANCE_KEYS;
 }
 
 export function getDevToolsHookState(
@@ -787,11 +864,11 @@ export function useState<T>(
     throw new Error("Hook order changed between renders.");
   }
 
-  const setState = (value: T | ((previous: T) => T)): void => {
+  slot.dispatch ??= (value: unknown): void => {
     const previousValue = slot.value;
     const nextValue =
       typeof value === "function"
-        ? (value as (previous: T) => T)(slot.value as T)
+        ? (value as (previous: unknown) => unknown)(slot.value)
         : value;
 
     if (Object.is(slot.value, nextValue)) {
@@ -813,7 +890,17 @@ export function useState<T>(
       optionsAllowDirectTextBinding(value) &&
       updateDirectTextBinding(slot.textBinding, nextValue);
 
-    if (canUseDirectTextBinding) {
+    const canUseDirectStateBinding =
+      hookRenderState.hostCommitDepth === 0 &&
+      hookRenderState.currentRuntime !== runtime &&
+      hookRenderState.currentInstance !== instance &&
+      runtime.effectFlushPhase === undefined &&
+      eventBatchDepth === 0 &&
+      transitionDepth === 0 &&
+      optionsAllowDirectTextBinding(value) &&
+      updateDirectStateBinding(slot.stateBinding, nextValue);
+
+    if (canUseDirectTextBinding || canUseDirectStateBinding) {
       return;
     }
 
@@ -825,6 +912,7 @@ export function useState<T>(
 
     scheduleInstanceUpdate(runtime, instance, { deferSync: typeof value === "function" });
   };
+  const setState = slot.dispatch as (value: T | ((previous: T) => T)) => void;
 
   recordDevToolsHook("useState", {
     kind: "state",
@@ -836,6 +924,7 @@ export function useState<T>(
     (value: T | ((previous: T) => T)) => void,
   ] & Record<PropertyKey, unknown>;
   result[REACTIVE_TEXT_BINDING_META] = getStateTextBinding(slot);
+  result[REACTIVE_STATE_BINDING_META] = getStateBinding(slot);
   return result;
 }
 
@@ -884,6 +973,19 @@ function getStateTextBinding(slot: Extract<HookSlot, { kind: "state" }>): Reacti
   return slot.textBinding;
 }
 
+function getStateBinding(slot: Extract<HookSlot, { kind: "state" }>): ReactiveStateBinding {
+  slot.stateBinding ??= {
+    value: slot.value,
+    source: { subscribers: null },
+    get() {
+      trackSource(this.source);
+      return this.value;
+    },
+  };
+  slot.stateBinding.value = slot.value;
+  return slot.stateBinding;
+}
+
 function optionsAllowDirectTextBinding(value: unknown): boolean {
   return typeof value !== "function";
 }
@@ -913,6 +1015,20 @@ function updateDirectTextBinding(binding: ReactiveTextBinding | undefined, value
   return updated;
 }
 
+function updateDirectStateBinding(
+  binding: ReactiveStateBinding | undefined,
+  value: unknown,
+): boolean {
+  if (binding === undefined || binding.source.subscribers === null) {
+    return false;
+  }
+
+  binding.value = value;
+  notifySubscribers(binding.source);
+  flushQueuedComputations();
+  return true;
+}
+
 function isReactiveTextBinding(value: unknown): value is ReactiveTextBinding {
   return (
     typeof value === "object" &&
@@ -928,11 +1044,12 @@ export function useReducer<TState, TAction, TInitial = TState>(
   initialArg: TInitial,
   init?: (initialArg: TInitial) => TState,
 ): [TState, (action: TAction) => void] {
-  const [state, setState] = runWithoutDevToolsHookTracking(() =>
+  const stateTuple = runWithoutDevToolsHookTracking(() =>
     useState<TState>(() =>
       init === undefined ? (initialArg as unknown as TState) : init(initialArg),
     ),
   );
+  const [state, setState] = stateTuple;
   const reducerRef = runWithoutDevToolsHookTracking(() => useRef(reducer));
   const stateRef = runWithoutDevToolsHookTracking(() => useRef(state));
   const dispatchRef = runWithoutDevToolsHookTracking(() =>
@@ -956,7 +1073,18 @@ export function useReducer<TState, TAction, TInitial = TState>(
     value: state,
   });
 
-  return [state, dispatchRef.current];
+  const result = [state, dispatchRef.current] as [
+    TState,
+    (action: TAction) => void,
+  ] & Record<PropertyKey, unknown>;
+  const stateBinding = (stateTuple as unknown as Record<PropertyKey, unknown>)[
+    REACTIVE_STATE_BINDING_META
+  ];
+
+  if (stateBinding !== undefined) {
+    result[REACTIVE_STATE_BINDING_META] = stateBinding;
+  }
+  return result;
 }
 
 /** Returns a stable mutable ref object for the component instance. */
@@ -1300,6 +1428,7 @@ export function useSyncExternalStore<T>(
   if (slot.kind !== "store") {
     throw new Error("Hook order changed between renders.");
   }
+  slot.getSnapshot = getSnapshot as () => unknown;
 
   const isHydrationMount =
     runtime.idMode === "server" && slot.hasMounted !== true && getServerSnapshot !== undefined;
@@ -1319,7 +1448,7 @@ export function useSyncExternalStore<T>(
         return;
       }
 
-      const nextSnapshot = getSnapshot();
+      const nextSnapshot = (slot.getSnapshot ?? getSnapshot)();
 
       if (!Object.is(slot.value, nextSnapshot)) {
         if (hookRenderState.hostCommitDepth > 0 && !Object.hasOwn(slot, "hostCommitValue")) {
@@ -1353,7 +1482,7 @@ export function useSyncExternalStore<T>(
     return () => {
       unsubscribe();
     };
-  }, [subscribe, getSnapshot]));
+  }, [subscribe]));
 
   recordDevToolsHook("useSyncExternalStore", {
     kind: "store",
@@ -2044,15 +2173,16 @@ function scheduleInstanceUpdate(
   scheduleRuntimeRerender(runtime, options);
 }
 
-function flushHostCommitRerenders(): void {
+function flushHostCommitRerenders(): boolean {
   if (
     hostCommitRerenderDepth > 0 ||
     hookRenderState.hostCommitDepth > 0 ||
     hookRenderState.queuedHostCommitRerenders.size === 0
   ) {
-    return;
+    return false;
   }
 
+  let didRerender = false;
   hostCommitRerenderDepth += 1;
   try {
     for (
@@ -2069,6 +2199,7 @@ function flushHostCommitRerenders(): void {
         clearHostCommitStateBaselines(runtime);
 
         if (hasDirtyInstance) {
+          didRerender = true;
           runtime.rerender("sync");
         }
       }
@@ -2077,6 +2208,20 @@ function flushHostCommitRerenders(): void {
   } finally {
     hostCommitRerenderDepth -= 1;
   }
+  return didRerender;
+}
+
+function dedupePendingEffects(queue: PendingEffect[]): void {
+  if (queue.length < 2) {
+    return;
+  }
+
+  const latestBySlot = new Map<Extract<HookSlot, { kind: "effect" }>, PendingEffect>();
+  for (const effect of queue) {
+    latestBySlot.set(effect.slot, effect);
+  }
+  queue.length = 0;
+  queue.push(...latestBySlot.values());
 }
 
 function flushEffectFlushRerenders(): void {
@@ -2299,11 +2444,7 @@ function requireRuntime(): RootRuntime {
 }
 
 function requireInstance(): ComponentInstance {
-  if (hookRenderState.currentInstance === undefined) {
-    throw new Error("Hooks can only be called while rendering.");
-  }
-
-  return hookRenderState.currentInstance;
+  return hookRenderState.currentInstance ?? materializeInstance();
 }
 
 function areHookInputsEqual(