trickle-observe 0.2.58 → 0.2.60

package/dist/vite-plugin.js

@@ -689,11 +689,57 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             hookInsertions.push({ wrapStart: afterParen, wrapEnd: closeBrace + 1, hookName, lineNo });
         }
     }
+    const stateInsertions = [];
+    if (isReactFile) {
+        const useStateRegex = /const\s+\[([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\]\s*=\s*(?:React\.)?useState\s*(?:<[^(]*>)?\s*\(/gm;
+        let sm;
+        while ((sm = useStateRegex.exec(source)) !== null) {
+            const stateName = sm[1];
+            const setterName = sm[2];
+            // Find the position of setterName within the match (after the comma)
+            const matchStr = sm[0];
+            const commaIdx = matchStr.indexOf(',');
+            const setterInMatch = matchStr.indexOf(setterName, commaIdx);
+            if (setterInMatch === -1)
+                continue;
+            const renamePos = sm.index + setterInMatch;
+            // Skip the useState(...) argument list to find the end of the statement
+            let pos = sm.index + sm[0].length;
+            let depth = 1;
+            while (pos < source.length && depth > 0) {
+                const ch = source[pos];
+                if (ch === '(')
+                    depth++;
+                else if (ch === ')')
+                    depth--;
+                else if (ch === '"' || ch === "'" || ch === '`') {
+                    const q = ch;
+                    pos++;
+                    while (pos < source.length && source[pos] !== q) {
+                        if (source[pos] === '\\')
+                            pos++;
+                        pos++;
+                    }
+                }
+                pos++;
+            }
+            // Skip to end of line (past semicolon or newline)
+            while (pos < source.length && source[pos] !== ';' && source[pos] !== '\n')
+                pos++;
+            const afterLine = pos + 1;
+            let lineNo = 1;
+            for (let i = 0; i < sm.index; i++) {
+                if (source[i] === '\n')
+                    lineNo++;
+            }
+            stateInsertions.push({ renamePos, afterLine, stateName, setterName, 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 && hookInsertions.length === 0)
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
     // Map transformed line numbers to original source line numbers.
@@ -718,7 +764,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 || hookInsertions.length > 0) {
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.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 = [
@@ -747,12 +793,16 @@ 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);`, `  };`, `}`);
     }
+    // Add useState setter tracker if needed
+    if (stateInsertions.length > 0) {
+        prefixLines.push(`if (!globalThis.__trickle_state_counts) { globalThis.__trickle_state_counts = new Map(); }`, `function __trickle_ss(stateName, line, origSetter) {`, `  return function(newVal) {`, `    try {`, `      const key = ${JSON.stringify(filename)} + ':' + line + ':' + stateName;`, `      const n = (globalThis.__trickle_state_counts.get(key) || 0) + 1;`, `      globalThis.__trickle_state_counts.set(key, n);`, `      const t = typeof newVal;`, `      let sample;`, `      if (t === 'function') sample = '[fn updater]';`, `      else if (t === 'string') sample = newVal.length > 40 ? newVal.slice(0,40)+'...' : newVal;`, `      else if (t === 'number' || t === 'boolean') sample = newVal;`, `      else if (newVal === null || newVal === undefined) sample = newVal;`, `      else if (Array.isArray(newVal)) sample = '[arr:'+newVal.length+']';`, `      else sample = '[object]';`, `      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_state', file: ${JSON.stringify(filename)}, line, stateName, updateCount: n, value: sample, timestamp: Date.now()/1000 }) + '\\n');`, `    } catch(e) {}`, `    return origSetter(newVal);`, `  };`, `}`);
+    }
     prefixLines.push('');
     const prefix = prefixLines.join('\n');
     const allInsertions = [];
@@ -787,6 +837,16 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         allInsertions.push({ position: wrapStart, code: `__trickle_hw(${JSON.stringify(hookName)},${lineNo},` });
         allInsertions.push({ position: wrapEnd, code: `)` });
     }
+    // useState insertions: TWO insertions per useState
+    // 1. Prefix setter name with '__trickle_s_' (rename in destructuring)
+    // 2. After statement end, declare tracked wrapper: const setter = __trickle_ss(...)
+    for (const { renamePos, afterLine, stateName, setterName, lineNo } of stateInsertions) {
+        allInsertions.push({ position: renamePos, code: `__trickle_s_` });
+        allInsertions.push({
+            position: afterLine,
+            code: `const ${setterName}=__trickle_ss(${JSON.stringify(stateName)},${lineNo},__trickle_s_${setterName});\n`,
+        });
+    }
     // Sort by position descending (insert from end to preserve earlier positions)
     allInsertions.sort((a, b) => b.position - a.position);
     let result = source;

package/dist-esm/vite-plugin.js

@@ -683,11 +683,57 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             hookInsertions.push({ wrapStart: afterParen, wrapEnd: closeBrace + 1, hookName, lineNo });
         }
     }
+    const stateInsertions = [];
+    if (isReactFile) {
+        const useStateRegex = /const\s+\[([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\]\s*=\s*(?:React\.)?useState\s*(?:<[^(]*>)?\s*\(/gm;
+        let sm;
+        while ((sm = useStateRegex.exec(source)) !== null) {
+            const stateName = sm[1];
+            const setterName = sm[2];
+            // Find the position of setterName within the match (after the comma)
+            const matchStr = sm[0];
+            const commaIdx = matchStr.indexOf(',');
+            const setterInMatch = matchStr.indexOf(setterName, commaIdx);
+            if (setterInMatch === -1)
+                continue;
+            const renamePos = sm.index + setterInMatch;
+            // Skip the useState(...) argument list to find the end of the statement
+            let pos = sm.index + sm[0].length;
+            let depth = 1;
+            while (pos < source.length && depth > 0) {
+                const ch = source[pos];
+                if (ch === '(')
+                    depth++;
+                else if (ch === ')')
+                    depth--;
+                else if (ch === '"' || ch === "'" || ch === '`') {
+                    const q = ch;
+                    pos++;
+                    while (pos < source.length && source[pos] !== q) {
+                        if (source[pos] === '\\')
+                            pos++;
+                        pos++;
+                    }
+                }
+                pos++;
+            }
+            // Skip to end of line (past semicolon or newline)
+            while (pos < source.length && source[pos] !== ';' && source[pos] !== '\n')
+                pos++;
+            const afterLine = pos + 1;
+            let lineNo = 1;
+            for (let i = 0; i < sm.index; i++) {
+                if (source[i] === '\n')
+                    lineNo++;
+            }
+            stateInsertions.push({ renamePos, afterLine, stateName, setterName, 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 && hookInsertions.length === 0)
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
     // Map transformed line numbers to original source line numbers.
@@ -712,7 +758,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 || hookInsertions.length > 0) {
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.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 = [
@@ -741,12 +787,16 @@ 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);`, `  };`, `}`);
     }
+    // Add useState setter tracker if needed
+    if (stateInsertions.length > 0) {
+        prefixLines.push(`if (!globalThis.__trickle_state_counts) { globalThis.__trickle_state_counts = new Map(); }`, `function __trickle_ss(stateName, line, origSetter) {`, `  return function(newVal) {`, `    try {`, `      const key = ${JSON.stringify(filename)} + ':' + line + ':' + stateName;`, `      const n = (globalThis.__trickle_state_counts.get(key) || 0) + 1;`, `      globalThis.__trickle_state_counts.set(key, n);`, `      const t = typeof newVal;`, `      let sample;`, `      if (t === 'function') sample = '[fn updater]';`, `      else if (t === 'string') sample = newVal.length > 40 ? newVal.slice(0,40)+'...' : newVal;`, `      else if (t === 'number' || t === 'boolean') sample = newVal;`, `      else if (newVal === null || newVal === undefined) sample = newVal;`, `      else if (Array.isArray(newVal)) sample = '[arr:'+newVal.length+']';`, `      else sample = '[object]';`, `      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_state', file: ${JSON.stringify(filename)}, line, stateName, updateCount: n, value: sample, timestamp: Date.now()/1000 }) + '\\n');`, `    } catch(e) {}`, `    return origSetter(newVal);`, `  };`, `}`);
+    }
     prefixLines.push('');
     const prefix = prefixLines.join('\n');
     const allInsertions = [];
@@ -781,6 +831,16 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         allInsertions.push({ position: wrapStart, code: `__trickle_hw(${JSON.stringify(hookName)},${lineNo},` });
         allInsertions.push({ position: wrapEnd, code: `)` });
     }
+    // useState insertions: TWO insertions per useState
+    // 1. Prefix setter name with '__trickle_s_' (rename in destructuring)
+    // 2. After statement end, declare tracked wrapper: const setter = __trickle_ss(...)
+    for (const { renamePos, afterLine, stateName, setterName, lineNo } of stateInsertions) {
+        allInsertions.push({ position: renamePos, code: `__trickle_s_` });
+        allInsertions.push({
+            position: afterLine,
+            code: `const ${setterName}=__trickle_ss(${JSON.stringify(stateName)},${lineNo},__trickle_s_${setterName});\n`,
+        });
+    }
     // Sort by position descending (insert from end to preserve earlier positions)
     allInsertions.sort((a, b) => b.position - a.position);
     let result = source;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trickle-observe",
-  "version": "0.2.58",
+  "version": "0.2.60",
   "description": "Runtime type observability for JavaScript applications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/vite-plugin.test.ts

@@ -202,6 +202,101 @@ describe('Correct function body brace detection', () => {
   });
 });
 
+// ── useState change tracking ──────────────────────────────────────────────────
+
+describe('useState change tracking', () => {
+  it('renames setter and injects __trickle_ss wrapper for simple useState', () => {
+    const code = `function App() {\n  const [count, setCount] = useState(0);\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_ss'), 'should inject state setter wrapper');
+    assert.ok(out!.includes('__trickle_s_setCount'), 'should rename original setter');
+    assert.ok(out!.includes('const setCount=__trickle_ss'), 'should declare tracked setter');
+  });
+
+  it('tracks state name in the wrapper call', () => {
+    const code = `function App() {\n  const [isOpen, setIsOpen] = useState(false);\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('"isOpen"'), 'should include state variable name');
+  });
+
+  it('handles TypeScript generic useState<T>', () => {
+    const code = `function App() {\n  const [name, setName] = useState<string>('');\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_ss'), 'should inject state setter wrapper for generic useState');
+    assert.ok(out!.includes('"name"'), 'should include state name');
+  });
+
+  it('tracks multiple useState calls in one component', () => {
+    const code = [
+      `function Dashboard() {`,
+      `  const [count, setCount] = useState(0);`,
+      `  const [name, setName] = useState('');`,
+      `  const [active, setActive] = useState(false);`,
+      `  return null;`,
+      `}`,
+    ].join('\n');
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    const ssCount = (out!.match(/const \w+=__trickle_ss/g) || []).length;
+    assert.equal(ssCount, 3, 'should wrap all 3 useState setters');
+  });
+
+  it('emits react_state kind in preamble code', () => {
+    const code = `function App() {\n  const [x, setX] = useState(0);\n  return null;\n}`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes("'react_state'"), 'emitted record should have kind react_state');
+  });
+
+  it('does NOT inject useState tracking in .ts files', () => {
+    const code = `function helper() {\n  const [x, setX] = useState(0);\n  return null;\n}`;
+    const out = transformTs(code);
+    if (out) {
+      assert.ok(!out.includes('__trickle_ss'), 'should NOT inject state tracking in .ts files');
+    }
+  });
+});
+
+// ── 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', () => {

package/src/vite-plugin.ts

@@ -681,13 +681,67 @@ function transformEsmSource(
     }
   }
 
+  // React useState tracking — rename setter to __trickle_s_X and declare tracked wrapper.
+  // Detects: const [stateVar, setter] = useState(...) or useState<T>(...)
+  interface StateInsertion {
+    renamePos: number;   // position in source to insert '__trickle_s_' before setter name
+    afterLine: number;   // position after end of useState statement to insert declaration
+    stateName: string;
+    setterName: string;
+    lineNo: number;
+  }
+  const stateInsertions: StateInsertion[] = [];
+
+  if (isReactFile) {
+    const useStateRegex = /const\s+\[([a-zA-Z_$][a-zA-Z0-9_$]*)\s*,\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\]\s*=\s*(?:React\.)?useState\s*(?:<[^(]*>)?\s*\(/gm;
+    let sm;
+    while ((sm = useStateRegex.exec(source)) !== null) {
+      const stateName = sm[1];
+      const setterName = sm[2];
+
+      // Find the position of setterName within the match (after the comma)
+      const matchStr = sm[0];
+      const commaIdx = matchStr.indexOf(',');
+      const setterInMatch = matchStr.indexOf(setterName, commaIdx);
+      if (setterInMatch === -1) continue;
+      const renamePos = sm.index + setterInMatch;
+
+      // Skip the useState(...) argument list to find the end of the statement
+      let pos = sm.index + sm[0].length;
+      let depth = 1;
+      while (pos < source.length && depth > 0) {
+        const ch = source[pos];
+        if (ch === '(') depth++;
+        else if (ch === ')') depth--;
+        else if (ch === '"' || ch === "'" || ch === '`') {
+          const q = ch; pos++;
+          while (pos < source.length && source[pos] !== q) {
+            if (source[pos] === '\\') pos++;
+            pos++;
+          }
+        }
+        pos++;
+      }
+      // Skip to end of line (past semicolon or newline)
+      while (pos < source.length && source[pos] !== ';' && source[pos] !== '\n') pos++;
+      const afterLine = pos + 1;
+
+      let lineNo = 1;
+      for (let i = 0; i < sm.index; i++) {
+        if (source[i] === '\n') lineNo++;
+      }
+
+      stateInsertions.push({ renamePos, afterLine, stateName, setterName, 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 && hookInsertions.length === 0) return source;
+  if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0) return source;
 
   // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
   // Map transformed line numbers to original source line numbers.
@@ -712,7 +766,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 || hookInsertions.length > 0) {
+  if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0) {
     importLines.push(
       `import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`,
       `import { join as __trickle_join } from 'node:path';`,
@@ -799,6 +853,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;`,
@@ -818,12 +873,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');`,
@@ -853,6 +923,35 @@ function transformEsmSource(
     );
   }
 
+  // Add useState setter tracker if needed
+  if (stateInsertions.length > 0) {
+    prefixLines.push(
+      `if (!globalThis.__trickle_state_counts) { globalThis.__trickle_state_counts = new Map(); }`,
+      `function __trickle_ss(stateName, line, origSetter) {`,
+      `  return function(newVal) {`,
+      `    try {`,
+      `      const key = ${JSON.stringify(filename)} + ':' + line + ':' + stateName;`,
+      `      const n = (globalThis.__trickle_state_counts.get(key) || 0) + 1;`,
+      `      globalThis.__trickle_state_counts.set(key, n);`,
+      `      const t = typeof newVal;`,
+      `      let sample;`,
+      `      if (t === 'function') sample = '[fn updater]';`,
+      `      else if (t === 'string') sample = newVal.length > 40 ? newVal.slice(0,40)+'...' : newVal;`,
+      `      else if (t === 'number' || t === 'boolean') sample = newVal;`,
+      `      else if (newVal === null || newVal === undefined) sample = newVal;`,
+      `      else if (Array.isArray(newVal)) sample = '[arr:'+newVal.length+']';`,
+      `      else sample = '[object]';`,
+      `      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_state', file: ${JSON.stringify(filename)}, line, stateName, updateCount: n, value: sample, timestamp: Date.now()/1000 }) + '\\n');`,
+      `    } catch(e) {}`,
+      `    return origSetter(newVal);`,
+      `  };`,
+      `}`,
+    );
+  }
+
   prefixLines.push('');
   const prefix = prefixLines.join('\n');
 
@@ -896,6 +995,17 @@ function transformEsmSource(
     allInsertions.push({ position: wrapEnd, code: `)` });
   }
 
+  // useState insertions: TWO insertions per useState
+  // 1. Prefix setter name with '__trickle_s_' (rename in destructuring)
+  // 2. After statement end, declare tracked wrapper: const setter = __trickle_ss(...)
+  for (const { renamePos, afterLine, stateName, setterName, lineNo } of stateInsertions) {
+    allInsertions.push({ position: renamePos, code: `__trickle_s_` });
+    allInsertions.push({
+      position: afterLine,
+      code: `const ${setterName}=__trickle_ss(${JSON.stringify(stateName)},${lineNo},__trickle_s_${setterName});\n`,
+    });
+  }
+
   // Sort by position descending (insert from end to preserve earlier positions)
   allInsertions.sort((a, b) => b.position - a.position);