@marko/runtime-tags 6.1.13 → 6.1.15

package/dist/common/errors.d.ts

@@ -1,8 +1,11 @@
+export declare function assertValidAttrValue(name: string, value: unknown): void;
+export declare function assertValidTextValue(value: unknown): void;
+export declare function assertValidLoopKey(key: unknown, seenKeys?: Set<unknown>): void;
+export declare function assertValidAttrName(name: string): void;
 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;

package/dist/common/helpers.d.ts

@@ -1,5 +1,6 @@
 export declare const htmlAttrNameReg: RegExp;
 export declare const userAttrNameReg: RegExp;
+export declare function getWrongAttrSuggestion(name: string): string | undefined;
 export declare function _call<T>(fn: (v: T) => unknown, v: T): T;
 export declare function stringifyClassObject(name: string, value: unknown): string;
 export declare function stringifyStyleObject(name: string, value: unknown): string;

package/dist/debug/dom.js

@@ -21,8 +21,137 @@ function* attrTagIterator() {
 	yield* this[rest];
 }
 //#endregion
+//#region src/common/helpers.ts
+const htmlAttrNameReg = /^[^a-z_]|[^a-z0-9._:-]/i;
+const knownWrongAttrs = {
+	className: "class",
+	classList: "class",
+	htmlFor: "for",
+	acceptCharset: "accept-charset",
+	httpEquiv: "http-equiv",
+	defaultValue: "value",
+	defaultChecked: "checked",
+	dangerouslySetInnerHTML: "$!{html}",
+	key: "<for by>",
+	ref: "<tag/ref>",
+	"v-if": "<if>",
+	"v-else": "<else>",
+	"v-else-if": "<else if>",
+	"v-for": "<for>",
+	"v-show": "<if>",
+	"v-model": "value:=state",
+	"v-bind": "...attrs",
+	"v-html": "$!{html}",
+	"v-text": "${text}"
+};
+function getWrongAttrSuggestion(name) {
+	const exact = knownWrongAttrs[name];
+	if (exact) return exact;
+	const colon = name.indexOf(":");
+	if (colon > 0) {
+		const rest = name.slice(colon + 1);
+		switch (name.slice(0, colon)) {
+			case "class": return `class={ ${rest}: condition }`;
+			case "style": return `style={ ${rest}: value }`;
+			case "on":
+			case "v-on": return `on${rest.charAt(0).toUpperCase()}${rest.slice(1)}`;
+			case "bind":
+			case "v-model": return `${rest}:=state`;
+			case "v-bind": return rest;
+		}
+	}
+}
+function _call(fn, v) {
+	fn(v);
+	return v;
+}
+function stringifyClassObject(name, value) {
+	return value ? name : "";
+}
+function stringifyStyleObject(name, value) {
+	return value || value === 0 ? name + ":" + value : "";
+}
+const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
+	let str = "";
+	let sep = "";
+	let part;
+	if (val) if (typeof val !== "object") str += val;
+	else if (Array.isArray(val)) for (const v of val) {
+		part = toDelimitedString(v, delimiter, stringify);
+		if (part) {
+			str += sep + part;
+			sep = delimiter;
+		}
+	}
+	else for (const name in val) {
+		part = stringify(name, val[name]);
+		if (part) {
+			str += sep + part;
+			sep = delimiter;
+		}
+	}
+	return str;
+};
+function isEventHandler(name) {
+	return /^on[A-Z-]/.test(name);
+}
+function getEventHandlerName(name) {
+	return name[2] === "-" ? name.slice(3) : name.slice(2).toLowerCase();
+}
+function isNotVoid(value) {
+	return value != null && value !== false;
+}
+function normalizeDynamicRenderer(value) {
+	if (value) {
+		if (typeof value === "string") return value;
+		const normalized = value.content || value.default || value;
+		if (!((typeof normalized === "object" || typeof normalized === "function") && "id" in normalized)) {
+			if (value.content) throw new Error(`A dynamic tag must be a string tag name (like \`"div"\`) or a Marko template/component, but received an object whose \`content\` is not a template/component.`);
+			if (typeof value !== "object" && typeof value !== "function") throw new Error(`A dynamic tag must be a string tag name (like \`"div"\`) or a Marko template/component, but received a ${typeof value}.`);
+		}
+		if ("id" in normalized) return normalized;
+	}
+}
+//#endregion
 //#region src/common/errors.ts
 const lowercaseEventHandlerReg = /^on[a-z]/;
+function assertValidAttrValue(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.`);
+	if (typeof value === "function") {
+		if (name === "content" || /^on/i.test(name) || /Change$/.test(name)) return;
+		throw new Error(`The \`${name}\` attribute cannot be a function.`);
+	}
+	const unrenderable = describeUnrenderable(value);
+	if (unrenderable) throw new Error(`The \`${name}\` attribute cannot be ${unrenderable}.`);
+}
+function assertValidTextValue(value) {
+	const unrenderable = describeUnrenderable(value);
+	if (unrenderable) throw new Error(`Text content cannot be ${unrenderable}.`);
+}
+function describeUnrenderable(value) {
+	if (typeof value === "symbol") return "a symbol";
+	if (typeof value === "object" && value !== null) {
+		let stringified;
+		try {
+			stringified = `${value}`;
+		} catch {
+			stringified = "[object Object]";
+		}
+		if (/^\[object \w+\]$/.test(stringified)) return stringified === "[object Promise]" ? "a promise (use the `<await>` tag to render its resolved value)" : stringified === "[object Object]" ? "a plain object (it would render as `[object Object]`)" : `a value that renders as \`${stringified}\``;
+	}
+}
+function assertValidLoopKey(key, seenKeys) {
+	if (typeof key !== "string" && typeof key !== "number") throw new Error(`A \`<for>\` tag's \`by\` attribute must return a string or number for each item, but received ${key === null ? "null" : `type "${typeof key}"`}.`);
+	if (seenKeys) {
+		if (seenKeys.has(key)) throw new Error(`A \`<for>\` tag's \`by\` attribute must return a unique value for each item, but \`${key}\` was used more than once.`);
+		seenKeys.add(key);
+	}
+}
+function assertValidAttrName(name) {
+	if (htmlAttrNameReg.test(name)) throw new Error(`Invalid attribute name: ${JSON.stringify(name)}`);
+	const suggestion = getWrongAttrSuggestion(name);
+	if (suggestion) throw new Error(`\`${name}\` is not a valid attribute, did you mean \`${suggestion}\`?`);
+}
 function _el_read_error() {
 	throw new Error("Element references can only be read in scripts and event handlers.");
 }
@@ -47,9 +176,6 @@ 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}".`);
 }
@@ -89,56 +215,6 @@ function forUntil(until, from, step, cb) {
 	for (let steps = (until - start) / delta, i = 0; i < steps; i++) cb(start + i * delta);
 }
 //#endregion
-//#region src/common/helpers.ts
-const htmlAttrNameReg = /^[^a-z_]|[^a-z0-9._:-]/i;
-function _call(fn, v) {
-	fn(v);
-	return v;
-}
-function stringifyClassObject(name, value) {
-	return value ? name : "";
-}
-function stringifyStyleObject(name, value) {
-	return value || value === 0 ? name + ":" + value : "";
-}
-const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
-	let str = "";
-	let sep = "";
-	let part;
-	if (val) if (typeof val !== "object") str += val;
-	else if (Array.isArray(val)) for (const v of val) {
-		part = toDelimitedString(v, delimiter, stringify);
-		if (part) {
-			str += sep + part;
-			sep = delimiter;
-		}
-	}
-	else for (const name in val) {
-		part = stringify(name, val[name]);
-		if (part) {
-			str += sep + part;
-			sep = delimiter;
-		}
-	}
-	return str;
-};
-function isEventHandler(name) {
-	return /^on[A-Z-]/.test(name);
-}
-function getEventHandlerName(name) {
-	return name[2] === "-" ? name.slice(3) : name.slice(2).toLowerCase();
-}
-function isNotVoid(value) {
-	return value != null && value !== false;
-}
-function normalizeDynamicRenderer(value) {
-	if (value) {
-		if (typeof value === "string") return value;
-		const normalized = value.content || value.default || value;
-		if ("id" in normalized) return normalized;
-	}
-}
-//#endregion
 //#region src/common/meta.ts
 const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
 //#endregion
@@ -919,6 +995,7 @@ function _attr_select_value(scope, nodeAccessor, value, valueChange) {
 	assertHandlerIsFunction("valueChange", valueChange);
 	scope["ControlledHandler:" + nodeAccessor] = valueChange;
 	scope["ControlledType:" + nodeAccessor] = valueChange ? 3 : 5;
+	if (valueChange) pendingEffects.unshift(() => assertSelectValueMatchesOption(el, normalizedValue, value), scope);
 	if (valueChange && existing) pendingEffects.unshift(() => setSelectValue(el, normalizedValue, multiple), scope);
 	else _attr_select_value_default(scope, nodeAccessor, normalizedValue);
 }
@@ -961,6 +1038,13 @@ function setSelectValue(el, value, multiple) {
 function getSelectValue(el, multiple) {
 	return multiple ? Array.from(el.selectedOptions, (opt) => opt.value) : el.value;
 }
+function assertSelectValueMatchesOption(el, normalizedValue, value) {
+	const multiple = Array.isArray(normalizedValue);
+	if (multiple ? normalizedValue.some(Boolean) : normalizedValue) {
+		for (const opt of el.options) if (multiple ? normalizedValue.includes(opt.value) : opt.value === normalizedValue) return;
+		console.error("A controlled `<select>`'s `value` has no matching `<option>`:", value);
+	}
+}
 function _attr_details_or_dialog_open_default(scope, nodeAccessor, open) {
 	if (scope["#Gen"] === runId) scope[nodeAccessor].open = isNotVoid(open);
 }
@@ -1025,10 +1109,11 @@ function updateList(arr, val, push) {
 //#endregion
 //#region src/dom/dom.ts
 function _to_text(value) {
+	assertValidTextValue(value);
 	return value || value === 0 ? value + "" : "";
 }
 function _attr(element, name, value) {
-	assertValidEventHandlerAttr(name, value);
+	assertValidAttrValue(name, value);
 	setAttribute(element, name, normalizeAttrValue(value));
 }
 function setAttribute(element, name, value) {
@@ -1106,6 +1191,8 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
 	let events = scope["EventAttributes:" + nodeAccessor];
 	let skip;
 	for (const name in events) events[name] = 0;
+	scope["ControlledType:" + nodeAccessor] = 5;
+	scope["ControlledHandler:" + nodeAccessor] = 0;
 	switch (el.tagName) {
 		case "INPUT":
 			if ("checked" in nextAttrs || "checkedChange" in nextAttrs) _attr_input_checked(scope, nodeAccessor, nextAttrs.checked, nextAttrs.checkedChange);
@@ -1144,7 +1231,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
 				_attr_style(el, value);
 				break;
 			default:
-				if (htmlAttrNameReg.test(name)) throw new Error(`Invalid attribute name: ${JSON.stringify(name)}`);
+				assertValidAttrName(name);
 				if (isEventHandler(name)) (events ||= scope["EventAttributes:" + nodeAccessor] = {})[getEventHandlerName(name)] = value;
 				else if (!(skip?.test(name) || name === "content" && el.tagName !== "META")) _attr(el, name, value);
 				break;
@@ -1481,9 +1568,7 @@ function loop(forEach) {
 			let hasPotentialMoves;
 			var seenKeys = /* @__PURE__ */ new Set();
 			forEach(value, (key, args) => {
-				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);
+				assertValidLoopKey(key, seenKeys);
 				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);
 				else branch = createAndSetupBranch(scope["$global"], renderer, scope, parentNode);

package/dist/debug/dom.mjs

@@ -19,8 +19,137 @@ function* attrTagIterator() {
 	yield* this[rest];
 }
 //#endregion
+//#region src/common/helpers.ts
+const htmlAttrNameReg = /^[^a-z_]|[^a-z0-9._:-]/i;
+const knownWrongAttrs = {
+	className: "class",
+	classList: "class",
+	htmlFor: "for",
+	acceptCharset: "accept-charset",
+	httpEquiv: "http-equiv",
+	defaultValue: "value",
+	defaultChecked: "checked",
+	dangerouslySetInnerHTML: "$!{html}",
+	key: "<for by>",
+	ref: "<tag/ref>",
+	"v-if": "<if>",
+	"v-else": "<else>",
+	"v-else-if": "<else if>",
+	"v-for": "<for>",
+	"v-show": "<if>",
+	"v-model": "value:=state",
+	"v-bind": "...attrs",
+	"v-html": "$!{html}",
+	"v-text": "${text}"
+};
+function getWrongAttrSuggestion(name) {
+	const exact = knownWrongAttrs[name];
+	if (exact) return exact;
+	const colon = name.indexOf(":");
+	if (colon > 0) {
+		const rest = name.slice(colon + 1);
+		switch (name.slice(0, colon)) {
+			case "class": return `class={ ${rest}: condition }`;
+			case "style": return `style={ ${rest}: value }`;
+			case "on":
+			case "v-on": return `on${rest.charAt(0).toUpperCase()}${rest.slice(1)}`;
+			case "bind":
+			case "v-model": return `${rest}:=state`;
+			case "v-bind": return rest;
+		}
+	}
+}
+function _call(fn, v) {
+	fn(v);
+	return v;
+}
+function stringifyClassObject(name, value) {
+	return value ? name : "";
+}
+function stringifyStyleObject(name, value) {
+	return value || value === 0 ? name + ":" + value : "";
+}
+const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
+	let str = "";
+	let sep = "";
+	let part;
+	if (val) if (typeof val !== "object") str += val;
+	else if (Array.isArray(val)) for (const v of val) {
+		part = toDelimitedString(v, delimiter, stringify);
+		if (part) {
+			str += sep + part;
+			sep = delimiter;
+		}
+	}
+	else for (const name in val) {
+		part = stringify(name, val[name]);
+		if (part) {
+			str += sep + part;
+			sep = delimiter;
+		}
+	}
+	return str;
+};
+function isEventHandler(name) {
+	return /^on[A-Z-]/.test(name);
+}
+function getEventHandlerName(name) {
+	return name[2] === "-" ? name.slice(3) : name.slice(2).toLowerCase();
+}
+function isNotVoid(value) {
+	return value != null && value !== false;
+}
+function normalizeDynamicRenderer(value) {
+	if (value) {
+		if (typeof value === "string") return value;
+		const normalized = value.content || value.default || value;
+		if (!((typeof normalized === "object" || typeof normalized === "function") && "id" in normalized)) {
+			if (value.content) throw new Error(`A dynamic tag must be a string tag name (like \`"div"\`) or a Marko template/component, but received an object whose \`content\` is not a template/component.`);
+			if (typeof value !== "object" && typeof value !== "function") throw new Error(`A dynamic tag must be a string tag name (like \`"div"\`) or a Marko template/component, but received a ${typeof value}.`);
+		}
+		if ("id" in normalized) return normalized;
+	}
+}
+//#endregion
 //#region src/common/errors.ts
 const lowercaseEventHandlerReg = /^on[a-z]/;
+function assertValidAttrValue(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.`);
+	if (typeof value === "function") {
+		if (name === "content" || /^on/i.test(name) || /Change$/.test(name)) return;
+		throw new Error(`The \`${name}\` attribute cannot be a function.`);
+	}
+	const unrenderable = describeUnrenderable(value);
+	if (unrenderable) throw new Error(`The \`${name}\` attribute cannot be ${unrenderable}.`);
+}
+function assertValidTextValue(value) {
+	const unrenderable = describeUnrenderable(value);
+	if (unrenderable) throw new Error(`Text content cannot be ${unrenderable}.`);
+}
+function describeUnrenderable(value) {
+	if (typeof value === "symbol") return "a symbol";
+	if (typeof value === "object" && value !== null) {
+		let stringified;
+		try {
+			stringified = `${value}`;
+		} catch {
+			stringified = "[object Object]";
+		}
+		if (/^\[object \w+\]$/.test(stringified)) return stringified === "[object Promise]" ? "a promise (use the `<await>` tag to render its resolved value)" : stringified === "[object Object]" ? "a plain object (it would render as `[object Object]`)" : `a value that renders as \`${stringified}\``;
+	}
+}
+function assertValidLoopKey(key, seenKeys) {
+	if (typeof key !== "string" && typeof key !== "number") throw new Error(`A \`<for>\` tag's \`by\` attribute must return a string or number for each item, but received ${key === null ? "null" : `type "${typeof key}"`}.`);
+	if (seenKeys) {
+		if (seenKeys.has(key)) throw new Error(`A \`<for>\` tag's \`by\` attribute must return a unique value for each item, but \`${key}\` was used more than once.`);
+		seenKeys.add(key);
+	}
+}
+function assertValidAttrName(name) {
+	if (htmlAttrNameReg.test(name)) throw new Error(`Invalid attribute name: ${JSON.stringify(name)}`);
+	const suggestion = getWrongAttrSuggestion(name);
+	if (suggestion) throw new Error(`\`${name}\` is not a valid attribute, did you mean \`${suggestion}\`?`);
+}
 function _el_read_error() {
 	throw new Error("Element references can only be read in scripts and event handlers.");
 }
@@ -45,9 +174,6 @@ 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}".`);
 }
@@ -87,56 +213,6 @@ function forUntil(until, from, step, cb) {
 	for (let steps = (until - start) / delta, i = 0; i < steps; i++) cb(start + i * delta);
 }
 //#endregion
-//#region src/common/helpers.ts
-const htmlAttrNameReg = /^[^a-z_]|[^a-z0-9._:-]/i;
-function _call(fn, v) {
-	fn(v);
-	return v;
-}
-function stringifyClassObject(name, value) {
-	return value ? name : "";
-}
-function stringifyStyleObject(name, value) {
-	return value || value === 0 ? name + ":" + value : "";
-}
-const toDelimitedString = function toDelimitedString(val, delimiter, stringify) {
-	let str = "";
-	let sep = "";
-	let part;
-	if (val) if (typeof val !== "object") str += val;
-	else if (Array.isArray(val)) for (const v of val) {
-		part = toDelimitedString(v, delimiter, stringify);
-		if (part) {
-			str += sep + part;
-			sep = delimiter;
-		}
-	}
-	else for (const name in val) {
-		part = stringify(name, val[name]);
-		if (part) {
-			str += sep + part;
-			sep = delimiter;
-		}
-	}
-	return str;
-};
-function isEventHandler(name) {
-	return /^on[A-Z-]/.test(name);
-}
-function getEventHandlerName(name) {
-	return name[2] === "-" ? name.slice(3) : name.slice(2).toLowerCase();
-}
-function isNotVoid(value) {
-	return value != null && value !== false;
-}
-function normalizeDynamicRenderer(value) {
-	if (value) {
-		if (typeof value === "string") return value;
-		const normalized = value.content || value.default || value;
-		if ("id" in normalized) return normalized;
-	}
-}
-//#endregion
 //#region src/common/meta.ts
 const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
 //#endregion
@@ -917,6 +993,7 @@ function _attr_select_value(scope, nodeAccessor, value, valueChange) {
 	assertHandlerIsFunction("valueChange", valueChange);
 	scope["ControlledHandler:" + nodeAccessor] = valueChange;
 	scope["ControlledType:" + nodeAccessor] = valueChange ? 3 : 5;
+	if (valueChange) pendingEffects.unshift(() => assertSelectValueMatchesOption(el, normalizedValue, value), scope);
 	if (valueChange && existing) pendingEffects.unshift(() => setSelectValue(el, normalizedValue, multiple), scope);
 	else _attr_select_value_default(scope, nodeAccessor, normalizedValue);
 }
@@ -959,6 +1036,13 @@ function setSelectValue(el, value, multiple) {
 function getSelectValue(el, multiple) {
 	return multiple ? Array.from(el.selectedOptions, (opt) => opt.value) : el.value;
 }
+function assertSelectValueMatchesOption(el, normalizedValue, value) {
+	const multiple = Array.isArray(normalizedValue);
+	if (multiple ? normalizedValue.some(Boolean) : normalizedValue) {
+		for (const opt of el.options) if (multiple ? normalizedValue.includes(opt.value) : opt.value === normalizedValue) return;
+		console.error("A controlled `<select>`'s `value` has no matching `<option>`:", value);
+	}
+}
 function _attr_details_or_dialog_open_default(scope, nodeAccessor, open) {
 	if (scope["#Gen"] === runId) scope[nodeAccessor].open = isNotVoid(open);
 }
@@ -1023,10 +1107,11 @@ function updateList(arr, val, push) {
 //#endregion
 //#region src/dom/dom.ts
 function _to_text(value) {
+	assertValidTextValue(value);
 	return value || value === 0 ? value + "" : "";
 }
 function _attr(element, name, value) {
-	assertValidEventHandlerAttr(name, value);
+	assertValidAttrValue(name, value);
 	setAttribute(element, name, normalizeAttrValue(value));
 }
 function setAttribute(element, name, value) {
@@ -1104,6 +1189,8 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
 	let events = scope["EventAttributes:" + nodeAccessor];
 	let skip;
 	for (const name in events) events[name] = 0;
+	scope["ControlledType:" + nodeAccessor] = 5;
+	scope["ControlledHandler:" + nodeAccessor] = 0;
 	switch (el.tagName) {
 		case "INPUT":
 			if ("checked" in nextAttrs || "checkedChange" in nextAttrs) _attr_input_checked(scope, nodeAccessor, nextAttrs.checked, nextAttrs.checkedChange);
@@ -1142,7 +1229,7 @@ function attrsInternal(scope, nodeAccessor, nextAttrs) {
 				_attr_style(el, value);
 				break;
 			default:
-				if (htmlAttrNameReg.test(name)) throw new Error(`Invalid attribute name: ${JSON.stringify(name)}`);
+				assertValidAttrName(name);
 				if (isEventHandler(name)) (events ||= scope["EventAttributes:" + nodeAccessor] = {})[getEventHandlerName(name)] = value;
 				else if (!(skip?.test(name) || name === "content" && el.tagName !== "META")) _attr(el, name, value);
 				break;
@@ -1479,9 +1566,7 @@ function loop(forEach) {
 			let hasPotentialMoves;
 			var seenKeys = /* @__PURE__ */ new Set();
 			forEach(value, (key, args) => {
-				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);
+				assertValidLoopKey(key, seenKeys);
 				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);
 				else branch = createAndSetupBranch(scope["$global"], renderer, scope, parentNode);