@torpor/view 0.4.9 → 0.4.11

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @torpor/view
 
+## 0.4.11
+
+### Patch Changes
+
+- 195e93b: Fix: only include $peek if used
+
+## 0.4.10
+
+### Patch Changes
+
+- 3aa92de: Fix: run @if, @switch and @await without closures
+- 81a3512: Fix: shorter generated code
+
 ## 0.4.9
 
 ### Patch Changes

package/dist/compile.cjs

@@ -840,9 +840,8 @@ function buildAwaitNode(node, status, b) {
 	const anchorName = node.varName ?? "null";
 	const parentName = node.parentName;
 	const regionName = nextVarName("await_region", status);
-	const stateName = "$" + nextVarName("await_state", status);
-	const creatorsName = nextVarName("await_creators", status);
-	const awaitVarsName = nextVarName("await_vars", status);
+	const indexName = nextVarName("await_index", status);
+	const tokenName = nextVarName("await_token", status);
 	const branches = node.children.filter((n) => isControlNode(n));
 	let awaitBranch = branches.find((n) => n.operation === "@await");
 	if (!awaitBranch) {}
@@ -871,54 +870,51 @@ function buildAwaitNode(node, status, b) {
 	const awaiterName = trimMatched(awaitBranch.statement.substring(5).trim(), "(", ")");
 	const thenVar = trimMatched(thenBranch.statement.substring(4).trim(), "(", ")");
 	const catchVar = trimMatched(catchBranch.statement.substring(5).trim(), "(", ")");
-	status.imports.add("$watch");
-	status.imports.add("$run");
 	status.imports.add("t_region");
 	status.imports.add("t_run_control");
 	status.imports.add("t_run_branch");
+	status.imports.add("t_push_region");
+	status.imports.add("t_pop_region");
 	b.append("");
 	b.append("/* @await */");
 	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
 	b.append(`
 		const ${regionName} = t_region(${status.options.dev === true ? `"await"` : ""});
-		let ${stateName} = $watch({ index: -1 });
-		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];
-		let ${awaitVarsName} = { t_token: 0 };
-		$run(() => {`);
+		let ${tokenName} = 0;
+		let ${indexName} = -1;
+		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
 	let index = 0;
-	buildAwaitBranch(awaitBranch, status, b, parentName, stateName, creatorsName, index++);
+	buildAwaitBranch(awaitBranch, status, b, parentName, regionName, indexName, index++);
 	b.append(`
-		${awaitVarsName}.t_token++;
+		${tokenName}++;
 		((t_token) => {`);
 	awaitBranch.span.start += 7;
 	addMappedText("", replaceForVarNames(awaiterName, status), "", awaitBranch.span, status, b);
 	thenBranch.span.start -= 1;
 	addMappedText(".then((", replaceForVarNames(thenVar, status), ") => {", thenBranch.span, status, b);
-	b.append(`if (t_token === ${awaitVarsName}.t_token) {`);
-	buildAwaitBranch(thenBranch, status, b, parentName, stateName, creatorsName, index++);
+	b.append(`if (t_token === ${tokenName}) {`);
+	buildAwaitBranch(thenBranch, status, b, parentName, regionName, indexName, index++);
 	b.append(`}
 		})`);
 	catchBranch.span.start -= 1;
 	addMappedText(".catch((", replaceForVarNames(catchVar, status), ") => {", catchBranch.span, status, b);
-	b.append(`if (t_token === ${awaitVarsName}.t_token) {`);
-	buildAwaitBranch(catchBranch, status, b, parentName, stateName, creatorsName, index++);
+	b.append(`if (t_token === ${tokenName}) {`);
+	buildAwaitBranch(catchBranch, status, b, parentName, regionName, indexName, index++);
 	b.append(`}
 				});
-			})(${awaitVarsName}.t_token);
+			})(${tokenName});
 		}${status.options.dev === true ? `, "runAwait"` : ""});`);
-	b.append(`
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {
-			const index = ${stateName}.index;`);
-	b.append(`t_run_branch(${regionName}, () => ${creatorsName}[index](t_before)${status.options.dev === true ? ", `branch ${index}`" : ""});`);
-	addPopDevBoundary(status, b);
-	b.append("});");
 	addPopDevBoundary(status, b);
 	b.append("");
 }
-function buildAwaitBranch(node, status, b, parentName, stateName, creatorsName, index) {
+function buildAwaitBranch(node, status, b, parentName, regionName, indexName, index) {
+	b.append(`if (!t_run_branch(${regionName}, ${indexName}, ${index})) return;`);
 	if (node.children.length > 0) {
-		let beforeParam = node.fragment !== void 0 ? "t_before" : "_";
-		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
+		b.append(`
+			const t_new_region = t_region(${status.options.dev === true ? `"await_branch"` : ""});
+			const t_old_control_region = t_push_region(${regionName});
+			const t_old_region = t_push_region(t_new_region, true);
+		`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -927,9 +923,10 @@ function buildAwaitBranch(node, status, b, parentName, stateName, creatorsName,
 		for (let child of node.children) buildNode(child, status, b, parentName, "t_before");
 		status.fragmentStack.pop();
 		buildAddFragment(node, status, b, parentName, "t_before");
-		b.append("};");
-	} else b.append(`${creatorsName}[${index}] = (_) => {};`);
-	b.append(`${stateName}.index = ${index};`);
+		b.append("t_pop_region(t_old_region);");
+		b.append("t_pop_region(t_old_control_region);");
+	}
+	b.append(`${indexName} = ${index};`);
 }
 
 //#endregion
@@ -1043,6 +1040,9 @@ function buildHtmlNode(node, status, b) {
 	node = node.children[0];
 	status.imports.add("t_region");
 	status.imports.add("t_run_control");
+	status.imports.add("t_run_branch");
+	status.imports.add("t_push_region");
+	status.imports.add("t_pop_region");
 	b.append("");
 	b.append(`
 	/* @html */
@@ -1054,8 +1054,12 @@ function buildHtmlNode(node, status, b) {
 }
 function buildHtmlBranch(node, status, b, parentName, regionName) {
 	status.imports.add("t_run_branch");
-	b.append(`${node.statement};`);
-	b.append(`t_run_branch(${regionName}, () => {`);
+	b.append(`${replaceForVarNames(node.statement, status)};`);
+	b.append(`if (!t_run_branch(${regionName}, 0, -1)) return;`);
+	b.append(`
+		const t_new_region = t_region(${status.options.dev === true ? `"html_branch"` : ""});
+		const t_old_region = t_push_region(t_new_region, true);
+	`);
 	const templateName = nextVarName("template", status);
 	const fragmentName = `t_fragment_${node.fragment.number}`;
 	b.append(`let ${templateName} = document.createElement("template");`);
@@ -1064,7 +1068,7 @@ function buildHtmlBranch(node, status, b, parentName, regionName) {
 	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\"" : ""});`);
+	b.append("t_pop_region(t_old_region);");
 }
 
 //#endregion
@@ -1073,8 +1077,7 @@ function buildIfNode(node, status, b) {
 	const anchorName = node.varName ?? "null";
 	const parentName = node.parentName || anchorName + ".parentNode";
 	const regionName = nextVarName("if_region", status);
-	const stateName = "$" + nextVarName("if_state", status);
-	const creatorsName = nextVarName("if_creators", status);
+	const indexName = nextVarName("if_index", status);
 	const branches = node.children.filter((n) => isControlNode(n));
 	if (branches.findIndex((n) => n.operation === "@else") === -1) branches.push({
 		type: "control",
@@ -1086,36 +1089,32 @@ function buildIfNode(node, status, b) {
 			end: 0
 		}
 	});
-	status.imports.add("$watch");
-	status.imports.add("$run");
 	status.imports.add("t_region");
 	status.imports.add("t_run_control");
 	status.imports.add("t_run_branch");
+	status.imports.add("t_push_region");
+	status.imports.add("t_pop_region");
 	b.append("");
 	b.append("/* @if */");
 	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
 	b.append(`
 		const ${regionName} = t_region(${status.options.dev === true ? `"if"` : ""});
-		let ${stateName} = $watch({ index: -1 });
-		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];
-		$run(() => {`);
+		let ${indexName} = -1;
+		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
 	let index = 0;
-	for (let branch of branches) buildIfBranch(branch, status, b, parentName, stateName, creatorsName, index++);
+	for (let branch of branches) buildIfBranch(branch, status, b, parentName, regionName, indexName, index++);
 	b.append(`}${status.options.dev === true ? `, "runIf"` : ""});`);
-	b.append(`
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {
-			const index = ${stateName}.index;`);
-	b.append(`t_run_branch(${regionName}, () => ${creatorsName}[index](t_before)${status.options.dev === true ? ", `branch ${index}`" : ""});`);
-	addPopDevBoundary(status, b);
-	b.append("});");
 	addPopDevBoundary(status, b);
 	b.append("");
 }
-function buildIfBranch(node, status, b, parentName, stateName, creatorsName, index) {
+function buildIfBranch(node, status, b, parentName, regionName, indexName, index) {
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
+	b.append(`if (!t_run_branch(${regionName}, ${indexName}, ${index})) return;`);
 	if (node.children.length > 0) {
-		let beforeParam = node.fragment !== void 0 ? "t_before" : "_";
-		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
+		b.append(`
+			const t_new_region = t_region(${status.options.dev === true ? `"if_branch"` : ""});
+			const t_old_region = t_push_region(t_new_region, true);
+		`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -1124,9 +1123,9 @@ function buildIfBranch(node, status, b, parentName, stateName, creatorsName, ind
 		for (let child of node.children) buildNode(child, status, b, parentName, "t_before");
 		status.fragmentStack.pop();
 		buildAddFragment(node, status, b, parentName, "t_before");
-		b.append("};");
-	} else b.append(`${creatorsName}[${index}] = (_) => {};`);
-	b.append(`${stateName}.index = ${index};`);
+		b.append("t_pop_region(t_old_region);");
+	}
+	b.append(`${indexName} = ${index};`);
 	b.append("}");
 }
 
@@ -1139,6 +1138,9 @@ function buildReplaceNode(node, status, b) {
 	node = node.children[0];
 	status.imports.add("t_region");
 	status.imports.add("t_run_control");
+	status.imports.add("t_run_branch");
+	status.imports.add("t_push_region");
+	status.imports.add("t_pop_region");
 	b.append("");
 	b.append(`
 	/* @replace */
@@ -1151,7 +1153,11 @@ function buildReplaceNode(node, status, b) {
 function buildReplaceBranch(node, status, b, parentName, regionName) {
 	status.imports.add("t_run_branch");
 	b.append(`${replaceForVarNames(node.statement, status)};`);
-	b.append(`t_run_branch(${regionName}, () => {`);
+	b.append(`if (!t_run_branch(${regionName}, 0, -1)) return;`);
+	b.append(`
+		const t_new_region = t_region(${status.options.dev === true ? `"replace_branch"` : ""});
+		const t_old_region = t_push_region(t_new_region, true);
+	`);
 	buildFragment(node, status, b, parentName, "t_before");
 	status.fragmentStack.push({
 		fragment: node.fragment,
@@ -1160,7 +1166,7 @@ function buildReplaceBranch(node, status, b, parentName, regionName) {
 	for (let child of node.children) buildNode(child, status, b, parentName, "t_before");
 	status.fragmentStack.pop();
 	buildAddFragment(node, status, b, parentName, "t_before");
-	b.append(`}${status.options.dev === true ? ", \"replace\"" : ""});`);
+	b.append("t_pop_region(t_old_region);");
 }
 
 //#endregion
@@ -1180,8 +1186,7 @@ function buildSwitchNode(node, status, b) {
 	const anchorName = node.varName ?? "null";
 	const parentName = node.parentName;
 	const regionName = nextVarName("switch_region", status);
-	const stateName = "$" + nextVarName("switch_state", status);
-	const creatorsName = nextVarName("switch_creators", status);
+	const indexName = nextVarName("switch_index", status);
 	const branches = node.children.filter((n) => isControlNode(n));
 	if (branches.findIndex((n) => n.operation === "@default") === -1) branches.push({
 		type: "control",
@@ -1193,39 +1198,35 @@ function buildSwitchNode(node, status, b) {
 			end: 0
 		}
 	});
-	status.imports.add("$watch");
-	status.imports.add("$run");
 	status.imports.add("t_region");
 	status.imports.add("t_run_control");
 	status.imports.add("t_run_branch");
+	status.imports.add("t_push_region");
+	status.imports.add("t_pop_region");
 	b.append("");
 	b.append("/* @switch */");
 	addPushDevBoundary("control", `@${branches[0].statement}`, status, b);
 	b.append(`
 		const ${regionName} = t_region(${status.options.dev === true ? `"switch"` : ""});
-		let ${stateName} = $watch({ index: -1 });
-		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];
-		$run(() => {`);
+		let ${indexName} = -1;
+		t_run_control(${regionName}, ${anchorName}, (t_before) => {`);
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
 	let index = 0;
-	for (let branch of branches) buildSwitchBranch(branch, status, b, parentName, stateName, creatorsName, index++);
+	for (let branch of branches) buildSwitchBranch(branch, status, b, parentName, regionName, indexName, index++);
 	b.append(`
 		}
 	}${status.options.dev === true ? `, "runSwitch"` : ""});`);
-	b.append(`
-		t_run_control(${regionName}, ${anchorName}, (t_before) => {
-			const index = ${stateName}.index;`);
-	b.append(`t_run_branch(${regionName}, () => ${creatorsName}[index](t_before)${status.options.dev === true ? ", `branch ${index}`" : ""});`);
-	addPopDevBoundary(status, b);
-	b.append("});");
 	addPopDevBoundary(status, b);
 	b.append("");
 }
-function buildSwitchBranch(node, status, b, parentName, stateName, creatorsName, index) {
+function buildSwitchBranch(node, status, b, parentName, regionName, indexName, index) {
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.span, status, b);
+	b.append(`if (!t_run_branch(${regionName}, ${indexName}, ${index})) return;`);
 	if (node.children.length > 0) {
-		let beforeParam = node.fragment !== void 0 ? "t_before" : "_";
-		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
+		b.append(`
+			const t_new_region = t_region(${status.options.dev === true ? `"switch_branch"` : ""});
+			const t_old_region = t_push_region(t_new_region, true);
+		`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -1234,10 +1235,10 @@ function buildSwitchBranch(node, status, b, parentName, stateName, creatorsName,
 		for (let child of node.children) buildNode(child, status, b, parentName, "t_before");
 		status.fragmentStack.pop();
 		buildAddFragment(node, status, b, parentName, "t_before");
-		b.append("};");
-	} else b.append(`${creatorsName}[${index}] = (_) => {};`);
-	b.append(`${stateName}.index = ${index};`);
+		b.append("t_pop_region(t_old_region);");
+	}
 	b.append(`
+			${indexName} = ${index};
 			break;
 		}`);
 }
@@ -1808,7 +1809,7 @@ function buildTemplate(template, map, imports, b, options) {
 	if (/\$run\b/.test(script)) imports.add("$run");
 	if (/\$mount\b/.test(script)) imports.add("$mount");
 	if (/\$unwrap\b/.test(script)) imports.add("$unwrap");
-	imports.add("$peek");
+	if (/\$peek\b/.test(script)) imports.add("$peek");
 	if (/\$batch\b/.test(script)) imports.add("$batch");
 	let currentIndex = 0;
 	let current = template.components[0];
@@ -1829,8 +1830,6 @@ function buildTemplate(template, map, imports, b, options) {
 	else if (chunk.script === "/* @start */") {
 		addPushDevBoundary("component", current.name || "Anon Component", status, b);
 		if (current.contextProps?.length) b.append(`$context = Object.assign({}, $context);`);
-		b.append("$peek(() => { /**/");
-		b.append("");
 	} else if (chunk.script === "/* @render */") {
 		if (current.markup) {
 			b.append("");
@@ -1849,7 +1848,6 @@ function buildTemplate(template, map, imports, b, options) {
 		}
 	} else if (chunk.script === "/* @style */") {} else if (chunk.script === "/* @end */") {
 		addPopDevBoundary(status, b);
-		b.append("/**/ });");
 		currentIndex += 1;
 		current = template.components[currentIndex];
 	} else addMappedText("", chunk.script, "", chunk.span, status, b);