@torpor/view 0.4.5 → 0.4.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @torpor/view
 
+## 0.4.7
+
+### Patch Changes
+
+- 3cc2168: Fix: ignore null event attributes
+- 13f2afb: Fix: more HTML variable types
+
+## 0.4.6
+
+### Patch Changes
+
+- ebef5ae: Fix: map head element attributes
+- f4a85c3: Fix: type errors in control statements
+- 986ea9e: Fix: map @html params
+- b2ae05b: Fix: map component attributes => props
+- b8c8122: Fix: assignment assertions in shortcut attributes
+- 4c80139: Fix: map user-supplied $props
+
 ## 0.4.5
 
 ### Patch Changes

package/dist/compile.cjs

@@ -487,7 +487,14 @@ function declareComponentFragmentVars(fragment, node, path, status, b, parentNam
 function elementTypeName(node) {
 	switch (node.tagName.toLowerCase()) {
 		case "div":
-		case "input": return `HTML${node.tagName.substring(0, 1).toUpperCase() + node.tagName.substring(1)}Element`;
+		case "span":
+		case "input":
+		case "select":
+		case "option":
+		case "button":
+		case "form": return `HTML${node.tagName.substring(0, 1).toUpperCase() + node.tagName.substring(1)}Element`;
+		case "a": return "HTMLAnchorElement";
+		case "img": return "HTMLImageElement";
 		case "textarea": return "HTMLTextAreaElement";
 	}
 	return "HTMLElement";
@@ -710,11 +717,12 @@ function buildComponentNode(node, status, b, root = false) {
 		let props = [];
 		let runs = [];
 		let bindingRuns = [];
-		for (let { name, value, reactive, fullyReactive } of node.attributes) if (name === "self" && node.tagName === "@component") {} else if (name.startsWith("&") && value != null && fullyReactive) {
+		for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@component") {} else if (name.startsWith("&") && value != null && fullyReactive) {
 			name = name.substring(1);
 			props.push({
 				name,
-				value
+				value,
+				span
 			});
 			runs.push(`${propsName}["${name}"] = ${value};`);
 			bindingRuns.push(`${value} = ${propsName}["${name}"];`);
@@ -725,7 +733,8 @@ function buildComponentNode(node, status, b, root = false) {
 			value = `t_class(${params.join(", ")})`;
 			props.push({
 				name,
-				value
+				value,
+				span
 			});
 			runs.push(`${propsName}["${name}"] = ${value};`);
 		} else if (name === "style" && value != null) {
@@ -733,20 +742,28 @@ function buildComponentNode(node, status, b, root = false) {
 			value = `t_style(${value})`;
 			props.push({
 				name,
-				value
+				value,
+				span
 			});
 			runs.push(`${propsName}["${name}"] = ${value};`);
 		} else if (value != null) {
 			props.push({
 				name,
-				value
+				value,
+				span
 			});
 			if (reactive) runs.push(`${propsName}["${name}"] = ${value};`);
 		} else props.push({
 			name,
-			value: "true"
+			value: "true",
+			span
 		});
-		b.append(`const ${propsName} = $watch({ ${replaceForVarNames(props.map((p) => `${p.name}: ${p.value}`).join(", "), status)} });`);
+		b.append(`const ${propsName} = $watch({`);
+		for (let p of props) {
+			let value = replaceForVarNames(p.value, status);
+			addMappedText(`${p.name}: `, value, ",", p.span, status, b);
+		}
+		b.append("});");
 		if (runs.length) buildRun("setProps", replaceForVarNames(runs.join("\n"), status), status, b);
 		if (bindingRuns.length) buildRun("setBindings", replaceForVarNames(bindingRuns.join("\n"), status), status, b);
 		if (root) {
@@ -820,7 +837,7 @@ function trimMatched(text, startChar, endChar) {
 //#endregion
 //#region src/compile/build/client/buildAwaitNode.ts
 function buildAwaitNode(node, status, b) {
-	const anchorName = node.varName;
+	const anchorName = node.varName ?? "null";
 	const parentName = node.parentName;
 	const regionName = nextVarName("await_region", status);
 	const stateName = "$" + nextVarName("await_state", status);
@@ -900,7 +917,8 @@ function buildAwaitNode(node, status, b) {
 }
 function buildAwaitBranch(node, status, b, parentName, stateName, creatorsName, index) {
 	if (node.children.length > 0) {
-		b.append(`${creatorsName}[${index}] = (t_before) => {`);
+		let beforeParam = node.fragment !== void 0 ? "t_before" : "_";
+		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -914,22 +932,6 @@ function buildAwaitBranch(node, status, b, parentName, stateName, creatorsName,
 	b.append(`${stateName}.index = ${index};`);
 }
 
-//#endregion
-//#region src/compile/utils/trimEnd.ts
-/**
-* Trims a char from the end of the supplied text
-*
-* @param text The text to trim
-* @param char The char to remove from the end of the text
-*
-* @returns The text without the char on the end
-*/
-function trimEnd(text, char) {
-	let end = text.length;
-	while (text[end - 1] === char) end -= 1;
-	return text.substring(0, end);
-}
-
 //#endregion
 //#region src/compile/build/client/buildForNode.ts
 const forLoopRegex = /for\s*\((.+?);.*?;.*?\)/;
@@ -937,12 +939,12 @@ const forLoopVarsRegex = /(?:let\s+|var\s+){0,1}([^\s,;+=]+)(?:\s*=\s*[^,;]+){0,
 const forOfRegex = /for\s*\(\s*(?:let\s*|var\s*){0,1}(.+?)\s+(?:of|in).*?\)/;
 function buildForNode(node, status, b) {
 	const parentName = node.parentName;
-	const anchorName = node.varName;
+	const anchorName = node.varName ?? "null";
 	node = node.children[0];
 	const forVarNames = [];
-	const forIndexMatch = node.statement.match(forLoopRegex);
-	if (forIndexMatch) {
-		const forVarMatches = forIndexMatch[1].matchAll(forLoopVarsRegex);
+	const forLoopMatch = node.statement.match(forLoopRegex);
+	if (forLoopMatch) {
+		const forVarMatches = forLoopMatch[1].matchAll(forLoopVarsRegex);
 		for (let match of forVarMatches) forVarNames.push(match[1]);
 	} else {
 		const forOfMatch = node.statement.match(forOfRegex);
@@ -959,9 +961,15 @@ function buildForNode(node, status, b) {
 	const newItemName = nextVarName("new_item", status);
 	const itemName = nextVarName("item", status);
 	const beforeName = nextVarName("before", status);
+	let keyStatement = "";
 	const key = node.children.find((n) => n.type === "control" && n.operation === "@key");
-	let keyStatement = key ? key.statement : "";
-	if (keyStatement) keyStatement = trimEnd(keyStatement.substring(keyStatement.indexOf("=") + 1).trim(), ";");
+	if (key !== void 0) {
+		let matches = key.statement.match(/^(\s*@*key\s*=\s*)(.+?)\s*;*\s*$/);
+		if (matches) {
+			key.span.start += matches[1].length;
+			keyStatement = matches[2];
+		}
+	}
 	status.imports.add("t_region");
 	status.imports.add("t_run_list");
 	status.imports.add("t_list_item");
@@ -980,10 +988,12 @@ function buildForNode(node, status, b) {
 			let ${previousItemName} = ${regionName};
 			let ${nextItemName} = ${regionName}.nextRegion;`);
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
-	let params = [`{ ${forVarNames.join(",\n")} }`, keyStatement || "undefined"];
-	if (status.options.dev === true) params.push(`"for item"`);
+	b.append(`let ${newItemName} = t_list_item(`);
+	b.append(`{ ${forVarNames.join(", ")} },`);
+	if (key !== void 0) addMappedText("", `${keyStatement || "undefined"}`, ",", key.span, status, b);
+	if (status.options.dev === true) b.append(`"for item"`);
+	b.append(");");
 	b.append(`
-			let ${newItemName} = t_list_item(${params.join(", ")});
 			${newItemName}.previousRegion = ${previousItemName};
 			${previousItemName}.nextRegion = ${newItemName};
 			${previousItemName} = ${newItemName};
@@ -1048,8 +1058,10 @@ function buildHtmlBranch(node, status, b, parentName, regionName) {
 	b.append(`t_run_branch(${regionName}, () => {`);
 	const templateName = nextVarName("template", status);
 	const fragmentName = `t_fragment_${node.fragment.number}`;
-	b.append(`const ${templateName} = document.createElement("template");`);
-	b.append(`${templateName}.innerHTML = ${node.statement};`);
+	b.append(`let ${templateName} = document.createElement("template");`);
+	node.span.start += 5;
+	node.span.end -= 2;
+	addMappedText("", `${templateName}.innerHTML = ${replaceForVarNames(node.statement, status)};`, "", node.span, status, b);
 	b.append(`let ${fragmentName} = ${templateName}.content.cloneNode(true) as DocumentFragment;`);
 	buildAddFragment(node, status, b, parentName, "t_before");
 	b.append(`}${status.options.dev === true ? ", \"html\"" : ""});`);
@@ -1058,7 +1070,7 @@ function buildHtmlBranch(node, status, b, parentName, regionName) {
 //#endregion
 //#region src/compile/build/client/buildIfNode.ts
 function buildIfNode(node, status, b) {
-	const anchorName = node.varName;
+	const anchorName = node.varName ?? "null";
 	const parentName = node.parentName || anchorName + ".parentNode";
 	const regionName = nextVarName("if_region", status);
 	const stateName = "$" + nextVarName("if_state", status);
@@ -1102,7 +1114,8 @@ function buildIfNode(node, status, b) {
 function buildIfBranch(node, status, b, parentName, stateName, creatorsName, index) {
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 	if (node.children.length > 0) {
-		b.append(`${creatorsName}[${index}] = (t_before) => {`);
+		let beforeParam = node.fragment !== void 0 ? "t_before" : "_";
+		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -1164,7 +1177,7 @@ function maybeAppend$1(text, end) {
 //#endregion
 //#region src/compile/build/client/buildSwitchNode.ts
 function buildSwitchNode(node, status, b) {
-	const anchorName = node.varName;
+	const anchorName = node.varName ?? "null";
 	const parentName = node.parentName;
 	const regionName = nextVarName("switch_region", status);
 	const stateName = "$" + nextVarName("switch_state", status);
@@ -1211,7 +1224,8 @@ function buildSwitchNode(node, status, b) {
 function buildSwitchBranch(node, status, b, parentName, stateName, creatorsName, index) {
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 	if (node.children.length > 0) {
-		b.append(`${creatorsName}[${index}] = (t_before) => {`);
+		let beforeParam = node.fragment !== void 0 ? "t_before" : "_";
+		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -1277,6 +1291,22 @@ function buildControlNode(node, status, b) {
 	}
 }
 
+//#endregion
+//#region src/compile/utils/trimEnd.ts
+/**
+* Trims a char from the end of the supplied text
+*
+* @param text The text to trim
+* @param char The char to remove from the end of the text
+*
+* @returns The text without the char on the end
+*/
+function trimEnd(text, char) {
+	let end = text.length;
+	while (text[end - 1] === char) end -= 1;
+	return text.substring(0, end);
+}
+
 //#endregion
 //#region src/compile/build/client/buildMount.ts
 function buildMount(functionName, functionBody, status, b) {
@@ -1372,11 +1402,12 @@ function buildHeadNode(node, status, b) {
 	status.imports.add("$run");
 	b.append("$run(() => {");
 	b.append(`
-			const t_headel = document.createElement("${node.tagName}");
-			document.getElementsByTagName("head")[0].appendChild(t_headel);`);
-	for (let { name, value } of node.attributes) if (value != null) {
+			const t_head_el = document.createElement("${node.tagName}");
+			document.getElementsByTagName("head")[0].appendChild(t_head_el);`);
+	for (let { name, value, span } of node.attributes) if (value != null) {
 		status.imports.add("t_attribute");
-		b.append(`t_attribute(t_headel, "${name}", ${value});`);
+		value = replaceForVarNames(value, status);
+		addMappedText(`t_attribute(t_head_el, "${name}", `, value, ");", span, status, b);
 	}
 	b.append(`}${status.options.dev === true ? `, "runHead"` : ""});`);
 }
@@ -1770,14 +1801,14 @@ function buildTemplate(template, map, imports, b, options) {
 	for (let chunk of template.script) if (chunk.script === "/* @params */") {
 		if (!first) status = makeStatus(imports, map, current, options);
 		first = false;
-		let params = [
-			`${current.markup ? "$parent" : "_$parent"}: ParentNode`,
-			`${current.markup ? "$anchor" : "_$anchor"}: Node | null`,
-			current.params ?? `${current.props?.length ? "$props: Record<PropertyKey, any>" : "// @ts-ignore\n$props: Record<PropertyKey, any> | undefined"}`,
-			`${current.contextProps?.length ? "$context" : "// @ts-ignore\n$context"}: Record<PropertyKey, any>`,
-			`${current.slotProps?.length ? "$slots" : "// @ts-ignore\n$slots"}?: Record<string, SlotRender>`
-		];
-		b.append(params.join(",\n"));
+		b.append(`
+					${current.markup ? "$parent" : "_$parent"}: ParentNode,
+					${current.markup ? "$anchor" : "_$anchor"}: Node | null,`);
+		if (current.params !== void 0) addMappedText("", current.params, ",", chunk.span, status, b);
+		else b.append(`${current.props?.length ? "$props: Record<PropertyKey, any>" : "// @ts-ignore\n$props: Record<PropertyKey, any> | undefined"},`);
+		b.append(`
+					${current.contextProps?.length ? "$context" : "// @ts-ignore\n$context"}: Record<PropertyKey, any>,
+					${current.slotProps?.length ? "$slots" : "// @ts-ignore\n$slots"}?: Record<string, SlotRender>`);
 	} else if (chunk.script === ") /* @return_type */ {") b.append("): void {");
 	else if (chunk.script === "/* @start */") {
 		addPushDevBoundary("component", current.name || "Anon Component", status, b);
@@ -2727,6 +2758,7 @@ function parseAttribute(status) {
 		valueStart++;
 		valueEnd = valueStart + name.length;
 		name = value.split(".").at(-1);
+		if (name.endsWith("!")) name = name.substring(0, name.length - 1);
 		reactive = fullyReactive = true;
 	}
 	return {
@@ -3488,11 +3520,12 @@ function parseComponentStart(status) {
 	status.script.push({
 		script: "/* @params */",
 		span: {
-			start: 0,
-			end: 0
+			start,
+			end
 		}
 	});
-	current.params = status.source.substring(start, end).trim() || void 0;
+	current.params = status.source.substring(start, end);
+	if (current.params.trim().length === 0) current.params = void 0;
 	const paramsMatch = current.params?.match(/\$props:\s*([$A-Za-z0-9]+)/);
 	if (paramsMatch) {
 		let propsTypeName = paramsMatch[1];