trickle-observe 0.2.56 → 0.2.59

package/dist/vite-plugin.js

@@ -612,11 +612,88 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             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.
@@ -641,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 = [
@@ -670,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, 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(`if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`, `if (!globalThis.__trickle_react_prev_props) { globalThis.__trickle_react_prev_props = 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] = '[arr:' + v.length + ']';`, `          else if (t === 'function') propSample[k] = '[fn]';`, `          else propSample[k] = '[object]';`, `        }`, `        rec.props = propSample;`, `        rec.propKeys = propKeys;`, `        // Detect which props changed vs previous render`, `        const prevProps = globalThis.__trickle_react_prev_props.get(key);`, `        if (prevProps && count > 1) {`, `          const changedProps = [];`, `          const allKeys = new Set([...Object.keys(prevProps), ...Object.keys(propSample)]);`, `          for (const k of allKeys) {`, `            const prev = prevProps[k];`, `            const curr = propSample[k];`, `            if (String(prev) !== String(curr)) {`, `              changedProps.push({ key: k, from: prev, to: curr });`, `            }`, `          }`, `          if (changedProps.length > 0) rec.changedProps = changedProps;`, `        }`, `        globalThis.__trickle_react_prev_props.set(key, propSample);`, `      } 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');
@@ -701,6 +782,11 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             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-esm/vite-plugin.js

@@ -606,11 +606,88 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             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.
@@ -635,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 = [
@@ -664,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, 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(`if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`, `if (!globalThis.__trickle_react_prev_props) { globalThis.__trickle_react_prev_props = 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] = '[arr:' + v.length + ']';`, `          else if (t === 'function') propSample[k] = '[fn]';`, `          else propSample[k] = '[object]';`, `        }`, `        rec.props = propSample;`, `        rec.propKeys = propKeys;`, `        // Detect which props changed vs previous render`, `        const prevProps = globalThis.__trickle_react_prev_props.get(key);`, `        if (prevProps && count > 1) {`, `          const changedProps = [];`, `          const allKeys = new Set([...Object.keys(prevProps), ...Object.keys(propSample)]);`, `          for (const k of allKeys) {`, `            const prev = prevProps[k];`, `            const curr = propSample[k];`, `            if (String(prev) !== String(curr)) {`, `              changedProps.push({ key: k, from: prev, to: curr });`, `            }`, `          }`, `          if (changedProps.length > 0) rec.changedProps = changedProps;`, `        }`, `        globalThis.__trickle_react_prev_props.set(key, propSample);`, `      } 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');
@@ -695,6 +776,11 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             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.56",
+  "version": "0.2.59",
   "description": "Runtime type observability for JavaScript applications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/vite-plugin.test.ts

@@ -201,3 +201,106 @@ describe('Correct function body brace detection', () => {
     assert.ok(wrapIdx > bodyIdx, 'function wrap should be after the function body');
   });
 });
+
+// ── Re-render cause detection ─────────────────────────────────────────────────
+
+describe('Re-render cause detection', () => {
+  it('emits changedProps tracking code in transformed output', () => {
+    const code = `function Card({ count, label }) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    // Should include the prev_props map and comparison logic
+    assert.ok(out!.includes('__trickle_react_prev_props'), 'should initialize prev_props map');
+    assert.ok(out!.includes('changedProps'), 'should include changedProps detection');
+  });
+
+  it('includes prev props comparison logic in __trickle_rc', () => {
+    const code = `function UserCard({ name, age }) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('prevProps'), 'should reference prevProps');
+    assert.ok(out!.includes('globalThis.__trickle_react_prev_props.set'), 'should store current props as prev');
+  });
+
+  it('stores previous props keyed by component file+line', () => {
+    const code = `function Button({ disabled, onClick }) { return null; }`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    // The key used for prev_props storage should be the same as the render key
+    assert.ok(out!.includes('globalThis.__trickle_react_prev_props.get(key)'), 'should retrieve prev props by key');
+  });
+
+  it('does not emit prev_props tracking in .ts files', () => {
+    const code = `function helper({ x, y }) { return x + y; }`;
+    const out = transformTs(code);
+    if (out) {
+      assert.ok(!out.includes('__trickle_react_prev_props'), 'should NOT track prev props in .ts files');
+    }
+  });
+});
+
+// ── 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

@@ -607,13 +607,87 @@ function transformEsmSource(
 
 
 
+  // 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.
@@ -638,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';`,
@@ -725,6 +799,7 @@ function transformEsmSource(
   if (bodyInsertions.length > 0) {
     prefixLines.push(
       `if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`,
+      `if (!globalThis.__trickle_react_prev_props) { globalThis.__trickle_react_prev_props = new Map(); }`,
       `function __trickle_rc(name, line, props) {`,
       `  try {`,
       `    const key = ${JSON.stringify(filename)} + ':' + line;`,
@@ -744,12 +819,27 @@ function transformEsmSource(
       `          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 (Array.isArray(v)) propSample[k] = '[arr:' + v.length + ']';`,
       `          else if (t === 'function') propSample[k] = '[fn]';`,
       `          else propSample[k] = '[object]';`,
       `        }`,
       `        rec.props = propSample;`,
       `        rec.propKeys = propKeys;`,
+      `        // Detect which props changed vs previous render`,
+      `        const prevProps = globalThis.__trickle_react_prev_props.get(key);`,
+      `        if (prevProps && count > 1) {`,
+      `          const changedProps = [];`,
+      `          const allKeys = new Set([...Object.keys(prevProps), ...Object.keys(propSample)]);`,
+      `          for (const k of allKeys) {`,
+      `            const prev = prevProps[k];`,
+      `            const curr = propSample[k];`,
+      `            if (String(prev) !== String(curr)) {`,
+      `              changedProps.push({ key: k, from: prev, to: curr });`,
+      `            }`,
+      `          }`,
+      `          if (changedProps.length > 0) rec.changedProps = changedProps;`,
+      `        }`,
+      `        globalThis.__trickle_react_prev_props.set(key, propSample);`,
       `      } catch(e2) {}`,
       `    }`,
       `    __trickle_appendFileSync(f, JSON.stringify(rec) + '\\n');`,
@@ -758,6 +848,27 @@ function transformEsmSource(
     );
   }
 
+  // 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');
 
@@ -795,6 +906,12 @@ function transformEsmSource(
     });
   }
 
+  // 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);