pulse-js-framework 1.7.29 → 1.7.31

package/cli/dev.js

@@ -134,12 +134,15 @@ export async function startDevServer(args) {
             });
             res.end(result.code);
           } else {
+            const errorDetails = result.errors.map(e => `${e.message} at line ${e.line || '?'}:${e.column || '?'}`).join('\n');
+            console.error(`[Pulse] Compilation error in ${filePath}:`, result.errors);
             res.writeHead(500, { 'Content-Type': 'text/plain' });
-            res.end(`Compilation error: ${result.errors.map(e => e.message).join('\n')}`);
+            res.end(`Compilation error: ${errorDetails}\nFile: ${filePath}`);
           }
         } catch (error) {
+          console.error(`[Pulse] Error compiling ${filePath}:`, error);
           res.writeHead(500, { 'Content-Type': 'text/plain' });
-          res.end(`Error: ${error.message}`);
+          res.end(`Error: ${error.message}\nFile: ${filePath}`);
         }
         return;
       }

package/cli/index.js

@@ -15,8 +15,14 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 // Version - read dynamically from package.json
-const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf-8'));
-const VERSION = pkg.version;
+let VERSION = '0.0.0';
+try {
+  const pkgContent = readFileSync(join(__dirname, '..', 'package.json'), 'utf-8');
+  const pkg = JSON.parse(pkgContent);
+  VERSION = pkg.version || VERSION;
+} catch (err) {
+  log.warn(`Could not read package.json: ${err.message}`);
+}
 
 // Available example templates
 const TEMPLATES = {
@@ -683,10 +689,19 @@ async function initProject(args) {
 
   if (existsSync(pkgPath)) {
     try {
-      pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'));
-      log.info('Found existing package.json, merging...');
+      const pkgContent = readFileSync(pkgPath, 'utf-8');
+      if (!pkgContent.trim()) {
+        log.warn('Existing package.json is empty, creating new one.');
+      } else {
+        pkg = JSON.parse(pkgContent);
+        log.info('Found existing package.json, merging...');
+      }
     } catch (e) {
-      log.warn('Could not parse existing package.json, creating new one.');
+      if (e instanceof SyntaxError) {
+        log.warn(`Invalid JSON in package.json: ${e.message}. Creating new one.`);
+      } else {
+        log.warn(`Could not read package.json: ${e.message}. Creating new one.`);
+      }
     }
   }
 

package/compiler/parser.js

@@ -1597,9 +1597,14 @@ export class Parser {
 
         // Special case: . or # after an identifier needs space (descendant selector)
         // e.g., ".school .date" - need space between "school" and "."
+        // BUT NOT for "body.dark" where . is directly adjacent to body (no whitespace)
+        // We check if tokens are adjacent by comparing positions
+        const expectedNextCol = lastToken ? (lastToken.column + String(lastToken.value).length) : 0;
+        const tokensAreAdjacent = token.column === expectedNextCol;
         const isDescendantSelector = (tokenValue === '.' || tokenValue === '#') &&
                                      lastToken?.type === TokenType.IDENT &&
-                                     !inAtRule;  // Don't add space in @media selectors
+                                     !inAtRule &&  // Don't add space in @media selectors
+                                     !tokensAreAdjacent;  // Only add space if not directly adjacent
 
         // Special case: hyphenated class/id names like .job-title, .card-3d, max-width
         // Check if we're continuing a class/id name - the last part should end with alphanumeric

package/compiler/sourcemap.js

@@ -210,9 +210,11 @@ export class SourceMapGenerator {
    * @returns {string} Comment with base64 encoded source map
    */
   toComment() {
-    const base64 = typeof btoa === 'function'
-      ? btoa(this.toString())
-      : Buffer.from(this.toString()).toString('base64');
+    // Use Buffer for base64 encoding (supports UTF-8, unlike btoa which is Latin1-only)
+    const json = this.toString();
+    const base64 = typeof Buffer !== 'undefined'
+      ? Buffer.from(json, 'utf-8').toString('base64')
+      : btoa(unescape(encodeURIComponent(json))); // Browser fallback for UTF-8
     return `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64}`;
   }
 

package/compiler/transformer/constants.js

@@ -33,7 +33,8 @@ export const PUNCT_NO_SPACE_AFTER = [
 /** JavaScript statement keywords */
 export const STATEMENT_KEYWORDS = new Set([
   'let', 'const', 'var', 'return', 'if', 'else', 'for', 'while',
-  'switch', 'throw', 'try', 'catch', 'finally'
+  'switch', 'throw', 'try', 'catch', 'finally', 'break', 'continue',
+  'case', 'default'
 ]);
 
 /** Built-in JavaScript functions and objects */

package/compiler/transformer/expressions.js

@@ -25,9 +25,9 @@ export function transformExpression(transformer, node) {
 
   switch (node.type) {
     case NodeType.Identifier:
-      // Props take precedence over state (props are destructured in render scope)
+      // Props and state are both reactive (wrapped in computed via useProp or pulse)
       if (transformer.propVars.has(node.name)) {
-        return node.name;
+        return `${node.name}.get()`;
       }
       if (transformer.stateVars.has(node.name)) {
         return `${node.name}.get()`;
@@ -47,12 +47,18 @@ export function transformExpression(transformer, node) {
 
     case NodeType.MemberExpression: {
       const obj = transformExpression(transformer, node.object);
-      // Use optional chaining when accessing properties on function call results
+      // Use optional chaining when accessing properties on:
+      // 1. Function call results (could return null/undefined)
+      // 2. Props (commonly receive null values like notification: null)
+      // Note: State vars don't get optional chaining to avoid breaking array/object methods
       const isCallResult = node.object.type === NodeType.CallExpression;
-      const accessor = isCallResult ? '?.' : '.';
+      const isProp = node.object.type === NodeType.Identifier &&
+        transformer.propVars.has(node.object.name);
+      const useOptionalChaining = isCallResult || isProp;
+      const accessor = useOptionalChaining ? '?.' : '.';
       if (node.computed) {
         const prop = transformExpression(transformer, node.property);
-        return isCallResult ? `${obj}?.[${prop}]` : `${obj}[${prop}]`;
+        return useOptionalChaining ? `${obj}?.[${prop}]` : `${obj}[${prop}]`;
       }
       return `${obj}${accessor}${node.property}`;
     }
@@ -156,20 +162,33 @@ export function transformExpression(transformer, node) {
  * @returns {string} Transformed expression string
  */
 export function transformExpressionString(transformer, exprStr) {
-  // Simple transformation: wrap state vars with .get()
-  // Props take precedence - don't wrap props with .get()
+  // Simple transformation: wrap state and prop vars with .get()
+  // Both are now reactive (useProp returns computed for uniform interface)
   let result = exprStr;
+
+  // Transform state vars
   for (const stateVar of transformer.stateVars) {
-    // Skip if this var name is also a prop (props shadow state in render scope)
-    if (transformer.propVars.has(stateVar)) {
-      continue;
-    }
     result = result.replace(
       new RegExp(`\\b${stateVar}\\b`, 'g'),
       `${stateVar}.get()`
     );
   }
 
+  // Transform prop vars (now also reactive via useProp)
+  // Add optional chaining when followed by property access for nullable props
+  // Props commonly receive null values (e.g., notification: null)
+  for (const propVar of transformer.propVars) {
+    result = result.replace(
+      new RegExp(`\\b${propVar}\\b(?=\\.)`, 'g'),
+      `${propVar}.get()?`
+    );
+    // Handle standalone prop var (not followed by property access)
+    result = result.replace(
+      new RegExp(`\\b${propVar}\\b(?!\\.)`, 'g'),
+      `${propVar}.get()`
+    );
+  }
+
   // NOTE: Removed aggressive optional chaining regex that was adding ?.
   // after ALL function calls. This caused false positives like:
   // "User.name" -> "User?.name" in string literals.
@@ -186,7 +205,7 @@ export function transformExpressionString(transformer, exprStr) {
  * @returns {string} JavaScript code
  */
 export function transformFunctionBody(transformer, tokens) {
-  const { stateVars, actionNames } = transformer;
+  const { stateVars, propVars, actionNames } = transformer;
   let code = '';
   let lastToken = null;
   let lastNonSpaceToken = null;
@@ -194,15 +213,17 @@ export function transformFunctionBody(transformer, tokens) {
   // Tokens that must follow } directly without semicolon
   const NO_SEMI_BEFORE = new Set(['catch', 'finally', 'else']);
 
-  const needsManualSemicolon = (token, nextToken, lastNonSpace) => {
+  const needsManualSemicolon = (token, nextToken, lastNonSpace, tokenIndex) => {
     if (!token || lastNonSpace?.value === 'new') return false;
     // Don't add semicolon after 'await' - it always needs its expression
     if (lastNonSpace?.value === 'await') return false;
-    // For 'return': bare return followed by statement keyword needs semicolon
+    // For 'return': bare return followed by statement keyword or state assignment needs semicolon
     if (lastNonSpace?.value === 'return') {
       // If followed by a statement keyword, it's a bare return - needs semicolon
       if (token.type === 'IDENT' && STATEMENT_KEYWORDS.has(token.value)) return true;
       if (STATEMENT_TOKEN_TYPES.has(token.type)) return true;
+      // If followed by a state variable assignment, it's a bare return - needs semicolon
+      if (token.type === 'IDENT' && stateVars.has(token.value) && nextToken?.type === 'EQ') return true;
       return false;  // return expression - no semicolon
     }
     // Don't add semicolon before catch/finally/else after }
@@ -211,9 +232,25 @@ export function transformFunctionBody(transformer, tokens) {
     if (token.type !== 'IDENT') return false;
     if (STATEMENT_KEYWORDS.has(token.value)) return true;
     if (stateVars.has(token.value) && nextToken?.type === 'EQ') return true;
+    // Any identifier followed by = after a statement end is an assignment statement
+    if (nextToken?.type === 'EQ' && lastNonSpace?.type === 'RPAREN') return true;
     if (nextToken?.type === 'LPAREN' &&
         (BUILTIN_FUNCTIONS.has(token.value) || actionNames.has(token.value))) return true;
     if (nextToken?.type === 'DOT' && BUILTIN_FUNCTIONS.has(token.value)) return true;
+
+    // Check for property assignment or method call: identifier.property = value OR identifier.method()
+    // This is a new statement if token is followed by .property = ... or .method(...)
+    if (nextToken?.type === 'DOT') {
+      // Look ahead to see if this is an assignment or method call
+      for (let j = tokenIndex + 1; j < tokens.length && j < tokenIndex + 10; j++) {
+        const t = tokens[j];
+        // Assignment: identifier.property = value
+        if (t.type === 'EQ' && tokens[j-1]?.type === 'IDENT') return true;
+        // Method call: identifier.method()
+        if (t.type === 'LPAREN' && tokens[j-1]?.type === 'IDENT') return true;
+        if (t.type === 'SEMI') break;
+      }
+    }
     return false;
   };
 
@@ -242,7 +279,7 @@ export function transformFunctionBody(transformer, tokens) {
     }
 
     // Add semicolon before statement starters
-    if (needsManualSemicolon(token, nextToken, lastNonSpaceToken) &&
+    if (needsManualSemicolon(token, nextToken, lastNonSpaceToken, i) &&
         afterStatementEnd(lastNonSpaceToken)) {
       if (!afterIfCondition && lastToken && lastToken.value !== ';' && lastToken.value !== '{') {
         code += '; ';
@@ -416,10 +453,74 @@ export function transformFunctionBody(transformer, tokens) {
 
   // Replace state var reads (not in assignments, not already with .get/.set)
   // Allow spread operators (...stateVar) but block member access (obj.stateVar)
+  // Skip object literal keys (e.g., { users: value } - don't transform the key 'users')
   for (const stateVar of stateVars) {
     code = code.replace(
       new RegExp(`(?:(?<=\\.\\.\\.)|(?<!\\.))\\b${stateVar}\\b(?!\\s*=(?!=)|\\s*\\(|\\s*\\.(?:get|set))`, 'g'),
-      `${stateVar}.get()`
+      (match, offset) => {
+        // Check if this is an object key by looking at context
+        // Pattern: after { or , and before : (with arbitrary content between)
+        const after = code.slice(offset + match.length, offset + match.length + 10);
+
+        // If followed by : (not ::), check if it's an object key
+        if (/^\s*:(?!:)/.test(after)) {
+          // Look backwards for the nearest { or , that would indicate object context
+          // We need to track bracket depth to handle nested structures
+          let depth = 0;
+          for (let i = offset - 1; i >= 0; i--) {
+            const ch = code[i];
+            if (ch === ')' || ch === ']') depth++;
+            else if (ch === '(' || ch === '[') depth--;
+            else if (ch === '}') depth++;
+            else if (ch === '{') {
+              if (depth === 0) {
+                // Found opening brace at same depth - this is an object key
+                return match;
+              }
+              depth--;
+            }
+            else if (ch === ',' && depth === 0) {
+              // Found comma at same depth - this is an object key
+              return match;
+            }
+            // Stop if we hit a semicolon at depth 0 (different statement)
+            else if (ch === ';' && depth === 0) break;
+          }
+        }
+
+        return `${stateVar}.get()`;
+      }
+    );
+  }
+
+  // Replace prop var reads (props are reactive via useProp, need .get() like state vars)
+  // For props: allow function calls (prop callbacks need .get()() pattern)
+  // Skip object keys, allow spreads, block member access
+  for (const propVar of propVars) {
+    code = code.replace(
+      new RegExp(`(?:(?<=\\.\\.\\.)|(?<!\\.))\\b${propVar}\\b(?!\\s*=(?!=)|\\s*\\.(?:get|set))`, 'g'),
+      (match, offset) => {
+        // Check if this is an object key
+        const after = code.slice(offset + match.length, offset + match.length + 10);
+
+        if (/^\s*:(?!:)/.test(after)) {
+          let depth = 0;
+          for (let i = offset - 1; i >= 0; i--) {
+            const ch = code[i];
+            if (ch === ')' || ch === ']') depth++;
+            else if (ch === '(' || ch === '[') depth--;
+            else if (ch === '}') depth++;
+            else if (ch === '{') {
+              if (depth === 0) return match;
+              depth--;
+            }
+            else if (ch === ',' && depth === 0) return match;
+            else if (ch === ';' && depth === 0) break;
+          }
+        }
+
+        return `${propVar}.get()`;
+      }
     );
   }
 

package/compiler/transformer/imports.js

@@ -46,6 +46,11 @@ export function generateImports(transformer) {
     'model'
   ];
 
+  // Add useProp if component has props (for reactive prop support)
+  if (transformer.propVars.size > 0) {
+    runtimeImports.push('useProp');
+  }
+
   lines.push(`import { ${runtimeImports.join(', ')} } from '${options.runtime}';`);
 
   // A11y imports (if a11y features are used)

package/compiler/transformer/index.js

@@ -178,15 +178,7 @@ export class Transformer {
       extractImportedComponents(this, this.ast.imports);
     }
 
-    // Pre-scan for a11y usage to determine imports
-    if (this.ast.view) {
-      this._scanA11yUsage(this.ast.view);
-    }
-
-    // Imports (runtime + user imports)
-    parts.push(generateImports(this));
-
-    // Extract prop variables
+    // Extract prop variables (before imports so useProp can be conditionally imported)
     if (this.ast.props) {
       extractPropVars(this, this.ast.props);
     }
@@ -201,6 +193,14 @@ export class Transformer {
       extractActionNames(this, this.ast.actions);
     }
 
+    // Pre-scan for a11y usage to determine imports
+    if (this.ast.view) {
+      this._scanA11yUsage(this.ast.view);
+    }
+
+    // Imports (runtime + user imports) - after extraction so we know what to import
+    parts.push(generateImports(this));
+
     // Store (must come before router so $store is available to guards)
     if (this.ast.store) {
       parts.push(transformStore(this, this.ast.store, transformValue));

package/compiler/transformer/state.js

@@ -93,6 +93,22 @@ export function transformState(transformer, stateBlock) {
   return lines.join('\n');
 }
 
+/**
+ * Check if an action body references any prop variables
+ * @param {Array} bodyTokens - Function body tokens
+ * @param {Set} propVars - Set of prop variable names
+ * @returns {boolean} True if action references props
+ */
+export function actionReferencesProp(bodyTokens, propVars) {
+  if (propVars.size === 0) return false;
+  for (const token of bodyTokens) {
+    if (token.type === 'IDENT' && propVars.has(token.value)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Transform actions block to function declarations
  * @param {Object} transformer - Transformer instance
@@ -104,6 +120,11 @@ export function transformActions(transformer, actionsBlock, transformFunctionBod
   const lines = ['// Actions'];
 
   for (const fn of actionsBlock.functions) {
+    // Skip actions that reference props - they'll be generated inside render()
+    if (actionReferencesProp(fn.body, transformer.propVars)) {
+      continue;
+    }
+
     const asyncKeyword = fn.async ? 'async ' : '';
     const params = fn.params.join(', ');
     const body = transformFunctionBody(transformer, fn.body);
@@ -116,3 +137,33 @@ export function transformActions(transformer, actionsBlock, transformFunctionBod
 
   return lines.join('\n');
 }
+
+/**
+ * Transform prop-dependent actions (to be placed inside render function)
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} actionsBlock - Actions block from AST
+ * @param {Function} transformFunctionBody - Function to transform body tokens
+ * @param {string} indent - Indentation string
+ * @returns {string} JavaScript code
+ */
+export function transformPropDependentActions(transformer, actionsBlock, transformFunctionBody, indent = '  ') {
+  const lines = [];
+
+  for (const fn of actionsBlock.functions) {
+    // Only include actions that reference props
+    if (!actionReferencesProp(fn.body, transformer.propVars)) {
+      continue;
+    }
+
+    const asyncKeyword = fn.async ? 'async ' : '';
+    const params = fn.params.join(', ');
+    const body = transformFunctionBody(transformer, fn.body);
+
+    lines.push(`${indent}${asyncKeyword}function ${fn.name}(${params}) {`);
+    lines.push(`${indent}  ${body}`);
+    lines.push(`${indent}}`);
+    lines.push('');
+  }
+
+  return lines.join('\n');
+}

package/compiler/transformer/view.js

@@ -5,8 +5,8 @@
  */
 
 import { NodeType } from '../parser.js';
-import { transformValue } from './state.js';
-import { transformExpression, transformExpressionString } from './expressions.js';
+import { transformValue, transformPropDependentActions } from './state.js';
+import { transformExpression, transformExpressionString, transformFunctionBody } from './expressions.js';
 
 /** View node transformers lookup table */
 export const VIEW_NODE_HANDLERS = {
@@ -38,14 +38,27 @@ export function transformView(transformer, viewBlock) {
   // Generate render function with props parameter
   lines.push('function render({ props = {}, slots = {} } = {}) {');
 
-  // Destructure props with defaults if component has props
+  // Extract props using useProp() for reactive prop support
+  // useProp checks for a getter (propName$) and returns a computed if present
   if (transformer.propVars.size > 0) {
-    const propsDestructure = [...transformer.propVars].map(name => {
+    for (const name of transformer.propVars) {
       const defaultValue = transformer.propDefaults.get(name);
       const defaultCode = defaultValue ? transformValue(transformer, defaultValue) : 'undefined';
-      return `${name} = ${defaultCode}`;
-    }).join(', ');
-    lines.push(`  const { ${propsDestructure} } = props;`);
+      lines.push(`  const ${name} = useProp(props, '${name}', ${defaultCode});`);
+    }
+  }
+
+  // Generate prop-dependent actions inside render (after useProp declarations)
+  if (transformer.ast.actions && transformer.propVars.size > 0) {
+    const propActions = transformPropDependentActions(
+      transformer,
+      transformer.ast.actions,
+      transformFunctionBody,
+      '  '
+    );
+    if (propActions.trim()) {
+      lines.push(propActions);
+    }
   }
 
   lines.push('  return (');
@@ -416,7 +429,7 @@ function extractDynamicAttributes(selector) {
           }
         }
 
-        // Static attribute - parse the value
+        // Parse the attribute value (may be static or contain interpolations)
         let attrValue = '';
         if (quoteChar) {
           // Quoted value - read until closing quote
@@ -437,8 +450,15 @@ function extractDynamicAttributes(selector) {
         // Skip closing ]
         if (selector[i] === ']') i++;
 
-        // Add to static attrs (don't put in selector)
-        staticAttrs.push({ name: attrName, value: attrValue });
+        // Check if the value contains interpolation {expr}
+        // If so, treat as dynamic attribute with template string
+        if (attrValue.includes('{') && attrValue.includes('}')) {
+          // Convert "text {expr} more" to template string: `text ${expr} more`
+          dynamicAttrs.push({ name: attrName, expr: attrValue, isInterpolated: true });
+        } else {
+          // Pure static attribute
+          staticAttrs.push({ name: attrName, value: attrValue });
+        }
         continue;
       } else {
         // Boolean attribute (no value) like [disabled]
@@ -618,7 +638,16 @@ export function transformElement(transformer, node, indent) {
 
   // Chain dynamic attribute bindings (e.g., [value={searchQuery}])
   for (const attr of dynamicAttrs) {
-    const exprCode = transformExpressionString(transformer, attr.expr);
+    let exprCode;
+    if (attr.isInterpolated) {
+      // String with interpolation: "display: {show ? 'block' : 'none'}"
+      // Convert to template literal: `display: ${show.get() ? 'block' : 'none'}`
+      const templateStr = attr.expr.replace(/\{/g, '${');
+      exprCode = '`' + transformExpressionString(transformer, templateStr) + '`';
+    } else {
+      // Pure expression: {searchQuery}
+      exprCode = transformExpressionString(transformer, attr.expr);
+    }
     result = `bind(${result}, '${attr.name}', () => ${exprCode})`;
   }
 
@@ -642,8 +671,69 @@ export function addScopeToSelector(transformer, selector) {
   return `${selector}.${transformer.scopeId}`;
 }
 
+/**
+ * Check if an expression references any state variables
+ * @param {Object} transformer - Transformer instance
+ * @param {Object} node - AST node to check
+ * @returns {boolean} True if expression uses state variables
+ */
+function expressionUsesState(transformer, node) {
+  if (!node) return false;
+
+  switch (node.type) {
+    case NodeType.Identifier:
+      return transformer.stateVars.has(node.name);
+
+    case NodeType.MemberExpression:
+      return expressionUsesState(transformer, node.object) ||
+             (node.computed && expressionUsesState(transformer, node.property));
+
+    case NodeType.CallExpression:
+      return expressionUsesState(transformer, node.callee) ||
+             node.arguments.some(arg => expressionUsesState(transformer, arg));
+
+    case NodeType.BinaryExpression:
+    case NodeType.ConditionalExpression:
+      return expressionUsesState(transformer, node.left) ||
+             expressionUsesState(transformer, node.right) ||
+             (node.test && expressionUsesState(transformer, node.test)) ||
+             (node.consequent && expressionUsesState(transformer, node.consequent)) ||
+             (node.alternate && expressionUsesState(transformer, node.alternate));
+
+    case NodeType.UnaryExpression:
+    case NodeType.UpdateExpression:
+      return expressionUsesState(transformer, node.argument);
+
+    case NodeType.ArrayLiteral:
+      return node.elements?.some(el => expressionUsesState(transformer, el));
+
+    case NodeType.ObjectLiteral:
+      return node.properties?.some(prop =>
+        expressionUsesState(transformer, prop.value)
+      );
+
+    case NodeType.ArrowFunction:
+      // Arrow functions capture state, but don't need wrapping themselves
+      return false;
+
+    case NodeType.SpreadElement:
+      return expressionUsesState(transformer, node.argument);
+
+    default:
+      return false;
+  }
+}
+
 /**
  * Transform a component call (imported component)
+ *
+ * For reactive props (those that reference state variables), we pass both:
+ * - The current value: `propName: value`
+ * - A getter function: `propName$: () => value`
+ *
+ * The child component can use `useProp(props, 'propName', default)` to get
+ * a reactive computed if a getter exists, or the static value otherwise.
+ *
  * @param {Object} transformer - Transformer instance
  * @param {Object} node - Element node (component)
  * @param {number} indent - Indentation level
@@ -670,17 +760,26 @@ export function transformComponentCall(transformer, node, indent) {
   }
 
   // Build component call
-  let code = `${pad}${componentName}.render({ `;
-
   const renderArgs = [];
 
   // Add props if any
   if (node.props && node.props.length > 0) {
-    const propsCode = node.props.map(prop => {
+    const propEntries = [];
+
+    for (const prop of node.props) {
       const valueCode = transformExpression(transformer, prop.value);
-      return `${prop.name}: ${valueCode}`;
-    }).join(', ');
-    renderArgs.push(`props: { ${propsCode} }`);
+      const usesState = expressionUsesState(transformer, prop.value);
+
+      if (usesState) {
+        // Reactive prop: pass both value and getter
+        // The getter allows child to create a reactive binding via useProp()
+        propEntries.push(`${prop.name}$: () => ${valueCode}`);
+      }
+      // Always pass the current value (for non-useProp access and initial render)
+      propEntries.push(`${prop.name}: ${valueCode}`);
+    }
+
+    renderArgs.push(`props: { ${propEntries.join(', ')} }`);
   }
 
   // Add slots if any
@@ -691,9 +790,8 @@ export function transformComponentCall(transformer, node, indent) {
     renderArgs.push(`slots: { ${slotCode} }`);
   }
 
-  code += renderArgs.join(', ');
-  code += ' })';
-  return code;
+  const renderCall = `${componentName}.render({ ${renderArgs.join(', ')} })`;
+  return `${pad}${renderCall}`;
 }
 
 /**