marko 6.1.13 → 6.1.15

package/dist/debug/html.js

@@ -21,8 +21,136 @@ 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 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 isVoid(value) {
+	return value == null || value === false;
+}
+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 +175,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}".`);
 }
@@ -73,27 +198,32 @@ const DYNAMIC_TAG_SCRIPT_REGISTER_ID = "_dynamicTagScript";
 //#endregion
 //#region src/html/content.ts
 function _unescaped(val) {
+	assertValidTextValue(val);
 	return val ? val + "" : val === 0 ? "0" : "";
 }
 const unsafeXMLReg = /[<&]/g;
 const replaceUnsafeXML = (c) => c === "&" ? "&amp;" : "&lt;";
 const escapeXMLStr = (str) => unsafeXMLReg.test(str) ? str.replace(unsafeXMLReg, replaceUnsafeXML) : str;
 function _escape(val) {
+	assertValidTextValue(val);
 	return val ? escapeXMLStr(val + "") : val === 0 ? "0" : "";
 }
 const unsafeScriptReg = /<\/script/gi;
 const escapeScriptStr = (str) => unsafeScriptReg.test(str) ? str.replace(unsafeScriptReg, "\\x3C/script") : str;
 function _escape_script(val) {
+	assertValidTextValue(val);
 	return val ? escapeScriptStr(val + "") : val === 0 ? "0" : "";
 }
 const unsafeStyleReg = /<\/style/gi;
 const escapeStyleStr = (str) => unsafeStyleReg.test(str) ? str.replace(unsafeStyleReg, "\\3C/style") : str;
 function _escape_style(val) {
+	assertValidTextValue(val);
 	return val ? escapeStyleStr(val + "") : val === 0 ? "0" : "";
 }
 const unsafeCommentReg = />/g;
 const escapeCommentStr = (str) => unsafeCommentReg.test(str) ? str.replace(unsafeCommentReg, "&gt;") : str;
 function _escape_comment(val) {
+	assertValidTextValue(val);
 	return val ? escapeCommentStr(val + "") : val === 0 ? "0" : "";
 }
 //#endregion
@@ -1159,6 +1289,7 @@ function isCircular(parent, ref) {
 }
 function toObjectKey(name) {
 	if (name === "") return "\"\"";
+	if (name === "__proto__") return "[\"__proto__\"]";
 	const startChar = name[0];
 	if (isDigit(startChar)) {
 		if (startChar === "0") {
@@ -1171,7 +1302,7 @@ function toObjectKey(name) {
 }
 function toAccess(accessor) {
 	const start = accessor[0];
-	return start === "\"" || start >= "0" && start <= "9" ? "[" + accessor + "]" : "." + accessor;
+	return start === "[" ? accessor : start === "\"" || start >= "0" && start <= "9" ? "[" + accessor + "]" : "." + accessor;
 }
 function quote(str, startPos) {
 	let result = "";
@@ -1313,55 +1444,6 @@ function patchIteratorNext(proto) {
 	proto.next[kTouchedIterator] = true;
 }
 //#endregion
-//#region src/common/helpers.ts
-const htmlAttrNameReg = /^[^a-z_]|[^a-z0-9._:-]/i;
-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 isVoid(value) {
-	return value == null || value === false;
-}
-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/for.ts
 function forIn(obj, cb) {
 	for (const key in obj) cb(key, obj[key]);
@@ -1404,28 +1486,13 @@ function concat(opt, other) {
 //#endregion
 //#region src/html/for.ts
 function forOfBy(by, item, index) {
-	if (by) {
-		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;
+	return by ? typeof by === "string" ? item[by] : by(item, index) : index;
 }
 function forInBy(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;
+	return by ? by(name, value) : name;
 }
 function forStepBy(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;
+	return by ? by(index) : index;
 }
 //#endregion
 //#region src/html/inlined-runtimes.debug.ts
@@ -1686,20 +1753,31 @@ function _for_in(obj, cb, by, scopeId, accessor, serializeBranch, serializeMarke
 	}) : forIn(obj, cb), scopeId, accessor, serializeBranch, serializeMarker, serializeStateful, parentEndTag, singleNode);
 }
 function _for_to(to, from, step, cb, by, scopeId, accessor, serializeBranch, serializeMarker, serializeStateful, parentEndTag, singleNode) {
-	forBranches(by, (each) => each ? forTo(to, from, step, (i) => {
-		const itemKey = forStepBy(by, i);
-		each(itemKey, itemKey === i, () => cb(i));
-	}) : forTo(to, from, step, cb), scopeId, accessor, serializeBranch, serializeMarker, serializeStateful, parentEndTag, singleNode);
+	forBranches(by, (each) => {
+		let index = 0;
+		return each ? forTo(to, from, step, (value) => {
+			const itemKey = forStepBy(by, value);
+			each(itemKey, itemKey === index++, () => cb(value));
+		}) : forTo(to, from, step, cb);
+	}, scopeId, accessor, serializeBranch, serializeMarker, serializeStateful, parentEndTag, singleNode);
 }
 function _for_until(to, from, step, cb, by, scopeId, accessor, serializeBranch, serializeMarker, serializeStateful, parentEndTag, singleNode) {
-	forBranches(by, (each) => each ? forUntil(to, from, step, (i) => {
-		const itemKey = forStepBy(by, i);
-		each(itemKey, itemKey === i, () => cb(i));
-	}) : forUntil(to, from, step, cb), scopeId, accessor, serializeBranch, serializeMarker, serializeStateful, parentEndTag, singleNode);
+	forBranches(by, (each) => {
+		let index = 0;
+		return each ? forUntil(to, from, step, (value) => {
+			const itemKey = forStepBy(by, value);
+			each(itemKey, itemKey === index++, () => cb(value));
+		}) : forUntil(to, from, step, cb);
+	}, scopeId, accessor, serializeBranch, serializeMarker, serializeStateful, parentEndTag, singleNode);
 }
 function forBranches(by, iterate, scopeId, accessor, serializeBranch, serializeMarker, serializeStateful, parentEndTag, singleNode) {
+	var seenKeys = /* @__PURE__ */ new Set();
 	if (serializeBranch === 0) {
-		iterate(0);
+		if (by) iterate((itemKey, _sameAsIndex, render) => {
+			assertValidLoopKey(itemKey, seenKeys);
+			render();
+		});
+		else iterate(0);
 		writeBranchEnd(scopeId, accessor, serializeStateful, serializeMarker, parentEndTag, singleNode, "");
 		return;
 	}
@@ -1708,13 +1786,9 @@ function forBranches(by, iterate, scopeId, accessor, serializeBranch, serializeM
 	const resumeMarker = serializeMarker !== 0 && (!parentEndTag || serializeStateful !== 0);
 	let flushBranchIds = "";
 	let loopScopes;
-	var seenKeys = /* @__PURE__ */ new Set();
 	iterate((itemKey, sameAsIndex, render) => {
 		const branchId = _peek_scope_id();
-		if (by) {
-			if (seenKeys.has(itemKey)) console.error(`A <for> tag's \`by\` attribute must return a unique value for each item, but a duplicate was found matching:`, itemKey);
-			seenKeys.add(itemKey);
-		}
+		if (by) assertValidLoopKey(itemKey, seenKeys);
 		if (resumeMarker) if (singleNode) flushBranchIds = " " + branchId + flushBranchIds;
 		else {
 			$chunk.writeHTML(state.mark("[", flushBranchIds));
@@ -2386,12 +2460,24 @@ function _attr_style(value) {
 }
 function _attr_option_value(value) {
 	const valueAttr = _attr("value", value);
-	return normalizedValueMatches(getContext(kSelectedValue), value) ? valueAttr + " selected" : valueAttr;
+	if (normalizedValueMatches(getContext(kSelectedValue), value)) {
+		{
+			const matched = getContext(kSelectedValueMatched);
+			if (matched) matched.value = true;
+		}
+		return valueAttr + " selected";
+	}
+	return valueAttr;
 }
 const kSelectedValue = Symbol("selectedValue");
+const kSelectedValueMatched = Symbol("selectedValueMatched");
 function _attr_select_value(scopeId, nodeAccessor, value, valueChange, content) {
 	if (valueChange) writeControlledScope(3, scopeId, nodeAccessor, void 0, valueChange);
-	if (content) withContext(kSelectedValue, value, content);
+	if (content) if (valueChange) {
+		const matched = { value: false };
+		withContext(kSelectedValue, value, () => withContext(kSelectedValueMatched, matched, content));
+		if (!matched.value && (Array.isArray(value) ? value.some((v) => normalizeStrAttrValue(v) !== "") : normalizeStrAttrValue(value) !== "")) console.error("A controlled `<select>`'s `value` has no matching `<option>`:", value);
+	} else withContext(kSelectedValue, value, content);
 }
 function _attr_textarea_value(scopeId, nodeAccessor, value, valueChange) {
 	if (valueChange) writeControlledScope(2, scopeId, nodeAccessor, void 0, valueChange);
@@ -2430,7 +2516,6 @@ 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) {
@@ -2475,7 +2560,7 @@ function _attrs(data, nodeAccessor, scopeId, tagName) {
 				break;
 			default:
 				if (name && !(isVoid(value) || skip.test(name) || name === "content" && tagName !== "meta")) {
-					if (htmlAttrNameReg.test(name)) throw new Error(`Invalid attribute name: ${JSON.stringify(name)}`);
+					assertValidAttrName(name);
 					if (isEventHandler(name)) {
 						if (!events) {
 							events = {};
@@ -2517,6 +2602,7 @@ function stringAttr(name, value) {
 	return value && " " + name + attrAssignment(value);
 }
 function nonVoidAttr(name, value) {
+	assertValidAttrValue(name, value);
 	switch (typeof value) {
 		case "string": return " " + name + attrAssignment(value);
 		case "boolean": return " " + name;
@@ -2561,7 +2647,6 @@ const voidElementsReg = /^(?:area|b(?:ase|r)|col|embed|hr|i(?:mg|nput)|link|meta
 let _dynamic_tag = (scopeId, accessor, tag, inputOrArgs, content, inputIsArgs, serializeReason) => {
 	const shouldResume = serializeReason !== 0;
 	const renderer = normalizeDynamicRenderer(tag);
-	if (renderer && typeof renderer !== "function" && typeof renderer !== "string") throw new Error(`Invalid renderer passed for dynamic tag: ${renderer}`);
 	const state = getState();
 	const branchId = _peek_scope_id();
 	let rendered;