@xaendar/compiler 0.4.6 → 0.4.10

package/dist/xaendar-compiler.es.js

@@ -2222,10 +2222,11 @@ function processElement(node, nodeName, parentNode, context) {
 		`const ${nodeName} = document.createElement("${node.tagName}");`,
 		...node.attributes?.map((attr) => {
 			const value = attr.value;
-			return typeof value === "string" ? `${nodeName}.setAttribute('${attr.name}', ${value});` : `effect(() => ${nodeName}.setAttribute('${attr.name}', ${resolveExpression(value.expression, context)}));`;
+			return typeof value === "string" ? `${nodeName}.setAttribute('${attr.name}', ${value});` : `unwatchFns.push(effect(() => ${nodeName}.setAttribute('${attr.name}', ${resolveExpression(value.expression, context)})));`;
 		}) || [],
 		...node.events?.map((event) => `${nodeName}.addEventListener("${event.name}", ($event) => this.${event.handler});`) || [],
 		`${parentNode}.appendChild(${nodeName});`,
+		`unwatchFns.push(() => ${parentNode}.removeChild(${nodeName}));`,
 		...node.children.map((child, i) => processNode(child, i.toString(), nodeName, childrenContext)).flat()
 	];
 }
@@ -2263,6 +2264,8 @@ function processElement(node, nodeName, parentNode, context) {
 * @returns Array of generated code lines.
 */
 function processFor(node, nodeName, parentNode, parentContext) {
+	const mainBlock = new Array();
+	const functionsToProcess = /* @__PURE__ */ new Map();
 	const iterableSource = node.iterableSource;
 	const iterableExpr = parentContext.getIdentifier(iterableSource) ?? `this.${iterableSource}`;
 	const itemsName = getTextIdentifier(parentNode, nodeName, "items");
@@ -2280,13 +2283,23 @@ function processFor(node, nodeName, parentNode, parentContext) {
 		evenName,
 		oddName
 	], parentContext);
-	return [
-		`const ${itemsName} = ${iterableExpr};`,
-		`for (let ${counterName} = 0; ${counterName} < ${itemsName}.length; ${counterName}++) {`,
-		...indent(`const ${node.itemAlias} = ${itemsName}[${counterName}];`, `const ${indexName} = ${counterName};`, `const ${firstName} = ${counterName} === 0;`, `const ${lastName} = ${counterName} === ${itemsName}.length - 1;`, `const ${evenName} = ${counterName} % 2 === 0;`, `const ${oddName} = ${counterName} % 2 !== 0;`),
-		...node.children.flatMap((child, i) => indent(...processNode(child, `${nodeName}_${i}`, parentNode, forContext))),
-		"}"
-	];
+	functionsToProcess.set(`for_${nodeName}`, {
+		code: [
+			`const ${node.itemAlias} = ${itemsName}[${counterName}];`,
+			`const ${indexName} = ${counterName};`,
+			`const ${firstName} = ${counterName} === 0;`,
+			`const ${lastName} = ${counterName} === ${itemsName}.length - 1;`,
+			`const ${evenName} = ${counterName} % 2 === 0;`,
+			`const ${oddName} = !${evenName};`,
+			...node.children.flatMap((child, i) => indent(...processNode(child, `${nodeName}_${i}`, parentNode, forContext)))
+		],
+		args: [itemsName, counterName]
+	});
+	mainBlock.push("(() => {", ...indent("let localUnwatchFns = [];", "const unwatch = () => {", ...indent("localUnwatchFns?.forEach(fn => fn());", "localUnwatchFns = [];", "unwatchFns = unwatchFns.filter(fn => !localUnwatchFns.includes(fn));"), "};", "unwatchFns.push(", ...indent("effect(() => {", ...indent("unwatch();", `const ${itemsName} = ${iterableExpr};`, "Signal.subtle.untrack(() => {", ...indent(`for (let ${counterName} = 0; ${counterName} < ${itemsName}.length; ${counterName}++) {`, ...indent(`localUnwatchFns.push(...this.for_${nodeName}(${counterName}));`, "unwatchFns.push(...localUnwatchFns);"), "}"), "});"), "})"), ");"), "})();");
+	return {
+		mainBlock,
+		fns: functionsToProcess
+	};
 }
 /**
 * Resolves the name that should be used in generated code for a given
@@ -2317,27 +2330,39 @@ function resolveImplicit(node, implicit) {
 */
 function processIf(node, nodeName, parentNode, context) {
 	const ifContext = new Context([], context);
-	const code = [
-		`if (${resolveExpression(node.conditionNode, context)}) {`,
-		...processConsequent(node, nodeName, parentNode, ifContext),
-		"}"
-	];
+	const functionsToProcess = /* @__PURE__ */ new Map();
+	const mainBlock = new Array();
+	const ifKey = `if_${nodeName}`;
+	mainBlock.push(`if (${resolveExpression(node.conditionNode, context)}) {`, ...indent(`checkAndUpdateState(0, this.${ifKey}.bind(this));`), "}");
+	functionsToProcess.set(ifKey, processConsequent(node, nodeName, parentNode, ifContext));
 	let alt = node.alternate;
+	let index = 0;
 	while (alt?.type === ASTNodeType.ElseIf) {
 		const elseIfContext = new Context([], context);
-		code[code.length - 1] += ` else if (${resolveExpression(alt.conditionNode, context)}) {`;
-		code.push(...processConsequent(alt, nodeName, parentNode, elseIfContext), "}");
+		const keyElseIf = `elseIf_${nodeName}_${index}`;
+		mainBlock[mainBlock.length - 1] += ` else if (${resolveExpression(alt.conditionNode, context)}) {`;
+		mainBlock.push(...indent(`checkAndUpdateState(${++index}, this.${keyElseIf}.bind(this));`), "}");
+		functionsToProcess.set(keyElseIf, processConsequent(alt, nodeName, parentNode, elseIfContext));
 		alt = alt.alternate;
 	}
 	if (alt) {
 		const elseContext = new Context([], context);
-		code[code.length - 1] += " else {";
-		code.push(...processConsequent(alt, nodeName, parentNode, elseContext), "}");
+		const keyElse = `else_${nodeName}`;
+		mainBlock[mainBlock.length - 1] += " else {";
+		mainBlock.push(...indent(`checkAndUpdateState(${++index}, this.${keyElse}.bind(this));`), "}");
+		functionsToProcess.set(keyElse, processConsequent(alt, nodeName, parentNode, elseContext));
 	}
-	return code;
+	return {
+		mainBlock: [
+			"(() => {",
+			...indent("let state;", "let localUnwatchFns = []", "const checkAndUpdateState = (newState, fn) => {", ...indent("if (state === newState) {", ...indent("return;"), "}", "state = newState;", "unwatch();", "localUnwatchFns = Signal.subtle.untrack(fn);", "unwatchFns.push(...localUnwatchFns);"), "};", "const unwatch = () => {", ...indent("localUnwatchFns?.forEach(fn => fn());", "unwatchFns = unwatchFns.filter(fn => !localUnwatchFns.includes(fn));", "localUnwatchFns = [];"), "}", "unwatchFns.push(", ...indent("effect(() => {", ...indent(...mainBlock), "})"), ");"),
+			"})();"
+		],
+		fns: functionsToProcess
+	};
 }
 function processConsequent(node, nodeName, parentNode, context) {
-	return node.consequent.map((child, i) => indent(...processNode(child, `${nodeName}_${i}`, parentNode, context))).flat();
+	return node.consequent.map((child, i) => processNode(child, `${nodeName}_${i}`, parentNode, context)).flat();
 }
 //#endregion
 //#region ../packages/compiler/src/render-generator/states/process-switch.state.ts
@@ -2353,11 +2378,24 @@ function processConsequent(node, nodeName, parentNode, context) {
 * @returns Array of generated code lines.
 */
 function processSwitch(node, nodeName, parentNode, context) {
-	return [
-		`switch (${resolveExpression(node.expression, context)}) {`,
-		...node.cases.map((caseNode) => [...indent(...!caseNode.condition ? ["default: {"] : caseNode.condition.map((cond, i, arr) => `case ${cond}:${i === arr.length - 1 ? " {" : ""}`), ...caseNode.children.map((child, i) => indent(...processNode(child, `${nodeName}_${i}_${i}`, parentNode, new Context([], context)))).flat(), `${indent("break;")}`, `}`)]).flat(),
-		"}"
-	];
+	const mainBlock = new Array();
+	const functionsToProcess = /* @__PURE__ */ new Map();
+	mainBlock.push(`switch (${resolveExpression(node.expression, context)}) {`);
+	node.cases.forEach((caseNode, i) => {
+		const caseContext = new Context([], context);
+		const caseName = caseNode.condition ? `case_${nodeName}_${i}` : `default_${nodeName}`;
+		functionsToProcess.set(caseName, caseNode.children.map((child, i) => processNode(child, `${nodeName}_${i}_${i}`, parentNode, caseContext)).flat());
+		mainBlock.push(...indent(...!caseNode.condition ? ["default: {"] : caseNode.condition.map((cond, i, arr) => `case ${cond}:${i === arr.length - 1 ? " {" : ""}`), ...indent(`localUnwatchFns = Signal.subtle.untrack(this.${caseName}.bind(this));`, "unwatchFns.push(...localUnwatchFns);", "break;"), "}"));
+	});
+	mainBlock.push("}");
+	return {
+		mainBlock: [
+			"(() => {",
+			...indent("let localUnwatchFns = []", "const checkAndUpdateState = (newState, fn) => {", ...indent("unwatch();", "localUnwatchFns = Signal.subtle.untrack(fn);", "unwatchFns.push(...localUnwatchFns);"), "};", "const unwatch = () => {", ...indent("localUnwatchFns?.forEach(fn => fn());", "unwatchFns = unwatchFns.filter(fn => !localUnwatchFns.includes(fn));", "localUnwatchFns = [];"), "}", "unwatchFns.push(", ...indent("effect(() => {", ...indent("unwatch();", ...mainBlock), "})"), ");"),
+			"})();"
+		],
+		fns: functionsToProcess
+	};
 }
 //#endregion
 //#region ../packages/compiler/src/render-generator/states/process-text-and-interpolation.state.ts
@@ -2377,7 +2415,7 @@ function processTextAndInterpolation(node, nodeName, parentNode, context) {
 	return [
 		`const ${nodeName} = document.createTextNode(${textValue});`,
 		`${parentNode}.appendChild(${nodeName});`,
-		`effect(() => ${nodeName}.textContent = ${textValue});`
+		`unwatchFns.push(effect(() => ${nodeName}.textContent = ${textValue}));`
 	];
 }
 //#endregion
@@ -2392,14 +2430,13 @@ var nodeToProcess = /* @__PURE__ */ new Map();
 function generateRenderFunction(ast, cssVariableName) {
 	nodeToProcess.clear();
 	const context = new Context();
-	const renderFunctions = [
-		"_render() {",
-		...indent(...[cssVariableName ? `this._root.adoptedStyleSheets = [${cssVariableName}];` : void 0].filter((line) => !!line), ...ast.map((node, i) => [...processNode(node, i.toString(), ROOT_NODE, context)]).flat()),
-		"}"
-	];
+	const renderFunctions = ["_render() {"];
+	if (cssVariableName) renderFunctions.push(`  this._root.adoptedStyleSheets = [${cssVariableName}];`);
+	renderFunctions.push("  let unwatchFns = [];", ...indent(...ast.map((node, i) => [...processNode(node, i.toString(), ROOT_NODE, context)]).flat()), "  return unwatchFns;", "}");
 	while (nodeToProcess.size > 0) {
-		const [key, fn] = nodeToProcess.entries().next().value;
-		renderFunctions.push(`${key} {`, ...indent(...fn()), "}");
+		const [key, fnData] = nodeToProcess.entries().next().value;
+		if ("args" in fnData) renderFunctions.push(`${key}(${fnData.args.join(", ")}) {`, "  let unwatchFns = [];", ...indent(...fnData.fn(...fnData.args)), "  return unwatchFns;", "}");
+		else renderFunctions.push(`${key}() {`, "  let unwatchFns = [];", ...indent(...fnData.fn()), "  return unwatchFns;", "}");
 		nodeToProcess.delete(key);
 	}
 	return renderFunctions.join("\n");
@@ -2415,17 +2452,20 @@ function processNode(node, nodeName, parentNode, context) {
 		case ASTNodeType.Interpolation: return processTextAndInterpolation(node, getTextIdentifier(parentNode, nodeName), parentNode, context);
 		case ASTNodeType.Element: return processElement(node, getElementIdentifier(node, parentNode, nodeName), parentNode, context);
 		case ASTNodeType.If:
-			const keyIf = `if_${nodeName}()`;
-			nodeToProcess.set(keyIf, () => processIf(node, nodeName, parentNode, context));
-			return [`this.${keyIf};`];
+			const conditionalBlockData = processIf(node, nodeName, parentNode, context);
+			conditionalBlockData.fns.forEach((fnBody, key) => nodeToProcess.set(key, { fn: () => fnBody }));
+			return conditionalBlockData.mainBlock;
 		case ASTNodeType.For:
-			const keyFor = `for_${nodeName}()`;
-			nodeToProcess.set(keyFor, () => processFor(node, nodeName, parentNode, context));
-			return [`this.${keyFor};`];
+			const forBlockData = processFor(node, nodeName, parentNode, context);
+			forBlockData.fns.forEach((fnBody, key) => nodeToProcess.set(key, {
+				fn: () => fnBody.code,
+				args: fnBody.args
+			}));
+			return forBlockData.mainBlock;
 		case ASTNodeType.Switch:
-			const keySwitch = `switch_${nodeName}()`;
-			nodeToProcess.set(keySwitch, () => processSwitch(node, nodeName, parentNode, context));
-			return [`this.${keySwitch};`];
+			const switchBlockData = processSwitch(node, nodeName, parentNode, context);
+			switchBlockData.fns.forEach((fnBody, key) => nodeToProcess.set(key, { fn: () => fnBody }));
+			return switchBlockData.mainBlock;
 		case ASTNodeType.ConstDeclaration: return processConstDeclaration(node, nodeName, parentNode, context);
 		default: return [];
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaendar/compiler",
-  "version": "0.4.6",
+  "version": "0.4.10",
   "description": "A library for transpiling Xaendar Templates into JavaScript code",
   "sideEffects": false,
   "type": "module",
@@ -16,8 +16,8 @@
     }
   },
   "dependencies": {
-    "@xaendar/common": "0.4.6",
-    "@xaendar/types": "0.4.6",
+    "@xaendar/common": "0.4.10",
+    "@xaendar/types": "0.4.10",
     "typescript": "^6.0.3"
   }
 }