devtools-framework-adapters

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:

1. createXPlugin -- wraps a component into a [Plugin, NoOpPlugin] tuple for tree-shaking.
2. createXPanel -- wraps a class-based devtools core (mount/unmount) into a [Panel, NoOpPanel] component tuple.

Key Source Files

• packages/devtools-utils/src/react/plugin.tsx -- createReactPlugin
• packages/devtools-utils/src/react/panel.tsx -- createReactPanel, DevtoolsPanelProps
• packages/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 -- createSolidPlugin
• packages/devtools-utils/src/solid/panel.tsx -- createSolidPanel
• packages/devtools-utils/src/solid/class.ts -- constructCoreClass (Solid-specific)
• packages/devtools-utils/src/preact/plugin.tsx -- createPreactPlugin
• packages/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() on cleanup.
• NoOpPanel -- renders an empty fragment.

DevtoolsPanelProps

// React, Solid, Preact
interface DevtoolsPanelProps {
  theme?: 'light' | 'dark'
}

// Vue (note: includes 'system')
interface DevtoolsPanelProps {
  theme?: 'dark' | 'light' | 'system'
}