Skip to main content 홈 크리에이터 tanstack devtools devtools-framework-adapters
devtools-framework-adapters Use devtools-utils factory functions to create per-framework plugin adapters. createReactPlugin/createSolidPlugin/createVuePlugin/createPreactPlugin, createReactPanel/createSolidPanel/createVuePanel/createPreactPanel. [Plugin, NoOpPlugin] tuple for tree-shaking. DevtoolsPanelProps (theme). Vue uses (name, component) not options object. Solid render must be function.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/TanStack/devtools --skill devtools-framework-adapters명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.
Create typed EventClient for a library. Define event maps with typed payloads, pluginId auto-prepend namespacing, emit()/on()/onAll()/onAllPluginEvents() API. Connection lifecycle (5 retries, 300ms), event queuing, enabled/disabled state, SSR fallbacks, singleton pattern. Unique pluginId requirement to avoid event collisions.
Analyze library codebase for critical architecture and debugging points, add strategic event emissions. Identify middleware boundaries, state transitions, lifecycle hooks. Consolidate events (1 not 15), debounce high-frequency updates, DRY shared payload fields, guard emit() for production. Transparent server/client event bridging.
name devtools-framework-adapters description Use devtools-utils factory functions to create per-framework plugin adapters. createReactPlugin/createSolidPlugin/createVuePlugin/createPreactPlugin, createReactPanel/createSolidPanel/createVuePanel/createPreactPanel. [Plugin, NoOpPlugin] tuple for tree-shaking. DevtoolsPanelProps (theme). Vue uses (name, component) not options object. Solid render must be function.
type framework library tanstack-devtools library_version 0.10.12 requires ["tanstack-devtools/plugin-panel"] sources ["TanStack/devtools:docs/devtools-utils.md","TanStack/devtools:packages/devtools-utils/src/react/plugin.tsx","TanStack/devtools:packages/devtools-utils/src/vue/plugin.ts","TanStack/devtools:packages/devtools-utils/src/solid/plugin.tsx","TanStack/devtools:packages/devtools-utils/src/preact/plugin.tsx"]
Use @tanstack/devtools-utils factory functions to create per-framework devtools plugin adapters. Each framework has a subpath export (/react, /vue, /solid, /preact) with two factories:
createXPlugin[Plugin, NoOpPlugin] tuple for tree-shaking.createXPanelmount/unmount) into a [Panel, NoOpPanel] component tuple.
Key Source Files
packages/devtools-utils/src/react/plugin.tsx -- createReactPluginpackages/devtools-utils/src/react/panel.tsx -- createReactPanel, DevtoolsPanelPropspackages/devtools-utils/src/vue/plugin.ts -- createVuePlugin (different API)packages/devtools-utils/src/vue/panel.ts -- createVuePanel, DevtoolsPanelProps (includes 'system' theme)packages/devtools-utils/src/solid/plugin.tsx -- createSolidPluginpackages/devtools-utils/src/solid/panel.tsx -- createSolidPanelpackages/devtools-utils/src/solid/class.ts -- constructCoreClass (Solid-specific)packages/devtools-utils/src/preact/plugin.tsx -- createPreactPluginpackages/devtools-utils/src/preact/panel.tsx -- createPreactPanel
Shared Pattern
All four frameworks follow the same two-factory pattern:
Plugin Factory
Every createXPlugin returns readonly [Plugin, NoOpPlugin]:
Plugin -- returns a plugin object with metadata and a render function that renders your component.NoOpPlugin -- returns a plugin object with the same metadata but renders an empty fragment.
Panel Factory
Every createXPanel returns readonly [Panel, NoOpPanel]:
Panel -- a framework component that creates a <div style="height:100%">, instantiates the core class, calls core.mount(el, theme) on mount, and
core.unmount()
NoOpPanel -- renders an empty fragment.
DevtoolsPanelProps
interface DevtoolsPanelProps {
theme ?: 'light' | 'dark'
}
interface DevtoolsPanelProps {
theme ?: 'dark' | 'light' | 'system'
}
Import from the framework subpath:
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/vue'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/solid'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
Primary Example (React) import { createReactPlugin } from '@tanstack/devtools-utils/react'
function MyStorePanel ({ theme }: { theme?: 'light' | 'dark' } ) {
return <div className ={theme} > My Store Devtools</div > const [MyPlugin , NoOpPlugin ] = createReactPlugin ({
name : 'My Store' ,
id : 'my-store' ,
defaultOpen : false ,
Component : MyStorePanel ,
})
const ActivePlugin =
process.env .NODE_ENV === 'development' ? MyPlugin : NoOpPlugin
With Class-Based Panel import {
createReactPanel,
createReactPlugin,
} from '@tanstack/devtools-utils/react'
class MyDevtoolsCore {
mount (el : HTMLElement , theme : 'light' | 'dark' unmount (const [MyPanel , NoOpPanel ] = createReactPanel (MyDevtoolsCore )
const [MyPlugin , NoOpPlugin ] = createReactPlugin ({
name : 'My Store' ,
Component : MyPanel ,
})
Framework API Differences
React & Preact -- Options Object createReactPlugin ({ name, id?, defaultOpen?, Component })
createPreactPlugin ({ name, id?, defaultOpen?, Component })
Component receives DevtoolsPanelProps (with theme).Plugin() returns { name, id?, defaultOpen?, render(el, theme) }.Preact is identical to React but uses Preact JSX types and preact/hooks.
Vue -- Positional Arguments, NOT Options Object createVuePlugin (name : string , component : DefineComponent )
Takes (name, component) as separate arguments, NOT an options object.
Plugin(props) returns { name, component, props } -- it passes props through.NoOpPlugin(props) returns { name, component: Fragment, props }.Vue's DevtoolsPanelProps.theme also accepts 'system'.
Solid -- Same API as React, Different Internals createSolidPlugin ({ name, id?, defaultOpen?, Component })
Same options-object API as React.
Component must be a Solid component function (props: DevtoolsPanelProps) => JSX.Element.The render function internally returns <Component theme={theme} /> -- Solid handles reactivity.
Solid also exports constructCoreClass from @tanstack/devtools-utils/solid/class for building lazy-loaded devtools cores.
Common Mistakes
CRITICAL: Using React JSX Pattern in Vue Adapter Vue uses positional (name, component) arguments, NOT an options object.
const [MyPlugin , NoOpPlugin ] = createVuePlugin ({
name : 'My Plugin' ,
Component : MyPanel ,
})
const [MyPlugin , NoOpPlugin ] = createVuePlugin ('My Plugin' , MyPanel )
Vue plugins also work differently at call time -- you pass props:
const plugin = MyPlugin ()
const plugin = MyPlugin ({ theme : 'dark' })
CRITICAL: Solid Render Prop Not Wrapped in Function When using Solid components, Component must be a function reference, not raw JSX.
createSolidPlugin ({
name : 'My Store' ,
Component : <MyPanel /> createSolidPlugin ({
name : 'My Store' ,
Component : (props ) => <MyPanel theme ={props.theme} /> createSolidPlugin ({
name : 'My Store' ,
Component : MyPanel ,
})
HIGH: Ignoring NoOp Variant for Production The factory returns [Plugin, NoOpPlugin]. Both must be destructured and used for proper tree-shaking.
const [MyPlugin ] = createReactPlugin ({ name : 'Store' , Component : MyPanel })
const [MyPlugin , NoOpPlugin ] = createReactPlugin ({
name : 'Store' ,
Component : MyPanel ,
})
const ActivePlugin =
process.env .NODE_ENV === 'development' ? MyPlugin : NoOpPlugin
MEDIUM: Not Passing Theme Prop to Panel Component DevtoolsPanelProps includes theme. The devtools shell passes it so panels can match light/dark mode. If your component ignores it, the panel will not adapt to theme changes.
const Component = (<div > My Panel</div > const Component = ({ theme }: DevtoolsPanelProps ) => (
<div className ={theme === 'dark' ? 'dark-mode ' : 'light-mode '}> My Panel</div >
Design Tension The core architecture is framework-agnostic, but each framework has different idioms:
React/Preact use an options object with Component as a JSX function component.
Vue uses positional arguments with a DefineComponent and passes props through.
Solid uses the same options API as React but with Solid's JSX and reactivity model.
Agents trained on React patterns will get Vue wrong. Always check the import path to determine which factory API to use.
Cross-References
devtools-plugin-panel -- Build your panel component first, then wrap it with the appropriate framework adapter.devtools-production -- NoOp variants are the primary mechanism for stripping devtools from production bundles.
Reference Files
references/react.md -- Full React factory API and examplesreferences/vue.md -- Full Vue factory API and examples (different from React)references/solid.md -- Full Solid factory API and examplesreferences/preact.md -- Full Preact factory API and examples 