@askrjs/askr 0.0.39 → 0.0.41

package/dist/renderer/dom.js

@@ -7,12 +7,14 @@ import { globalScheduler } from "../runtime/scheduler.js";
 import { Fragment, STATIC_CHILDREN } from "../common/jsx.js";
 import { getCurrentContextFrame, getVNodeContextFrame, markVNodeTreeWithContextFrame, withContext } from "../runtime/context.js";
 import { getDevValue, incDevCounter } from "../runtime/dev-namespace.js";
+import { isPromiseLike } from "../common/promise.js";
 import "./env.js";
-import { createMutableWrappedHandler, extractKey, getPassiveOptions, isSkippedProp, parseEventName, readElementClassName, tagNamesEqualIgnoreCase, writeElementClassName } from "./utils.js";
+import { createMutableWrappedHandler, extractKey, getEventListenerKey, getEventListenerOptions, getRenderedAttributeName, isSkippedProp, parseEventName, parseEventProp, readElementClassName, removeRenderedAttribute, setRenderedAttribute, tagNamesEqualIgnoreCase, writeElementClassName } from "./utils.js";
 import { keyedElements } from "./keyed.js";
 import { cleanupComponent, createComponentInstance, getCurrentInstance, mountInstanceInline, renderComponentInline, warnUnusedStateReads } from "../runtime/component.js";
 import { addDelegatedListener, getDelegatedHandlerForElement, getDelegatedHandlersForElement, isDelegatedEvent, isEventDelegationEnabled, removeDelegatedListener, updateDelegatedListener } from "../runtime/events.js";
 import { REACTIVE_CHILDREN_KEY, elementListeners, elementReactivePropsCleanup, removeAllListeners, removeElementListeners, removeElementReactiveProps, teardownNodeSubtree } from "./cleanup.js";
+import { ROUTE_ROOT_COMPONENT } from "../common/router-internal.js";
 import "../jsx-runtime.js";
 import { createChildScope, disposeChildScope, rerenderChildScope } from "../runtime/child-scope.js";
 import { isBenchMetricScopeActive, recordBenchCounter, recordBenchEvent } from "../runtime/for-bench.js";
@@ -26,6 +28,13 @@ import { createBoundaryReset, reportBoundaryError, resolveErrorBoundaryFallback
 //#region src/renderer/dom.ts
 const reactivePropRegistry = /* @__PURE__ */ new Set();
 const controlBoundaryOwners = /* @__PURE__ */ new WeakMap();
+function isRouteRootComponentVNode(node) {
+	return typeof node === "object" && node !== null && node[ROUTE_ROOT_COMPONENT] === true;
+}
+function inheritComponentCleanupStrict(instance) {
+	const owner = getCurrentInstance();
+	if (owner) instance.cleanupStrict = owner.cleanupStrict;
+}
 let reactiveChildScopeId = 0;
 function collectReactiveScalarSequenceValue(value, normalized) {
 	if (isFragmentVNode(value)) return collectReactiveScalarSequenceValue(value.props?.children ?? value.children, normalized);
@@ -694,22 +703,25 @@ function nextComponentInstanceId() {
 * Add an event listener to an element with tracking
 * Uses event delegation when enabled (opt-out model)
 */
-function addTrackedListener(el, eventName, handler) {
-	if (isEventDelegationEnabled() && isDelegatedEvent(eventName)) {
+function addTrackedListener(el, eventName, handler, capture = false) {
+	const useDelegation = !capture && isEventDelegationEnabled() && isDelegatedEvent(eventName);
+	const listenerKey = getEventListenerKey(eventName, capture);
+	if (useDelegation) {
 		addDelegatedListener(el, eventName, handler, handler, void 0);
 		if (isBenchMetricScopeActive("coldCreate")) recordBenchCounter("listenerBindings");
 		return;
 	}
-	const options = getPassiveOptions(eventName);
+	const options = getEventListenerOptions(eventName, capture);
 	const mutableHandler = createMutableWrappedHandler(handler, true);
 	const trackedHandler = mutableHandler.handler;
 	if (options !== void 0) el.addEventListener(eventName, trackedHandler, options);
 	else el.addEventListener(eventName, trackedHandler);
 	incDevCounter("listenerAdds");
 	if (!elementListeners.has(el)) elementListeners.set(el, /* @__PURE__ */ new Map());
-	elementListeners.get(el).set(eventName, {
+	elementListeners.get(el).set(listenerKey, {
 		handler: trackedHandler,
 		original: handler,
+		eventName,
 		options,
 		isDelegated: false,
 		updateHandler: mutableHandler?.updateHandler
@@ -786,13 +798,13 @@ function applyPropValue(el, key, value, tagName, previousValue, descriptor) {
 		} else if (key === "value") applyFormControlProp(el, key, "", tagName);
 		else if (key === "checked") applyFormControlProp(el, key, false, tagName);
 		else if (key === "style") applyStylePropValue(el, null);
-		else el.removeAttribute(key);
+		else removeRenderedAttribute(el, key);
 		return;
 	}
 	if (key === "class" || key === "className") applyClassPropValue(el, value, previousValue, descriptor);
 	else if (key === "style") applyStylePropValue(el, value);
 	else if (key === "value" || key === "checked") applyFormControlProp(el, key, value, tagName);
-	else el.setAttribute(key, String(value));
+	else setRenderedAttribute(el, key, String(value));
 }
 function normalizeStylePropertyName(propertyName) {
 	if (propertyName.startsWith("--")) return propertyName;
@@ -931,12 +943,12 @@ function applyPropsToElement(el, props, tagName) {
 		}
 		if (isSkippedProp(key)) continue;
 		if (value === void 0 || value === null || value === false) continue;
-		const eventName = parseEventName(key);
-		if (eventName) {
-			addTrackedListener(el, eventName, value);
+		const eventProp = parseEventProp(key);
+		if (eventProp) {
+			addTrackedListener(el, eventProp.eventName, value, eventProp.capture);
 			continue;
 		}
-		if (typeof value === "function" && !eventName && key !== "ref") {
+		if (typeof value === "function" && key !== "ref") {
 			const reactive = setupReactiveProp(el, key, value, tagName);
 			if (!elementReactivePropsCleanup.has(el)) elementReactivePropsCleanup.set(el, /* @__PURE__ */ new Map());
 			elementReactivePropsCleanup.get(el).set(key, {
@@ -951,7 +963,7 @@ function applyPropsToElement(el, props, tagName) {
 		if (key === "class" || key === "className") writeElementClassName(el, String(value));
 		else if (key === "style") applyStylePropValue(el, value);
 		else if (key === "value" || key === "checked") applyFormControlProp(el, key, value, tagName);
-		else el.setAttribute(key, String(value));
+		else setRenderedAttribute(el, key, String(value));
 	}
 }
 function applyRef(el, ref) {
@@ -963,12 +975,6 @@ function applyRef(el, ref) {
 	}
 	if (Object.isExtensible(r)) r.current = el;
 }
-function getRenderedAttributeName(el, propName) {
-	let attributeName = propName;
-	if (propName === "className") attributeName = "class";
-	else if (propName === "htmlFor") attributeName = "for";
-	return el.namespaceURI === SVG_NAMESPACE ? attributeName : attributeName.toLowerCase();
-}
 function removeStaleAttributes(el, vnode, props) {
 	const desiredAttributes = /* @__PURE__ */ new Set();
 	if (extractKey(vnode) !== void 0) desiredAttributes.add("data-key");
@@ -1126,7 +1132,7 @@ function applyStaticScalarPropsToElement(el, props) {
 		if (key === "class" || key === "className") writeElementClassName(el, String(value));
 		else if (key === "style") applyStylePropValue(el, value);
 		else if (key === "value" || key === "checked") el[key] = value;
-		else el.setAttribute(key, String(value));
+		else setRenderedAttribute(el, key, String(value));
 	}
 }
 /**
@@ -1207,23 +1213,60 @@ function materializeComponentResultNode(childInstance, result, parentNamespace)
 	mountInstanceInline(childInstance, host);
 	return host;
 }
-function resolveNestedComponentResult(result, snapshot) {
+function resolveNestedComponentResult(result, snapshot, parentInstance) {
 	let currentResult = result;
 	let activeSnapshot = snapshot;
 	let depth = 0;
 	while (_isDOMElement(currentResult) && typeof currentResult.type === "function" && depth < 16) {
 		const nestedSnapshot = getVNodeContextFrame(currentResult) ?? activeSnapshot;
 		const nestedInstance = createComponentInstance(nextComponentInstanceId(), currentResult.type, currentResult.props ?? {}, null);
+		nestedInstance.isRoot = isRouteRootComponentVNode(currentResult);
+		nestedInstance.portalScope = parentInstance?.portalScope ?? nestedInstance.portalScope;
+		inheritComponentCleanupStrict(nestedInstance);
 		if (nestedSnapshot) nestedInstance.ownerFrame = nestedSnapshot;
 		const nextResult = withContext(nestedSnapshot ?? null, () => renderComponentInline(nestedInstance));
 		cleanupComponent(nestedInstance);
-		if (nextResult instanceof Promise) throw new Error("Async components are not supported. Components must return synchronously.");
+		if (isPromiseLike(nextResult)) throw new Error("Async components are not supported. Components must return synchronously.");
 		activeSnapshot = nestedSnapshot ?? null;
 		currentResult = nextResult;
 		depth += 1;
 	}
 	return currentResult;
 }
+function resolveHostNestedComponentResult(host, retainedInstance, result, snapshot) {
+	let currentResult = result;
+	let activeSnapshot = snapshot;
+	let depth = 0;
+	const retainedInstances = new Set([retainedInstance]);
+	const createdInstances = [];
+	while (_isDOMElement(currentResult) && typeof currentResult.type === "function" && depth < 16) {
+		const nestedSnapshot = getVNodeContextFrame(currentResult) ?? activeSnapshot;
+		let nestedInstance = findHostInstanceByType(host, currentResult.type);
+		if (!nestedInstance) {
+			nestedInstance = createComponentInstance(nextComponentInstanceId(), currentResult.type, currentResult.props ?? {}, null);
+			createdInstances.push(nestedInstance);
+		}
+		setVNodeComponentInstance(currentResult, nestedInstance);
+		nestedInstance.isRoot = isRouteRootComponentVNode(currentResult);
+		nestedInstance.portalScope = retainedInstance.portalScope ?? nestedInstance.portalScope;
+		inheritComponentCleanupStrict(nestedInstance);
+		nestedInstance.props = (currentResult.props ?? {}) || {};
+		if (nestedSnapshot) nestedInstance.ownerFrame = nestedSnapshot;
+		const nextResult = withContext(nestedSnapshot ?? null, () => renderComponentInline(nestedInstance));
+		if (isPromiseLike(nextResult)) throw new Error("Async components are not supported. Components must return synchronously.");
+		retainedInstances.add(nestedInstance);
+		warnUnusedStateReads(nestedInstance);
+		activeSnapshot = nestedSnapshot ?? null;
+		currentResult = markVNodeTreeWithContextFrame(nextResult, activeSnapshot);
+		depth += 1;
+	}
+	const previousInstances = host.__ASKR_INSTANCES ?? [];
+	for (const instance of previousInstances) if (!retainedInstances.has(instance)) cleanupComponent(instance);
+	host.__ASKR_INSTANCES = previousInstances.filter((instance) => retainedInstances.has(instance));
+	host.__ASKR_INSTANCE = host.__ASKR_INSTANCES[0] ?? retainedInstance;
+	for (const instance of createdInstances) mountInstanceInline(instance, host);
+	return currentResult;
+}
 function resolveWrapperHostResult(host, result, snapshot) {
 	let currentResult = result;
 	let activeSnapshot = snapshot;
@@ -1233,9 +1276,12 @@ function resolveWrapperHostResult(host, result, snapshot) {
 		const nestedInstance = findHostInstanceByType(host, currentResult.type);
 		if (!nestedInstance) break;
 		nestedInstance.props = (currentResult.props ?? {}) || {};
+		nestedInstance.isRoot = isRouteRootComponentVNode(currentResult);
+		nestedInstance.portalScope = getCurrentInstance()?.portalScope ?? nestedInstance.portalScope;
+		inheritComponentCleanupStrict(nestedInstance);
 		if (nestedSnapshot) nestedInstance.ownerFrame = nestedSnapshot;
 		const nextResult = withContext(nestedSnapshot ?? null, () => renderComponentInline(nestedInstance));
-		if (nextResult instanceof Promise) throw new Error("Async components are not supported. Components must return synchronously.");
+		if (isPromiseLike(nextResult)) throw new Error("Async components are not supported. Components must return synchronously.");
 		warnUnusedStateReads(nestedInstance);
 		activeSnapshot = nestedSnapshot ?? null;
 		currentResult = nextResult;
@@ -1262,10 +1308,13 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace, fo
 	if (!existingInstance || existingInstance.fn !== type) {
 		const snapshot = getVNodeContextFrame(node) || getCurrentContextFrame() || null;
 		const hydrationInstance = createComponentInstance(nextComponentInstanceId(), type, props || {}, existingHost);
+		hydrationInstance.isRoot = isRouteRootComponentVNode(node);
+		hydrationInstance.portalScope = getCurrentInstance()?.portalScope ?? hydrationInstance.portalScope;
+		inheritComponentCleanupStrict(hydrationInstance);
 		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.");
+		if (isPromiseLike(result)) 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, () => {
@@ -1277,7 +1326,7 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace, fo
 			warnUnusedStateReads(hydrationInstance);
 			return existingHost;
 		}
-		const resolvedResult = resolveNestedComponentResult(scopedResult, snapshot ?? null);
+		const resolvedResult = resolveHostNestedComponentResult(existingHost, hydrationInstance, 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);
@@ -1299,9 +1348,12 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace, fo
 	}
 	const snapshot = getVNodeContextFrame(node) || getCurrentContextFrame() || existingInstance.ownerFrame || null;
 	existingInstance.props = props || {};
+	existingInstance.isRoot = isRouteRootComponentVNode(node);
+	existingInstance.portalScope = getCurrentInstance()?.portalScope ?? existingInstance.portalScope;
+	inheritComponentCleanupStrict(existingInstance);
 	if (snapshot) existingInstance.ownerFrame = snapshot;
 	const result = withContext(snapshot, () => renderComponentInline(existingInstance));
-	if (result instanceof Promise) throw new Error("Async components are not supported. Components must return synchronously.");
+	if (isPromiseLike(result)) throw new Error("Async components are not supported. Components must return synchronously.");
 	const scopedResult = markVNodeTreeWithContextFrame(result, snapshot ?? null);
 	if (existingHost.__ASKR_WRAPPER_HOST) {
 		updateElementChildren(existingHost, normalizeComponentChildren(resolveWrapperHostResult(existingHost, scopedResult, snapshot ?? null)));
@@ -1316,7 +1368,7 @@ function syncComponentElement(currentDom, node, type, props, parentNamespace, fo
 		warnUnusedStateReads(existingInstance);
 		return existingHost;
 	}
-	const resolvedResult = resolveNestedComponentResult(scopedResult, snapshot ?? null);
+	const resolvedResult = resolveHostNestedComponentResult(existingHost, existingInstance, scopedResult, snapshot ?? null);
 	if (_isDOMElement(resolvedResult) && typeof resolvedResult.type === "string" && tagNamesEqualIgnoreCase(existingHost.tagName, resolvedResult.type)) {
 		withContext(snapshot, () => {
 			updateElementFromVnode(existingHost, inheritComponentKey(resolvedResult, node), true, forceChildrenUpdate || existingInstance.mounted === false);
@@ -1350,10 +1402,13 @@ function createComponentElement(node, type, props, parentNamespace) {
 		childInstance = createComponentInstance(nextComponentInstanceId(), componentFn, props || {}, null);
 		setVNodeComponentInstance(node, childInstance);
 	}
+	childInstance.portalScope = getCurrentInstance()?.portalScope ?? childInstance.portalScope;
 	childInstance.props = props || {};
+	childInstance.isRoot = isRouteRootComponentVNode(node);
+	inheritComponentCleanupStrict(childInstance);
 	if (snapshot) childInstance.ownerFrame = snapshot;
 	const result = withContext(snapshot, () => renderComponentInline(childInstance));
-	if (result instanceof Promise) throw new Error("Async components are not supported. Components must return synchronously.");
+	if (isPromiseLike(result)) throw new Error("Async components are not supported. Components must return synchronously.");
 	const scopedResult = markVNodeTreeWithContextFrame(result, snapshot ?? null);
 	const dom = withContext(snapshot, () => materializeComponentResultNode(childInstance, scopedResult, parentNamespace));
 	warnUnusedStateReads(childInstance);
@@ -1449,16 +1504,22 @@ function clearControlBoundaryCommitOwner(parent) {
 	if (owner) {
 		owner._enqueueBoundaryCommit = null;
 		owner._hasPendingBoundaryCommit = false;
+		if (owner._commitOwner === parent) owner._commitOwner = null;
 	}
 	controlBoundaryOwners.delete(parent);
 }
 function registerControlBoundaryCommitOwner(parent, controlState) {
+	const ownerState = controlState;
+	const previousParent = ownerState._commitOwner;
+	if (previousParent && previousParent !== parent && controlBoundaryOwners.get(previousParent) === controlState) controlBoundaryOwners.delete(previousParent);
 	const previousOwner = controlBoundaryOwners.get(parent);
 	if (previousOwner && previousOwner !== controlState) {
 		previousOwner._enqueueBoundaryCommit = null;
 		previousOwner._hasPendingBoundaryCommit = false;
+		if (previousOwner._commitOwner === parent) previousOwner._commitOwner = null;
 	}
 	controlBoundaryOwners.set(parent, controlState);
+	ownerState._commitOwner = parent;
 	controlState._enqueueBoundaryCommit = () => {
 		if (controlState._hasPendingBoundaryCommit) return;
 		controlState._hasPendingBoundaryCommit = true;
@@ -1631,10 +1692,13 @@ function resolveStableIntrinsicPatchVNode(dom, vnode) {
 	if (!existingInstance || existingInstance.fn !== vnode.type || host.__ASKR_WRAPPER_HOST) return null;
 	const snapshot = getVNodeContextFrame(vnode) || getCurrentContextFrame() || existingInstance.ownerFrame || null;
 	existingInstance.props = (vnode.props ?? {}) || {};
+	existingInstance.isRoot = isRouteRootComponentVNode(vnode);
+	existingInstance.portalScope = getCurrentInstance()?.portalScope ?? existingInstance.portalScope;
+	inheritComponentCleanupStrict(existingInstance);
 	if (snapshot) existingInstance.ownerFrame = snapshot;
 	const result = withContext(snapshot, () => renderComponentInline(existingInstance));
-	if (result instanceof Promise) throw new Error("Async components are not supported. Components must return synchronously.");
-	const resolvedResult = resolveNestedComponentResult(result, snapshot ?? null);
+	if (isPromiseLike(result)) throw new Error("Async components are not supported. Components must return synchronously.");
+	const resolvedResult = resolveNestedComponentResult(result, snapshot ?? null, existingInstance);
 	if (_isDOMElement(resolvedResult) && typeof resolvedResult.type === "string" && tagNamesEqualIgnoreCase(dom.tagName, resolvedResult.type)) return inheritComponentKey(resolvedResult, vnode);
 	return null;
 }
@@ -1699,35 +1763,39 @@ function updateElementFromVnode(el, vnode, updateChildren = true, forceChildrenU
 			return;
 		}
 	}
-	let desiredEventNames = null;
+	let desiredListenerKeys = null;
+	let desiredDelegatedEventNames = null;
 	let desiredReactivePropNames = null;
 	const usesReactiveChildren = syncReactiveScalarChild(el, props.children ?? domVNode.children);
 	if (usesReactiveChildren) (desiredReactivePropNames ??= /* @__PURE__ */ new Set()).add(REACTIVE_CHILDREN_KEY);
 	for (const key in props) {
 		const value = props[key];
 		if (isSkippedProp(key)) continue;
-		const eventName = parseEventName(key);
+		const eventProp = parseEventProp(key);
+		const eventName = eventProp?.eventName;
+		const eventCapture = eventProp?.capture ?? false;
+		const listenerKey = eventName === void 0 ? null : getEventListenerKey(eventName, eventCapture);
 		if (value === void 0 || value === null || value === false) {
 			if (key === "class" || key === "className") writeElementClassName(el, "");
 			else if (key === "value") applyFormControlProp(el, key, "", vnode.type);
 			else if (key === "checked") applyFormControlProp(el, key, false, vnode.type);
-			else if (eventName && existingListeners?.has(eventName)) {
-				const entry = existingListeners.get(eventName);
+			else if (listenerKey && existingListeners?.has(listenerKey)) {
+				const entry = existingListeners.get(listenerKey);
 				incDevCounter("listenerRemoves");
-				if (entry.isDelegated) removeDelegatedListener(el, eventName);
-				else if (entry.options !== void 0) el.removeEventListener(eventName, entry.handler, entry.options);
-				else el.removeEventListener(eventName, entry.handler);
-				existingListeners.delete(eventName);
+				if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
+				else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
+				else el.removeEventListener(entry.eventName, entry.handler);
+				existingListeners.delete(listenerKey);
 			} else {
 				const entry = existingReactiveProps?.get(key);
 				if (entry) {
 					entry.cleanup();
 					existingReactiveProps?.delete(key);
-				} else el.removeAttribute(key);
+				} else removeRenderedAttribute(el, key);
 			}
 			continue;
 		}
-		if (typeof value === "function" && !eventName && key !== "ref") {
+		if (typeof value === "function" && !eventProp && key !== "ref") {
 			const existingEntry = existingReactiveProps?.get(key);
 			if (existingReactiveProps && existingReactiveProps.size > 0) (desiredReactivePropNames ??= /* @__PURE__ */ new Set()).add(key);
 			if (existingEntry && existingEntry.fnRef === value) continue;
@@ -1756,9 +1824,11 @@ function updateElementFromVnode(el, vnode, updateChildren = true, forceChildrenU
 		if (key === "class" || key === "className") writeElementClassName(el, String(value));
 		else if (key === "style") applyStylePropValue(el, value);
 		else if (key === "value" || key === "checked") applyFormControlProp(el, key, value, vnode.type);
-		else if (eventName) {
-			const useDelegation = isEventDelegationEnabled() && isDelegatedEvent(eventName);
-			(desiredEventNames ??= /* @__PURE__ */ new Set()).add(eventName);
+		else if (eventProp && listenerKey) {
+			const eventName = eventProp.eventName;
+			const eventCapture = eventProp.capture;
+			const useDelegation = !eventCapture && isEventDelegationEnabled() && isDelegatedEvent(eventName);
+			if (useDelegation) (desiredDelegatedEventNames ??= /* @__PURE__ */ new Set()).add(eventName);
 			if (useDelegation) {
 				const existingDelegated = getDelegatedHandlerForElement(el, eventName);
 				if (existingDelegated?.original === value) continue;
@@ -1766,7 +1836,8 @@ function updateElementFromVnode(el, vnode, updateChildren = true, forceChildrenU
 				addDelegatedListener(el, eventName, value, value, void 0);
 				continue;
 			}
-			const existing = existingListeners?.get(eventName);
+			(desiredListenerKeys ??= /* @__PURE__ */ new Set()).add(listenerKey);
+			const existing = existingListeners?.get(listenerKey);
 			if (existing && existing.original === value) continue;
 			if (existing) {
 				if (useDelegation && existing.isDelegated && updateDelegatedListener(el, eventName, value, value, void 0)) {
@@ -1780,11 +1851,11 @@ function updateElementFromVnode(el, vnode, updateChildren = true, forceChildrenU
 					existing.original = value;
 					continue;
 				}
-				if (existing.isDelegated) removeDelegatedListener(el, eventName);
-				else if (existing.options !== void 0) el.removeEventListener(eventName, existing.handler, existing.options);
-				else el.removeEventListener(eventName, existing.handler);
+				if (existing.isDelegated) removeDelegatedListener(el, existing.eventName);
+				else if (existing.options !== void 0) el.removeEventListener(existing.eventName, existing.handler, existing.options);
+				else el.removeEventListener(existing.eventName, existing.handler);
 			}
-			const options = getPassiveOptions(eventName);
+			const options = getEventListenerOptions(eventName, eventCapture);
 			const mutableHandler = createMutableWrappedHandler(value, true);
 			const trackedHandler = mutableHandler.handler;
 			if (options !== void 0) el.addEventListener(eventName, trackedHandler, options);
@@ -1793,39 +1864,40 @@ function updateElementFromVnode(el, vnode, updateChildren = true, forceChildrenU
 			const listenerEntry = {
 				handler: trackedHandler,
 				original: value,
+				eventName,
 				options,
 				isDelegated: false,
 				updateHandler: mutableHandler?.updateHandler
 			};
 			if (!elementListeners.has(el)) elementListeners.set(el, /* @__PURE__ */ new Map());
-			elementListeners.get(el).set(eventName, listenerEntry);
-		} else el.setAttribute(key, String(value));
+			elementListeners.get(el).set(listenerKey, listenerEntry);
+		} else setRenderedAttribute(el, key, String(value));
 	}
 	removeStaleAttributes(el, domVNode, props);
-	if (existingListeners && existingListeners.size > 0) if (desiredEventNames === null) {
-		existingListeners.forEach((entry, eventName) => {
+	if (existingListeners && existingListeners.size > 0) if (desiredListenerKeys === null) {
+		existingListeners.forEach((entry) => {
 			incDevCounter("listenerRemoves");
-			if (entry.isDelegated) removeDelegatedListener(el, eventName);
-			else if (entry.options !== void 0) el.removeEventListener(eventName, entry.handler, entry.options);
-			else el.removeEventListener(eventName, entry.handler);
+			if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
+			else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
+			else el.removeEventListener(entry.eventName, entry.handler);
 		});
 		elementListeners.delete(el);
 	} else {
-		existingListeners.forEach((entry, eventName) => {
-			if (!desiredEventNames.has(eventName)) {
+		existingListeners.forEach((entry, listenerKey) => {
+			if (!desiredListenerKeys.has(listenerKey)) {
 				incDevCounter("listenerRemoves");
-				if (entry.isDelegated) removeDelegatedListener(el, eventName);
-				else if (entry.options !== void 0) el.removeEventListener(eventName, entry.handler, entry.options);
-				else el.removeEventListener(eventName, entry.handler);
-				existingListeners.delete(eventName);
+				if (entry.isDelegated) removeDelegatedListener(el, entry.eventName);
+				else if (entry.options !== void 0) el.removeEventListener(entry.eventName, entry.handler, entry.options);
+				else el.removeEventListener(entry.eventName, entry.handler);
+				existingListeners.delete(listenerKey);
 			}
 		});
 		if (existingListeners.size === 0) elementListeners.delete(el);
 	}
 	const delegatedHandlers = getDelegatedHandlersForElement(el);
 	if (delegatedHandlers && delegatedHandlers.size > 0) {
-		if (desiredEventNames === null) for (const eventName of delegatedHandlers.keys()) removeDelegatedListener(el, eventName);
-		else for (const eventName of delegatedHandlers.keys()) if (!desiredEventNames.has(eventName)) removeDelegatedListener(el, eventName);
+		if (desiredDelegatedEventNames === null) for (const eventName of delegatedHandlers.keys()) removeDelegatedListener(el, eventName);
+		else for (const eventName of delegatedHandlers.keys()) if (!desiredDelegatedEventNames.has(eventName)) removeDelegatedListener(el, eventName);
 	}
 	if (existingReactiveProps && existingReactiveProps.size > 0) if (desiredReactivePropNames === null) {
 		existingReactiveProps.forEach((entry) => {
@@ -2028,7 +2100,7 @@ function hasMatchingStaticProps(el, props, vnodeType) {
 			staticPropCount += 1;
 			continue;
 		}
-		if (el.getAttribute(key) !== String(value)) return false;
+		if (el.getAttribute(getRenderedAttributeName(el, key)) !== String(value)) return false;
 		staticPropCount += 1;
 	}
 	return el.attributes.length === staticPropCount;
@@ -2058,6 +2130,32 @@ function updateUnkeyedChildren(parent, newChildren, forceUpdate = false) {
 		if (typeof next.type !== "function") return null;
 		return syncComponentElement(currentDom, next, next.type, (next.props ?? {}) || {}, parentNamespace, forceUpdate);
 	};
+	const trySyncControlBoundaryChild = (parent, currentNode, next) => {
+		if (next.type !== __FOR_BOUNDARY__) return false;
+		const controlState = getControlBoundaryState(next);
+		if (!controlState || controlState.kind === "for") return false;
+		const childrenVNodes = evaluateControlBoundaryState(controlState);
+		const activeScope = controlState.activeScope;
+		const activeVNode = childrenVNodes[0];
+		const nextDom = activeScope && activeVNode !== void 0 ? syncForItemDom(parent, activeScope, activeVNode) : null;
+		for (let i = 0; i < controlState.lastRemovedNodes.length; i++) {
+			const removedNode = controlState.lastRemovedNodes[i];
+			if (removedNode.parentNode !== parent) continue;
+			teardownNodeSubtree(removedNode);
+			if (nextDom && nextDom !== removedNode && !nextDom.parentNode) parent.replaceChild(nextDom, removedNode);
+			else parent.removeChild(removedNode);
+		}
+		if (nextDom && !nextDom.parentNode) if (currentNode?.parentNode === parent) {
+			teardownNodeSubtree(currentNode);
+			parent.replaceChild(nextDom, currentNode);
+		} else parent.appendChild(nextDom);
+		else if (!nextDom && currentNode?.parentNode === parent) {
+			teardownNodeSubtree(currentNode);
+			parent.removeChild(currentNode);
+		}
+		clearControlBoundaryDomUpdateState(controlState);
+		return true;
+	};
 	const hasText = newChildren.some((c) => typeof c === "string" || typeof c === "number");
 	const hasElements = newChildren.some((c) => _isDOMElement(c));
 	const hasEmptyChildren = newChildren.some(isEmptyChild);
@@ -2078,6 +2176,7 @@ function updateUnkeyedChildren(parent, newChildren, forceUpdate = false) {
 				}
 			}
 			else if (_isDOMElement(next)) {
+				if (trySyncControlBoundaryChild(parent, current, next)) continue;
 				const synced = trySyncComponentChild(current, next);
 				if (synced && synced !== current) teardownNodeSubtree(current);
 				else if (!synced) {
@@ -2132,6 +2231,7 @@ function updateUnkeyedChildren(parent, newChildren, forceUpdate = false) {
 					}
 				}
 				else {
+					if (trySyncControlBoundaryChild(parent, currentNode, next)) continue;
 					const synced = trySyncComponentChild(currentEl, next);
 					if (synced && synced !== currentNode) teardownNodeSubtree(currentEl);
 					else if (!synced) {