@torpor/view 0.4.12 → 0.4.14

package/dist/{compile.js → compile.mjs}

@@ -299,6 +299,28 @@ function nextVarName(name, status) {
 	return varName;
 }
 
+//#endregion
+//#region src/compile/build/client/addMappedTextWithOffsets.ts
+function addMappedTextWithOffsets(preText, text, postText, spans, offsets, lengths, status, b) {
+	if (status.options.mapped === true) {
+		let mappedStart = b.toString().length + preText.length;
+		let functionBody = preText + text + postText;
+		b.append(functionBody);
+		for (let i = 0; i < spans.length; i++) {
+			let start = mappedStart + offsets[i];
+			let end = start + lengths[i];
+			status.map.push({
+				script: functionBody,
+				source: spans[i],
+				compiled: {
+					start,
+					end
+				}
+			});
+		}
+	} else b.append(preText + text + postText);
+}
+
 //#endregion
 //#region src/compile/build/client/buildAddFragment.ts
 function buildAddFragment(node, status, b, parentName, anchorName) {
@@ -309,19 +331,7 @@ function buildAddFragment(node, status, b, parentName, anchorName) {
 		if (fragment.effects.length > 0) {
 			status.imports.add("$run");
 			b.append("$run(() => {");
-			if (status.options.mapped === true) for (let effect of fragment.effects) for (let i = 0; i < effect.spans.length; i++) {
-				let start = b.toString().length + effect.offsets[i];
-				b.append(effect.functionBody);
-				let end = start + effect.lengths[i];
-				status.map.push({
-					script: effect.functionBody,
-					source: effect.spans[i],
-					compiled: {
-						start,
-						end
-					}
-				});
-			}
+			if (status.options.mapped === true) for (let effect of fragment.effects) addMappedTextWithOffsets("", effect.functionBody, "", effect.spans, effect.offsets, effect.lengths, status, b);
 			else b.append(fragment.effects.map((e) => e.functionBody).join("\n"));
 			b.append(`}${status.options.dev === true ? `, "setAttributes"` : ""});`);
 		}
@@ -704,6 +714,81 @@ function buildRun(functionName, functionBody, status, b) {
 	addPopDevBoundary(status, b);
 }
 
+//#endregion
+//#region src/compile/utils/endOfString.ts
+function endOfString(char, content, start) {
+	for (let j = start + 1; j < content.length; j++) if (content[j] === char && content[j - 1] !== "\\") return j;
+	return content.length;
+}
+
+//#endregion
+//#region src/compile/build/client/getAttributeOffsets.ts
+function getAttributeOffsets(value, span) {
+	value = trimQuotes(value);
+	let spans = [];
+	let offsets = [];
+	let lengths = [];
+	let textContent = "";
+	let reactiveStart = 0;
+	let level = 0;
+	for (let i = 0; i < value.length; i++) {
+		const char = value[i];
+		const nextChar = value[i + 1];
+		if (char === "{") {
+			level++;
+			if (level === 1) {
+				textContent += "${";
+				reactiveStart = textContent.length;
+				spans.push({
+					start: span.start + i + 2,
+					end: -1
+				});
+				offsets.push(reactiveStart + 1);
+				continue;
+			}
+		} else if (char === "}") {
+			level--;
+			if (level === 0) {
+				spans.at(-1).end = span.start + i + 2;
+				lengths.push(textContent.length - reactiveStart);
+				textContent += "}";
+				continue;
+			}
+		} else if (char === "`" && level === 0) textContent += "\\";
+		else if (level > 0) {
+			if (char === "/" && nextChar === "/") {
+				let start = i;
+				i = value.indexOf("\n", i);
+				textContent += value.substring(start, i + 1);
+				continue;
+			} else if (char === "/" && nextChar === "*") {
+				let start = i;
+				i = value.indexOf("*/", i) + 1;
+				textContent += value.substring(start, i + 1);
+				continue;
+			} else if (char === "\"" || char === "'") {
+				let start = i;
+				i = endOfString(char, value, i);
+				textContent += value.substring(start, i + 1);
+				continue;
+			} else if (char === "`") {
+				let start = i;
+				i = endOfTemplateString(value, i);
+				textContent += value.substring(start, i + 1);
+				continue;
+			}
+		}
+		textContent += value[i];
+	}
+	value = `\`${textContent}\``;
+	return {
+		newValue: value,
+		spans,
+		offsets,
+		lengths
+	};
+}
+
 //#endregion
 //#region src/compile/build/client/buildComponentNode.ts
 function buildComponentNode(node, status, b, root = false) {
@@ -716,51 +801,123 @@ function buildComponentNode(node, status, b, root = false) {
 		let props = [];
 		let runs = [];
 		let bindingRuns = [];
-		for (let { name, value, reactive, fullyReactive, span } 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 (value != null && fullyReactive) if (name.startsWith("&")) {
 			name = name.substring(1);
 			props.push({
 				name,
+				preText: "",
 				value,
-				span
+				postText: "",
+				spans: [span],
+				offsets: [],
+				lengths: []
 			});
 			runs.push(`${propsName}["${name}"] = ${value};`);
 			bindingRuns.push(`${value} = ${propsName}["${name}"];`);
-		} else if (name === "class" && value != null) {
+		} else if (name === "class") {
 			status.imports.add("t_class");
 			const params = [value];
 			if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
-			value = `t_class(${params.join(", ")})`;
+			value = params.join(", ");
 			props.push({
 				name,
+				preText: "t_class(",
 				value,
-				span
+				postText: ")",
+				spans: [span],
+				offsets: [],
+				lengths: []
 			});
-			runs.push(`${propsName}["${name}"] = ${value};`);
-		} else if (name === "style" && value != null) {
+			runs.push(`${propsName}["${name}"] = t_class(${value});`);
+		} else if (name === "style") {
 			status.imports.add("t_style");
-			value = `t_style(${value})`;
 			props.push({
 				name,
+				preText: "t_style(",
 				value,
-				span
+				postText: ")",
+				spans: [span],
+				offsets: [],
+				lengths: []
 			});
-			runs.push(`${propsName}["${name}"] = ${value};`);
-		} else if (value != null) {
+			runs.push(`${propsName}["${name}"] = t_style(${value});`);
+		} else {
 			props.push({
 				name,
+				preText: "",
 				value,
-				span
+				postText: "",
+				spans: [span],
+				offsets: [],
+				lengths: []
 			});
-			if (reactive) runs.push(`${propsName}["${name}"] = ${value};`);
-		} else props.push({
+			runs.push(`${propsName}["${name}"] = ${value};`);
+		}
+		else if (value != null && reactive) {
+			const { newValue, spans, offsets, lengths } = getAttributeOffsets(value, span);
+			value = newValue;
+			if (name === "class") {
+				status.imports.add("t_class");
+				const params = [value];
+				if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
+				value = params.join(", ");
+				props.push({
+					name,
+					preText: "t_class(",
+					value,
+					postText: ")",
+					spans,
+					offsets,
+					lengths
+				});
+				runs.push(`${propsName}["${name}"] = t_class(${value});`);
+			} else if (name === "style") {
+				status.imports.add("t_style");
+				props.push({
+					name,
+					preText: "t_style(",
+					value,
+					postText: ")",
+					spans,
+					offsets,
+					lengths
+				});
+				runs.push(`${propsName}["${name}"] = t_style(${value});`);
+			} else {
+				props.push({
+					name,
+					preText: "",
+					value,
+					postText: "",
+					spans,
+					offsets,
+					lengths
+				});
+				runs.push(`${propsName}["${name}"] = ${value};`);
+			}
+		} else if (value != null) props.push({
+			name,
+			preText: "",
+			value,
+			postText: "",
+			spans: [span],
+			offsets: [],
+			lengths: []
+		});
+		else props.push({
 			name,
+			preText: "",
 			value: "true",
-			span
+			postText: "",
+			spans: [span],
+			offsets: [],
+			lengths: []
 		});
 		b.append(`const ${propsName} = $watch({`);
 		for (let p of props) {
 			let value = replaceForVarNames(p.value, status);
-			addMappedText(`${p.name}: `, value, ",", p.span, status, b);
+			if (p.spans.length === 1) addMappedText(`${p.name}: ` + p.preText, value, p.postText + ",", p.spans[0], status, b);
+			else addMappedTextWithOffsets(`${p.name}: ` + p.preText, value, p.postText + ",", p.spans, p.offsets, p.lengths, status, b);
 		}
 		b.append("});");
 		if (runs.length) buildRun("setProps", replaceForVarNames(runs.join("\n"), status), status, b);
@@ -1099,7 +1256,7 @@ function buildIfNode(node, status, b) {
 	b.append(`
 		const ${regionName} = t_region(${status.options.dev === true ? `"if"` : ""});
 		let ${indexName} = -1;
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
+		t_run_control(${regionName}, ${anchorName}, (${status.inHead ? "" : "t_before"}) => {`);
 	let index = 0;
 	for (let branch of branches) buildIfBranch(branch, status, b, parentName, regionName, indexName, index++);
 	b.append(`}${status.options.dev === true ? `, "runIf"` : ""});`);
@@ -1208,7 +1365,7 @@ function buildSwitchNode(node, status, b) {
 	b.append(`
 		const ${regionName} = t_region(${status.options.dev === true ? `"switch"` : ""});
 		let ${indexName} = -1;
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
+		t_run_control(${regionName}, ${anchorName}, (${status.inHead ? "" : "t_before"}) => {`);
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 	let index = 0;
 	for (let branch of branches) buildSwitchBranch(branch, status, b, parentName, regionName, indexName, index++);
@@ -1330,6 +1487,26 @@ function stashRun(fragment, functionStart, value, functionEnd, span, status) {
 	});
 }
 
+//#endregion
+//#region src/compile/build/client/stashRunWithOffsets.ts
+function stashRunWithOffsets(fragment, functionStart, value, functionEnd, spans, offsets, lengths, status) {
+	let functionBody = functionStart + value + functionEnd;
+	for (let i = 0; i < offsets.length; i++) {
+		offsets[i] += functionStart.length;
+		const oldLength = functionBody.length;
+		functionBody = functionBody.substring(0, offsets[i]) + replaceForVarNames(functionBody.substring(offsets[i], offsets[i] + lengths[i]), status) + functionBody.substring(offsets[i] + lengths[i]);
+		const changedLength = functionBody.length - oldLength;
+		lengths[i] += changedLength;
+		for (let j = i + 1; j < offsets.length; j++) offsets[j] += changedLength;
+	}
+	fragment.effects.push({
+		functionBody,
+		spans,
+		offsets,
+		lengths
+	});
+}
+
 //#endregion
 //#region src/compile/build/client/buildElementNode.ts
 function buildElementNode(node, status, b, parentName, root = false) {
@@ -1419,26 +1596,46 @@ function buildElementAttributes$1(node, varName, status, b) {
 		let { value, fullyReactive } = refAttribute;
 		if (value != null && fullyReactive) b.append(`${value} = ${varName};`);
 	}
-	for (let { name, value, reactive, span: range } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && reactive) if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b);
+	for (let { name, value, reactive, fullyReactive, span } of node.attributes) if (name === "self" && node.tagName === "@element") {} else if (name === "&ref") {} else if (value != null && fullyReactive) if (name === "&group") buildBindGroupAttribute(node, varName, value, status, b);
 	else if (name === "&value" || name === "&checked") buildBindAttribute(node, varName, name, value, status, b);
 	else if (name === "onmount") buildMount("elMount", `return (${trimEnd(value.trim(), ";")})(${varName});`, status, b);
-	else if (name.startsWith("on")) buildEventAttribute(varName, name, value, range, status, b);
+	else if (name.startsWith("on")) buildEventAttribute(varName, name, value, span, status, b);
 	else if (name.startsWith("transition")) buildTransitionAttribute(node, varName, name, value, status, b);
 	else if (name === "class") {
 		status.imports.add("t_class");
 		const params = [value];
 		if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
 		const propName = status.ns ? "className.baseVal" : "className";
-		stashRun(fragment, `${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`, params.join(", "), ");", range, status);
+		stashRun(fragment, `${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`, params.join(", "), ");", span, status);
 	} else if (name === "style") {
 		status.imports.add("t_style");
-		stashRun(fragment, `${varName}.setAttribute("style", t_style(`, value, "));", range, status);
+		stashRun(fragment, `${varName}.setAttribute("style", t_style(`, value, "));", span, status);
 	} else if (name.includes("-")) {
 		status.imports.add("t_attribute");
-		stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", range, status);
+		stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
 	} else {
 		status.imports.add("t_attribute");
-		stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", range, status);
+		stashRun(fragment, `t_attribute(${varName}, "${name}", `, value, ");", span, status);
+	}
+	else if (value != null && reactive) {
+		const { newValue, spans, offsets, lengths } = getAttributeOffsets(value, span);
+		value = newValue;
+		if (name === "class") {
+			status.imports.add("t_class");
+			const params = [value];
+			if (node.scopeStyles) params.push(`"torp-${status.styleHash}"`);
+			const propName = status.ns ? "className.baseVal" : "className";
+			stashRunWithOffsets(fragment, `${status.ns ? "// @ts-ignore\n" : ""}${varName}.${propName} = t_class(`, params.join(", "), ");", spans, offsets, lengths, status);
+		} else if (name === "style") {
+			status.imports.add("t_style");
+			stashRunWithOffsets(fragment, `${varName}.setAttribute("style", t_style(`, value, "));", spans, offsets, lengths, status);
+		} else if (name.includes("-")) {
+			status.imports.add("t_attribute");
+			stashRunWithOffsets(fragment, `t_attribute(${varName}, "${name}", `, value, ");", spans, offsets, lengths, status);
+		} else {
+			status.imports.add("t_attribute");
+			stashRunWithOffsets(fragment, `t_attribute(${varName}, "${name}", `, value, ");", spans, offsets, lengths, status);
+		}
 	}
 }
 function buildBindGroupAttribute(node, varName, value, status, b) {
@@ -1602,31 +1799,6 @@ function buildSpecialNode(node, status, b, parentName, root = false) {
 	return "";
 }
 
-//#endregion
-//#region src/compile/utils/endOfString.ts
-function endOfString(char, content, start) {
-	for (let j = start + 1; j < content.length; j++) if (content[j] === char && content[j - 1] !== "\\") return j;
-	return content.length;
-}
-
-//#endregion
-//#region src/compile/build/client/stashRunWithOffsets.ts
-function stashRunWithOffsets(fragment, functionBody, spans, offsets, lengths, status) {
-	for (let i = 0; i < offsets.length; i++) {
-		const oldLength = functionBody.length;
-		functionBody = functionBody.substring(0, offsets[i]) + replaceForVarNames(functionBody.substring(offsets[i], offsets[i] + lengths[i]), status) + functionBody.substring(offsets[i] + lengths[i]);
-		const changedLength = functionBody.length - oldLength;
-		lengths[i] += changedLength;
-		for (let j = i + 1; j < offsets.length; j++) offsets[j] += changedLength;
-	}
-	fragment.effects.push({
-		functionBody,
-		spans,
-		offsets,
-		lengths
-	});
-}
-
 //#endregion
 //#region src/compile/build/client/buildTextNode.ts
 function buildTextNode(node, status) {
@@ -1696,11 +1868,8 @@ function buildTextNode(node, status) {
 			offsetChange = 1;
 		}
 		status.imports.add("t_fmt");
-		let functionBody = `${node.varName}.textContent = `;
-		offsetChange += functionBody.length;
 		offsets.map((_, i) => offsets[i] += offsetChange);
-		functionBody += `${textContent};`;
-		stashRunWithOffsets(fragment, functionBody, node.spans, offsets, lengths, status);
+		stashRunWithOffsets(fragment, `${node.varName}.textContent = `, textContent, ";", node.spans, offsets, lengths, status);
 	}
 }
 
@@ -2268,7 +2437,7 @@ function buildElementAttributes(node, status) {
 	}
 	else if (value != null && reactive) {
 		status.imports.add("t_attr");
-		attributes.push(`${name}="${trimQuotes(value).replaceAll("${", "${t_attr(").replaceAll("}", ")}")}"`);
+		attributes.push(`${name}="${trimQuotes(value).replaceAll("{", "${t_attr(").replaceAll("}", ")}")}"`);
 	} else if (name === "class" && node.scopeStyles) {
 		value = value ? `"${trimQuotes(value)} torp-${status.styleHash}"` : `"torp-${status.styleHash}"`;
 		attributes.push(`${name}="${trimQuotes(value).replaceAll("\"", "&quot;")}"`);
@@ -2718,7 +2887,7 @@ function parseTag(status) {
 	accept("<", status);
 	let closeTag = accept("/", status);
 	consumeSpace(status);
-	let tagStart = status.i;
+	let tagStart = status.i + 1;
 	let snailed = accept("@", status);
 	let tagName = consumeAlphaNumeric(status);
 	let tagEnd = status.i;
@@ -2782,7 +2951,7 @@ function parseAttribute(status) {
 			value = value.substring(1, value.length - 1);
 			valueStart++;
 			valueEnd--;
-		} else if (reactive) value = `\`${trimQuotes(value).replaceAll("{", "${")}\``;
+		}
 	} else if (name.startsWith("{") && name.endsWith("}")) {
 		value = name.substring(1, name.length - 1);
 		valueStart++;
@@ -3799,4 +3968,4 @@ function parse(source) {
 
 //#endregion
 export { build, buildType, parse };
-//# sourceMappingURL=compile.js.map
+//# sourceMappingURL=compile.mjs.map