trickle-observe 0.2.68 → 0.2.70

package/dist-esm/vite-plugin.js

@@ -60,9 +60,33 @@ export function tricklePlugin(options = {}) {
     return {
         name: 'trickle-observe',
         enforce: 'post',
-        transform(code, id) {
+        configureServer(server) {
+            // Listen for variable data from browser clients via Vite's HMR WebSocket
+            const hot = server.hot || server.ws;
+            if (hot && hot.on) {
+                const varDir = process.env.TRICKLE_LOCAL_DIR || path.join(process.cwd(), '.trickle');
+                try {
+                    fs.mkdirSync(varDir, { recursive: true });
+                }
+                catch { }
+                const varsFile = path.join(varDir, 'variables.jsonl');
+                hot.on('trickle:vars', (data, client) => {
+                    try {
+                        if (data && data.lines) {
+                            fs.appendFileSync(varsFile, data.lines);
+                        }
+                    }
+                    catch { }
+                });
+                if (debug) {
+                    console.log(`[trickle/vite] WebSocket bridge active → ${varsFile}`);
+                }
+            }
+        },
+        transform(code, id, options) {
             if (!shouldTransform(id))
                 return null;
+            const isSSR = options?.ssr === true;
             // Read the original source file to get accurate line numbers.
             // Vite transforms the code before our plugin (enforce: 'post'),
             // so line numbers from `code` don't match the original .ts file.
@@ -74,11 +98,11 @@ export function tricklePlugin(options = {}) {
                 // If we can't read the original, we'll use transformed line numbers
             }
             const moduleName = path.basename(id).replace(/\.[jt]sx?$/, '');
-            const transformed = transformEsmSource(code, id, moduleName, backendUrl, debug, traceVars, originalSource);
+            const transformed = transformEsmSource(code, id, moduleName, backendUrl, debug, traceVars, originalSource, isSSR);
             if (transformed === code)
                 return null;
             if (debug) {
-                console.log(`[trickle/vite] Transformed ${moduleName} (${id})`);
+                console.log(`[trickle/vite] Transformed ${moduleName} (${id}) [${isSSR ? 'SSR' : 'browser'}]`);
             }
             return { code: transformed, map: null };
         },
@@ -449,6 +473,230 @@ function extractDestructuredNames(pattern) {
     }
     return names;
 }
+/**
+ * Find for-loop variable declarations and return insertions for tracing.
+ * Handles:
+ *   for (const item of items) { ... }         → trace item
+ *   for (const [key, val] of entries) { ... }  → trace key, val
+ *   for (const { a, b } of items) { ... }      → trace a, b
+ *   for (const key in obj) { ... }             → trace key
+ *   for (let i = 0; i < n; i++) { ... }        → trace i
+ * Inserts trace calls at the start of the loop body.
+ */
+function findForLoopVars(source) {
+    const results = [];
+    // Match: for (const/let/var ...
+    const forRegex = /\bfor\s*\(/g;
+    let match;
+    while ((match = forRegex.exec(source)) !== null) {
+        const afterParen = match.index + match[0].length;
+        // Skip whitespace
+        let pos = afterParen;
+        while (pos < source.length && /\s/.test(source[pos]))
+            pos++;
+        // Expect const/let/var
+        const declMatch = source.slice(pos).match(/^(const|let|var)\s+/);
+        if (!declMatch)
+            continue;
+        pos += declMatch[0].length;
+        // Now we have the variable pattern — could be identifier, {destructure}, or [destructure]
+        const varNames = [];
+        const patternStart = pos;
+        if (source[pos] === '{' || source[pos] === '[') {
+            // Destructured: find matching brace/bracket
+            const open = source[pos];
+            const close = open === '{' ? '}' : ']';
+            let depth = 1;
+            let end = pos + 1;
+            while (end < source.length && depth > 0) {
+                if (source[end] === open)
+                    depth++;
+                else if (source[end] === close)
+                    depth--;
+                end++;
+            }
+            const pattern = source.slice(pos, end);
+            const names = extractDestructuredNames(pattern);
+            varNames.push(...names);
+            pos = end;
+        }
+        else {
+            // Simple identifier
+            const idMatch = source.slice(pos).match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+            if (!idMatch)
+                continue;
+            varNames.push(idMatch[1]);
+            pos += idMatch[0].length;
+        }
+        if (varNames.length === 0)
+            continue;
+        // Skip trickle internals
+        if (varNames.every(n => n.startsWith('__trickle') || n === '_a' || n === '_b' || n === '_c'))
+            continue;
+        // Now find the opening `{` of the loop body
+        // Skip everything until the `)` that closes the for(...)
+        let parenDepth = 1; // We're inside the for(
+        while (pos < source.length && parenDepth > 0) {
+            const ch = source[pos];
+            if (ch === '(')
+                parenDepth++;
+            else if (ch === ')')
+                parenDepth--;
+            else if (ch === '"' || ch === "'" || ch === '`') {
+                const q = ch;
+                pos++;
+                while (pos < source.length && source[pos] !== q) {
+                    if (source[pos] === '\\')
+                        pos++;
+                    pos++;
+                }
+            }
+            pos++;
+        }
+        // Now find the `{` after the closing `)`
+        while (pos < source.length && /\s/.test(source[pos]))
+            pos++;
+        if (pos >= source.length || source[pos] !== '{')
+            continue;
+        const bodyBrace = pos;
+        // Calculate line number
+        let lineNo = 1;
+        for (let i = 0; i < match.index; i++) {
+            if (source[i] === '\n')
+                lineNo++;
+        }
+        results.push({ bodyStart: bodyBrace + 1, varNames: varNames.filter(n => !n.startsWith('__trickle')), lineNo });
+    }
+    return results;
+}
+/**
+ * Find function parameter names and return insertions for tracing at the start
+ * of function bodies. Traces the runtime values of all parameters.
+ * Handles: function declarations, arrow functions, method definitions.
+ * Skips: React components (already tracked via __trickle_rc with props).
+ */
+function findFunctionParams(source, isReactFile) {
+    const results = [];
+    // Match function declarations: function name(params) {
+    const funcDeclRegex = /\b(?:async\s+)?function\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/g;
+    let match;
+    while ((match = funcDeclRegex.exec(source)) !== null) {
+        const name = match[1];
+        if (name === 'require' || name === 'exports' || name === 'module')
+            continue;
+        if (name.startsWith('__trickle'))
+            continue;
+        // Skip React components (uppercase) in React files — already tracked
+        if (isReactFile && /^[A-Z]/.test(name))
+            continue;
+        const afterParen = match.index + match[0].length;
+        const bodyBrace = findFunctionBodyBrace(source, afterParen);
+        if (bodyBrace === -1)
+            continue;
+        // Extract parameter names from between ( and )
+        const paramStr = source.slice(afterParen, bodyBrace);
+        const closeParen = paramStr.indexOf(')');
+        if (closeParen === -1)
+            continue;
+        const rawParams = paramStr.slice(0, closeParen).trim();
+        const paramNames = extractParamNames(rawParams);
+        if (paramNames.length === 0)
+            continue;
+        let lineNo = 1;
+        for (let i = 0; i < match.index; i++) {
+            if (source[i] === '\n')
+                lineNo++;
+        }
+        results.push({ bodyStart: bodyBrace + 1, paramNames, lineNo });
+    }
+    // Match arrow functions: const name = (params) => {
+    const arrowFuncRegex = /(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*:\s*[^=]+?)?\s*=\s*(?:async\s+)?\(([^)]*)\)\s*(?::\s*[^=]+?)?\s*=>\s*\{/g;
+    while ((match = arrowFuncRegex.exec(source)) !== null) {
+        const name = match[1];
+        if (name.startsWith('__trickle'))
+            continue;
+        // Skip React components in React files
+        if (isReactFile && /^[A-Z]/.test(name))
+            continue;
+        const rawParams = match[2].trim();
+        const paramNames = extractParamNames(rawParams);
+        if (paramNames.length === 0)
+            continue;
+        // Find the { position
+        const bracePos = match.index + match[0].length - 1;
+        let lineNo = 1;
+        for (let i = 0; i < match.index; i++) {
+            if (source[i] === '\n')
+                lineNo++;
+        }
+        results.push({ bodyStart: bracePos + 1, paramNames, lineNo });
+    }
+    return results;
+}
+/**
+ * Extract parameter names from a function parameter string.
+ * Handles: simple names, destructured { a, b }, defaults (a = 1), rest (...args).
+ * Skips type annotations.
+ */
+function extractParamNames(rawParams) {
+    if (!rawParams)
+        return [];
+    const names = [];
+    // Split by commas at depth 0
+    const parts = [];
+    let depth = 0;
+    let current = '';
+    for (const ch of rawParams) {
+        if (ch === '{' || ch === '[' || ch === '(' || ch === '<')
+            depth++;
+        else if (ch === '}' || ch === ']' || ch === ')' || ch === '>')
+            depth--;
+        else if (ch === ',' && depth === 0) {
+            parts.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim())
+        parts.push(current.trim());
+    for (const part of parts) {
+        const trimmed = part.trim();
+        if (!trimmed)
+            continue;
+        // Destructured params — extract individual names
+        if (trimmed.startsWith('{')) {
+            const closeBrace = trimmed.indexOf('}');
+            if (closeBrace !== -1) {
+                const destructNames = extractDestructuredNames(trimmed.slice(0, closeBrace + 1));
+                names.push(...destructNames);
+            }
+            continue;
+        }
+        if (trimmed.startsWith('[')) {
+            const closeBracket = trimmed.indexOf(']');
+            if (closeBracket !== -1) {
+                const destructNames = extractDestructuredNames(trimmed.slice(0, closeBracket + 1));
+                names.push(...destructNames);
+            }
+            continue;
+        }
+        // Rest parameter: ...args
+        if (trimmed.startsWith('...')) {
+            const restName = trimmed.slice(3).split(/[\s:=]/)[0].trim();
+            if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(restName)) {
+                names.push(restName);
+            }
+            continue;
+        }
+        // Simple param: name or name: Type or name = default
+        const paramName = trimmed.split(/[\s:=]/)[0].trim();
+        if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(paramName)) {
+            names.push(paramName);
+        }
+    }
+    return names;
+}
 /**
  * Transform ESM source code to wrap function declarations and trace variables.
  *
@@ -513,7 +761,7 @@ function findOriginalLineDestructured(origLines, varNames, transformedLine) {
 function escapeRegexStr(str) {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
-export function transformEsmSource(source, filename, moduleName, backendUrl, debug, traceVars, originalSource) {
+export function transformEsmSource(source, filename, moduleName, backendUrl, debug, traceVars, originalSource, isSSR) {
     // Detect React files for component render tracking
     const isReactFile = /\.(tsx|jsx)$/.test(filename);
     // Match top-level and nested function declarations (including async, export, export default)
@@ -856,7 +1104,11 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
     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 && stateInsertions.length === 0 && conciseBodyInsertions.length === 0)
+    // Find for-loop variable declarations for tracing
+    const forLoopInsertions = traceVars ? findForLoopVars(source) : [];
+    // Find function parameter names for tracing
+    const funcParamInsertions = traceVars ? findFunctionParams(source, isReactFile) : [];
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && forLoopInsertions.length === 0 && funcParamInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0 && conciseBodyInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.
     // Map transformed line numbers to original source line numbers.
@@ -876,12 +1128,55 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
                     di.lineNo = origLine;
             }
         }
+        // Fix for-loop var line numbers
+        for (const fi of forLoopInsertions) {
+            if (fi.varNames.length > 0) {
+                // Search for 'for' keyword near the expected line
+                const pattern = /\bfor\s*\(/;
+                for (let delta = 0; delta <= 80; delta++) {
+                    const fwd = fi.lineNo - 1 + delta;
+                    if (fwd >= 0 && fwd < origLines.length && pattern.test(origLines[fwd])) {
+                        fi.lineNo = fwd + 1;
+                        break;
+                    }
+                    if (delta > 0 && delta <= 10) {
+                        const bwd = fi.lineNo - 1 - delta;
+                        if (bwd >= 0 && bwd < origLines.length && pattern.test(origLines[bwd])) {
+                            fi.lineNo = bwd + 1;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+        // Fix function param line numbers
+        for (const fp of funcParamInsertions) {
+            if (fp.paramNames.length > 0) {
+                const pattern = /\bfunction\s+\w+\s*\(|=>\s*\{/;
+                for (let delta = 0; delta <= 80; delta++) {
+                    const fwd = fp.lineNo - 1 + delta;
+                    if (fwd >= 0 && fwd < origLines.length && pattern.test(origLines[fwd])) {
+                        fp.lineNo = fwd + 1;
+                        break;
+                    }
+                    if (delta > 0 && delta <= 10) {
+                        const bwd = fp.lineNo - 1 - delta;
+                        if (bwd >= 0 && bwd < origLines.length && pattern.test(origLines[bwd])) {
+                            fp.lineNo = bwd + 1;
+                            break;
+                        }
+                    }
+                }
+            }
+        }
     }
     // Build prefix — ALL imports first (ESM requires imports before any statements)
+    const needsTracing = varInsertions.length > 0 || destructInsertions.length > 0 || forLoopInsertions.length > 0 || funcParamInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0 || conciseBodyInsertions.length > 0;
     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 || stateInsertions.length > 0 || conciseBodyInsertions.length > 0) {
+    if (needsTracing && isSSR) {
+        // SSR/Node.js — use file system for writing
         importLines.push(`import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`, `import { join as __trickle_join } from 'node:path';`);
     }
     const prefixLines = [
@@ -902,23 +1197,32 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
         `  return __trickle_wrapFn(fn, opts);`,
         `}`,
     ];
+    // Add unified __trickle_send() transport — browser uses HMR WebSocket, SSR uses fs
+    if (needsTracing) {
+        if (isSSR) {
+            // SSR/Node.js mode — write directly to file system
+            prefixLines.push(`let __trickle_varsFile = null;`, `function __trickle_send(line) {`, `  try {`, `    if (!__trickle_varsFile) {`, `      const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `      try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `      __trickle_varsFile = __trickle_join(dir, 'variables.jsonl');`, `    }`, `    __trickle_appendFileSync(__trickle_varsFile, line + '\\n');`, `  } catch(e) {}`, `}`);
+        }
+        else {
+            // Browser mode — buffer and send via Vite HMR WebSocket
+            prefixLines.push(`const __trickle_sendBuf = [];`, `let __trickle_sendTimer = null;`, `function __trickle_flush() {`, `  if (__trickle_sendBuf.length === 0) return;`, `  const lines = __trickle_sendBuf.join('\\n') + '\\n';`, `  __trickle_sendBuf.length = 0;`, `  try { if (import.meta.hot) import.meta.hot.send('trickle:vars', { lines }); } catch(e) {}`, `}`, `function __trickle_send(line) {`, `  __trickle_sendBuf.push(line);`, `  if (!__trickle_sendTimer) {`, `    __trickle_sendTimer = setTimeout(() => { __trickle_sendTimer = null; __trickle_flush(); }, 300);`, `  }`, `}`);
+        }
+    }
     // Add variable tracing if needed — inlined to avoid import resolution issues in Vite SSR.
-    // Uses synchronous writes (appendFileSync) to guarantee data persists even if Vitest
-    // kills the worker abruptly without firing exit events.
-    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) {} }`);
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || forLoopInsertions.length > 0 || funcParamInsertions.length > 0) {
+        prefixLines.push(`if (!globalThis.__trickle_var_tracer) {`, `  const _cache = new Set();`, `  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 {`, `      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_send(JSON.stringify({ kind: 'variable', varName: n, line: l, module: mod, file: file, type: type, typeHash: th, sample: _sanitize(v, 2) }));`, `    } 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 || conciseBodyInsertions.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;`, `    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) {}`, `}`);
+        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 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;`, `        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_send(JSON.stringify(rec));`, `  } 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(`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);`, `      __trickle_send(JSON.stringify({ kind: 'react_hook', hookName, file: ${JSON.stringify(filename)}, line, invokeCount: n, timestamp: Date.now() / 1000 }));`, `    } 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(`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]';`, `      __trickle_send(JSON.stringify({ kind: 'react_state', file: ${JSON.stringify(filename)}, line, stateName, updateCount: n, value: sample, timestamp: Date.now()/1000 }));`, `    } catch(e) {}`, `    return origSetter(newVal);`, `  };`, `}`);
     }
     prefixLines.push('');
     const prefix = prefixLines.join('\n');
@@ -943,6 +1247,22 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
             code: `\n;try{${calls}}catch(__e){}\n`,
         });
     }
+    // For-loop variable insertions: insert trace at start of loop body
+    for (const { bodyStart, varNames, lineNo } of forLoopInsertions) {
+        const calls = varNames.map(n => `__trickle_tv(${n},${JSON.stringify(n)},${lineNo})`).join(';');
+        allInsertions.push({
+            position: bodyStart,
+            code: `\ntry{${calls}}catch(__e){}\n`,
+        });
+    }
+    // Function parameter insertions: insert trace at start of function body
+    for (const { bodyStart, paramNames, lineNo } of funcParamInsertions) {
+        const calls = paramNames.map(n => `__trickle_tv(${n},${JSON.stringify(n)},${lineNo})`).join(';');
+        allInsertions.push({
+            position: bodyStart,
+            code: `\ntry{${calls}}catch(__e){}\n`,
+        });
+    }
     for (const { position, name, lineNo, propsExpr } of bodyInsertions) {
         allInsertions.push({
             position,

package/package.json

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

package/src/metro-transformer.ts

@@ -62,7 +62,8 @@ export async function transform({ src, filename, options }: MetroTransformArgs)
 
   if ((isReactFile || isJsFile) && !filename.includes('node_modules') && !filename.includes('trickle-observe')) {
     const moduleName = path.basename(filename).replace(/\.[jt]sx?$/, '');
-    const transformed = transformEsmSource(src, filename, moduleName, backendUrl, debug, false);
+    // React Native has a JS runtime with fs access, use SSR mode
+    const transformed = transformEsmSource(src, filename, moduleName, backendUrl, debug, false, null, true);
     if (transformed !== src) {
       if (debug) {
         console.log(`[trickle/metro] Instrumented ${filename}`);

package/src/next-loader.ts

@@ -43,7 +43,8 @@ export default function trickleNextLoader(this: { resourcePath: string; getOptio
   const moduleName = path.basename(resourcePath).replace(/\.[jt]sx?$/, '');
 
   try {
-    const transformed = transformEsmSource(source, resourcePath, moduleName, backendUrl, debug, traceVars, source);
+    // Next.js SSR renders all components on the server, so use SSR mode (node:fs)
+    const transformed = transformEsmSource(source, resourcePath, moduleName, backendUrl, debug, traceVars, source, true);
     if (debug && transformed !== source) {
       console.log(`[trickle/next] Instrumented ${resourcePath}`);
     }