feat(kit): support reading connection meta from windows

Author: antfu

packages/core/src/node/server.ts

@@ -5,23 +5,24 @@ import { dirClientStandalone } from '../dirs'
 import { createWsServer } from './ws'
 
 export async function createDevToolsMiddleware(options: CreateWsServerOptions) {
-  const app = createApp()
+  const h3 = createApp()
 
-  const { rpc, getConnectionMeta: getMetadata } = await createWsServer(options)
+  const { rpc, getConnectionMeta } = await createWsServer(options)
 
-  app.use('/.vdt-connection.json', eventHandler(async (event) => {
+  h3.use('/.vdt-connection.json', eventHandler(async (event) => {
     event.node.res.setHeader('Content-Type', 'application/json')
-    return event.node.res.end(JSON.stringify(await getMetadata()))
+    return event.node.res.end(JSON.stringify(await getConnectionMeta()))
   }))
 
-  app.use(fromNodeMiddleware(sirv(dirClientStandalone, {
+  h3.use(fromNodeMiddleware(sirv(dirClientStandalone, {
     dev: true,
     single: true,
   })))
 
   return {
-    h3: app,
-    middleware: toNodeListener(app),
+    h3,
     rpc,
+    middleware: toNodeListener(h3),
+    getConnectionMeta,
   }
 }

packages/kit/src/client/rpc.ts

@@ -6,6 +6,8 @@ import { createRpcClient } from '@vitejs/devtools-rpc'
 import { createWsRpcPreset } from '@vitejs/devtools-rpc/presets/ws/client'
 import { RpcFunctionsCollectorBase } from 'birpc-x'
 
+const CONNECTION_META_KEY = '__VITE_DEVTOOLS_CONNECTION_META__'
+
 function isNumeric(str: string | number | undefined) {
   if (str == null)
     return false
@@ -27,30 +29,48 @@ export interface ClientRpcReturn {
   clientRpc: DevToolsClientRpcHost
 }
 
+function findConnectionMetaFromWindows(): ConnectionMeta | undefined {
+  const getters = [
+    () => (window as any)[CONNECTION_META_KEY],
+    () => (globalThis as any)[CONNECTION_META_KEY],
+    () => (parent.window as any)[CONNECTION_META_KEY],
+  ]
+
+  for (const getter of getters) {
+    try {
+      const value = getter()
+      if (value)
+        return value
+    }
+    catch {}
+  }
+}
+
 export async function getDevToolsRpcClient(
   options: DevToolsRpcClientOptions = {},
 ): Promise<ClientRpcReturn> {
   const {
     baseURL = '/.devtools/',
     rpcOptions = {},
   } = options
-  const urls = Array.isArray(baseURL) ? baseURL : [baseURL]
-  let connectionMeta: ConnectionMeta | undefined = options.connectionMeta
+  const bases = Array.isArray(baseURL) ? baseURL : [baseURL]
+  let connectionMeta: ConnectionMeta | undefined = options.connectionMeta || findConnectionMetaFromWindows()
 
   if (!connectionMeta) {
     const errors: Error[] = []
-    for (const url of urls) {
+    for (const base of bases) {
       try {
-        connectionMeta = await fetch(`${url}.vdt-connection.json`)
+        connectionMeta = await fetch(`${base}.vdt-connection.json`)
           .then(r => r.json()) as ConnectionMeta
+        ;(globalThis as any)[CONNECTION_META_KEY] = connectionMeta
         break
       }
       catch (e) {
         errors.push(e as Error)
       }
     }
     if (!connectionMeta) {
-      throw new Error(`Failed to get connection meta from ${urls.join(', ')}`, {
+      throw new Error(`Failed to get connection meta from ${bases.join(', ')}`, {
         cause: errors,
       })
     }