@marko/runtime-tags 6.1.12 → 6.1.13

package/dist/common/errors.d.ts

@@ -2,6 +2,8 @@ export declare function _el_read_error(): void;
 export declare function _hoist_read_error(): void;
 export declare function _assert_hoist(value: unknown): void;
 export declare function assertExclusiveAttrs(attrs: Record<string, unknown> | undefined, onError?: typeof throwErr): void;
+export declare function assertValidEventHandlerAttr(name: string, value: unknown): void;
+export declare function assertHandlerIsFunction(name: string, value: unknown): void;
 export declare function assertValidTagName(tagName: string): void;
 declare function throwErr(msg: string): void;
 export {};

package/dist/debug/dom.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.`);
 }
@@ -146,6 +153,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;
 }
@@ -793,6 +801,7 @@ 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["#Gen"] < runId) el.checked = normalizedChecked;
@@ -821,6 +830,7 @@ 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["#Gen"] < runId) {
@@ -857,6 +867,7 @@ 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;
@@ -905,6 +916,7 @@ function _attr_select_value(scope, nodeAccessor, value, valueChange) {
 	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);
@@ -954,6 +966,7 @@ function _attr_details_or_dialog_open_default(scope, nodeAccessor, 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["#Gen"] < runId) scope[nodeAccessor].open = normalizedOpen;
@@ -1015,6 +1028,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) {
@@ -1089,8 +1103,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);
@@ -1374,7 +1389,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) {
@@ -1466,7 +1481,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);

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.");
 }
@@ -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.`);
 }
@@ -144,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;
 }
@@ -791,6 +799,7 @@ 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["#Gen"] < runId) el.checked = normalizedChecked;
@@ -819,6 +828,7 @@ 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["#Gen"] < runId) {
@@ -855,6 +865,7 @@ 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;
@@ -903,6 +914,7 @@ function _attr_select_value(scope, nodeAccessor, value, valueChange) {
 	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);
@@ -952,6 +964,7 @@ function _attr_details_or_dialog_open_default(scope, nodeAccessor, 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["#Gen"] < runId) scope[nodeAccessor].open = normalizedOpen;
@@ -1013,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) {
@@ -1087,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);
@@ -1372,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) {
@@ -1464,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);

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.js

@@ -770,7 +770,8 @@ function _attrs_partial_content(scope, nodeAccessor, nextAttrs, skip) {
 	_attrs_partial(scope, nodeAccessor, nextAttrs, skip), _attr_content(scope, nodeAccessor, nextAttrs?.content);
 }
 function attrsInternal(scope, nodeAccessor, nextAttrs) {
-	let el = scope[nodeAccessor], events, skip;
+	let el = scope[nodeAccessor], events = scope["I" + nodeAccessor], skip;
+	for (let 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);
@@ -955,7 +956,7 @@ function _if(nodeAccessor, ...branchesArgs) {
 	let branchAccessor = "D" + nodeAccessor, branches = [], i = 0;
 	for (; i < branchesArgs.length;) branches.push(_content("", branchesArgs[i++], branchesArgs[i++], branchesArgs[i++])());
 	return enableBranches(), (scope, newBranch) => {
-		newBranch !== scope[branchAccessor] && setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
+		newBranch !== (scope[branchAccessor] ?? (scope["A" + nodeAccessor] && 0)) && setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
 function patchDynamicTag(fn) {

package/dist/dom.mjs

@@ -769,7 +769,8 @@ function _attrs_partial_content(scope, nodeAccessor, nextAttrs, skip) {
 	_attrs_partial(scope, nodeAccessor, nextAttrs, skip), _attr_content(scope, nodeAccessor, nextAttrs?.content);
 }
 function attrsInternal(scope, nodeAccessor, nextAttrs) {
-	let el = scope[nodeAccessor], events, skip;
+	let el = scope[nodeAccessor], events = scope["I" + nodeAccessor], skip;
+	for (let 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);
@@ -954,7 +955,7 @@ function _if(nodeAccessor, ...branchesArgs) {
 	let branchAccessor = "D" + nodeAccessor, branches = [], i = 0;
 	for (; i < branchesArgs.length;) branches.push(_content("", branchesArgs[i++], branchesArgs[i++], branchesArgs[i++])());
 	return enableBranches(), (scope, newBranch) => {
-		newBranch !== scope[branchAccessor] && setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
+		newBranch !== (scope[branchAccessor] ?? (scope["A" + nodeAccessor] && 0)) && setConditionalRenderer(scope, nodeAccessor, branches[scope[branchAccessor] = newBranch], createAndSetupBranch);
 	};
 }
 function patchDynamicTag(fn) {

package/dist/translator/index.js

@@ -182,15 +182,15 @@ function isNullableExpr(expr) {
 			case "**=": return false;
 			case "||=":
 			case "??=": return isNullableExpr(expr.right) || isNullableExpr(expr.left);
-			case "&&=": return isNullableExpr(expr.left) && isNullableExpr(expr.right);
+			case "&&=": return isNullableExpr(expr.left) || isNullableExpr(expr.right);
 			default: return true;
 		}
 		case "AwaitExpression": return isNullableExpr(expr.argument);
-		case "ConditionalExpression": return isNullableExpr(expr.consequent) && isNullableExpr(expr.alternate);
+		case "ConditionalExpression": return isNullableExpr(expr.consequent) || isNullableExpr(expr.alternate);
 		case "LogicalExpression": switch (expr.operator) {
 			case "||":
 			case "??": return isNullableExpr(expr.right) || isNullableExpr(expr.left);
-			case "&&": return isNullableExpr(expr.left) && isNullableExpr(expr.right);
+			case "&&": return isNullableExpr(expr.left) || isNullableExpr(expr.right);
 			default: return true;
 		}
 		case "ParenthesizedExpression": return isNullableExpr(expr.expression);
@@ -2807,7 +2807,7 @@ function simplifyFunction(fn) {
 		case "FunctionDeclaration":
 		case "FunctionExpression":
 		case "ArrowFunctionExpression": return fn;
-		default: return _marko_compiler.types.functionExpression(null, fn.params, fn.body, fn.async, fn.generator);
+		default: return _marko_compiler.types.functionExpression(null, fn.params, fn.body, fn.generator, fn.async);
 	}
 }
 //#endregion
@@ -4181,10 +4181,14 @@ var native_tag_default = {
 				}
 				seen[attr.name] = attr;
 				if (injectNonce && attr.name === "nonce") injectNonce = false;
+				if (isEventOrChangeHandler(attr.name)) assertNativeHandlerAttr(tag, attr);
 				if (isEventHandler(attr.name)) {
 					valueExtra.isEffect = true;
 					hasEventHandlers = true;
-				} else if (!evaluate(attr.value).confident) hasDynamicAttributes = true;
+				} else {
+					assertValidNativeEventHandlerAttr(tag, attr);
+					if (!evaluate(attr.value).confident) hasDynamicAttributes = true;
+				}
 			} else if (_marko_compiler.types.isMarkoSpreadAttribute(attr)) {
 				valueExtra.isEffect = true;
 				hasEventHandlers = true;
@@ -4593,6 +4597,23 @@ function isInjectNonceTag(tagName) {
 		default: return false;
 	}
 }
+function assertNativeHandlerAttr(tag, attr) {
+	if ((0, _marko_compiler_babel_utils.computeNode)(attr.value)?.value) throw tag.hub.buildError(attr.value, `The \`${attr.name}\` ${isEventHandler(attr.name) ? "event handler" : "change handler"} on a [native tag](https://markojs.com/docs/reference/native-tag) must be a function or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …).`, Error);
+}
+const lowercaseEventHandlerReg = /^on[a-z]/;
+function assertValidNativeEventHandlerAttr(tag, attr) {
+	if (!lowercaseEventHandlerReg.test(attr.name)) return;
+	const { value } = attr;
+	let invalid = _marko_compiler.types.isFunction(value);
+	if (!invalid) {
+		const { confident, computed } = evaluate(value);
+		invalid = confident && !!computed && typeof computed !== "string";
+	}
+	if (invalid) {
+		const suggestion = "on" + attr.name[2].toUpperCase() + attr.name.slice(3);
+		throw tag.hub.buildError(value, `The \`${attr.name}\` attribute on a [native tag](https://markojs.com/docs/reference/native-tag) must be a string or a falsey value (\`null\`, \`undefined\`, \`false\`, \`0\`, …). To attach an event listener, use the \`${suggestion}\` [event handler attribute](https://markojs.com/docs/reference/event-handling) instead.`, Error);
+	}
+}
 function getCanonicalTagName(tag) {
 	const tagName = getTagName(tag);
 	switch (tagName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marko/runtime-tags",
-  "version": "6.1.12",
+  "version": "6.1.13",
   "description": "Optimized runtime for Marko templates.",
   "keywords": [
     "api",