@askrjs/askr 0.0.35 → 0.0.37

package/dist/renderer/dom.js

@@ -15,9 +15,10 @@ import { addDelegatedListener, getDelegatedHandlerForElement, getDelegatedHandle
 import { REACTIVE_CHILDREN_KEY, elementListeners, elementReactivePropsCleanup, removeAllListeners, removeElementListeners, removeElementReactiveProps, teardownNodeSubtree } from "./cleanup.js";
 import "../jsx-runtime.js";
 import { createChildScope, disposeChildScope, rerenderChildScope } from "../runtime/child-scope.js";
-import { isBenchMetricScopeActive, recordBenchCounter, recordBenchEvent, recordBenchTiming, withBenchMetricScope } from "../runtime/for-bench.js";
+import { isBenchMetricScopeActive, recordBenchCounter, recordBenchEvent } from "../runtime/for-bench.js";
 import { clearForDomUpdateState, evaluateForState } from "../runtime/for.js";
 import { clearCaseDomUpdateState, clearShowDomUpdateState, evaluateCaseState, evaluateShowState } from "../runtime/control.js";
+import { commitForStateBoundaryChildren } from "./for-commit.js";
 import { reconcileKeyedChildren } from "./reconcile.js";
 import { isBulkTextFastPathEligible, performBulkTextReplace } from "./children.js";
 import { createFineGrainedEffect, markFineGrainedEffectsDirtySource } from "../runtime/effect.js";
@@ -1254,10 +1255,48 @@ function normalizeComponentChildren(result) {
 	}
 	return [result];
 }
-function syncComponentElement(currentDom, node, type, props, parentNamespace) {
+function syncComponentElement(currentDom, node, type, props, parentNamespace, forceChildrenUpdate = false) {
 	const existingHost = currentDom instanceof Element ? currentDom : null;
 	const existingInstance = existingHost ? findHostInstanceByType(existingHost, type) : null;
-	if (!existingHost || !existingInstance || existingInstance.fn !== type) return null;
+	if (!existingHost) return null;
+	if (!existingInstance || existingInstance.fn !== type) {
+		const snapshot = getVNodeContextFrame(node) || getCurrentContextFrame() || null;
+		const hydrationInstance = createComponentInstance(nextComponentInstanceId(), type, props || {}, existingHost);
+		setVNodeComponentInstance(node, hydrationInstance);
+		if (snapshot) hydrationInstance.ownerFrame = snapshot;
+		const result = withContext(snapshot, () => renderComponentInline(hydrationInstance));
+		if (result instanceof Promise) throw new Error("Async components are not supported. Components must return synchronously.");
+		const scopedResult = markVNodeTreeWithContextFrame(result, snapshot ?? null);
+		if (scopedResult && typeof scopedResult === "object" && "type" in scopedResult && typeof scopedResult.type === "string" && tagNamesEqualIgnoreCase(existingHost.tagName, scopedResult.type)) {
+			withContext(snapshot, () => {
+				updateElementFromVnode(existingHost, inheritComponentKey(scopedResult, node), true, forceChildrenUpdate || hydrationInstance.mounted === false);
+				materializeKey(existingHost, node, props);
+			});
+			mountInstanceInline(hydrationInstance, existingHost);
+			itemInstanceHydrationComplete(existingHost);
+			warnUnusedStateReads(hydrationInstance);
+			return existingHost;
+		}
+		const resolvedResult = resolveNestedComponentResult(scopedResult, snapshot ?? null);
+		if (_isDOMElement(resolvedResult) && typeof resolvedResult.type === "string" && tagNamesEqualIgnoreCase(existingHost.tagName, resolvedResult.type)) {
+			withContext(snapshot, () => {
+				updateElementFromVnode(existingHost, inheritComponentKey(resolvedResult, node), true, forceChildrenUpdate || hydrationInstance.mounted === false);
+				materializeKey(existingHost, node, props);
+			});
+			mountInstanceInline(hydrationInstance, existingHost);
+			itemInstanceHydrationComplete(existingHost);
+			warnUnusedStateReads(hydrationInstance);
+			return existingHost;
+		}
+		const nextDom = materializeComponentResultNode(hydrationInstance, scopedResult, parentNamespace);
+		if (nextDom instanceof Element) materializeKey(nextDom, node, props);
+		if (nextDom !== existingHost && existingHost.parentNode) {
+			existingHost.parentNode.replaceChild(nextDom, existingHost);
+			cleanupDetachedComponentHost(existingHost, hydrationInstance);
+		}
+		warnUnusedStateReads(hydrationInstance);
+		return nextDom;
+	}
 	const snapshot = getVNodeContextFrame(node) || getCurrentContextFrame() || existingInstance.ownerFrame || null;
 	existingInstance.props = props || {};
 	if (snapshot) existingInstance.ownerFrame = snapshot;
@@ -1271,7 +1310,7 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace) {
 	}
 	if (scopedResult && typeof scopedResult === "object" && "type" in scopedResult && typeof scopedResult.type === "string" && tagNamesEqualIgnoreCase(existingHost.tagName, scopedResult.type)) {
 		withContext(snapshot, () => {
-			updateElementFromVnode(existingHost, inheritComponentKey(scopedResult, node), true);
+			updateElementFromVnode(existingHost, inheritComponentKey(scopedResult, node), true, forceChildrenUpdate || existingInstance.mounted === false);
 			materializeKey(existingHost, node, props);
 		});
 		warnUnusedStateReads(existingInstance);
@@ -1280,13 +1319,14 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace) {
 	const resolvedResult = resolveNestedComponentResult(scopedResult, snapshot ?? null);
 	if (_isDOMElement(resolvedResult) && typeof resolvedResult.type === "string" && tagNamesEqualIgnoreCase(existingHost.tagName, resolvedResult.type)) {
 		withContext(snapshot, () => {
-			updateElementFromVnode(existingHost, inheritComponentKey(resolvedResult, node), true);
+			updateElementFromVnode(existingHost, inheritComponentKey(resolvedResult, node), true, forceChildrenUpdate || existingInstance.mounted === false);
 			materializeKey(existingHost, node, props);
 		});
 		warnUnusedStateReads(existingInstance);
 		return existingHost;
 	}
 	const nextDom = materializeComponentResultNode(existingInstance, scopedResult, parentNamespace);
+	if (nextDom instanceof Element) materializeKey(nextDom, node, props);
 	if (nextDom !== existingHost && existingHost.parentNode) {
 		existingHost.parentNode.replaceChild(nextDom, existingHost);
 		cleanupDetachedComponentHost(existingHost, existingInstance);
@@ -1294,6 +1334,13 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace) {
 	warnUnusedStateReads(existingInstance);
 	return nextDom;
 }
+function itemInstanceHydrationComplete(host) {
+	const instance = host.__ASKR_INSTANCE;
+	if (instance) {
+		const scope = instance.scope;
+		if (scope) scope.hydrationPending = false;
+	}
+}
 function createComponentElement(node, type, props, parentNamespace) {
 	const snapshot = getVNodeContextFrame(node) || getCurrentContextFrame();
 	const componentFn = type;
@@ -1511,7 +1558,6 @@ function createErrorBoundaryElement(node, props, parentNamespace) {
 function syncForItemDom(parent, scope, vnode) {
 	let dom = scope.dom ?? null;
 	const parentNamespace = parent.namespaceURI === SVG_NAMESPACE ? SVG_NAMESPACE : void 0;
-	if (dom && !scope.needsDomUpdate) return dom;
 	if (_isDOMElement(vnode) && typeof vnode.type === "function") {
 		const syncedComponentDom = syncComponentElement(dom, vnode, vnode.type, vnode.props ?? {}, parentNamespace);
 		if (syncedComponentDom) {
@@ -1593,87 +1639,16 @@ function resolveStableIntrinsicPatchVNode(dom, vnode) {
 	return null;
 }
 function tryPatchStableForDirtyItem(scope) {
+	incDevCounter("stableForPatchAttempt");
 	if (!(scope.dom instanceof Element) || scope.vnode === void 0) return false;
 	const nextIntrinsic = resolveStableIntrinsicPatchVNode(scope.dom, scope.vnode);
 	if (!nextIntrinsic) return false;
 	const didPatch = patchStableIntrinsicElement(scope.dom, nextIntrinsic);
 	const existingInstance = scope.dom.__ASKR_INSTANCE;
 	if (didPatch && existingInstance) warnUnusedStateReads(existingInstance);
+	if (didPatch) incDevCounter("stableForPatchHit");
 	return didPatch;
 }
-function removeForBoundaryNodes(parent, removedNodes) {
-	if (removedNodes.length > 0 && removedNodes.length === parent.childNodes.length) {
-		let canBulkClear = true;
-		for (let i = 0; i < removedNodes.length; i++) if (removedNodes[i].parentNode !== parent) {
-			canBulkClear = false;
-			break;
-		}
-		if (canBulkClear) {
-			for (let i = 0; i < removedNodes.length; i++) recordBenchEvent("domRemove");
-			withBenchMetricScope("fullClear", () => {
-				recordBenchCounter("bulkClearCommits");
-				removeAllListeners(parent);
-				parent.textContent = "";
-			});
-			return;
-		}
-	}
-	for (let i = 0; i < removedNodes.length; i++) {
-		const node = removedNodes[i];
-		if (node.parentNode === parent) {
-			recordBenchEvent("domRemove");
-			parent.removeChild(node);
-		}
-	}
-}
-function syncKeyedMapFromForState(parent, forState, strategy, removedNodes) {
-	const existing = keyedElements.get(parent);
-	const ensureMapEntry = (map, key, element) => {
-		map.set(key, element);
-		const keyString = String(key);
-		map.set(keyString, element);
-		const keyNumber = Number(keyString);
-		if (!Number.isNaN(keyNumber)) map.set(keyNumber, element);
-	};
-	if (strategy === "SWAP") {
-		if (existing) return;
-	}
-	if (strategy === "NO_REORDER") {
-		if (existing && removedNodes.length === 0) return;
-		if (existing) {
-			for (const [mapKey, element] of existing) if (element.parentNode !== parent) existing.delete(mapKey);
-			if (existing.size > 0) keyedElements.set(parent, existing);
-			else keyedElements.delete(parent);
-			return;
-		}
-	}
-	if (strategy === "TRUNCATE" && forState.orderedKeys.length === 0) {
-		if (existing) existing.clear();
-		keyedElements.delete(parent);
-		return;
-	}
-	if (strategy === "APPEND" && existing) {
-		for (let i = 0; i < forState.orderedKeys.length; i++) {
-			const key = forState.orderedKeys[i];
-			if (key === null || existing.has(key)) continue;
-			const itemInstance = forState.items.get(key);
-			if (itemInstance?.scope.dom instanceof Element) ensureMapEntry(existing, key, itemInstance.scope.dom);
-		}
-		if (existing.size > 0) keyedElements.set(parent, existing);
-		else keyedElements.delete(parent);
-		return;
-	}
-	const nextMap = existing ?? /* @__PURE__ */ new Map();
-	nextMap.clear();
-	for (let i = 0; i < forState.orderedKeys.length; i++) {
-		const key = forState.orderedKeys[i];
-		if (key === null) continue;
-		const itemInstance = forState.items.get(key);
-		if (itemInstance?.scope.dom instanceof Element) ensureMapEntry(nextMap, key, itemInstance.scope.dom);
-	}
-	if (nextMap.size > 0) keyedElements.set(parent, nextMap);
-	else keyedElements.delete(parent);
-}
 function commitForBoundaryChildren(parent, controlState, childrenVNodes) {
 	if (controlState.kind !== "for") {
 		const activeScope = controlState.activeScope;
@@ -1694,269 +1669,16 @@ function commitForBoundaryChildren(parent, controlState, childrenVNodes) {
 		clearControlBoundaryDomUpdateState(controlState);
 		return;
 	}
-	const forState = controlState;
-	const domCommitStart = performance.now();
-	const hydrateExistingForDom = () => {
-		const domKeyMap = getOrBuildDomKeyMap(parent);
-		if (!domKeyMap) return;
-		for (let i = 0; i < forState.orderedKeys.length; i++) {
-			const itemKey = forState.orderedKeys[i];
-			const itemInstance = forState.items.get(itemKey);
-			if (!itemInstance || itemInstance.scope.dom) continue;
-			const existingDom = domKeyMap.get(itemKey);
-			if (!existingDom || checkVNodeShapeChanged(existingDom, childrenVNodes[i])) continue;
-			itemInstance.scope.dom = existingDom;
-		}
-	};
-	if (forState.orderedKeys.length === 0) {
-		removeForBoundaryNodes(parent, forState.lastRemovedNodes);
-		const fallbackScope = forState.fallbackScope;
-		const fallbackVNode = childrenVNodes[0];
-		const nextDom = fallbackScope && fallbackVNode !== void 0 ? syncForItemDom(parent, fallbackScope, fallbackVNode) : null;
-		if (nextDom) {
-			if (parent.childNodes.length !== 1 || parent.firstChild !== nextDom || forState.lastRemovedNodes.length > 0) parent.replaceChildren(nextDom);
-		} else if (parent.firstChild) parent.textContent = "";
-		keyedElements.delete(parent);
-		forState._hasResolvedItemDom = false;
-		recordBenchTiming("domCommit", performance.now() - domCommitStart);
-		clearForDomUpdateState(forState);
-		return;
-	}
-	if (!forState._hasResolvedItemDom && parent.childNodes.length > 0) hydrateExistingForDom();
-	const getDirtyForIndices = () => {
-		const pendingDirtyIndices = forState.pendingDirtyIndices;
-		if (pendingDirtyIndices && pendingDirtyIndices.length > 0) return pendingDirtyIndices;
-		const dirtyIndices = [];
-		for (let index = 0; index < forState.orderedKeys.length; index += 1) {
-			const itemKey = forState.orderedKeys[index];
-			if (forState.items.get(itemKey)?.scope.needsDomUpdate) dirtyIndices.push(index);
-		}
-		return dirtyIndices;
-	};
-	let dirtyIndicesCache = null;
-	const ensureDirtyIndices = () => {
-		if (dirtyIndicesCache) return dirtyIndicesCache;
-		dirtyIndicesCache = getDirtyForIndices();
-		return dirtyIndicesCache;
-	};
-	const commitDirtyNoReorder = (dirtyIndices) => {
-		if (dirtyIndices.length === 0) return;
-		for (let dirtyIndex = 0; dirtyIndex < dirtyIndices.length; dirtyIndex++) {
-			const i = dirtyIndices[dirtyIndex];
-			const itemKey = forState.orderedKeys[i];
-			const itemInstance = forState.items.get(itemKey);
-			if (!itemInstance) continue;
-			if (tryPatchStableForDirtyItem(itemInstance.scope)) continue;
-			const dom = syncForItemDom(parent, itemInstance.scope, childrenVNodes[i]);
-			if (!dom) continue;
-			const anchor = parent.childNodes[i] ?? null;
-			if (dom.parentNode !== parent || dom !== anchor) {
-				recordBenchEvent("domInsert");
-				parent.insertBefore(dom, anchor);
-			}
-		}
-	};
-	const commitPositional = () => {
-		for (let i = 0; i < forState.orderedKeys.length; i++) {
-			const itemKey = forState.orderedKeys[i];
-			const itemInstance = forState.items.get(itemKey);
-			if (!itemInstance) continue;
-			const dom = syncForItemDom(parent, itemInstance.scope, childrenVNodes[i]);
-			if (!dom) continue;
-			if (dom.parentNode !== parent) {
-				const anchor = parent.childNodes[i] ?? null;
-				recordBenchEvent("domInsert");
-				parent.insertBefore(dom, anchor);
-			}
-		}
-	};
-	const commitAppend = () => {
-		withBenchMetricScope("coldCreate", () => {
-			const fragment = parent.ownerDocument.createDocumentFragment();
-			let hasPendingAppend = false;
-			for (let i = 0; i < forState.orderedKeys.length; i++) {
-				const itemKey = forState.orderedKeys[i];
-				const itemInstance = forState.items.get(itemKey);
-				if (!itemInstance) continue;
-				if (itemInstance.scope.dom?.parentNode === parent && !itemInstance.scope.needsDomUpdate) continue;
-				const dom = syncForItemDom(parent, itemInstance.scope, childrenVNodes[i]);
-				if (!dom) continue;
-				if (dom.parentNode !== parent) {
-					recordBenchEvent("domInsert");
-					fragment.appendChild(dom);
-					hasPendingAppend = true;
-				}
-			}
-			if (hasPendingAppend) parent.appendChild(fragment);
-		});
-	};
-	const commitSwap = () => {
-		const swapIndices = forState.pendingSwapIndices;
-		if (!swapIndices) return;
-		let [firstIndex, secondIndex] = swapIndices;
-		if (firstIndex === secondIndex) return;
-		if (firstIndex > secondIndex) [firstIndex, secondIndex] = [secondIndex, firstIndex];
-		const firstKey = forState.orderedKeys[firstIndex];
-		const secondKey = forState.orderedKeys[secondIndex];
-		const firstItem = forState.items.get(firstKey);
-		const secondItem = forState.items.get(secondKey);
-		if (!firstItem || !secondItem) {
-			commitReorder();
-			return;
-		}
-		const firstDom = syncForItemDom(parent, firstItem.scope, childrenVNodes[firstIndex]);
-		const secondDom = syncForItemDom(parent, secondItem.scope, childrenVNodes[secondIndex]);
-		if (!firstDom || !secondDom) {
-			commitReorder();
-			return;
-		}
-		if (firstDom.parentNode !== parent || secondDom.parentNode !== parent) {
-			commitReorder();
-			return;
-		}
-		if ((firstDom.compareDocumentPosition(secondDom) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0) return;
-		const firstNextSibling = firstDom.nextSibling;
-		recordBenchEvent("domMove");
-		parent.insertBefore(firstDom, secondDom);
-		recordBenchEvent("domMove");
-		parent.insertBefore(secondDom, firstNextSibling);
-	};
-	const commitReorder = () => {
-		const keys = forState.orderedKeys;
-		const count = keys.length;
-		if (forState.pendingMoveOnly && forState.lastRemovedNodes.length === 0) {
-			const frag = parent.ownerDocument.createDocumentFragment();
-			for (let i = 0; i < count; i++) {
-				const itemKey = keys[i];
-				const dom = forState.items.get(itemKey)?.scope.dom;
-				if (!dom) return;
-				recordBenchEvent(dom.parentNode === parent ? "domMove" : "domInsert");
-				frag.appendChild(dom);
-			}
-			parent.replaceChildren(frag);
-			return;
-		}
-		let hasExistingChild = false;
-		for (let i = 0; i < count; i++) if (forState.items.get(keys[i])?.scope.dom?.parentNode === parent) {
-			hasExistingChild = true;
-			break;
-		}
-		if (!hasExistingChild) {
-			withBenchMetricScope("coldCreate", () => {
-				const frag = parent.ownerDocument.createDocumentFragment();
-				for (let i = 0; i < count; i++) {
-					const itemKey = keys[i];
-					const itemInstance = forState.items.get(itemKey);
-					if (!itemInstance) continue;
-					const dom = syncForItemDom(parent, itemInstance.scope, childrenVNodes[i]);
-					if (dom) {
-						recordBenchEvent("domInsert");
-						frag.appendChild(dom);
-					}
-				}
-				recordBenchCounter("replaceChildrenCommits");
-				parent.replaceChildren(frag);
-			});
-			return;
-		}
-		if (forState.lastRemovedNodes.length === 0) {
-			const frag = parent.ownerDocument.createDocumentFragment();
-			for (let i = 0; i < count; i++) {
-				const itemKey = keys[i];
-				const itemInstance = forState.items.get(itemKey);
-				if (!itemInstance) continue;
-				const dom = syncForItemDom(parent, itemInstance.scope, childrenVNodes[i]);
-				if (!dom) continue;
-				recordBenchEvent(dom.parentNode === parent ? "domMove" : "domInsert");
-				frag.appendChild(dom);
-			}
-			parent.replaceChildren(frag);
-			return;
-		}
-		for (let i = 0; i < count; i++) {
-			const itemKey = keys[i];
-			const itemInstance = forState.items.get(itemKey);
-			if (!itemInstance) continue;
-			const dom = syncForItemDom(parent, itemInstance.scope, childrenVNodes[i]);
-			if (!dom) continue;
-			const anchor = parent.childNodes[i] ?? null;
-			if (dom !== anchor) {
-				recordBenchEvent("domMove");
-				parent.insertBefore(dom, anchor);
-			}
-		}
-	};
-	const isCurrentForDomOrder = () => {
-		for (let index = 0; index < forState.orderedKeys.length; index += 1) {
-			const itemKey = forState.orderedKeys[index];
-			const itemInstance = forState.items.get(itemKey);
-			if (!itemInstance?.scope.dom) return false;
-			if (parent.childNodes[index] !== itemInstance.scope.dom) return false;
-		}
-		return true;
-	};
-	if (forState.lastCommitStrategy === "NO_REORDER" && ensureDirtyIndices().length > 0 && forState.pendingDirtyIndices === null && forState.pendingSwapIndices === null && !forState.pendingMoveOnly && forState.lastRemovedNodes.length === 0 && parent.childNodes.length === forState.orderedKeys.length) {
-		if (isCurrentForDomOrder()) {
-			commitDirtyNoReorder(ensureDirtyIndices());
-			syncKeyedMapFromForState(parent, forState, "NO_REORDER", []);
-		} else {
-			commitReorder();
-			syncKeyedMapFromForState(parent, forState, "FULL_KEYED", []);
-		}
-		recordBenchTiming("domCommit", performance.now() - domCommitStart);
-		clearForDomUpdateState(forState);
-		return;
-	}
-	switch (forState.lastCommitStrategy) {
-		case "NO_REORDER":
-			commitDirtyNoReorder(ensureDirtyIndices());
-			break;
-		case "TRUNCATE":
-			commitPositional();
-			break;
-		case "APPEND":
-			commitAppend();
-			break;
-		case "SWAP":
-			commitSwap();
-			break;
-		default:
-			commitReorder();
-			break;
-	}
-	removeForBoundaryNodes(parent, forState.lastRemovedNodes);
-	syncKeyedMapFromForState(parent, forState, forState.lastCommitStrategy, forState.lastRemovedNodes);
-	const syncExactForBoundaryChildren = () => {
-		const expectedNodes = [];
-		for (let i = 0; i < forState.orderedKeys.length; i++) {
-			const itemKey = forState.orderedKeys[i];
-			const itemInstance = forState.items.get(itemKey);
-			if (!itemInstance) continue;
-			const dom = itemInstance.scope.dom ?? syncForItemDom(parent, itemInstance.scope, childrenVNodes[i]);
-			if (dom) expectedNodes.push(dom);
-		}
-		const currentNodes = Array.from(parent.childNodes);
-		if (currentNodes.length === expectedNodes.length && currentNodes.every((node, index) => node === expectedNodes[index])) return;
-		const expectedNodeSet = new Set(expectedNodes);
-		for (const currentNode of currentNodes) {
-			if (expectedNodeSet.has(currentNode)) continue;
-			if (currentNode instanceof Element) teardownNodeSubtree(currentNode);
-			if (currentNode.parentNode === parent) {
-				recordBenchEvent("domRemove");
-				currentNode.remove();
-			}
-		}
-		parent.replaceChildren(...expectedNodes);
-	};
-	syncExactForBoundaryChildren();
-	forState._hasResolvedItemDom = true;
-	recordBenchTiming("domCommit", performance.now() - domCommitStart);
-	clearForDomUpdateState(forState);
+	commitForStateBoundaryChildren(parent, controlState, childrenVNodes, {
+		isProduction: () => getRuntimeEnv().NODE_ENV === "production",
+		syncForItemDom,
+		tryPatchStableForDirtyItem
+	});
 }
 /**
 * Update an existing element's attributes and children from vnode
 */
-function updateElementFromVnode(el, vnode, updateChildren = true) {
+function updateElementFromVnode(el, vnode, updateChildren = true, forceChildrenUpdate = false) {
 	if (!_isDOMElement(vnode)) return;
 	const props = vnode.props || {};
 	const domVNode = vnode;
@@ -1968,11 +1690,11 @@ function updateElementFromVnode(el, vnode, updateChildren = true) {
 	const existingListeners = elementListeners.get(el);
 	const existingReactiveProps = elementReactivePropsCleanup.get(el);
 	if ((!existingListeners || existingListeners.size === 0) && (!existingReactiveProps || existingReactiveProps.size === 0)) {
-		if (hasMatchingStaticProps(el, props, vnode.type)) {
+		if (!forceChildrenUpdate && hasMatchingStaticProps(el, props, vnode.type)) {
 			if (updateChildren) {
 				const children = props.children ?? vnode.children;
-				if (canReuseStaticSubtree(el, domVNode)) return;
-				updateElementChildren(el, children);
+				if (!forceChildrenUpdate && canReuseStaticSubtree(el, domVNode)) return;
+				updateElementChildren(el, children, forceChildrenUpdate);
 			}
 			return;
 		}
@@ -2122,10 +1844,10 @@ function updateElementFromVnode(el, vnode, updateChildren = true) {
 	if (updateChildren) {
 		const children = props.children ?? vnode.children;
 		if (usesReactiveChildren) return;
-		updateElementChildren(el, children);
+		updateElementChildren(el, children, forceChildrenUpdate);
 	}
 }
-function updateElementChildren(el, children) {
+function updateElementChildren(el, children, forceUpdate = false) {
 	const directControlBoundary = getDirectControlBoundaryVNode(children);
 	if (directControlBoundary) {
 		const controlState = getControlBoundaryState(directControlBoundary);
@@ -2145,7 +1867,7 @@ function updateElementChildren(el, children) {
 		return;
 	}
 	if (!Array.isArray(children) && isFragmentVNode(children)) {
-		updateUnkeyedChildren(el, normalizeComponentChildren(children));
+		updateUnkeyedChildren(el, normalizeComponentChildren(children), forceUpdate);
 		return;
 	}
 	if (!Array.isArray(children) && (typeof children === "string" || typeof children === "number")) {
@@ -2178,11 +1900,11 @@ function updateElementChildren(el, children) {
 			keyedElements.delete(el);
 			return;
 		}
-		updateUnkeyedChildren(el, children);
+		updateUnkeyedChildren(el, children, forceUpdate);
 		return;
 	}
 	if (_isDOMElement(children)) {
-		updateUnkeyedChildren(el, [children]);
+		updateUnkeyedChildren(el, [children], forceUpdate);
 		return;
 	}
 	for (let n = el.firstChild; n;) {
@@ -2236,6 +1958,11 @@ function tagsEqualIgnoreCase(elementTagName, vnodeType) {
 	if (upperCommon !== null && elementTagName === upperCommon) return true;
 	return tagNamesEqualIgnoreCase(elementTagName, vnodeType);
 }
+const STATIC_CHILD_SLOTS_CACHE = Symbol.for("__askrStaticChildSlots");
+let staticChildSlotsCacheEnabled = true;
+function setStaticChildSlotsCacheEnabled(enabled) {
+	staticChildSlotsCacheEnabled = enabled;
+}
 function collectStaticChildSlots(children, slots) {
 	if (isFragmentVNode(children)) return collectStaticChildSlots(children.props?.children ?? children.children, slots);
 	if (Array.isArray(children)) {
@@ -2259,9 +1986,18 @@ function collectStaticChildSlots(children, slots) {
 	}
 	return false;
 }
-function getStaticChildSlots(children) {
+function getStaticChildSlots(vnode) {
+	if (staticChildSlotsCacheEnabled) {
+		const cached = vnode[STATIC_CHILD_SLOTS_CACHE];
+		if (cached !== void 0) return cached;
+	}
 	const slots = [];
-	return collectStaticChildSlots(children, slots) ? slots : null;
+	const staticSlots = collectStaticChildSlots(vnode.props?.children ?? vnode.children, slots) ? slots : null;
+	if (staticChildSlotsCacheEnabled) {
+		const cacheNode = vnode;
+		if (Object.isExtensible(vnode)) cacheNode[STATIC_CHILD_SLOTS_CACHE] = staticSlots;
+	}
+	return staticSlots;
 }
 function hasMatchingStaticProps(el, props, vnodeType) {
 	let staticPropCount = 0;
@@ -2299,9 +2035,8 @@ function hasMatchingStaticProps(el, props, vnodeType) {
 }
 function canReuseStaticSubtree(el, vnode) {
 	if (typeof vnode.type !== "string" || !tagsEqualIgnoreCase(el.tagName, vnode.type)) return false;
-	const props = vnode.props || {};
-	if (!hasMatchingStaticProps(el, props, vnode.type)) return false;
-	const slots = getStaticChildSlots(props.children ?? vnode.children);
+	if (!hasMatchingStaticProps(el, vnode.props || {}, vnode.type)) return false;
+	const slots = getStaticChildSlots(vnode);
 	if (!slots) return false;
 	if (el.childNodes.length !== slots.length) return false;
 	for (let index = 0; index < slots.length; index += 1) {
@@ -2317,11 +2052,11 @@ function canReuseStaticSubtree(el, vnode) {
 	}
 	return true;
 }
-function updateUnkeyedChildren(parent, newChildren) {
+function updateUnkeyedChildren(parent, newChildren, forceUpdate = false) {
 	const parentNamespace = parent.namespaceURI === SVG_NAMESPACE ? SVG_NAMESPACE : void 0;
 	const trySyncComponentChild = (currentDom, next) => {
 		if (typeof next.type !== "function") return null;
-		return syncComponentElement(currentDom, next, next.type, (next.props ?? {}) || {}, parentNamespace);
+		return syncComponentElement(currentDom, next, next.type, (next.props ?? {}) || {}, parentNamespace, forceUpdate);
 	};
 	const hasText = newChildren.some((c) => typeof c === "string" || typeof c === "number");
 	const hasElements = newChildren.some((c) => _isDOMElement(c));
@@ -2334,7 +2069,7 @@ function updateUnkeyedChildren(parent, newChildren) {
 			const next = newChildren[i];
 			const current = c[i];
 			if (!current || next === void 0) continue;
-			if (_isDOMElement(next) && typeof next.type === "string") if (tagsEqualIgnoreCase(current.tagName, next.type)) updateElementFromVnode(current, next);
+			if (_isDOMElement(next) && typeof next.type === "string") if (tagsEqualIgnoreCase(current.tagName, next.type)) updateElementFromVnode(current, next, true, forceUpdate);
 			else {
 				const dom = createDOMNode(next, parentNamespace);
 				if (dom) {
@@ -2388,7 +2123,7 @@ function updateUnkeyedChildren(parent, newChildren) {
 			}
 			else if (_isDOMElement(next)) if (currentNode.nodeType === 1) {
 				const currentEl = currentNode;
-				if (typeof next.type === "string") if (tagsEqualIgnoreCase(currentEl.tagName, next.type)) updateElementFromVnode(currentEl, next);
+				if (typeof next.type === "string") if (tagsEqualIgnoreCase(currentEl.tagName, next.type)) updateElementFromVnode(currentEl, next, true, forceUpdate);
 				else {
 					const dom = createDOMNode(next, parentNamespace);
 					if (dom) {
@@ -2450,7 +2185,7 @@ function updateUnkeyedChildren(parent, newChildren) {
 			const textNode = document.createTextNode(String(next));
 			teardownNodeSubtree(current);
 			parent.replaceChild(textNode, current);
-		} else if (_isDOMElement(next)) if (typeof next.type === "string") if (tagsEqualIgnoreCase(current.tagName, next.type)) updateElementFromVnode(current, next);
+		} else if (_isDOMElement(next)) if (typeof next.type === "string") if (tagsEqualIgnoreCase(current.tagName, next.type)) updateElementFromVnode(current, next, true, forceUpdate);
 		else {
 			const dom = createDOMNode(next, parentNamespace);
 			if (dom) {
@@ -2479,6 +2214,6 @@ function updateUnkeyedChildren(parent, newChildren) {
 	}
 }
 //#endregion
-export { IS_DOM_AVAILABLE, commitForBoundaryChildren, createDOMNode, createForBoundary, markReactivePropsDirtySource, syncComponentElement, tryPatchStableForDirtyItem, updateElementChildren, updateElementFromVnode, updateUnkeyedChildren };
+export { IS_DOM_AVAILABLE, commitForBoundaryChildren, createDOMNode, createForBoundary, markReactivePropsDirtySource, setStaticChildSlotsCacheEnabled, syncComponentElement, tryPatchStableForDirtyItem, updateElementChildren, updateElementFromVnode, updateUnkeyedChildren };
 
 //# sourceMappingURL=dom.js.map