trickle-observe 0.2.55 → 0.2.56

package/dist/vite-plugin.js

@@ -500,6 +500,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     const funcRegex = /^[ \t]*(?:export\s+)?(?:async\s+)?function\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/gm;
     const funcInsertions = [];
     // Body insertions: insert at start of function body (for React render tracking)
+    // propsExpr: JS expression to evaluate as the props object at render time
     const bodyInsertions = [];
     let match;
     while ((match = funcRegex.exec(source)) !== null) {
@@ -526,13 +527,14 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             continue;
         funcInsertions.push({ position: closeBrace + 1, name, paramNames });
         // React component render tracking: uppercase function name in .tsx/.jsx
+        // function declarations have `arguments`, so arguments[0] is the raw props object
         if (isReactFile && /^[A-Z]/.test(name)) {
             let lineNo = 1;
             for (let i = 0; i < match.index; i++) {
                 if (source[i] === '\n')
                     lineNo++;
             }
-            bodyInsertions.push({ position: openBrace + 1, name, lineNo });
+            bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr: 'arguments[0]' });
         }
     }
     // Also match arrow functions assigned to const/let/var
@@ -567,7 +569,47 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
                 if (source[i] === '\n')
                     lineNo++;
             }
-            bodyInsertions.push({ position: openBrace + 1, name, lineNo });
+            // Determine props expression for arrow functions (no `arguments` object)
+            let propsExpr = 'undefined';
+            if (arrowParamMatch) {
+                const rawParams = (arrowParamMatch[1] || '').trim();
+                if (!rawParams) {
+                    // No params: `() => {}`
+                    propsExpr = 'undefined';
+                }
+                else if (rawParams.startsWith('{')) {
+                    // Destructured: ({ name, age }) => {} — reconstruct object from field names
+                    // Strip TS type annotation (e.g. `{a, b}: Props` → `{a, b}`)
+                    // Find the matching `}` to isolate just the destructuring pattern
+                    let depth2 = 0;
+                    let endBrace = -1;
+                    for (let i = 0; i < rawParams.length; i++) {
+                        if (rawParams[i] === '{')
+                            depth2++;
+                        else if (rawParams[i] === '}') {
+                            depth2--;
+                            if (depth2 === 0) {
+                                endBrace = i;
+                                break;
+                            }
+                        }
+                    }
+                    const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
+                    const fields = extractDestructuredNames(destructPattern);
+                    if (fields.length > 0) {
+                        propsExpr = `{ ${fields.join(', ')} }`;
+                    }
+                }
+                else if (arrowParamMatch[2]) {
+                    // Single simple param (no parens): `props => {}`
+                    propsExpr = arrowParamMatch[2];
+                }
+                else if (paramNames.length === 1) {
+                    // Single simple param: `(props) => {}`
+                    propsExpr = paramNames[0];
+                }
+            }
+            bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr });
         }
     }
     // Find variable declarations for tracing
@@ -628,7 +670,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     }
     // Add React component render tracker if needed
     if (bodyInsertions.length > 0) {
-        prefixLines.push(`if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`, `function __trickle_rc(name, line) {`, `  try {`, `    const key = ${JSON.stringify(filename)} + ':' + line;`, `    const count = (globalThis.__trickle_react_renders.get(key) || 0) + 1;`, `    globalThis.__trickle_react_renders.set(key, count);`, `    const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `    try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `    const f = __trickle_join(dir, 'variables.jsonl');`, `    __trickle_appendFileSync(f, JSON.stringify({ kind: 'react_render', file: ${JSON.stringify(filename)}, line: line, component: name, renderCount: count, timestamp: Date.now() / 1000 }) + '\\n');`, `  } catch(e) {}`, `}`);
+        prefixLines.push(`if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`, `function __trickle_rc(name, line, props) {`, `  try {`, `    const key = ${JSON.stringify(filename)} + ':' + line;`, `    const count = (globalThis.__trickle_react_renders.get(key) || 0) + 1;`, `    globalThis.__trickle_react_renders.set(key, count);`, `    const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `    try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `    const f = __trickle_join(dir, 'variables.jsonl');`, `    const rec = { kind: 'react_render', file: ${JSON.stringify(filename)}, line: line, component: name, renderCount: count, timestamp: Date.now() / 1000 };`, `    if (props !== undefined && props !== null && typeof props === 'object') {`, `      try {`, `        const propKeys = Object.keys(props).filter(k => k !== 'children');`, `        const propSample = {};`, `        for (const k of propKeys.slice(0, 10)) {`, `          const v = props[k];`, `          const t = typeof v;`, `          if (t === 'string') propSample[k] = v.length > 40 ? v.slice(0, 40) + '...' : v;`, `          else if (t === 'number' || t === 'boolean') propSample[k] = v;`, `          else if (v === null || v === undefined) propSample[k] = v;`, `          else if (Array.isArray(v)) propSample[k] = '[' + t + '[' + v.length + ']]';`, `          else if (t === 'function') propSample[k] = '[fn]';`, `          else propSample[k] = '[object]';`, `        }`, `        rec.props = propSample;`, `        rec.propKeys = propKeys;`, `      } catch(e2) {}`, `    }`, `    __trickle_appendFileSync(f, JSON.stringify(rec) + '\\n');`, `  } catch(e) {}`, `}`);
     }
     prefixLines.push('');
     const prefix = prefixLines.join('\n');
@@ -653,10 +695,10 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             code: `\n;try{${calls}}catch(__e){}\n`,
         });
     }
-    for (const { position, name, lineNo } of bodyInsertions) {
+    for (const { position, name, lineNo, propsExpr } of bodyInsertions) {
         allInsertions.push({
             position,
-            code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo})}catch(__e){}\n`,
+            code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){}\n`,
         });
     }
     // Sort by position descending (insert from end to preserve earlier positions)

package/dist/vite-plugin.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vite-plugin.test.js

@@ -0,0 +1,160 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Unit tests for the Vite plugin transform (React component tracking).
+ *
+ * Run with: node --experimental-strip-types --test src/vite-plugin.test.ts
+ * Or after build: node --test dist/vite-plugin.test.js
+ */
+const node_test_1 = require("node:test");
+const strict_1 = __importDefault(require("node:assert/strict"));
+const vite_plugin_js_1 = require("../dist/vite-plugin.js");
+// Helper: transform code as if it came from a .tsx file
+function transformTsx(code) {
+    const plugin = (0, vite_plugin_js_1.tricklePlugin)({ debug: false, traceVars: false });
+    const result = plugin.transform(code, '/test/App.tsx');
+    return result ? result.code : null;
+}
+function transformTs(code) {
+    const plugin = (0, vite_plugin_js_1.tricklePlugin)({ debug: false, traceVars: false });
+    const result = plugin.transform(code, '/test/util.ts');
+    return result ? result.code : null;
+}
+// ── React file detection ─────────────────────────────────────────────────────
+(0, node_test_1.describe)('React file detection', () => {
+    (0, node_test_1.it)('tracks uppercase components in .tsx files', () => {
+        const code = `function UserCard(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('__trickle_rc'), 'should inject render tracker');
+    });
+    (0, node_test_1.it)('does not inject render tracker for .ts files', () => {
+        const code = `function UserCard(props) { return null; }`;
+        const out = transformTs(code);
+        // May still transform for function wrapping, but not for render tracking
+        if (out) {
+            strict_1.default.ok(!out.includes('__trickle_rc'), 'should NOT inject render tracker in .ts files');
+        }
+    });
+    (0, node_test_1.it)('does not track lowercase functions as components', () => {
+        const code = `function helper(x) { return x + 1; }`;
+        const out = transformTsx(code);
+        if (out) {
+            strict_1.default.ok(!out.includes('__trickle_rc'), 'lowercase function should not be tracked');
+        }
+    });
+});
+// ── Props capture: function declarations ─────────────────────────────────────
+(0, node_test_1.describe)('Props capture — function declarations', () => {
+    (0, node_test_1.it)('uses arguments[0] for simple param: function Component(props)', () => {
+        const code = `function MyComponent(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('arguments[0]'), 'should pass arguments[0] as props');
+    });
+    (0, node_test_1.it)('uses arguments[0] for destructured param: function Component({ name })', () => {
+        const code = `function UserCard({ name, age }) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('arguments[0]'), 'should pass arguments[0] for destructured params');
+    });
+    (0, node_test_1.it)('injects __trickle_rc call at start of function body', () => {
+        const code = `function MyComponent(props) {\n  const x = 1;\n  return null;\n}`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        // __trickle_rc should appear before body statements
+        const rcIdx = out.indexOf('__trickle_rc');
+        const bodyIdx = out.indexOf('const x = 1');
+        strict_1.default.ok(rcIdx !== -1, '__trickle_rc should be present');
+        strict_1.default.ok(bodyIdx !== -1, 'body code should be present');
+        strict_1.default.ok(rcIdx < bodyIdx, '__trickle_rc should come before body statements');
+    });
+    (0, node_test_1.it)('includes correct component name and line in __trickle_rc call', () => {
+        const code = `function UserCard(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('"UserCard"'), 'should include component name');
+        strict_1.default.ok(out.includes('__trickle_rc("UserCard"'), 'should call with component name');
+    });
+});
+// ── Props capture: arrow function components ──────────────────────────────────
+(0, node_test_1.describe)('Props capture — arrow function components', () => {
+    (0, node_test_1.it)('uses single param name for simple arrow: const C = (props) => {}', () => {
+        const code = `const Dashboard = (props) => { return null; };`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('__trickle_rc'), 'should inject render tracker');
+        // props should be the param variable, not arguments[0]
+        strict_1.default.ok(out.includes('__trickle_rc("Dashboard"'), 'should use component name');
+        // should NOT use arguments[0] for arrow functions
+        const rcCall = out.match(/__trickle_rc\("Dashboard",[^)]+\)/);
+        strict_1.default.ok(rcCall, 'should have __trickle_rc call');
+        strict_1.default.ok(!rcCall[0].includes('arguments[0]'), 'arrow functions should not use arguments[0]');
+    });
+    (0, node_test_1.it)('reconstructs object for destructured arrow: const C = ({ a, b }) => {}', () => {
+        const code = `const Counter = ({ count, label }) => { return null; };`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('__trickle_rc'), 'should inject render tracker');
+        // Should reconstruct { count, label }
+        const rcCall = out.match(/__trickle_rc\("Counter",[^,]+,([^)]+)\)/);
+        if (rcCall) {
+            strict_1.default.ok(rcCall[1].includes('count') && rcCall[1].includes('label'), 'should reconstruct props object from destructured fields');
+        }
+    });
+    (0, node_test_1.it)('passes undefined for no-param arrow: const C = () => {}', () => {
+        const code = `const NoProps = () => { return null; };`;
+        const out = transformTsx(code);
+        if (out && out.includes('__trickle_rc')) {
+            strict_1.default.ok(out.includes('undefined'), 'should pass undefined for no-param component');
+        }
+    });
+});
+// ── render count tracking ─────────────────────────────────────────────────────
+(0, node_test_1.describe)('Render count tracking', () => {
+    (0, node_test_1.it)('includes react_render kind in emitted record code', () => {
+        const code = `function Card(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes("'react_render'"), 'emitted record should have kind react_render');
+    });
+    (0, node_test_1.it)('includes props data in emitted record', () => {
+        const code = `function Card(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('rec.props'), 'should capture props onto the record');
+        strict_1.default.ok(out.includes('propKeys'), 'should include propKeys');
+    });
+    (0, node_test_1.it)('tracks multiple components in one file', () => {
+        const code = [
+            `function Header(props) { return null; }`,
+            `function Footer(props) { return null; }`,
+            `function helper(x) { return x; }`,
+        ].join('\n');
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('"Header"'), 'should track Header');
+        strict_1.default.ok(out.includes('"Footer"'), 'should track Footer');
+        // helper should not be tracked as a component
+        const rcCalls = out.match(/__trickle_rc\("helper"/g);
+        strict_1.default.ok(!rcCalls, 'lowercase helper should not be tracked');
+    });
+});
+// ── findFunctionBodyBrace — destructured params don't confuse brace finding ───
+(0, node_test_1.describe)('Correct function body brace detection', () => {
+    (0, node_test_1.it)('finds body brace even with destructured object params', () => {
+        const code = `function Form({ onSubmit, title }) {\n  const x = 1;\n  return null;\n}`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        // __trickle_rc should be INSIDE the function body (before 'const x = 1')
+        const rcIdx = out.indexOf('__trickle_rc');
+        const bodyIdx = out.indexOf('const x = 1');
+        strict_1.default.ok(rcIdx < bodyIdx, 'render tracker must be inside the function body, before first statement');
+        // The wrap insertion should be AFTER the closing brace of the function
+        const wrapIdx = out.indexOf('__trickle_wrap');
+        strict_1.default.ok(wrapIdx > bodyIdx, 'function wrap should be after the function body');
+    });
+});

package/dist-esm/vite-plugin.js

@@ -494,6 +494,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     const funcRegex = /^[ \t]*(?:export\s+)?(?:async\s+)?function\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/gm;
     const funcInsertions = [];
     // Body insertions: insert at start of function body (for React render tracking)
+    // propsExpr: JS expression to evaluate as the props object at render time
     const bodyInsertions = [];
     let match;
     while ((match = funcRegex.exec(source)) !== null) {
@@ -520,13 +521,14 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             continue;
         funcInsertions.push({ position: closeBrace + 1, name, paramNames });
         // React component render tracking: uppercase function name in .tsx/.jsx
+        // function declarations have `arguments`, so arguments[0] is the raw props object
         if (isReactFile && /^[A-Z]/.test(name)) {
             let lineNo = 1;
             for (let i = 0; i < match.index; i++) {
                 if (source[i] === '\n')
                     lineNo++;
             }
-            bodyInsertions.push({ position: openBrace + 1, name, lineNo });
+            bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr: 'arguments[0]' });
         }
     }
     // Also match arrow functions assigned to const/let/var
@@ -561,7 +563,47 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
                 if (source[i] === '\n')
                     lineNo++;
             }
-            bodyInsertions.push({ position: openBrace + 1, name, lineNo });
+            // Determine props expression for arrow functions (no `arguments` object)
+            let propsExpr = 'undefined';
+            if (arrowParamMatch) {
+                const rawParams = (arrowParamMatch[1] || '').trim();
+                if (!rawParams) {
+                    // No params: `() => {}`
+                    propsExpr = 'undefined';
+                }
+                else if (rawParams.startsWith('{')) {
+                    // Destructured: ({ name, age }) => {} — reconstruct object from field names
+                    // Strip TS type annotation (e.g. `{a, b}: Props` → `{a, b}`)
+                    // Find the matching `}` to isolate just the destructuring pattern
+                    let depth2 = 0;
+                    let endBrace = -1;
+                    for (let i = 0; i < rawParams.length; i++) {
+                        if (rawParams[i] === '{')
+                            depth2++;
+                        else if (rawParams[i] === '}') {
+                            depth2--;
+                            if (depth2 === 0) {
+                                endBrace = i;
+                                break;
+                            }
+                        }
+                    }
+                    const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
+                    const fields = extractDestructuredNames(destructPattern);
+                    if (fields.length > 0) {
+                        propsExpr = `{ ${fields.join(', ')} }`;
+                    }
+                }
+                else if (arrowParamMatch[2]) {
+                    // Single simple param (no parens): `props => {}`
+                    propsExpr = arrowParamMatch[2];
+                }
+                else if (paramNames.length === 1) {
+                    // Single simple param: `(props) => {}`
+                    propsExpr = paramNames[0];
+                }
+            }
+            bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr });
         }
     }
     // Find variable declarations for tracing
@@ -622,7 +664,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     }
     // Add React component render tracker if needed
     if (bodyInsertions.length > 0) {
-        prefixLines.push(`if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`, `function __trickle_rc(name, line) {`, `  try {`, `    const key = ${JSON.stringify(filename)} + ':' + line;`, `    const count = (globalThis.__trickle_react_renders.get(key) || 0) + 1;`, `    globalThis.__trickle_react_renders.set(key, count);`, `    const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `    try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `    const f = __trickle_join(dir, 'variables.jsonl');`, `    __trickle_appendFileSync(f, JSON.stringify({ kind: 'react_render', file: ${JSON.stringify(filename)}, line: line, component: name, renderCount: count, timestamp: Date.now() / 1000 }) + '\\n');`, `  } catch(e) {}`, `}`);
+        prefixLines.push(`if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`, `function __trickle_rc(name, line, props) {`, `  try {`, `    const key = ${JSON.stringify(filename)} + ':' + line;`, `    const count = (globalThis.__trickle_react_renders.get(key) || 0) + 1;`, `    globalThis.__trickle_react_renders.set(key, count);`, `    const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `    try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `    const f = __trickle_join(dir, 'variables.jsonl');`, `    const rec = { kind: 'react_render', file: ${JSON.stringify(filename)}, line: line, component: name, renderCount: count, timestamp: Date.now() / 1000 };`, `    if (props !== undefined && props !== null && typeof props === 'object') {`, `      try {`, `        const propKeys = Object.keys(props).filter(k => k !== 'children');`, `        const propSample = {};`, `        for (const k of propKeys.slice(0, 10)) {`, `          const v = props[k];`, `          const t = typeof v;`, `          if (t === 'string') propSample[k] = v.length > 40 ? v.slice(0, 40) + '...' : v;`, `          else if (t === 'number' || t === 'boolean') propSample[k] = v;`, `          else if (v === null || v === undefined) propSample[k] = v;`, `          else if (Array.isArray(v)) propSample[k] = '[' + t + '[' + v.length + ']]';`, `          else if (t === 'function') propSample[k] = '[fn]';`, `          else propSample[k] = '[object]';`, `        }`, `        rec.props = propSample;`, `        rec.propKeys = propKeys;`, `      } catch(e2) {}`, `    }`, `    __trickle_appendFileSync(f, JSON.stringify(rec) + '\\n');`, `  } catch(e) {}`, `}`);
     }
     prefixLines.push('');
     const prefix = prefixLines.join('\n');
@@ -647,10 +689,10 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             code: `\n;try{${calls}}catch(__e){}\n`,
         });
     }
-    for (const { position, name, lineNo } of bodyInsertions) {
+    for (const { position, name, lineNo, propsExpr } of bodyInsertions) {
         allInsertions.push({
             position,
-            code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo})}catch(__e){}\n`,
+            code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){}\n`,
         });
     }
     // Sort by position descending (insert from end to preserve earlier positions)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trickle-observe",
-  "version": "0.2.55",
+  "version": "0.2.56",
   "description": "Runtime type observability for JavaScript applications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,6 +20,7 @@
   },
   "scripts": {
     "build": "tsc && tsc -p tsconfig.esm.json",
+    "test": "npm run build && node --experimental-strip-types --test src/vite-plugin.test.ts",
     "prepublishOnly": "npm run build"
   },
   "optionalDependencies": {

package/src/vite-plugin.test.ts

@@ -0,0 +1,203 @@
+/**
+ * Unit tests for the Vite plugin transform (React component tracking).
+ *
+ * Run with: node --experimental-strip-types --test src/vite-plugin.test.ts
+ * Or after build: node --test dist/vite-plugin.test.js
+ */
+import { describe, it } from 'node:test';
+import assert from 'node:assert/strict';
+import { tricklePlugin } from '../dist/vite-plugin.js';
+
+// Helper: transform code as if it came from a .tsx file
+function transformTsx(code: string): string | null {
+  const plugin = tricklePlugin({ debug: false, traceVars: false });
+  const result = plugin.transform(code, '/test/App.tsx');
+  return result ? result.code : null;
+}
+
+function transformTs(code: string): string | null {
+  const plugin = tricklePlugin({ debug: false, traceVars: false });
+  const result = plugin.transform(code, '/test/util.ts');
+  return result ? result.code : null;
+}
+
+// ── React file detection ─────────────────────────────────────────────────────
+
+describe('React file detection', () => {
+  it('tracks uppercase components in .tsx files', () => {
+    const code = `function UserCard(props) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_rc'), 'should inject render tracker');
+  });
+
+  it('does not inject render tracker for .ts files', () => {
+    const code = `function UserCard(props) { return null; }`;
+    const out = transformTs(code);
+    // May still transform for function wrapping, but not for render tracking
+    if (out) {
+      assert.ok(!out.includes('__trickle_rc'), 'should NOT inject render tracker in .ts files');
+    }
+  });
+
+  it('does not track lowercase functions as components', () => {
+    const code = `function helper(x) { return x + 1; }`;
+    const out = transformTsx(code);
+    if (out) {
+      assert.ok(!out.includes('__trickle_rc'), 'lowercase function should not be tracked');
+    }
+  });
+});
+
+// ── Props capture: function declarations ─────────────────────────────────────
+
+describe('Props capture — function declarations', () => {
+  it('uses arguments[0] for simple param: function Component(props)', () => {
+    const code = `function MyComponent(props) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('arguments[0]'), 'should pass arguments[0] as props');
+  });
+
+  it('uses arguments[0] for destructured param: function Component({ name })', () => {
+    const code = `function UserCard({ name, age }) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('arguments[0]'), 'should pass arguments[0] for destructured params');
+  });
+
+  it('injects __trickle_rc call at start of function body', () => {
+    const code = `function MyComponent(props) {\n  const x = 1;\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    // __trickle_rc should appear before body statements
+    const rcIdx = out!.indexOf('__trickle_rc');
+    const bodyIdx = out!.indexOf('const x = 1');
+    assert.ok(rcIdx !== -1, '__trickle_rc should be present');
+    assert.ok(bodyIdx !== -1, 'body code should be present');
+    assert.ok(rcIdx < bodyIdx, '__trickle_rc should come before body statements');
+  });
+
+  it('includes correct component name and line in __trickle_rc call', () => {
+    const code = `function UserCard(props) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('"UserCard"'), 'should include component name');
+    assert.ok(out!.includes('__trickle_rc("UserCard"'), 'should call with component name');
+  });
+});
+
+// ── Props capture: arrow function components ──────────────────────────────────
+
+describe('Props capture — arrow function components', () => {
+  it('uses single param name for simple arrow: const C = (props) => {}', () => {
+    const code = `const Dashboard = (props) => { return null; };`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_rc'), 'should inject render tracker');
+    // props should be the param variable, not arguments[0]
+    assert.ok(out!.includes('__trickle_rc("Dashboard"'), 'should use component name');
+    // should NOT use arguments[0] for arrow functions
+    const rcCall = out!.match(/__trickle_rc\("Dashboard",[^)]+\)/);
+    assert.ok(rcCall, 'should have __trickle_rc call');
+    assert.ok(!rcCall![0].includes('arguments[0]'), 'arrow functions should not use arguments[0]');
+  });
+
+  it('reconstructs object for destructured arrow: const C = ({ a, b }) => {}', () => {
+    const code = `const Counter = ({ count, label }) => { return null; };`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_rc'), 'should inject render tracker');
+    // Should reconstruct { count, label }
+    const rcCall = out!.match(/__trickle_rc\("Counter",[^,]+,([^)]+)\)/);
+    if (rcCall) {
+      assert.ok(
+        rcCall[1].includes('count') && rcCall[1].includes('label'),
+        'should reconstruct props object from destructured fields',
+      );
+    }
+  });
+
+  it('handles TypeScript type annotations in destructured props: const C = ({ a }: Props) => {}', () => {
+    const code = `const Form = ({ onSubmit, title }: FormProps) => { return null; };`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_rc'), 'should inject render tracker');
+    // Should capture onSubmit and title, not include ': FormProps' in prop names
+    const rcCall = out!.match(/__trickle_rc\("Form",[^,]+,([^)]+)\)/);
+    if (rcCall) {
+      assert.ok(rcCall[1].includes('onSubmit'), 'should include onSubmit in props');
+      assert.ok(rcCall[1].includes('title'), 'should include title in props');
+      assert.ok(!rcCall[1].includes('FormProps'), 'should NOT include type annotation');
+    }
+  });
+
+  it('handles rest spread in destructured props: const C = ({ a, ...rest }) => {}', () => {
+    const code = `const Card = ({ children, ...props }: CardProps) => { return null; };`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    if (out!.includes('__trickle_rc')) {
+      assert.ok(out!.includes('children'), 'should include children');
+      assert.ok(out!.includes('props'), 'should include rest spread as props');
+    }
+  });
+
+  it('passes undefined for no-param arrow: const C = () => {}', () => {
+    const code = `const NoProps = () => { return null; };`;
+    const out = transformTsx(code);
+    if (out && out.includes('__trickle_rc')) {
+      assert.ok(out.includes('undefined'), 'should pass undefined for no-param component');
+    }
+  });
+});
+
+// ── render count tracking ─────────────────────────────────────────────────────
+
+describe('Render count tracking', () => {
+  it('includes react_render kind in emitted record code', () => {
+    const code = `function Card(props) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes("'react_render'"), 'emitted record should have kind react_render');
+  });
+
+  it('includes props data in emitted record', () => {
+    const code = `function Card(props) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('rec.props'), 'should capture props onto the record');
+    assert.ok(out!.includes('propKeys'), 'should include propKeys');
+  });
+
+  it('tracks multiple components in one file', () => {
+    const code = [
+      `function Header(props) { return null; }`,
+      `function Footer(props) { return null; }`,
+      `function helper(x) { return x; }`,
+    ].join('\n');
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('"Header"'), 'should track Header');
+    assert.ok(out!.includes('"Footer"'), 'should track Footer');
+    // helper should not be tracked as a component
+    const rcCalls = out!.match(/__trickle_rc\("helper"/g);
+    assert.ok(!rcCalls, 'lowercase helper should not be tracked');
+  });
+});
+
+// ── findFunctionBodyBrace — destructured params don't confuse brace finding ───
+
+describe('Correct function body brace detection', () => {
+  it('finds body brace even with destructured object params', () => {
+    const code = `function Form({ onSubmit, title }) {\n  const x = 1;\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    // __trickle_rc should be INSIDE the function body (before 'const x = 1')
+    const rcIdx = out!.indexOf('__trickle_rc');
+    const bodyIdx = out!.indexOf('const x = 1');
+    assert.ok(rcIdx < bodyIdx, 'render tracker must be inside the function body, before first statement');
+    // The wrap insertion (Form=__trickle_wrap(...)) should be AFTER the function body
+    const wrapIdx = out!.indexOf('Form=__trickle_wrap');
+    assert.ok(wrapIdx > bodyIdx, 'function wrap should be after the function body');
+  });
+});

package/src/vite-plugin.ts

@@ -497,7 +497,8 @@ function transformEsmSource(
   const funcRegex = /^[ \t]*(?:export\s+)?(?:async\s+)?function\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/gm;
   const funcInsertions: Array<{ position: number; name: string; paramNames: string[] }> = [];
   // Body insertions: insert at start of function body (for React render tracking)
-  const bodyInsertions: Array<{ position: number; name: string; lineNo: number }> = [];
+  // propsExpr: JS expression to evaluate as the props object at render time
+  const bodyInsertions: Array<{ position: number; name: string; lineNo: number; propsExpr: string }> = [];
   let match;
 
   while ((match = funcRegex.exec(source)) !== null) {
@@ -525,12 +526,13 @@ function transformEsmSource(
     funcInsertions.push({ position: closeBrace + 1, name, paramNames });
 
     // React component render tracking: uppercase function name in .tsx/.jsx
+    // function declarations have `arguments`, so arguments[0] is the raw props object
     if (isReactFile && /^[A-Z]/.test(name)) {
       let lineNo = 1;
       for (let i = 0; i < match.index; i++) {
         if (source[i] === '\n') lineNo++;
       }
-      bodyInsertions.push({ position: openBrace + 1, name, lineNo });
+      bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr: 'arguments[0]' });
     }
   }
 
@@ -567,7 +569,39 @@ function transformEsmSource(
       for (let i = 0; i < match.index; i++) {
         if (source[i] === '\n') lineNo++;
       }
-      bodyInsertions.push({ position: openBrace + 1, name, lineNo });
+
+      // Determine props expression for arrow functions (no `arguments` object)
+      let propsExpr = 'undefined';
+      if (arrowParamMatch) {
+        const rawParams = (arrowParamMatch[1] || '').trim();
+        if (!rawParams) {
+          // No params: `() => {}`
+          propsExpr = 'undefined';
+        } else if (rawParams.startsWith('{')) {
+          // Destructured: ({ name, age }) => {} — reconstruct object from field names
+          // Strip TS type annotation (e.g. `{a, b}: Props` → `{a, b}`)
+          // Find the matching `}` to isolate just the destructuring pattern
+          let depth2 = 0;
+          let endBrace = -1;
+          for (let i = 0; i < rawParams.length; i++) {
+            if (rawParams[i] === '{') depth2++;
+            else if (rawParams[i] === '}') { depth2--; if (depth2 === 0) { endBrace = i; break; } }
+          }
+          const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
+          const fields = extractDestructuredNames(destructPattern);
+          if (fields.length > 0) {
+            propsExpr = `{ ${fields.join(', ')} }`;
+          }
+        } else if (arrowParamMatch[2]) {
+          // Single simple param (no parens): `props => {}`
+          propsExpr = arrowParamMatch[2];
+        } else if (paramNames.length === 1) {
+          // Single simple param: `(props) => {}`
+          propsExpr = paramNames[0];
+        }
+      }
+
+      bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr });
     }
   }
 
@@ -691,7 +725,7 @@ function transformEsmSource(
   if (bodyInsertions.length > 0) {
     prefixLines.push(
       `if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`,
-      `function __trickle_rc(name, line) {`,
+      `function __trickle_rc(name, line, props) {`,
       `  try {`,
       `    const key = ${JSON.stringify(filename)} + ':' + line;`,
       `    const count = (globalThis.__trickle_react_renders.get(key) || 0) + 1;`,
@@ -699,7 +733,26 @@ function transformEsmSource(
       `    const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`,
       `    try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`,
       `    const f = __trickle_join(dir, 'variables.jsonl');`,
-      `    __trickle_appendFileSync(f, JSON.stringify({ kind: 'react_render', file: ${JSON.stringify(filename)}, line: line, component: name, renderCount: count, timestamp: Date.now() / 1000 }) + '\\n');`,
+      `    const rec = { kind: 'react_render', file: ${JSON.stringify(filename)}, line: line, component: name, renderCount: count, timestamp: Date.now() / 1000 };`,
+      `    if (props !== undefined && props !== null && typeof props === 'object') {`,
+      `      try {`,
+      `        const propKeys = Object.keys(props).filter(k => k !== 'children');`,
+      `        const propSample = {};`,
+      `        for (const k of propKeys.slice(0, 10)) {`,
+      `          const v = props[k];`,
+      `          const t = typeof v;`,
+      `          if (t === 'string') propSample[k] = v.length > 40 ? v.slice(0, 40) + '...' : v;`,
+      `          else if (t === 'number' || t === 'boolean') propSample[k] = v;`,
+      `          else if (v === null || v === undefined) propSample[k] = v;`,
+      `          else if (Array.isArray(v)) propSample[k] = '[' + t + '[' + v.length + ']]';`,
+      `          else if (t === 'function') propSample[k] = '[fn]';`,
+      `          else propSample[k] = '[object]';`,
+      `        }`,
+      `        rec.props = propSample;`,
+      `        rec.propKeys = propKeys;`,
+      `      } catch(e2) {}`,
+      `    }`,
+      `    __trickle_appendFileSync(f, JSON.stringify(rec) + '\\n');`,
       `  } catch(e) {}`,
       `}`,
     );
@@ -735,10 +788,10 @@ function transformEsmSource(
     });
   }
 
-  for (const { position, name, lineNo } of bodyInsertions) {
+  for (const { position, name, lineNo, propsExpr } of bodyInsertions) {
     allInsertions.push({
       position,
-      code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo})}catch(__e){}\n`,
+      code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){}\n`,
     });
   }
 

package/tsconfig.json

@@ -4,5 +4,6 @@
     "outDir": "./dist",
     "rootDir": "./src"
   },
-  "include": ["src/**/*"]
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.ts"]
 }