### Project Dependencies for A11y Devtools Example

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Lists the necessary dependencies for running the A11y Devtools example, including React, Devtools, and Vite build tools. Ensure these are installed before running the example.

```json
{
  "name": "@tanstack/react-devtools-a11y-example",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --port=3002",
    "build": "vite build",
    "preview": "vite preview",
    "test:types": "tsc"
  },
  "dependencies": {
    "@tanstack/devtools-a11y": "^0.1.3",
    "@tanstack/react-devtools": "^0.10.5",
    "react": "^19.2.0",
    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@tanstack/devtools-vite": "0.7.0",
    "@types/react": "^19.2.0",
    "@types/react-dom": "^19.2.0",
    "@vitejs/plugin-react": "^6.0.1"
  }
}
```

--------------------------------

### Install Devtools Event Client

Source: https://tanstack.com/devtools/latest/docs/building-custom-plugins.md

Install the necessary package for the EventClient.

```bash
npm i @tanstack/devtools-event-client
```

--------------------------------

### Install Vanilla JS Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the core Devtools package for use with any framework or without a framework.

```bash
npm install -D @tanstack/devtools
```

--------------------------------

### Install devtools-utils

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Install the `@tanstack/devtools-utils` package using npm.

```bash
npm install @tanstack/devtools-utils
```

--------------------------------

### Install Solid Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Solid-specific Devtools package and the optional Vite plugin for enhanced features.

```bash
npm install -D @tanstack/solid-devtools
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Vite Plugin Configuration Example

Source: https://tanstack.com/devtools/latest/docs/vite-plugin.md

Example of configuring the TanStack Devtools Vite plugin in your vite.config.js file. This shows basic setup and options.

```javascript
import devtools from "vite-plugin-solid-devtools";

export default {
  plugins: [
    devtools({
      // enabled: true, // enable/disable devtools
      // appendDevToolsScript: true, // inject devtools script into index.html
      // autoConnect: true, // auto connect to devtools
      // launchEditor: true, // enable 'go to source' feature
      // vite: {
      //   // vite specific options
      // }, 
    }),
  ],
};

```

--------------------------------

### Install TanStack Devtools

Source: https://tanstack.com/devtools/latest/docs/framework/react/basic-setup.md

Install the TanStack Devtools library using npm. This command installs the core devtools and framework-specific adapters.

```bash
npm i @tanstack/react-devtools
```

--------------------------------

### React App Setup with TanStack Query and Devtools

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/basic

This snippet shows the main App component setup, including QueryClientProvider, Context Provider, and the rendering of Post and Posts components. It also includes the root rendering logic.

```jsx
import { createRoot } from 'react-dom/client'
import { createContext, useContext, useState } from 'react'
import { createPortal } from 'react-dom'
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
  useQueryClient,
} from '@tanstack/react-query'
import Devtools from './setup'
import { queryPlugin } from './plugin'
import { Button } from './button'
import { Feature } from './feature'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

type Post = {
  id: number
  title: string
  body: string
}

function Posts({
  setPostId,
}: {
  setPostId: React.Dispatch<React.SetStateAction<number>>
}) {
  const queryClient = useQueryClient()
  const { status, data, error, isFetching } = usePosts()

  return (
    <div>
      <h1>Posts</h1>
      <div>
        {status === 'pending' ? (
          'Loading...'
        ) : status === 'error' ? (
          <span>Error: {error.message}</span>
        ) : (
          <>
            <div>
              {data.map((post) => (
                <p key={post.id}>
                  <a
                    onClick={() => setPostId(post.id)}
                    href="#"
                    style={
                      // We can access the query data here to show bold links for
                      // ones that are cached
                      queryClient.getQueryData(['post', post.id])
                        ? {
                            fontWeight: 'bold',
                            color: 'green',
                          }
                        : {}
                    }
                  >
                    {post.title}
                  </a>
                </p>
              ))}
            </div>
            <div>{isFetching ? 'Background Updating...' : ' '}
            </div>
          </>
        )}
      </div>
    </div>
  )
}

const getPostById = async (id: number): Promise<Post> => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`,
  )
  return await response.json()
}

function usePost(postId: number) {
  return useQuery({
    queryKey: ['post', postId],
    queryFn: () => getPostById(postId),
    enabled: !!postId,
  })
}

function Post({
  postId,
  setPostId,
}: {
  postId: number
  setPostId: React.Dispatch<React.SetStateAction<number>>
}) {
  const { status, data, error, isFetching } = usePost(postId)

  return (
    <div>
      <div>
        <a onClick={() => setPostId(-1)} href="#">
          Back
        </a>
      </div>
      {!postId || status === 'pending' ? (
        'Loading...'
      ) : status === 'error' ? (
        <span>Error: {error.message}</span>
      ) : (
        <>
          <h1>{data.title}</h1>
          <div>
            <p>{data.body}</p>
          </div>
          <div>{isFetching ? 'Background Updating...' : ' '}
          </div>
        </>
      )}
    </div>
  )
}
function usePosts() {
  return useQuery({
    queryKey: ['posts'],
    queryFn: async (): Promise<Array<Post>> => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
      return await response.json()
    },
  })
}

const Context = createContext<{ 
  count: number
  setCount: (count: number) => void
}>({ count: 0, setCount: () => {} })

setTimeout(() => {
  queryPlugin.emit('test', {
    title: 'Test Event',
    description:
      'This is a test event from the TanStack Query Devtools plugin.',
  })
}, 1000)

queryPlugin.on('test', (event) => {
  console.log('Received test event:', event)
})

function Mounted() {
  const c = useContext(Context)
  console.log(c)
  return (
    <p
      onClick={() => {
        c.setCount(c.count + 1)
      }}
    >
      {c.count}
      <hr />
    </p>
  )
}

function App() {
  const [state, setState] = useState(1)
  const [win, setWin] = useState<Window | null>(null)
  const [postId, setPostId] = useState(-1)
  return (
    <div>
      <Context.Provider value={{ count: state, setCount: setState }}>
        <QueryClientProvider client={queryClient}>
          <h1>TanStack Devtools React Basic Example</h1>
          current count: {state}
          <Button onClick={() => setState(state + 1)}>Click me</Button>
          <Button onClick={() => setWin(window.open('', '', 'popup'))}>
            Open Window
          </Button>
          {postId > -1 ? (
            <Post postId={postId} setPostId={setPostId} />
          ) : (
            <Posts setPostId={setPostId} />
          )}
          <Devtools />
        </QueryClientProvider>
      </Context.Provider>
    </div>
  )
}

const root = createRoot(document.getElementById('root')!)
root.render(<App />)

```

--------------------------------

### Install TanStack Devtools React

Source: https://tanstack.com/devtools/latest/docs/framework/react/adapter.md

Install the React adapter for TanStack Devtools using npm.

```sh
npm install @tanstack/react-devtools
```

--------------------------------

### Custom EventClient Implementation Example

Source: https://tanstack.com/devtools/latest/docs/configuration.md

Example of creating a custom EventClient with specific event map and configuration.

```tsx
import { EventClient } from '@tanstack/devtools-event-client'

type EventMap = {
  'custom-state': { state: string }
}

class customEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      debug: true,
      pluginId: 'custom-devtools',
    })
  }
}

```

--------------------------------

### Install Preact Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Preact-specific Devtools package and the optional Vite plugin for enhanced features.

```bash
npm install -D @tanstack/preact-devtools
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Install Solid Devtools and Vite Plugin

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Install the necessary packages for SolidJS development. This includes the Solid devtools and the Vite plugin.

```bash
npm install -D @tanstack/solid-devtools @tanstack/devtools-vite
```

--------------------------------

### Multiple Plugin Submission Example

Source: https://tanstack.com/devtools/latest/docs/third-party-plugins.md

Demonstrates how to submit multiple plugins for different frameworks within the same registry entry. This example includes both React and Solid versions of a Pacer devtools plugin.

```tsx
'@tanstack/react-pacer-devtools': {
  packageName: '@tanstack/react-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/react-pacer',
    minVersion: '0.16.4',
  },
  author: 'TanStack',
  framework: 'react',
  tags: ['TanStack'],
},
'@tanstack/solid-pacer-devtools': {
  packageName: '@tanstack/solid-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/solid-pacer',
    minVersion: '0.14.4',
  },
  author: 'TanStack',
  framework: 'solid',
  tags: ['TanStack'],
},
```

--------------------------------

### Install React Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the React-specific Devtools package and the optional Vite plugin for enhanced features.

```bash
npm install -D @tanstack/react-devtools
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Install Preact Devtools and Vite Plugin

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Install the necessary packages for Preact development. This includes the Preact devtools and the Vite plugin.

```bash
npm install -D @tanstack/preact-devtools @tanstack/devtools-vite
```

--------------------------------

### Example Plugin Registry Entry

Source: https://tanstack.com/devtools/latest/docs/third-party-plugins.md

This is an example of how a single plugin entry should be formatted in the plugin registry. It includes essential metadata like package name, title, description, and requirements.

```tsx
'@tanstack/react-pacer-devtools': {
  packageName: '@tanstack/react-pacer-devtools',
  title: 'Pacer Devtools',
  description: 'Monitor and debug your Pacer animations and transitions',
  requires: {
    packageName: '@tanstack/react-pacer',
    minVersion: '0.16.4',
  },
  author: 'TanStack',
  framework: 'react',
  tags: ['TanStack'],
},
```

--------------------------------

### Install Devtools for Production Builds

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the core Devtools package as a regular dependency if you need it in production builds. The Vite plugin is also shown.

```bash
npm install @tanstack/devtools
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Install Angular Devtools

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Install the TanStack Devtools package for Angular using npm.

```bash
npm install @tanstack/angular-devtools
```

--------------------------------

### Install Vue Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Vue-specific Devtools package. The Vite plugin is optional but recommended for advanced features.

```bash
npm install -D @tanstack/vue-devtools
```

--------------------------------

### Install Angular Devtools

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the Angular-specific Devtools package. The Vite plugin is optional but recommended for advanced features.

```bash
npm install -D @tanstack/angular-devtools
```

--------------------------------

### Install React Devtools and Vite Plugin

Source: https://tanstack.com/devtools/latest/docs/quick-start.md

Install the necessary packages for React development. This includes the React devtools and the Vite plugin for enhanced features.

```bash
npm install -D @tanstack/react-devtools @tanstack/devtools-vite
```

--------------------------------

### Conditional Devtools Import for Production

Source: https://tanstack.com/devtools/latest/docs/production.md

Manually exclude devtools from production builds in non-Vite projects by conditionally importing the devtools setup based on the `NODE_ENV` environment variable. This example demonstrates creating a separate setup file and conditionally importing it.

```tsx
// devtools-setup.tsx
import { TanStackDevtools } from '@tanstack/react-devtools'

export default function Devtools(){
  return <TanStackDevtools plugins={[ 
    // Add your custom plugins here
  ]} /> 
}

// App.tsx
const Devtools = process.env.NODE_ENV === 'development' ? await import('./devtools-setup') : () => null

function App() {
  return (
    <>
      <YourApp />
      <Devtools />
    </>
  )
}
```

--------------------------------

### React DevTools Integration Example

Source: https://tanstack.com/devtools/latest/docs/configuration.md

Example of integrating TanStackDevtools into a React application with custom configurations and plugins.

```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { FormDevtools } from '@tanstack/react-form'

import { TanStackDevtools } from '@tanstack/react-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools
      config={{ hideUntilHover: true }}
      eventBusConfig={{ debug: true }}
      plugins={[
        {
          name: 'TanStack Form',
          render: <FormDevtools />,
          defaultOpen: true,
        },
      ]}
    />
  </StrictMode>,
)

```

--------------------------------

### Plugin Name as Simple String

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Example of a plugin using a plain string for its name, displayed as a tab title.

```javascript
{ name: 'My Plugin', render: (el) => { /* ... */ } }
```

--------------------------------

### Example Debug Console Logs

Source: https://tanstack.com/devtools/latest/docs/framework/react/guides/custom-plugins.md

Illustrates the console output when debug mode is active for both the client event bus and a custom devtools plugin.

```text
🌴 [tanstack-devtools:client-bus] Initializing client event bus

🌴 [tanstack-devtools:custom-devtools-plugin] Registered event to bus custom-devtools:counter-state
```

--------------------------------

### Example: Adding a Custom Plugin to TanStack Devtools

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

Demonstrates how to initialize TanStack Devtools with a custom plugin. The plugin's render function is used to inject custom UI elements.

```typescript
const devtools = new TanStackDevtoolsCore({
  plugins: [
    {
      id: "your-plugin-id",
      name: "Your Plugin",
      render: (el) => {
        // Your render logic here
      },
    },
  ],
 })
```

--------------------------------

### Project Dependencies in package.json

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Lists the necessary dependencies for the React Accessibility DevTools example project, including React, TanStack DevTools, and the accessibility plugin.

```json
{ "name": "@tanstack/react-devtools-a11y-example", "private": true, "type": "module", "scripts": { "dev": "vite --port=3002", "build": "vite build", "preview": "vite preview", "test:types": "tsc" }, "dependencies": { "@tanstack/devtools-a11y": "^0.1.3", "@tanstack/react-devtools": "^0.10.5", "react": "^19.2.0", "react-dom": "^19.2.0" }, "devDependencies": { "@tanstack/devtools-vite": "0.7.0", "@types/react": "^19.2.0", "@types/react-dom": "^19.2.0", "@vitejs/plugin-react": "^6.0.1", "vite": "^8.0.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } 

```

--------------------------------

### React Usage Example with TanStackDevtools

Source: https://tanstack.com/devtools/latest/docs/framework/react/adapter.md

Demonstrates how to integrate the TanStackDevtools component into a React application. Includes configuration for position, hover behavior, server bus connection, and a custom plugin for TanStack Query devtools.

```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools
        config={{ position: 'bottom-right', hideUntilHover: true }}
        eventBusConfig={{ connectToServerBus: true }}
        plugins={[
          {
            name: 'TanStack Query',
            render: <ReactQueryDevtoolsPanel />,
            defaultOpen: true,
          },
        ]}
      />
    </>
  )
}
```

--------------------------------

### Proper Image with Alt Text

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Example of an image correctly implemented with an informative alt text attribute.

```html
<img src="/path/to/proper/image.png" alt="Description of the image" />
```

--------------------------------

### Manual Plugin Object Example

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Use manual plugin objects for one-off internal devtools panels. This approach avoids extra abstraction.

```tsx
// Manual approach -- fine for one-off panels
{
  name: 'App State',
  render: (el, theme) => <MyPanel theme={theme} />,
}
```

--------------------------------

### Setup Custom Event Client

Source: https://tanstack.com/devtools/latest/docs/framework/react/guides/custom-plugins.md

Configure a custom EventClient by defining an event map and specifying a unique plugin ID. This client will manage communication between your library and the devtools.

```tsx
import { EventClient } from '@tanstack/devtools-event-client'

type EventMap = {
  // The key is the event suffix only — the pluginId is prepended automatically by EventClient
  // The value is the expected type of the event payload
  'counter-state': { count: number, history: number[] }
}

class CustomEventClient extends EventClient<EventMap> {
  constructor() {
    super({
      // The pluginId is prepended to event map keys when emitting/listening
      pluginId: 'custom-devtools',
    })
  }
}

// This is where the magic happens, it'll be used throughout your application.
export const DevtoolsEventClient = new CustomEventClient()
```

--------------------------------

### Configure Inspect Hotkey

Source: https://tanstack.com/devtools/latest/docs/source-inspector.md

Customize the hotkey used to activate the source inspector overlay. This example shows how to set the hotkey to Shift+Alt+Ctrl or Shift+Alt+Meta.

```typescript
<TanStackDevtools
  config={{
    inspectHotkey: ['Shift', 'Alt', 'CtrlOrMeta'],
  }}
/>
```

--------------------------------

### Configure TanStack Devtools Plugins

Source: https://tanstack.com/devtools/latest/docs/plugin-configuration.md

Example of passing an array of plugin configurations to the `plugins` prop of the `TanStackDevtools` component. This snippet demonstrates how to include the FormDevtools plugin and set it to open by default.

```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { FormDevtools } from '@tanstack/react-form-devtools'

function App() {
  return (
    <>
      <YourApp />
      <TanStackDevtools
        plugins={[
          {
            name: 'TanStack Form',
            render: <FormDevtools />,
            defaultOpen: true,
          },
        ]}
      />
    </>
  )
}
```

--------------------------------

### Empty Heading

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Shows an example of an empty heading tag, which provides no semantic value and can confuse screen reader users.

```html
<h4>
```

--------------------------------

### Install Vue Devtools Vite Plugin

Source: https://tanstack.com/devtools/latest/docs/installation.md

Install the optional Vite plugin for Vue Devtools to enable features like source inspection and console piping.

```bash
npm install -D @tanstack/devtools-vite
```

--------------------------------

### Basic Plugin Render Function

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

A simple example of a plugin's render function that injects basic HTML content into its designated DOM element.

```javascript
render: (el, theme) => {
  el.innerHTML = `<div class="${theme}">Hello from my plugin!</div>`
}
```

--------------------------------

### EventClient Setup with Custom Events

Source: https://tanstack.com/devtools/latest/docs/architecture.md

Defines custom events for an EventClient and initializes it with a plugin ID. This client is used for sending and receiving typed events between different parts of the application.

```typescript
import { EventClient } from '@tanstack/devtools-event-client'

type MyEvents = {
  'state-update': { count: number }
  'reset': void
}

const client = new EventClient<MyEvents>({ pluginId: 'my-plugin' })
```

--------------------------------

### Plugin Name as Custom Function

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Example of a plugin using a function to customize its tab title, including dynamic styling based on theme.

```javascript
{
  name: (el, theme) => {
    el.innerHTML = `<span style="color: ${theme === 'dark' ? '#fff' : '#000'}">My Plugin</span>`
  },
  render: (el) => { /* ... */ }
}
```

--------------------------------

### Registering a Custom Plugin with TanStackDevtools

Source: https://tanstack.com/devtools/latest/docs/building-custom-plugins.md

This example shows how to register a custom plugin, 'Store Inspector', with the `TanStackDevtools` component by passing it in the `plugins` array. The `name` property is used as the tab title in the devtools sidebar.

```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'
import { StoreInspectorPanel } from './StoreInspectorPanel'

function App() {
  return (
    <>
      {/* Your app */}
      <TanStackDevtools
        plugins={[
          {
            name: 'Store Inspector',
            render: <StoreInspectorPanel />,
          },
        ]}
      />
    </>
  )
}
```

--------------------------------

### React Application Entry Point (index.tsx)

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Sets up the root React component and integrates TanStack DevTools along with the accessibility devtools plugin.

```tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { TanStackDevtools } from '@tanstack/react-devtools'
import { a11yDevtoolsPlugin } from '@tanstack/devtools-a11y/react'
import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <TanStackDevtools 
      initialIsOpen={false} 
      position="bottom"
      plugins={[
        a11yDevtoolsPlugin
      ]}
    />
  </StrictMode>,
)

```

--------------------------------

### Solid Plugin Integration

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Demonstrates defining a plugin in Solid and how the adapter uses the Portal component.

```tsx
// What you write:
<TanStackDevtools
  plugins={[{
    name: 'My Plugin',
    render: <MyPluginComponent />,
  }]}
/>

// What happens internally:
// The adapter wraps your component in:
//   <Portal mount={containerElement}>{yourComponent}</Portal>
```

--------------------------------

### Conditional Modal Rendering

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Example of conditionally rendering a modal component based on a state variable.

```javascript
{
  showModal && (
    <div className="modal">
      <h2>Modal Title</h2>
      <p>This is the modal content.</p>
      <button onClick={() => setShowModal(false)}>Close</button>
    </div>
  )
}
```

--------------------------------

### TanStackDevtoolsCore Constructor

Source: https://tanstack.com/devtools/latest/docs/reference/classes/tanstackdevtoolscore.md

Initializes a new instance of TanStackDevtoolsCore.

```APIDOC
## new TanStackDevtoolsCore()

### Description
Initializes a new instance of TanStackDevtoolsCore.

### Parameters
#### init
- **init** (TanStackDevtoolsInit) - Description of the init parameter.

### Returns
- **TanStackDevtoolsCore** - A new instance of TanStackDevtoolsCore.
```

--------------------------------

### Basic TanStackDevtools Integration

Source: https://tanstack.com/devtools/latest/docs/framework/react/basic-setup.md

Import and render the TanStackDevtools component in the root of your React application. This provides a basic setup for the devtools panel.

```tsx
import { TanStackDevtools } from '@tanstack/react-devtools'

import App from './App'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />

    <TanStackDevtools />
  </StrictMode>,
)
```

--------------------------------

### Create Solid Panel

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Use `createSolidPanel` to create a Solid devtools panel factory. It uses Solid's `createSignal` and lifecycle functions.

```typescript
import { createSolidPanel } from '@tanstack/devtools-utils/solid'

const [MyPanel, NoOpPanel] = createSolidPanel(MyDevtoolsCore)
```

--------------------------------

### TanStackDevtoolsInit Interface

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

This interface defines the initial configuration options for TanStack Devtools. It includes properties for general shell configuration, event bus settings, and an array of plugins.

```APIDOC
## Interface: TanStackDevtoolsInit

### Properties

#### config

- **config** (Partial<{
  customTrigger: (el, props) => void;
  defaultOpen: boolean;
  hideUntilHover: boolean;
  openHotkey: KeyboardKey[];
  panelLocation: "top" | "bottom";
  position: TriggerPosition;
  requireUrlFlag: boolean;
  theme: "light" | "dark";
  triggerHidden: boolean;
  urlFlag: string;
}>) - Optional

Configuration for the devtools shell. These configuration options are used to set the initial state of the devtools when it is started for the first time. Afterwards, the settings are persisted in local storage and changed through the settings panel.

#### eventBusConfig

- **eventBusConfig** (ClientEventBusConfig) - Optional

#### plugins

- **plugins** (TanStackDevtoolsPlugin[]) - Optional

Array of plugins to be used in the devtools. Each plugin has a `render` function that gives you the dom node to mount into.

Example:
```ts
 const devtools = new TanStackDevtoolsCore({
   plugins: [
     {
       id: "your-plugin-id",
       name: "Your Plugin",
       render: (el) => {
         // Your render logic here
       },
     },
   ],
 })
```
```

--------------------------------

### Basic React App with TanStack Query

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/basic

This is the main App component that sets up the QueryClientProvider, context, and renders various UI elements including buttons, features, and post listings. It demonstrates basic state management and conditional rendering.

```tsx
import { createRoot } from 'react-dom/client'
import { createContext, useContext, useState } from 'react'
import { createPortal } from 'react-dom'
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
  useQueryClient,
} from '@tanstack/react-query'
import Devtools from './setup'
import { queryPlugin } from './plugin'
import { Button } from './button'
import { Feature } from './feature'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
})

type Post = {
  id: number
  title: string
  body: string
}

function Posts({
  setPostId,
}: {
  setPostId: React.Dispatch<React.SetStateAction<number>>
}) {
  const queryClient = useQueryClient()
  const { status, data, error, isFetching } = usePosts()

  return (
    <div>
      <h1>Posts</h1>
      <div>
        {status === 'pending' ? (
          'Loading...'
        ) : status === 'error' ? (
          <span>Error: {error.message}</span>
        ) : (
          <>
            <div>
              {data.map((post) => (
                <p key={post.id}>
                  <a
                    onClick={() => setPostId(post.id)}
                    href="#"
                    style={
                      // We can access the query data here to show bold links for
                      // ones that are cached
                      queryClient.getQueryData(['post', post.id])
                        ? {
                            fontWeight: 'bold',
                            color: 'green',
                          }
                        : {}
                    }
                  >
                    {post.title}
                  </a>
                </p>
              ))}
            </div>
            <div>{isFetching ? 'Background Updating...' : ' '}
            </div>
          </>
        )}
      </div>
    </div>
  )
}

const getPostById = async (id: number): Promise<Post> => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/posts/${id}`,
  )
  return await response.json()
}

function usePost(postId: number) {
  return useQuery({
    queryKey: ['post', postId],
    queryFn: () => getPostById(postId),
    enabled: !!postId,
  })
}

function Post({
  postId,
  setPostId,
}: {
  postId: number
  setPostId: React.Dispatch<React.SetStateAction<number>>
}) {
  const { status, data, error, isFetching } = usePost(postId)

  return (
    <div>
      <div>
        <a onClick={() => setPostId(-1)} href="#">
          Back
        </a>
      </div>
      {!postId || status === 'pending' ? (
        'Loading...'
      ) : status === 'error' ? (
        <span>Error: {error.message}</span>
      ) : (
        <>
          <h1>{data.title}</h1>
          <div>
            <p>{data.body}</p>
          </div>
          <div>{isFetching ? 'Background Updating...' : ' '}
          </div>
        </>
      )}
    </div>
  )
}
function usePosts() {
  return useQuery({
    queryKey: ['posts'],
    queryFn: async (): Promise<Array<Post>> => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
      return await response.json()
    },
  })
}

const Context = createContext<{ 
  count: number
  setCount: (count: number) => void
}>({ count: 0, setCount: () => {} })

setTimeout(() => {
  queryPlugin.emit('test', {
    title: 'Test Event',
    description:
      'This is a test event from the TanStack Query Devtools plugin.',
  })
}, 1000)

queryPlugin.on('test', (event) => {
  console.log('Received test event:', event)
})

function Mounted() {
  const c = useContext(Context)
  console.log(c)
  return (
    <p
      onClick={() => {
        c.setCount(c.count + 1)
      }}
    >
      {c.count}
      <hr />
    </p>
  )
}

function App() {
  const [state, setState] = useState(1)
  const [win, setWin] = useState<Window | null>(null)
  const [postId, setPostId] = useState(-1)
  return (
    <div>
      <Context.Provider value={{ count: state, setCount: setState }}>
        <QueryClientProvider client={queryClient}>
          <h1>TanStack Devtools React Basic Example</h1>
          current count: {state}
          <Button onClick={() => setState(state + 1)}>Click me</Button>
          <Button onClick={() => setWin(window.open('', '', 'popup'))}>
            Click me to open new window
          </Button>
          {win && createPortal(<Mounted />, win.document.body)}
          <Feature />
          <p>
            As you visit the posts below, you will notice them in a loading
            state the first time you load them. However, after you return to

```

--------------------------------

### Vite Configuration for React Devtools

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Configure Vite to include TanStack Devtools and React plugins. This setup is essential for enabling the devtools in your React project.

```typescript
import react from '@vitejs/plugin-react' 
import { defineConfig } from 'vite' 
import { devtools } from '@tanstack/devtools-vite' 

export default defineConfig({
  plugins: [
    devtools(), 
    react(),
  ],
})
```

--------------------------------

### Basic React App with TanStack Query

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/basic

This snippet shows the root component of a React application configured with TanStack Query. It includes setting up the QueryClientProvider, rendering child components like Posts, Post, and Devtools, and the root element creation and rendering.

```jsx
import React, { useState, createContext } from 'react'
import { createRoot } from 'react-dom/client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import { Posts } from './posts'
import { Post } from './post'

const Context = createContext<any>(null)

function App() {
  const queryClient = new QueryClient()
  const [postId, setPostId] = useState<number>(-1)
  const [win, setWin] = useState<Window | null>(null)

  return (
    <Context.Provider value={{}}>
      <QueryClientProvider client={queryClient}>
        <Devtools />
        <p>
          As you visit the posts below, you will notice them in a loading
          state the first time you load them. However, after you return to
          this list and click on any posts you have already visited again, you
          will see them load instantly and background refresh right before
          your eyes!{' '}
          <strong>
            (You may need to throttle your network speed to simulate longer
            loading sequences)
          </strong>
        </p>
        {postId > -1 ? (
          <Post postId={postId} setPostId={setPostId} />
        ) : (
          <Posts setPostId={setPostId} />
        )}
      </QueryClientProvider>
    </Context.Provider>
  )
}

const root = createRoot(document.getElementById('root')!)
root.render(<App />)

```

--------------------------------

### React/Preact Plugin Integration

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

Shows how to define a plugin using JSX in React/Preact and how the adapter uses createPortal internally.

```tsx
// What you write:
<TanStackDevtools
  plugins={[{
    name: 'My Plugin',
    render: <MyPluginComponent />,
  }]}
/>

// What happens internally:
// The adapter's render function calls:
//   createPortal(<MyPluginComponent />, containerElement)
```

--------------------------------

### TanStackDevtoolsInit Configuration Options

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

Defines the initial configuration for the TanStack Devtools shell. These settings control aspects like custom triggers, default open state, hotkeys, panel location, and theme. Subsequent changes are persisted in local storage.

```typescript
optional config: Partial<{
  customTrigger: (el, props) => void;
  defaultOpen: boolean;
  hideUntilHover: boolean;
  openHotkey: KeyboardKey[];
  panelLocation: "top" | "bottom";
  position: TriggerPosition;
  requireUrlFlag: boolean;
  theme: "light" | "dark";
  triggerHidden: boolean;
  urlFlag: string;
}>;
```

--------------------------------

### mount()

Source: https://tanstack.com/devtools/latest/docs/reference/classes/tanstackdevtoolscore.md

Mounts the devtools to a specified HTML element.

```APIDOC
## mount<T>(el: T)

### Description
Mounts the devtools to a specified HTML element.

### Type Parameters
- **T**: Extends `HTMLElement`

### Parameters
#### el
- **el** (T) - The HTML element to mount the devtools to.

### Returns
- **void**
```

--------------------------------

### Proper Button with Label

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

Demonstrates a button that has a clear and accessible name, making its function understandable.

```html
<button>Close</button>
```

--------------------------------

### React Root Route Configuration

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/start

This snippet shows the configuration of the root route in a React application, including head content and shell component setup. It integrates TanStack Router and Devtools.

```typescript
import * as React from 'react'
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'

import { TanStackDevtools } from '@tanstack/react-devtools'

import Header from '../components/Header'
import { RouteNavigationPanel } from '../devtools'

import appCss from '../styles.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [
      {
        rel: 'stylesheet',
        href: appCss,
      },
    ],
  }),

  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  console.log('Rendering Root Document')
  const plugins = [
    {
      name: 'Tanstack Router',
      render: <TanStackRouterDevtoolsPanel />,
    },
    {
      id: 'route-navigation',
      name: 'Route Navigation',
      render: <RouteNavigationPanel />,
    },
  ]

  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Header />
        {children}
        <TanStackDevtools
          config={{
            position: 'bottom-right',
          }}
          plugins={plugins}
        />
        <Scripts />
      </body>
    </html>
  )
}
```

--------------------------------

### App Component with Modal State

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

This React component sets up the state for controlling the visibility of a modal dialog. It's the parent component for the modal example, demonstrating state management for UI elements.

```tsx
import { useState } from 'react' /** * Example app with intentional accessibility issues for testing the A11y devtools plugin */ export default function App() { const [showModal, setShowModal] = useState(false) return (

```

--------------------------------

### Framework Adapter Integration Flow

Source: https://tanstack.com/devtools/latest/docs/plugin-lifecycle.md

A diagram showing how a plugin component within a framework runtime renders into the devtools core's container via portals or teleports.

```mermaid
graph LR
    subgraph fw["Your Framework Runtime"]
        comp["Your Plugin Component<br/><i>Full reactivity, hooks, signals</i>"]
    end
    subgraph core["Devtools Core (Solid.js)"]
        container["Plugin Container<br/>&lt;div id='plugin-container-{id}'&gt;"]
    end
    comp -- "Portal / Teleport" --> container
```

--------------------------------

### Create Solid Plugin

Source: https://tanstack.com/devtools/latest/docs/devtools-utils.md

Use `createSolidPlugin` to create a Solid devtools plugin. It accepts an options object with `name`, `id`, `defaultOpen`, and a `Component` prop.

```typescript
function createSolidPlugin(options: {
  name: string
  id?: string
  defaultOpen?: boolean
  Component: (props: DevtoolsPanelProps) => JSX.Element
}): readonly [Plugin, NoOpPlugin]
```

```tsx
import { createSolidPlugin } from '@tanstack/devtools-utils/solid'

const [MyPlugin, NoOpPlugin] = createSolidPlugin({
  name: 'My Store',
  id: 'my-store',
  Component: (props) => <MyStorePanel theme={props.theme} />,
})
```

--------------------------------

### TanStackDevtoolsInit Plugins Configuration

Source: https://tanstack.com/devtools/latest/docs/reference/interfaces/tanstackdevtoolsinit.md

Optional configuration for plugins to be used with TanStack Devtools. Each plugin must have a render function to mount its DOM node.

```typescript
optional plugins: TanStackDevtoolsPlugin[];
```

--------------------------------

### React App with Accessibility Issues

Source: https://tanstack.com/devtools/latest/docs/framework/react/examples/a11y-devtools

This React component demonstrates various accessibility issues for testing the A11y devtools plugin. It includes examples of missing alt text, inaccessible buttons, unlabeled inputs, low color contrast, and more.

```tsx
import { useState } from 'react'

/**
 * Example app with intentional accessibility issues for testing the A11y devtools plugin
 */
export default function App() {
  const [showModal, setShowModal] = useState(false)

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1>A11y Devtools Demo</h1>
      <p>
        This page contains intentional accessibility issues to demonstrate the
        A11y devtools plugin. Open the devtools panel and click "Run Audit" to
        see the issues.
      </p>

      <section style={{ marginTop: '24px' }}>
        <h2>Accessibility Issues Demo</h2>

        {/* Issue: Image without alt text */}
        <div style={{ marginBottom: '16px' }}>
          <h3>1. Image without alt text</h3>
          <img
            src="https://via.placeholder.com/150"
            width={150}
            height={150}
            style={{ border: '1px solid #ccc' }}
          />
        </div>

        {/* Issue: Button without accessible name */}
        <div style={{ marginBottom: '16px' }}>
          <h3>2. Button without accessible name</h3>
          <button style={{ width: '40px', height: '40px', fontSize: '20px' }}>
            <span aria-hidden="true">×</span>
          </button>
        </div>

        {/* Issue: Form input without label */}
        <div style={{ marginBottom: '16px' }}>
          <h3>3. Form input without label</h3>
          <input
            type="text"
            placeholder="Enter your name"
            style={{ padding: '8px' }}
          />
        </div>

        {/* Issue: Low color contrast */}
        <div style={{ marginBottom: '16px' }}>
          <h3>4. Low color contrast</h3>
          <p style={{ color: '#aaa', backgroundColor: '#fff' }}>
            This text has poor color contrast and may be hard to read.
          </p>
        </div>

        {/* Issue: Link without discernible text */}
        <div style={{ marginBottom: '16px' }}>
          <h3>5. Link without discernible text</h3>
          <a href="https://example.com" style={{ display: 'inline-block' }}>
            <img src="https://via.placeholder.com/24" width={24} height={24} />
          </a>
        </div>

        {/* Issue: Missing main landmark */}
        <div style={{ marginBottom: '16px' }}>
          <h3>6. Click handler on non-interactive element</h3>
          <div
            onClick={() => setShowModal(true)}
            style={{
              padding: '12px 24px',
              backgroundColor: '#0ea5e9',
              color: 'white',
              borderRadius: '4px',
              display: 'inline-block',
              cursor: 'pointer',
            }}>
            Click me (not a button!)
          </div>
        </div>

        {/* Issue: Empty heading */}
        <div style={{ marginBottom: '16px' }}>
          <h3>7. Empty heading</h3>
          <h4></h4>
        </div>

        {/* Issue: Missing form labels */}
        <div style={{ marginBottom: '16px' }}>
          <h3>8. Select without label</h3>
          <select style={{ padding: '8px' }}>
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
        </div>
      </section>

      <section
        style={{
          marginTop: '32px',
          padding: '16px',
          backgroundColor: '#f5f5f5',
          borderRadius: '8px',
        }}>
        <h2>Accessible Content (for comparison)</h2>

        <div style={{ marginBottom: '16px' }}>
          <h3>Proper image with alt text</h3>
          <img
            src="https://via.placeholder.com/150"
            alt="Placeholder image for demonstration"
            width={150}
            height={150}
            style={{ border: '1px solid #ccc' }}
          />
        </div>

        <div style={{ marginBottom: '16px' }}>
          <h3>Proper button with label</h3>
          <button
            aria-label="Close dialog"
            style={{ width: '40px', height: '40px', fontSize: '20px' }}>
            <span aria-hidden="true">×</span>
          </button>
        </div>

        <div style={{ marginBottom: '16px' }}>
          <h3>Proper input with label</h3>
          <label
            htmlFor="name-input"
            style={{ display: 'block', marginBottom: '4px' }}>
            Your Name
          </label>
          <input id="name-input" type="text" style={{ padding: '8px' }} />
        </div>
      </section>

      {showModal && (
        <div
          role="dialog"
          aria-labelledby="modal-title"
          style={{
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            backgroundColor: 'white',
          }}>
          {/* Modal content would go here */}
        </div>
      )}
    </div>
  )
}

```