trickle-observe 0.2.109 → 0.2.111

package/dist/observe-register.js

@@ -677,6 +677,205 @@ function extractDestructuredNames(pattern) {
     }
     return names;
 }
+/**
+ * Extract parameter names from a parameter string (the text between parens).
+ * Handles: simple names, defaults (x = 5), type annotations (x: string),
+ * rest params (...args), and destructured params ({a, b} or [a, b]).
+ * Skips params starting with _ (convention for unused params).
+ */
+function extractParamNamesFromStr(paramStr) {
+    if (!paramStr.trim())
+        return [];
+    // Split on commas at depth 0 (respecting nested parens, braces, brackets)
+    const params = [];
+    let depth = 0;
+    let current = '';
+    for (const ch of paramStr) {
+        if (ch === '(' || ch === '{' || ch === '[')
+            depth++;
+        else if (ch === ')' || ch === '}' || ch === ']')
+            depth--;
+        else if (ch === ',' && depth === 0) {
+            params.push(current.trim());
+            current = '';
+            continue;
+        }
+        current += ch;
+    }
+    if (current.trim())
+        params.push(current.trim());
+    const names = [];
+    for (const p of params) {
+        const trimmed = p.trim();
+        if (!trimmed)
+            continue;
+        // Rest params: ...args -> trace 'args'
+        if (trimmed.startsWith('...')) {
+            const restName = trimmed.slice(3).split(/[\s:=]/)[0].trim();
+            if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(restName) && !restName.startsWith('_')) {
+                names.push(restName);
+            }
+            continue;
+        }
+        // Destructured params: { name, age } or [a, b] — skip (can't trace the whole object by a single name)
+        if (trimmed.startsWith('{') || trimmed.startsWith('['))
+            continue;
+        // Simple param: strip default value and type annotation
+        const name = trimmed.split('=')[0].trim().split(':')[0].trim();
+        if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name) && !name.startsWith('_')) {
+            names.push(name);
+        }
+    }
+    return names;
+}
+/**
+ * Find all function bodies (declarations, expressions, arrow functions, methods)
+ * and return insertions to trace their parameters at the top of the body.
+ *
+ * Returns: Array of { bodyStart: position right after '{', paramNames: string[], lineNo: line of function }
+ */
+function findFunctionParamInsertions(source, lineOffset = 0) {
+    const results = [];
+    // Match all patterns that start a function with a parameter list followed by a body:
+    // 1. function foo(...)    { ... }
+    // 2. function(...)        { ... }
+    // 3. (...)             => { ... }
+    // 4. async (...)       => { ... }
+    // 5. methodName(...)      { ... }  (inside class or object)
+    // 6. single param arrow:  x => { ... }
+    //
+    // Strategy: find every opening paren that is part of a function parameter list,
+    // then find the body brace. We use a regex to find candidate positions.
+    // Pattern A: function declarations and expressions
+    // Matches: [async] function [name] (
+    const funcPattern = /(?:async\s+)?function\s*(?:[a-zA-Z_$][a-zA-Z0-9_$]*)?\s*\(/g;
+    let m;
+    while ((m = funcPattern.exec(source)) !== null) {
+        const openParenIdx = source.indexOf('(', m.index + 8); // skip past 'function'
+        if (openParenIdx === -1)
+            continue;
+        processFunction(source, openParenIdx, m.index, results, lineOffset);
+    }
+    // Pattern B: arrow functions with parens: (...) =>
+    // Look for ) followed by optional whitespace then =>
+    // We search for => and walk backwards to find the matching (
+    const arrowPattern = /\)\s*=>/g;
+    while ((m = arrowPattern.exec(source)) !== null) {
+        // Find the matching opening paren for the ) at m.index
+        const closeParenIdx = m.index;
+        const openParenIdx = findMatchingOpenParen(source, closeParenIdx);
+        if (openParenIdx === -1)
+            continue;
+        // Make sure this isn't inside a string or comment (basic heuristic: check if 'function' keyword precedes)
+        // If 'function' precedes, Pattern A already handled it
+        const before = source.slice(Math.max(0, openParenIdx - 30), openParenIdx).trimEnd();
+        if (/function\s*(?:[a-zA-Z_$][a-zA-Z0-9_$]*)?\s*$/.test(before))
+            continue;
+        // Find the arrow and body
+        const arrowIdx = source.indexOf('=>', closeParenIdx + 1);
+        if (arrowIdx === -1)
+            continue;
+        const afterArrow = arrowIdx + 2;
+        // Skip whitespace after =>
+        let bodyPos = afterArrow;
+        while (bodyPos < source.length && (source[bodyPos] === ' ' || source[bodyPos] === '\t' || source[bodyPos] === '\n' || source[bodyPos] === '\r'))
+            bodyPos++;
+        // Only handle block bodies (with {), not expression bodies
+        if (bodyPos >= source.length || source[bodyPos] !== '{')
+            continue;
+        // Extract params
+        const paramStr = source.slice(openParenIdx + 1, closeParenIdx);
+        const paramNames = extractParamNamesFromStr(paramStr);
+        if (paramNames.length === 0)
+            continue;
+        // Calculate line number
+        let lineNo = 1;
+        for (let i = 0; i < openParenIdx; i++) {
+            if (source[i] === '\n')
+                lineNo++;
+        }
+        lineNo = Math.max(1, lineNo - lineOffset);
+        results.push({ bodyStart: bodyPos + 1, paramNames, lineNo });
+    }
+    return results;
+}
+/**
+ * Process a function whose opening paren is at openParenIdx.
+ * Finds params, body brace, and adds to results.
+ */
+function processFunction(source, openParenIdx, funcStartIdx, results, lineOffset) {
+    // Find closing paren using findFunctionBodyBrace approach: it expects the position after '('
+    const afterOpenParen = openParenIdx + 1;
+    const openBrace = (0, vite_plugin_1.findFunctionBodyBrace)(source, afterOpenParen);
+    if (openBrace === -1)
+        return;
+    // Extract param string between ( and the closing )
+    // findFunctionBodyBrace skips parens then finds {, so we need to find the closing ) ourselves
+    let parenDepth = 1;
+    let closeParenIdx = afterOpenParen;
+    while (closeParenIdx < source.length && parenDepth > 0) {
+        const ch = source[closeParenIdx];
+        if (ch === '(')
+            parenDepth++;
+        else if (ch === ')') {
+            parenDepth--;
+            if (parenDepth === 0)
+                break;
+        }
+        else if (ch === '"' || ch === "'" || ch === '`') {
+            const q = ch;
+            closeParenIdx++;
+            while (closeParenIdx < source.length && source[closeParenIdx] !== q) {
+                if (source[closeParenIdx] === '\\')
+                    closeParenIdx++;
+                closeParenIdx++;
+            }
+        }
+        closeParenIdx++;
+    }
+    const paramStr = source.slice(afterOpenParen, closeParenIdx);
+    const paramNames = extractParamNamesFromStr(paramStr);
+    if (paramNames.length === 0)
+        return;
+    // Calculate line number of the function
+    let lineNo = 1;
+    for (let i = 0; i < funcStartIdx; i++) {
+        if (source[i] === '\n')
+            lineNo++;
+    }
+    lineNo = Math.max(1, lineNo - lineOffset);
+    results.push({ bodyStart: openBrace + 1, paramNames, lineNo });
+}
+/**
+ * Find the matching opening paren for a closing paren at closeIdx.
+ * Walks backward respecting nesting, strings, etc. (simplified).
+ */
+function findMatchingOpenParen(source, closeIdx) {
+    let depth = 1;
+    let pos = closeIdx - 1;
+    while (pos >= 0 && depth > 0) {
+        const ch = source[pos];
+        if (ch === ')')
+            depth++;
+        else if (ch === '(') {
+            depth--;
+            if (depth === 0)
+                return pos;
+        }
+        else if (ch === '"' || ch === "'" || ch === '`') {
+            // Walk backward through string (simplified — won't handle all edge cases but good enough)
+            const q = ch;
+            pos--;
+            while (pos >= 0 && source[pos] !== q) {
+                if (pos > 0 && source[pos - 1] === '\\')
+                    pos--;
+                pos--;
+            }
+        }
+        pos--;
+    }
+    return -1;
+}
 function transformCjsSource(source, filename, moduleName, env, sourceMap) {
     const funcRegex = /^[ \t]*(?:async\s+)?function\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*\(/gm;
     const insertions = [];
@@ -854,8 +1053,6 @@ function transformCjsSource(source, filename, moduleName, env, sourceMap) {
         }
     }
     // Additional variable patterns: reassignments, for-loops, catch clauses
-    // Note: function params are NOT traced here because observe-register already
-    // wraps functions with __trickle_wrap which captures param types via wrapFunction.
     // Apply source map remapping to these too.
     const reassignInsertions = (0, vite_plugin_1.findReassignments)(source).map(ins => ({
         ...ins,
@@ -872,7 +1069,21 @@ function transformCjsSource(source, filename, moduleName, env, sourceMap) {
         sourceFile: getSourceFile(ins.lineNo),
         lineNo: remapLine(ins.lineNo),
     }));
-    if (insertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && reassignInsertions.length === 0 && forLoopInsertions.length === 0 && catchInsertions.length === 0 && classInsertions.length === 0)
+    // Function parameter tracing: inject __trickle_tv() calls at the top of function bodies
+    // for each parameter. This covers function declarations, expressions, arrow functions,
+    // and method definitions (including Express-style callbacks like (req, res) => {}).
+    let funcParamInsertions = [];
+    if (varTraceEnabled) {
+        funcParamInsertions = findFunctionParamInsertions(source).map(ins => ({
+            ...ins,
+            sourceFile: getSourceFile(ins.lineNo),
+            lineNo: remapLine(ins.lineNo),
+        }));
+        if (debug && funcParamInsertions.length > 0) {
+            console.log(`[trickle/observe] Tracing ${funcParamInsertions.length} function param sites in ${moduleName}`);
+        }
+    }
+    if (insertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && reassignInsertions.length === 0 && forLoopInsertions.length === 0 && catchInsertions.length === 0 && classInsertions.length === 0 && funcParamInsertions.length === 0)
         return source;
     // Resolve the path to the wrap helper (compiled JS)
     const wrapHelperPath = path_1.default.join(__dirname, 'wrap.js');
@@ -898,8 +1109,8 @@ function transformCjsSource(source, filename, moduleName, env, sourceMap) {
         `  return __trickle_mod.wrapFunction(fn, opts);`,
         `};`,
     ];
-    // Add variable tracing helper if we have var insertions
-    if (varInsertions.length > 0 || destructInsertions.length > 0 || reassignInsertions.length > 0 || forLoopInsertions.length > 0 || catchInsertions.length > 0) {
+    // Add variable tracing helper if we have var insertions or function param insertions
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || reassignInsertions.length > 0 || forLoopInsertions.length > 0 || catchInsertions.length > 0 || funcParamInsertions.length > 0) {
         const traceVarPath = path_1.default.join(__dirname, 'trace-var.js');
         // When source map is available, trace variables against the original source file
         const traceFilePath = sourceMap ? sourceMap.originalFile : filename;
@@ -964,6 +1175,15 @@ function transformCjsSource(source, filename, moduleName, env, sourceMap) {
             code: `\ntry{${calls}}catch(__e2){}\n`,
         });
     }
+    // Function parameter insertions — inject __trickle_tv() at top of function bodies
+    for (const { bodyStart, paramNames, lineNo, sourceFile } of funcParamInsertions) {
+        const sf = sfArgs(sourceFile);
+        const calls = paramNames.map(n => `__trickle_tv(${n},${JSON.stringify(n)},${lineNo}${sf})`).join(';');
+        allInsertions.push({
+            position: bodyStart,
+            code: `\ntry{${calls}}catch(__e3){}\n`,
+        });
+    }
     // Add class method wrappings
     for (const ci of classInsertions) {
         allInsertions.push(ci);

package/dist/vite-plugin.js

@@ -510,6 +510,156 @@ function extractDestructuredNames(pattern) {
     }
     return names;
 }
+/**
+ * Find import declarations and extract imported bindings for tracing.
+ * Handles:
+ *   import { a, b } from '...'        → trace a, b
+ *   import { a as b } from '...'      → trace b (local name)
+ *   import X from '...'               → trace X (default import)
+ *   import * as X from '...'          → trace X (namespace import)
+ *   import X, { a, b } from '...'    → trace X, a, b
+ * Returns insertions to place AFTER the import statement.
+ */
+function findImportDeclarations(source) {
+    const results = [];
+    // Match import statements (potentially multiline)
+    // We scan for `import` at the start of a line (with optional whitespace)
+    const importRegex = /^[ \t]*import\s+/gm;
+    let match;
+    while ((match = importRegex.exec(source)) !== null) {
+        const importStart = match.index;
+        let pos = importStart + match[0].length;
+        const varNames = [];
+        // Skip type-only imports: `import type ...`
+        if (source.slice(pos).startsWith('type ') || source.slice(pos).startsWith('type{'))
+            continue;
+        // Skip bare imports: `import '...'` or `import "..."`
+        const afterImport = source[pos];
+        if (afterImport === '"' || afterImport === "'")
+            continue;
+        // Parse the import clause
+        // Could be:
+        //   * as X
+        //   X (default)
+        //   { a, b, c as d }
+        //   X, { a, b }
+        //   X, * as Y
+        // Check for namespace import: * as X
+        if (source[pos] === '*') {
+            const nsMatch = source.slice(pos).match(/^\*\s+as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+            if (nsMatch) {
+                varNames.push(nsMatch[1]);
+                pos += nsMatch[0].length;
+            }
+        }
+        // Check for default import or named imports
+        else if (source[pos] === '{') {
+            // Named imports only: { a, b, c as d }
+            const closeIdx = source.indexOf('}', pos);
+            if (closeIdx === -1)
+                continue;
+            const namedStr = source.slice(pos + 1, closeIdx);
+            const names = parseNamedImports(namedStr);
+            varNames.push(...names);
+            pos = closeIdx + 1;
+        }
+        else {
+            // Default import: X or X, { ... } or X, * as Y
+            const defaultMatch = source.slice(pos).match(/^([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+            if (defaultMatch) {
+                varNames.push(defaultMatch[1]);
+                pos += defaultMatch[0].length;
+                // Skip whitespace and comma
+                while (pos < source.length && /[\s,]/.test(source[pos]))
+                    pos++;
+                // Check for additional named imports: , { a, b }
+                if (source[pos] === '{') {
+                    const closeIdx = source.indexOf('}', pos);
+                    if (closeIdx !== -1) {
+                        const namedStr = source.slice(pos + 1, closeIdx);
+                        const names = parseNamedImports(namedStr);
+                        varNames.push(...names);
+                        pos = closeIdx + 1;
+                    }
+                }
+                // Check for namespace: , * as Y
+                else if (source[pos] === '*') {
+                    const nsMatch = source.slice(pos).match(/^\*\s+as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+                    if (nsMatch) {
+                        varNames.push(nsMatch[1]);
+                        pos += nsMatch[0].length;
+                    }
+                }
+            }
+        }
+        if (varNames.length === 0)
+            continue;
+        // Skip trickle internals
+        const filtered = varNames.filter(n => !n.startsWith('__trickle'));
+        if (filtered.length === 0)
+            continue;
+        // Find the end of the import statement (semicolon or newline after `from '...'`)
+        const fromIdx = source.indexOf('from', pos);
+        if (fromIdx === -1)
+            continue;
+        // Find the end: either `;` or end of line after the string literal
+        let endPos = fromIdx + 4;
+        // Skip whitespace
+        while (endPos < source.length && /\s/.test(source[endPos]))
+            endPos++;
+        // Skip the string literal
+        if (endPos < source.length && (source[endPos] === '"' || source[endPos] === "'")) {
+            const quote = source[endPos];
+            endPos++;
+            while (endPos < source.length && source[endPos] !== quote) {
+                if (source[endPos] === '\\')
+                    endPos++;
+                endPos++;
+            }
+            endPos++; // skip closing quote
+        }
+        // Skip optional semicolon
+        while (endPos < source.length && (source[endPos] === ';' || source[endPos] === ' ' || source[endPos] === '\t'))
+            endPos++;
+        // Calculate line number
+        let lineNo = 1;
+        for (let i = 0; i < importStart; i++) {
+            if (source[i] === '\n')
+                lineNo++;
+        }
+        results.push({ lineEnd: endPos, varNames: filtered, lineNo });
+    }
+    return results;
+}
+/**
+ * Parse named imports from the content between { and }.
+ * Handles: a, b, c as d, type e (skips type-only imports)
+ * Returns local binding names.
+ */
+function parseNamedImports(namedStr) {
+    const names = [];
+    const parts = namedStr.split(',');
+    for (const part of parts) {
+        const trimmed = part.trim();
+        if (!trimmed)
+            continue;
+        // Skip type-only: `type Foo` or `type Foo as Bar`
+        if (/^type\s+/.test(trimmed))
+            continue;
+        // Check for alias: `original as local`
+        const asMatch = trimmed.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*\s+as\s+([a-zA-Z_$][a-zA-Z0-9_$]*)/);
+        if (asMatch) {
+            names.push(asMatch[1]);
+        }
+        else {
+            const name = trimmed.split(/[\s]/)[0];
+            if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(name)) {
+                names.push(name);
+            }
+        }
+    }
+    return names;
+}
 /**
  * Find class body ranges in source code. Handles both:
  *   class Foo { ... }
@@ -803,6 +953,11 @@ function findJsxExpressions(source) {
     let match;
     while ((match = jsxExprRegex.exec(source)) !== null) {
         const bracePos = match.index;
+        // Skip if this `{` is part of an import statement: `import { ... } from '...'`
+        const lineStart = source.lastIndexOf('\n', bracePos - 1) + 1;
+        const linePrefix = source.slice(lineStart, bracePos).trimStart();
+        if (/^import\s/.test(linePrefix) || /^import\s/.test(linePrefix.replace(/^export\s+/, '')))
+            continue;
         // Skip if inside a string or comment
         // Simple check: look at the character before `{`
         const charBefore = bracePos > 0 ? source[bracePos - 1] : '';
@@ -813,9 +968,19 @@ function findJsxExpressions(source) {
         // Skip if this looks like a template literal expression `${`
         if (charBefore === '$')
             continue;
-        // Skip if preceded by `,` (function arguments, not JSX)
+        // Skip if preceded (past whitespace) by `,`, `(`, or `:` — function arguments, object literals, attribute values
         if (charBefore === ',')
             continue;
+        {
+            let scanBack = bracePos - 1;
+            while (scanBack >= 0 && (source[scanBack] === ' ' || source[scanBack] === '\t' || source[scanBack] === '\n' || source[scanBack] === '\r'))
+                scanBack--;
+            if (scanBack >= 0 && (source[scanBack] === ',' || source[scanBack] === '(' || source[scanBack] === ':' || source[scanBack] === ')'))
+                continue;
+        }
+        // Skip if this `{` is part of a variable declaration destructuring: `const { ... }` or `let { ... }`
+        if (/(?:const|let|var)\s*$/.test(source.slice(Math.max(0, bracePos - 10), bracePos)))
+            continue;
         // Must be in a JSX context: look backward for `>` or `}` (closing tag bracket or prev expression)
         // before hitting structural JS characters like `{`, `(`, `;`
         let inJsx = false;
@@ -1547,6 +1712,8 @@ ingestUrl) {
             stateInsertions.push({ renamePos, afterLine, stateName, setterName, lineNo });
         }
     }
+    // Find import declarations for tracing (trace imported bindings after import statement)
+    const importInsertions = traceVars ? findImportDeclarations(source) : [];
     // Find variable declarations for tracing
     const varInsertions = traceVars ? findVarDeclarations(source) : [];
     // Find destructured variable declarations for tracing
@@ -1561,7 +1728,7 @@ ingestUrl) {
     const funcParamInsertions = traceVars ? findFunctionParams(source, isReactFile) : [];
     // Find JSX text expressions for tracing (React files only)
     const jsxExprInsertions = (traceVars && isReactFile) ? findJsxExpressions(source) : [];
-    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && reassignInsertions.length === 0 && forLoopInsertions.length === 0 && catchInsertions.length === 0 && funcParamInsertions.length === 0 && jsxExprInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0 && conciseBodyInsertions.length === 0)
+    if (funcInsertions.length === 0 && importInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && reassignInsertions.length === 0 && forLoopInsertions.length === 0 && catchInsertions.length === 0 && funcParamInsertions.length === 0 && jsxExprInsertions.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.
@@ -1630,7 +1797,7 @@ ingestUrl) {
         }
     }
     // Build prefix — ALL imports first (ESM requires imports before any statements)
-    const needsTracing = varInsertions.length > 0 || destructInsertions.length > 0 || reassignInsertions.length > 0 || forLoopInsertions.length > 0 || catchInsertions.length > 0 || funcParamInsertions.length > 0 || jsxExprInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0 || conciseBodyInsertions.length > 0;
+    const needsTracing = importInsertions.length > 0 || varInsertions.length > 0 || destructInsertions.length > 0 || reassignInsertions.length > 0 || forLoopInsertions.length > 0 || catchInsertions.length > 0 || funcParamInsertions.length > 0 || jsxExprInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0 || conciseBodyInsertions.length > 0;
     const importLines = [];
     if (isSSR) {
         // SSR/Node.js — import trickle-observe for function wrapping + file system for writing
@@ -1665,7 +1832,7 @@ ingestUrl) {
         }
     }
     // Add variable tracing if needed — inlined to avoid import resolution issues in Vite SSR.
-    if (varInsertions.length > 0 || destructInsertions.length > 0 || reassignInsertions.length > 0 || forLoopInsertions.length > 0 || catchInsertions.length > 0 || funcParamInsertions.length > 0 || jsxExprInsertions.length > 0) {
+    if (importInsertions.length > 0 || varInsertions.length > 0 || destructInsertions.length > 0 || reassignInsertions.length > 0 || forLoopInsertions.length > 0 || catchInsertions.length > 0 || funcParamInsertions.length > 0 || jsxExprInsertions.length > 0) {
         prefixLines.push(`if (!globalThis.__trickle_var_tracer) {`, `  const _cache = new Map();`, `  const _sampleCount = new Map();`, `  const _MAX_SAMPLES = 5;`, `  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 sample = _sanitize(v, 2);`, `      const sv = typeof v === 'object' && v !== null ? JSON.stringify(sample).substring(0, 60) : String(v).substring(0, 60);`, `      const ck = file + ':' + l + ':' + n;`, `      const cnt = _sampleCount.get(ck) || 0;`, `      if (cnt >= _MAX_SAMPLES) return;`, `      const prev = _cache.get(ck);`, `      const now = Date.now();`, `      if (prev && prev.sv === sv && now - prev.ts < 5000) return;`, `      _cache.set(ck, { sv: sv, ts: now });`, `      _sampleCount.set(ck, cnt + 1);`, `      __trickle_send(JSON.stringify({ kind: 'variable', varName: n, line: l, module: mod, file: file, type: type, typeHash: th, sample: sample }));`, `    } 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
@@ -1690,6 +1857,14 @@ ingestUrl) {
             code: `\ntry{${name}=__trickle_wrap(${name},'${name}',${paramNamesArg})}catch(__e){}\n`,
         });
     }
+    // Import insertions: trace imported bindings after the import statement
+    for (const { lineEnd, varNames, lineNo } of importInsertions) {
+        const calls = varNames.map(n => `__trickle_tv(${n},${JSON.stringify(n)},${lineNo})`).join(';');
+        allInsertions.push({
+            position: lineEnd,
+            code: `\n;try{${calls}}catch(__e){}\n`,
+        });
+    }
     for (const { lineEnd, varName, lineNo } of varInsertions) {
         allInsertions.push({
             position: lineEnd,