@pyreon/compiler 0.12.10 → 0.12.11

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":"1afeff4f-1","name":"jsx.ts"},{"uid":"1afeff4f-3","name":"project-scanner.ts"},{"uid":"1afeff4f-5","name":"react-intercept.ts"},{"uid":"1afeff4f-7","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"1afeff4f-1":{"renderedLength":34308,"gzipLength":9245,"brotliLength":0,"metaUid":"1afeff4f-0"},"1afeff4f-3":{"renderedLength":4762,"gzipLength":1730,"brotliLength":0,"metaUid":"1afeff4f-2"},"1afeff4f-5":{"renderedLength":27692,"gzipLength":6920,"brotliLength":0,"metaUid":"1afeff4f-4"},"1afeff4f-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"1afeff4f-6"}},"nodeMetas":{"1afeff4f-0":{"id":"/src/jsx.ts","moduleParts":{"index.js":"1afeff4f-1"},"imported":[{"uid":"1afeff4f-8"}],"importedBy":[{"uid":"1afeff4f-6"}]},"1afeff4f-2":{"id":"/src/project-scanner.ts","moduleParts":{"index.js":"1afeff4f-3"},"imported":[{"uid":"1afeff4f-9"},{"uid":"1afeff4f-10"}],"importedBy":[{"uid":"1afeff4f-6"}]},"1afeff4f-4":{"id":"/src/react-intercept.ts","moduleParts":{"index.js":"1afeff4f-5"},"imported":[{"uid":"1afeff4f-8"}],"importedBy":[{"uid":"1afeff4f-6"}]},"1afeff4f-6":{"id":"/src/index.ts","moduleParts":{"index.js":"1afeff4f-7"},"imported":[{"uid":"1afeff4f-0"},{"uid":"1afeff4f-2"},{"uid":"1afeff4f-4"}],"importedBy":[],"isEntry":true},"1afeff4f-8":{"id":"typescript","moduleParts":{},"imported":[],"importedBy":[{"uid":"1afeff4f-0"},{"uid":"1afeff4f-4"}]},"1afeff4f-9":{"id":"node:fs","moduleParts":{},"imported":[],"importedBy":[{"uid":"1afeff4f-2"}]},"1afeff4f-10":{"id":"node:path","moduleParts":{},"imported":[],"importedBy":[{"uid":"1afeff4f-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":"f7639ad9-1","name":"jsx.ts"},{"uid":"f7639ad9-3","name":"project-scanner.ts"},{"uid":"f7639ad9-5","name":"react-intercept.ts"},{"uid":"f7639ad9-7","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"f7639ad9-1":{"renderedLength":37147,"gzipLength":10065,"brotliLength":0,"metaUid":"f7639ad9-0"},"f7639ad9-3":{"renderedLength":4762,"gzipLength":1730,"brotliLength":0,"metaUid":"f7639ad9-2"},"f7639ad9-5":{"renderedLength":27692,"gzipLength":6920,"brotliLength":0,"metaUid":"f7639ad9-4"},"f7639ad9-7":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"f7639ad9-6"}},"nodeMetas":{"f7639ad9-0":{"id":"/src/jsx.ts","moduleParts":{"index.js":"f7639ad9-1"},"imported":[{"uid":"f7639ad9-8"}],"importedBy":[{"uid":"f7639ad9-6"}]},"f7639ad9-2":{"id":"/src/project-scanner.ts","moduleParts":{"index.js":"f7639ad9-3"},"imported":[{"uid":"f7639ad9-9"},{"uid":"f7639ad9-10"}],"importedBy":[{"uid":"f7639ad9-6"}]},"f7639ad9-4":{"id":"/src/react-intercept.ts","moduleParts":{"index.js":"f7639ad9-5"},"imported":[{"uid":"f7639ad9-8"}],"importedBy":[{"uid":"f7639ad9-6"}]},"f7639ad9-6":{"id":"/src/index.ts","moduleParts":{"index.js":"f7639ad9-7"},"imported":[{"uid":"f7639ad9-0"},{"uid":"f7639ad9-2"},{"uid":"f7639ad9-4"}],"importedBy":[],"isEntry":true},"f7639ad9-8":{"id":"typescript","moduleParts":{},"imported":[],"importedBy":[{"uid":"f7639ad9-0"},{"uid":"f7639ad9-4"}]},"f7639ad9-9":{"id":"node:fs","moduleParts":{},"imported":[],"importedBy":[{"uid":"f7639ad9-2"}]},"f7639ad9-10":{"id":"node:path","moduleParts":{},"imported":[],"importedBy":[{"uid":"f7639ad9-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -86,6 +86,7 @@ function transformJSX(code, filename = "input.tsx") {
 	let needsBindDirectImportGlobal = false;
 	let needsBindImportGlobal = false;
 	let needsApplyPropsImportGlobal = false;
+	let needsMountSlotImportGlobal = 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.
@@ -105,10 +106,12 @@ function transformJSX(code, filename = "input.tsx") {
 	function wrap(expr) {
 		const start = expr.getStart(sf);
 		const end = expr.getEnd();
+		const sliced = sliceExpr(expr);
+		const text = ts.isObjectLiteralExpression(expr) ? `() => (${sliced})` : `() => ${sliced}`;
 		replacements.push({
 			start,
 			end,
-			text: `() => ${sliceExpr(expr)}`
+			text
 		});
 	}
 	/** Try to hoist or wrap an expression, pushing a replacement if needed. */
@@ -176,10 +179,12 @@ function transformJSX(code, filename = "input.tsx") {
 			else if (shouldWrap(expr)) {
 				const start = expr.getStart(sf);
 				const end = expr.getEnd();
+				const sliced = sliceExpr(expr);
+				const inner = ts.isObjectLiteralExpression(expr) ? `(${sliced})` : sliced;
 				replacements.push({
 					start,
 					end,
-					text: `_rp(() => ${sliceExpr(expr)})`
+					text: `_rp(() => ${inner})`
 				});
 				needsRpImport = true;
 			}
@@ -264,6 +269,7 @@ function transformJSX(code, filename = "input.tsx") {
 			if (!(node.declarationList.flags & ts.NodeFlags.Const)) continue;
 			if (_callbackDepth > 0) continue;
 			if (ts.isIdentifier(decl.name) && decl.initializer) {
+				if (isStatefulCall(decl.initializer)) continue;
 				if (readsFromProps(decl.initializer)) propDerivedVars.set(decl.name.text, decl.initializer);
 			}
 		}
@@ -300,15 +306,28 @@ function transformJSX(code, filename = "input.tsx") {
 			}
 		});
 	}
-	function resolveExprTransitive(node, excludeVar) {
+	const warnedCycles = /* @__PURE__ */ new Set();
+	function resolveExprTransitive(node, visited = /* @__PURE__ */ new Set(), sourceNode) {
 		return ts.visitNode(node, function visit(n) {
-			if (ts.isIdentifier(n) && propDerivedVars.has(n.text) && n.text !== excludeVar) {
+			if (ts.isIdentifier(n) && propDerivedVars.has(n.text)) {
+				if (visited.has(n.text)) {
+					const cycleKey = [...visited, n.text].sort().join(",");
+					if (!warnedCycles.has(cycleKey)) {
+						warnedCycles.add(cycleKey);
+						const chain = [...visited, n.text].join(" → ");
+						warn(sourceNode ?? n, `[Pyreon] Circular prop-derived const reference: ${chain}. The cyclic identifier \`${n.text}\` will use its captured value instead of being reactively inlined. Break the cycle by reading from \`props.*\` directly or restructuring the derivation chain.`, "circular-prop-derived");
+					}
+					return n;
+				}
 				const parent = n.parent;
-				if (parent && ts.isPropertyAccessExpression(parent) && parent.name === n) return n;
-				if (parent && ts.isJsxAttribute(parent) && parent.name === n) return n;
-				if (parent && ts.isShorthandPropertyAssignment(parent)) return n;
+				if (parent) {
+					if ("name" in parent && parent.name === n) return n;
+					if (ts.isShorthandPropertyAssignment(parent)) return n;
+				}
 				const resolved = propDerivedVars.get(n.text);
-				return ts.factory.createParenthesizedExpression(resolveExprTransitive(resolved, n.text));
+				const nextVisited = new Set(visited);
+				nextVisited.add(n.text);
+				return ts.factory.createParenthesizedExpression(resolveExprTransitive(resolved, nextVisited, sourceNode));
 			}
 			return ts.visitEachChild(n, visit, void 0);
 		});
@@ -382,6 +401,7 @@ function transformJSX(code, filename = "input.tsx") {
 		if (needsBindDirectImportGlobal) runtimeDomImports.push("_bindDirect");
 		if (needsBindTextImportGlobal) runtimeDomImports.push("_bindText");
 		if (needsApplyPropsImportGlobal) runtimeDomImports.push("_applyProps");
+		if (needsMountSlotImportGlobal) runtimeDomImports.push("_mountSlot");
 		const reactivityImports = needsBindImportGlobal ? `\nimport { _bind } from "@pyreon/reactivity";` : "";
 		result = `import { ${runtimeDomImports.join(", ")} } from "@pyreon/runtime-dom";${reactivityImports}\n` + result;
 	}
@@ -461,6 +481,7 @@ function transformJSX(code, filename = "input.tsx") {
 		let needsBindTextImport = false;
 		let needsBindDirectImport = false;
 		let needsApplyPropsImport = false;
+		let needsMountSlotImport = false;
 		function nextVar() {
 			return `__e${varIdx++}`;
 		}
@@ -485,8 +506,10 @@ function transformJSX(code, filename = "input.tsx") {
 		/** Emit bind line for a ref attribute. */
 		function emitRef(attr, varName) {
 			if (!attr.initializer || !ts.isJsxExpression(attr.initializer)) return;
-			if (!attr.initializer.expression) return;
-			bindLines.push(`${sliceExpr(attr.initializer.expression)}.current = ${varName}`);
+			const expr = attr.initializer.expression;
+			if (!expr) return;
+			if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) bindLines.push(`(${sliceExpr(expr)})(${varName})`);
+			else bindLines.push(`{ const __r = ${sliceExpr(expr)}; if (typeof __r === "function") __r(${varName}); else if (__r) __r.current = ${varName} }`);
 		}
 		/** Emit event handler bind line — delegated (expando) or addEventListener. */
 		function emitEventListener(attr, attrName, varName) {
@@ -646,6 +669,13 @@ function transformJSX(code, filename = "input.tsx") {
 			}
 			const needsPlaceholder = useMixed || useMultiExpr;
 			const { expr, isReactive } = unwrapAccessor(child.expression);
+			if (isChildrenExpression(child.expression, expr)) {
+				needsMountSlotImport = true;
+				const placeholder = `${parentRef}.childNodes[${childNodeIdx}]`;
+				const d = nextDisp();
+				bindLines.push(`const ${d} = _mountSlot(${expr}, ${parentRef}, ${placeholder})`);
+				return "<!>";
+			}
 			if (isReactive) return emitReactiveTextChild(expr, child.expression, varName, parentRef, childNodeIdx, needsPlaceholder);
 			return emitStaticTextChild(expr, varName, parentRef, childNodeIdx, needsPlaceholder);
 		}
@@ -683,6 +713,7 @@ function transformJSX(code, filename = "input.tsx") {
 		if (needsBindTextImport) needsBindTextImportGlobal = true;
 		if (needsBindDirectImport) needsBindDirectImportGlobal = true;
 		if (needsApplyPropsImport) needsApplyPropsImportGlobal = true;
+		if (needsMountSlotImport) needsMountSlotImportGlobal = true;
 		const escaped = html.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
 		if (reactiveBindExprs.length > 0) {
 			needsBindImportGlobal = true;
@@ -767,7 +798,7 @@ function transformJSX(code, filename = "input.tsx") {
 	*  via AST transformation — handles template literals, ternaries, etc. */
 	function sliceExpr(expr) {
 		if (propDerivedVars.size > 0 && accessesProps(expr)) {
-			const resolved = resolveExprTransitive(expr);
+			const resolved = resolveExprTransitive(expr, /* @__PURE__ */ new Set(), expr);
 			return printer.printNode(ts.EmitHint.Expression, resolved, sf);
 		}
 		return code.slice(expr.getStart(sf), expr.getEnd());
@@ -802,6 +833,44 @@ const JSX_TO_HTML_ATTR = {
 	className: "class",
 	htmlFor: "for"
 };
+/**
+* Detect if an expression is a stateful call that must NOT be inlined.
+* signal(), computed(), effect() etc. create state — inlining them would
+* create new instances at each use site instead of referencing the original.
+*/
+const STATEFUL_CALLS = new Set([
+	"signal",
+	"computed",
+	"effect",
+	"batch",
+	"createContext",
+	"createReactiveContext",
+	"useContext",
+	"useRef",
+	"createRef",
+	"useForm",
+	"useQuery",
+	"useMutation",
+	"defineStore",
+	"useStore"
+]);
+function isStatefulCall(node) {
+	if (!ts.isCallExpression(node)) return false;
+	const callee = node.expression;
+	if (ts.isIdentifier(callee)) return STATEFUL_CALLS.has(callee.text);
+	return false;
+}
+/**
+* Detect if an expression accesses `.children` — these can contain VNodes
+* and must use _mountSlot instead of text node binding in templates.
+* Matches: props.children, own.children, x.children, or bare `children` identifier.
+*/
+function isChildrenExpression(node, expr) {
+	if (ts.isPropertyAccessExpression(node) && node.name.text === "children") return true;
+	if (ts.isIdentifier(node) && node.text === "children") return true;
+	if (expr.endsWith(".children") || expr === "children") return true;
+	return false;
+}
 function isLowerCase(s) {
 	return s.length > 0 && s[0] === s[0]?.toLowerCase();
 }
@@ -814,7 +883,7 @@ function escapeHtmlAttr(s) {
 	return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
 }
 function escapeHtmlText(s) {
-	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;");
+	return s.replace(/&(?!(?:#\d+|#x[\da-fA-F]+|[a-zA-Z]\w*);)/g, "&amp;").replace(/</g, "&lt;");
 }
 function isStaticJSXNode(node) {
 	if (ts.isJsxSelfClosingElement(node)) return isStaticAttrs(node.attributes);