Universal DevTools Kit SDK

---

Universal DevTools Kit SDK / @u-devtools/kit / context / createDevToolsContext

Function: createDevToolsContext()

createDevToolsContext(): object

Defined in: context.ts:46

Creates an isolated context storage for a plugin.

Since each plugin is bundled by Vite, we can use module closure to store context. This is the most reliable, fast and framework-independent way.

Returns

Pair of functions: setupDevTools (for initialization) and useDevTools (for usage).

Name	Type	Description	Defined in
setupDevTools()	(ctx) => void	Initializes the context. Called once at startup (in renderMain or setup).	context.ts:132
useApi()	() => ClientApi | undefined	Gets api from context. Throws Error if context is not initialized	context.ts:132
useBridge()	() => AppBridge<any>	Gets bridge from context. Throws Error if context is not initialized	context.ts:132
useDevTools()	() => DevToolsContext	Gets the current context. Works in any function, component or callback after initialization. Throws Error if context is not initialized	context.ts:132
useToast()	() => Toast	Gets toast from context. Throws Error if context is not initialized	context.ts:132

Example

// In plugin's context.ts
import { createDevToolsContext } from '@u-devtools/kit';

export const { setupDevTools, useDevTools } = createDevToolsContext();

// In client.ts
import { setupDevTools } from './context';

renderMain(container, api) {
  const bridge = new AppBridge('my-plugin');
  setupDevTools({ api, bridge });
  // ... render UI
}

// In component
import { useDevTools } from './context';

const { api, bridge, toast } = useDevTools();