@pyreon/compiler 0.12.4 → 0.12.6

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"b14201ae-1","name":"jsx.ts"},{"uid":"b14201ae-3","name":"project-scanner.ts"},{"uid":"b14201ae-5","name":"react-intercept.ts"},{"uid":"b14201ae-7","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"b14201ae-1":{"renderedLength":26107,"gzipLength":7273,"brotliLength":0,"metaUid":"b14201ae-0"},"b14201ae-3":{"renderedLength":4762,"gzipLength":1730,"brotliLength":0,"metaUid":"b14201ae-2"},"b14201ae-5":{"renderedLength":27692,"gzipLength":6920,"brotliLength":0,"metaUid":"b14201ae-4"},"b14201ae-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"b14201ae-6"}},"nodeMetas":{"b14201ae-0":{"id":"/src/jsx.ts","moduleParts":{"index.js":"b14201ae-1"},"imported":[{"uid":"b14201ae-8"}],"importedBy":[{"uid":"b14201ae-6"}]},"b14201ae-2":{"id":"/src/project-scanner.ts","moduleParts":{"index.js":"b14201ae-3"},"imported":[{"uid":"b14201ae-9"},{"uid":"b14201ae-10"}],"importedBy":[{"uid":"b14201ae-6"}]},"b14201ae-4":{"id":"/src/react-intercept.ts","moduleParts":{"index.js":"b14201ae-5"},"imported":[{"uid":"b14201ae-8"}],"importedBy":[{"uid":"b14201ae-6"}]},"b14201ae-6":{"id":"/src/index.ts","moduleParts":{"index.js":"b14201ae-7"},"imported":[{"uid":"b14201ae-0"},{"uid":"b14201ae-2"},{"uid":"b14201ae-4"}],"importedBy":[],"isEntry":true},"b14201ae-8":{"id":"typescript","moduleParts":{},"imported":[],"importedBy":[{"uid":"b14201ae-0"},{"uid":"b14201ae-4"}]},"b14201ae-9":{"id":"node:fs","moduleParts":{},"imported":[],"importedBy":[{"uid":"b14201ae-2"}]},"b14201ae-10":{"id":"node:path","moduleParts":{},"imported":[],"importedBy":[{"uid":"b14201ae-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"4ebf1530-1","name":"jsx.ts"},{"uid":"4ebf1530-3","name":"project-scanner.ts"},{"uid":"4ebf1530-5","name":"react-intercept.ts"},{"uid":"4ebf1530-7","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"4ebf1530-1":{"renderedLength":34297,"gzipLength":9205,"brotliLength":0,"metaUid":"4ebf1530-0"},"4ebf1530-3":{"renderedLength":4762,"gzipLength":1730,"brotliLength":0,"metaUid":"4ebf1530-2"},"4ebf1530-5":{"renderedLength":27692,"gzipLength":6920,"brotliLength":0,"metaUid":"4ebf1530-4"},"4ebf1530-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"4ebf1530-6"}},"nodeMetas":{"4ebf1530-0":{"id":"/src/jsx.ts","moduleParts":{"index.js":"4ebf1530-1"},"imported":[{"uid":"4ebf1530-8"}],"importedBy":[{"uid":"4ebf1530-6"}]},"4ebf1530-2":{"id":"/src/project-scanner.ts","moduleParts":{"index.js":"4ebf1530-3"},"imported":[{"uid":"4ebf1530-9"},{"uid":"4ebf1530-10"}],"importedBy":[{"uid":"4ebf1530-6"}]},"4ebf1530-4":{"id":"/src/react-intercept.ts","moduleParts":{"index.js":"4ebf1530-5"},"imported":[{"uid":"4ebf1530-8"}],"importedBy":[{"uid":"4ebf1530-6"}]},"4ebf1530-6":{"id":"/src/index.ts","moduleParts":{"index.js":"4ebf1530-7"},"imported":[{"uid":"4ebf1530-0"},{"uid":"4ebf1530-2"},{"uid":"4ebf1530-4"}],"importedBy":[],"isEntry":true},"4ebf1530-8":{"id":"typescript","moduleParts":{},"imported":[],"importedBy":[{"uid":"4ebf1530-0"},{"uid":"4ebf1530-4"}]},"4ebf1530-9":{"id":"node:fs","moduleParts":{},"imported":[],"importedBy":[{"uid":"4ebf1530-2"}]},"4ebf1530-10":{"id":"node:path","moduleParts":{},"imported":[],"importedBy":[{"uid":"4ebf1530-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -85,6 +85,7 @@ function transformJSX(code, filename = "input.tsx") {
 	let needsBindTextImportGlobal = false;
 	let needsBindDirectImportGlobal = false;
 	let needsBindImportGlobal = false;
+	let needsApplyPropsImportGlobal = false;
 	/**
 	* If `node` is a fully-static JSX element/fragment, register a module-scope
 	* hoist for it and return the generated variable name. Otherwise return null.
@@ -104,10 +105,11 @@ function transformJSX(code, filename = "input.tsx") {
 	function wrap(expr) {
 		const start = expr.getStart(sf);
 		const end = expr.getEnd();
+		const exprText = inlineVarsInText(code.slice(start, end));
 		replacements.push({
 			start,
 			end,
-			text: `() => ${code.slice(start, end)}`
+			text: `() => ${exprText}`
 		});
 	}
 	/** Try to hoist or wrap an expression, pushing a replacement if needed. */
@@ -122,7 +124,7 @@ function transformJSX(code, filename = "input.tsx") {
 	}
 	/** Try to emit a template for a JsxElement. Returns true if handled. */
 	function tryTemplateEmit(node) {
-		if (templateElementCount(node) < 1) return false;
+		if (templateElementCount(node, true) < 1) return false;
 		const tplCall = buildTemplateCall(node);
 		if (!tplCall) return false;
 		const start = node.getStart(sf);
@@ -203,6 +205,161 @@ function transformJSX(code, filename = "input.tsx") {
 		}
 		ts.forEachChild(expr, walk);
 	}
+	/** Names that refer to the props object or splitProps results. */
+	const propsNames = /* @__PURE__ */ new Set();
+	/** Map of variable name → source text of the original expression. */
+	const propDerivedVars = /* @__PURE__ */ new Map();
+	/** Check if an expression reads from a tracked props-like object. */
+	function readsFromProps(node) {
+		if (ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.expression)) return propsNames.has(node.expression.text);
+		if (ts.isElementAccessExpression(node) && ts.isIdentifier(node.expression)) return propsNames.has(node.expression.text);
+		let found = false;
+		ts.forEachChild(node, (child) => {
+			if (found) return;
+			if (readsFromProps(child)) found = true;
+		});
+		return found;
+	}
+	/** Pre-pass: scan a function body for prop-derived variable declarations.
+	*  callbackDepth tracks nesting inside callback arguments (map, filter, etc.)
+	*  to avoid tracking variables declared inside callbacks as prop-derived. */
+	let _callbackDepth = 0;
+	function scanForPropDerivedVars(node) {
+		if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) {
+			const parent = node.parent;
+			if (parent && ts.isCallExpression(parent) && parent.arguments.includes(node)) {
+				_callbackDepth++;
+				ts.forEachChild(node, scanForPropDerivedVars);
+				_callbackDepth--;
+				return;
+			}
+		}
+		if ((ts.isFunctionDeclaration(node) || ts.isArrowFunction(node) || ts.isFunctionExpression(node)) && node.parameters.length > 0) {
+			const parent = node.parent;
+			if (parent && ts.isCallExpression(parent) && parent.arguments.includes(node)) {
+				ts.forEachChild(node, scanForPropDerivedVars);
+				return;
+			}
+			const firstParam = node.parameters[0];
+			if (ts.isIdentifier(firstParam.name)) {
+				let hasJSX = false;
+				ts.forEachChild(node, function checkJSX(n) {
+					if (hasJSX) return;
+					if (ts.isJsxElement(n) || ts.isJsxSelfClosingElement(n) || ts.isJsxFragment(n)) {
+						hasJSX = true;
+						return;
+					}
+					ts.forEachChild(n, checkJSX);
+				});
+				if (hasJSX) propsNames.add(firstParam.name.text);
+			}
+		}
+		if (ts.isVariableStatement(node)) for (const decl of node.declarationList.declarations) {
+			if (ts.isArrayBindingPattern(decl.name) && decl.initializer && ts.isCallExpression(decl.initializer)) {
+				const callee = decl.initializer.expression;
+				if (ts.isIdentifier(callee) && callee.text === "splitProps") {
+					for (const el of decl.name.elements) if (ts.isBindingElement(el) && ts.isIdentifier(el.name)) propsNames.add(el.name.text);
+				}
+			}
+			if (!(node.declarationList.flags & ts.NodeFlags.Const)) continue;
+			if (_callbackDepth > 0) continue;
+			if (ts.isIdentifier(decl.name) && decl.initializer) {
+				if (readsFromProps(decl.initializer)) {
+					const varName = decl.name.text;
+					const exprText = code.slice(decl.initializer.getStart(sf), decl.initializer.getEnd());
+					propDerivedVars.set(varName, exprText);
+				}
+			}
+		}
+		ts.forEachChild(node, scanForPropDerivedVars);
+	}
+	scanForPropDerivedVars(sf);
+	let changed = true;
+	while (changed) {
+		changed = false;
+		sf.forEachChild(function scanTransitive(node) {
+			if (!ts.isVariableStatement(node)) {
+				ts.forEachChild(node, scanTransitive);
+				return;
+			}
+			for (const decl of node.declarationList.declarations) {
+				if (!ts.isIdentifier(decl.name) || !decl.initializer) continue;
+				const varName = decl.name.text;
+				if (propDerivedVars.has(varName)) continue;
+				if (node.declarationList.flags & ts.NodeFlags.Let) continue;
+				let usesPropVar = false;
+				ts.forEachChild(decl.initializer, function check(n) {
+					if (usesPropVar) return;
+					if (ts.isIdentifier(n) && propDerivedVars.has(n.text)) {
+						const parent = n.parent;
+						if (parent && ts.isPropertyAccessExpression(parent) && parent.name === n) return;
+						usesPropVar = true;
+					}
+					ts.forEachChild(n, check);
+				});
+				if (usesPropVar) {
+					const exprText = code.slice(decl.initializer.getStart(sf), decl.initializer.getEnd());
+					propDerivedVars.set(varName, exprText);
+					changed = true;
+				}
+			}
+		});
+	}
+	for (const [varName, expr] of propDerivedVars) {
+		let resolved = expr;
+		for (const [depName, depExpr] of propDerivedVars) {
+			if (depName === varName) continue;
+			const re = new RegExp(`(?<![.\\w])${depName}(?![\\w:])`, "g");
+			if (re.test(resolved)) resolved = resolved.replace(re, `(${depExpr})`);
+		}
+		if (resolved !== expr) propDerivedVars.set(varName, resolved);
+	}
+	/**
+	* Enhanced dynamic check — combines containsCall with props awareness.
+	* Returns true if an expression is reactive (contains signal calls,
+	* accesses props members, or references prop-derived variables).
+	*/
+	/**
+	* Replace prop-derived variable names in a source text with their original expressions.
+	* Simple regex-based replacement — safe because variable names are identifiers.
+	*/
+	function inlineVarsInText(text) {
+		if (propDerivedVars.size === 0) return text;
+		let result = text;
+		for (const [varName, expr] of propDerivedVars) {
+			const re = new RegExp(`(?<![.\\w])${varName}(?![\\w:])`, "g");
+			result = result.replace(re, `(${expr})`);
+		}
+		return result;
+	}
+	function isDynamic(node) {
+		if (containsCall(node)) return true;
+		return accessesProps(node);
+	}
+	/** Check if an expression accesses a tracked props object or a prop-derived variable. */
+	function accessesProps(node) {
+		if (ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.expression)) {
+			if (propsNames.has(node.expression.text)) return true;
+		}
+		if (ts.isIdentifier(node) && propDerivedVars.has(node.text)) {
+			const parent = node.parent;
+			if (parent && ts.isPropertyAccessExpression(parent) && parent.name === node) return false;
+			return true;
+		}
+		let found = false;
+		ts.forEachChild(node, (child) => {
+			if (found) return;
+			if (ts.isArrowFunction(child) || ts.isFunctionExpression(child)) return;
+			if (accessesProps(child)) found = true;
+		});
+		return found;
+	}
+	function shouldWrap(node) {
+		if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) return false;
+		if (isStatic(node)) return false;
+		if (ts.isCallExpression(node) && isPureStaticCall(node)) return false;
+		return isDynamic(node);
+	}
 	function walk(node) {
 		if (ts.isJsxElement(node) && tryTemplateEmit(node)) return;
 		if (ts.isJsxSelfClosingElement(node) || ts.isJsxElement(node)) checkForWarnings(node);
@@ -236,6 +393,7 @@ function transformJSX(code, filename = "input.tsx") {
 		const runtimeDomImports = ["_tpl"];
 		if (needsBindDirectImportGlobal) runtimeDomImports.push("_bindDirect");
 		if (needsBindTextImportGlobal) runtimeDomImports.push("_bindText");
+		if (needsApplyPropsImportGlobal) runtimeDomImports.push("_applyProps");
 		const reactivityImports = needsBindImportGlobal ? `\nimport { _bind } from "@pyreon/reactivity";` : "";
 		result = `import { ${runtimeDomImports.join(", ")} } from "@pyreon/runtime-dom";${reactivityImports}\n` + result;
 	}
@@ -245,10 +403,18 @@ function transformJSX(code, filename = "input.tsx") {
 		usesTemplates: needsTplImport,
 		warnings
 	};
-	/** Check if a single attribute would prevent template emission. */
-	function hasBailAttr(node) {
+	/**
+	* Check if attributes prevent template emission.
+	* - `key` always bails (VNode reconciliation prop)
+	* - Spread on inner elements bails (too complex to merge in _bind)
+	* - Spread on root element is allowed — applied via applyProps in _bind
+	*/
+	function hasBailAttr(node, isRoot = false) {
 		for (const attr of jsxAttrs(node)) {
-			if (ts.isJsxSpreadAttribute(attr)) return true;
+			if (ts.isJsxSpreadAttribute(attr)) {
+				if (isRoot) continue;
+				return true;
+			}
 			if (ts.isJsxAttribute(attr) && ts.isIdentifier(attr.name) && attr.name.text === "key") return true;
 		}
 		return false;
@@ -271,10 +437,10 @@ function transformJSX(code, filename = "input.tsx") {
 	* Count DOM elements in a JSX subtree. Returns -1 if the tree is not
 	* eligible for template emission.
 	*/
-	function templateElementCount(node) {
+	function templateElementCount(node, isRoot = false) {
 		const tag = jsxTagName(node);
 		if (!tag || !isLowerCase(tag)) return -1;
-		if (hasBailAttr(node)) return -1;
+		if (hasBailAttr(node, isRoot)) return -1;
 		if (!ts.isJsxElement(node)) return 1;
 		let count = 1;
 		for (const child of node.children) {
@@ -306,6 +472,7 @@ function transformJSX(code, filename = "input.tsx") {
 		const reactiveBindExprs = [];
 		let needsBindTextImport = false;
 		let needsBindDirectImport = false;
+		let needsApplyPropsImport = false;
 		function nextVar() {
 			return `__e${varIdx++}`;
 		}
@@ -376,7 +543,7 @@ function transformJSX(code, filename = "input.tsx") {
 			};
 			return {
 				expr: sliceExpr(exprNode),
-				isReactive: containsCall(exprNode)
+				isReactive: isDynamic(exprNode)
 			};
 		}
 		/** Build a setter expression for an attribute. */
@@ -434,6 +601,13 @@ function transformJSX(code, filename = "input.tsx") {
 		}
 		/** Process a single attribute, returning HTML to append. */
 		function processOneAttr(attr, varName) {
+			if (ts.isJsxSpreadAttribute(attr)) {
+				const expr = sliceExpr(attr.expression);
+				needsApplyPropsImport = true;
+				if (isDynamic(attr.expression)) reactiveBindExprs.push(`_applyProps(${varName}, ${expr})`);
+				else bindLines.push(`_applyProps(${varName}, ${expr})`);
+				return "";
+			}
 			if (!ts.isJsxAttribute(attr)) return "";
 			const attrName = ts.isIdentifier(attr.name) ? attr.name.text : "";
 			if (attrName === "key") return "";
@@ -457,7 +631,11 @@ function transformJSX(code, filename = "input.tsx") {
 				needsBindTextImport = true;
 				const d = nextDisp();
 				bindLines.push(`const ${d} = _bindText(${directRef}, ${tVar})`);
-			} else reactiveBindExprs.push(`${tVar}.data = ${expr}`);
+			} else {
+				needsBindImportGlobal = true;
+				const d = nextDisp();
+				bindLines.push(`const ${d} = _bind(() => { ${tVar}.data = ${inlineVarsInText(expr)} })`);
+			}
 			return needsPlaceholder ? "<!>" : "";
 		}
 		/** Emit bind lines for a static text expression child. */
@@ -516,11 +694,12 @@ function transformJSX(code, filename = "input.tsx") {
 		if (html === null) return null;
 		if (needsBindTextImport) needsBindTextImportGlobal = true;
 		if (needsBindDirectImport) needsBindDirectImportGlobal = true;
+		if (needsApplyPropsImport) needsApplyPropsImportGlobal = true;
 		const escaped = html.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
 		if (reactiveBindExprs.length > 0) {
 			needsBindImportGlobal = true;
 			const combinedName = nextDisp();
-			const combinedBody = reactiveBindExprs.join("; ");
+			const combinedBody = reactiveBindExprs.map(inlineVarsInText).join("; ");
 			bindLines.push(`const ${combinedName} = _bind(() => { ${combinedBody} })`);
 		}
 		if (bindLines.length === 0 && disposerNames.length === 0) return `_tpl("${escaped}", () => null)`;
@@ -668,13 +847,60 @@ function isStaticChild(child) {
 function isStatic(node) {
 	return ts.isStringLiteral(node) || ts.isNumericLiteral(node) || ts.isNoSubstitutionTemplateLiteral(node) || node.kind === ts.SyntaxKind.TrueKeyword || node.kind === ts.SyntaxKind.FalseKeyword || node.kind === ts.SyntaxKind.NullKeyword || node.kind === ts.SyntaxKind.UndefinedKeyword;
 }
-function shouldWrap(node) {
-	if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) return false;
-	if (isStatic(node)) return false;
-	return containsCall(node);
+/** Known pure global functions that don't read signals. */
+const PURE_CALLS = new Set([
+	"Math.max",
+	"Math.min",
+	"Math.abs",
+	"Math.floor",
+	"Math.ceil",
+	"Math.round",
+	"Math.pow",
+	"Math.sqrt",
+	"Math.random",
+	"Math.trunc",
+	"Math.sign",
+	"Number.parseInt",
+	"Number.parseFloat",
+	"Number.isNaN",
+	"Number.isFinite",
+	"parseInt",
+	"parseFloat",
+	"isNaN",
+	"isFinite",
+	"String.fromCharCode",
+	"String.fromCodePoint",
+	"Object.keys",
+	"Object.values",
+	"Object.entries",
+	"Object.assign",
+	"Object.freeze",
+	"Object.create",
+	"Array.from",
+	"Array.isArray",
+	"Array.of",
+	"JSON.stringify",
+	"JSON.parse",
+	"encodeURIComponent",
+	"decodeURIComponent",
+	"encodeURI",
+	"decodeURI",
+	"Date.now"
+]);
+/** Check if a call expression calls a known pure function with static args. */
+function isPureStaticCall(node) {
+	const callee = node.expression;
+	let name = "";
+	if (ts.isIdentifier(callee)) name = callee.text;
+	else if (ts.isPropertyAccessExpression(callee) && ts.isIdentifier(callee.expression)) name = `${callee.expression.text}.${callee.name.text}`;
+	if (!PURE_CALLS.has(name)) return false;
+	return node.arguments.every((arg) => !ts.isSpreadElement(arg) && isStatic(arg));
 }
 function containsCall(node) {
-	if (ts.isCallExpression(node)) return true;
+	if (ts.isCallExpression(node)) {
+		if (isPureStaticCall(node)) return false;
+		return true;
+	}
 	if (ts.isTaggedTemplateExpression(node)) return true;
 	if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) return false;
 	return ts.forEachChild(node, containsCall) ?? false;