diff --git a/docs/kit/rpc.md b/docs/kit/rpc.md index 0c384547..0322a398 100644 --- a/docs/kit/rpc.md +++ b/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. diff --git a/docs/kit/shared-state.md b/docs/kit/shared-state.md index f6b8e597..df709574 100644 --- a/docs/kit/shared-state.md +++ b/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: diff --git a/packages/core/src/client/inject/index.ts b/packages/core/src/client/inject/index.ts index 61977014..a1a90969 100644 --- a/packages/core/src/client/inject/index.ts +++ b/packages/core/src/client/inject/index.ts @@ -2,7 +2,7 @@ /// 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 { rpc, state, ) + ;(globalThis as any)[CLIENT_CONTEXT_KEY] = context const { DockEmbedded } = import.meta.env.VITE_DEVTOOLS_LOCAL_DEV ? await import('../webcomponents') diff --git a/packages/core/src/client/standalone/App.vue b/packages/core/src/client/standalone/App.vue index d97770ea..2ad3e22f 100644 --- a/packages/core/src/client/standalone/App.vue +++ b/packages/core/src/client/standalone/App.vue @@ -1,6 +1,6 @@