@reckona/mreact-compat 0.0.171 → 0.0.173

package/dist/hooks.js

@@ -1,13 +1,14 @@
-import { flushPendingComputed, flushQueuedComputations, } from "@reckona/mreact-reactive-core/internal";
+import { flushPendingComputed, flushQueuedComputations, notifySubscribers, trackSource, } from "@reckona/mreact-reactive-core/internal";
 import { scheduleCallback } from "./fiber-scheduler.js";
 import { removeChildIfPresent } from "./dom-children.js";
 import { isReactCompatContext, readContextValue, 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";
 const HOOK_RENDER_STATE_KEY = Symbol.for("modular.react.hook_render_state");
 const hookRenderState = (globalThis[HOOK_RENDER_STATE_KEY] ??= {
     currentRuntime: undefined,
     currentInstance: undefined,
+    pendingInstance: undefined,
     currentCacheScope: undefined,
     hostCommitDepth: 0,
     queuedHostCommitRerenders: new Set(),
@@ -156,6 +157,9 @@ export function createRootRuntime(rerender, options = {}) {
                 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;
@@ -258,23 +262,53 @@ export function renderWithProfiler(runtime, path, props, render) {
 export function renderWithRootRuntime(runtime, path, render, owner) {
     const previousRuntime = hookRenderState.currentRuntime;
     const previousInstance = hookRenderState.currentInstance;
-    let instance = runtime.instances.get(path);
-    if (instance !== undefined && owner !== undefined && instance.owner !== owner) {
-        cleanupInstance(instance);
-        instance = 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);
+    const previousPending = hookRenderState.pendingInstance;
+    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;
+    }
+    // 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() {
+    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;
@@ -289,17 +323,13 @@ export function renderWithRootRuntime(runtime, path, render, owner) {
         delete instance.devToolsHookTypes;
     }
     instance.devToolsHookSuppressionDepth = 0;
-    hookRenderState.currentRuntime = runtime;
     hookRenderState.currentInstance = instance;
-    try {
-        return withContextReadObserver((context, value) => {
-            (instance.contextDependencies ??= new Map()).set(context, value);
-        }, render);
-    }
-    finally {
-        hookRenderState.currentRuntime = previousRuntime;
-        hookRenderState.currentInstance = previousInstance;
-    }
+    hookRenderState.pendingInstance = undefined;
+    return instance;
+}
+function recordContextDependency(context, value) {
+    const instance = hookRenderState.currentInstance ?? materializeInstance();
+    (instance.contextDependencies ??= new Map()).set(context, value);
 }
 export function hasChangedContextDependency(runtime, keys) {
     for (const key of keys) {
@@ -318,18 +348,22 @@ export function hasChangedContextDependency(runtime, keys) {
 export function hasContextDependency(runtime, keys) {
     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 = [];
 export function collectRuntimeInstanceKeys(runtime, prefix) {
     const keys = runtime.instanceKeysByPrefix.get(prefix);
     if (keys === undefined) {
-        return [];
+        return EMPTY_INSTANCE_KEYS;
     }
-    const activeKeys = [];
+    let activeKeys;
     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(runtime, path) {
     const instance = runtime.instances.get(path);
@@ -480,7 +514,7 @@ export function useState(initial) {
     if (slot.kind !== "state") {
         throw new Error("Hook order changed between renders.");
     }
-    const setState = (value) => {
+    slot.dispatch ??= (value) => {
         const previousValue = slot.value;
         const nextValue = typeof value === "function"
             ? value(slot.value)
@@ -500,7 +534,15 @@ export function useState(initial) {
             transitionDepth === 0 &&
             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;
         }
         if (hookRenderState.hostCommitDepth > 0) {
@@ -510,12 +552,14 @@ export function useState(initial) {
         }
         scheduleInstanceUpdate(runtime, instance, { deferSync: typeof value === "function" });
     };
+    const setState = slot.dispatch;
     recordDevToolsHook("useState", {
         kind: "state",
         value: slot.value,
     });
     const result = [slot.value, setState];
     result[REACTIVE_TEXT_BINDING_META] = getStateTextBinding(slot);
+    result[REACTIVE_STATE_BINDING_META] = getStateBinding(slot);
     return result;
 }
 export function subscribeReactiveTextBinding(binding, node) {
@@ -554,6 +598,18 @@ function getStateTextBinding(slot) {
     slot.textBinding.value = slot.value;
     return slot.textBinding;
 }
+function getStateBinding(slot) {
+    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) {
     return typeof value !== "function";
 }
@@ -577,6 +633,15 @@ function updateDirectTextBinding(binding, value) {
     binding.value = value;
     return updated;
 }
+function updateDirectStateBinding(binding, value) {
+    if (binding === undefined || binding.source.subscribers === null) {
+        return false;
+    }
+    binding.value = value;
+    notifySubscribers(binding.source);
+    flushQueuedComputations();
+    return true;
+}
 function isReactiveTextBinding(value) {
     return (typeof value === "object" &&
         value !== null &&
@@ -585,7 +650,8 @@ function isReactiveTextBinding(value) {
 }
 /** Stores reducer-managed component state and returns the current state with a dispatch function. */
 export function useReducer(reducer, initialArg, init) {
-    const [state, setState] = runWithoutDevToolsHookTracking(() => useState(() => init === undefined ? initialArg : init(initialArg)));
+    const stateTuple = runWithoutDevToolsHookTracking(() => useState(() => init === undefined ? initialArg : init(initialArg)));
+    const [state, setState] = stateTuple;
     const reducerRef = runWithoutDevToolsHookTracking(() => useRef(reducer));
     const stateRef = runWithoutDevToolsHookTracking(() => useRef(state));
     const dispatchRef = runWithoutDevToolsHookTracking(() => useRef(undefined));
@@ -602,7 +668,12 @@ export function useReducer(reducer, initialArg, init) {
         kind: "reducer",
         value: state,
     });
-    return [state, dispatchRef.current];
+    const result = [state, dispatchRef.current];
+    const stateBinding = stateTuple[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. */
 export function useRef(initial) {
@@ -865,6 +936,7 @@ export function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
     if (slot.kind !== "store") {
         throw new Error("Hook order changed between renders.");
     }
+    slot.getSnapshot = getSnapshot;
     const isHydrationMount = runtime.idMode === "server" && slot.hasMounted !== true && getServerSnapshot !== undefined;
     const currentSnapshot = isHydrationMount ? slot.value : getSnapshot();
     if (!Object.is(slot.value, currentSnapshot)) {
@@ -878,7 +950,7 @@ export function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
             if (instance.disposed === true) {
                 return;
             }
-            const nextSnapshot = getSnapshot();
+            const nextSnapshot = (slot.getSnapshot ?? getSnapshot)();
             if (!Object.is(slot.value, nextSnapshot)) {
                 if (hookRenderState.hostCommitDepth > 0 && !Object.hasOwn(slot, "hostCommitValue")) {
                     slot.hostCommitValue = slot.value;
@@ -910,7 +982,7 @@ export function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
         return () => {
             unsubscribe();
         };
-    }, [subscribe, getSnapshot]));
+    }, [subscribe]));
     recordDevToolsHook("useSyncExternalStore", {
         kind: "store",
         value: slot.value,
@@ -1433,8 +1505,9 @@ function flushHostCommitRerenders() {
     if (hostCommitRerenderDepth > 0 ||
         hookRenderState.hostCommitDepth > 0 ||
         hookRenderState.queuedHostCommitRerenders.size === 0) {
-        return;
+        return false;
     }
+    let didRerender = false;
     hostCommitRerenderDepth += 1;
     try {
         for (let attempt = 0; attempt < 3 && hookRenderState.queuedHostCommitRerenders.size > 0; attempt += 1) {
@@ -1444,6 +1517,7 @@ function flushHostCommitRerenders() {
                 const hasDirtyInstance = Array.from(runtime.instances.values()).some((instance) => instance.dirty);
                 clearHostCommitStateBaselines(runtime);
                 if (hasDirtyInstance) {
+                    didRerender = true;
                     runtime.rerender("sync");
                 }
             }
@@ -1453,6 +1527,18 @@ function flushHostCommitRerenders() {
     finally {
         hostCommitRerenderDepth -= 1;
     }
+    return didRerender;
+}
+function dedupePendingEffects(queue) {
+    if (queue.length < 2) {
+        return;
+    }
+    const latestBySlot = new Map();
+    for (const effect of queue) {
+        latestBySlot.set(effect.slot, effect);
+    }
+    queue.length = 0;
+    queue.push(...latestBySlot.values());
 }
 function flushEffectFlushRerenders() {
     if (effectFlushRerenderDepth > 0 ||
@@ -1616,10 +1702,7 @@ function requireRuntime() {
     return hookRenderState.currentRuntime;
 }
 function requireInstance() {
-    if (hookRenderState.currentInstance === undefined) {
-        throw new Error("Hooks can only be called while rendering.");
-    }
-    return hookRenderState.currentInstance;
+    return hookRenderState.currentInstance ?? materializeInstance();
 }
 function areHookInputsEqual(nextDeps, previousDeps) {
     if (nextDeps.length !== previousDeps.length) {