trickle-observe 0.2.68 → 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/package.json

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