@reckona/mreact-compat 0.0.91 → 0.0.92

package/dist/hooks.js

@@ -1,12 +1,16 @@
 import { scheduleCallback } from "./fiber-scheduler.js";
-import { Activity, Fragment, FORWARD_REF_TYPE, MEMO_TYPE, Profiler, isReactCompatElement, } from "./element.js";
-import { isReactCompatContext, isReactCompatConsumer, isReactCompatProvider, renderWithContextProvider, useContext, } from "./context.js";
+import { removeChildIfPresent } from "./dom-children.js";
+import { isReactCompatContext, readContextValue, useContext, withContextReadObserver, } from "./context.js";
 import { isThenable } from "./thenable.js";
-import { isDangerousHtmlAttribute, isDangerousHtmlOptIn } from "./url-safety.js";
-import { escapeHtmlAttribute as escapeHtml } from "@reckona/mreact-shared/html-escape";
-let currentRuntime;
-let currentInstance;
-let currentCacheScope;
+const HOOK_RENDER_STATE_KEY = Symbol.for("modular.react.hook_render_state");
+const hookRenderState = (globalThis[HOOK_RENDER_STATE_KEY] ??= {
+    currentRuntime: undefined,
+    currentInstance: undefined,
+    currentCacheScope: undefined,
+    hostCommitDepth: 0,
+    queuedHostCommitRerenders: new Set(),
+    queuedEffectFlushRerenders: new Set(),
+});
 const CACHE_SCOPE_SYMBOL = Symbol.for("modular.react.cache_scope");
 const emptyCacheOwnerStack = [];
 let syncVersion = 0;
@@ -17,12 +21,64 @@ let transitionRerenderScheduled = false;
 let eventBatchDepth = 0;
 let currentEventPriority = "default";
 let eventRerenderScheduled = false;
+let effectFlushRerenderDepth = 0;
+let strictMemoOwnerId = 0;
+const strictMemoObjectOwnerIds = new WeakMap();
+const strictMemoPrimitiveOwnerIds = new Map();
 const queuedTransitionRerenders = new Map();
 const queuedEventRerenders = new Set();
 export const version = "19.2.6";
 export function act(callback) {
-    const result = callback();
-    return (isThenable(result) ? Promise.resolve(result).then(() => undefined) : undefined);
+    const previousPriority = currentEventPriority;
+    currentEventPriority = "discrete";
+    eventBatchDepth += 1;
+    let result;
+    try {
+        result = callback();
+    }
+    catch (error) {
+        eventBatchDepth -= 1;
+        currentEventPriority = previousPriority;
+        if (eventBatchDepth === 0) {
+            flushEventRerendersForPriority("discrete");
+        }
+        throw error;
+    }
+    const finishActScope = () => {
+        eventBatchDepth -= 1;
+        currentEventPriority = previousPriority;
+        if (eventBatchDepth === 0) {
+            flushEventRerendersForPriority("discrete");
+        }
+    };
+    if (isThenable(result)) {
+        return Promise.resolve(result).then(async () => {
+            finishActScope();
+            await flushActWorkAsync();
+        }, (error) => {
+            finishActScope();
+            throw error;
+        });
+    }
+    finishActScope();
+    flushActWork();
+    return undefined;
+}
+async function flushActWorkAsync() {
+    for (let attempt = 0; attempt < 10; attempt += 1) {
+        await Promise.resolve();
+        flushActWork();
+    }
+    for (let attempt = 0; attempt < 3; attempt += 1) {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        flushActWork();
+    }
+}
+function flushActWork() {
+    flushQueuedEventRerenders("sync");
+    flushQueuedTransitionRerenders();
+    flushHostCommitRerenders();
+    flushEffectFlushRerenders();
 }
 export function createRootRuntime(rerender, options = {}) {
     return {
@@ -37,11 +93,19 @@ export function createRootRuntime(rerender, options = {}) {
         pendingEffects: [],
         externalStoreChecks: [],
         portalContainers: new Set(),
+        portalNodes: new Map(),
         idCounter: 0,
         identifierPrefix: options.identifierPrefix ?? "",
         idMode: options.idMode ?? "client",
         strictModeDepth: 0,
+        strictReplayDepth: 0,
+        strictMemoCapture: undefined,
+        strictMemoCaptureByHook: undefined,
+        strictMemoReplay: undefined,
+        strictMemoReplayByHook: undefined,
         profilerFlushDepth: 0,
+        effectFlushPhase: undefined,
+        externalStoreUpdate: false,
         rerender,
         beginRender() {
             this.activeInstanceKeys = new Set();
@@ -65,24 +129,34 @@ export function createRootRuntime(rerender, options = {}) {
             }
             this.activeInstanceKeys = undefined;
             this.activeProfilerPaths = undefined;
-            currentRuntime = undefined;
-            currentInstance = undefined;
+            hookRenderState.currentRuntime = undefined;
+            hookRenderState.currentInstance = undefined;
             if (committed) {
                 flushProfilerCommits(this, profilerCommits);
+                flushHostCommitRerenders();
+                this.externalStoreUpdate = false;
             }
         },
         flushEffects() {
             this.profilerFlushDepth += 1;
             try {
+                this.effectFlushPhase = "insertion";
                 flushPendingEffects(this.pendingInsertionEffects);
+                this.effectFlushPhase = "layout";
                 const strictLayoutEffects = flushPendingEffects(this.pendingLayoutEffects);
+                this.effectFlushPhase = "normal";
                 const strictEffects = flushPendingEffects(this.pendingEffects);
+                this.effectFlushPhase = undefined;
                 const strictReplayEffects = [...strictLayoutEffects, ...strictEffects];
                 cleanupStrictEffects(strictReplayEffects);
                 replayStrictEffects(strictReplayEffects);
             }
             finally {
+                this.effectFlushPhase = undefined;
                 this.profilerFlushDepth -= 1;
+                if (this.profilerFlushDepth === 0) {
+                    flushEffectFlushRerenders();
+                }
             }
         },
         dispose() {
@@ -96,10 +170,7 @@ export function createRootRuntime(rerender, options = {}) {
             this.activeProfilerPaths = undefined;
             this.mountedProfilerPaths.clear();
             this.profilerBaseDurations.clear();
-            for (const container of this.portalContainers) {
-                container.replaceChildren();
-            }
-            this.portalContainers.clear();
+            clearRuntimePortalNodes(this);
         },
     };
 }
@@ -116,31 +187,31 @@ export function refreshCacheScope(scope) {
     scope.controller = new AbortController();
 }
 export function runWithCacheScope(scope, callback) {
-    const previousScope = currentCacheScope;
+    const previousScope = hookRenderState.currentCacheScope;
     const previousGlobalScope = getGlobalCacheScope();
-    currentCacheScope = scope;
+    hookRenderState.currentCacheScope = scope;
     setGlobalCacheScope(scope);
     try {
         const result = callback();
         if (isThenable(result)) {
             return Promise.resolve(result).finally(() => {
-                currentCacheScope = previousScope;
+                hookRenderState.currentCacheScope = previousScope;
                 setGlobalCacheScope(previousGlobalScope);
             });
         }
-        currentCacheScope = previousScope;
+        hookRenderState.currentCacheScope = previousScope;
         setGlobalCacheScope(previousGlobalScope);
         return result;
     }
     catch (error) {
-        currentCacheScope = previousScope;
+        hookRenderState.currentCacheScope = previousScope;
         setGlobalCacheScope(previousGlobalScope);
         throw error;
     }
 }
 export function renderWithProfiler(runtime, path, props, render) {
     const startTime = getCurrentTime();
-    const phase = runtime.profilerFlushDepth > 0
+    const phase = runtime.profilerFlushDepth > 0 || effectFlushRerenderDepth > 0
         ? "nested-update"
         : runtime.mountedProfilerPaths.has(path)
             ? "update"
@@ -167,10 +238,17 @@ export function renderWithProfiler(runtime, path, props, render) {
         }
     }
 }
-export function renderWithRootRuntime(runtime, path, render) {
-    const previousRuntime = currentRuntime;
-    const previousInstance = currentInstance;
-    const instance = runtime.instances.get(path) ?? {
+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,
@@ -178,23 +256,46 @@ export function renderWithRootRuntime(runtime, path, render) {
         devToolsHookTypes: [],
         devToolsHookSuppressionDepth: 0,
     };
+    instance.owner = owner;
+    instance.path = path;
     runtime.instances.set(path, instance);
     runtime.activeInstanceKeys?.add(path);
     instance.hookIndex = 0;
     instance.dirty = false;
+    instance.disposed = false;
+    delete instance.contextDependencies;
     instance.devToolsHooks = [];
     instance.devToolsHookTypes = [];
     instance.devToolsHookSuppressionDepth = 0;
-    currentRuntime = runtime;
-    currentInstance = instance;
+    hookRenderState.currentRuntime = runtime;
+    hookRenderState.currentInstance = instance;
     try {
-        return render();
+        return withContextReadObserver((context, value) => {
+            (instance.contextDependencies ??= new Map()).set(context, value);
+        }, render);
     }
     finally {
-        currentRuntime = previousRuntime;
-        currentInstance = previousInstance;
+        hookRenderState.currentRuntime = previousRuntime;
+        hookRenderState.currentInstance = previousInstance;
     }
 }
+export function hasChangedContextDependency(runtime, keys) {
+    for (const key of keys) {
+        const dependencies = runtime.instances.get(key)?.contextDependencies;
+        if (dependencies === undefined) {
+            continue;
+        }
+        for (const [context, value] of dependencies) {
+            if (!Object.is(readContextValue(context), value)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+export function hasContextDependency(runtime, keys) {
+    return keys.some((key) => runtime.instances.get(key)?.contextDependencies !== undefined);
+}
 export function getDevToolsHookState(runtime, path) {
     const instance = runtime.instances.get(path);
     if (instance === undefined) {
@@ -214,10 +315,44 @@ export function renderWithStrictMode(runtime, render) {
         runtime.strictModeDepth -= 1;
     }
 }
+export function renderWithStrictModeMemoCapture(runtime, render) {
+    const previousCapture = runtime.strictMemoCapture;
+    const previousCaptureByHook = runtime.strictMemoCaptureByHook;
+    runtime.strictMemoCapture = [];
+    runtime.strictMemoCaptureByHook = new Map();
+    try {
+        const result = renderWithStrictMode(runtime, render);
+        return {
+            result,
+            memoValues: runtime.strictMemoCapture,
+            memoValuesByHook: runtime.strictMemoCaptureByHook,
+        };
+    }
+    finally {
+        runtime.strictMemoCapture = previousCapture;
+        runtime.strictMemoCaptureByHook = previousCaptureByHook;
+    }
+}
+export function renderStrictModeReplay(runtime, memoValues, memoValuesByHook, render) {
+    const previousReplay = runtime.strictMemoReplay;
+    const previousReplayByHook = runtime.strictMemoReplayByHook;
+    runtime.strictReplayDepth += 1;
+    runtime.strictMemoReplay = { values: memoValues, index: 0 };
+    runtime.strictMemoReplayByHook = memoValuesByHook;
+    try {
+        return render();
+    }
+    finally {
+        runtime.strictMemoReplay = previousReplay;
+        runtime.strictMemoReplayByHook = previousReplayByHook;
+        runtime.strictReplayDepth -= 1;
+    }
+}
 export function takeRuntimeSnapshot(runtime) {
     return {
         instanceKeys: new Set(runtime.instances.keys()),
         portalContainers: new Set(runtime.portalContainers),
+        portalNodes: clonePortalNodes(runtime.portalNodes),
         pendingInsertionEffectsLength: runtime.pendingInsertionEffects.length,
         pendingLayoutEffectsLength: runtime.pendingLayoutEffects.length,
         pendingEffectsLength: runtime.pendingEffects.length,
@@ -227,6 +362,11 @@ export function takeRuntimeSnapshot(runtime) {
         identifierPrefix: runtime.identifierPrefix,
         idMode: runtime.idMode,
         strictModeDepth: runtime.strictModeDepth,
+        strictReplayDepth: runtime.strictReplayDepth,
+        strictMemoCapture: runtime.strictMemoCapture,
+        strictMemoCaptureByHook: runtime.strictMemoCaptureByHook,
+        strictMemoReplay: runtime.strictMemoReplay,
+        strictMemoReplayByHook: runtime.strictMemoReplayByHook,
         profilerFlushDepth: runtime.profilerFlushDepth,
     };
 }
@@ -240,21 +380,49 @@ export function restoreRuntimeSnapshot(runtime, snapshot) {
     runtime.identifierPrefix = snapshot.identifierPrefix;
     runtime.idMode = snapshot.idMode;
     runtime.strictModeDepth = snapshot.strictModeDepth;
+    runtime.strictReplayDepth = snapshot.strictReplayDepth;
+    runtime.strictMemoCapture = snapshot.strictMemoCapture;
+    runtime.strictMemoCaptureByHook = snapshot.strictMemoCaptureByHook;
+    runtime.strictMemoReplay = snapshot.strictMemoReplay;
+    runtime.strictMemoReplayByHook = snapshot.strictMemoReplayByHook;
     runtime.profilerFlushDepth = snapshot.profilerFlushDepth;
     for (const key of runtime.instances.keys()) {
         if (!snapshot.instanceKeys.has(key)) {
             runtime.instances.delete(key);
         }
     }
-    for (const container of runtime.portalContainers) {
-        if (!snapshot.portalContainers.has(container)) {
-            container.replaceChildren();
-        }
-    }
+    clearRuntimePortalNodesExcept(runtime, snapshot.portalNodes);
     runtime.portalContainers.clear();
     for (const container of snapshot.portalContainers) {
         runtime.portalContainers.add(container);
     }
+    runtime.portalNodes = clonePortalNodes(snapshot.portalNodes);
+}
+export function clearRuntimePortalNodes(runtime) {
+    for (const [container, nodes] of runtime.portalNodes) {
+        for (const node of nodes) {
+            removeChildIfPresent(container, node);
+        }
+    }
+    runtime.portalNodes.clear();
+    runtime.portalContainers.clear();
+}
+function clearRuntimePortalNodesExcept(runtime, preserved) {
+    for (const [container, nodes] of runtime.portalNodes) {
+        const preservedNodes = preserved.get(container);
+        for (const node of nodes) {
+            if (preservedNodes?.has(node) !== true) {
+                removeChildIfPresent(container, node);
+            }
+        }
+    }
+}
+function clonePortalNodes(source) {
+    const clone = new Map();
+    for (const [container, nodes] of source) {
+        clone.set(container, new Set(nodes));
+    }
+    return clone;
 }
 export function useState(initial) {
     const runtime = requireRuntime();
@@ -273,13 +441,22 @@ export function useState(initial) {
         throw new Error("Hook order changed between renders.");
     }
     const setState = (value) => {
+        const previousValue = slot.value;
         const nextValue = typeof value === "function"
             ? value(slot.value)
             : value;
         if (Object.is(slot.value, nextValue)) {
             return;
         }
+        if (hookRenderState.hostCommitDepth > 0 && !Object.hasOwn(slot, "hostCommitValue")) {
+            slot.hostCommitValue = previousValue;
+        }
         slot.value = nextValue;
+        if (hookRenderState.hostCommitDepth > 0) {
+            updateHostCommitDirtyState(instance);
+            hookRenderState.queuedHostCommitRerenders.add(runtime);
+            return;
+        }
         scheduleInstanceUpdate(runtime, instance);
     };
     recordDevToolsHook("useState", {
@@ -349,6 +526,7 @@ export function useImperativeHandle(ref, create, deps) {
         : { kind: "imperative-handle", deps });
 }
 export function useMemo(factory, deps) {
+    const runtime = requireRuntime();
     const instance = requireInstance();
     const index = instance.hookIndex;
     instance.hookIndex += 1;
@@ -356,21 +534,72 @@ export function useMemo(factory, deps) {
     if (slot !== undefined && slot.kind !== "memo") {
         throw new Error("Hook order changed between renders.");
     }
-    if (slot === undefined ||
+    let value;
+    const shouldRecompute = slot === undefined ||
         deps === undefined ||
         slot.deps === undefined ||
-        !areHookInputsEqual(deps, slot.deps)) {
-        const value = factory();
+        !areHookInputsEqual(deps, slot.deps);
+    if (runtime.strictReplayDepth > 0) {
+        const replayValue = factory();
+        if (slot === undefined) {
+            slot =
+                deps === undefined
+                    ? { kind: "memo", value: replayValue }
+                    : { kind: "memo", value: replayValue, deps };
+            instance.hooks[index] = slot;
+        }
+        const hookKey = getStrictMemoHookKey(instance, index);
+        const replayByHook = runtime.strictMemoReplayByHook;
+        const replay = runtime.strictMemoReplay;
+        value = replayByHook?.has(hookKey) === true
+            ? replayByHook.get(hookKey)
+            : replay === undefined || replay.index >= replay.values.length
+                ? slot.value
+                : replay.values[replay.index++];
+    }
+    else if (shouldRecompute) {
+        value = factory();
         slot =
             deps === undefined
                 ? { kind: "memo", value }
                 : { kind: "memo", value, deps };
         instance.hooks[index] = slot;
     }
-    recordDevToolsHook("useMemo", slot.deps === undefined
-        ? { kind: "memo", value: slot.value }
-        : { kind: "memo", value: slot.value, deps: slot.deps });
-    return slot.value;
+    else {
+        value = slot.value;
+    }
+    if (runtime.strictModeDepth > 0 && runtime.strictReplayDepth === 0) {
+        runtime.strictMemoCapture?.push(value);
+        runtime.strictMemoCaptureByHook?.set(getStrictMemoHookKey(instance, index), value);
+    }
+    const memoSlot = slot;
+    if (memoSlot === undefined) {
+        throw new Error("Hook order changed between renders.");
+    }
+    recordDevToolsHook("useMemo", memoSlot.deps === undefined
+        ? { kind: "memo", value }
+        : { kind: "memo", value, deps: memoSlot.deps });
+    return value;
+}
+function getStrictMemoHookKey(instance, index) {
+    return `${instance.path}:${getStrictMemoOwnerId(instance.owner)}:${index}`;
+}
+function getStrictMemoOwnerId(owner) {
+    if ((typeof owner === "object" && owner !== null) || typeof owner === "function") {
+        const objectOwner = owner;
+        let ownerId = strictMemoObjectOwnerIds.get(objectOwner);
+        if (ownerId === undefined) {
+            ownerId = strictMemoOwnerId++;
+            strictMemoObjectOwnerIds.set(objectOwner, ownerId);
+        }
+        return ownerId;
+    }
+    let ownerId = strictMemoPrimitiveOwnerIds.get(owner);
+    if (ownerId === undefined) {
+        ownerId = strictMemoOwnerId++;
+        strictMemoPrimitiveOwnerIds.set(owner, ownerId);
+    }
+    return ownerId;
 }
 function assignRef(ref, value) {
     if (typeof ref === "function") {
@@ -382,7 +611,7 @@ function assignRef(ref, value) {
     }
 }
 function recordDevToolsHook(type, value) {
-    const instance = currentInstance;
+    const instance = hookRenderState.currentInstance;
     if (instance === undefined || instance.devToolsHookSuppressionDepth > 0) {
         return;
     }
@@ -479,14 +708,29 @@ export function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot =
     recordExternalStoreCheck(getSnapshot, currentSnapshot);
     runWithoutDevToolsHookTracking(() => useEffect(() => {
         const checkForUpdates = () => {
+            if (instance.disposed === true) {
+                return;
+            }
             const nextSnapshot = getSnapshot();
             if (!Object.is(slot.value, nextSnapshot)) {
                 slot.value = nextSnapshot;
+                instance.dirty = true;
+                runtime.externalStoreUpdate = true;
+                if (runtime.profilerFlushDepth > 0) {
+                    hookRenderState.queuedEffectFlushRerenders.add(runtime);
+                    return;
+                }
                 runtime.rerender("sync");
             }
         };
-        checkForUpdates();
-        return subscribe(checkForUpdates);
+        if (slot.hasMounted !== true) {
+            checkForUpdates();
+        }
+        const unsubscribe = subscribe(checkForUpdates);
+        slot.hasMounted = true;
+        return () => {
+            unsubscribe();
+        };
     }, [subscribe, getSnapshot]));
     recordDevToolsHook("useSyncExternalStore", {
         kind: "store",
@@ -617,280 +861,6 @@ export function unstable_useCacheRefresh() {
 export function hasStableExternalStores(runtime) {
     return runtime.externalStoreChecks.every((check) => Object.is(check.getSnapshot(), check.value));
 }
-export function renderToString(component, props, options = {}) {
-    const runtime = createRootRuntime(() => undefined, {
-        ...options,
-        idMode: "server",
-    });
-    return runWithCacheScope(createCacheScope(), () => {
-        try {
-            const rendered = renderWithRootRuntime(runtime, "0", () => {
-                if (isClassComponentType(component)) {
-                    const instance = new component(props);
-                    return instance.render();
-                }
-                return component(props);
-            });
-            return typeof rendered === "string"
-                ? rendered
-                : renderNodeToString(rendered, runtime, "0");
-        }
-        finally {
-            runtime.dispose();
-        }
-    });
-}
-function renderNodeToString(node, runtime, path) {
-    if (node === null || node === undefined || typeof node === "boolean") {
-        return "";
-    }
-    if (typeof node === "string" || typeof node === "number") {
-        return escapeHtml(node);
-    }
-    if (Array.isArray(node)) {
-        return node.map((child, index) => renderNodeToString(child, runtime, `${path}.${index}`)).join("");
-    }
-    if (!isReactCompatElement(node)) {
-        return "";
-    }
-    return renderElementToString(node, runtime, path);
-}
-function renderElementToString(element, runtime, path) {
-    if (typeof element.type === "string") {
-        if (element.type === "textarea") {
-            return renderTextareaToString(element, runtime, path);
-        }
-        if (element.type === "select") {
-            return renderSelectToString(element, runtime, path);
-        }
-        const attributes = element.type === "input"
-            ? renderInputAttributesToString(element.props)
-            : Object.entries(element.props)
-                .map(([name, value]) => renderHtmlAttribute(name, value))
-                .filter((attribute) => attribute !== "")
-                .join("");
-        if (voidHtmlElements.has(element.type)) {
-            return `<${element.type}${attributes}/>`;
-        }
-        return `<${element.type}${attributes}>${renderNodeToString(element.props.children, runtime, `${path}.children`)}</${element.type}>`;
-    }
-    if (element.type === Fragment) {
-        return renderNodeToString(element.props.children, runtime, `${path}.fragment`);
-    }
-    if (element.type === Activity) {
-        if (element.props.mode === "hidden") {
-            return "";
-        }
-        return `<!--&-->${renderNodeToString(element.props.children, runtime, `${path}.activity`)}<!--/&-->`;
-    }
-    if (element.type === Profiler) {
-        return renderNodeToString(element.props.children, runtime, `${path}.profiler`);
-    }
-    if (isReactCompatProvider(element.type)) {
-        return renderWithContextProvider(element.type, element.props.value, () => renderNodeToString(element.props.children, runtime, `${path}.provider`));
-    }
-    if (isReactCompatConsumer(element.type)) {
-        const children = element.props.children;
-        if (typeof children === "function") {
-            return renderNodeToString(children(useContext(element.type.context)), runtime, `${path}.consumer`);
-        }
-        return "";
-    }
-    if (isForwardRefType(element.type)) {
-        const forwardRefType = element.type;
-        return renderNodeToString(renderWithRootRuntime(runtime, `${path}.forwardRef`, () => forwardRefType.render(element.props, element.ref)), runtime, `${path}.forwardRef`);
-    }
-    if (isMemoType(element.type)) {
-        return renderNodeToString({
-            ...element,
-            type: element.type.type,
-        }, runtime, `${path}.memo`);
-    }
-    if (isClassComponentType(element.type)) {
-        const instance = new element.type(element.props);
-        return renderNodeToString(renderWithRootRuntime(runtime, path, () => instance.render()), runtime, path);
-    }
-    if (typeof element.type === "function") {
-        const component = element.type;
-        return renderNodeToString(renderWithRootRuntime(runtime, path, () => component(element.props)), runtime, path);
-    }
-    return "";
-}
-function isClassComponentType(value) {
-    return (typeof value === "function" &&
-        typeof value.prototype?.render === "function");
-}
-function renderTextareaToString(element, runtime, path) {
-    const value = element.props.value ??
-        element.props.defaultValue ??
-        element.props.children;
-    const attributes = Object.entries(element.props)
-        .filter(([name]) => name !== "value" && name !== "defaultValue")
-        .map(([name, child]) => renderHtmlAttribute(name, child))
-        .filter((attribute) => attribute !== "")
-        .join("");
-    return `<textarea${attributes}>${renderNodeToString(value, runtime, `${path}.textarea`)}</textarea>`;
-}
-function renderSelectToString(element, runtime, path) {
-    const selectedValue = element.props.value ??
-        element.props.defaultValue;
-    const attributes = Object.entries(element.props)
-        .filter(([name]) => name !== "value" && name !== "defaultValue")
-        .map(([name, child]) => renderHtmlAttribute(name, child))
-        .filter((attribute) => attribute !== "")
-        .join("");
-    return `<select${attributes}>${renderSelectChildrenToString(element.props.children, selectedValue, runtime, `${path}.select`)}</select>`;
-}
-function renderSelectChildrenToString(children, selectedValue, runtime, path) {
-    const childArray = Array.isArray(children) ? children : [children];
-    return childArray.map((child, index) => {
-        if (!isReactCompatElement(child) || child.type !== "option") {
-            return renderNodeToString(child, runtime, `${path}.${index}`);
-        }
-        const optionValue = child.props.value ?? child.props.children;
-        const selected = selectedValue !== undefined && String(optionValue) === String(selectedValue);
-        const props = selected
-            ? { ...child.props, selected: true }
-            : child.props;
-        return renderElementToString({ ...child, props }, runtime, `${path}.${index}`);
-    }).join("");
-}
-function renderInputAttributesToString(props) {
-    const hasValue = props.value !== undefined;
-    const hasChecked = props.checked !== undefined;
-    return Object.entries(props)
-        .filter(([name]) => !((name === "defaultValue" && hasValue) || (name === "defaultChecked" && hasChecked)))
-        .sort(([leftName], [rightName]) => Number(isInputValueAttribute(leftName)) - Number(isInputValueAttribute(rightName)))
-        .map(([name, value]) => renderHtmlAttribute(toInputHtmlAttributeName(name), value))
-        .filter((attribute) => attribute !== "")
-        .join("");
-}
-function renderHtmlAttribute(name, value) {
-    if (name === "children" ||
-        name === "key" ||
-        name === "ref" ||
-        /^on[A-Z]/.test(name) ||
-        value === null ||
-        value === undefined ||
-        value === false ||
-        typeof value === "function") {
-        return "";
-    }
-    if (name === "style") {
-        const style = renderStyleAttribute(value);
-        return style === "" ? "" : ` style="${escapeHtml(style)}"`;
-    }
-    const attributeName = toHtmlAttributeName(name);
-    if (isDangerousHtmlAttribute(attributeName)) {
-        return isDangerousHtmlOptIn(value)
-            ? ` ${attributeName}="${escapeHtml(value.__html)}"`
-            : "";
-    }
-    if (typeof value === "object") {
-        return "";
-    }
-    if (value === true) {
-        return ` ${attributeName}=""`;
-    }
-    return ` ${attributeName}="${escapeHtml(value)}"`;
-}
-function isInputValueAttribute(name) {
-    return name === "value" || name === "defaultValue";
-}
-function toInputHtmlAttributeName(name) {
-    if (name === "defaultValue") {
-        return "value";
-    }
-    if (name === "defaultChecked") {
-        return "checked";
-    }
-    return name;
-}
-function toHtmlAttributeName(name) {
-    return HTML_ATTRIBUTE_ALIASES[name] ?? name;
-}
-const HTML_ATTRIBUTE_ALIASES = {
-    acceptCharset: "accept-charset",
-    autoFocus: "autofocus",
-    autoPlay: "autoplay",
-    charSet: "charset",
-    className: "class",
-    colSpan: "colspan",
-    contentEditable: "contenteditable",
-    crossOrigin: "crossorigin",
-    encType: "enctype",
-    formAction: "formaction",
-    frameBorder: "frameborder",
-    htmlFor: "for",
-    httpEquiv: "http-equiv",
-    maxLength: "maxlength",
-    minLength: "minlength",
-    noValidate: "novalidate",
-    playsInline: "playsinline",
-    readOnly: "readOnly",
-    rowSpan: "rowspan",
-    spellCheck: "spellcheck",
-    srcDoc: "srcdoc",
-    srcSet: "srcset",
-    tabIndex: "tabindex",
-    useMap: "usemap",
-};
-function renderStyleAttribute(value) {
-    if (typeof value !== "object" || value === null) {
-        return "";
-    }
-    return Object.entries(value)
-        .filter(([, propertyValue]) => propertyValue !== null &&
-        propertyValue !== undefined &&
-        typeof propertyValue !== "boolean" &&
-        propertyValue !== "")
-        .map(([name, propertyValue]) => `${toKebabCase(name)}:${renderCssValue(name, propertyValue)}`)
-        .join(";");
-}
-function renderCssValue(name, value) {
-    if (typeof value !== "number" || value === 0 || isUnitlessCssProperty(name)) {
-        return String(value);
-    }
-    return `${value}px`;
-}
-function toKebabCase(value) {
-    return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function isUnitlessCssProperty(name) {
-    return (name === "flex" ||
-        name === "fontWeight" ||
-        name === "lineHeight" ||
-        name === "opacity" ||
-        name === "order" ||
-        name === "zIndex" ||
-        name === "zoom");
-}
-const voidHtmlElements = new Set([
-    "area",
-    "base",
-    "br",
-    "col",
-    "embed",
-    "hr",
-    "img",
-    "input",
-    "link",
-    "meta",
-    "param",
-    "source",
-    "track",
-    "wbr",
-]);
-function isForwardRefType(value) {
-    return (typeof value === "object" &&
-        value !== null &&
-        value.$$typeof === FORWARD_REF_TYPE);
-}
-function isMemoType(value) {
-    return (typeof value === "object" &&
-        value !== null &&
-        value.$$typeof === MEMO_TYPE);
-}
 function readThenable(thenable) {
     const record = thenable;
     if (record.status === "fulfilled") {
@@ -957,6 +927,15 @@ export function flushSyncUpdates(callback) {
         currentEventPriority = previousEventPriority;
     }
 }
+export function runWithHostCommit(callback) {
+    hookRenderState.hostCommitDepth += 1;
+    try {
+        return callback();
+    }
+    finally {
+        hookRenderState.hostCommitDepth -= 1;
+    }
+}
 export function useTransition() {
     const [pending, setPending] = runWithoutDevToolsHookTracking(() => useState(false));
     const startTransitionWithPending = (scope) => {
@@ -1070,6 +1049,7 @@ function useEffectImpl(effectKind, callback, deps) {
         throw new Error("Hook order changed between renders.");
     }
     const shouldRun = slot === undefined ||
+        slot.mounted !== true ||
         deps === undefined ||
         slot.deps === undefined ||
         !areHookInputsEqual(deps, slot.deps);
@@ -1092,7 +1072,8 @@ function useEffectImpl(effectKind, callback, deps) {
         }
     }
     slot.strictReplay =
-        runtime.strictModeDepth > 0 && effectKind !== "insertion";
+        (runtime.strictModeDepth > 0 || runtime.strictReplayDepth > 0) &&
+            effectKind !== "insertion";
     if (shouldRun) {
         const queue = effectKind === "insertion"
             ? runtime.pendingInsertionEffects
@@ -1103,7 +1084,7 @@ function useEffectImpl(effectKind, callback, deps) {
     }
 }
 function recordExternalStoreCheck(getSnapshot, value) {
-    currentRuntime?.externalStoreChecks.push({ getSnapshot, value });
+    hookRenderState.currentRuntime?.externalStoreChecks.push({ getSnapshot, value });
 }
 function flushPendingEffects(queue) {
     const pending = queue.splice(0);
@@ -1121,6 +1102,7 @@ function flushPendingEffects(queue) {
         else {
             delete slot.cleanup;
         }
+        slot.mounted = true;
         if (shouldReplay) {
             strictReplay.push({ slot });
         }
@@ -1184,9 +1166,20 @@ function runActionStateDispatch(slot, runtime, instance, payload) {
     });
 }
 function scheduleInstanceUpdate(runtime, instance) {
+    if (instance.disposed === true) {
+        return;
+    }
     instance.dirty = true;
     if (transitionDepth === 0) {
         syncVersion += 1;
+        if (hookRenderState.hostCommitDepth > 0) {
+            hookRenderState.queuedHostCommitRerenders.add(runtime);
+            return;
+        }
+        if (runtime.effectFlushPhase !== undefined) {
+            hookRenderState.queuedEffectFlushRerenders.add(runtime);
+            return;
+        }
         if (eventBatchDepth > 0) {
             queueEventRerender(runtime);
             return;
@@ -1198,6 +1191,58 @@ function scheduleInstanceUpdate(runtime, instance) {
         queueTransitionRerender(runtime, currentTransitionContext);
     }
 }
+function flushHostCommitRerenders() {
+    if (hookRenderState.hostCommitDepth > 0 ||
+        hookRenderState.queuedHostCommitRerenders.size === 0) {
+        return;
+    }
+    const runtimes = [...hookRenderState.queuedHostCommitRerenders];
+    hookRenderState.queuedHostCommitRerenders.clear();
+    for (const runtime of runtimes) {
+        const hasDirtyInstance = Array.from(runtime.instances.values()).some((instance) => instance.dirty);
+        clearHostCommitStateBaselines(runtime);
+        if (hasDirtyInstance) {
+            runtime.rerender("sync");
+        }
+    }
+}
+function flushEffectFlushRerenders() {
+    if (effectFlushRerenderDepth > 0 ||
+        hookRenderState.queuedEffectFlushRerenders.size === 0) {
+        return;
+    }
+    effectFlushRerenderDepth += 1;
+    try {
+        for (let attempt = 0; attempt < 3 && hookRenderState.queuedEffectFlushRerenders.size > 0; attempt += 1) {
+            const runtimes = [...hookRenderState.queuedEffectFlushRerenders];
+            hookRenderState.queuedEffectFlushRerenders.clear();
+            for (const runtime of runtimes) {
+                const hasDirtyInstance = Array.from(runtime.instances.values()).some((instance) => instance.dirty);
+                if (hasDirtyInstance) {
+                    runtime.rerender("sync");
+                }
+            }
+        }
+        hookRenderState.queuedEffectFlushRerenders.clear();
+    }
+    finally {
+        effectFlushRerenderDepth -= 1;
+    }
+}
+function updateHostCommitDirtyState(instance) {
+    instance.dirty = instance.hooks.some((slot) => slot.kind === "state" &&
+        Object.hasOwn(slot, "hostCommitValue") &&
+        !Object.is(slot.hostCommitValue, slot.value));
+}
+function clearHostCommitStateBaselines(runtime) {
+    for (const instance of runtime.instances.values()) {
+        for (const slot of instance.hooks) {
+            if (slot.kind === "state") {
+                delete slot.hostCommitValue;
+            }
+        }
+    }
+}
 function getCacheLeaf(scope, callback, args) {
     let node = scope.functionCaches.get(callback);
     if (node === undefined) {
@@ -1233,7 +1278,7 @@ function createCacheTrieNode() {
     };
 }
 function getCurrentCacheScope() {
-    return currentCacheScope ?? getGlobalCacheScope();
+    return hookRenderState.currentCacheScope ?? getGlobalCacheScope();
 }
 function getGlobalCacheScope() {
     return globalThis[CACHE_SCOPE_SYMBOL];
@@ -1265,25 +1310,27 @@ function cleanupInactiveInstances(runtime) {
     }
 }
 function cleanupInstance(instance) {
+    instance.disposed = true;
     for (const slot of instance.hooks) {
         if (slot?.kind === "effect") {
             slot.disposed = true;
+            slot.mounted = false;
             slot.cleanup?.();
             delete slot.cleanup;
         }
     }
 }
 function requireRuntime() {
-    if (currentRuntime === undefined) {
+    if (hookRenderState.currentRuntime === undefined) {
         throw new Error("Hooks can only be called while rendering.");
     }
-    return currentRuntime;
+    return hookRenderState.currentRuntime;
 }
 function requireInstance() {
-    if (currentInstance === undefined) {
+    if (hookRenderState.currentInstance === undefined) {
         throw new Error("Hooks can only be called while rendering.");
     }
-    return currentInstance;
+    return hookRenderState.currentInstance;
 }
 function areHookInputsEqual(nextDeps, previousDeps) {
     if (nextDeps.length !== previousDeps.length) {