trickle-observe 0.2.54 → 0.2.55

package/dist/vite-plugin.js

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

package/dist-esm/vite-plugin.js

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

package/package.json

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

package/src/vite-plugin.ts

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