@pyreon/compiler 0.12.9 → 0.12.11

package/lib/types/index.d.ts

@@ -41,7 +41,7 @@ interface CompilerWarning {
   /** Source file column number (0-based) */
   column: number;
   /** Warning code for filtering */
-  code: 'signal-call-in-jsx' | 'missing-key-on-for' | 'signal-in-static-prop';
+  code: 'signal-call-in-jsx' | 'missing-key-on-for' | 'signal-in-static-prop' | 'circular-prop-derived';
 }
 interface TransformResult {
   /** Transformed source code (JSX preserved, only expression containers modified) */

package/lib/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/jsx.ts","../../../src/project-scanner.ts","../../../src/react-intercept.ts"],"mappings":";;AAqCA;;;;;;;;;;AAWA;;;;;;;;;;AAwCA;;;;;;;;;;;;ACjFA;UD8BiB,eAAA;;EAEf,OAAA;EC/BA;EDiCA,IAAA;EC/BA;EDiCA,MAAA;EC/BA;EDiCA,IAAA;AAAA;AAAA,UAGe,eAAA;EChCA;EDkCf,IAAA;;EAEA,aAAA;ECnCA;EDqCA,QAAA,EAAU,eAAA;AAAA;AAAA,iBAkCI,YAAA,CAAa,IAAA,UAAc,QAAA,YAAyB,eAAA;;;;AAnDpE;;UC9BiB,SAAA;EACf,IAAA;EACA,IAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,MAAA;AAAA;AAAA,UAGe,aAAA;EACf,IAAA;EACA,IAAA;EACA,UAAA;EACA,WAAA;EACA,KAAA;AAAA;AAAA,UAGe,UAAA;EACf,IAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA,UAGe,cAAA;EACf,SAAA;EACA,OAAA;EACA,WAAA;EACA,MAAA,EAAQ,SAAA;EACR,UAAA,EAAY,aAAA;EACZ,OAAA,EAAS,UAAA;AAAA;AAAA,iBAGK,eAAA,CAAgB,GAAA,WAAc,cAAA;;;;ADF9C;;;;;;;;;;AAWA;;KE5BY,mBAAA;AAAA,UA0BK,eAAA;EFIf;EEFA,IAAA,EAAM,mBAAA;EFMN;EEJA,OAAA;EFIyB;EEFzB,IAAA;EFoCc;EElCd,MAAA;;EAEA,OAAA;EFgC2B;EE9B3B,SAAA;EF8BkE;EE5BlE,OAAA;AAAA;AAAA,UAGe,eAAA;EACf,IAAA;EACA,IAAA;EACA,WAAA;AAAA;AAAA,UAGe,eAAA;ED9DS;ECgExB,IAAA;ED9DA;ECgEA,WAAA,EAAa,eAAA;ED9Db;ECgEA,OAAA,EAAS,eAAA;AAAA;AAAA,iBAsgBK,mBAAA,CAAoB,IAAA,UAAc,QAAA,YAAyB,eAAA;AAAA,iBAqW3D,gBAAA,CAAiB,IAAA,UAAc,QAAA,YAAyB,eAAA;ADt6BxE;AAAA,iBCg/BgB,gBAAA,CAAiB,IAAA;AAAA,UAuBhB,cAAA;EACf,KAAA;EACA,GAAA;EACA,OAAA;EACA,OAAA;AAAA;;iBAkGc,aAAA,CAAc,KAAA,WAAgB,cAAA"}
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../../src/jsx.ts","../../../src/project-scanner.ts","../../../src/react-intercept.ts"],"mappings":";;AAqCA;;;;;;;;;;AAeA;;;;;;;;;;AAwCA;;;;;;;;;;;;ACrFA;UD8BiB,eAAA;;EAEf,OAAA;EC/BA;EDiCA,IAAA;EC/BA;EDiCA,MAAA;EC/BA;EDiCA,IAAA;AAAA;AAAA,UAOe,eAAA;ECpCA;EDsCf,IAAA;;EAEA,aAAA;ECvCA;EDyCA,QAAA,EAAU,eAAA;AAAA;AAAA,iBAkCI,YAAA,CAAa,IAAA,UAAc,QAAA,YAAyB,eAAA;;;;AAvDpE;;UC9BiB,SAAA;EACf,IAAA;EACA,IAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,MAAA;AAAA;AAAA,UAGe,aAAA;EACf,IAAA;EACA,IAAA;EACA,UAAA;EACA,WAAA;EACA,KAAA;AAAA;AAAA,UAGe,UAAA;EACf,IAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA,UAGe,cAAA;EACf,SAAA;EACA,OAAA;EACA,WAAA;EACA,MAAA,EAAQ,SAAA;EACR,UAAA,EAAY,aAAA;EACZ,OAAA,EAAS,UAAA;AAAA;AAAA,iBAGK,eAAA,CAAgB,GAAA,WAAc,cAAA;;;;ADF9C;;;;;;;;;;AAeA;;KEhCY,mBAAA;AAAA,UA0BK,eAAA;EFQf;EENA,IAAA,EAAM,mBAAA;EFUN;EERA,OAAA;EFQyB;EENzB,IAAA;EFwCc;EEtCd,MAAA;;EAEA,OAAA;EFoC2B;EElC3B,SAAA;EFkCkE;EEhClE,OAAA;AAAA;AAAA,UAGe,eAAA;EACf,IAAA;EACA,IAAA;EACA,WAAA;AAAA;AAAA,UAGe,eAAA;ED9DS;ECgExB,IAAA;ED9DA;ECgEA,WAAA,EAAa,eAAA;ED9Db;ECgEA,OAAA,EAAS,eAAA;AAAA;AAAA,iBAsgBK,mBAAA,CAAoB,IAAA,UAAc,QAAA,YAAyB,eAAA;AAAA,iBAqW3D,gBAAA,CAAiB,IAAA,UAAc,QAAA,YAAyB,eAAA;ADt6BxE;AAAA,iBCg/BgB,gBAAA,CAAiB,IAAA;AAAA,UAuBhB,cAAA;EACf,KAAA;EACA,GAAA;EACA,OAAA;EACA,OAAA;AAAA;;iBAkGc,aAAA,CAAc,KAAA,WAAgB,cAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/compiler",
-  "version": "0.12.9",
+  "version": "0.12.11",
   "description": "Template and JSX compiler for Pyreon",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/compiler#readme",
   "bugs": {

package/src/jsx.ts

@@ -43,7 +43,11 @@ export interface CompilerWarning {
   /** Source file column number (0-based) */
   column: number
   /** Warning code for filtering */
-  code: 'signal-call-in-jsx' | 'missing-key-on-for' | 'signal-in-static-prop'
+  code:
+    | 'signal-call-in-jsx'
+    | 'missing-key-on-for'
+    | 'signal-in-static-prop'
+    | 'circular-prop-derived'
 }
 
 export interface TransformResult {
@@ -117,6 +121,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
   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
@@ -138,7 +143,13 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
   function wrap(expr: ts.Expression): void {
     const start = expr.getStart(sf)
     const end = expr.getEnd()
-    replacements.push({ start, end, text: `() => ${sliceExpr(expr)}` })
+    // Object literals need parens: `() => { ... }` is a function body with
+    // labeled statements, not an object expression. Use `() => ({ ... })`.
+    const sliced = sliceExpr(expr)
+    const text = ts.isObjectLiteralExpression(expr)
+      ? `() => (${sliced})`
+      : `() => ${sliced}`
+    replacements.push({ start, end, text })
   }
 
   /** Try to hoist or wrap an expression, pushing a replacement if needed. */
@@ -227,7 +238,10 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
       } else if (shouldWrap(expr)) {
         const start = expr.getStart(sf)
         const end = expr.getEnd()
-        replacements.push({ start, end, text: `_rp(() => ${sliceExpr(expr)})` })
+        // Object literals need parens to disambiguate from arrow function body
+        const sliced = sliceExpr(expr)
+        const inner = ts.isObjectLiteralExpression(expr) ? `(${sliced})` : sliced
+        replacements.push({ start, end, text: `_rp(() => ${inner})` })
         needsRpImport = true
       }
     } else {
@@ -352,9 +366,11 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
         // Track: const x = props.y ?? z  OR  const x = own.y
         // Skip let/var — mutable variables can be reassigned, unsafe to inline
         // Skip declarations inside callbacks (map, filter, etc.)
+        // Skip stateful calls (signal, computed, effect) — inlining creates new instances
         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)
           }
@@ -402,25 +418,66 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
   // Resolve transitive AST: for each prop-derived var, recursively replace
   // references to other prop-derived vars in its AST with their resolved nodes.
   // Uses ts.visitNode for correct AST transformation — no string manipulation.
-  function resolveExprTransitive(node: ts.Expression, excludeVar?: string): ts.Expression {
+  //
+  // The `visited` set prevents infinite recursion on circular references:
+  //   const a = b + props.x;  const b = a + 1;
+  // Without it, resolving `a` reaches `b`, which reaches `a` again, and
+  // the compiler stack-overflows. The fix: when a variable is already in
+  // the visited set, leave the identifier as-is (it falls back to the
+  // captured const value, which is the correct runtime behavior for a
+  // circular dependency — the variable reads its value at definition time).
+  // Track which cycles have been warned about so we don't emit
+  // duplicate warnings for the same cycle seen from different vars.
+  const warnedCycles = new Set<string>()
+
+  function resolveExprTransitive(
+    node: ts.Expression,
+    visited: Set<string> = new Set(),
+    /** The source node used for warning locations. */
+    sourceNode?: ts.Node,
+  ): ts.Expression {
     return ts.visitNode(node, function visit(n: ts.Node): ts.Node {
-      if (ts.isIdentifier(n) && propDerivedVars.has(n.text) && n.text !== excludeVar) {
-        const parent = n.parent
-        // Skip property name after dot: obj.sizes
-        if (parent && ts.isPropertyAccessExpression(parent) && parent.name === n) {
-          return n
-        }
-        // Skip JSX attribute name: sizes={...}
-        if (parent && ts.isJsxAttribute(parent) && parent.name === n) {
+      if (ts.isIdentifier(n) && propDerivedVars.has(n.text)) {
+        // Cycle detection: if this variable is already in the visited
+        // set, we've found a circular reference. Leave the identifier
+        // as-is (falls back to captured const value) and emit a
+        // compiler warning so the developer knows reactivity is
+        // incomplete on this chain.
+        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
         }
-        // Skip shorthand property assignment: { sizes }
-        if (parent && ts.isShorthandPropertyAssignment(parent)) {
-          return n
+
+        const parent = n.parent
+        // ONLY inline identifiers that are REFERENCES (reads), never DECLARATIONS.
+        // An identifier is a declaration when it's the .name of its parent.
+        // Skip all non-reference positions to avoid replacing binding names,
+        // parameter names, property names, etc. with ParenthesizedExpressions.
+        if (parent) {
+          // Declaration positions — identifier defines a name, not reads one
+          if ('name' in parent && (parent as any).name === n) return n
+          // Shorthand property: { x } — the identifier is both key and value
+          if (ts.isShorthandPropertyAssignment(parent)) return n
         }
         const resolved = propDerivedVars.get(n.text)!
+        // Mark this variable as visited BEFORE recursing so cycles are
+        // detected on the next encounter rather than re-entering.
+        const nextVisited = new Set(visited)
+        nextVisited.add(n.text)
         return ts.factory.createParenthesizedExpression(
-          resolveExprTransitive(resolved, n.text),
+          resolveExprTransitive(resolved, nextVisited, sourceNode),
         )
       }
       return ts.visitEachChild(n, visit, undefined as any)
@@ -509,6 +566,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
     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";`
       : ''
@@ -608,6 +666,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
     let needsBindTextImport = false
     let needsBindDirectImport = false
     let needsApplyPropsImport = false
+    let needsMountSlotImport = false
 
     function nextVar(): string {
       return `__e${varIdx++}`
@@ -635,8 +694,17 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
     /** Emit bind line for a ref attribute. */
     function emitRef(attr: ts.JsxAttribute, varName: string): void {
       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
+      // Function ref: ref={(el) => { ... }} or ref={fn} → call with element
+      // Object ref: ref={myRef} → assign element to .current
+      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. */
@@ -884,6 +952,17 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
       // expression
       const needsPlaceholder = useMixed || useMultiExpr
       const { expr, isReactive } = unwrapAccessor(child.expression)
+
+      // Children slot: expression accesses .children (e.g. props.children, own.children)
+      // These can contain VNodes — use _mountSlot instead of text node binding.
+      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,
@@ -951,6 +1030,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
     if (needsBindTextImport) needsBindTextImportGlobal = true
     if (needsBindDirectImport) needsBindDirectImportGlobal = true
     if (needsApplyPropsImport) needsApplyPropsImportGlobal = true
+    if (needsMountSlotImport) needsMountSlotImportGlobal = true
 
     // Build bind function body
     const escaped = html.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
@@ -1064,7 +1144,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
   function sliceExpr(expr: ts.Expression): string {
     // Quick check: does this expression contain any prop-derived references?
     if (propDerivedVars.size > 0 && accessesProps(expr)) {
-      const resolved = resolveExprTransitive(expr)
+      const resolved = resolveExprTransitive(expr, new Set(), expr)
       return printer.printNode(ts.EmitHint.Expression, resolved, sf)
     }
     return code.slice(expr.getStart(sf), expr.getEnd())
@@ -1110,6 +1190,41 @@ const JSX_TO_HTML_ATTR: Record<string, string> = {
   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: ts.Node): boolean {
+  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: ts.Expression, expr: string): boolean {
+  // Direct property access: props.children, own.children
+  if (ts.isPropertyAccessExpression(node) && node.name.text === 'children') return true
+  // Bare identifier named 'children'
+  if (ts.isIdentifier(node) && node.text === 'children') return true
+  // String fallback for inlined expressions
+  if (expr.endsWith('.children') || expr === 'children') return true
+  return false
+}
+
 function isLowerCase(s: string): boolean {
   return s.length > 0 && s[0] === s[0]?.toLowerCase()
 }
@@ -1126,7 +1241,11 @@ function escapeHtmlAttr(s: string): string {
 }
 
 function escapeHtmlText(s: string): string {
-  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;')
+  // TypeScript's JsxText preserves HTML entities as-is (e.g. "&lt;" stays "&lt;",
+  // not decoded to "<"). Since the template is parsed via innerHTML, entities are
+  // already valid HTML — pass them through. Only escape raw `<` and raw `&` that
+  // are NOT part of existing entities.
+  return s.replace(/&(?!(?:#\d+|#x[\da-fA-F]+|[a-zA-Z]\w*);)/g, '&amp;').replace(/</g, '&lt;')
 }
 
 // ─── Static JSX analysis ──────────────────────────────────────────────────────

package/src/tests/jsx.test.ts

@@ -766,9 +766,17 @@ describe('JSX transform — template emission', () => {
     expect(result).toContain('setAttribute("title"')
   })
 
-  test('ref attribute in template binds .current', () => {
+  test('ref attribute in template binds .current for object refs', () => {
     const result = t('<div ref={myRef}><span /></div>')
-    expect(result).toContain('myRef.current = __root')
+    // Object refs go through a runtime check (could also be a function)
+    expect(result).toContain('myRef')
+    expect(result).toContain('.current = __root')
+  })
+
+  test('ref attribute in template calls function refs', () => {
+    const result = t('<div ref={(el) => { myEl = el }}><span /></div>')
+    // Arrow function refs are called with the element
+    expect(result).toContain('((el) => { myEl = el })(__root)')
   })
 
   test('handles non-void self-closing element as closing tag', () => {
@@ -1417,4 +1425,232 @@ describe('JSX transform — AST inlining (template literals, ternaries)', () =>
     const result = t('function C(props) { const key = props.key; return <div>{obj[key]}</div> }')
     expect(result).toContain('props.key')
   })
+
+  test('type cast "as" in prop-derived var does not crash compiler', () => {
+    // Regression: const sel = state.selected() as string[] inside JSX arrow
+    // caused ParenthesizedExpression to replace a BindingName, crashing ts.visitEachChild
+    const result = t(`
+      function C(props) {
+        const items = props.data
+        return <div>{() => {
+          const sel = items as any
+          return sel
+        }}</div>
+      }
+    `)
+    expect(result).toBeDefined()
+  })
+
+  test('variable declaration name is not inlined by resolveExprTransitive', () => {
+    const result = t(`
+      function C(props) {
+        const x = props.val
+        const y = x
+        return <div>{y}</div>
+      }
+    `)
+    expect(result).toContain('props.val')
+  })
+
+  test('parameter name matching prop-derived var does not crash', () => {
+    // (val: string) => ... where "val" might match a prop-derived var
+    const result = t(`
+      function C(props) {
+        const val = props.value
+        return <div>{() => [1,2].map((val) => <span>{val}</span>)}</div>
+      }
+    `)
+    expect(result).toBeDefined()
+  })
+
+  test('catch clause variable matching prop-derived var does not crash', () => {
+    const result = t(`
+      function C(props) {
+        const err = props.error
+        return <div>{() => { try {} catch(err) { return err } }}</div>
+      }
+    `)
+    expect(result).toBeDefined()
+  })
+
+  test('binding element matching prop-derived var does not crash', () => {
+    const result = t(`
+      function C(props) {
+        const x = props.x
+        return <div>{() => { const { x } = obj; return x }}</div>
+      }
+    `)
+    expect(result).toBeDefined()
+  })
+
+  test('HTML entities in JSX text are not double-escaped', () => {
+    const result = t('function C() { return <button>&lt; prev</button> }')
+    expect(result).toContain('&lt;')
+    expect(result).not.toContain('&amp;lt;')
+  })
+
+  test('mixed HTML entities and raw ampersands', () => {
+    const result = t('function C() { return <span>A &amp; B &lt; C</span> }')
+    expect(result).toContain('&amp;')
+    expect(result).toContain('&lt;')
+    expect(result).not.toContain('&amp;amp;')
+    expect(result).not.toContain('&amp;lt;')
+  })
+
+  test('props.children in template uses _mountSlot instead of createTextNode', () => {
+    const result = t('function C(props) { return <div>{props.children}</div> }')
+    expect(result).toContain('_mountSlot')
+    expect(result).not.toContain('createTextNode')
+    expect(result).not.toContain('.data')
+  })
+
+  test('own.children in template uses _mountSlot', () => {
+    const result = t('function C(props) { const own = props; return <label><input/>{own.children}</label> }')
+    expect(result).toContain('_mountSlot')
+    expect(result).toContain('own.children')
+  })
+
+  test('non-children prop access still uses text node binding', () => {
+    const result = t('function C(props) { return <div>{props.name}</div> }')
+    expect(result).not.toContain('_mountSlot')
+    expect(result).toContain('.data')
+  })
+
+  test('signal() calls are NOT inlined as prop-derived vars', () => {
+    const result = t(`
+      function C(props) {
+        const open = signal(props.defaultOpen ?? false)
+        return <div>{() => open() ? 'yes' : 'no'}</div>
+      }
+    `)
+    // open should be referenced as-is, NOT replaced with signal(props.defaultOpen ?? false)
+    expect(result).toContain('open()')
+    // signal() should appear only once — in the original declaration
+    const signalMatches = result.match(/signal\(props\.defaultOpen/g)
+    expect(signalMatches?.length ?? 0).toBe(1)
+  })
+})
+
+// ─── Circular reference safety ─────────────────────────────────────────────
+
+describe('JSX transform — circular prop-derived var cycles do not crash', () => {
+  // Before the fix (PR #204), resolveExprTransitive used a single
+  // `excludeVar` parameter that only prevented immediate re-entry on the
+  // same variable. Multi-step cycles (a → b → a) alternated between
+  // the two identifiers and recursed infinitely, crashing the compiler
+  // with "Maximum call stack size exceeded."
+  //
+  // The fix replaces `excludeVar` with a `visited: Set<string>` that
+  // tracks the entire call stack. When a variable is already visited,
+  // the identifier is left as-is (falls back to the captured const
+  // value at runtime) and a compiler warning is emitted.
+
+  // Use transformJSX directly (not the `t` helper) so we can assert
+  // on both the code AND the warnings.
+  const full = (code: string) => transformJSX(code, 'input.tsx')
+
+  test('two-variable cycle: a ↔ b does not stack-overflow and emits warning', () => {
+    const result = full(`
+      function Comp(props) {
+        const a = b + props.x;
+        const b = a + 1;
+        return <div>{a}</div>
+      }
+    `)
+    // Should compile (not crash) and produce valid output
+    expect(result.code).toBeDefined()
+    expect(result.code).toContain('_tpl')
+
+    // Should emit a circular-prop-derived warning
+    const cycleWarnings = result.warnings.filter((w) => w.code === 'circular-prop-derived')
+    expect(cycleWarnings.length).toBeGreaterThanOrEqual(1)
+    expect(cycleWarnings[0]?.message).toMatch(/Circular prop-derived/)
+  })
+
+  test('three-variable cycle: a → b → c → a does not stack-overflow', () => {
+    const result = full(`
+      function Comp(props) {
+        const a = c + props.x;
+        const b = a + 1;
+        const c = b + 2;
+        return <div>{a}</div>
+      }
+    `)
+    expect(result.code).toBeDefined()
+    expect(result.code).toContain('_tpl')
+
+    const cycleWarnings = result.warnings.filter((w) => w.code === 'circular-prop-derived')
+    expect(cycleWarnings.length).toBeGreaterThanOrEqual(1)
+  })
+
+  test('self-referencing variable does not stack-overflow', () => {
+    const result = full(`
+      function Comp(props) {
+        const a = a + props.x;
+        return <div>{a}</div>
+      }
+    `)
+    expect(result.code).toBeDefined()
+
+    const cycleWarnings = result.warnings.filter((w) => w.code === 'circular-prop-derived')
+    expect(cycleWarnings.length).toBeGreaterThanOrEqual(1)
+    expect(cycleWarnings[0]?.message).toContain('a')
+  })
+
+  test('cycle still inlines the non-cyclic parts correctly', () => {
+    // const a = b + props.x;  const b = a + 1;
+    // When resolving `a` for JSX: `b + props.x` → `b` is cycle-broken
+    // (left as identifier `b`), `props.x` is inlined as `props.x`.
+    const result = full(`
+      function Comp(props) {
+        const a = b + props.x;
+        const b = a + 1;
+        return <div>{a}</div>
+      }
+    `)
+    // Non-cyclic part (props.x) is still inlined reactively
+    expect(result.code).toContain('props.x')
+    expect(result.code).toContain('_bind')
+    // Cyclic identifier `b` is left as-is (not further resolved)
+    // The _bind should reference `b` directly since it's the cycle-break point
+    expect(result.code).toMatch(/\bb\b/)
+  })
+
+  test('non-cyclic deep chain still works after the cycle fix', () => {
+    // Regression guard: the visited-set fix must NOT break the existing
+    // non-cyclic transitive resolution (a → b → c, no cycle).
+    const result = full(`
+      function Comp(props) {
+        const a = props.x;
+        const b = a + 1;
+        const c = b * 2;
+        return <div>{c}</div>
+      }
+    `)
+    expect(result.code).toContain('props.x')
+    expect(result.code).toContain('_bind')
+    // c should be fully inlined — not left as a static reference
+    expect(result.code).not.toMatch(/__t\d+\.data = c\b/)
+    // No cycle warnings on a non-cyclic chain
+    const cycleWarnings = result.warnings.filter((w) => w.code === 'circular-prop-derived')
+    expect(cycleWarnings.length).toBe(0)
+  })
+
+  test('warning message includes the cycle chain for debugging', () => {
+    const result = full(`
+      function Comp(props) {
+        const a = b + props.x;
+        const b = a + 1;
+        return <div>{a}</div>
+      }
+    `)
+    const cycleWarnings = result.warnings.filter((w) => w.code === 'circular-prop-derived')
+    expect(cycleWarnings.length).toBeGreaterThanOrEqual(1)
+    // The warning should mention both variables in the cycle chain
+    const msg = cycleWarnings[0]!.message
+    expect(msg).toContain('a')
+    expect(msg).toContain('b')
+    // And suggest how to fix it
+    expect(msg).toContain('props.*')
+  })
 })