feat: add public getDevToolsClientContext() API (#219)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

Author: antfu

docs/kit/rpc.md

@@ -393,6 +393,22 @@ export default function setup(ctx: DockClientScriptContext) {
 }
 ```
 
+### Global Client Context
+
+Use `getDevToolsClientContext()` to access the client context (`DevToolsClientContext`) from anywhere on the client side. This is set automatically when DevTools initializes in embedded or standalone mode.
+
+```ts
+import { getDevToolsClientContext } from '@vitejs/devtools-kit/client'
+
+const ctx = getDevToolsClientContext()
+if (ctx) {
+  const modules = await ctx.rpc.call('my-plugin:get-modules')
+}
+```
+
+Returns `undefined` if the context has not been initialized yet.
+```
+
 ## Client-Side Functions
 
 You can also define functions on the client that the server can call.

docs/kit/shared-state.md

@@ -118,6 +118,17 @@ const state = await client.sharedState.get('my-plugin:state')
 console.log(state.value())
 ```
 
+You can also access shared state through the global client context:
+
+```ts
+import { getDevToolsClientContext } from '@vitejs/devtools-kit/client'
+
+const ctx = getDevToolsClientContext()
+if (ctx) {
+  const state = await ctx.rpc.sharedState.get('my-plugin:state')
+}
+```
+
 ### Subscribing to Changes
 
 Use `state.on('updated', ...)` to react to state changes:

packages/core/src/client/inject/index.ts

@@ -2,7 +2,7 @@
 /// <reference lib="dom" />
 
 import type { DockPanelStorage } from '@vitejs/devtools-kit/client'
-import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
+import { CLIENT_CONTEXT_KEY, getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { useLocalStorage } from '@vueuse/core'
 import { createDocksContext } from '../webcomponents/state/context'
 
@@ -31,6 +31,7 @@ export async function init(): Promise<void> {
     rpc,
     state,
   )
+  ;(globalThis as any)[CLIENT_CONTEXT_KEY] = context
 
   const { DockEmbedded } = import.meta.env.VITE_DEVTOOLS_LOCAL_DEV
     ? await import('../webcomponents')

packages/core/src/client/standalone/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
+import { CLIENT_CONTEXT_KEY, getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import DockStandalone from '../webcomponents/components/DockStandalone.vue'
 import { createDocksContext } from '../webcomponents/state/context'
 
@@ -13,6 +13,7 @@ const context: DocksContext = await createDocksContext(
   'standalone',
   rpc,
 )
+;(globalThis as any)[CLIENT_CONTEXT_KEY] = context
 </script>
 
 <template>

packages/kit/src/client/context.ts

@@ -0,0 +1,12 @@
+import type { DevToolsClientContext } from './docks'
+
+const CLIENT_CONTEXT_KEY = '__VITE_DEVTOOLS_CLIENT_CONTEXT__'
+
+/**
+ * Get the global DevTools client context, or `undefined` if not yet initialized.
+ */
+export function getDevToolsClientContext(): DevToolsClientContext | undefined {
+  return (globalThis as any)[CLIENT_CONTEXT_KEY]
+}
+
+export { CLIENT_CONTEXT_KEY }

packages/kit/src/client/index.ts

@@ -1,3 +1,4 @@
 export * from './client-script'
+export * from './context'
 export * from './docks'
 export * from './rpc'

skills/vite-devtools-kit/SKILL.md

@@ -360,6 +360,19 @@ export default function setup(ctx: DevToolsClientScriptContext) {
 }
 ```
 
+## Client Context
+
+The global client context (`DevToolsClientContext`) provides access to the RPC client and is set automatically when DevTools initializes (embedded or standalone). Use `getDevToolsClientContext()` to access it from anywhere on the client side:
+
+```ts
+import { getDevToolsClientContext } from '@vitejs/devtools-kit/client'
+
+const ctx = getDevToolsClientContext()
+if (ctx) {
+  const modules = await ctx.rpc.call('my-plugin:get-modules')
+}
+```
+
 ### Broadcasting to Clients
 
 ```ts

skills/vite-devtools-kit/references/project-structure.md

@@ -187,6 +187,15 @@ export function useRpc() {
 }
 ```
 
+Alternatively, use `getDevToolsClientContext()` to access the global client context synchronously (returns `undefined` if not yet initialized):
+
+```ts
+import { getDevToolsClientContext } from '@vitejs/devtools-kit/client'
+
+const ctx = getDevToolsClientContext()
+// ctx?.rpc is the DevToolsRpcClient
+```
+
 ## Client App Component (src/client/App.vue)
 
 ```vue

skills/vite-devtools-kit/references/rpc-patterns.md

@@ -119,6 +119,21 @@ ctx.rpc.broadcast({
 })
 ```
 
+## Global Client Context
+
+Use `getDevToolsClientContext()` to access the client context (`DevToolsClientContext`) globally. Returns `undefined` if the context has not been initialized yet.
+
+```ts
+import { getDevToolsClientContext } from '@vitejs/devtools-kit/client'
+
+const ctx = getDevToolsClientContext()
+if (ctx) {
+  await ctx.rpc.call('my-plugin:get-modules')
+}
+```
+
+This is set automatically when DevTools initializes in embedded or standalone mode. For iframe pages, `getDevToolsRpcClient()` is still the recommended way to get the RPC client directly.
+
 ## Client Function Registration
 
 ```ts

skills/vite-devtools-kit/references/shared-state-patterns.md

@@ -33,7 +33,7 @@ state.mutate((draft) => {
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 
 const client = await getDevToolsRpcClient()
-const state = await client.rpc.sharedState.get('my-plugin:state')
+const state = await client.sharedState.get('my-plugin:state')
 
 // Read
 console.log(state.value())
@@ -44,6 +44,17 @@ state.on('updated', (newState) => {
 })
 ```
 
+You can also access shared state through the global client context:
+
+```ts
+import { getDevToolsClientContext } from '@vitejs/devtools-kit/client'
+
+const ctx = getDevToolsClientContext()
+if (ctx) {
+  const state = await ctx.rpc.sharedState.get('my-plugin:state')
+}
+```
+
 ## Type-Safe Shared State
 
 ```ts