@pyreon/compiler 0.12.4 → 0.12.6

package/package.json

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

package/src/jsx.ts

@@ -116,6 +116,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
   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
@@ -137,7 +138,8 @@ 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: `() => ${code.slice(start, end)}` })
+    const exprText = inlineVarsInText(code.slice(start, end))
+    replacements.push({ start, end, text: `() => ${exprText}` })
   }
 
   /** Try to hoist or wrap an expression, pushing a replacement if needed. */
@@ -154,7 +156,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
 
   /** Try to emit a template for a JsxElement. Returns true if handled. */
   function tryTemplateEmit(node: ts.JsxElement): boolean {
-    const elemCount = templateElementCount(node)
+    const elemCount = templateElementCount(node, /* isRoot */ true)
     if (elemCount < 1) return false
     const tplCall = buildTemplateCall(node)
     if (!tplCall) return false
@@ -254,6 +256,223 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
     ts.forEachChild(expr, walk)
   }
 
+  // ── Prop-derived variable tracking ─────────────────────────────────────────
+  // Pre-pass: find variables derived from props/splitProps results inside
+  // component functions. These are inlined at JSX use sites so the compiler's
+  // existing wrapping makes them reactive.
+  //
+  // Example:
+  //   const align = props.alignX ?? 'left'
+  //   return <div class={align}>  ← inlined to: class={props.alignX ?? 'left'}
+  //                                 ← compiler wraps: class={() => props.alignX ?? 'left'}
+
+  /** Names that refer to the props object or splitProps results. */
+  const propsNames = new Set<string>()
+
+  /** Map of variable name → source text of the original expression. */
+  const propDerivedVars = new Map<string, string>()
+
+  /** Check if an expression reads from a tracked props-like object. */
+  function readsFromProps(node: ts.Node): boolean {
+    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)
+    }
+    // Check children recursively — e.g. props.x ?? 'default'
+    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: ts.Node): void {
+    // Track callback nesting — don't track vars inside callbacks
+    if ((ts.isArrowFunction(node) || ts.isFunctionExpression(node))) {
+      const parent = node.parent
+      if (parent && ts.isCallExpression(parent) && parent.arguments.includes(node as any)) {
+        _callbackDepth++
+        ts.forEachChild(node, scanForPropDerivedVars)
+        _callbackDepth--
+        return
+      }
+    }
+    // Track the function's first parameter as a props name.
+    // Only for COMPONENT functions — not callbacks like .map(item => <div>...)
+    // Heuristic: component functions are named declarations, const assignments,
+    // or export defaults — NOT inline arguments to calls like .map(), .filter().
+    if ((ts.isFunctionDeclaration(node) || ts.isArrowFunction(node) || ts.isFunctionExpression(node))
+      && node.parameters.length > 0) {
+
+      // Skip functions that are arguments to a call (map/filter callbacks)
+      const parent = node.parent
+      if (parent && ts.isCallExpression(parent) && parent.arguments.includes(node as any)) {
+        ts.forEachChild(node, scanForPropDerivedVars)
+        return
+      }
+
+      const firstParam = node.parameters[0]!
+      if (ts.isIdentifier(firstParam.name)) {
+        // Check if this function returns JSX (is a component)
+        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)
+      }
+    }
+
+    // Track splitProps results: const [own, rest] = splitProps(props, [...])
+    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)
+              }
+            }
+          }
+        }
+
+        // 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.)
+        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)
+  }
+
+  // Run pre-pass
+  scanForPropDerivedVars(sf)
+
+  // Transitive resolution: if const b = a + 1 where a is prop-derived,
+  // then b is also prop-derived. Inline b → (a + 1) → ((props.x) + 1).
+  // Fixed-point iteration until no new variables are added.
+  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 // already tracked
+        if (node.declarationList.flags & ts.NodeFlags.Let) continue // skip let
+        // Check if the initializer references any existing prop-derived var
+        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
+        }
+      }
+    })
+  }
+
+  // Resolve transitive inlining: if b's expr references a, replace a with its expr
+  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: string): string {
+    if (propDerivedVars.size === 0) return text
+    let result = text
+    for (const [varName, expr] of propDerivedVars) {
+      // Replace standalone variable references only.
+      // Must NOT match:
+      //   - property access: obj.varName (preceded by .)
+      //   - property name in object: { varName: ... } (followed by :)
+      //   - part of longer identifier: varNameExtra
+      // Lookbehind ensures not preceded by . or alphanumeric
+      // Lookahead ensures not followed by alphanumeric or :
+      const re = new RegExp(`(?<![.\\w])${varName}(?![\\w:])`, 'g')
+      result = result.replace(re, `(${expr})`)
+    }
+    return result
+  }
+
+  function isDynamic(node: ts.Node): boolean {
+    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: ts.Node): boolean {
+    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: ts.Expression): boolean {
+    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: ts.Node): void {
     if (ts.isJsxElement(node) && tryTemplateEmit(node)) return
     if (ts.isJsxSelfClosingElement(node) || ts.isJsxElement(node)) checkForWarnings(node)
@@ -296,6 +515,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
     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";`
       : ''
@@ -313,10 +533,19 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
 
   // ── Template emission helpers (closures over sf, code) ──────────────────────
 
-  /** Check if a single attribute would prevent template emission. */
-  function hasBailAttr(node: ts.JsxElement | ts.JsxSelfClosingElement): boolean {
+  /**
+   * 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: ts.JsxElement | ts.JsxSelfClosingElement, isRoot = false): boolean {
     for (const attr of jsxAttrs(node)) {
-      if (ts.isJsxSpreadAttribute(attr)) return true
+      if (ts.isJsxSpreadAttribute(attr)) {
+        // Allow spread on root element — handled in buildTemplateCall
+        if (isRoot) continue
+        return true
+      }
       if (ts.isJsxAttribute(attr) && ts.isIdentifier(attr.name) && attr.name.text === 'key')
         return true
     }
@@ -343,10 +572,13 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
    * Count DOM elements in a JSX subtree. Returns -1 if the tree is not
    * eligible for template emission.
    */
-  function templateElementCount(node: ts.JsxElement | ts.JsxSelfClosingElement): number {
+  function templateElementCount(
+    node: ts.JsxElement | ts.JsxSelfClosingElement,
+    isRoot = false,
+  ): number {
     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
@@ -382,6 +614,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
     const reactiveBindExprs: string[] = []
     let needsBindTextImport = false
     let needsBindDirectImport = false
+    let needsApplyPropsImport = false
 
     function nextVar(): string {
       return `__e${varIdx++}`
@@ -469,7 +702,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
       if (ts.isArrowFunction(exprNode) || ts.isFunctionExpression(exprNode)) {
         return { expr: `(${sliceExpr(exprNode)})()`, isReactive: true }
       }
-      return { expr: sliceExpr(exprNode), isReactive: containsCall(exprNode) }
+      return { expr: sliceExpr(exprNode), isReactive: isDynamic(exprNode) }
     }
 
     /** Build a setter expression for an attribute. */
@@ -559,6 +792,18 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
 
     /** Process a single attribute, returning HTML to append. */
     function processOneAttr(attr: ts.JsxAttributeLike, varName: string): string {
+      // Spread attribute: apply all props at runtime
+      if (ts.isJsxSpreadAttribute(attr)) {
+        const expr = sliceExpr(attr.expression)
+        // Use runtime-dom's applyProps which handles class, style, events, etc.
+        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 ''
@@ -598,8 +843,11 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
         const d = nextDisp()
         bindLines.push(`const ${d} = _bindText(${directRef}, ${tVar})`)
       } else {
-        // Collected into the combined _bind at the end
-        reactiveBindExprs.push(`${tVar}.data = ${expr}`)
+        // Each reactive text child gets its own _bind — independent tracking.
+        // When r.name() changes, r.email()'s _bind doesn't re-run.
+        needsBindImportGlobal = true
+        const d = nextDisp()
+        bindLines.push(`const ${d} = _bind(() => { ${tVar}.data = ${inlineVarsInText(expr)} })`)
       }
       return needsPlaceholder ? '<!>' : ''
     }
@@ -709,6 +957,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
 
     if (needsBindTextImport) needsBindTextImportGlobal = true
     if (needsBindDirectImport) needsBindDirectImportGlobal = true
+    if (needsApplyPropsImport) needsApplyPropsImportGlobal = true
 
     // Build bind function body
     const escaped = html.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
@@ -722,7 +971,7 @@ export function transformJSX(code: string, filename = 'input.tsx'): TransformRes
     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} })`)
     }
 
@@ -933,22 +1182,47 @@ function isStatic(node: ts.Expression): boolean {
     node.kind === ts.SyntaxKind.NullKeyword ||
     node.kind === ts.SyntaxKind.UndefinedKeyword
   )
+  // Note: object/array literals are NOT static — they need runtime application
+  // (e.g., style={{ color: "red" }} requires Object.assign at runtime).
 }
 
-function shouldWrap(node: ts.Expression): boolean {
-  // Already a function — user explicitly wrapped or it's a callback
-  if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) return false
-  // Static literal — no signals involved
-  if (isStatic(node)) return false
-  // Only wrap if the expression tree contains a call — signal reads are always
-  // function calls (e.g. `count()`, `name()`). Plain identifiers, object literals
-  // like `style={{ color: "red" }}`, array literals, and member accesses are
-  // left as-is to avoid unnecessary reactive wrappers.
-  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: ts.CallExpression): boolean {
+  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
+  // Pure call with all static arguments → result is static
+  return node.arguments.every((arg) => !ts.isSpreadElement(arg) && isStatic(arg))
 }
 
 function containsCall(node: ts.Node): boolean {
-  if (ts.isCallExpression(node)) return true
+  if (ts.isCallExpression(node)) {
+    // Skip pure calls with static args
+    if (isPureStaticCall(node as ts.CallExpression)) return false
+    return true
+  }
   if (ts.isTaggedTemplateExpression(node)) return true
   // Don't recurse into nested functions — they're self-contained
   if (ts.isArrowFunction(node) || ts.isFunctionExpression(node)) return false

package/src/tests/jsx.test.ts

@@ -528,8 +528,14 @@ describe('JSX transform — template emission', () => {
     expect(result).not.toContain('_tpl(')
   })
 
-  test('does NOT emit _tpl for spread attributes', () => {
+  test('emits _tpl for root spread with _applyProps in bind', () => {
     const result = t('<div {...props}><span /></div>')
+    expect(result).toContain('_tpl(')
+    expect(result).toContain('_applyProps(__root, props)')
+  })
+
+  test('does NOT emit _tpl for spread on inner elements', () => {
+    const result = t('<div><span {...innerProps} /></div>')
     expect(result).not.toContain('_tpl(')
   })
 
@@ -1174,3 +1180,188 @@ describe('JSX transform — style attribute in templates', () => {
     expect(result).toContain('style.cssText')
   })
 })
+
+// ─── Pure call detection ────────────────────────────────────────────────────
+
+describe('JSX transform — pure call detection', () => {
+  test('Math.max with static args is not wrapped', () => {
+    const result = t('<div>{Math.max(5, 10)}</div>')
+    expect(result).not.toContain('() =>')
+  })
+
+  test('JSON.stringify with string arg is not wrapped', () => {
+    const result = t('<div>{JSON.stringify("hello")}</div>')
+    expect(result).not.toContain('() =>')
+  })
+
+  test('JSON.stringify with object arg IS wrapped (object not static)', () => {
+    const result = t('<div>{JSON.stringify({a: 1})}</div>')
+    // Object literals are not considered static by the compiler
+    expect(result).toContain('.data =')
+  })
+
+  test('Math.max with dynamic arg (signal call) IS wrapped', () => {
+    const result = t('<div>{Math.max(count(), 10)}</div>')
+    // Dynamic argument means the result depends on a signal
+    expect(result).toContain('Math.max(count(), 10)')
+    expect(result).toContain('.data =')
+  })
+
+  test('unknown function call IS wrapped', () => {
+    const result = t('<div>{unknownFn(5)}</div>')
+    // Unknown function is not in PURE_CALLS, so it gets wrapped
+    expect(result).toContain('.data =')
+  })
+
+  test('Math.floor with static arg is not wrapped', () => {
+    const result = t('<div>{Math.floor(3.14)}</div>')
+    expect(result).not.toContain('() =>')
+  })
+
+  test('Number.parseInt with static arg is not wrapped', () => {
+    const result = t('<div>{Number.parseInt("42", 10)}</div>')
+    expect(result).not.toContain('() =>')
+  })
+})
+
+// ─── Per-text-node bind (separate bindings) ─────────────────────────────────
+
+describe('JSX transform — per-text-node bind', () => {
+  test('two adjacent signal calls produce two separate _bindText calls', () => {
+    const result = t('<div>{a()}{b()}</div>')
+    expect(result).toContain('_bindText(a,')
+    expect(result).toContain('_bindText(b,')
+  })
+
+  test('two signal expressions with text between produce separate bindings', () => {
+    const result = t('<div>{a()} and {b()}</div>')
+    expect(result).toContain('_bindText(a,')
+    expect(result).toContain('_bindText(b,')
+  })
+
+  test('three signal calls produce three separate _bindText calls', () => {
+    const result = t('<div>{a()}{b()}{c()}</div>')
+    expect(result).toContain('_bindText(a,')
+    expect(result).toContain('_bindText(b,')
+    expect(result).toContain('_bindText(c,')
+  })
+})
+
+// ─── Reactive props auto-detection ──────────────────────────────────────────
+
+describe('JSX transform — reactive props detection', () => {
+  test('props.x in text child is reactive (wrapped in _bind)', () => {
+    const result = t('function Comp(props) { return <div>{props.name}</div> }')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('props.name')
+  })
+
+  test('props.x in attribute is reactive (wrapped in _bind)', () => {
+    const result = t('function Comp(props) { return <div class={props.cls}></div> }')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('props.cls')
+  })
+
+  test('prop-derived variable inlined in text child', () => {
+    const result = t('function Comp(props) { const x = props.name ?? "anon"; return <div>{x}</div> }')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('props.name ?? "anon"')
+    // x should be inlined, not used directly
+    expect(result).not.toMatch(/__t\d+\.data = x\b/)
+  })
+
+  test('prop-derived variable inlined in attribute', () => {
+    const result = t('function Comp(props) { const align = props.alignX ?? "left"; return <div class={align}></div> }')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('props.alignX ?? "left"')
+  })
+
+  test('splitProps results tracked as props-like', () => {
+    const result = t('function Comp(props) { const [own, rest] = splitProps(props, ["x"]); const v = own.x ?? 5; return <div>{v}</div> }')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('own.x ?? 5')
+  })
+
+  test('non-component function NOT tracked (no JSX)', () => {
+    const result = t('function helper(props) { const x = props.y; return x }')
+    expect(result).not.toContain('_bind')
+    expect(result).not.toContain('_tpl')
+  })
+
+  test('static values unchanged by props tracking', () => {
+    const result = t('function Comp(props) { return <div class="static">text</div> }')
+    expect(result).toContain('_tpl("<div class=\\"static\\">text</div>"')
+    expect(result).not.toContain('_bind')
+  })
+
+  test('signal calls still work alongside props detection', () => {
+    const result = t('function Comp(props) { return <div>{count()}</div> }')
+    expect(result).toContain('_bindText(count,')
+  })
+
+  test('arrow function component detected', () => {
+    const result = t('const Comp = (props) => <div>{props.x}</div>')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('props.x')
+  })
+})
+
+// ─── Transitive prop derivation ─────────────────────────────────────────────
+
+describe('JSX transform — transitive prop derivation', () => {
+  test('const b = a + 1 where a is prop-derived', () => {
+    const result = t('function Comp(props) { const a = props.x; const b = a + 1; return <div>{b}</div> }')
+    expect(result).toContain('_bind(() => {')
+    expect(result).toContain('props.x')
+    // b should be inlined transitively
+    expect(result).not.toMatch(/__t\d+\.data = b\b/)
+  })
+
+  test('deep chain: c = b * 2, b = a + 1, a = props.x', () => {
+    const result = t('function Comp(props) { const a = props.x; const b = a + 1; const c = b * 2; return <div>{c}</div> }')
+    expect(result).toContain('props.x')
+    // Full chain inlined
+    expect(result).toContain('_bind')
+  })
+
+  test('non-prop-derived variable NOT inlined', () => {
+    const result = t('function Comp(props) { const x = 42; return <div>{x}</div> }')
+    // x = 42 is static, not prop-derived — should NOT be wrapped
+    expect(result).not.toContain('_bind')
+  })
+
+  test('let variables NOT tracked (mutable — can be reassigned)', () => {
+    const result = t('function Comp(props) { let x = props.y; x = "override"; return <div>{x}</div> }')
+    // let is excluded — x is NOT inlined, set statically
+    expect(result).toContain('textContent = x')
+    expect(result).not.toContain('_bind')
+  })
+
+  test('mixed props and signals in same expression', () => {
+    const result = t('function Comp(props) { return <div class={`${props.base} ${count()}`}></div> }')
+    expect(result).toContain('_bind(() => {')
+  })
+
+  test('prop-derived used in non-JSX stays static', () => {
+    // The variable is still captured — only JSX usage is inlined
+    const result = t('function Comp(props) { const x = props.y; console.log(x); return <div>{x}</div> }')
+    // console.log(x) uses the captured value — compiler doesn't touch it
+    expect(result).toContain('console.log(x)')
+    // JSX usage is inlined
+    expect(result).toContain('props.y')
+    expect(result).toContain('_bind')
+  })
+
+  test('.map() callback params NOT treated as props', () => {
+    const result = t('function App(props) { return <div>{tabs.map((tab) => { const C = tab.component; return <div><C /></div> })}</div> }')
+    // tab is a callback param, not a component's props — should NOT be tracked
+    expect(result).not.toContain('(tab.component)')
+  })
+
+  test('prop read with ?? default used multiple times', () => {
+    const result = t('function Comp(props) { const x = props.a ?? "def"; return <div class={x}>{x}</div> }')
+    // Both uses should be inlined
+    const matches = result.match(/props\.a \?\? "def"/g)
+    expect(matches?.length).toBeGreaterThanOrEqual(2)
+  })
+})