trickle-observe 0.2.55 → 0.2.58

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,14 +569,131 @@ 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 });
+        }
+    }
+    const hookInsertions = [];
+    if (isReactFile) {
+        // Match useEffect(, useMemo(, useCallback( — also handles React.useEffect(, etc.
+        const hookCallRegex = /\b(useEffect|useMemo|useCallback)\s*\(/g;
+        let hookMatch;
+        while ((hookMatch = hookCallRegex.exec(source)) !== null) {
+            const hookName = hookMatch[1];
+            const afterParen = hookMatch.index + hookMatch[0].length;
+            // Skip past optional 'async '
+            let pos = afterParen;
+            while (pos < source.length && (source[pos] === ' ' || source[pos] === '\t' || source[pos] === '\n'))
+                pos++;
+            if (source.slice(pos, pos + 6) === 'async ') {
+                pos += 6;
+                while (pos < source.length && (source[pos] === ' ' || source[pos] === '\t'))
+                    pos++;
+            }
+            // Expect a callback: arrow fn `(` or `identifier =>` or `function`
+            if (source[pos] !== '(' && !/^[a-zA-Z_$]/.test(source[pos]) && source.slice(pos, pos + 8) !== 'function')
+                continue;
+            // Find the opening `{` of the callback body depending on callback form:
+            // 1. Arrow with parens: (x, y) => {  — call findFunctionBodyBrace from inside the (
+            // 2. Named/anon function: function() {  — find the ( first
+            // 3. Single identifier: props => {  — skip identifier, find =>, find {
+            let callbackBodyBrace = -1;
+            if (source[pos] === '(') {
+                // Arrow function with param list: () => { ... } or (x) => { ... }
+                callbackBodyBrace = findFunctionBodyBrace(source, pos + 1);
+            }
+            else if (source.slice(pos, pos + 8) === 'function') {
+                // function() {} or function name() {}
+                let funcPos = pos + 8;
+                while (funcPos < source.length && /\s/.test(source[funcPos]))
+                    funcPos++;
+                if (/[a-zA-Z_$]/.test(source[funcPos])) {
+                    while (funcPos < source.length && /[a-zA-Z0-9_$]/.test(source[funcPos]))
+                        funcPos++;
+                }
+                while (funcPos < source.length && source[funcPos] !== '(')
+                    funcPos++;
+                if (funcPos < source.length) {
+                    callbackBodyBrace = findFunctionBodyBrace(source, funcPos + 1);
+                }
+            }
+            else {
+                // Single identifier param: props => { ... }
+                let idEnd = pos;
+                while (idEnd < source.length && /[a-zA-Z0-9_$]/.test(source[idEnd]))
+                    idEnd++;
+                let arrowPos = idEnd;
+                while (arrowPos < source.length && (source[arrowPos] === ' ' || source[arrowPos] === '\t'))
+                    arrowPos++;
+                if (source.slice(arrowPos, arrowPos + 2) === '=>') {
+                    arrowPos += 2;
+                    while (arrowPos < source.length && (source[arrowPos] === ' ' || source[arrowPos] === '\t' || source[arrowPos] === '\n'))
+                        arrowPos++;
+                    if (source[arrowPos] === '{')
+                        callbackBodyBrace = arrowPos;
+                }
+            }
+            if (callbackBodyBrace === -1)
+                continue;
+            // Verify nothing suspicious between pos and the `{` (no semicolons, no other hook calls)
+            const between = source.slice(pos, callbackBodyBrace);
+            if (between.includes(';') || /\buseEffect\b|\buseMemo\b|\buseCallback\b/.test(between))
+                continue;
+            const closeBrace = findClosingBrace(source, callbackBodyBrace);
+            if (closeBrace === -1)
+                continue;
+            let lineNo = 1;
+            for (let i = 0; i < hookMatch.index; i++) {
+                if (source[i] === '\n')
+                    lineNo++;
+            }
+            hookInsertions.push({ wrapStart: afterParen, wrapEnd: closeBrace + 1, hookName, lineNo });
         }
     }
     // 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 && bodyInsertions.length === 0)
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
     // Map transformed line numbers to original source line numbers.
@@ -599,7 +718,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 || bodyInsertions.length > 0) {
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.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 = [
@@ -628,7 +747,11 @@ 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) {}`, `}`);
+    }
+    // Add React hook tracker if needed
+    if (hookInsertions.length > 0) {
+        prefixLines.push(`if (!globalThis.__trickle_hook_counts) { globalThis.__trickle_hook_counts = new Map(); }`, `function __trickle_hw(hookName, line, cb) {`, `  return function(...args) {`, `    try {`, `      const key = ${JSON.stringify(filename)} + ':' + line + ':' + hookName;`, `      const n = (globalThis.__trickle_hook_counts.get(key) || 0) + 1;`, `      globalThis.__trickle_hook_counts.set(key, n);`, `      const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `      try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e2) {}`, `      __trickle_appendFileSync(__trickle_join(dir, 'variables.jsonl'),`, `        JSON.stringify({ kind: 'react_hook', hookName, file: ${JSON.stringify(filename)}, line, invokeCount: n, timestamp: Date.now() / 1000 }) + '\\n');`, `    } catch(e) {}`, `    return cb(...args);`, `  };`, `}`);
     }
     prefixLines.push('');
     const prefix = prefixLines.join('\n');
@@ -653,12 +776,17 @@ 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`,
         });
     }
+    // Hook insertions: each hook needs TWO insertions (wrapper start before callback, `)` after)
+    for (const { wrapStart, wrapEnd, hookName, lineNo } of hookInsertions) {
+        allInsertions.push({ position: wrapStart, code: `__trickle_hw(${JSON.stringify(hookName)},${lineNo},` });
+        allInsertions.push({ position: wrapEnd, code: `)` });
+    }
     // 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

@@ -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,14 +563,131 @@ 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 });
+        }
+    }
+    const hookInsertions = [];
+    if (isReactFile) {
+        // Match useEffect(, useMemo(, useCallback( — also handles React.useEffect(, etc.
+        const hookCallRegex = /\b(useEffect|useMemo|useCallback)\s*\(/g;
+        let hookMatch;
+        while ((hookMatch = hookCallRegex.exec(source)) !== null) {
+            const hookName = hookMatch[1];
+            const afterParen = hookMatch.index + hookMatch[0].length;
+            // Skip past optional 'async '
+            let pos = afterParen;
+            while (pos < source.length && (source[pos] === ' ' || source[pos] === '\t' || source[pos] === '\n'))
+                pos++;
+            if (source.slice(pos, pos + 6) === 'async ') {
+                pos += 6;
+                while (pos < source.length && (source[pos] === ' ' || source[pos] === '\t'))
+                    pos++;
+            }
+            // Expect a callback: arrow fn `(` or `identifier =>` or `function`
+            if (source[pos] !== '(' && !/^[a-zA-Z_$]/.test(source[pos]) && source.slice(pos, pos + 8) !== 'function')
+                continue;
+            // Find the opening `{` of the callback body depending on callback form:
+            // 1. Arrow with parens: (x, y) => {  — call findFunctionBodyBrace from inside the (
+            // 2. Named/anon function: function() {  — find the ( first
+            // 3. Single identifier: props => {  — skip identifier, find =>, find {
+            let callbackBodyBrace = -1;
+            if (source[pos] === '(') {
+                // Arrow function with param list: () => { ... } or (x) => { ... }
+                callbackBodyBrace = findFunctionBodyBrace(source, pos + 1);
+            }
+            else if (source.slice(pos, pos + 8) === 'function') {
+                // function() {} or function name() {}
+                let funcPos = pos + 8;
+                while (funcPos < source.length && /\s/.test(source[funcPos]))
+                    funcPos++;
+                if (/[a-zA-Z_$]/.test(source[funcPos])) {
+                    while (funcPos < source.length && /[a-zA-Z0-9_$]/.test(source[funcPos]))
+                        funcPos++;
+                }
+                while (funcPos < source.length && source[funcPos] !== '(')
+                    funcPos++;
+                if (funcPos < source.length) {
+                    callbackBodyBrace = findFunctionBodyBrace(source, funcPos + 1);
+                }
+            }
+            else {
+                // Single identifier param: props => { ... }
+                let idEnd = pos;
+                while (idEnd < source.length && /[a-zA-Z0-9_$]/.test(source[idEnd]))
+                    idEnd++;
+                let arrowPos = idEnd;
+                while (arrowPos < source.length && (source[arrowPos] === ' ' || source[arrowPos] === '\t'))
+                    arrowPos++;
+                if (source.slice(arrowPos, arrowPos + 2) === '=>') {
+                    arrowPos += 2;
+                    while (arrowPos < source.length && (source[arrowPos] === ' ' || source[arrowPos] === '\t' || source[arrowPos] === '\n'))
+                        arrowPos++;
+                    if (source[arrowPos] === '{')
+                        callbackBodyBrace = arrowPos;
+                }
+            }
+            if (callbackBodyBrace === -1)
+                continue;
+            // Verify nothing suspicious between pos and the `{` (no semicolons, no other hook calls)
+            const between = source.slice(pos, callbackBodyBrace);
+            if (between.includes(';') || /\buseEffect\b|\buseMemo\b|\buseCallback\b/.test(between))
+                continue;
+            const closeBrace = findClosingBrace(source, callbackBodyBrace);
+            if (closeBrace === -1)
+                continue;
+            let lineNo = 1;
+            for (let i = 0; i < hookMatch.index; i++) {
+                if (source[i] === '\n')
+                    lineNo++;
+            }
+            hookInsertions.push({ wrapStart: afterParen, wrapEnd: closeBrace + 1, hookName, lineNo });
         }
     }
     // 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 && bodyInsertions.length === 0)
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
     // Map transformed line numbers to original source line numbers.
@@ -593,7 +712,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 || bodyInsertions.length > 0) {
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.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 = [
@@ -622,7 +741,11 @@ 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) {}`, `}`);
+    }
+    // Add React hook tracker if needed
+    if (hookInsertions.length > 0) {
+        prefixLines.push(`if (!globalThis.__trickle_hook_counts) { globalThis.__trickle_hook_counts = new Map(); }`, `function __trickle_hw(hookName, line, cb) {`, `  return function(...args) {`, `    try {`, `      const key = ${JSON.stringify(filename)} + ':' + line + ':' + hookName;`, `      const n = (globalThis.__trickle_hook_counts.get(key) || 0) + 1;`, `      globalThis.__trickle_hook_counts.set(key, n);`, `      const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `      try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e2) {}`, `      __trickle_appendFileSync(__trickle_join(dir, 'variables.jsonl'),`, `        JSON.stringify({ kind: 'react_hook', hookName, file: ${JSON.stringify(filename)}, line, invokeCount: n, timestamp: Date.now() / 1000 }) + '\\n');`, `    } catch(e) {}`, `    return cb(...args);`, `  };`, `}`);
     }
     prefixLines.push('');
     const prefix = prefixLines.join('\n');
@@ -647,12 +770,17 @@ 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`,
         });
     }
+    // Hook insertions: each hook needs TWO insertions (wrapper start before callback, `)` after)
+    for (const { wrapStart, wrapEnd, hookName, lineNo } of hookInsertions) {
+        allInsertions.push({ position: wrapStart, code: `__trickle_hw(${JSON.stringify(hookName)},${lineNo},` });
+        allInsertions.push({ position: wrapEnd, code: `)` });
+    }
     // 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.55",
+  "version": "0.2.58",
   "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,269 @@
+/**
+ * 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');
+  });
+});
+
+// ── React hook observability ──────────────────────────────────────────────────
+
+describe('React hook observability', () => {
+  it('wraps useEffect callback with __trickle_hw', () => {
+    const code = `function App() {\n  useEffect(() => {\n    console.log('hi');\n  }, []);\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_hw'), 'should inject hook wrapper');
+    assert.ok(out!.includes('"useEffect"'), 'should include hook name');
+  });
+
+  it('wraps useMemo callback with __trickle_hw', () => {
+    const code = `function App() {\n  const val = useMemo(() => {\n    return expensive();\n  }, [dep]);\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_hw'), 'should inject hook wrapper');
+    assert.ok(out!.includes('"useMemo"'), 'should include hook name');
+  });
+
+  it('wraps useCallback callback with __trickle_hw', () => {
+    const code = `function App() {\n  const fn = useCallback(() => {\n    doSomething();\n  }, [dep]);\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_hw'), 'should inject hook wrapper');
+    assert.ok(out!.includes('"useCallback"'), 'should include hook name');
+  });
+
+  it('wraps all three hook types in the same component', () => {
+    const code = [
+      `function Dashboard() {`,
+      `  useEffect(() => { fetch('/api'); }, []);`,
+      `  const data = useMemo(() => { return transform(raw); }, [raw]);`,
+      `  const handler = useCallback(() => { handleClick(); }, []);`,
+      `  return null;`,
+      `}`,
+    ].join('\n');
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    const hwCount = (out!.match(/__trickle_hw/g) || []).length;
+    // preamble definition + 3 call sites = 4 occurrences
+    assert.ok(hwCount >= 4, `should have at least 4 __trickle_hw occurrences (preamble + 3 wraps), got ${hwCount}`);
+  });
+
+  it('includes react_hook kind in emitted record code', () => {
+    const code = `function App() {\n  useEffect(() => {\n    console.log('hi');\n  }, []);\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes("'react_hook'"), 'emitted record should have kind react_hook');
+  });
+
+  it('does NOT inject hook tracking in .ts files', () => {
+    const code = `function helper() {\n  useEffect(() => { doStuff(); }, []);\n  return null;\n}`;
+    const out = transformTs(code);
+    if (out) {
+      assert.ok(!out.includes('__trickle_hw'), 'should NOT inject hook tracker in .ts files');
+    }
+  });
+
+  it('wraps useEffect with single identifier param callback', () => {
+    const code = `function App() {\n  useEffect(function() {\n    console.log('hi');\n  }, []);\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_hw'), 'should inject hook wrapper for function() {} form');
+  });
+});

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,19 +569,125 @@ 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 });
     }
   }
 
 
 
+  // React hook tracking — wrap the callback arg of useEffect/useMemo/useCallback
+  // to count how many times each hook fires (effect ran, memo recomputed, callback invoked).
+  // Each hook produces TWO insertions: wrapStart (before callback) and wrapEnd (after callback `}`).
+  interface HookInsertion { wrapStart: number; wrapEnd: number; hookName: string; lineNo: number }
+  const hookInsertions: HookInsertion[] = [];
+
+  if (isReactFile) {
+    // Match useEffect(, useMemo(, useCallback( — also handles React.useEffect(, etc.
+    const hookCallRegex = /\b(useEffect|useMemo|useCallback)\s*\(/g;
+    let hookMatch;
+    while ((hookMatch = hookCallRegex.exec(source)) !== null) {
+      const hookName = hookMatch[1];
+      const afterParen = hookMatch.index + hookMatch[0].length;
+
+      // Skip past optional 'async '
+      let pos = afterParen;
+      while (pos < source.length && (source[pos] === ' ' || source[pos] === '\t' || source[pos] === '\n')) pos++;
+      if (source.slice(pos, pos + 6) === 'async ') {
+        pos += 6;
+        while (pos < source.length && (source[pos] === ' ' || source[pos] === '\t')) pos++;
+      }
+
+      // Expect a callback: arrow fn `(` or `identifier =>` or `function`
+      if (source[pos] !== '(' && !/^[a-zA-Z_$]/.test(source[pos]) && source.slice(pos, pos + 8) !== 'function') continue;
+
+      // Find the opening `{` of the callback body depending on callback form:
+      // 1. Arrow with parens: (x, y) => {  — call findFunctionBodyBrace from inside the (
+      // 2. Named/anon function: function() {  — find the ( first
+      // 3. Single identifier: props => {  — skip identifier, find =>, find {
+      let callbackBodyBrace = -1;
+      if (source[pos] === '(') {
+        // Arrow function with param list: () => { ... } or (x) => { ... }
+        callbackBodyBrace = findFunctionBodyBrace(source, pos + 1);
+      } else if (source.slice(pos, pos + 8) === 'function') {
+        // function() {} or function name() {}
+        let funcPos = pos + 8;
+        while (funcPos < source.length && /\s/.test(source[funcPos])) funcPos++;
+        if (/[a-zA-Z_$]/.test(source[funcPos])) {
+          while (funcPos < source.length && /[a-zA-Z0-9_$]/.test(source[funcPos])) funcPos++;
+        }
+        while (funcPos < source.length && source[funcPos] !== '(') funcPos++;
+        if (funcPos < source.length) {
+          callbackBodyBrace = findFunctionBodyBrace(source, funcPos + 1);
+        }
+      } else {
+        // Single identifier param: props => { ... }
+        let idEnd = pos;
+        while (idEnd < source.length && /[a-zA-Z0-9_$]/.test(source[idEnd])) idEnd++;
+        let arrowPos = idEnd;
+        while (arrowPos < source.length && (source[arrowPos] === ' ' || source[arrowPos] === '\t')) arrowPos++;
+        if (source.slice(arrowPos, arrowPos + 2) === '=>') {
+          arrowPos += 2;
+          while (arrowPos < source.length && (source[arrowPos] === ' ' || source[arrowPos] === '\t' || source[arrowPos] === '\n')) arrowPos++;
+          if (source[arrowPos] === '{') callbackBodyBrace = arrowPos;
+        }
+      }
+      if (callbackBodyBrace === -1) continue;
+
+      // Verify nothing suspicious between pos and the `{` (no semicolons, no other hook calls)
+      const between = source.slice(pos, callbackBodyBrace);
+      if (between.includes(';') || /\buseEffect\b|\buseMemo\b|\buseCallback\b/.test(between)) continue;
+
+      const closeBrace = findClosingBrace(source, callbackBodyBrace);
+      if (closeBrace === -1) continue;
+
+      let lineNo = 1;
+      for (let i = 0; i < hookMatch.index; i++) {
+        if (source[i] === '\n') lineNo++;
+      }
+
+      hookInsertions.push({ wrapStart: afterParen, wrapEnd: closeBrace + 1, hookName, lineNo });
+    }
+  }
+
   // 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 && bodyInsertions.length === 0) return source;
+  if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0) return source;
 
   // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
   // Map transformed line numbers to original source line numbers.
@@ -604,7 +712,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 || bodyInsertions.length > 0) {
+  if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0) {
     importLines.push(
       `import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`,
       `import { join as __trickle_join } from 'node:path';`,
@@ -691,7 +799,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,12 +807,52 @@ 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) {}`,
       `}`,
     );
   }
 
+  // Add React hook tracker if needed
+  if (hookInsertions.length > 0) {
+    prefixLines.push(
+      `if (!globalThis.__trickle_hook_counts) { globalThis.__trickle_hook_counts = new Map(); }`,
+      `function __trickle_hw(hookName, line, cb) {`,
+      `  return function(...args) {`,
+      `    try {`,
+      `      const key = ${JSON.stringify(filename)} + ':' + line + ':' + hookName;`,
+      `      const n = (globalThis.__trickle_hook_counts.get(key) || 0) + 1;`,
+      `      globalThis.__trickle_hook_counts.set(key, n);`,
+      `      const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`,
+      `      try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e2) {}`,
+      `      __trickle_appendFileSync(__trickle_join(dir, 'variables.jsonl'),`,
+      `        JSON.stringify({ kind: 'react_hook', hookName, file: ${JSON.stringify(filename)}, line, invokeCount: n, timestamp: Date.now() / 1000 }) + '\\n');`,
+      `    } catch(e) {}`,
+      `    return cb(...args);`,
+      `  };`,
+      `}`,
+    );
+  }
+
   prefixLines.push('');
   const prefix = prefixLines.join('\n');
 
@@ -735,13 +883,19 @@ 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`,
     });
   }
 
+  // Hook insertions: each hook needs TWO insertions (wrapper start before callback, `)` after)
+  for (const { wrapStart, wrapEnd, hookName, lineNo } of hookInsertions) {
+    allInsertions.push({ position: wrapStart, code: `__trickle_hw(${JSON.stringify(hookName)},${lineNo},` });
+    allInsertions.push({ position: wrapEnd, code: `)` });
+  }
+
   // 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"]
 }