` with a ref.
- Instantiates `CoreClass` immediately via `createSignal`.
- Calls `core.mount(el, props.theme ?? 'dark')` inside `onMount`.
- Calls `core.unmount()` via `onCleanup` (nested inside `onMount`).
- **`NoOpPanel`** -- Renders `<>`.
```
--------------------------------
### Production Tree-Shaking with createSolidPlugin
Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/solid.md
Illustrates how to conditionally use the active plugin or a no-operation plugin based on the environment for production builds.
```tsx
const [MyPlugin, NoOpPlugin] = createSolidPlugin({
name: 'My Store',
Component: MyStorePanel,
})
const ActivePlugin = import.meta.env.DEV ? MyPlugin : NoOpPlugin
```
--------------------------------
### Install TanStack Store Dependency
Source: https://github.com/tanstack/devtools/blob/main/examples/react/bundling-repro/README.md
Add TanStack Store to your project using npm.
```bash
npm install @tanstack/store
```
--------------------------------
### Install TanStack Store Dependency
Source: https://github.com/tanstack/devtools/blob/main/examples/react/start/README.md
Add TanStack Store to your project dependencies using pnpm.
```bash
pnpm add @tanstack/store
```
--------------------------------
### Plugin Name: Simple String Example
Source: https://github.com/tanstack/devtools/blob/main/docs/plugin-lifecycle.md
Use a plain string for the plugin's tab title.
```typescript
{ name: 'My Plugin', render: (el) => { /* ... */ } }
```
--------------------------------
### Create TanStack Directory
Source: https://github.com/tanstack/devtools/blob/main/examples/react/drizzle/README.md
Create a new directory named 'tanstack' to organize the project and documentation repositories.
```sh
mkdir tanstack
```
--------------------------------
### Quick Start: React Integration
Source: https://github.com/tanstack/devtools/blob/main/docs/plugins/a11y.md
Integrate the a11y plugin into your React application by passing it to the TanStackDevtools component.
```tsx
import {
createRoot
} from 'react-dom/client'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react'
createRoot(document.getElementById('root')!).render(
<>
,
)
```
--------------------------------
### Vue Component for Devtools Panel
Source: https://github.com/tanstack/devtools/blob/main/packages/devtools-utils/skills/devtools-framework-adapters/references/vue.md
A basic Vue component example that can be used with `createVuePlugin`. It accepts theme props.
```vue
My Store Devtools
```
--------------------------------
### Consumer Usage of NoOp Plugin in Production
Source: https://github.com/tanstack/devtools/blob/main/packages/devtools/skills/devtools-production/SKILL.md
Demonstrates how a consumer application selects between the main plugin and the NoOp variant based on the environment (development vs. production) for conditional loading of TanStack Devtools.
```tsx
import { QueryPlugin, QueryNoOpPlugin } from '@tanstack/query-devtools'
const ActivePlugin =
process.env.NODE_ENV === 'development' ? QueryPlugin : QueryNoOpPlugin
function App() {
return
}
```