marko 6.1.11 → 6.1.13

package/dist/debug/dom.mjs

@@ -20,6 +20,7 @@ function* attrTagIterator() {
 }
 //#endregion
 //#region src/common/errors.ts
+const lowercaseEventHandlerReg = /^on[a-z]/;
 function _el_read_error() {
 	throw new Error("Element references can only be read in scripts and event handlers.");
 }
@@ -29,10 +30,6 @@ function _hoist_read_error() {
 function _assert_hoist(value) {
 	if (typeof value !== "function") throw new Error(`Hoisted values must be functions, received type "${typeof value}".`);
 }
-function _assert_init(scope, accessor) {
-	if (scope["#Creating"] || !(accessor in scope)) throw new ReferenceError(`Cannot access '${accessor}' before initialization`);
-	return scope[accessor];
-}
 function assertExclusiveAttrs(attrs, onError = throwErr) {
 	if (attrs) {
 		let exclusiveAttrs;
@@ -48,6 +45,12 @@ function assertExclusiveAttrs(attrs, onError = throwErr) {
 		if (exclusiveAttrs && exclusiveAttrs.length > 1) onError(`The attributes ${joinWithAnd(exclusiveAttrs)} are mutually exclusive.`);
 	}
 }
+function assertValidEventHandlerAttr(name, value) {
+	if (value && typeof value !== "string" && lowercaseEventHandlerReg.test(name)) throw new Error(`The \`${name}\` attribute must be a string or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}". To attach an event listener, use the \`on${name[2].toUpperCase()}${name.slice(3)}\` event handler instead.`);
+}
+function assertHandlerIsFunction(name, value) {
+	if (value && typeof value !== "function") throw new Error(`The \`${name}\` handler must be a function or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}".`);
+}
 function assertValidTagName(tagName) {
 	if (!/^[a-z][a-z0-9._-]*$/i.test(tagName)) throw new Error(`Invalid tag name: "${tagName}". Tag names must start with a letter and contain only letters, numbers, periods, hyphens, and underscores.`);
 }
@@ -148,6 +151,7 @@ function push(opt, item) {
 //#region src/dom/event.ts
 const defaultDelegator = /* @__PURE__ */ createDelegator();
 function _on(element, type, handler) {
+	assertHandlerIsFunction("on" + type[0].toUpperCase() + type.slice(1), handler);
 	if (element["$" + type] === void 0) defaultDelegator(element, type, handleDelegated);
 	element["$" + type] = handler || null;
 }
@@ -200,16 +204,34 @@ function parseHTML(html, ns) {
 //#endregion
 //#region src/dom/scope.ts
 let nextScopeId = 1e6;
+let collectingScopes;
 function createScope($global, closestBranch) {
 	const scope = {
 		["#Id"]: nextScopeId++,
-		["#Creating"]: 1,
+		["#Gen"]: runId,
 		["#ClosestBranch"]: closestBranch,
 		["$global"]: $global
 	};
-	pendingScopes.push(scope);
+	collectingScopes?.push(scope);
 	return scope;
 }
+function syncGen(scope) {
+	scope["#Gen"] = runId;
+}
+function _assert_init(scope, accessor) {
+	if (scope["#Gen"] === runId || !(accessor in scope)) throw new ReferenceError(`Cannot access '${accessor}' before initialization`);
+	return scope[accessor];
+}
+function collectScopes(fn) {
+	const prev = collectingScopes;
+	collectingScopes = [];
+	try {
+		fn();
+		return collectingScopes;
+	} finally {
+		collectingScopes = prev;
+	}
+}
 function skipScope() {
 	return nextScopeId++;
 }
@@ -223,13 +245,13 @@ function destroyBranch(branch) {
 	destroyNestedScopes(branch);
 }
 function destroyScope(scope) {
-	if (!scope["#Destroyed"]) {
+	if (scope["#Gen"]) {
 		destroyNestedScopes(scope);
 		resetControllers(scope);
 	}
 }
 const destroyNestedScopes = function destroyNestedScopes(scope) {
-	scope["#Destroyed"] = 1;
+	scope["#Gen"] = 0;
 	scope["#BranchScopes"]?.forEach(destroyNestedScopes);
 	scope["#AbortScopes"]?.forEach(resetControllers);
 };
@@ -288,7 +310,7 @@ function _let(id, fn) {
 	id = +id.slice(id.lastIndexOf("/") + 1);
 	return (scope, value) => {
 		if (rendering) {
-			if (scope["#Creating"]) {
+			if (scope["#Gen"] === runId) {
 				scope[valueAccessor] = value;
 				fn?.(scope);
 			}
@@ -323,7 +345,7 @@ function _const(valueAccessor, fn) {
 }
 function _or(id, fn, defaultPending = 1, scopeIdAccessor = "#Id") {
 	return (scope) => {
-		if (scope["#Creating"]) if (id in scope) {
+		if (scope["#Gen"] === runId) if (id in scope) {
 			if (!--scope[id]) fn(scope);
 		} else scope[id] = defaultPending;
 		else queueRender(scope, fn, id, 0, scope[scopeIdAccessor]);
@@ -334,7 +356,7 @@ function _for_closure(ownerLoopNodeAccessor, fn) {
 	const ownerSignal = (ownerScope) => {
 		const scopes = toArray(ownerScope[scopeAccessor]);
 		if (scopes.length) queueRender(ownerScope, () => {
-			for (const scope of scopes) if (!scope["#Creating"] && !scope["#Destroyed"]) fn(scope);
+			for (const scope of scopes) if (scope["#Gen"] > 0 && scope["#Gen"] < runId) fn(scope);
 		}, -1, 0, scopes[0]["#Id"]);
 	};
 	ownerSignal._ = fn;
@@ -345,7 +367,7 @@ function _if_closure(ownerConditionalNodeAccessor, branch, fn) {
 	const branchAccessor = "ConditionalRenderer:" + ownerConditionalNodeAccessor;
 	const ownerSignal = (scope) => {
 		const ifScope = scope[scopeAccessor];
-		if (ifScope && !ifScope["#Creating"] && (scope[branchAccessor] || 0) === branch) queueRender(ifScope, fn, -1);
+		if (ifScope && ifScope["#Gen"] > 0 && ifScope["#Gen"] < runId && (scope[branchAccessor] || 0) === branch) queueRender(ifScope, fn, -1);
 	};
 	ownerSignal._ = fn;
 	return ownerSignal;
@@ -364,7 +386,7 @@ function _closure(...closureSignals) {
 	for (let i = closureSignals.length; i--;) closureSignals[i]["index"] = i;
 	return (scope) => {
 		if (scope[scopeInstances]) {
-			for (const childScope of scope[scopeInstances]) if (!childScope["#Creating"]) queueRender(childScope, closureSignals[childScope[signalIndex] || 0], -1);
+			for (const childScope of scope[scopeInstances]) if (childScope["#Gen"] > 0 && childScope["#Gen"] < runId) queueRender(childScope, closureSignals[childScope[signalIndex] || 0], -1);
 		}
 	};
 }
@@ -604,6 +626,7 @@ function init(runtimeId = "M") {
 				renderId
 			};
 			const initScope = (scope) => {
+				scope["#Gen"] = 1;
 				scope["$global"] = initGlobal();
 				if (branchesEnabled && scope["#ClosestBranchId"]) scope["#ClosestBranch"] = getScope(scope["#ClosestBranchId"]);
 				return scope;
@@ -768,7 +791,7 @@ function _attr_input_checked_default(scope, nodeAccessor, checked) {
 	const el = scope[nodeAccessor];
 	const normalizedChecked = isNotVoid(checked);
 	if (el.defaultChecked !== normalizedChecked) {
-		const restoreValue = scope["#Creating"] ? normalizedChecked : el.checked;
+		const restoreValue = scope["#Gen"] < runId ? el.checked : normalizedChecked;
 		el.defaultChecked = normalizedChecked;
 		if (restoreValue !== normalizedChecked) el.checked = restoreValue;
 	}
@@ -776,9 +799,10 @@ function _attr_input_checked_default(scope, nodeAccessor, checked) {
 function _attr_input_checked(scope, nodeAccessor, checked, checkedChange) {
 	const el = scope[nodeAccessor];
 	const normalizedChecked = isNotVoid(checked);
+	assertHandlerIsFunction("checkedChange", checkedChange);
 	scope["ControlledHandler:" + nodeAccessor] = checkedChange;
 	scope["ControlledType:" + nodeAccessor] = checkedChange ? 0 : 5;
-	if (checkedChange && !scope["#Creating"]) el.checked = normalizedChecked;
+	if (checkedChange && scope["#Gen"] < runId) el.checked = normalizedChecked;
 	else _attr_input_checked_default(scope, nodeAccessor, normalizedChecked);
 }
 function _attr_input_checked_script(scope, nodeAccessor) {
@@ -804,9 +828,10 @@ function _attr_input_checkedValue(scope, nodeAccessor, checkedValue, checkedValu
 	const el = scope[nodeAccessor];
 	const multiple = Array.isArray(checkedValue);
 	const normalizedCheckedValue = scope["ControlledValue:" + nodeAccessor] = multiple ? checkedValue.map(normalizeStrProp) : normalizeStrProp(checkedValue);
+	assertHandlerIsFunction("checkedValueChange", checkedValueChange);
 	scope["ControlledHandler:" + nodeAccessor] = checkedValueChange;
 	scope["ControlledType:" + nodeAccessor] = checkedValueChange ? 1 : 5;
-	if (checkedValueChange && !scope["#Creating"]) {
+	if (checkedValueChange && scope["#Gen"] < runId) {
 		el.checked = multiple ? normalizedCheckedValue.includes(normalizeStrProp(value)) : normalizeStrProp(value) === normalizedCheckedValue;
 		_attr(el, "value", value);
 	} else _attr_input_checkedValue_default(scope, nodeAccessor, checkedValue, value);
@@ -832,7 +857,7 @@ function _attr_input_value_default(scope, nodeAccessor, value) {
 	const el = scope[nodeAccessor];
 	const normalizedValue = normalizeAttrValue(value) || "";
 	if (el.defaultValue !== normalizedValue) {
-		const restoreValue = scope["#Creating"] ? normalizedValue : el.value;
+		const restoreValue = scope["#Gen"] < runId ? el.value : normalizedValue;
 		el.defaultValue = normalizedValue;
 		setInputValue(el, restoreValue);
 	}
@@ -840,10 +865,11 @@ function _attr_input_value_default(scope, nodeAccessor, value) {
 function _attr_input_value(scope, nodeAccessor, value, valueChange) {
 	const el = scope[nodeAccessor];
 	const normalizedValue = normalizeAttrValue(value) || "";
+	assertHandlerIsFunction("valueChange", valueChange);
 	scope["ControlledHandler:" + nodeAccessor] = valueChange;
 	scope["ControlledValue:" + nodeAccessor] = normalizedValue;
 	scope["ControlledType:" + nodeAccessor] = valueChange ? 2 : 5;
-	if (valueChange && !scope["#Creating"]) setInputValue(el, normalizedValue);
+	if (valueChange && scope["#Gen"] < runId) setInputValue(el, normalizedValue);
 	else _attr_input_value_default(scope, nodeAccessor, normalizedValue);
 }
 function _attr_input_value_script(scope, nodeAccessor) {
@@ -869,14 +895,14 @@ function setInputValue(el, value) {
 function _attr_select_value_default(scope, nodeAccessor, value) {
 	let restoreValue;
 	const el = scope[nodeAccessor];
-	const existing = !scope["#Creating"];
+	const live = scope["#Gen"] < runId;
 	const multiple = Array.isArray(value);
 	const normalizedValue = multiple ? value.map(normalizeStrProp) : normalizeStrProp(value);
 	pendingEffects.unshift(() => {
 		for (const opt of el.options) {
 			const selected = multiple ? normalizedValue.includes(opt.value) : opt.value === normalizedValue;
 			if (opt.defaultSelected !== selected) {
-				if (existing) restoreValue ??= getSelectValue(el, multiple);
+				if (live) restoreValue ??= getSelectValue(el, multiple);
 				opt.defaultSelected = selected;
 			}
 		}
@@ -885,9 +911,10 @@ function _attr_select_value_default(scope, nodeAccessor, value) {
 }
 function _attr_select_value(scope, nodeAccessor, value, valueChange) {
 	const el = scope[nodeAccessor];
-	const existing = !scope["#Creating"];
+	const existing = scope["#Gen"] < runId;
 	const multiple = Array.isArray(value);
 	const normalizedValue = scope["ControlledValue:" + nodeAccessor] = multiple ? value.map(normalizeStrProp) : normalizeStrProp(value);
+	assertHandlerIsFunction("valueChange", valueChange);
 	scope["ControlledHandler:" + nodeAccessor] = valueChange;
 	scope["ControlledType:" + nodeAccessor] = valueChange ? 3 : 5;
 	if (valueChange && existing) pendingEffects.unshift(() => setSelectValue(el, normalizedValue, multiple), scope);
@@ -933,13 +960,14 @@ function getSelectValue(el, multiple) {
 	return multiple ? Array.from(el.selectedOptions, (opt) => opt.value) : el.value;
 }
 function _attr_details_or_dialog_open_default(scope, nodeAccessor, open) {
-	if (scope["#Creating"]) scope[nodeAccessor].open = isNotVoid(open);
+	if (scope["#Gen"] === runId) scope[nodeAccessor].open = isNotVoid(open);
 }
 function _attr_details_or_dialog_open(scope, nodeAccessor, open, openChange) {
 	const normalizedOpen = scope["ControlledValue:" + nodeAccessor] = isNotVoid(open);
+	assertHandlerIsFunction("openChange", openChange);
 	scope["ControlledHandler:" + nodeAccessor] = openChange;
 	scope["ControlledType:" + nodeAccessor] = openChange ? 4 : 5;
-	if (openChange && !scope["#Creating"]) scope[nodeAccessor].open = normalizedOpen;
+	if (openChange && scope["#Gen"] < runId) scope[nodeAccessor].open = normalizedOpen;
 	else _attr_details_or_dialog_open_default(scope, nodeAccessor, normalizedOpen);
 }
 function _attr_details_or_dialog_open_script(scope, nodeAccessor) {
@@ -998,6 +1026,7 @@ function _to_text(value) {
 	return value || value === 0 ? value + "" : "";
 }
 function _attr(element, name, value) {
+	assertValidEventHandlerAttr(name, value);
 	setAttribute(element, name, normalizeAttrValue(value));
 }
 function setAttribute(element, name, value) {
@@ -1072,8 +1101,9 @@ function _attrs_partial_content(scope, nodeAccessor, nextAttrs, skip) {
 }
 function attrsInternal(scope, nodeAccessor, nextAttrs) {
 	const el = scope[nodeAccessor];
-	let events;
+	let events = scope["EventAttributes:" + nodeAccessor];
 	let skip;
+	for (const name in events) events[name] = 0;
 	switch (el.tagName) {
 		case "INPUT":
 			if ("checked" in nextAttrs || "checkedChange" in nextAttrs) _attr_input_checked(scope, nodeAccessor, nextAttrs.checked, nextAttrs.checkedChange);
@@ -1243,7 +1273,7 @@ function _await_promise(nodeAccessor, params) {
 				scope[promiseAccessor] = 0;
 				queueAsyncRender(scope, () => {
 					if ((awaitBranch = scope[branchAccessor])["#DetachedAwait"]) {
-						pendingScopes.push(awaitBranch);
+						awaitBranch["#PendingScopes"] = awaitBranch["#PendingScopes"]?.forEach(syncGen);
 						setupBranch(awaitBranch["#DetachedAwait"], awaitBranch);
 						awaitBranch["#DetachedAwait"] = 0;
 						insertBranchBefore(awaitBranch, scope[nodeAccessor].parentNode, scope[nodeAccessor]);
@@ -1284,8 +1314,8 @@ function _await_content(nodeAccessor, template, walks, setup) {
 	const branchAccessor = "BranchScopes:" + nodeAccessor;
 	const renderer = _content("", template, walks, setup)();
 	return (scope) => {
-		(scope[branchAccessor] = createBranch(scope["$global"], renderer, scope, scope[nodeAccessor].parentNode))["#DetachedAwait"] = renderer;
-		pendingScopes.pop();
+		const pendingScopes = collectScopes(() => (scope[branchAccessor] = createBranch(scope["$global"], renderer, scope, scope[nodeAccessor].parentNode))["#DetachedAwait"] = renderer);
+		scope[branchAccessor]["#PendingScopes"] = pendingScopes;
 	};
 }
 function addAwaitCounter(scope, tryBranch = findBranchWithKey(scope, "#PlaceholderContent")) {
@@ -1357,7 +1387,7 @@ function _if(nodeAccessor, ...branchesArgs) {
 	while (i < branchesArgs.length) branches.push(_content("", branchesArgs[i++], branchesArgs[i++], branchesArgs[i++])());
 	enableBranches();
 	return (scope, newBranch) => {
-		if (newBranch !== scope[branchAccessor]) setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
+		if (newBranch !== (scope[branchAccessor] ?? (scope["BranchScopes:" + nodeAccessor] && 0))) setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
 function patchDynamicTag(fn) {
@@ -1449,7 +1479,8 @@ function loop(forEach) {
 			let hasPotentialMoves;
 			var seenKeys = /* @__PURE__ */ new Set();
 			forEach(value, (key, args) => {
-				if (seenKeys.has(key)) console.error(`A <for> tag's \`by\` attribute must return a unique value for each item, but a duplicate was found matching:`, key);
+				if (typeof key !== "string" && typeof key !== "number") console.error(`A <for> tag's \`by\` attribute must return a string or number, but it returned:`, key);
+				else if (seenKeys.has(key)) console.error(`A <for> tag's \`by\` attribute must return a unique value for each item, but a duplicate was found matching:`, key);
 				else seenKeys.add(key);
 				let branch = oldLen && (oldScopesByKey ||= oldScopes.reduce((map, scope, i) => map.set(scope["#LoopKey"] ?? i, scope), /* @__PURE__ */ new Map())).get(key);
 				if (branch) hasPotentialMoves = oldScopesByKey.delete(key);
@@ -1548,13 +1579,12 @@ function byFirstArg(name) {
 }
 //#endregion
 //#region src/dom/queue.ts
-let runId = 1;
-let pendingRenders = [];
+let rendering;
+let runId = 2;
 const caughtError = /* @__PURE__ */ new WeakSet();
 const placeholderShown = /* @__PURE__ */ new WeakSet();
 let pendingEffects = [];
-let pendingScopes = [];
-let rendering;
+let pendingRenders = [];
 const scopeKeyOffset = 1e3;
 function queueRender(scope, signal, signalKey, value, scopeKey = scope["#Id"]) {
 	let render;
@@ -1647,13 +1677,11 @@ function runRenders() {
 		}
 		runRender(render);
 	}
-	for (const scope of pendingScopes) scope["#Creating"] = 0;
-	pendingScopes = [];
 }
 let runRender = (render) => render["signal"](render["scope"], render["value"]);
 function skipDestroyedRenders() {
 	runRender = ((runRender) => (render) => {
-		if (!render["scope"]["#ClosestBranch"]?.["#Destroyed"]) runRender(render);
+		if (render["scope"]["#ClosestBranch"]?.["#Gen"] !== 0) runRender(render);
 	})(runRender);
 }
 let catchEnabled;
@@ -1676,8 +1704,7 @@ function _enable_catch() {
 				for (; i < effects.length;) {
 					fn = effects[i++];
 					scope = effects[i++];
-					branch = scope["#ClosestBranch"];
-					if (!branch?.["#Destroyed"] && !(checkPending && handlePendingTry(fn, scope, branch))) fn(scope);
+					if ((branch = scope["#ClosestBranch"])?.["#Gen"] !== 0 && !(checkPending && handlePendingTry(fn, scope, branch))) fn(scope);
 				}
 			} else runEffects(effects);
 		})(runEffects);
@@ -1901,13 +1928,12 @@ function _load_setup(nodeAccessor, childScopeAccessor, load) {
 }
 function insertLoaded(renderer, branch, marker, awaitCounter) {
 	const parent = marker.parentNode;
-	branch["#Creating"] = 1;
+	syncGen(branch);
 	renderer["clone"](branch, parent.namespaceURI);
 	setupBranch(renderer, branch);
 	applyLoad(branch, () => {
 		insertBranchBefore(branch, parent, marker);
 		marker.remove();
-		pendingScopes.push(branch);
 		awaitCounter?.c();
 	});
 }
@@ -1923,14 +1949,11 @@ function applyLoad(scope, insert) {
 	scope["#Load"] = 0;
 	if (remaining = values?.size) for (const [promise, entry] of values) promise.then((signal) => {
 		entry["signal"] = signal;
-		if (!--remaining) {
-			scope["#Creating"] = 1;
-			pendingScopes.push(scope);
-			queueAsyncRender(scope, (scope) => {
-				values.forEach((e) => e["signal"]._(scope, e["value"]));
-				insert();
-			});
-		}
+		if (!--remaining) queueAsyncRender(scope, (scope) => {
+			syncGen(scope);
+			values.forEach((e) => e["signal"]._(scope, e["value"]));
+			insert();
+		});
 	}, () => 0);
 	else insert();
 }
@@ -1939,7 +1962,7 @@ function _load_signal(load) {
 	let signal;
 	return (scope, value) => {
 		pending ||= load();
-		if (scope["#Load"] || !("#Load" in scope) && scope["#Creating"]) (scope["#Load"] ||= /* @__PURE__ */ new Map()).set(pending, { ["value"]: value });
+		if (scope["#Load"] || !("#Load" in scope) && scope["#Gen"] === runId) (scope["#Load"] ||= /* @__PURE__ */ new Map()).set(pending, { ["value"]: value });
 		else if (signal) signal(scope, value);
 		else pending.then((mod) => queueAsyncRender(scope, signal = mod._, value), () => 0);
 	};

package/dist/debug/html.js

@@ -22,6 +22,7 @@ function* attrTagIterator() {
 }
 //#endregion
 //#region src/common/errors.ts
+const lowercaseEventHandlerReg = /^on[a-z]/;
 function _el_read_error() {
 	throw new Error("Element references can only be read in scripts and event handlers.");
 }
@@ -46,6 +47,12 @@ function assertExclusiveAttrs(attrs, onError = throwErr) {
 		if (exclusiveAttrs && exclusiveAttrs.length > 1) onError(`The attributes ${joinWithAnd(exclusiveAttrs)} are mutually exclusive.`);
 	}
 }
+function assertValidEventHandlerAttr(name, value) {
+	if (value && typeof value !== "string" && lowercaseEventHandlerReg.test(name)) throw new Error(`The \`${name}\` attribute must be a string or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}". To attach an event listener, use the \`on${name[2].toUpperCase()}${name.slice(3)}\` event handler instead.`);
+}
+function assertHandlerIsFunction(name, value) {
+	if (value && typeof value !== "function") throw new Error(`The \`${name}\` handler must be a function or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}".`);
+}
 function assertValidTagName(tagName) {
 	if (!/^[a-z][a-z0-9._-]*$/i.test(tagName)) throw new Error(`Invalid tag name: "${tagName}". Tag names must start with a letter and contain only letters, numbers, periods, hyphens, and underscores.`);
 }
@@ -1398,17 +1405,26 @@ function concat(opt, other) {
 //#region src/html/for.ts
 function forOfBy(by, item, index) {
 	if (by) {
-		if (typeof by === "string") return item[by];
-		return by(item, index);
+		const key = typeof by === "string" ? item[by] : by(item, index);
+		if (typeof key !== "string" && typeof key !== "number") console.error(`A <for> tag's \`by\` attribute must return a string or number, but it returned:`, key);
+		return key;
 	}
 	return index;
 }
 function forInBy(by, name, value) {
-	if (by) return by(name, value);
+	if (by) {
+		const key = by(name, value);
+		if (typeof key !== "string" && typeof key !== "number") console.error(`A <for> tag's \`by\` attribute must return a string or number, but it returned:`, key);
+		return key;
+	}
 	return name;
 }
 function forStepBy(by, index) {
-	if (by) return by(index);
+	if (by) {
+		const key = by(index);
+		if (typeof key !== "string" && typeof key !== "number") console.error(`A <for> tag's \`by\` attribute must return a string or number, but it returned:`, key);
+		return key;
+	}
 	return index;
 }
 //#endregion
@@ -2414,6 +2430,7 @@ function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
 }
 function _attr(name, value) {
+	assertValidEventHandlerAttr(name, value);
 	return isVoid(value) ? "" : nonVoidAttr(name, value);
 }
 function _attrs(data, nodeAccessor, scopeId, tagName) {
@@ -2489,6 +2506,7 @@ function _attrs_partial_content(data, skip, nodeAccessor, scopeId, tagName, seri
 	_attr_content(nodeAccessor, scopeId, data?.content, serializeReason);
 }
 function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
+	assertHandlerIsFunction("valueChange", valueChange);
 	writeScope(scopeId, {
 		["ControlledType:" + nodeAccessor]: type,
 		["ControlledValue:" + nodeAccessor]: value,

package/dist/debug/html.mjs

@@ -20,6 +20,7 @@ function* attrTagIterator() {
 }
 //#endregion
 //#region src/common/errors.ts
+const lowercaseEventHandlerReg = /^on[a-z]/;
 function _el_read_error() {
 	throw new Error("Element references can only be read in scripts and event handlers.");
 }
@@ -44,6 +45,12 @@ function assertExclusiveAttrs(attrs, onError = throwErr) {
 		if (exclusiveAttrs && exclusiveAttrs.length > 1) onError(`The attributes ${joinWithAnd(exclusiveAttrs)} are mutually exclusive.`);
 	}
 }
+function assertValidEventHandlerAttr(name, value) {
+	if (value && typeof value !== "string" && lowercaseEventHandlerReg.test(name)) throw new Error(`The \`${name}\` attribute must be a string or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}". To attach an event listener, use the \`on${name[2].toUpperCase()}${name.slice(3)}\` event handler instead.`);
+}
+function assertHandlerIsFunction(name, value) {
+	if (value && typeof value !== "function") throw new Error(`The \`${name}\` handler must be a function or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …), but received type "${typeof value}".`);
+}
 function assertValidTagName(tagName) {
 	if (!/^[a-z][a-z0-9._-]*$/i.test(tagName)) throw new Error(`Invalid tag name: "${tagName}". Tag names must start with a letter and contain only letters, numbers, periods, hyphens, and underscores.`);
 }
@@ -1396,17 +1403,26 @@ function concat(opt, other) {
 //#region src/html/for.ts
 function forOfBy(by, item, index) {
 	if (by) {
-		if (typeof by === "string") return item[by];
-		return by(item, index);
+		const key = typeof by === "string" ? item[by] : by(item, index);
+		if (typeof key !== "string" && typeof key !== "number") console.error(`A <for> tag's \`by\` attribute must return a string or number, but it returned:`, key);
+		return key;
 	}
 	return index;
 }
 function forInBy(by, name, value) {
-	if (by) return by(name, value);
+	if (by) {
+		const key = by(name, value);
+		if (typeof key !== "string" && typeof key !== "number") console.error(`A <for> tag's \`by\` attribute must return a string or number, but it returned:`, key);
+		return key;
+	}
 	return name;
 }
 function forStepBy(by, index) {
-	if (by) return by(index);
+	if (by) {
+		const key = by(index);
+		if (typeof key !== "string" && typeof key !== "number") console.error(`A <for> tag's \`by\` attribute must return a string or number, but it returned:`, key);
+		return key;
+	}
 	return index;
 }
 //#endregion
@@ -2412,6 +2428,7 @@ function _attr_nonce() {
 	return getChunk().boundary.state.nonceAttr;
 }
 function _attr(name, value) {
+	assertValidEventHandlerAttr(name, value);
 	return isVoid(value) ? "" : nonVoidAttr(name, value);
 }
 function _attrs(data, nodeAccessor, scopeId, tagName) {
@@ -2487,6 +2504,7 @@ function _attrs_partial_content(data, skip, nodeAccessor, scopeId, tagName, seri
 	_attr_content(nodeAccessor, scopeId, data?.content, serializeReason);
 }
 function writeControlledScope(type, scopeId, nodeAccessor, value, valueChange) {
+	assertHandlerIsFunction("valueChange", valueChange);
 	writeScope(scopeId, {
 		["ControlledType:" + nodeAccessor]: type,
 		["ControlledValue:" + nodeAccessor]: value,

package/dist/dom/queue.d.ts

@@ -9,11 +9,11 @@ export type PendingRender = {
     [PendingRenderProp.Gen]: number;
     [PendingRenderProp.Pending]?: 0 | 1;
 };
+export declare let rendering: undefined | 0 | 1;
+export declare let runId: number;
 export declare const caughtError: WeakSet<unknown[]>;
 export declare const placeholderShown: WeakSet<unknown[]>;
 export declare let pendingEffects: unknown[];
-export declare let pendingScopes: Scope[];
-export declare let rendering: undefined | 0 | 1;
 export declare function queueRender<T, U extends Scope = Scope>(scope: U, signal: Signal<T, U>, signalKey: number, value?: T, scopeKey?: number): void;
 export declare function queuePendingRender(render: PendingRender): void;
 export declare function queueEffect<S extends Scope, T extends ExecFn<S>>(scope: S, fn: T): void;

package/dist/dom/scope.d.ts

@@ -1,5 +1,8 @@
 import { AccessorProp, type BranchScope, type Scope } from "../common/types";
 export declare function createScope($global: Scope[AccessorProp.Global], closestBranch?: BranchScope): Scope;
+export declare function syncGen(scope: Scope): void;
+export declare function _assert_init(scope: Scope, accessor: string): any;
+export declare function collectScopes(fn: () => void): Scope[];
 export declare function skipScope(): number;
 export declare function findBranchWithKey(scope: Scope, key: string): BranchScope | undefined;
 export declare function destroyBranch(branch: BranchScope): void;

package/dist/dom.d.ts

@@ -1,5 +1,5 @@
 export { attrTag, attrTags } from "./common/attr-tag";
-export { _assert_hoist, _assert_init } from "./common/errors";
+export { _assert_hoist } from "./common/errors";
 export { forIn, forOf, forTo, forUntil } from "./common/for";
 export { _call } from "./common/helpers";
 export { $signal, $signalReset } from "./dom/abort-signal";
@@ -12,5 +12,6 @@ export { _load_event_trigger, _load_idle_trigger, _load_media_trigger, _load_rac
 export { _enable_catch, run } from "./dom/queue";
 export { _content, _content_closures, _content_resume } from "./dom/renderer";
 export { _el, _resume, _var_resume, init, initEmbedded, ready, } from "./dom/resume";
+export { _assert_init } from "./dom/scope";
 export { _child_setup, _closure, _closure_get, _const, _el_read, _for_closure, _hoist, _hoist_resume, _id, _if_closure, _let, _let_change, _or, _return, _return_change, _script, _var, _var_change, } from "./dom/signals";
 export { _template } from "./dom/template";