@torpor/view 0.4.8 → 0.4.10

package/src/compile/build/client/buildAwaitNode.ts

@@ -16,9 +16,8 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, 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);
 
 	// Filter non-control branches (spaces)
 	const branches = node.children.filter((n) => isControlNode(n)) as ControlNode[];
@@ -55,29 +54,31 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b
 
 	// Use an incrementing token to make sure only the last request gets handled
 	// TODO: This might have unforeseen consequences
-	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;
 
 	// Build the waiting branch before anything happens
-	buildAwaitBranch(awaitBranch, status, b, parentName, stateName, creatorsName, index++);
+	buildAwaitBranch(awaitBranch, status, b, parentName, regionName, indexName, index++);
 
 	b.append(`
-		${awaitVarsName}.t_token++;
+		${tokenName}++;
 		((t_token) => {`);
 
 	// TODO: replaceForVarNames is going to throw mapping out
@@ -95,8 +96,8 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b
 		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(`}
 		})`);
 
@@ -111,23 +112,13 @@ export default function buildAwaitNode(node: ControlNode, status: BuildStatus, b
 		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;`);
-	//addPushDevBoundary("branch", "`branch ${index}`", status, b);
-	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("");
@@ -138,13 +129,21 @@ function buildAwaitBranch(
 	status: BuildStatus,
 	b: Builder,
 	parentName: string,
-	stateName: string,
-	creatorsName: string,
+	regionName: string,
+	indexName: string,
 	index: number,
 ) {
+	b.append(`if (!t_run_branch(${regionName}, ${indexName}, ${index})) return;`);
+
 	if (node.children.length > 0) {
-		let beforeParam = node.fragment !== undefined ? "t_before" : "_";
-		b.append(`${creatorsName}[${index}] = (${beforeParam}) => {`);
+		// NOTE: for await branches, we need to push the control region again,
+		// because it will have been popped by the time the `then` or `catch`
+		// branches are hit
+		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");
 
@@ -159,10 +158,9 @@ function buildAwaitBranch(
 
 		buildAddFragment(node, status, b, parentName, "t_before");
 
-		b.append("};");
-	} else {
-		b.append(`${creatorsName}[${index}] = (_) => {};`);
+		b.append("t_pop_region(t_old_region);");
+		b.append("t_pop_region(t_old_control_region);");
 	}
 
-	b.append(`${stateName}.index = ${index};`);
+	b.append(`${indexName} = ${index};`);
 }

package/src/compile/build/client/buildCode.ts

@@ -148,14 +148,6 @@ function buildTemplate(
 			if (current.contextProps?.length) {
 				b.append(`$context = Object.assign({}, $context);`);
 			}
-
-			// NOTE: We're isolating the user script by setting `context.activeTarget =
-			// null` and then setting it back at the end, but maybe it would be better to
-			// make it so that signals only affect effects that they are under e.g. so
-			// that creating a $state in a component doesn't affect any $runs outside
-			// the component?
-			b.append("$peek(() => { /**/");
-			b.append("");
 		} else if (chunk.script === "/* @render */") {
 			if (current.markup) {
 				// Add the interface
@@ -178,7 +170,6 @@ function buildTemplate(
 			// No styles in the client
 		} else if (chunk.script === "/* @end */") {
 			addPopDevBoundary(status, b);
-			b.append("/**/ });");
 			currentIndex += 1;
 			current = template.components[currentIndex];
 		} else {

package/src/compile/build/client/buildHtmlNode.ts

@@ -18,6 +18,9 @@ export default function buildHtmlNode(node: ControlNode, status: BuildStatus, b:
 
 	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(`
@@ -40,8 +43,13 @@ function buildHtmlBranch(
 ) {
 	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}`;
@@ -61,5 +69,5 @@ function buildHtmlBranch(
 
 	buildAddFragment(node, status, b, parentName, "t_before");
 
-	b.append(`}${status.options.dev === true ? ', "html"' : ""});`);
+	b.append("t_pop_region(t_old_region);");
 }

package/src/compile/build/client/buildIfNode.ts

@@ -17,8 +17,7 @@ export default function buildIfNode(node: ControlNode, status: BuildStatus, b: 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);
 
 	// Filter non-control branches (spaces)
 	const branches = node.children.filter((n) => isControlNode(n)) as ControlNode[];
@@ -35,36 +34,28 @@ export default function buildIfNode(node: ControlNode, status: BuildStatus, b: B
 		branches.push(elseBranch);
 	}
 
-	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++);
+		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;`);
-	//addPushDevBoundary("branch", "`branch ${index}`", status, b);
-	b.append(
-		`t_run_branch(${regionName}, () => ${creatorsName}[index](t_before)${status.options.dev === true ? ", `branch ${index}`" : ""});`,
-	);
-	addPopDevBoundary(status, b);
-	b.append("});");
+	b.append(`}${status.options.dev === true ? `, "runIf"` : ""});`);
 
 	addPopDevBoundary(status, b);
 
@@ -76,16 +67,19 @@ function buildIfBranch(
 	status: BuildStatus,
 	b: Builder,
 	parentName: string,
-	stateName: string,
-	creatorsName: string,
+	regionName: string,
+	indexName: string,
 	index: number,
 ) {
 	// TODO: replaceForVarNames is going to throw mapping out
 	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 !== undefined ? "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");
 
@@ -100,11 +94,9 @@ function buildIfBranch(
 
 		buildAddFragment(node, status, b, parentName, "t_before");
 
-		b.append("};");
-	} else {
-		b.append(`${creatorsName}[${index}] = (_) => {};`);
+		b.append("t_pop_region(t_old_region);");
 	}
 
-	b.append(`${stateName}.index = ${index};`);
+	b.append(`${indexName} = ${index};`);
 	b.append("}");
 }

package/src/compile/build/client/buildReplaceNode.ts

@@ -19,6 +19,9 @@ export default function buildReplaceNode(node: ControlNode, status: BuildStatus,
 
 	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(`
@@ -42,7 +45,12 @@ function buildReplaceBranch(
 	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");
 
@@ -57,5 +65,5 @@ function buildReplaceBranch(
 
 	buildAddFragment(node, status, b, parentName, "t_before");
 
-	b.append(`}${status.options.dev === true ? ', "replace"' : ""});`);
+	b.append("t_pop_region(t_old_region);");
 }

package/src/compile/build/client/buildSwitchNode.ts

@@ -15,8 +15,7 @@ export default function buildSwitchNode(node: ControlNode, status: BuildStatus,
 	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);
 
 	// Filter non-control branches (spaces)
 	const branches = node.children.filter((n) => isControlNode(n)) as ControlNode[];
@@ -33,42 +32,33 @@ export default function buildSwitchNode(node: ControlNode, status: BuildStatus,
 		branches.push(defaultBranch);
 	}
 
-	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) => {`);
 
 	// TODO: replaceForVarNames is going to throw mapping out
 	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++);
+		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;`);
-	//addPushDevBoundary("branch", "`branch ${index}`", status, b);
-	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("");
@@ -79,16 +69,20 @@ function buildSwitchBranch(
 	status: BuildStatus,
 	b: Builder,
 	parentName: string,
-	stateName: string,
-	creatorsName: string,
+	regionName: string,
+	indexName: string,
 	index: number,
 ) {
 	// TODO: replaceForVarNames is going to throw mapping out
 	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 !== undefined ? "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");
 
@@ -103,13 +97,11 @@ function buildSwitchBranch(
 
 		buildAddFragment(node, status, b, parentName, "t_before");
 
-		b.append("};");
-	} else {
-		b.append(`${creatorsName}[${index}] = (_) => {};`);
+		b.append("t_pop_region(t_old_region);");
 	}
 
-	b.append(`${stateName}.index = ${index};`);
 	b.append(`
+			${indexName} = ${index};
 			break;
 		}`);
 }

package/src/render/runControl.ts

@@ -12,6 +12,7 @@ export default function runControl(
 	region: Region,
 	anchor: Node | null,
 	create: (anchor: Node | null) => void,
+	name?: string,
 ): void {
 	let first = true;
 
@@ -24,7 +25,7 @@ export default function runControl(
 		create(anchor);
 
 		popRegion(oldRegion);
-	});
+	}, name);
 
 	// If we're mounting, the anchor will be the one that is passed in, but if
 	// we're hydrating it will be after the active branch's HTML elements, so we

package/src/render/runControlBranch.ts

@@ -1,25 +1,18 @@
 import type Region from "../types/Region";
 import clearRegion from "./clearRegion";
-import newRegion from "./newRegion";
-import popRegion from "./popRegion";
-import pushRegion from "./pushRegion";
 
-export default function runControlBranch(region: Region, create: () => void, name?: string): void {
+export default function runControlBranch(region: Region, oldIndex: number, index: number): boolean {
+	if (oldIndex === index) return false;
+
 	// HACK: This is bad -- it means that the parent region has been cleared,
 	// but that should have cleared the effect that runs this child region??
 	// TODO: Look into this further...
-	if (region.depth === -2) return;
+	if (region.depth === -2) return false;
 
 	// Branching regions have exactly one child -- remove it if necessary
 	if (region.nextRegion !== null && region.nextRegion.depth > region.depth) {
-		clearRegion(region.nextRegion!);
+		clearRegion(region.nextRegion);
 	}
 
-	const branchRegion = newRegion(name);
-	const oldRegion = pushRegion(branchRegion, true);
-
-	// Run the create function
-	create();
-
-	popRegion(oldRegion);
+	return true;
 }

package/src/watch/proxyGet.ts

@@ -71,6 +71,10 @@ export default function proxyGet(
 			if (arrayWrapper[key] !== undefined) {
 				return arrayWrapper[key](data, target, key);
 			}
+		} else {
+			// If it's a non-existent property we still set up a subscription so
+			// that if its value is set to something it will re-run the effect
+			trackProxySignal(data, key);
 		}
 	} else if (signal.type === SIGNAL_TYPE) {
 		// If a property is being accessed in the course of setting up an

package/src/watch/proxySet.ts

@@ -11,7 +11,7 @@ export default function proxySet(
 	value: any,
 	receiver: any,
 ): boolean {
-	//console.log(`object set '${String(key)}' to '`, value, `' on`, target);
+	//console.log(`object set '${String(key)}' to`, value, "on", target);
 	//console.log(`object set '${String(key)}'`);
 
 	// Only do things if the value has changed

package/test/attributes/components/output/Attributes-client.ts

@@ -16,7 +16,6 @@ export default function Attributes(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ): void {
-	$peek(() => { /**/
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -34,5 +33,4 @@ export default function Attributes(
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);
 
-	/**/ });
 }

package/test/attributes/components/output/Disappearing-client.ts

@@ -16,7 +16,6 @@ export default function Attributes(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ): void {
-	$peek(() => { /**/
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -34,5 +33,4 @@ export default function Attributes(
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);
 
-	/**/ });
 }

package/test/attributes/components/temp/{Attributes-client-b9b98b8c868cc4f13484ae2237d59ef9491dfbf3.ts → Attributes-client-63bd49fe97fb8d775ef291fa19b8f03075020f63.ts}

@@ -16,7 +16,6 @@ export default function Attributes(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ): void {
-	$peek(() => { /**/
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -34,5 +33,4 @@ export default function Attributes(
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);
 
-	/**/ });
 }

package/test/attributes/components/temp/{Disappearing-client-b9b98b8c868cc4f13484ae2237d59ef9491dfbf3.ts → Disappearing-client-63bd49fe97fb8d775ef291fa19b8f03075020f63.ts}

@@ -16,7 +16,6 @@ export default function Attributes(
 	// @ts-ignore
 	$slots?: Record<string, SlotRender>
 ): void {
-	$peek(() => { /**/
 
 	/* User interface */
 	const t_fragments: DocumentFragment[] = [];
@@ -34,5 +33,4 @@ export default function Attributes(
 	t_add_fragment(t_fragment_0, $parent, $anchor, t_text_1);
 	t_next(t_text_1);
 
-	/**/ });
 }