fix: issue with console piping and https server resolutions (#343)

* fix: issue with console piping and https server resolutions

* changeset

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/fresh-bars-matter.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-vite': patch
+'@tanstack/devtools-event-bus': patch
+---
+
+fix issues with https servers and console piping

packages/devtools-vite/src/plugin.ts

@@ -21,7 +21,10 @@ 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'
+import type {
+  HttpServerLike,
+  ServerEventBusConfig,
+} from '@tanstack/devtools-event-bus/server'
 
 export type ConsoleLevel = 'log' | 'warn' | 'error' | 'info' | 'debug'
 
@@ -113,6 +116,8 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
 
   let devtoolsFileId: string | null = null
   let devtoolsPort: number | null = null
+  let devtoolsHost: string | null = null
+  let devtoolsProtocol: 'http' | 'https' | null = null
 
   return [
     {
@@ -170,9 +175,24 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
       async configureServer(server) {
         if (serverBusEnabled) {
           const preferredPort = args?.eventBusConfig?.port ?? 4206
+          const isHttps = !!server.config.server.https
+          const serverHost =
+            typeof server.config.server.host === 'string'
+              ? server.config.server.host
+              : 'localhost'
+
+          devtoolsProtocol = isHttps ? 'https' : 'http'
+          devtoolsHost = serverHost
+
           const bus = new ServerEventBus({
             ...args?.eventBusConfig,
             port: preferredPort,
+            host: serverHost,
+            // When HTTPS is enabled, piggyback on Vite's server
+            // so WebSocket/SSE connections share the same TLS certificate
+            ...(isHttps && server.httpServer
+              ? { httpServer: server.httpServer as HttpServerLike }
+              : {}),
           })
           // start() now handles EADDRINUSE and returns the actual port
           devtoolsPort = await bus.start()
@@ -608,22 +628,42 @@ export const devtools = (args?: TanStackDevtoolsViteConfig): Array<Plugin> => {
       },
     },
     {
-      name: '@tanstack/devtools:port-injection',
+      name: '@tanstack/devtools:connection-injection',
       apply(config, { command }) {
         return config.mode === 'development' && command === 'serve'
       },
       transform(code, id) {
-        // Only transform @tanstack packages that contain the port placeholder
-        if (!code.includes('__TANSTACK_DEVTOOLS_PORT__')) return
+        // Only transform @tanstack packages that contain the connection placeholders
+        const hasPlaceholder =
+          code.includes('__TANSTACK_DEVTOOLS_PORT__') ||
+          code.includes('__TANSTACK_DEVTOOLS_HOST__') ||
+          code.includes('__TANSTACK_DEVTOOLS_PROTOCOL__')
+        if (!hasPlaceholder) return
         if (
           !id.includes('@tanstack/devtools') &&
           !id.includes('@tanstack/event-bus')
         )
           return
 
-        // Replace placeholder with actual port (or fallback to 4206 if not resolved yet)
+        // Replace placeholders with actual values (or fallback defaults)
         const portValue = devtoolsPort ?? 4206
-        return code.replace(/__TANSTACK_DEVTOOLS_PORT__/g, String(portValue))
+        const hostValue = devtoolsHost ?? 'localhost'
+        const protocolValue = devtoolsProtocol ?? 'http'
+
+        let result = code
+        result = result.replace(
+          /__TANSTACK_DEVTOOLS_PORT__/g,
+          String(portValue),
+        )
+        result = result.replace(
+          /__TANSTACK_DEVTOOLS_HOST__/g,
+          JSON.stringify(hostValue),
+        )
+        result = result.replace(
+          /__TANSTACK_DEVTOOLS_PROTOCOL__/g,
+          JSON.stringify(protocolValue),
+        )
+        return result
       },
     },
   ]

packages/devtools-vite/src/utils.ts

@@ -128,6 +128,7 @@ export const handleDevToolsViteRequest = (
       options.onOpenSource?.(parsedData)
     } catch (e) {}
     res.write('OK')
+    res.end()
   })
 }