@tanstack/devtools-vite 0.4.1 → 0.5.0

package/src/utils.ts

@@ -4,12 +4,31 @@ import type { Connect } from 'vite'
 import type { IncomingMessage, ServerResponse } from 'node:http'
 import type { PackageJson } from '@tanstack/devtools-client'
 
+type DevToolsRequestHandler = (data: any) => void
+
+type DevToolsViteRequestOptions = {
+  onOpenSource?: DevToolsRequestHandler
+  onConsolePipe?: (entries: Array<any>) => void
+  onServerConsolePipe?: (entries: Array<any>) => void
+  onConsolePipeSSE?: (
+    res: ServerResponse<IncomingMessage>,
+    req: Connect.IncomingMessage,
+  ) => void
+}
+
 export const handleDevToolsViteRequest = (
   req: Connect.IncomingMessage,
   res: ServerResponse<IncomingMessage>,
   next: Connect.NextFunction,
-  cb: (data: any) => void,
+  cbOrOptions: DevToolsRequestHandler | DevToolsViteRequestOptions,
 ) => {
+  // Normalize to options object for backward compatibility
+  const options: DevToolsViteRequestOptions =
+    typeof cbOrOptions === 'function'
+      ? { onOpenSource: cbOrOptions }
+      : cbOrOptions
+
+  // Handle open-source requests
   if (req.url?.includes('__tsd/open-source')) {
     const searchParams = new URLSearchParams(req.url.split('?')[1])
 
@@ -24,7 +43,7 @@ export const handleDevToolsViteRequest = (
     }
     const { file, line, column } = parsed
 
-    cb({
+    options.onOpenSource?.({
       type: 'open-source',
       routine: 'open-source',
       data: {
@@ -38,6 +57,62 @@ export const handleDevToolsViteRequest = (
     res.end()
     return
   }
+
+  // Handle console-pipe SSE endpoint (browser subscribes to server logs)
+  if (req.url?.includes('__tsd/console-pipe/sse') && req.method === 'GET') {
+    if (options.onConsolePipeSSE) {
+      options.onConsolePipeSSE(res, req)
+      return
+    }
+    return next()
+  }
+
+  // Handle server console-pipe POST endpoint (from app server runtime)
+  if (req.url?.includes('__tsd/console-pipe/server') && req.method === 'POST') {
+    if (options.onServerConsolePipe) {
+      let body = ''
+      req.on('data', (chunk: Buffer) => {
+        body += chunk.toString()
+      })
+      req.on('end', () => {
+        try {
+          const { entries } = JSON.parse(body)
+          options.onServerConsolePipe!(entries)
+          res.statusCode = 200
+          res.end('OK')
+        } catch {
+          res.statusCode = 400
+          res.end('Bad Request')
+        }
+      })
+      return
+    }
+    return next()
+  }
+
+  // Handle console-pipe POST endpoint (from client)
+  if (req.url?.includes('__tsd/console-pipe') && req.method === 'POST') {
+    if (options.onConsolePipe) {
+      let body = ''
+      req.on('data', (chunk: Buffer) => {
+        body += chunk.toString()
+      })
+      req.on('end', () => {
+        try {
+          const { entries } = JSON.parse(body)
+          options.onConsolePipe!(entries)
+          res.statusCode = 200
+          res.end('OK')
+        } catch {
+          res.statusCode = 400
+          res.end('Bad Request')
+        }
+      })
+      return
+    }
+    return next()
+  }
+
   if (!req.url?.includes('__tsd')) {
     return next()
   }
@@ -50,7 +125,7 @@ export const handleDevToolsViteRequest = (
     const dataToParse = Buffer.concat(chunks)
     try {
       const parsedData = JSON.parse(dataToParse.toString())
-      cb(parsedData)
+      options.onOpenSource?.(parsedData)
     } catch (e) {}
     res.write('OK')
   })
@@ -92,3 +167,80 @@ export const tryParseJson = <T extends any>(
 
 export const readPackageJson = async () =>
   tryParseJson<PackageJson>(await tryReadFile(process.cwd() + '/package.json'))
+
+/**
+ * Extracts and formats the source location from enhanced client console logs.
+ * Instead of stripping the prefix entirely, we extract the file:line:column
+ * from the "Go to Source" URL and use that as a prefix.
+ *
+ * Enhanced logs format (two variants):
+ * 1. ['%cLOG%c %cGo to Source: http://...?source=%2Fsrc%2F...%c \n → ', 'color:...', 'color:...', 'color:...', 'color:...', 'message']
+ * 2. ['\x1b[...]%s\x1b[...]', '%cLOG%c %cGo to Source: ...%c \n → ', 'color:...', 'color:...', 'color:...', 'color:...', 'message']
+ *
+ * Output: ['src/components/Header.tsx:26:13', 'message']
+ */
+export const stripEnhancedLogPrefix = (
+  args: Array<unknown>,
+  formatSourceLocation?: (location: string) => unknown,
+): Array<unknown> => {
+  if (args.length === 0) return args
+
+  // Find the arg that contains the Go to Source URL
+  let sourceArgIndex = -1
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i]
+    if (typeof arg === 'string' && arg.includes('__tsd/open-source?source=')) {
+      sourceArgIndex = i
+      break
+    }
+  }
+
+  // If no source URL found, return args as-is (not an enhanced log)
+  if (sourceArgIndex === -1) {
+    return args
+  }
+
+  const sourceArg = args[sourceArgIndex] as string
+
+  // Extract the source from the "Go to Source" URL
+  // URL format: http://localhost:3000/__tsd/open-source?source=%2Fsrc%2Ffile.tsx%3A26%3A13%c
+  // Note: The URL ends with %c which is a console format specifier, not URL encoding
+  let sourceLocation = ''
+  const sourceMatch = sourceArg.match(/source=([^&\s]+?)%c/)
+  if (sourceMatch?.[1]) {
+    try {
+      sourceLocation = decodeURIComponent(sourceMatch[1])
+      // Remove leading slash if present
+      if (sourceLocation.startsWith('/')) {
+        sourceLocation = sourceLocation.slice(1)
+      }
+    } catch {
+      // If decoding fails, leave it empty
+    }
+  }
+
+  // Count %c markers in the source arg to know how many style args follow it
+  const styleCount = (sourceArg.match(/%c/g) || []).length
+
+  // The actual user args start after the source arg and all its style args
+  const userArgsStart = sourceArgIndex + 1 + styleCount
+
+  // Build the result: source location prefix + remaining args (the actual user data)
+  const result: Array<unknown> = []
+
+  // Add source location as prefix if we found one
+  if (sourceLocation) {
+    result.push(
+      formatSourceLocation
+        ? formatSourceLocation(sourceLocation)
+        : sourceLocation,
+    )
+  }
+
+  // Add remaining args (the actual user data)
+  for (let i = userArgsStart; i < args.length; i++) {
+    result.push(args[i])
+  }
+
+  return result.length > 0 ? result : args
+}

package/src/virtual-console.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, test } from 'vitest'
+import { generateConsolePipeCode } from './virtual-console'
+
+const TEST_VITE_URL = 'http://localhost:5173'
+
+describe('virtual-console', () => {
+  test('generates inline code with specified levels', () => {
+    const code = generateConsolePipeCode(['log', 'error'], TEST_VITE_URL)
+
+    expect(code).toContain('["log","error"]')
+    expect(code).toContain('originalConsole')
+    expect(code).toContain('__TSD_CONSOLE_PIPE_INITIALIZED__')
+  })
+
+  test('uses fetch to send client logs', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('/__tsd/console-pipe')
+    expect(code).toContain("method: 'POST'")
+  })
+
+  test('uses SSE to receive server logs', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain("new EventSource('/__tsd/console-pipe/sse')")
+  })
+
+  test('includes environment detection', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain("typeof window === 'undefined'")
+    expect(code).toContain('isServer')
+  })
+
+  test('includes batcher configuration', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('BATCH_WAIT')
+    expect(code).toContain('BATCH_MAX_SIZE')
+  })
+
+  test('includes flush functionality', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('flushBatch')
+  })
+
+  test('includes beforeunload listener for browser', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('beforeunload')
+  })
+
+  test('wraps code in IIFE', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain('(function __tsdConsolePipe()')
+    expect(code).toContain('})();')
+  })
+
+  test('has no external imports', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).not.toContain('import ')
+  })
+
+  test('includes vite server URL for server piping', () => {
+    const code = generateConsolePipeCode(['log'], TEST_VITE_URL)
+
+    expect(code).toContain(TEST_VITE_URL)
+    expect(code).toContain('/__tsd/console-pipe/server')
+  })
+})

package/src/virtual-console.ts

@@ -0,0 +1,202 @@
+import type { ConsoleLevel } from './plugin'
+
+// export const VIRTUAL_MODULE_ID = 'virtual:tanstack-devtools-console'
+// export const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID
+
+/**
+ * Generates inline code to inject into entry files (both client and server).
+ * This code detects the environment at runtime and:
+ *
+ * CLIENT:
+ * 1. Store original console methods
+ * 2. Create batched wrappers that POST to server via fetch
+ * 3. Override global console with the wrapped methods
+ * 4. Listen for server console logs via SSE
+ *
+ * SERVER (Nitro/Vinxi runtime):
+ * 1. Store original console methods
+ * 2. Create batched wrappers that POST to Vite dev server
+ * 3. Override global console - original logging still happens, just also pipes to Vite
+ *
+ * Returns the inline code as a string - no imports needed since we use fetch.
+ */
+export function generateConsolePipeCode(
+  levels: Array<ConsoleLevel>,
+  viteServerUrl: string,
+): string {
+  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);
+  }
+})();
+`
+}