@tanstack/devtools-vite 0.4.0 → 0.5.0

package/dist/esm/virtual-console.js

@@ -0,0 +1,180 @@
+function generateConsolePipeCode(levels, viteServerUrl) {
+  const levelsArray = JSON.stringify(levels);
+  return `
+;(function __tsdConsolePipe() {
+  // Detect environment
+  var isServer = typeof window === 'undefined';
+  var envKey = isServer ? '__TSD_SERVER_CONSOLE_PIPE_INITIALIZED__' : '__TSD_CONSOLE_PIPE_INITIALIZED__';
+  var globalObj = isServer ? globalThis : window;
+  
+  // Only run once per environment
+  if (globalObj[envKey]) return;
+  globalObj[envKey] = true;
+
+  var CONSOLE_LEVELS = ${levelsArray};
+  var VITE_SERVER_URL = ${JSON.stringify(viteServerUrl)};
+
+  // Store original console methods before we override them
+  var originalConsole = {};
+  for (var i = 0; i < CONSOLE_LEVELS.length; i++) {
+    var level = CONSOLE_LEVELS[i];
+    originalConsole[level] = console[level].bind(console);
+  }
+
+  // Simple inline batcher implementation
+  var batchedEntries = [];
+  var batchTimeout = null;
+  var BATCH_WAIT = isServer ? 50 : 100;
+  var BATCH_MAX_SIZE = isServer ? 20 : 50;
+
+  function flushBatch() {
+    if (batchedEntries.length === 0) return;
+    
+    var entries = batchedEntries;
+    batchedEntries = [];
+    batchTimeout = null;
+    
+    // Determine endpoint based on environment
+    var endpoint = isServer 
+      ? VITE_SERVER_URL + '/__tsd/console-pipe/server'
+      : '/__tsd/console-pipe';
+    
+    // Send to Vite server via fetch
+    fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ entries: entries }),
+    }).catch(function( ) {
+     // Swallow errors  
+    });
+  }
+
+  function addToBatch(entry) {
+    batchedEntries.push(entry);
+    
+    if (batchedEntries.length >= BATCH_MAX_SIZE) {
+      if (batchTimeout) {
+        clearTimeout(batchTimeout);
+        batchTimeout = null;
+      }
+      flushBatch();
+    } else if (!batchTimeout) {
+      batchTimeout = setTimeout(flushBatch, BATCH_WAIT);
+    }
+  }
+
+  // Override global console methods
+  for (var j = 0; j < CONSOLE_LEVELS.length; j++) {
+    (function(level) {
+      var original = originalConsole[level];
+      console[level] = function() {
+        var args = Array.prototype.slice.call(arguments);
+        
+        // Always call original first so logs appear normally
+        original.apply(console, args);
+        
+        // Skip our own TSD Console Pipe logs to avoid recursion/noise
+        if (args.length > 0 && typeof args[0] === 'string' && 
+            (args[0].indexOf('[TSD Console Pipe]') !== -1 || 
+             args[0].indexOf('[@tanstack/devtools') !== -1)) {
+          return;
+        }
+
+        // Serialize args safely
+        var safeArgs = args.map(function(arg) {
+          if (arg === undefined) return 'undefined';
+          if (arg === null) return null;
+          if (typeof arg === 'function') return '[Function]';
+          if (typeof arg === 'symbol') return arg.toString();
+          try {
+            JSON.stringify(arg);
+            return arg;
+          } catch (e) {
+            return String(arg);
+          }
+        });
+
+        var entry = {
+          level: level,
+          args: safeArgs,
+          source: isServer ? 'server' : 'client',
+          timestamp: Date.now(),
+        };
+        
+        addToBatch(entry);
+      };
+    })(CONSOLE_LEVELS[j]);
+  }
+
+  // CLIENT ONLY: Listen for server console logs via SSE
+  if (!isServer) {
+    // Transform server log args - strip ANSI codes and convert source paths to clickable URLs
+    function transformServerLogArgs(args) {
+      var escChar = String.fromCharCode(27);
+      var transformed = [];
+      
+      for (var k = 0; k < args.length; k++) {
+        var arg = args[k];
+        if (typeof arg === 'string') {
+          // Strip ANSI escape sequences (ESC[...m patterns)
+          var cleaned = arg;
+          // Remove ESC character followed by [...m] - need to build regex dynamically
+          while (cleaned.indexOf(escChar) !== -1) {
+            cleaned = cleaned.split(escChar).join('');
+          }
+          // Also remove any leftover bracket codes like [35m
+          cleaned = cleaned.replace(/\\[[0-9;]*m/g, '');
+          
+          // Transform source paths to clickable URLs
+          // Match patterns like /src/components/Header.tsx:17:3
+          var sourceRegex = /(\\/[^\\s]+:\\d+:\\d+)/g;
+          cleaned = cleaned.replace(sourceRegex, function(match) {
+            return window.location.origin + '/__tsd/open-source?source=' + encodeURIComponent(match);
+          });
+          
+          if (cleaned.trim()) {
+            transformed.push(cleaned);
+          }
+        } else {
+          transformed.push(arg);
+        }
+      }
+      
+      return transformed;
+    }
+
+    var eventSource = new EventSource('/__tsd/console-pipe/sse');
+    
+    eventSource.onmessage = function(event) {
+      try {
+        var data = JSON.parse(event.data);
+        if (data.entries) {
+          for (var m = 0; m < data.entries.length; m++) {
+            var entry = data.entries[m];
+            var transformedArgs = transformServerLogArgs(entry.args);
+            var prefix = '%c[Server]%c';
+            var prefixStyle = 'color: #9333ea; font-weight: bold;';
+            var resetStyle = 'color: inherit;';
+            var logMethod = originalConsole[entry.level] || originalConsole.log;
+            logMethod.apply(console, [prefix, prefixStyle, resetStyle].concat(transformedArgs));
+          }
+        }
+      } catch (err) {
+        // Swallow errors  
+      }
+    };
+
+    eventSource.onerror = function() {
+      // Swallow errors  
+    };
+
+    // Flush on page unload
+    window.addEventListener('beforeunload', flushBatch);
+  }
+})();
+`;
+}
+export {
+  generateConsolePipeCode
+};
+//# sourceMappingURL=virtual-console.js.map

package/dist/esm/virtual-console.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-console.js","sources":["../../src/virtual-console.ts"],"sourcesContent":["import type { ConsoleLevel } from './plugin'\n\n// export const VIRTUAL_MODULE_ID = 'virtual:tanstack-devtools-console'\n// export const RESOLVED_VIRTUAL_MODULE_ID = '\\0' + VIRTUAL_MODULE_ID\n\n/**\n * Generates inline code to inject into entry files (both client and server).\n * This code detects the environment at runtime and:\n *\n * CLIENT:\n * 1. Store original console methods\n * 2. Create batched wrappers that POST to server via fetch\n * 3. Override global console with the wrapped methods\n * 4. Listen for server console logs via SSE\n *\n * SERVER (Nitro/Vinxi runtime):\n * 1. Store original console methods\n * 2. Create batched wrappers that POST to Vite dev server\n * 3. Override global console - original logging still happens, just also pipes to Vite\n *\n * Returns the inline code as a string - no imports needed since we use fetch.\n */\nexport function generateConsolePipeCode(\n  levels: Array<ConsoleLevel>,\n  viteServerUrl: string,\n): string {\n  const levelsArray = JSON.stringify(levels)\n\n  return `\n;(function __tsdConsolePipe() {\n  // Detect environment\n  var isServer = typeof window === 'undefined';\n  var envKey = isServer ? '__TSD_SERVER_CONSOLE_PIPE_INITIALIZED__' : '__TSD_CONSOLE_PIPE_INITIALIZED__';\n  var globalObj = isServer ? globalThis : window;\n  \n  // Only run once per environment\n  if (globalObj[envKey]) return;\n  globalObj[envKey] = true;\n\n  var CONSOLE_LEVELS = ${levelsArray};\n  var VITE_SERVER_URL = ${JSON.stringify(viteServerUrl)};\n\n  // Store original console methods before we override them\n  var originalConsole = {};\n  for (var i = 0; i < CONSOLE_LEVELS.length; i++) {\n    var level = CONSOLE_LEVELS[i];\n    originalConsole[level] = console[level].bind(console);\n  }\n\n  // Simple inline batcher implementation\n  var batchedEntries = [];\n  var batchTimeout = null;\n  var BATCH_WAIT = isServer ? 50 : 100;\n  var BATCH_MAX_SIZE = isServer ? 20 : 50;\n\n  function flushBatch() {\n    if (batchedEntries.length === 0) return;\n    \n    var entries = batchedEntries;\n    batchedEntries = [];\n    batchTimeout = null;\n    \n    // Determine endpoint based on environment\n    var endpoint = isServer \n      ? VITE_SERVER_URL + '/__tsd/console-pipe/server'\n      : '/__tsd/console-pipe';\n    \n    // Send to Vite server via fetch\n    fetch(endpoint, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application/json' },\n      body: JSON.stringify({ entries: entries }),\n    }).catch(function( ) {\n     // Swallow errors  \n    });\n  }\n\n  function addToBatch(entry) {\n    batchedEntries.push(entry);\n    \n    if (batchedEntries.length >= BATCH_MAX_SIZE) {\n      if (batchTimeout) {\n        clearTimeout(batchTimeout);\n        batchTimeout = null;\n      }\n      flushBatch();\n    } else if (!batchTimeout) {\n      batchTimeout = setTimeout(flushBatch, BATCH_WAIT);\n    }\n  }\n\n  // Override global console methods\n  for (var j = 0; j < CONSOLE_LEVELS.length; j++) {\n    (function(level) {\n      var original = originalConsole[level];\n      console[level] = function() {\n        var args = Array.prototype.slice.call(arguments);\n        \n        // Always call original first so logs appear normally\n        original.apply(console, args);\n        \n        // Skip our own TSD Console Pipe logs to avoid recursion/noise\n        if (args.length > 0 && typeof args[0] === 'string' && \n            (args[0].indexOf('[TSD Console Pipe]') !== -1 || \n             args[0].indexOf('[@tanstack/devtools') !== -1)) {\n          return;\n        }\n\n        // Serialize args safely\n        var safeArgs = args.map(function(arg) {\n          if (arg === undefined) return 'undefined';\n          if (arg === null) return null;\n          if (typeof arg === 'function') return '[Function]';\n          if (typeof arg === 'symbol') return arg.toString();\n          try {\n            JSON.stringify(arg);\n            return arg;\n          } catch (e) {\n            return String(arg);\n          }\n        });\n\n        var entry = {\n          level: level,\n          args: safeArgs,\n          source: isServer ? 'server' : 'client',\n          timestamp: Date.now(),\n        };\n        \n        addToBatch(entry);\n      };\n    })(CONSOLE_LEVELS[j]);\n  }\n\n  // CLIENT ONLY: Listen for server console logs via SSE\n  if (!isServer) {\n    // Transform server log args - strip ANSI codes and convert source paths to clickable URLs\n    function transformServerLogArgs(args) {\n      var escChar = String.fromCharCode(27);\n      var transformed = [];\n      \n      for (var k = 0; k < args.length; k++) {\n        var arg = args[k];\n        if (typeof arg === 'string') {\n          // Strip ANSI escape sequences (ESC[...m patterns)\n          var cleaned = arg;\n          // Remove ESC character followed by [...m] - need to build regex dynamically\n          while (cleaned.indexOf(escChar) !== -1) {\n            cleaned = cleaned.split(escChar).join('');\n          }\n          // Also remove any leftover bracket codes like [35m\n          cleaned = cleaned.replace(/\\\\[[0-9;]*m/g, '');\n          \n          // Transform source paths to clickable URLs\n          // Match patterns like /src/components/Header.tsx:17:3\n          var sourceRegex = /(\\\\/[^\\\\s]+:\\\\d+:\\\\d+)/g;\n          cleaned = cleaned.replace(sourceRegex, function(match) {\n            return window.location.origin + '/__tsd/open-source?source=' + encodeURIComponent(match);\n          });\n          \n          if (cleaned.trim()) {\n            transformed.push(cleaned);\n          }\n        } else {\n          transformed.push(arg);\n        }\n      }\n      \n      return transformed;\n    }\n\n    var eventSource = new EventSource('/__tsd/console-pipe/sse');\n    \n    eventSource.onmessage = function(event) {\n      try {\n        var data = JSON.parse(event.data);\n        if (data.entries) {\n          for (var m = 0; m < data.entries.length; m++) {\n            var entry = data.entries[m];\n            var transformedArgs = transformServerLogArgs(entry.args);\n            var prefix = '%c[Server]%c';\n            var prefixStyle = 'color: #9333ea; font-weight: bold;';\n            var resetStyle = 'color: inherit;';\n            var logMethod = originalConsole[entry.level] || originalConsole.log;\n            logMethod.apply(console, [prefix, prefixStyle, resetStyle].concat(transformedArgs));\n          }\n        }\n      } catch (err) {\n        // Swallow errors  \n      }\n    };\n\n    eventSource.onerror = function() {\n      // Swallow errors  \n    };\n\n    // Flush on page unload\n    window.addEventListener('beforeunload', flushBatch);\n  }\n})();\n`\n}\n"],"names":[],"mappings":"AAsBO,SAAS,wBACd,QACA,eACQ;AACR,QAAM,cAAc,KAAK,UAAU,MAAM;AAEzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAWgB,WAAW;AAAA,0BACV,KAAK,UAAU,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiKvD;"}

package/dist/esm/virtual-console.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-vite",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "TanStack Vite plugin used to enhance the core devtools with additional functionalities",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/enhance-logs.test.ts

@@ -5,7 +5,7 @@ const removeEmptySpace = (str: string) => {
   return str.replace(/\s/g, '').trim()
 }
 
-describe('remove-devtools', () => {
+describe('enhance-logs', () => {
   test('it adds enhanced console.logs to console.log()', () => {
     const output = removeEmptySpace(
       enhanceConsoleLog(
@@ -94,7 +94,6 @@ describe('remove-devtools', () => {
         3000,
       )!.code,
     )
-    console.log('output', output)
     expect(
       output.includes(
         'http://localhost:3000/__tsd/open-source?source=test.jsx',
@@ -114,4 +113,20 @@ describe('remove-devtools', () => {
     )
     expect(output).toBe(undefined)
   })
+
+  test('it adds enhanced console.log with css formatting to console.log()', () => {
+    const output = removeEmptySpace(
+      enhanceConsoleLog(
+        `
+        console.log('This is a log')
+        `,
+        'test.jsx',
+        3000,
+      )!.code,
+    )
+    expect(output.includes('color:#A0A')).toEqual(true)
+    expect(output.includes('color:#FFF')).toEqual(true)
+    expect(output.includes('color:#55F')).toEqual(true)
+    expect(output.includes('color:#FFF')).toEqual(true)
+  })
 })

package/src/enhance-logs.ts

@@ -31,11 +31,42 @@ const transform = (
           location.start.column,
         ]
         const finalPath = `${filePath}:${lineNumber}:${column + 1}`
-        path.node.arguments.unshift(
+        const logMessage = `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath}`)}\n → `
+
+        const serverLogMessage = t.arrayExpression([
+          t.stringLiteral(logMessage),
+        ])
+        const browserLogMessage = t.arrayExpression([
+          // LOG with css formatting specifiers: %c
           t.stringLiteral(
-            `${chalk.magenta('LOG')} ${chalk.blueBright(`${finalPath} - http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`)}\n → `,
+            `%c${'LOG'}%c %c${`Go to Source: http://localhost:${port}/__tsd/open-source?source=${encodeURIComponent(finalPath)}`}%c \n → `,
+          ),
+          // magenta
+          t.stringLiteral('color:#A0A'),
+          t.stringLiteral('color:#FFF'),
+          // blueBright
+          t.stringLiteral('color:#55F'),
+          t.stringLiteral('color:#FFF'),
+        ])
+
+        // typeof window === "undefined"
+        const checkServerCondition = t.binaryExpression(
+          '===',
+          t.unaryExpression('typeof', t.identifier('window')),
+          t.stringLiteral('undefined'),
+        )
+
+        // ...(isServer ? serverLogMessage : browserLogMessage)
+        path.node.arguments.unshift(
+          t.spreadElement(
+            t.conditionalExpression(
+              checkServerCondition,
+              serverLogMessage,
+              browserLogMessage,
+            ),
           ),
         )
+
         didTransform = true
       }
     },

package/src/index.ts

@@ -1,2 +1,2 @@
 export { devtools, defineDevtoolsConfig } from './plugin'
-export type { TanStackDevtoolsViteConfig } from './plugin'
+export type { TanStackDevtoolsViteConfig, ConsoleLevel } from './plugin'

package/src/plugin.ts

@@ -2,7 +2,11 @@ import { devtoolsEventClient } from '@tanstack/devtools-client'
 import { ServerEventBus } from '@tanstack/devtools-event-bus/server'
 import { normalizePath } from 'vite'
 import chalk from 'chalk'
-import { handleDevToolsViteRequest, readPackageJson } from './utils'
+import {
+  handleDevToolsViteRequest,
+  readPackageJson,
+  stripEnhancedLogPrefix,
+} from './utils'
 import { DEFAULT_EDITOR_CONFIG, handleOpenSource } from './editor'
 import { removeDevtools } from './remove-devtools'
 import { addSourceToJsx } from './inject-source'
@@ -13,10 +17,14 @@ import {
   emitOutdatedDeps,
   installPackage,
 } from './package-manager'
+import { generateConsolePipeCode } from './virtual-console'
+import type { ServerResponse } from 'node:http'
 import type { Plugin } from 'vite'
 import type { EditorConfig } from './editor'
 import type { ServerEventBusConfig } from '@tanstack/devtools-event-bus/server'
 
+export type ConsoleLevel = 'log' | 'warn' | 'error' | 'info' | 'debug'
+
 export type TanStackDevtoolsViteConfig = {
   /**
    * Configuration for the editor integration. Defaults to opening in VS code
@@ -70,6 +78,23 @@ export type TanStackDevtoolsViteConfig = {
       components?: Array<string | RegExp>
     }
   }
+  /**
+   * Configuration for console piping between client and server.
+   * When enabled, console logs from the client will appear in the terminal,
+   * and server logs will appear in the browser console.
+   */
+  consolePiping?: {
+    /**
+     * Whether to enable console piping.
+     * @default true
+     */
+    enabled?: boolean
+    /**
+     * Which console methods to pipe.
+     * @default ['log', 'warn', 'error', 'info', 'debug']
+     */
+    levels?: Array<ConsoleLevel>
+  }
 }
 
 export const defineDevtoolsConfig = (config: TanStackDevtoolsViteConfig) =>
@@ -82,6 +107,9 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
   const injectSourceConfig = args?.injectSource ?? { enabled: true }
   const removeDevtoolsOnBuild = args?.removeDevtoolsOnBuild ?? true
   const serverBusEnabled = args?.eventBusConfig?.enabled ?? true
+  const consolePipingConfig = args?.consolePiping ?? { enabled: true }
+  const consolePipingLevels: Array<ConsoleLevel> =
+    consolePipingConfig.levels ?? ['log', 'warn', 'error', 'info', 'debug']
 
   let devtoolsFileId: string | null = null
   let devtoolsPort: number | null = null
@@ -175,16 +203,77 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
           }
           await editor.open(path, lineNum, columnNum)
         }
+
+        // SSE clients for broadcasting server logs to browser
+        const sseClients: Array<{
+          res: ServerResponse
+          id: number
+        }> = []
+        let sseClientId = 0
+        const consolePipingEnabled = consolePipingConfig.enabled ?? true
+
         server.middlewares.use((req, res, next) =>
-          handleDevToolsViteRequest(req, res, next, (parsedData) => {
-            const { data, routine } = parsedData
-            if (routine === 'open-source') {
-              return handleOpenSource({
-                data: { type: data.type, data },
-                openInEditor,
-              })
-            }
-            return
+          handleDevToolsViteRequest(req, res, next, {
+            onOpenSource: (parsedData) => {
+              const { data, routine } = parsedData
+              if (routine === 'open-source') {
+                return handleOpenSource({
+                  data: { type: data.type, data },
+                  openInEditor,
+                })
+              }
+              return
+            },
+            ...(consolePipingEnabled
+              ? {
+                  onConsolePipe: (entries) => {
+                    for (const entry of entries) {
+                      const prefix = chalk.cyan('[Client]')
+                      const logMethod = console[entry.level as ConsoleLevel]
+                      const cleanedArgs = stripEnhancedLogPrefix(
+                        entry.args,
+                        (loc) => chalk.gray(loc),
+                      )
+                      logMethod(prefix, ...cleanedArgs)
+                    }
+                  },
+                  onConsolePipeSSE: (res, req) => {
+                    res.setHeader('Content-Type', 'text/event-stream')
+                    res.setHeader('Cache-Control', 'no-cache')
+                    res.setHeader('Connection', 'keep-alive')
+                    res.setHeader('Access-Control-Allow-Origin', '*')
+                    res.flushHeaders()
+
+                    const clientId = ++sseClientId
+                    sseClients.push({ res, id: clientId })
+
+                    req.on('close', () => {
+                      const index = sseClients.findIndex(
+                        (c) => c.id === clientId,
+                      )
+                      if (index !== -1) {
+                        sseClients.splice(index, 1)
+                      }
+                    })
+                  },
+                  onServerConsolePipe: (entries) => {
+                    try {
+                      const data = JSON.stringify({
+                        entries: entries.map((e) => ({
+                          level: e.level,
+                          args: e.args,
+                          source: 'server',
+                          timestamp: e.timestamp || Date.now(),
+                        })),
+                      })
+
+                      for (const client of sseClients) {
+                        client.res.write(`data: ${data}\n\n`)
+                      }
+                    } catch {}
+                  },
+                }
+              : {}),
           }),
         )
       },
@@ -202,7 +291,19 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
       },
       enforce: 'pre',
       transform(code, id) {
-        if (id.includes('node_modules') || id.includes('?raw')) return
+        const devtoolPackages = [
+          '@tanstack/react-devtools',
+          '@tanstack/preact-devtools',
+          '@tanstack/solid-devtools',
+          '@tanstack/vue-devtools',
+          '@tanstack/devtools',
+        ]
+        if (
+          id.includes('node_modules') ||
+          id.includes('?raw') ||
+          !devtoolPackages.some((pkg) => code.includes(pkg))
+        )
+          return
         const transform = removeDevtools(code, id)
         if (!transform) return
         if (logging) {
@@ -405,6 +506,8 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
             packageJson,
           })
         })
+
+        // Console piping is now handled via HTTP endpoints in the custom-server plugin
       },
       async handleHotUpdate({ file }) {
         if (file.endsWith('package.json')) {
@@ -416,6 +519,56 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
         }
       },
     },
+    // Inject console piping code into entry files (both client and server)
+    {
+      name: '@tanstack/devtools:console-pipe-transform',
+      enforce: 'pre',
+      apply(config, { command }) {
+        return (
+          config.mode === 'development' &&
+          command === 'serve' &&
+          (consolePipingConfig.enabled ?? true)
+        )
+      },
+      transform(code, id) {
+        // Inject the console pipe code into entry files
+        if (
+          id.includes('node_modules') ||
+          id.includes('dist') ||
+          id.includes('?') ||
+          !id.match(/\.(tsx?|jsx?)$/)
+        ) {
+          return
+        }
+
+        // Only inject once - check if already injected
+        if (code.includes('__tsdConsolePipe')) {
+          return
+        }
+
+        // Check if this is a root entry file (with <html> JSX or client entry points)
+        // In SSR frameworks, this file runs on BOTH server (SSR) and client (hydration)
+        // so our runtime check (typeof window === 'undefined') handles both environments
+        const isRootEntry =
+          /<html[\s>]/i.test(code) ||
+          code.includes('StartClient') ||
+          code.includes('hydrateRoot') ||
+          code.includes('createRoot') ||
+          (code.includes('solid-js/web') && code.includes('render('))
+
+        if (isRootEntry) {
+          const viteServerUrl = `http://localhost:${port}`
+          const inlineCode = generateConsolePipeCode(
+            consolePipingLevels,
+            viteServerUrl,
+          )
+
+          return `${inlineCode}\n${code}`
+        }
+
+        return undefined
+      },
+    },
     {
       name: '@tanstack/devtools:better-console-logs',
       enforce: 'pre',