trickle-observe 0.2.54 → 0.2.56

package/dist/vite-plugin.js

@@ -90,6 +90,54 @@ function tricklePlugin(options = {}) {
         },
     };
 }
+/**
+ * Find the opening brace of a function body, skipping the parameter list.
+ * Starting from the character right after the opening `(` of the parameter list,
+ * scans forward matching parens to find the closing `)`, then finds the `{` after it.
+ * Returns -1 if not found.
+ */
+function findFunctionBodyBrace(source, afterOpenParen) {
+    let depth = 1;
+    let pos = afterOpenParen;
+    // Skip the parameter list (matching parens)
+    while (pos < source.length && depth > 0) {
+        const ch = source[pos];
+        if (ch === '(')
+            depth++;
+        else if (ch === ')') {
+            depth--;
+            if (depth === 0)
+                break;
+        }
+        else if (ch === '"' || ch === "'" || ch === '`') {
+            const quote = ch;
+            pos++;
+            while (pos < source.length && source[pos] !== quote) {
+                if (source[pos] === '\\')
+                    pos++;
+                pos++;
+            }
+        }
+        pos++;
+    }
+    // Now find the `{` after the closing `)`
+    while (pos < source.length) {
+        const ch = source[pos];
+        if (ch === '{')
+            return pos;
+        if (ch !== ' ' && ch !== '\t' && ch !== '\n' && ch !== '\r' && ch !== ':') {
+            // Hit something unexpected (like '=>' for arrows, or type annotation chars)
+            if (ch === '=' && pos + 1 < source.length && source[pos + 1] === '>') {
+                // Arrow — find { after =>
+                pos += 2;
+                continue;
+            }
+            // Type annotation — keep going (`: ReturnType`)
+        }
+        pos++;
+    }
+    return -1;
+}
 /**
  * Find the closing brace position for a function body starting at `openBrace`.
  */
@@ -446,19 +494,25 @@ function escapeRegexStr(str) {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 function transformEsmSource(source, filename, moduleName, backendUrl, debug, traceVars, originalSource) {
+    // Detect React files for component render tracking
+    const isReactFile = /\.(tsx|jsx)$/.test(filename);
     // Match top-level and nested function declarations (including async, export)
     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) {
         const name = match[1];
         if (name === 'require' || name === 'exports' || name === 'module')
             continue;
         const afterMatch = match.index + match[0].length;
-        const openBrace = source.indexOf('{', afterMatch);
+        // Use findFunctionBodyBrace to correctly skip destructured params like ({ a, b }) =>
+        const openBrace = findFunctionBodyBrace(source, afterMatch);
         if (openBrace === -1)
             continue;
-        // Extract parameter names
+        // Extract parameter names (between the opening ( and the body {)
         const paramStr = source.slice(afterMatch, openBrace).replace(/[()]/g, '').trim();
         const paramNames = paramStr
             ? paramStr.split(',').map(p => {
@@ -472,6 +526,16 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         if (closeBrace === -1)
             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, propsExpr: 'arguments[0]' });
+        }
     }
     // Also match arrow functions assigned to const/let/var
     const arrowRegex = /^[ \t]*(?:export\s+)?(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*[^=]+?)?\s*=>\s*\{/gm;
@@ -498,12 +562,61 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         if (closeBrace === -1)
             continue;
         funcInsertions.push({ position: closeBrace + 1, name, paramNames });
+        // React component render tracking: uppercase arrow function in .tsx/.jsx
+        if (isReactFile && /^[A-Z]/.test(name)) {
+            let lineNo = 1;
+            for (let i = 0; i < match.index; i++) {
+                if (source[i] === '\n')
+                    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
     const varInsertions = traceVars ? findVarDeclarations(source) : [];
     // Find destructured variable declarations for tracing
     const destructInsertions = traceVars ? findDestructuredDeclarations(source) : [];
-    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0)
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
     // Map transformed line numbers to original source line numbers.
@@ -528,7 +641,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     const importLines = [
         `import { wrapFunction as __trickle_wrapFn, configure as __trickle_configure } from 'trickle-observe';`,
     ];
-    if (varInsertions.length > 0 || destructInsertions.length > 0) {
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0) {
         importLines.push(`import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`, `import { join as __trickle_join } from 'node:path';`);
     }
     const prefixLines = [
@@ -555,6 +668,10 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     if (varInsertions.length > 0 || destructInsertions.length > 0) {
         prefixLines.push(`if (!globalThis.__trickle_var_tracer) {`, `  const _cache = new Set();`, `  let _varsFile = null;`, `  function _inferType(v, d) {`, `    if (d <= 0) return { kind: 'primitive', name: 'unknown' };`, `    if (v === null) return { kind: 'primitive', name: 'null' };`, `    if (v === undefined) return { kind: 'primitive', name: 'undefined' };`, `    const t = typeof v;`, `    if (t === 'string' || t === 'number' || t === 'boolean' || t === 'bigint' || t === 'symbol') return { kind: 'primitive', name: t };`, `    if (t === 'function') return { kind: 'function' };`, `    if (Array.isArray(v)) { return v.length === 0 ? { kind: 'array', element: { kind: 'primitive', name: 'unknown' } } : { kind: 'array', element: _inferType(v[0], d-1) }; }`, `    if (t === 'object') {`, `      if (v instanceof Date) return { kind: 'object', properties: { __date: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof RegExp) return { kind: 'object', properties: { __regexp: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof Error) return { kind: 'object', properties: { __error: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof Promise) return { kind: 'promise', resolved: { kind: 'primitive', name: 'unknown' } };`, `      const props = {}; const keys = Object.keys(v).slice(0, 20);`, `      for (const k of keys) { try { props[k] = _inferType(v[k], d-1); } catch(e) { props[k] = { kind: 'primitive', name: 'unknown' }; } }`, `      return { kind: 'object', properties: props };`, `    }`, `    return { kind: 'primitive', name: 'unknown' };`, `  }`, `  function _sanitize(v, d) {`, `    if (d <= 0) return '[truncated]'; if (v === null || v === undefined) return v; const t = typeof v;`, `    if (t === 'string') return v.length > 100 ? v.substring(0, 100) + '...' : v;`, `    if (t === 'number' || t === 'boolean') return v; if (t === 'bigint') return String(v);`, `    if (t === 'function') return '[Function: ' + (v.name || 'anonymous') + ']';`, `    if (Array.isArray(v)) return v.slice(0, 3).map(i => _sanitize(i, d-1));`, `    if (t === 'object') { if (v instanceof Date) return v.toISOString(); if (v instanceof RegExp) return String(v); if (v instanceof Error) return { error: v.message }; if (v instanceof Promise) return '[Promise]';`, `      const r = {}; const keys = Object.keys(v).slice(0, 10); for (const k of keys) { try { r[k] = _sanitize(v[k], d-1); } catch(e) { r[k] = '[unreadable]'; } } return r; }`, `    return String(v);`, `  }`, `  globalThis.__trickle_var_tracer = function(v, n, l, mod, file) {`, `    try {`, `      if (!_varsFile) {`, `        const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `        try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `        _varsFile = __trickle_join(dir, 'variables.jsonl');`, `      }`, `      const type = _inferType(v, 3);`, `      const th = JSON.stringify(type).substring(0, 32);`, `      const ck = file + ':' + l + ':' + n + ':' + th;`, `      if (_cache.has(ck)) return;`, `      _cache.add(ck);`, `      __trickle_appendFileSync(_varsFile, JSON.stringify({ kind: 'variable', varName: n, line: l, module: mod, file: file, type: type, typeHash: th, sample: _sanitize(v, 2) }) + '\\n');`, `    } catch(e) {}`, `  };`, `}`, `function __trickle_tv(v, n, l) { try { globalThis.__trickle_var_tracer(v, n, l, ${JSON.stringify(moduleName)}, ${JSON.stringify(filename)}); } catch(e) {} }`);
     }
+    // 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, 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');
     const allInsertions = [];
@@ -578,6 +695,12 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             code: `\n;try{${calls}}catch(__e){}\n`,
         });
     }
+    for (const { position, name, lineNo, propsExpr } of bodyInsertions) {
+        allInsertions.push({
+            position,
+            code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){}\n`,
+        });
+    }
     // Sort by position descending (insert from end to preserve earlier positions)
     allInsertions.sort((a, b) => b.position - a.position);
     let result = source;

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

@@ -84,6 +84,54 @@ export function tricklePlugin(options = {}) {
         },
     };
 }
+/**
+ * Find the opening brace of a function body, skipping the parameter list.
+ * Starting from the character right after the opening `(` of the parameter list,
+ * scans forward matching parens to find the closing `)`, then finds the `{` after it.
+ * Returns -1 if not found.
+ */
+function findFunctionBodyBrace(source, afterOpenParen) {
+    let depth = 1;
+    let pos = afterOpenParen;
+    // Skip the parameter list (matching parens)
+    while (pos < source.length && depth > 0) {
+        const ch = source[pos];
+        if (ch === '(')
+            depth++;
+        else if (ch === ')') {
+            depth--;
+            if (depth === 0)
+                break;
+        }
+        else if (ch === '"' || ch === "'" || ch === '`') {
+            const quote = ch;
+            pos++;
+            while (pos < source.length && source[pos] !== quote) {
+                if (source[pos] === '\\')
+                    pos++;
+                pos++;
+            }
+        }
+        pos++;
+    }
+    // Now find the `{` after the closing `)`
+    while (pos < source.length) {
+        const ch = source[pos];
+        if (ch === '{')
+            return pos;
+        if (ch !== ' ' && ch !== '\t' && ch !== '\n' && ch !== '\r' && ch !== ':') {
+            // Hit something unexpected (like '=>' for arrows, or type annotation chars)
+            if (ch === '=' && pos + 1 < source.length && source[pos + 1] === '>') {
+                // Arrow — find { after =>
+                pos += 2;
+                continue;
+            }
+            // Type annotation — keep going (`: ReturnType`)
+        }
+        pos++;
+    }
+    return -1;
+}
 /**
  * Find the closing brace position for a function body starting at `openBrace`.
  */
@@ -440,19 +488,25 @@ function escapeRegexStr(str) {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 function transformEsmSource(source, filename, moduleName, backendUrl, debug, traceVars, originalSource) {
+    // Detect React files for component render tracking
+    const isReactFile = /\.(tsx|jsx)$/.test(filename);
     // Match top-level and nested function declarations (including async, export)
     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) {
         const name = match[1];
         if (name === 'require' || name === 'exports' || name === 'module')
             continue;
         const afterMatch = match.index + match[0].length;
-        const openBrace = source.indexOf('{', afterMatch);
+        // Use findFunctionBodyBrace to correctly skip destructured params like ({ a, b }) =>
+        const openBrace = findFunctionBodyBrace(source, afterMatch);
         if (openBrace === -1)
             continue;
-        // Extract parameter names
+        // Extract parameter names (between the opening ( and the body {)
         const paramStr = source.slice(afterMatch, openBrace).replace(/[()]/g, '').trim();
         const paramNames = paramStr
             ? paramStr.split(',').map(p => {
@@ -466,6 +520,16 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         if (closeBrace === -1)
             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, propsExpr: 'arguments[0]' });
+        }
     }
     // Also match arrow functions assigned to const/let/var
     const arrowRegex = /^[ \t]*(?:export\s+)?(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*[^=]+?)?\s*=>\s*\{/gm;
@@ -492,12 +556,61 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         if (closeBrace === -1)
             continue;
         funcInsertions.push({ position: closeBrace + 1, name, paramNames });
+        // React component render tracking: uppercase arrow function in .tsx/.jsx
+        if (isReactFile && /^[A-Z]/.test(name)) {
+            let lineNo = 1;
+            for (let i = 0; i < match.index; i++) {
+                if (source[i] === '\n')
+                    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
     const varInsertions = traceVars ? findVarDeclarations(source) : [];
     // Find destructured variable declarations for tracing
     const destructInsertions = traceVars ? findDestructuredDeclarations(source) : [];
-    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0)
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
     // Map transformed line numbers to original source line numbers.
@@ -522,7 +635,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     const importLines = [
         `import { wrapFunction as __trickle_wrapFn, configure as __trickle_configure } from 'trickle-observe';`,
     ];
-    if (varInsertions.length > 0 || destructInsertions.length > 0) {
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0) {
         importLines.push(`import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`, `import { join as __trickle_join } from 'node:path';`);
     }
     const prefixLines = [
@@ -549,6 +662,10 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     if (varInsertions.length > 0 || destructInsertions.length > 0) {
         prefixLines.push(`if (!globalThis.__trickle_var_tracer) {`, `  const _cache = new Set();`, `  let _varsFile = null;`, `  function _inferType(v, d) {`, `    if (d <= 0) return { kind: 'primitive', name: 'unknown' };`, `    if (v === null) return { kind: 'primitive', name: 'null' };`, `    if (v === undefined) return { kind: 'primitive', name: 'undefined' };`, `    const t = typeof v;`, `    if (t === 'string' || t === 'number' || t === 'boolean' || t === 'bigint' || t === 'symbol') return { kind: 'primitive', name: t };`, `    if (t === 'function') return { kind: 'function' };`, `    if (Array.isArray(v)) { return v.length === 0 ? { kind: 'array', element: { kind: 'primitive', name: 'unknown' } } : { kind: 'array', element: _inferType(v[0], d-1) }; }`, `    if (t === 'object') {`, `      if (v instanceof Date) return { kind: 'object', properties: { __date: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof RegExp) return { kind: 'object', properties: { __regexp: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof Error) return { kind: 'object', properties: { __error: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof Promise) return { kind: 'promise', resolved: { kind: 'primitive', name: 'unknown' } };`, `      const props = {}; const keys = Object.keys(v).slice(0, 20);`, `      for (const k of keys) { try { props[k] = _inferType(v[k], d-1); } catch(e) { props[k] = { kind: 'primitive', name: 'unknown' }; } }`, `      return { kind: 'object', properties: props };`, `    }`, `    return { kind: 'primitive', name: 'unknown' };`, `  }`, `  function _sanitize(v, d) {`, `    if (d <= 0) return '[truncated]'; if (v === null || v === undefined) return v; const t = typeof v;`, `    if (t === 'string') return v.length > 100 ? v.substring(0, 100) + '...' : v;`, `    if (t === 'number' || t === 'boolean') return v; if (t === 'bigint') return String(v);`, `    if (t === 'function') return '[Function: ' + (v.name || 'anonymous') + ']';`, `    if (Array.isArray(v)) return v.slice(0, 3).map(i => _sanitize(i, d-1));`, `    if (t === 'object') { if (v instanceof Date) return v.toISOString(); if (v instanceof RegExp) return String(v); if (v instanceof Error) return { error: v.message }; if (v instanceof Promise) return '[Promise]';`, `      const r = {}; const keys = Object.keys(v).slice(0, 10); for (const k of keys) { try { r[k] = _sanitize(v[k], d-1); } catch(e) { r[k] = '[unreadable]'; } } return r; }`, `    return String(v);`, `  }`, `  globalThis.__trickle_var_tracer = function(v, n, l, mod, file) {`, `    try {`, `      if (!_varsFile) {`, `        const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `        try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `        _varsFile = __trickle_join(dir, 'variables.jsonl');`, `      }`, `      const type = _inferType(v, 3);`, `      const th = JSON.stringify(type).substring(0, 32);`, `      const ck = file + ':' + l + ':' + n + ':' + th;`, `      if (_cache.has(ck)) return;`, `      _cache.add(ck);`, `      __trickle_appendFileSync(_varsFile, JSON.stringify({ kind: 'variable', varName: n, line: l, module: mod, file: file, type: type, typeHash: th, sample: _sanitize(v, 2) }) + '\\n');`, `    } catch(e) {}`, `  };`, `}`, `function __trickle_tv(v, n, l) { try { globalThis.__trickle_var_tracer(v, n, l, ${JSON.stringify(moduleName)}, ${JSON.stringify(filename)}); } catch(e) {} }`);
     }
+    // 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, 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');
     const allInsertions = [];
@@ -572,6 +689,12 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             code: `\n;try{${calls}}catch(__e){}\n`,
         });
     }
+    for (const { position, name, lineNo, propsExpr } of bodyInsertions) {
+        allInsertions.push({
+            position,
+            code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){}\n`,
+        });
+    }
     // Sort by position descending (insert from end to preserve earlier positions)
     allInsertions.sort((a, b) => b.position - a.position);
     let result = source;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trickle-observe",
-  "version": "0.2.54",
+  "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

@@ -104,6 +104,48 @@ export function tricklePlugin(options: TricklePluginOptions = {}) {
   };
 }
 
+/**
+ * Find the opening brace of a function body, skipping the parameter list.
+ * Starting from the character right after the opening `(` of the parameter list,
+ * scans forward matching parens to find the closing `)`, then finds the `{` after it.
+ * Returns -1 if not found.
+ */
+function findFunctionBodyBrace(source: string, afterOpenParen: number): number {
+  let depth = 1;
+  let pos = afterOpenParen;
+  // Skip the parameter list (matching parens)
+  while (pos < source.length && depth > 0) {
+    const ch = source[pos];
+    if (ch === '(') depth++;
+    else if (ch === ')') { depth--; if (depth === 0) break; }
+    else if (ch === '"' || ch === "'" || ch === '`') {
+      const quote = ch;
+      pos++;
+      while (pos < source.length && source[pos] !== quote) {
+        if (source[pos] === '\\') pos++;
+        pos++;
+      }
+    }
+    pos++;
+  }
+  // Now find the `{` after the closing `)`
+  while (pos < source.length) {
+    const ch = source[pos];
+    if (ch === '{') return pos;
+    if (ch !== ' ' && ch !== '\t' && ch !== '\n' && ch !== '\r' && ch !== ':') {
+      // Hit something unexpected (like '=>' for arrows, or type annotation chars)
+      if (ch === '=' && pos + 1 < source.length && source[pos + 1] === '>') {
+        // Arrow — find { after =>
+        pos += 2;
+        continue;
+      }
+      // Type annotation — keep going (`: ReturnType`)
+    }
+    pos++;
+  }
+  return -1;
+}
+
 /**
  * Find the closing brace position for a function body starting at `openBrace`.
  */
@@ -448,9 +490,15 @@ function transformEsmSource(
   traceVars: boolean,
   originalSource?: string | null,
 ): string {
+  // Detect React files for component render tracking
+  const isReactFile = /\.(tsx|jsx)$/.test(filename);
+
   // Match top-level and nested function declarations (including async, export)
   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)
+  // 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) {
@@ -458,10 +506,11 @@ function transformEsmSource(
     if (name === 'require' || name === 'exports' || name === 'module') continue;
 
     const afterMatch = match.index + match[0].length;
-    const openBrace = source.indexOf('{', afterMatch);
+    // Use findFunctionBodyBrace to correctly skip destructured params like ({ a, b }) =>
+    const openBrace = findFunctionBodyBrace(source, afterMatch);
     if (openBrace === -1) continue;
 
-    // Extract parameter names
+    // Extract parameter names (between the opening ( and the body {)
     const paramStr = source.slice(afterMatch, openBrace).replace(/[()]/g, '').trim();
     const paramNames = paramStr
       ? paramStr.split(',').map(p => {
@@ -475,6 +524,16 @@ function transformEsmSource(
     if (closeBrace === -1) 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, propsExpr: 'arguments[0]' });
+    }
   }
 
   // Also match arrow functions assigned to const/let/var
@@ -503,15 +562,58 @@ function transformEsmSource(
     if (closeBrace === -1) continue;
 
     funcInsertions.push({ position: closeBrace + 1, name, paramNames });
+
+    // React component render tracking: uppercase arrow function in .tsx/.jsx
+    if (isReactFile && /^[A-Z]/.test(name)) {
+      let lineNo = 1;
+      for (let i = 0; i < match.index; i++) {
+        if (source[i] === '\n') 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
   const varInsertions = traceVars ? findVarDeclarations(source) : [];
 
   // Find destructured variable declarations for tracing
   const destructInsertions = traceVars ? findDestructuredDeclarations(source) : [];
 
-  if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0) return source;
+  if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0) return source;
 
   // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
   // Map transformed line numbers to original source line numbers.
@@ -536,7 +638,7 @@ function transformEsmSource(
   const importLines: string[] = [
     `import { wrapFunction as __trickle_wrapFn, configure as __trickle_configure } from 'trickle-observe';`,
   ];
-  if (varInsertions.length > 0 || destructInsertions.length > 0) {
+  if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0) {
     importLines.push(
       `import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`,
       `import { join as __trickle_join } from 'node:path';`,
@@ -619,6 +721,43 @@ function transformEsmSource(
     );
   }
 
+  // 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, 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');
 
@@ -649,6 +788,13 @@ function transformEsmSource(
     });
   }
 
+  for (const { position, name, lineNo, propsExpr } of bodyInsertions) {
+    allInsertions.push({
+      position,
+      code: `\ntry{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){}\n`,
+    });
+  }
+
   // Sort by position descending (insert from end to preserve earlier positions)
   allInsertions.sort((a, b) => b.position - a.position);
 

package/tsconfig.json

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