@torpor/view 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @torpor/view
 
+## 0.3.2
+
+### Patch Changes
+
+- f4716c5: Fix: isolate components
+- 1253f7a: Fix: handle unclosed elements
+- 6268e00: Fix: run @if, @switch and @await with cached signals
+- f2fb547: Fix: better type definition generation
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/compile.cjs

@@ -779,6 +779,7 @@ function buildAwaitNode(node, status, b) {
 	const parentName = node.parentName;
 	const rangeName = nextVarName("await_range", status);
 	const stateName = "$" + nextVarName("await_state", status);
+	const creatorsName = nextVarName("await_creators", status);
 	const awaitVarsName = nextVarName("await_vars", status);
 	const branches = node.children.filter((n) => isControlNode(n));
 	let awaitBranch = branches.find((n) => n.operation === "@await");
@@ -817,11 +818,13 @@ function buildAwaitNode(node, status, b) {
 	b.append(`
 		/* @await */
 		const ${rangeName} = t_range();
-		let ${stateName} = $watch({ creator: (_: Node | null) => {} });`);
+		let ${stateName} = $watch({ index: -1 });
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
 	b.append(`
 		let ${awaitVarsName} = { t_token: 0 };
 		$run(function runAwait() {`);
-	buildAwaitBranch(awaitBranch, status, b, parentName, stateName);
+	let index = 0;
+	buildAwaitBranch(awaitBranch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`${awaitVarsName}.t_token++;
 			((t_token) => {`);
 	awaitBranch.range.start += 7;
@@ -829,27 +832,27 @@ function buildAwaitNode(node, status, b) {
 	thenBranch.range.start -= 1;
 	addMappedText(".then((", replaceForVarNames(thenVar, status), ") => {", thenBranch.range, status, b);
 	b.append(`if (t_token === ${awaitVarsName}.t_token) {`);
-	buildAwaitBranch(thenBranch, status, b, parentName, stateName);
+	buildAwaitBranch(thenBranch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`}
 		})`);
 	catchBranch.range.start -= 1;
 	addMappedText(".catch((", replaceForVarNames(catchVar, status), ") => {", catchBranch.range, status, b);
 	b.append(`
 		if (t_token === ${awaitVarsName}.t_token) {`);
-	buildAwaitBranch(catchBranch, status, b, parentName, stateName);
+	buildAwaitBranch(catchBranch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`}
 				});
 			})(${awaitVarsName}.t_token);
 		});`);
 	b.append(`
 		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${stateName}.creator(t_before));
+			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
 		});`);
 	b.append("");
 }
-function buildAwaitBranch(node, status, b, parentName, stateName) {
+function buildAwaitBranch(node, status, b, parentName, stateName, creatorsName, index) {
 	if (node.children.length > 0) {
-		b.append(`${stateName}.creator = (t_before) => {`);
+		b.append(`${creatorsName}[${index}] = (t_before) => {`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -859,7 +862,8 @@ function buildAwaitBranch(node, status, b, parentName, stateName) {
 		status.fragmentStack.pop();
 		buildAddFragment(node, status, b, parentName, "t_before");
 		b.append("};");
-	} else b.append(`${stateName}.creator = (_) => {};`);
+	} else b.append(`${creatorsName}[${index}] = (_) => {};`);
+	b.append(`${stateName}.index = ${index};`);
 }
 
 //#endregion
@@ -999,6 +1003,7 @@ function buildIfNode(node, status, b) {
 	const parentName = node.parentName || anchorName + ".parentNode";
 	const rangeName = nextVarName("if_range", status);
 	const stateName = "$" + nextVarName("if_state", status);
+	const creatorsName = nextVarName("if_creators", status);
 	const branches = node.children.filter((n) => isControlNode(n));
 	if (branches.findIndex((n) => n.operation === "@else") === -1) branches.push({
 		type: "control",
@@ -1019,20 +1024,22 @@ function buildIfNode(node, status, b) {
 	b.append(`
 		/* @if */
 		const ${rangeName} = t_range();
-		let ${stateName} = $watch({ creator: (_: Node | null) => {} });`);
+		let ${stateName} = $watch({ index: -1 });
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
 	b.append(`$run(function runIf() {`);
-	for (let branch of branches) buildIfBranch(branch, status, b, parentName, stateName);
+	let index = 0;
+	for (let branch of branches) buildIfBranch(branch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`});`);
 	b.append(`
 		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${stateName}.creator(t_before));
+			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
 		});`);
 	b.append("");
 }
-function buildIfBranch(node, status, b, parentName, stateName) {
+function buildIfBranch(node, status, b, parentName, stateName, creatorsName, index) {
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
 	if (node.children.length > 0) {
-		b.append(`${stateName}.creator = (t_before) => {`);
+		b.append(`${creatorsName}[${index}] = (t_before) => {`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -1042,7 +1049,8 @@ function buildIfBranch(node, status, b, parentName, stateName) {
 		status.fragmentStack.pop();
 		buildAddFragment(node, status, b, parentName, "t_before");
 		b.append("};");
-	} else b.append(`${stateName}.creator = (_) => {};`);
+	} else b.append(`${creatorsName}[${index}] = (_) => {};`);
+	b.append(`${stateName}.index = ${index};`);
 	b.append("}");
 }
 
@@ -1097,6 +1105,7 @@ function buildSwitchNode(node, status, b) {
 	const parentName = node.parentName;
 	const rangeName = nextVarName("switch_range", status);
 	const stateName = "$" + nextVarName("switch_state", status);
+	const creatorsName = nextVarName("switch_creators", status);
 	const branches = node.children.filter((n) => isControlNode(n));
 	if (branches.findIndex((n) => n.operation === "@default") === -1) branches.push({
 		type: "control",
@@ -1117,24 +1126,26 @@ function buildSwitchNode(node, status, b) {
 	b.append(`
 		/* @switch */
 		const ${rangeName} = t_range();
-		let ${stateName} = $watch({ creator: (_: Node | null) => {} });`);
+		let ${stateName} = $watch({ index: -1 });
+		let ${creatorsName}: ((t_before: Node | null) => void)[] = [];`);
 	b.append(`
 		$run(function runSwitch() {`);
+	let index = 0;
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
-	for (let branch of branches) buildSwitchBranch(branch, status, b, parentName, stateName);
+	for (let branch of branches) buildSwitchBranch(branch, status, b, parentName, stateName, creatorsName, index++);
 	b.append(`
 		}
 	});`);
 	b.append(`
 		t_run_control(${rangeName}, ${anchorName}, (t_before) => {
-			t_run_branch(${rangeName}, () => ${stateName}.creator(t_before));
+			t_run_branch(${rangeName}, () => ${creatorsName}[${stateName}.index](t_before));
 		});`);
 	b.append("");
 }
-function buildSwitchBranch(node, status, b, parentName, stateName) {
+function buildSwitchBranch(node, status, b, parentName, stateName, creatorsName, index) {
 	addMappedText("", `${replaceForVarNames(node.statement, status)}`, " {", node.range, status, b);
 	if (node.children.length > 0) {
-		b.append(`${stateName}.creator = (t_before) => {`);
+		b.append(`${creatorsName}[${index}] = (t_before) => {`);
 		buildFragment(node, status, b, parentName, "t_before");
 		status.fragmentStack.push({
 			fragment: node.fragment,
@@ -1144,7 +1155,8 @@ function buildSwitchBranch(node, status, b, parentName, stateName) {
 		status.fragmentStack.pop();
 		buildAddFragment(node, status, b, parentName, "t_before");
 		b.append("};");
-	} else b.append(`${stateName}.creator = (_) => {};`);
+	} else b.append(`${creatorsName}[${index}] = (_) => {};`);
+	b.append(`${stateName}.index = ${index};`);
 	b.append(`
 			break;
 		}`);
@@ -1713,7 +1725,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");
-	if (/\$peek\b/.test(script)) imports.add("$peek");
+	imports.add("$peek");
 	if (/\$batch\b/.test(script)) imports.add("$batch");
 	let currentIndex = 0;
 	let current = template.components[0];
@@ -1729,6 +1741,7 @@ function buildTemplate(template, map, imports, b, options) {
 	} else if (chunk.script === ") /* @return_type */ {") b.append("): void {");
 	else if (chunk.script === "/* @start */") {
 		if (current.contextProps?.length) b.append(`$context = Object.assign({}, $context);`);
+		b.append("$peek(() => { /**/");
 		b.append("");
 	} else if (chunk.script === "/* @render */") {
 		if (current.markup) {
@@ -1749,6 +1762,7 @@ function buildTemplate(template, map, imports, b, options) {
 			status.inHead = false;
 		}
 	} else if (chunk.script === "/* @style */") {} else if (chunk.script === "/* @end */") {
+		b.append("/**/ });");
 		currentIndex += 1;
 		current = template.components[currentIndex];
 	} else {
@@ -2426,17 +2440,14 @@ function build(template, options) {
 function buildType(template, options) {
 	let b = new Builder();
 	b.append(`import { type SlotRender } from "${options?.renderFolder || "@torpor/view"}";`);
-	for (let component of template.components) {
+	for (let component of template.components) if (component.exported) {
 		b.append("");
+		if (component.propsType) {
+			b.append(component.propsType);
+			b.append("");
+		}
 		b.append(`
-			/**
-			 * Mounts or hydrates the component into the supplied parent node.
-			 * @param $parent -- The parent node.
-			 * @param $anchor -- The node to mount the component before.
-			 * @param $props -- The values that have been passed into the component as properties.
-			 * @param $context -- Values that have been passed into the component from its ancestors.
-			 * @param $slots -- Functions for rendering children into slot nodes within the component.
-			 */
+			${component.documentation ?? ""}
 			${component.default ? "declare" : "export declare"} function ${component.name}(
 				$parent: ParentNode,
 				$anchor: Node | null,
@@ -2456,6 +2467,45 @@ function isSpaceNode(node) {
 	return isTextNode(node) && isSpace(node.content);
 }
 
+//#endregion
+//#region src/compile/parse/utils/accept.ts
+/**
+* Checks whether the source at the current parse position matches the supplied
+* string
+*
+* @param value The string to check
+* @param status The parse status
+* @param advance (Optional) If true, advances the parse position past the
+* checked string (defaults to true)
+*
+* @returns True if the supplied string was found at the current parse position
+*/
+function accept(value, status, advance = true) {
+	if (status.source.substring(status.i, status.i + value.length) == value) {
+		status.i += advance ? value.length : 0;
+		return true;
+	}
+	return false;
+}
+
+//#endregion
+//#region src/compile/parse/parseInlineScript.ts
+function parseInlineScript(status) {
+	const start = status.i;
+	let braceCount = 0;
+	while (status.i < status.source.length) if (accept("{", status)) braceCount += 1;
+	else if (accept("}", status)) if (braceCount > 0) braceCount -= 1;
+	else return status.source.substring(start, status.i - 1);
+	else if (accept("//", status)) status.i = status.source.indexOf("\n", status.i) + 1;
+	else if (accept("/*", status)) status.i = status.source.indexOf("*/", status.i) + 2;
+	else if (accept("\"", status) || accept("'", status)) {
+		const char = status.source[status.i - 1];
+		status.i = endOfString(char, status.source, status.i - 1) + 1;
+	} else if (accept("`", status)) status.i = endOfTemplateString(status.source, status.i - 1) + 1;
+	else status.i += 1;
+	return "";
+}
+
 //#endregion
 //#region src/compile/utils/trimStart.ts
 /**
@@ -2520,45 +2570,6 @@ function isFullyReactive(text) {
 	return text.trim().startsWith("{") && text.trim().endsWith("}");
 }
 
-//#endregion
-//#region src/compile/parse/utils/accept.ts
-/**
-* Checks whether the source at the current parse position matches the supplied
-* string
-*
-* @param value The string to check
-* @param status The parse status
-* @param advance (Optional) If true, advances the parse position past the
-* checked string (defaults to true)
-*
-* @returns True if the supplied string was found at the current parse position
-*/
-function accept(value, status, advance = true) {
-	if (status.source.substring(status.i, status.i + value.length) == value) {
-		status.i += advance ? value.length : 0;
-		return true;
-	}
-	return false;
-}
-
-//#endregion
-//#region src/compile/parse/parseInlineScript.ts
-function parseInlineScript(status) {
-	const start = status.i;
-	let braceCount = 0;
-	while (status.i < status.source.length) if (accept("{", status)) braceCount += 1;
-	else if (accept("}", status)) if (braceCount > 0) braceCount -= 1;
-	else return status.source.substring(start, status.i - 1);
-	else if (accept("//", status)) status.i = status.source.indexOf("\n", status.i) + 1;
-	else if (accept("/*", status)) status.i = status.source.indexOf("*/", status.i) + 2;
-	else if (accept("\"", status) || accept("'", status)) {
-		const char = status.source[status.i - 1];
-		status.i = endOfString(char, status.source, status.i - 1) + 1;
-	} else if (accept("`", status)) status.i = endOfTemplateString(status.source, status.i - 1) + 1;
-	else status.i += 1;
-	return "";
-}
-
 //#endregion
 //#region src/compile/parse/utils/isAlphaNumericChar.ts
 /**
@@ -2652,6 +2663,7 @@ function parseTagAttributes(status) {
 		if (accept("@//", status)) status.i = status.source.indexOf("\n", status.i) + 1;
 		else if (accept("@/*", status)) status.i = status.source.indexOf("*/", status.i) + 2;
 		else if (accept("/>", status, false) || accept(">", status, false)) break;
+		else if (accept("<", status, false) || accept("@", status, false) || accept("}", status, false)) break;
 		else {
 			const attribute = parseAttribute(status);
 			attributes.push(attribute);
@@ -3401,11 +3413,14 @@ function parseCode(source) {
 				return {
 					start: c.start,
 					name: c.name,
+					exported: c.exported,
 					default: c.default,
+					documentation: c.documentation,
 					params: c.params,
 					markup: c.markup,
 					head: c.head,
 					style: c.style,
+					propsType: c.propsType,
 					props: c.props,
 					contextProps: c.contextProps,
 					slotProps: c.slotProps,
@@ -3416,17 +3431,31 @@ function parseCode(source) {
 	};
 }
 function parseComponentStart(status) {
-	let source = status.source.substring(0, status.i);
+	let source = status.source.substring(status.marker, status.i);
+	let exported = /export\s+(default\s+)*(function\s+|const\s+)*$/.test(source);
 	let def = /export\s+default\s+(function\s+|const\s+)*$/.test(source);
 	let isConst = /const\s+$/.test(source);
 	let isAnon = /export default\s+$/.test(source);
-	status.components.push({
-		start: status.i,
-		name: consumeAlphaNumeric(status),
+	let componentStart = status.i;
+	let name = consumeAlphaNumeric(status);
+	const current = {
+		start: componentStart,
+		name,
+		exported,
 		default: def
-	});
-	const current = status.components.at(-1);
-	if (!current) return;
+	};
+	status.components.push(current);
+	let presource = source.substring(0, status.i).trimEnd();
+	let lastNewline = presource.lastIndexOf("\n");
+	if (lastNewline !== -1) {
+		presource = presource.substring(0, lastNewline).trimEnd();
+		if (presource.endsWith("*/")) {
+			for (let i = presource.length; i >= 0; i--) if (presource.substring(i, i + 3) === "/**") {
+				current.documentation = presource.substring(i);
+				break;
+			}
+		}
+	}
 	let start = -1;
 	let end = -1;
 	let level = 0;
@@ -3458,6 +3487,29 @@ function parseComponentStart(status) {
 		}
 	});
 	current.params = status.source.substring(start, end).trim() || void 0;
+	const paramsMatch = current.params?.match(/\$props:\s*([$A-Za-z0-9]+)/);
+	if (paramsMatch) {
+		let propsTypeName = paramsMatch[1];
+		let propsTypeStart = status.source.search(/* @__PURE__ */ new RegExp(`interface\\s+${propsTypeName}`));
+		if (propsTypeStart === -1) propsTypeStart = status.source.search(/* @__PURE__ */ new RegExp(`type\\s+${propsTypeName}`));
+		if (propsTypeStart !== -1) {
+			let bracesStart = status.source.indexOf("{", propsTypeStart);
+			if (bracesStart !== -1) {
+				const status2 = {
+					source: status.source,
+					i: bracesStart + 1,
+					marker: 0,
+					level: 0,
+					imports: [],
+					script: [],
+					components: [],
+					errors: []
+				};
+				const propsType = parseInlineScript(status2);
+				if (propsType) current.propsType = `${status.source.substring(propsTypeStart, bracesStart)}{${propsType}}`;
+			}
+		}
+	}
 	status.marker = end;
 	status.i = status.marker;
 	accept(")", status);