trickle-observe 0.2.67 → 0.2.69

package/dist/metro-transformer.js

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

package/dist/next-loader.js

@@ -37,7 +37,8 @@ function trickleNextLoader(source) {
     const traceVars = options.traceVars ?? true;
     const moduleName = path_1.default.basename(resourcePath).replace(/\.[jt]sx?$/, '');
     try {
-        const transformed = (0, vite_plugin_1.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 = (0, vite_plugin_1.transformEsmSource)(source, resourcePath, moduleName, backendUrl, debug, traceVars, source, true);
         if (debug && transformed !== source) {
             console.log(`[trickle/next] Instrumented ${resourcePath}`);
         }

package/dist/vite-plugin.d.ts

@@ -32,10 +32,13 @@ export interface TricklePluginOptions {
 export declare function tricklePlugin(options?: TricklePluginOptions): {
     name: string;
     enforce: "post";
-    transform(code: string, id: string): {
+    configureServer(server: any): void;
+    transform(code: string, id: string, options?: {
+        ssr?: boolean;
+    }): {
         code: string;
         map: null;
     } | null;
 };
-export declare function transformEsmSource(source: string, filename: string, moduleName: string, backendUrl: string, debug: boolean, traceVars: boolean, originalSource?: string | null): string;
+export declare function transformEsmSource(source: string, filename: string, moduleName: string, backendUrl: string, debug: boolean, traceVars: boolean, originalSource?: string | null, isSSR?: boolean): string;
 export default tricklePlugin;

package/dist/vite-plugin.js

@@ -67,9 +67,33 @@ 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_1.default.join(process.cwd(), '.trickle');
+                try {
+                    fs_1.default.mkdirSync(varDir, { recursive: true });
+                }
+                catch { }
+                const varsFile = path_1.default.join(varDir, 'variables.jsonl');
+                hot.on('trickle:vars', (data, client) => {
+                    try {
+                        if (data && data.lines) {
+                            fs_1.default.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.
@@ -81,11 +105,11 @@ function tricklePlugin(options = {}) {
                 // If we can't read the original, we'll use transformed line numbers
             }
             const moduleName = path_1.default.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 };
         },
@@ -520,7 +544,7 @@ function findOriginalLineDestructured(origLines, varNames, transformedLine) {
 function escapeRegexStr(str) {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
-function transformEsmSource(source, filename, moduleName, backendUrl, debug, traceVars, originalSource) {
+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)
@@ -885,10 +909,12 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         }
     }
     // Build prefix — ALL imports first (ESM requires imports before any statements)
+    const needsTracing = varInsertions.length > 0 || destructInsertions.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 = [
@@ -909,23 +935,32 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         `  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) {} }`);
+        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');

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 };
         },
@@ -513,7 +537,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)
@@ -878,10 +902,12 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
         }
     }
     // Build prefix — ALL imports first (ESM requires imports before any statements)
+    const needsTracing = varInsertions.length > 0 || destructInsertions.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 +928,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) {} }`);
+        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');

package/observe-esm-hooks.mjs

@@ -523,7 +523,21 @@ function transformSource(source, url, originalSource) {
       const paramNames = parenPos >= 0 ? extractParamNamesFromSource(source, parenPos) : [];
       // Remove 'export ' prefix, keep the function
       result.push(line.replace(/^(\s*)export\s+/, '$1'));
-      exportedFunctions.push({ name, paramNames });
+      exportedFunctions.push({ name, paramNames, wrapInPlace: true });
+      continue;
+    }
+
+    // Non-exported function declarations — wrap them too for entry module coverage
+    const plainFuncMatch = trimmed.match(/^(async\s+)?function\s+(\w+)\s*(?:<[^>]*>)?\s*\(/);
+    if (plainFuncMatch && !trimmed.startsWith('export')) {
+      const name = plainFuncMatch[2];
+      if (name !== 'require' && name !== 'exports' && name !== 'module' && !name.startsWith('__trickle')) {
+        const srcOffset = lineOffset(source, i) + (line.length - trimmed.length);
+        const parenPos = source.indexOf('(', srcOffset + plainFuncMatch[0].indexOf('('));
+        const paramNames = parenPos >= 0 ? extractParamNamesFromSource(source, parenPos) : [];
+        exportedFunctions.push({ name, paramNames, wrapInPlace: true, noExport: true });
+      }
+      result.push(line);
       continue;
     }
 
@@ -607,23 +621,58 @@ function transformSource(source, url, originalSource) {
     return source;
   }
 
-  // Add wrapper import and wrapping code at the bottom
+  // Add wrapper import and wrapping code
   const wrapperPathEscaped = config.wrapperPath.replace(/\\/g, '\\\\');
 
-  result.push('');
-  result.push('// [trickle] Auto-observation wrappers');
-  result.push(`import { createRequire as __cr } from 'node:module';`);
-  result.push(`const __require = __cr(import.meta.url);`);
-  result.push(`const { wrapFunction: __tw } = __require('${wrapperPathEscaped}');`);
-  result.push(`const __twOpts = (name, paramNames) => { const o = { functionName: name, module: '${moduleName}', trackArgs: true, trackReturn: true, sampleRate: 1, maxDepth: 5, environment: process.env.TRICKLE_ENV || 'development', enabled: true }; if (paramNames && paramNames.length) o.paramNames = paramNames; return o; };`);
+  // Insert wrapper setup at the top (after imports, before user code)
+  // Using import + createRequire to load CJS wrapper from ESM context
+  const wrapSetup = [
+    '',
+    '// [trickle] Auto-observation wrappers',
+    `import { createRequire as __cr } from 'node:module';`,
+    `const __require = __cr(import.meta.url);`,
+    `const { wrapFunction: __tw } = __require('${wrapperPathEscaped}');`,
+    `const __twOpts = (name, paramNames) => { const o = { functionName: name, module: '${moduleName}', trackArgs: true, trackReturn: true, sampleRate: 1, maxDepth: 5, environment: process.env.TRICKLE_ENV || 'development', enabled: true }; if (paramNames && paramNames.length) o.paramNames = paramNames; return o; };`,
+  ];
+
+  // For in-place wrapping: insert wrapper calls right after each function declaration
+  // This ensures functions are wrapped BEFORE any top-level code calls them
+  const inPlaceWraps = [];
+  for (const fn of exportedFunctions) {
+    if (fn.wrapInPlace) {
+      const pn = fn.paramNames.length > 0 ? JSON.stringify(fn.paramNames) : 'null';
+      inPlaceWraps.push(`try{${fn.name}=__tw(${fn.name},__twOpts('${fn.name}',${pn}))}catch(__e){}`);
+    }
+  }
 
-  // Wrap and re-export named functions
+  // Find the right position to insert the wrap setup + in-place wraps
+  // Insert after the last import/function-declaration block, before top-level code
+  let insertIdx = 0;
+  for (let j = 0; j < result.length; j++) {
+    const t = result[j].trimStart();
+    if (t.startsWith('import ') || t.startsWith('// [trickle]') || t === '' ||
+        t.startsWith('function ') || t.startsWith('async function ') ||
+        t.startsWith('const __trickle_tv') || t.startsWith('const __require_tv') ||
+        t.startsWith('const __tv_mod') || t.startsWith('if (typeof __tv_mod')) {
+      insertIdx = j + 1;
+    }
+  }
+  // But make sure we're after any function body closing braces too
+  // Simple heuristic: find the last line that's just '}' before any assignment/call
+  for (let j = insertIdx; j < result.length; j++) {
+    const t = result[j].trim();
+    if (t === '}') insertIdx = j + 1;
+    else if (t && !t.startsWith('//') && !t.startsWith('function') && !t.startsWith('async function')) break;
+  }
+
+  result.splice(insertIdx, 0, ...wrapSetup, ...inPlaceWraps, '');
+
+  // Re-export wrapped functions (for importers of this module)
   const reExports = [];
-  for (const { name, paramNames } of exportedFunctions) {
-    const wrappedName = `__trickle_${name}`;
-    const pn = paramNames.length > 0 ? JSON.stringify(paramNames) : 'null';
-    result.push(`const ${wrappedName} = typeof ${name} === 'function' ? __tw(${name}, __twOpts('${name}', ${pn})) : ${name};`);
-    reExports.push(`${wrappedName} as ${name}`);
+  for (const fn of exportedFunctions) {
+    if (!fn.noExport) {
+      reExports.push(`${fn.name}`);
+    }
   }
 
   // Handle named exports from export { } statements
@@ -703,10 +752,11 @@ export async function load(url, context, nextLoad) {
     ? source
     : Buffer.from(source).toString('utf-8');
 
-  // Only transform if the module has exports or variable declarations to trace
+  // Only transform if the module has exports, function declarations, or variable declarations to trace
   const varTraceEnabled = process.env.TRICKLE_TRACE_VARS !== '0' && config.traceVarPath;
   const hasVarDecls = varTraceEnabled && /^[ \t]*(?:export\s+)?(?:const|let|var)\s+[a-zA-Z_$]/m.test(sourceStr);
-  if (!sourceStr.includes('export ') && !hasVarDecls) return result;
+  const hasFuncDecls = /^[ \t]*(?:export\s+)?(?:async\s+)?function\s+\w/m.test(sourceStr);
+  if (!sourceStr.includes('export ') && !hasVarDecls && !hasFuncDecls) return result;
 
   try {
     const transformed = transformSource(sourceStr, url);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trickle-observe",
-  "version": "0.2.67",
+  "version": "0.2.69",
   "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}`);
     }

package/src/vite-plugin.ts

@@ -78,9 +78,33 @@ export function tricklePlugin(options: TricklePluginOptions = {}) {
     name: 'trickle-observe',
     enforce: 'post' as const,
 
-    transform(code: string, id: string) {
+    configureServer(server: any) {
+      // 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: { lines: string }, client: any) => {
+          try {
+            if (data && data.lines) {
+              fs.appendFileSync(varsFile, data.lines);
+            }
+          } catch {}
+        });
+
+        if (debug) {
+          console.log(`[trickle/vite] WebSocket bridge active → ${varsFile}`);
+        }
+      }
+    },
+
+    transform(code: string, id: string, options?: { ssr?: boolean }) {
       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.
@@ -92,11 +116,11 @@ export function tricklePlugin(options: TricklePluginOptions = {}) {
       }
 
       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 };
@@ -514,6 +538,7 @@ export function transformEsmSource(
   debug: boolean,
   traceVars: boolean,
   originalSource?: string | null,
+  isSSR?: boolean,
 ): string {
   // Detect React files for component render tracking
   const isReactFile = /\.(tsx|jsx)$/.test(filename);
@@ -875,10 +900,12 @@ export function transformEsmSource(
   }
 
   // Build prefix — ALL imports first (ESM requires imports before any statements)
+  const needsTracing = varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0 || conciseBodyInsertions.length > 0;
   const importLines: string[] = [
     `import { wrapFunction as __trickle_wrapFn, configure as __trickle_configure } from 'trickle-observe';`,
   ];
-  if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || 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';`,
@@ -904,14 +931,49 @@ export function transformEsmSource(
     `}`,
   ];
 
+  // 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' };`,
@@ -943,17 +1005,12 @@ export function transformEsmSource(
       `  }`,
       `  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');`,
+      `      __trickle_send(JSON.stringify({ kind: 'variable', varName: n, line: l, module: mod, file: file, type: type, typeHash: th, sample: _sanitize(v, 2) }));`,
       `    } catch(e) {}`,
       `  };`,
       `}`,
@@ -971,9 +1028,6 @@ export function transformEsmSource(
       `    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 {`,
@@ -991,7 +1045,6 @@ export function transformEsmSource(
       `        }`,
       `        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 = [];`,
@@ -1008,7 +1061,7 @@ export function transformEsmSource(
       `        globalThis.__trickle_react_prev_props.set(key, propSample);`,
       `      } catch(e2) {}`,
       `    }`,
-      `    __trickle_appendFileSync(f, JSON.stringify(rec) + '\\n');`,
+      `    __trickle_send(JSON.stringify(rec));`,
       `  } catch(e) {}`,
       `}`,
     );
@@ -1024,10 +1077,7 @@ export function transformEsmSource(
       `      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');`,
+      `      __trickle_send(JSON.stringify({ kind: 'react_hook', hookName, file: ${JSON.stringify(filename)}, line, invokeCount: n, timestamp: Date.now() / 1000 }));`,
       `    } catch(e) {}`,
       `    return cb(...args);`,
       `  };`,
@@ -1053,10 +1103,7 @@ export function transformEsmSource(
       `      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');`,
+      `      __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);`,
       `  };`,