Merge branch 'vitejs:main' into main

Author: arashsheyda

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:

examples/plugin-a11y-checker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example-plugin-a11y-checker",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "exports": {
     ".": "./dist/index.mjs",

examples/plugin-file-explorer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example-plugin-file-explorer",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "exports": {
     ".": "./dist/index.mjs",

examples/plugin-git-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example-plugin-git-ui",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "exports": {
     ".": "./dist/index.mjs",

package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "packageManager": "pnpm@10.32.1",
   "scripts": {

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitejs/devtools",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Vite DevTools",
   "author": "VoidZero Inc.",
   "license": "MIT",

packages/core/playground/package.json

@@ -1,7 +1,7 @@
 {
   "name": "playground",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "scripts": {
     "dev": "DEBUG='vite:devtools:*' VITE_DEVTOOLS_LOCAL_DEV=true vite",

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>