@reckona/mreact-compat 0.0.144 → 0.0.146

package/dist/hooks.js

@@ -2,6 +2,7 @@ import { flushPendingComputed, flushQueuedComputations, } from "@reckona/mreact-
 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 { isThenable } from "./thenable.js";
 const HOOK_RENDER_STATE_KEY = Symbol.for("modular.react.hook_render_state");
 const hookRenderState = (globalThis[HOOK_RENDER_STATE_KEY] ??= {
@@ -30,6 +31,8 @@ const strictMemoPrimitiveOwnerIds = new Map();
 const queuedTransitionRerenders = new Map();
 const queuedEventRerenders = new Set();
 export const version = "19.2.6";
+const reactiveTextBindingsByNode = new WeakMap();
+const hydratedIdsByRuntime = new WeakMap();
 export function act(callback) {
     const previousPriority = currentEventPriority;
     currentEventPriority = "discrete";
@@ -477,6 +480,17 @@ export function useState(initial) {
             slot.hostCommitValue = previousValue;
         }
         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);
@@ -488,7 +502,66 @@ export function useState(initial) {
         kind: "state",
         value: slot.value,
     });
-    return [slot.value, setState];
+    const result = [slot.value, setState];
+    result[REACTIVE_TEXT_BINDING_META] = getStateTextBinding(slot);
+    return result;
+}
+export function subscribeReactiveTextBinding(binding, node) {
+    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) {
+    const previous = reactiveTextBindingsByNode.get(node);
+    if (previous === undefined) {
+        return;
+    }
+    previous.subscribers.delete(node);
+    reactiveTextBindingsByNode.delete(node);
+}
+function getStateTextBinding(slot) {
+    slot.textBinding ??= {
+        value: slot.value,
+        subscribers: new Set(),
+    };
+    slot.textBinding.value = slot.value;
+    return slot.textBinding;
+}
+function optionsAllowDirectTextBinding(value) {
+    return typeof value !== "function";
+}
+function updateDirectTextBinding(binding, value) {
+    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) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "subscribers" in value &&
+        value.subscribers instanceof Set);
 }
 export function useReducer(reducer, initialArg, init) {
     const [state, setState] = runWithoutDevToolsHookTracking(() => useState(() => init === undefined ? initialArg : init(initialArg)));
@@ -526,11 +599,26 @@ export function useRef(initial) {
 }
 export function useId() {
     const runtime = requireRuntime();
+    const instance = requireInstance();
+    const idSlotKey = `${instance.path}:${instance.hookIndex}`;
     const idRef = runWithoutDevToolsHookTracking(() => useRef(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();
+                hydratedIds.set(idSlotKey, idRef.current);
+                hydratedIdsByRuntime.set(runtime, hydratedIds);
+            }
+        }
     }
     recordDevToolsHook("useId", {
         kind: "id",
@@ -719,24 +807,32 @@ export function useLayoutEffect(callback, deps) {
         ? { kind: "effect", effectKind: "layout" }
         : { kind: "effect", effectKind: "layout", deps });
 }
-export function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot = getSnapshot) {
+export function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
     const runtime = requireRuntime();
     const instance = requireInstance();
     const index = instance.hookIndex;
     instance.hookIndex += 1;
     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;
     }
     if (slot.kind !== "store") {
         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 : getSnapshot();
     if (!Object.is(slot.value, currentSnapshot)) {
         slot.value = currentSnapshot;
     }
-    recordExternalStoreCheck(getSnapshot, currentSnapshot);
+    if (!isHydrationMount) {
+        recordExternalStoreCheck(getSnapshot, currentSnapshot);
+    }
     runWithoutDevToolsHookTracking(() => useEffect(() => {
         const checkForUpdates = () => {
             if (instance.disposed === true) {