[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-devtools-framework-adapters":3,"mdc--w5xhje-key":42,"related-org-tanstack-devtools-framework-adapters":3465,"related-repo-tanstack-devtools-framework-adapters":3609},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":29,"repoUrl":30,"updatedAt":31,"license":32,"forks":33,"topics":34,"repo":37,"sourceUrl":40,"mdContent":41},"devtools-framework-adapters","create framework adapters for devtools","Use devtools-utils factory functions to create per-framework plugin adapters. createReactPlugin\u002FcreateSolidPlugin\u002FcreateVuePlugin\u002FcreatePreactPlugin, createReactPanel\u002FcreateSolidPanel\u002FcreateVuePanel\u002FcreatePreactPanel. [Plugin, NoOpPlugin] tuple for tree-shaking. DevtoolsPanelProps (theme). Vue uses (name, component) not options object. Solid render must be function.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},"tanstack","TanStack","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Ftanstack.png",[12,16,19,22,25,28],{"name":13,"slug":14,"type":15},"React","react","tag",{"name":17,"slug":18,"type":15},"Vue","vue",{"name":20,"slug":21,"type":15},"SolidJS","solidjs",{"name":23,"slug":24,"type":15},"Engineering","engineering",{"name":26,"slug":27,"type":15},"Preact","preact",{"name":9,"slug":8,"type":15},476,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Fdevtools","2026-07-16T06:04:33.553047",null,92,[35,36,14,21],"devtool","devtools",{"repoUrl":30,"stars":29,"forks":33,"topics":38,"description":39},[35,36,14,21],"🤖 Framework-agnostic devtools panel for handling TanStack libraries devtools and your custom devtool plugins","https:\u002F\u002Fgithub.com\u002FTanStack\u002Fdevtools\u002Ftree\u002FHEAD\u002Fpackages\u002Fdevtools-utils\u002Fskills\u002Fdevtools-framework-adapters","---\nname: devtools-framework-adapters\ndescription: >\n  Use devtools-utils factory functions to create per-framework plugin adapters.\n  createReactPlugin\u002FcreateSolidPlugin\u002FcreateVuePlugin\u002FcreatePreactPlugin,\n  createReactPanel\u002FcreateSolidPanel\u002FcreateVuePanel\u002FcreatePreactPanel.\n  [Plugin, NoOpPlugin] tuple for tree-shaking. DevtoolsPanelProps (theme).\n  Vue uses (name, component) not options object. Solid render must be function.\ntype: framework\nlibrary: tanstack-devtools\nlibrary_version: '0.10.12'\nrequires:\n  - tanstack-devtools\u002Fplugin-panel\nsources:\n  - 'TanStack\u002Fdevtools:docs\u002Fdevtools-utils.md'\n  - 'TanStack\u002Fdevtools:packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fplugin.tsx'\n  - 'TanStack\u002Fdevtools:packages\u002Fdevtools-utils\u002Fsrc\u002Fvue\u002Fplugin.ts'\n  - 'TanStack\u002Fdevtools:packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fplugin.tsx'\n  - 'TanStack\u002Fdevtools:packages\u002Fdevtools-utils\u002Fsrc\u002Fpreact\u002Fplugin.tsx'\n---\n\nUse `@tanstack\u002Fdevtools-utils` factory functions to create per-framework devtools plugin adapters. Each framework has a subpath export (`\u002Freact`, `\u002Fvue`, `\u002Fsolid`, `\u002Fpreact`) with two factories:\n\n1. **`createXPlugin`** -- wraps a component into a `[Plugin, NoOpPlugin]` tuple for tree-shaking.\n2. **`createXPanel`** -- wraps a class-based devtools core (`mount`\u002F`unmount`) into a `[Panel, NoOpPanel]` component tuple.\n\n## Key Source Files\n\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fplugin.tsx` -- createReactPlugin\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fpanel.tsx` -- createReactPanel, DevtoolsPanelProps\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Fvue\u002Fplugin.ts` -- createVuePlugin (different API)\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Fvue\u002Fpanel.ts` -- createVuePanel, DevtoolsPanelProps (includes 'system' theme)\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fplugin.tsx` -- createSolidPlugin\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fpanel.tsx` -- createSolidPanel\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fclass.ts` -- constructCoreClass (Solid-specific)\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Fpreact\u002Fplugin.tsx` -- createPreactPlugin\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Fpreact\u002Fpanel.tsx` -- createPreactPanel\n\n## Shared Pattern\n\nAll four frameworks follow the same two-factory pattern:\n\n### Plugin Factory\n\nEvery `createXPlugin` returns `readonly [Plugin, NoOpPlugin]`:\n\n- **Plugin** -- returns a plugin object with metadata and a `render` function that renders your component.\n- **NoOpPlugin** -- returns a plugin object with the same metadata but renders an empty fragment.\n\n### Panel Factory\n\nEvery `createXPanel` returns `readonly [Panel, NoOpPanel]`:\n\n- **Panel** -- a framework component that creates a `\u003Cdiv style=\"height:100%\">`, instantiates the core class, calls `core.mount(el, theme)` on mount, and `core.unmount()` on cleanup.\n- **NoOpPanel** -- renders an empty fragment.\n\n### DevtoolsPanelProps\n\n```ts\n\u002F\u002F React, Solid, Preact\ninterface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n\u002F\u002F Vue (note: includes 'system')\ninterface DevtoolsPanelProps {\n  theme?: 'dark' | 'light' | 'system'\n}\n```\n\nImport from the framework subpath:\n\n```ts\nimport type { DevtoolsPanelProps } from '@tanstack\u002Fdevtools-utils\u002Freact'\nimport type { DevtoolsPanelProps } from '@tanstack\u002Fdevtools-utils\u002Fvue'\nimport type { DevtoolsPanelProps } from '@tanstack\u002Fdevtools-utils\u002Fsolid'\nimport type { DevtoolsPanelProps } from '@tanstack\u002Fdevtools-utils\u002Fpreact'\n```\n\n## Primary Example (React)\n\n```tsx\nimport { createReactPlugin } from '@tanstack\u002Fdevtools-utils\u002Freact'\n\nfunction MyStorePanel({ theme }: { theme?: 'light' | 'dark' }) {\n  return \u003Cdiv className={theme}>My Store Devtools\u003C\u002Fdiv>\n}\n\nconst [MyPlugin, NoOpPlugin] = createReactPlugin({\n  name: 'My Store',\n  id: 'my-store',\n  defaultOpen: false,\n  Component: MyStorePanel,\n})\n\n\u002F\u002F Tree-shaking: use NoOp in production\nconst ActivePlugin =\n  process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin\n```\n\n### With Class-Based Panel\n\n```tsx\nimport {\n  createReactPanel,\n  createReactPlugin,\n} from '@tanstack\u002Fdevtools-utils\u002Freact'\n\nclass MyDevtoolsCore {\n  mount(el: HTMLElement, theme: 'light' | 'dark') {\n    \u002F* render into el *\u002F\n  }\n  unmount() {\n    \u002F* cleanup *\u002F\n  }\n}\n\nconst [MyPanel, NoOpPanel] = createReactPanel(MyDevtoolsCore)\n\nconst [MyPlugin, NoOpPlugin] = createReactPlugin({\n  name: 'My Store',\n  Component: MyPanel,\n})\n```\n\n## Framework API Differences\n\n### React & Preact -- Options Object\n\n```ts\ncreateReactPlugin({ name, id?, defaultOpen?, Component })  \u002F\u002F => [Plugin, NoOpPlugin]\ncreatePreactPlugin({ name, id?, defaultOpen?, Component }) \u002F\u002F => [Plugin, NoOpPlugin]\n```\n\n- `Component` receives `DevtoolsPanelProps` (with `theme`).\n- `Plugin()` returns `{ name, id?, defaultOpen?, render(el, theme) }`.\n- Preact is identical to React but uses Preact JSX types and `preact\u002Fhooks`.\n\n### Vue -- Positional Arguments, NOT Options Object\n\n```ts\ncreateVuePlugin(name: string, component: DefineComponent) \u002F\u002F => [Plugin, NoOpPlugin]\n```\n\n- Takes `(name, component)` as separate arguments, NOT an options object.\n- `Plugin(props)` returns `{ name, component, props }` -- it passes props through.\n- `NoOpPlugin(props)` returns `{ name, component: Fragment, props }`.\n- Vue's `DevtoolsPanelProps.theme` also accepts `'system'`.\n\n### Solid -- Same API as React, Different Internals\n\n```ts\ncreateSolidPlugin({ name, id?, defaultOpen?, Component }) \u002F\u002F => [Plugin, NoOpPlugin]\n```\n\n- Same options-object API as React.\n- `Component` must be a Solid component function `(props: DevtoolsPanelProps) => JSX.Element`.\n- The render function internally returns `\u003CComponent theme={theme} \u002F>` -- Solid handles reactivity.\n- Solid also exports `constructCoreClass` from `@tanstack\u002Fdevtools-utils\u002Fsolid\u002Fclass` for building lazy-loaded devtools cores.\n\n## Common Mistakes\n\n### CRITICAL: Using React JSX Pattern in Vue Adapter\n\nVue uses positional `(name, component)` arguments, NOT an options object.\n\n```ts\n\u002F\u002F WRONG -- will fail at compile time or produce garbage at runtime\nconst [MyPlugin, NoOpPlugin] = createVuePlugin({\n  name: 'My Plugin',\n  Component: MyPanel,\n})\n\n\u002F\u002F CORRECT\nconst [MyPlugin, NoOpPlugin] = createVuePlugin('My Plugin', MyPanel)\n```\n\nVue plugins also work differently at call time -- you pass props:\n\n```ts\n\u002F\u002F WRONG -- calling Plugin() with no args (React pattern)\nconst plugin = MyPlugin()\n\n\u002F\u002F CORRECT -- Vue Plugin takes props\nconst plugin = MyPlugin({ theme: 'dark' })\n```\n\n### CRITICAL: Solid Render Prop Not Wrapped in Function\n\nWhen using Solid components, `Component` must be a function reference, not raw JSX.\n\n```tsx\n\u002F\u002F WRONG -- evaluates immediately, breaks Solid reactivity\ncreateSolidPlugin({\n  name: 'My Store',\n  Component: \u003CMyPanel \u002F>, \u002F\u002F This is JSX.Element, not a component function\n})\n\n\u002F\u002F CORRECT -- pass the component function itself\ncreateSolidPlugin({\n  name: 'My Store',\n  Component: (props) => \u003CMyPanel theme={props.theme} \u002F>,\n})\n\n\u002F\u002F ALSO CORRECT -- pass the component reference directly\ncreateSolidPlugin({\n  name: 'My Store',\n  Component: MyPanel,\n})\n```\n\n### HIGH: Ignoring NoOp Variant for Production\n\nThe factory returns `[Plugin, NoOpPlugin]`. Both must be destructured and used for proper tree-shaking.\n\n```tsx\n\u002F\u002F WRONG -- NoOp variant discarded, devtools code ships to production\nconst [MyPlugin] = createReactPlugin({ name: 'Store', Component: MyPanel })\n\n\u002F\u002F CORRECT -- conditionally use NoOp in production\nconst [MyPlugin, NoOpPlugin] = createReactPlugin({\n  name: 'Store',\n  Component: MyPanel,\n})\nconst ActivePlugin =\n  process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin\n```\n\n### MEDIUM: Not Passing Theme Prop to Panel Component\n\n`DevtoolsPanelProps` includes `theme`. The devtools shell passes it so panels can match light\u002Fdark mode. If your component ignores it, the panel will not adapt to theme changes.\n\n```tsx\n\u002F\u002F WRONG -- theme is ignored\nconst Component = () => \u003Cdiv>My Panel\u003C\u002Fdiv>\n\n\u002F\u002F CORRECT -- use theme for styling\nconst Component = ({ theme }: DevtoolsPanelProps) => (\n  \u003Cdiv className={theme === 'dark' ? 'dark-mode' : 'light-mode'}>My Panel\u003C\u002Fdiv>\n)\n```\n\n## Design Tension\n\nThe core architecture is framework-agnostic, but each framework has different idioms:\n\n- React\u002FPreact use an options object with `Component` as a JSX function component.\n- Vue uses positional arguments with a `DefineComponent` and passes props through.\n- Solid uses the same options API as React but with Solid's JSX and reactivity model.\n\nAgents trained on React patterns will get Vue wrong. Always check the import path to determine which factory API to use.\n\n## Cross-References\n\n- **devtools-plugin-panel** -- Build your panel component first, then wrap it with the appropriate framework adapter.\n- **devtools-production** -- NoOp variants are the primary mechanism for stripping devtools from production bundles.\n\n## Reference Files\n\n- `references\u002Freact.md` -- Full React factory API and examples\n- `references\u002Fvue.md` -- Full Vue factory API and examples (different from React)\n- `references\u002Fsolid.md` -- Full Solid factory API and examples\n- `references\u002Fpreact.md` -- Full Preact factory API and examples\n",{"data":43,"body":55},{"name":4,"description":6,"type":44,"library":45,"library_version":46,"requires":47,"sources":49},"framework","tanstack-devtools","0.10.12",[48],"tanstack-devtools\u002Fplugin-panel",[50,51,52,53,54],"TanStack\u002Fdevtools:docs\u002Fdevtools-utils.md","TanStack\u002Fdevtools:packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fplugin.tsx","TanStack\u002Fdevtools:packages\u002Fdevtools-utils\u002Fsrc\u002Fvue\u002Fplugin.ts","TanStack\u002Fdevtools:packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fplugin.tsx","TanStack\u002Fdevtools:packages\u002Fdevtools-utils\u002Fsrc\u002Fpreact\u002Fplugin.tsx",{"type":56,"children":57},"root",[58,105,171,178,281,287,292,299,319,350,356,373,420,426,630,635,809,815,1286,1292,1673,1679,1685,1812,1869,1875,1908,1979,1985,2048,2107,2113,2119,2131,2323,2328,2440,2446,2458,2773,2779,2791,3073,3079,3096,3328,3334,3339,3372,3377,3383,3406,3412,3459],{"type":59,"tag":60,"props":61,"children":62},"element","p",{},[63,66,73,75,81,83,89,90,96,97,103],{"type":64,"value":65},"text","Use ",{"type":59,"tag":67,"props":68,"children":70},"code",{"className":69},[],[71],{"type":64,"value":72},"@tanstack\u002Fdevtools-utils",{"type":64,"value":74}," factory functions to create per-framework devtools plugin adapters. Each framework has a subpath export (",{"type":59,"tag":67,"props":76,"children":78},{"className":77},[],[79],{"type":64,"value":80},"\u002Freact",{"type":64,"value":82},", ",{"type":59,"tag":67,"props":84,"children":86},{"className":85},[],[87],{"type":64,"value":88},"\u002Fvue",{"type":64,"value":82},{"type":59,"tag":67,"props":91,"children":93},{"className":92},[],[94],{"type":64,"value":95},"\u002Fsolid",{"type":64,"value":82},{"type":59,"tag":67,"props":98,"children":100},{"className":99},[],[101],{"type":64,"value":102},"\u002Fpreact",{"type":64,"value":104},") with two factories:",{"type":59,"tag":106,"props":107,"children":108},"ol",{},[109,133],{"type":59,"tag":110,"props":111,"children":112},"li",{},[113,123,125,131],{"type":59,"tag":114,"props":115,"children":116},"strong",{},[117],{"type":59,"tag":67,"props":118,"children":120},{"className":119},[],[121],{"type":64,"value":122},"createXPlugin",{"type":64,"value":124}," -- wraps a component into a ",{"type":59,"tag":67,"props":126,"children":128},{"className":127},[],[129],{"type":64,"value":130},"[Plugin, NoOpPlugin]",{"type":64,"value":132}," tuple for tree-shaking.",{"type":59,"tag":110,"props":134,"children":135},{},[136,145,147,153,155,161,163,169],{"type":59,"tag":114,"props":137,"children":138},{},[139],{"type":59,"tag":67,"props":140,"children":142},{"className":141},[],[143],{"type":64,"value":144},"createXPanel",{"type":64,"value":146}," -- wraps a class-based devtools core (",{"type":59,"tag":67,"props":148,"children":150},{"className":149},[],[151],{"type":64,"value":152},"mount",{"type":64,"value":154},"\u002F",{"type":59,"tag":67,"props":156,"children":158},{"className":157},[],[159],{"type":64,"value":160},"unmount",{"type":64,"value":162},") into a ",{"type":59,"tag":67,"props":164,"children":166},{"className":165},[],[167],{"type":64,"value":168},"[Panel, NoOpPanel]",{"type":64,"value":170}," component tuple.",{"type":59,"tag":172,"props":173,"children":175},"h2",{"id":174},"key-source-files",[176],{"type":64,"value":177},"Key Source Files",{"type":59,"tag":179,"props":180,"children":181},"ul",{},[182,193,204,215,226,237,248,259,270],{"type":59,"tag":110,"props":183,"children":184},{},[185,191],{"type":59,"tag":67,"props":186,"children":188},{"className":187},[],[189],{"type":64,"value":190},"packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fplugin.tsx",{"type":64,"value":192}," -- createReactPlugin",{"type":59,"tag":110,"props":194,"children":195},{},[196,202],{"type":59,"tag":67,"props":197,"children":199},{"className":198},[],[200],{"type":64,"value":201},"packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fpanel.tsx",{"type":64,"value":203}," -- createReactPanel, DevtoolsPanelProps",{"type":59,"tag":110,"props":205,"children":206},{},[207,213],{"type":59,"tag":67,"props":208,"children":210},{"className":209},[],[211],{"type":64,"value":212},"packages\u002Fdevtools-utils\u002Fsrc\u002Fvue\u002Fplugin.ts",{"type":64,"value":214}," -- createVuePlugin (different API)",{"type":59,"tag":110,"props":216,"children":217},{},[218,224],{"type":59,"tag":67,"props":219,"children":221},{"className":220},[],[222],{"type":64,"value":223},"packages\u002Fdevtools-utils\u002Fsrc\u002Fvue\u002Fpanel.ts",{"type":64,"value":225}," -- createVuePanel, DevtoolsPanelProps (includes 'system' theme)",{"type":59,"tag":110,"props":227,"children":228},{},[229,235],{"type":59,"tag":67,"props":230,"children":232},{"className":231},[],[233],{"type":64,"value":234},"packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fplugin.tsx",{"type":64,"value":236}," -- createSolidPlugin",{"type":59,"tag":110,"props":238,"children":239},{},[240,246],{"type":59,"tag":67,"props":241,"children":243},{"className":242},[],[244],{"type":64,"value":245},"packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fpanel.tsx",{"type":64,"value":247}," -- createSolidPanel",{"type":59,"tag":110,"props":249,"children":250},{},[251,257],{"type":59,"tag":67,"props":252,"children":254},{"className":253},[],[255],{"type":64,"value":256},"packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fclass.ts",{"type":64,"value":258}," -- constructCoreClass (Solid-specific)",{"type":59,"tag":110,"props":260,"children":261},{},[262,268],{"type":59,"tag":67,"props":263,"children":265},{"className":264},[],[266],{"type":64,"value":267},"packages\u002Fdevtools-utils\u002Fsrc\u002Fpreact\u002Fplugin.tsx",{"type":64,"value":269}," -- createPreactPlugin",{"type":59,"tag":110,"props":271,"children":272},{},[273,279],{"type":59,"tag":67,"props":274,"children":276},{"className":275},[],[277],{"type":64,"value":278},"packages\u002Fdevtools-utils\u002Fsrc\u002Fpreact\u002Fpanel.tsx",{"type":64,"value":280}," -- createPreactPanel",{"type":59,"tag":172,"props":282,"children":284},{"id":283},"shared-pattern",[285],{"type":64,"value":286},"Shared Pattern",{"type":59,"tag":60,"props":288,"children":289},{},[290],{"type":64,"value":291},"All four frameworks follow the same two-factory pattern:",{"type":59,"tag":293,"props":294,"children":296},"h3",{"id":295},"plugin-factory",[297],{"type":64,"value":298},"Plugin Factory",{"type":59,"tag":60,"props":300,"children":301},{},[302,304,309,311,317],{"type":64,"value":303},"Every ",{"type":59,"tag":67,"props":305,"children":307},{"className":306},[],[308],{"type":64,"value":122},{"type":64,"value":310}," returns ",{"type":59,"tag":67,"props":312,"children":314},{"className":313},[],[315],{"type":64,"value":316},"readonly [Plugin, NoOpPlugin]",{"type":64,"value":318},":",{"type":59,"tag":179,"props":320,"children":321},{},[322,340],{"type":59,"tag":110,"props":323,"children":324},{},[325,330,332,338],{"type":59,"tag":114,"props":326,"children":327},{},[328],{"type":64,"value":329},"Plugin",{"type":64,"value":331}," -- returns a plugin object with metadata and a ",{"type":59,"tag":67,"props":333,"children":335},{"className":334},[],[336],{"type":64,"value":337},"render",{"type":64,"value":339}," function that renders your component.",{"type":59,"tag":110,"props":341,"children":342},{},[343,348],{"type":59,"tag":114,"props":344,"children":345},{},[346],{"type":64,"value":347},"NoOpPlugin",{"type":64,"value":349}," -- returns a plugin object with the same metadata but renders an empty fragment.",{"type":59,"tag":293,"props":351,"children":353},{"id":352},"panel-factory",[354],{"type":64,"value":355},"Panel Factory",{"type":59,"tag":60,"props":357,"children":358},{},[359,360,365,366,372],{"type":64,"value":303},{"type":59,"tag":67,"props":361,"children":363},{"className":362},[],[364],{"type":64,"value":144},{"type":64,"value":310},{"type":59,"tag":67,"props":367,"children":369},{"className":368},[],[370],{"type":64,"value":371},"readonly [Panel, NoOpPanel]",{"type":64,"value":318},{"type":59,"tag":179,"props":374,"children":375},{},[376,410],{"type":59,"tag":110,"props":377,"children":378},{},[379,384,386,392,394,400,402,408],{"type":59,"tag":114,"props":380,"children":381},{},[382],{"type":64,"value":383},"Panel",{"type":64,"value":385}," -- a framework component that creates a ",{"type":59,"tag":67,"props":387,"children":389},{"className":388},[],[390],{"type":64,"value":391},"\u003Cdiv style=\"height:100%\">",{"type":64,"value":393},", instantiates the core class, calls ",{"type":59,"tag":67,"props":395,"children":397},{"className":396},[],[398],{"type":64,"value":399},"core.mount(el, theme)",{"type":64,"value":401}," on mount, and ",{"type":59,"tag":67,"props":403,"children":405},{"className":404},[],[406],{"type":64,"value":407},"core.unmount()",{"type":64,"value":409}," on cleanup.",{"type":59,"tag":110,"props":411,"children":412},{},[413,418],{"type":59,"tag":114,"props":414,"children":415},{},[416],{"type":64,"value":417},"NoOpPanel",{"type":64,"value":419}," -- renders an empty fragment.",{"type":59,"tag":293,"props":421,"children":423},{"id":422},"devtoolspanelprops",[424],{"type":64,"value":425},"DevtoolsPanelProps",{"type":59,"tag":427,"props":428,"children":433},"pre",{"className":429,"code":430,"language":431,"meta":432,"style":432},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F React, Solid, Preact\ninterface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n\u002F\u002F Vue (note: includes 'system')\ninterface DevtoolsPanelProps {\n  theme?: 'dark' | 'light' | 'system'\n}\n","ts","",[434],{"type":59,"tag":67,"props":435,"children":436},{"__ignoreMap":432},[437,449,471,521,530,540,549,565,622],{"type":59,"tag":438,"props":439,"children":442},"span",{"class":440,"line":441},"line",1,[443],{"type":59,"tag":438,"props":444,"children":446},{"style":445},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[447],{"type":64,"value":448},"\u002F\u002F React, Solid, Preact\n",{"type":59,"tag":438,"props":450,"children":452},{"class":440,"line":451},2,[453,459,465],{"type":59,"tag":438,"props":454,"children":456},{"style":455},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[457],{"type":64,"value":458},"interface",{"type":59,"tag":438,"props":460,"children":462},{"style":461},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[463],{"type":64,"value":464}," DevtoolsPanelProps",{"type":59,"tag":438,"props":466,"children":468},{"style":467},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[469],{"type":64,"value":470}," {\n",{"type":59,"tag":438,"props":472,"children":474},{"class":440,"line":473},3,[475,481,486,491,497,502,507,511,516],{"type":59,"tag":438,"props":476,"children":478},{"style":477},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[479],{"type":64,"value":480},"  theme",{"type":59,"tag":438,"props":482,"children":483},{"style":467},[484],{"type":64,"value":485},"?:",{"type":59,"tag":438,"props":487,"children":488},{"style":467},[489],{"type":64,"value":490}," '",{"type":59,"tag":438,"props":492,"children":494},{"style":493},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[495],{"type":64,"value":496},"light",{"type":59,"tag":438,"props":498,"children":499},{"style":467},[500],{"type":64,"value":501},"'",{"type":59,"tag":438,"props":503,"children":504},{"style":467},[505],{"type":64,"value":506}," |",{"type":59,"tag":438,"props":508,"children":509},{"style":467},[510],{"type":64,"value":490},{"type":59,"tag":438,"props":512,"children":513},{"style":493},[514],{"type":64,"value":515},"dark",{"type":59,"tag":438,"props":517,"children":518},{"style":467},[519],{"type":64,"value":520},"'\n",{"type":59,"tag":438,"props":522,"children":524},{"class":440,"line":523},4,[525],{"type":59,"tag":438,"props":526,"children":527},{"style":467},[528],{"type":64,"value":529},"}\n",{"type":59,"tag":438,"props":531,"children":533},{"class":440,"line":532},5,[534],{"type":59,"tag":438,"props":535,"children":537},{"emptyLinePlaceholder":536},true,[538],{"type":64,"value":539},"\n",{"type":59,"tag":438,"props":541,"children":543},{"class":440,"line":542},6,[544],{"type":59,"tag":438,"props":545,"children":546},{"style":445},[547],{"type":64,"value":548},"\u002F\u002F Vue (note: includes 'system')\n",{"type":59,"tag":438,"props":550,"children":552},{"class":440,"line":551},7,[553,557,561],{"type":59,"tag":438,"props":554,"children":555},{"style":455},[556],{"type":64,"value":458},{"type":59,"tag":438,"props":558,"children":559},{"style":461},[560],{"type":64,"value":464},{"type":59,"tag":438,"props":562,"children":563},{"style":467},[564],{"type":64,"value":470},{"type":59,"tag":438,"props":566,"children":568},{"class":440,"line":567},8,[569,573,577,581,585,589,593,597,601,605,609,613,618],{"type":59,"tag":438,"props":570,"children":571},{"style":477},[572],{"type":64,"value":480},{"type":59,"tag":438,"props":574,"children":575},{"style":467},[576],{"type":64,"value":485},{"type":59,"tag":438,"props":578,"children":579},{"style":467},[580],{"type":64,"value":490},{"type":59,"tag":438,"props":582,"children":583},{"style":493},[584],{"type":64,"value":515},{"type":59,"tag":438,"props":586,"children":587},{"style":467},[588],{"type":64,"value":501},{"type":59,"tag":438,"props":590,"children":591},{"style":467},[592],{"type":64,"value":506},{"type":59,"tag":438,"props":594,"children":595},{"style":467},[596],{"type":64,"value":490},{"type":59,"tag":438,"props":598,"children":599},{"style":493},[600],{"type":64,"value":496},{"type":59,"tag":438,"props":602,"children":603},{"style":467},[604],{"type":64,"value":501},{"type":59,"tag":438,"props":606,"children":607},{"style":467},[608],{"type":64,"value":506},{"type":59,"tag":438,"props":610,"children":611},{"style":467},[612],{"type":64,"value":490},{"type":59,"tag":438,"props":614,"children":615},{"style":493},[616],{"type":64,"value":617},"system",{"type":59,"tag":438,"props":619,"children":620},{"style":467},[621],{"type":64,"value":520},{"type":59,"tag":438,"props":623,"children":625},{"class":440,"line":624},9,[626],{"type":59,"tag":438,"props":627,"children":628},{"style":467},[629],{"type":64,"value":529},{"type":59,"tag":60,"props":631,"children":632},{},[633],{"type":64,"value":634},"Import from the framework subpath:",{"type":59,"tag":427,"props":636,"children":638},{"className":429,"code":637,"language":431,"meta":432,"style":432},"import type { DevtoolsPanelProps } from '@tanstack\u002Fdevtools-utils\u002Freact'\nimport type { DevtoolsPanelProps } from '@tanstack\u002Fdevtools-utils\u002Fvue'\nimport type { DevtoolsPanelProps } from '@tanstack\u002Fdevtools-utils\u002Fsolid'\nimport type { DevtoolsPanelProps } from '@tanstack\u002Fdevtools-utils\u002Fpreact'\n",[639],{"type":59,"tag":67,"props":640,"children":641},{"__ignoreMap":432},[642,689,729,769],{"type":59,"tag":438,"props":643,"children":644},{"class":440,"line":441},[645,651,656,661,666,671,676,680,685],{"type":59,"tag":438,"props":646,"children":648},{"style":647},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[649],{"type":64,"value":650},"import",{"type":59,"tag":438,"props":652,"children":653},{"style":647},[654],{"type":64,"value":655}," type",{"type":59,"tag":438,"props":657,"children":658},{"style":467},[659],{"type":64,"value":660}," {",{"type":59,"tag":438,"props":662,"children":664},{"style":663},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[665],{"type":64,"value":464},{"type":59,"tag":438,"props":667,"children":668},{"style":467},[669],{"type":64,"value":670}," }",{"type":59,"tag":438,"props":672,"children":673},{"style":647},[674],{"type":64,"value":675}," from",{"type":59,"tag":438,"props":677,"children":678},{"style":467},[679],{"type":64,"value":490},{"type":59,"tag":438,"props":681,"children":682},{"style":493},[683],{"type":64,"value":684},"@tanstack\u002Fdevtools-utils\u002Freact",{"type":59,"tag":438,"props":686,"children":687},{"style":467},[688],{"type":64,"value":520},{"type":59,"tag":438,"props":690,"children":691},{"class":440,"line":451},[692,696,700,704,708,712,716,720,725],{"type":59,"tag":438,"props":693,"children":694},{"style":647},[695],{"type":64,"value":650},{"type":59,"tag":438,"props":697,"children":698},{"style":647},[699],{"type":64,"value":655},{"type":59,"tag":438,"props":701,"children":702},{"style":467},[703],{"type":64,"value":660},{"type":59,"tag":438,"props":705,"children":706},{"style":663},[707],{"type":64,"value":464},{"type":59,"tag":438,"props":709,"children":710},{"style":467},[711],{"type":64,"value":670},{"type":59,"tag":438,"props":713,"children":714},{"style":647},[715],{"type":64,"value":675},{"type":59,"tag":438,"props":717,"children":718},{"style":467},[719],{"type":64,"value":490},{"type":59,"tag":438,"props":721,"children":722},{"style":493},[723],{"type":64,"value":724},"@tanstack\u002Fdevtools-utils\u002Fvue",{"type":59,"tag":438,"props":726,"children":727},{"style":467},[728],{"type":64,"value":520},{"type":59,"tag":438,"props":730,"children":731},{"class":440,"line":473},[732,736,740,744,748,752,756,760,765],{"type":59,"tag":438,"props":733,"children":734},{"style":647},[735],{"type":64,"value":650},{"type":59,"tag":438,"props":737,"children":738},{"style":647},[739],{"type":64,"value":655},{"type":59,"tag":438,"props":741,"children":742},{"style":467},[743],{"type":64,"value":660},{"type":59,"tag":438,"props":745,"children":746},{"style":663},[747],{"type":64,"value":464},{"type":59,"tag":438,"props":749,"children":750},{"style":467},[751],{"type":64,"value":670},{"type":59,"tag":438,"props":753,"children":754},{"style":647},[755],{"type":64,"value":675},{"type":59,"tag":438,"props":757,"children":758},{"style":467},[759],{"type":64,"value":490},{"type":59,"tag":438,"props":761,"children":762},{"style":493},[763],{"type":64,"value":764},"@tanstack\u002Fdevtools-utils\u002Fsolid",{"type":59,"tag":438,"props":766,"children":767},{"style":467},[768],{"type":64,"value":520},{"type":59,"tag":438,"props":770,"children":771},{"class":440,"line":523},[772,776,780,784,788,792,796,800,805],{"type":59,"tag":438,"props":773,"children":774},{"style":647},[775],{"type":64,"value":650},{"type":59,"tag":438,"props":777,"children":778},{"style":647},[779],{"type":64,"value":655},{"type":59,"tag":438,"props":781,"children":782},{"style":467},[783],{"type":64,"value":660},{"type":59,"tag":438,"props":785,"children":786},{"style":663},[787],{"type":64,"value":464},{"type":59,"tag":438,"props":789,"children":790},{"style":467},[791],{"type":64,"value":670},{"type":59,"tag":438,"props":793,"children":794},{"style":647},[795],{"type":64,"value":675},{"type":59,"tag":438,"props":797,"children":798},{"style":467},[799],{"type":64,"value":490},{"type":59,"tag":438,"props":801,"children":802},{"style":493},[803],{"type":64,"value":804},"@tanstack\u002Fdevtools-utils\u002Fpreact",{"type":59,"tag":438,"props":806,"children":807},{"style":467},[808],{"type":64,"value":520},{"type":59,"tag":172,"props":810,"children":812},{"id":811},"primary-example-react",[813],{"type":64,"value":814},"Primary Example (React)",{"type":59,"tag":427,"props":816,"children":820},{"className":817,"code":818,"language":819,"meta":432,"style":432},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { createReactPlugin } from '@tanstack\u002Fdevtools-utils\u002Freact'\n\nfunction MyStorePanel({ theme }: { theme?: 'light' | 'dark' }) {\n  return \u003Cdiv className={theme}>My Store Devtools\u003C\u002Fdiv>\n}\n\nconst [MyPlugin, NoOpPlugin] = createReactPlugin({\n  name: 'My Store',\n  id: 'my-store',\n  defaultOpen: false,\n  Component: MyStorePanel,\n})\n\n\u002F\u002F Tree-shaking: use NoOp in production\nconst ActivePlugin =\n  process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin\n","tsx",[821],{"type":59,"tag":67,"props":822,"children":823},{"__ignoreMap":432},[824,860,867,946,1003,1010,1017,1069,1099,1128,1151,1172,1186,1194,1203,1221],{"type":59,"tag":438,"props":825,"children":826},{"class":440,"line":441},[827,831,835,840,844,848,852,856],{"type":59,"tag":438,"props":828,"children":829},{"style":647},[830],{"type":64,"value":650},{"type":59,"tag":438,"props":832,"children":833},{"style":467},[834],{"type":64,"value":660},{"type":59,"tag":438,"props":836,"children":837},{"style":663},[838],{"type":64,"value":839}," createReactPlugin",{"type":59,"tag":438,"props":841,"children":842},{"style":467},[843],{"type":64,"value":670},{"type":59,"tag":438,"props":845,"children":846},{"style":647},[847],{"type":64,"value":675},{"type":59,"tag":438,"props":849,"children":850},{"style":467},[851],{"type":64,"value":490},{"type":59,"tag":438,"props":853,"children":854},{"style":493},[855],{"type":64,"value":684},{"type":59,"tag":438,"props":857,"children":858},{"style":467},[859],{"type":64,"value":520},{"type":59,"tag":438,"props":861,"children":862},{"class":440,"line":451},[863],{"type":59,"tag":438,"props":864,"children":865},{"emptyLinePlaceholder":536},[866],{"type":64,"value":539},{"type":59,"tag":438,"props":868,"children":869},{"class":440,"line":473},[870,875,881,886,892,897,901,905,909,913,917,921,925,929,933,937,942],{"type":59,"tag":438,"props":871,"children":872},{"style":455},[873],{"type":64,"value":874},"function",{"type":59,"tag":438,"props":876,"children":878},{"style":877},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[879],{"type":64,"value":880}," MyStorePanel",{"type":59,"tag":438,"props":882,"children":883},{"style":467},[884],{"type":64,"value":885},"({",{"type":59,"tag":438,"props":887,"children":889},{"style":888},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[890],{"type":64,"value":891}," theme",{"type":59,"tag":438,"props":893,"children":894},{"style":467},[895],{"type":64,"value":896}," }:",{"type":59,"tag":438,"props":898,"children":899},{"style":467},[900],{"type":64,"value":660},{"type":59,"tag":438,"props":902,"children":903},{"style":477},[904],{"type":64,"value":891},{"type":59,"tag":438,"props":906,"children":907},{"style":467},[908],{"type":64,"value":485},{"type":59,"tag":438,"props":910,"children":911},{"style":467},[912],{"type":64,"value":490},{"type":59,"tag":438,"props":914,"children":915},{"style":493},[916],{"type":64,"value":496},{"type":59,"tag":438,"props":918,"children":919},{"style":467},[920],{"type":64,"value":501},{"type":59,"tag":438,"props":922,"children":923},{"style":467},[924],{"type":64,"value":506},{"type":59,"tag":438,"props":926,"children":927},{"style":467},[928],{"type":64,"value":490},{"type":59,"tag":438,"props":930,"children":931},{"style":493},[932],{"type":64,"value":515},{"type":59,"tag":438,"props":934,"children":935},{"style":467},[936],{"type":64,"value":501},{"type":59,"tag":438,"props":938,"children":939},{"style":467},[940],{"type":64,"value":941}," })",{"type":59,"tag":438,"props":943,"children":944},{"style":467},[945],{"type":64,"value":470},{"type":59,"tag":438,"props":947,"children":948},{"class":440,"line":523},[949,954,959,964,969,974,979,984,989,994,998],{"type":59,"tag":438,"props":950,"children":951},{"style":647},[952],{"type":64,"value":953},"  return",{"type":59,"tag":438,"props":955,"children":956},{"style":467},[957],{"type":64,"value":958}," \u003C",{"type":59,"tag":438,"props":960,"children":961},{"style":477},[962],{"type":64,"value":963},"div",{"type":59,"tag":438,"props":965,"children":966},{"style":455},[967],{"type":64,"value":968}," className",{"type":59,"tag":438,"props":970,"children":971},{"style":467},[972],{"type":64,"value":973},"={",{"type":59,"tag":438,"props":975,"children":976},{"style":663},[977],{"type":64,"value":978},"theme",{"type":59,"tag":438,"props":980,"children":981},{"style":467},[982],{"type":64,"value":983},"}>",{"type":59,"tag":438,"props":985,"children":986},{"style":663},[987],{"type":64,"value":988},"My Store Devtools",{"type":59,"tag":438,"props":990,"children":991},{"style":467},[992],{"type":64,"value":993},"\u003C\u002F",{"type":59,"tag":438,"props":995,"children":996},{"style":477},[997],{"type":64,"value":963},{"type":59,"tag":438,"props":999,"children":1000},{"style":467},[1001],{"type":64,"value":1002},">\n",{"type":59,"tag":438,"props":1004,"children":1005},{"class":440,"line":532},[1006],{"type":59,"tag":438,"props":1007,"children":1008},{"style":467},[1009],{"type":64,"value":529},{"type":59,"tag":438,"props":1011,"children":1012},{"class":440,"line":542},[1013],{"type":59,"tag":438,"props":1014,"children":1015},{"emptyLinePlaceholder":536},[1016],{"type":64,"value":539},{"type":59,"tag":438,"props":1018,"children":1019},{"class":440,"line":551},[1020,1025,1030,1035,1040,1045,1050,1055,1059,1064],{"type":59,"tag":438,"props":1021,"children":1022},{"style":455},[1023],{"type":64,"value":1024},"const",{"type":59,"tag":438,"props":1026,"children":1027},{"style":467},[1028],{"type":64,"value":1029}," [",{"type":59,"tag":438,"props":1031,"children":1032},{"style":663},[1033],{"type":64,"value":1034},"MyPlugin",{"type":59,"tag":438,"props":1036,"children":1037},{"style":467},[1038],{"type":64,"value":1039},",",{"type":59,"tag":438,"props":1041,"children":1042},{"style":663},[1043],{"type":64,"value":1044}," NoOpPlugin",{"type":59,"tag":438,"props":1046,"children":1047},{"style":467},[1048],{"type":64,"value":1049},"]",{"type":59,"tag":438,"props":1051,"children":1052},{"style":467},[1053],{"type":64,"value":1054}," =",{"type":59,"tag":438,"props":1056,"children":1057},{"style":877},[1058],{"type":64,"value":839},{"type":59,"tag":438,"props":1060,"children":1061},{"style":663},[1062],{"type":64,"value":1063},"(",{"type":59,"tag":438,"props":1065,"children":1066},{"style":467},[1067],{"type":64,"value":1068},"{\n",{"type":59,"tag":438,"props":1070,"children":1071},{"class":440,"line":567},[1072,1077,1081,1085,1090,1094],{"type":59,"tag":438,"props":1073,"children":1074},{"style":477},[1075],{"type":64,"value":1076},"  name",{"type":59,"tag":438,"props":1078,"children":1079},{"style":467},[1080],{"type":64,"value":318},{"type":59,"tag":438,"props":1082,"children":1083},{"style":467},[1084],{"type":64,"value":490},{"type":59,"tag":438,"props":1086,"children":1087},{"style":493},[1088],{"type":64,"value":1089},"My Store",{"type":59,"tag":438,"props":1091,"children":1092},{"style":467},[1093],{"type":64,"value":501},{"type":59,"tag":438,"props":1095,"children":1096},{"style":467},[1097],{"type":64,"value":1098},",\n",{"type":59,"tag":438,"props":1100,"children":1101},{"class":440,"line":624},[1102,1107,1111,1115,1120,1124],{"type":59,"tag":438,"props":1103,"children":1104},{"style":477},[1105],{"type":64,"value":1106},"  id",{"type":59,"tag":438,"props":1108,"children":1109},{"style":467},[1110],{"type":64,"value":318},{"type":59,"tag":438,"props":1112,"children":1113},{"style":467},[1114],{"type":64,"value":490},{"type":59,"tag":438,"props":1116,"children":1117},{"style":493},[1118],{"type":64,"value":1119},"my-store",{"type":59,"tag":438,"props":1121,"children":1122},{"style":467},[1123],{"type":64,"value":501},{"type":59,"tag":438,"props":1125,"children":1126},{"style":467},[1127],{"type":64,"value":1098},{"type":59,"tag":438,"props":1129,"children":1131},{"class":440,"line":1130},10,[1132,1137,1141,1147],{"type":59,"tag":438,"props":1133,"children":1134},{"style":477},[1135],{"type":64,"value":1136},"  defaultOpen",{"type":59,"tag":438,"props":1138,"children":1139},{"style":467},[1140],{"type":64,"value":318},{"type":59,"tag":438,"props":1142,"children":1144},{"style":1143},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1145],{"type":64,"value":1146}," false",{"type":59,"tag":438,"props":1148,"children":1149},{"style":467},[1150],{"type":64,"value":1098},{"type":59,"tag":438,"props":1152,"children":1154},{"class":440,"line":1153},11,[1155,1160,1164,1168],{"type":59,"tag":438,"props":1156,"children":1157},{"style":477},[1158],{"type":64,"value":1159},"  Component",{"type":59,"tag":438,"props":1161,"children":1162},{"style":467},[1163],{"type":64,"value":318},{"type":59,"tag":438,"props":1165,"children":1166},{"style":663},[1167],{"type":64,"value":880},{"type":59,"tag":438,"props":1169,"children":1170},{"style":467},[1171],{"type":64,"value":1098},{"type":59,"tag":438,"props":1173,"children":1175},{"class":440,"line":1174},12,[1176,1181],{"type":59,"tag":438,"props":1177,"children":1178},{"style":467},[1179],{"type":64,"value":1180},"}",{"type":59,"tag":438,"props":1182,"children":1183},{"style":663},[1184],{"type":64,"value":1185},")\n",{"type":59,"tag":438,"props":1187,"children":1189},{"class":440,"line":1188},13,[1190],{"type":59,"tag":438,"props":1191,"children":1192},{"emptyLinePlaceholder":536},[1193],{"type":64,"value":539},{"type":59,"tag":438,"props":1195,"children":1197},{"class":440,"line":1196},14,[1198],{"type":59,"tag":438,"props":1199,"children":1200},{"style":445},[1201],{"type":64,"value":1202},"\u002F\u002F Tree-shaking: use NoOp in production\n",{"type":59,"tag":438,"props":1204,"children":1206},{"class":440,"line":1205},15,[1207,1211,1216],{"type":59,"tag":438,"props":1208,"children":1209},{"style":455},[1210],{"type":64,"value":1024},{"type":59,"tag":438,"props":1212,"children":1213},{"style":663},[1214],{"type":64,"value":1215}," ActivePlugin ",{"type":59,"tag":438,"props":1217,"children":1218},{"style":467},[1219],{"type":64,"value":1220},"=\n",{"type":59,"tag":438,"props":1222,"children":1224},{"class":440,"line":1223},16,[1225,1230,1235,1240,1244,1249,1254,1258,1263,1267,1272,1277,1281],{"type":59,"tag":438,"props":1226,"children":1227},{"style":663},[1228],{"type":64,"value":1229},"  process",{"type":59,"tag":438,"props":1231,"children":1232},{"style":467},[1233],{"type":64,"value":1234},".",{"type":59,"tag":438,"props":1236,"children":1237},{"style":663},[1238],{"type":64,"value":1239},"env",{"type":59,"tag":438,"props":1241,"children":1242},{"style":467},[1243],{"type":64,"value":1234},{"type":59,"tag":438,"props":1245,"children":1246},{"style":663},[1247],{"type":64,"value":1248},"NODE_ENV ",{"type":59,"tag":438,"props":1250,"children":1251},{"style":467},[1252],{"type":64,"value":1253},"===",{"type":59,"tag":438,"props":1255,"children":1256},{"style":467},[1257],{"type":64,"value":490},{"type":59,"tag":438,"props":1259,"children":1260},{"style":493},[1261],{"type":64,"value":1262},"development",{"type":59,"tag":438,"props":1264,"children":1265},{"style":467},[1266],{"type":64,"value":501},{"type":59,"tag":438,"props":1268,"children":1269},{"style":467},[1270],{"type":64,"value":1271}," ?",{"type":59,"tag":438,"props":1273,"children":1274},{"style":663},[1275],{"type":64,"value":1276}," MyPlugin ",{"type":59,"tag":438,"props":1278,"children":1279},{"style":467},[1280],{"type":64,"value":318},{"type":59,"tag":438,"props":1282,"children":1283},{"style":663},[1284],{"type":64,"value":1285}," NoOpPlugin\n",{"type":59,"tag":293,"props":1287,"children":1289},{"id":1288},"with-class-based-panel",[1290],{"type":64,"value":1291},"With Class-Based Panel",{"type":59,"tag":427,"props":1293,"children":1295},{"className":817,"code":1294,"language":819,"meta":432,"style":432},"import {\n  createReactPanel,\n  createReactPlugin,\n} from '@tanstack\u002Fdevtools-utils\u002Freact'\n\nclass MyDevtoolsCore {\n  mount(el: HTMLElement, theme: 'light' | 'dark') {\n    \u002F* render into el *\u002F\n  }\n  unmount() {\n    \u002F* cleanup *\u002F\n  }\n}\n\nconst [MyPanel, NoOpPanel] = createReactPanel(MyDevtoolsCore)\n\nconst [MyPlugin, NoOpPlugin] = createReactPlugin({\n  name: 'My Store',\n  Component: MyPanel,\n})\n",[1296],{"type":59,"tag":67,"props":1297,"children":1298},{"__ignoreMap":432},[1299,1310,1322,1334,1357,1364,1381,1456,1464,1472,1489,1497,1504,1511,1518,1561,1568,1612,1640,1661],{"type":59,"tag":438,"props":1300,"children":1301},{"class":440,"line":441},[1302,1306],{"type":59,"tag":438,"props":1303,"children":1304},{"style":647},[1305],{"type":64,"value":650},{"type":59,"tag":438,"props":1307,"children":1308},{"style":467},[1309],{"type":64,"value":470},{"type":59,"tag":438,"props":1311,"children":1312},{"class":440,"line":451},[1313,1318],{"type":59,"tag":438,"props":1314,"children":1315},{"style":663},[1316],{"type":64,"value":1317},"  createReactPanel",{"type":59,"tag":438,"props":1319,"children":1320},{"style":467},[1321],{"type":64,"value":1098},{"type":59,"tag":438,"props":1323,"children":1324},{"class":440,"line":473},[1325,1330],{"type":59,"tag":438,"props":1326,"children":1327},{"style":663},[1328],{"type":64,"value":1329},"  createReactPlugin",{"type":59,"tag":438,"props":1331,"children":1332},{"style":467},[1333],{"type":64,"value":1098},{"type":59,"tag":438,"props":1335,"children":1336},{"class":440,"line":523},[1337,1341,1345,1349,1353],{"type":59,"tag":438,"props":1338,"children":1339},{"style":467},[1340],{"type":64,"value":1180},{"type":59,"tag":438,"props":1342,"children":1343},{"style":647},[1344],{"type":64,"value":675},{"type":59,"tag":438,"props":1346,"children":1347},{"style":467},[1348],{"type":64,"value":490},{"type":59,"tag":438,"props":1350,"children":1351},{"style":493},[1352],{"type":64,"value":684},{"type":59,"tag":438,"props":1354,"children":1355},{"style":467},[1356],{"type":64,"value":520},{"type":59,"tag":438,"props":1358,"children":1359},{"class":440,"line":532},[1360],{"type":59,"tag":438,"props":1361,"children":1362},{"emptyLinePlaceholder":536},[1363],{"type":64,"value":539},{"type":59,"tag":438,"props":1365,"children":1366},{"class":440,"line":542},[1367,1372,1377],{"type":59,"tag":438,"props":1368,"children":1369},{"style":455},[1370],{"type":64,"value":1371},"class",{"type":59,"tag":438,"props":1373,"children":1374},{"style":461},[1375],{"type":64,"value":1376}," MyDevtoolsCore",{"type":59,"tag":438,"props":1378,"children":1379},{"style":467},[1380],{"type":64,"value":470},{"type":59,"tag":438,"props":1382,"children":1383},{"class":440,"line":551},[1384,1389,1393,1398,1402,1407,1411,1415,1419,1423,1427,1431,1435,1439,1443,1447,1452],{"type":59,"tag":438,"props":1385,"children":1386},{"style":477},[1387],{"type":64,"value":1388},"  mount",{"type":59,"tag":438,"props":1390,"children":1391},{"style":467},[1392],{"type":64,"value":1063},{"type":59,"tag":438,"props":1394,"children":1395},{"style":888},[1396],{"type":64,"value":1397},"el",{"type":59,"tag":438,"props":1399,"children":1400},{"style":467},[1401],{"type":64,"value":318},{"type":59,"tag":438,"props":1403,"children":1404},{"style":461},[1405],{"type":64,"value":1406}," HTMLElement",{"type":59,"tag":438,"props":1408,"children":1409},{"style":467},[1410],{"type":64,"value":1039},{"type":59,"tag":438,"props":1412,"children":1413},{"style":888},[1414],{"type":64,"value":891},{"type":59,"tag":438,"props":1416,"children":1417},{"style":467},[1418],{"type":64,"value":318},{"type":59,"tag":438,"props":1420,"children":1421},{"style":467},[1422],{"type":64,"value":490},{"type":59,"tag":438,"props":1424,"children":1425},{"style":493},[1426],{"type":64,"value":496},{"type":59,"tag":438,"props":1428,"children":1429},{"style":467},[1430],{"type":64,"value":501},{"type":59,"tag":438,"props":1432,"children":1433},{"style":467},[1434],{"type":64,"value":506},{"type":59,"tag":438,"props":1436,"children":1437},{"style":467},[1438],{"type":64,"value":490},{"type":59,"tag":438,"props":1440,"children":1441},{"style":493},[1442],{"type":64,"value":515},{"type":59,"tag":438,"props":1444,"children":1445},{"style":467},[1446],{"type":64,"value":501},{"type":59,"tag":438,"props":1448,"children":1449},{"style":467},[1450],{"type":64,"value":1451},")",{"type":59,"tag":438,"props":1453,"children":1454},{"style":467},[1455],{"type":64,"value":470},{"type":59,"tag":438,"props":1457,"children":1458},{"class":440,"line":567},[1459],{"type":59,"tag":438,"props":1460,"children":1461},{"style":445},[1462],{"type":64,"value":1463},"    \u002F* render into el *\u002F\n",{"type":59,"tag":438,"props":1465,"children":1466},{"class":440,"line":624},[1467],{"type":59,"tag":438,"props":1468,"children":1469},{"style":467},[1470],{"type":64,"value":1471},"  }\n",{"type":59,"tag":438,"props":1473,"children":1474},{"class":440,"line":1130},[1475,1480,1485],{"type":59,"tag":438,"props":1476,"children":1477},{"style":477},[1478],{"type":64,"value":1479},"  unmount",{"type":59,"tag":438,"props":1481,"children":1482},{"style":467},[1483],{"type":64,"value":1484},"()",{"type":59,"tag":438,"props":1486,"children":1487},{"style":467},[1488],{"type":64,"value":470},{"type":59,"tag":438,"props":1490,"children":1491},{"class":440,"line":1153},[1492],{"type":59,"tag":438,"props":1493,"children":1494},{"style":445},[1495],{"type":64,"value":1496},"    \u002F* cleanup *\u002F\n",{"type":59,"tag":438,"props":1498,"children":1499},{"class":440,"line":1174},[1500],{"type":59,"tag":438,"props":1501,"children":1502},{"style":467},[1503],{"type":64,"value":1471},{"type":59,"tag":438,"props":1505,"children":1506},{"class":440,"line":1188},[1507],{"type":59,"tag":438,"props":1508,"children":1509},{"style":467},[1510],{"type":64,"value":529},{"type":59,"tag":438,"props":1512,"children":1513},{"class":440,"line":1196},[1514],{"type":59,"tag":438,"props":1515,"children":1516},{"emptyLinePlaceholder":536},[1517],{"type":64,"value":539},{"type":59,"tag":438,"props":1519,"children":1520},{"class":440,"line":1205},[1521,1525,1529,1534,1538,1543,1547,1551,1556],{"type":59,"tag":438,"props":1522,"children":1523},{"style":455},[1524],{"type":64,"value":1024},{"type":59,"tag":438,"props":1526,"children":1527},{"style":467},[1528],{"type":64,"value":1029},{"type":59,"tag":438,"props":1530,"children":1531},{"style":663},[1532],{"type":64,"value":1533},"MyPanel",{"type":59,"tag":438,"props":1535,"children":1536},{"style":467},[1537],{"type":64,"value":1039},{"type":59,"tag":438,"props":1539,"children":1540},{"style":663},[1541],{"type":64,"value":1542}," NoOpPanel",{"type":59,"tag":438,"props":1544,"children":1545},{"style":467},[1546],{"type":64,"value":1049},{"type":59,"tag":438,"props":1548,"children":1549},{"style":467},[1550],{"type":64,"value":1054},{"type":59,"tag":438,"props":1552,"children":1553},{"style":877},[1554],{"type":64,"value":1555}," createReactPanel",{"type":59,"tag":438,"props":1557,"children":1558},{"style":663},[1559],{"type":64,"value":1560},"(MyDevtoolsCore)\n",{"type":59,"tag":438,"props":1562,"children":1563},{"class":440,"line":1223},[1564],{"type":59,"tag":438,"props":1565,"children":1566},{"emptyLinePlaceholder":536},[1567],{"type":64,"value":539},{"type":59,"tag":438,"props":1569,"children":1571},{"class":440,"line":1570},17,[1572,1576,1580,1584,1588,1592,1596,1600,1604,1608],{"type":59,"tag":438,"props":1573,"children":1574},{"style":455},[1575],{"type":64,"value":1024},{"type":59,"tag":438,"props":1577,"children":1578},{"style":467},[1579],{"type":64,"value":1029},{"type":59,"tag":438,"props":1581,"children":1582},{"style":663},[1583],{"type":64,"value":1034},{"type":59,"tag":438,"props":1585,"children":1586},{"style":467},[1587],{"type":64,"value":1039},{"type":59,"tag":438,"props":1589,"children":1590},{"style":663},[1591],{"type":64,"value":1044},{"type":59,"tag":438,"props":1593,"children":1594},{"style":467},[1595],{"type":64,"value":1049},{"type":59,"tag":438,"props":1597,"children":1598},{"style":467},[1599],{"type":64,"value":1054},{"type":59,"tag":438,"props":1601,"children":1602},{"style":877},[1603],{"type":64,"value":839},{"type":59,"tag":438,"props":1605,"children":1606},{"style":663},[1607],{"type":64,"value":1063},{"type":59,"tag":438,"props":1609,"children":1610},{"style":467},[1611],{"type":64,"value":1068},{"type":59,"tag":438,"props":1613,"children":1615},{"class":440,"line":1614},18,[1616,1620,1624,1628,1632,1636],{"type":59,"tag":438,"props":1617,"children":1618},{"style":477},[1619],{"type":64,"value":1076},{"type":59,"tag":438,"props":1621,"children":1622},{"style":467},[1623],{"type":64,"value":318},{"type":59,"tag":438,"props":1625,"children":1626},{"style":467},[1627],{"type":64,"value":490},{"type":59,"tag":438,"props":1629,"children":1630},{"style":493},[1631],{"type":64,"value":1089},{"type":59,"tag":438,"props":1633,"children":1634},{"style":467},[1635],{"type":64,"value":501},{"type":59,"tag":438,"props":1637,"children":1638},{"style":467},[1639],{"type":64,"value":1098},{"type":59,"tag":438,"props":1641,"children":1643},{"class":440,"line":1642},19,[1644,1648,1652,1657],{"type":59,"tag":438,"props":1645,"children":1646},{"style":477},[1647],{"type":64,"value":1159},{"type":59,"tag":438,"props":1649,"children":1650},{"style":467},[1651],{"type":64,"value":318},{"type":59,"tag":438,"props":1653,"children":1654},{"style":663},[1655],{"type":64,"value":1656}," MyPanel",{"type":59,"tag":438,"props":1658,"children":1659},{"style":467},[1660],{"type":64,"value":1098},{"type":59,"tag":438,"props":1662,"children":1664},{"class":440,"line":1663},20,[1665,1669],{"type":59,"tag":438,"props":1666,"children":1667},{"style":467},[1668],{"type":64,"value":1180},{"type":59,"tag":438,"props":1670,"children":1671},{"style":663},[1672],{"type":64,"value":1185},{"type":59,"tag":172,"props":1674,"children":1676},{"id":1675},"framework-api-differences",[1677],{"type":64,"value":1678},"Framework API Differences",{"type":59,"tag":293,"props":1680,"children":1682},{"id":1681},"react-preact-options-object",[1683],{"type":64,"value":1684},"React & Preact -- Options Object",{"type":59,"tag":427,"props":1686,"children":1688},{"className":429,"code":1687,"language":431,"meta":432,"style":432},"createReactPlugin({ name, id?, defaultOpen?, Component })  \u002F\u002F => [Plugin, NoOpPlugin]\ncreatePreactPlugin({ name, id?, defaultOpen?, Component }) \u002F\u002F => [Plugin, NoOpPlugin]\n",[1689],{"type":59,"tag":67,"props":1690,"children":1691},{"__ignoreMap":432},[1692,1755],{"type":59,"tag":438,"props":1693,"children":1694},{"class":440,"line":441},[1695,1700,1704,1709,1714,1718,1723,1727,1732,1736,1741,1745,1750],{"type":59,"tag":438,"props":1696,"children":1697},{"style":877},[1698],{"type":64,"value":1699},"createReactPlugin",{"type":59,"tag":438,"props":1701,"children":1702},{"style":663},[1703],{"type":64,"value":1063},{"type":59,"tag":438,"props":1705,"children":1706},{"style":467},[1707],{"type":64,"value":1708},"{",{"type":59,"tag":438,"props":1710,"children":1711},{"style":663},[1712],{"type":64,"value":1713}," name",{"type":59,"tag":438,"props":1715,"children":1716},{"style":467},[1717],{"type":64,"value":1039},{"type":59,"tag":438,"props":1719,"children":1720},{"style":663},[1721],{"type":64,"value":1722}," id?",{"type":59,"tag":438,"props":1724,"children":1725},{"style":467},[1726],{"type":64,"value":1039},{"type":59,"tag":438,"props":1728,"children":1729},{"style":663},[1730],{"type":64,"value":1731}," defaultOpen?",{"type":59,"tag":438,"props":1733,"children":1734},{"style":467},[1735],{"type":64,"value":1039},{"type":59,"tag":438,"props":1737,"children":1738},{"style":663},[1739],{"type":64,"value":1740}," Component ",{"type":59,"tag":438,"props":1742,"children":1743},{"style":467},[1744],{"type":64,"value":1180},{"type":59,"tag":438,"props":1746,"children":1747},{"style":663},[1748],{"type":64,"value":1749},")  ",{"type":59,"tag":438,"props":1751,"children":1752},{"style":445},[1753],{"type":64,"value":1754},"\u002F\u002F => [Plugin, NoOpPlugin]\n",{"type":59,"tag":438,"props":1756,"children":1757},{"class":440,"line":451},[1758,1763,1767,1771,1775,1779,1783,1787,1791,1795,1799,1803,1808],{"type":59,"tag":438,"props":1759,"children":1760},{"style":877},[1761],{"type":64,"value":1762},"createPreactPlugin",{"type":59,"tag":438,"props":1764,"children":1765},{"style":663},[1766],{"type":64,"value":1063},{"type":59,"tag":438,"props":1768,"children":1769},{"style":467},[1770],{"type":64,"value":1708},{"type":59,"tag":438,"props":1772,"children":1773},{"style":663},[1774],{"type":64,"value":1713},{"type":59,"tag":438,"props":1776,"children":1777},{"style":467},[1778],{"type":64,"value":1039},{"type":59,"tag":438,"props":1780,"children":1781},{"style":663},[1782],{"type":64,"value":1722},{"type":59,"tag":438,"props":1784,"children":1785},{"style":467},[1786],{"type":64,"value":1039},{"type":59,"tag":438,"props":1788,"children":1789},{"style":663},[1790],{"type":64,"value":1731},{"type":59,"tag":438,"props":1792,"children":1793},{"style":467},[1794],{"type":64,"value":1039},{"type":59,"tag":438,"props":1796,"children":1797},{"style":663},[1798],{"type":64,"value":1740},{"type":59,"tag":438,"props":1800,"children":1801},{"style":467},[1802],{"type":64,"value":1180},{"type":59,"tag":438,"props":1804,"children":1805},{"style":663},[1806],{"type":64,"value":1807},") ",{"type":59,"tag":438,"props":1809,"children":1810},{"style":445},[1811],{"type":64,"value":1754},{"type":59,"tag":179,"props":1813,"children":1814},{},[1815,1840,1857],{"type":59,"tag":110,"props":1816,"children":1817},{},[1818,1824,1826,1831,1833,1838],{"type":59,"tag":67,"props":1819,"children":1821},{"className":1820},[],[1822],{"type":64,"value":1823},"Component",{"type":64,"value":1825}," receives ",{"type":59,"tag":67,"props":1827,"children":1829},{"className":1828},[],[1830],{"type":64,"value":425},{"type":64,"value":1832}," (with ",{"type":59,"tag":67,"props":1834,"children":1836},{"className":1835},[],[1837],{"type":64,"value":978},{"type":64,"value":1839},").",{"type":59,"tag":110,"props":1841,"children":1842},{},[1843,1849,1850,1856],{"type":59,"tag":67,"props":1844,"children":1846},{"className":1845},[],[1847],{"type":64,"value":1848},"Plugin()",{"type":64,"value":310},{"type":59,"tag":67,"props":1851,"children":1853},{"className":1852},[],[1854],{"type":64,"value":1855},"{ name, id?, defaultOpen?, render(el, theme) }",{"type":64,"value":1234},{"type":59,"tag":110,"props":1858,"children":1859},{},[1860,1862,1868],{"type":64,"value":1861},"Preact is identical to React but uses Preact JSX types and ",{"type":59,"tag":67,"props":1863,"children":1865},{"className":1864},[],[1866],{"type":64,"value":1867},"preact\u002Fhooks",{"type":64,"value":1234},{"type":59,"tag":293,"props":1870,"children":1872},{"id":1871},"vue-positional-arguments-not-options-object",[1873],{"type":64,"value":1874},"Vue -- Positional Arguments, NOT Options Object",{"type":59,"tag":427,"props":1876,"children":1878},{"className":429,"code":1877,"language":431,"meta":432,"style":432},"createVuePlugin(name: string, component: DefineComponent) \u002F\u002F => [Plugin, NoOpPlugin]\n",[1879],{"type":59,"tag":67,"props":1880,"children":1881},{"__ignoreMap":432},[1882],{"type":59,"tag":438,"props":1883,"children":1884},{"class":440,"line":441},[1885,1890,1895,1899,1904],{"type":59,"tag":438,"props":1886,"children":1887},{"style":877},[1888],{"type":64,"value":1889},"createVuePlugin",{"type":59,"tag":438,"props":1891,"children":1892},{"style":663},[1893],{"type":64,"value":1894},"(name: string",{"type":59,"tag":438,"props":1896,"children":1897},{"style":467},[1898],{"type":64,"value":1039},{"type":59,"tag":438,"props":1900,"children":1901},{"style":663},[1902],{"type":64,"value":1903}," component: DefineComponent) ",{"type":59,"tag":438,"props":1905,"children":1906},{"style":445},[1907],{"type":64,"value":1754},{"type":59,"tag":179,"props":1909,"children":1910},{},[1911,1924,1942,1959],{"type":59,"tag":110,"props":1912,"children":1913},{},[1914,1916,1922],{"type":64,"value":1915},"Takes ",{"type":59,"tag":67,"props":1917,"children":1919},{"className":1918},[],[1920],{"type":64,"value":1921},"(name, component)",{"type":64,"value":1923}," as separate arguments, NOT an options object.",{"type":59,"tag":110,"props":1925,"children":1926},{},[1927,1933,1934,1940],{"type":59,"tag":67,"props":1928,"children":1930},{"className":1929},[],[1931],{"type":64,"value":1932},"Plugin(props)",{"type":64,"value":310},{"type":59,"tag":67,"props":1935,"children":1937},{"className":1936},[],[1938],{"type":64,"value":1939},"{ name, component, props }",{"type":64,"value":1941}," -- it passes props through.",{"type":59,"tag":110,"props":1943,"children":1944},{},[1945,1951,1952,1958],{"type":59,"tag":67,"props":1946,"children":1948},{"className":1947},[],[1949],{"type":64,"value":1950},"NoOpPlugin(props)",{"type":64,"value":310},{"type":59,"tag":67,"props":1953,"children":1955},{"className":1954},[],[1956],{"type":64,"value":1957},"{ name, component: Fragment, props }",{"type":64,"value":1234},{"type":59,"tag":110,"props":1960,"children":1961},{},[1962,1964,1970,1972,1978],{"type":64,"value":1963},"Vue's ",{"type":59,"tag":67,"props":1965,"children":1967},{"className":1966},[],[1968],{"type":64,"value":1969},"DevtoolsPanelProps.theme",{"type":64,"value":1971}," also accepts ",{"type":59,"tag":67,"props":1973,"children":1975},{"className":1974},[],[1976],{"type":64,"value":1977},"'system'",{"type":64,"value":1234},{"type":59,"tag":293,"props":1980,"children":1982},{"id":1981},"solid-same-api-as-react-different-internals",[1983],{"type":64,"value":1984},"Solid -- Same API as React, Different Internals",{"type":59,"tag":427,"props":1986,"children":1988},{"className":429,"code":1987,"language":431,"meta":432,"style":432},"createSolidPlugin({ name, id?, defaultOpen?, Component }) \u002F\u002F => [Plugin, NoOpPlugin]\n",[1989],{"type":59,"tag":67,"props":1990,"children":1991},{"__ignoreMap":432},[1992],{"type":59,"tag":438,"props":1993,"children":1994},{"class":440,"line":441},[1995,2000,2004,2008,2012,2016,2020,2024,2028,2032,2036,2040,2044],{"type":59,"tag":438,"props":1996,"children":1997},{"style":877},[1998],{"type":64,"value":1999},"createSolidPlugin",{"type":59,"tag":438,"props":2001,"children":2002},{"style":663},[2003],{"type":64,"value":1063},{"type":59,"tag":438,"props":2005,"children":2006},{"style":467},[2007],{"type":64,"value":1708},{"type":59,"tag":438,"props":2009,"children":2010},{"style":663},[2011],{"type":64,"value":1713},{"type":59,"tag":438,"props":2013,"children":2014},{"style":467},[2015],{"type":64,"value":1039},{"type":59,"tag":438,"props":2017,"children":2018},{"style":663},[2019],{"type":64,"value":1722},{"type":59,"tag":438,"props":2021,"children":2022},{"style":467},[2023],{"type":64,"value":1039},{"type":59,"tag":438,"props":2025,"children":2026},{"style":663},[2027],{"type":64,"value":1731},{"type":59,"tag":438,"props":2029,"children":2030},{"style":467},[2031],{"type":64,"value":1039},{"type":59,"tag":438,"props":2033,"children":2034},{"style":663},[2035],{"type":64,"value":1740},{"type":59,"tag":438,"props":2037,"children":2038},{"style":467},[2039],{"type":64,"value":1180},{"type":59,"tag":438,"props":2041,"children":2042},{"style":663},[2043],{"type":64,"value":1807},{"type":59,"tag":438,"props":2045,"children":2046},{"style":445},[2047],{"type":64,"value":1754},{"type":59,"tag":179,"props":2049,"children":2050},{},[2051,2056,2073,2086],{"type":59,"tag":110,"props":2052,"children":2053},{},[2054],{"type":64,"value":2055},"Same options-object API as React.",{"type":59,"tag":110,"props":2057,"children":2058},{},[2059,2064,2066,2072],{"type":59,"tag":67,"props":2060,"children":2062},{"className":2061},[],[2063],{"type":64,"value":1823},{"type":64,"value":2065}," must be a Solid component function ",{"type":59,"tag":67,"props":2067,"children":2069},{"className":2068},[],[2070],{"type":64,"value":2071},"(props: DevtoolsPanelProps) => JSX.Element",{"type":64,"value":1234},{"type":59,"tag":110,"props":2074,"children":2075},{},[2076,2078,2084],{"type":64,"value":2077},"The render function internally returns ",{"type":59,"tag":67,"props":2079,"children":2081},{"className":2080},[],[2082],{"type":64,"value":2083},"\u003CComponent theme={theme} \u002F>",{"type":64,"value":2085}," -- Solid handles reactivity.",{"type":59,"tag":110,"props":2087,"children":2088},{},[2089,2091,2097,2099,2105],{"type":64,"value":2090},"Solid also exports ",{"type":59,"tag":67,"props":2092,"children":2094},{"className":2093},[],[2095],{"type":64,"value":2096},"constructCoreClass",{"type":64,"value":2098}," from ",{"type":59,"tag":67,"props":2100,"children":2102},{"className":2101},[],[2103],{"type":64,"value":2104},"@tanstack\u002Fdevtools-utils\u002Fsolid\u002Fclass",{"type":64,"value":2106}," for building lazy-loaded devtools cores.",{"type":59,"tag":172,"props":2108,"children":2110},{"id":2109},"common-mistakes",[2111],{"type":64,"value":2112},"Common Mistakes",{"type":59,"tag":293,"props":2114,"children":2116},{"id":2115},"critical-using-react-jsx-pattern-in-vue-adapter",[2117],{"type":64,"value":2118},"CRITICAL: Using React JSX Pattern in Vue Adapter",{"type":59,"tag":60,"props":2120,"children":2121},{},[2122,2124,2129],{"type":64,"value":2123},"Vue uses positional ",{"type":59,"tag":67,"props":2125,"children":2127},{"className":2126},[],[2128],{"type":64,"value":1921},{"type":64,"value":2130}," arguments, NOT an options object.",{"type":59,"tag":427,"props":2132,"children":2134},{"className":429,"code":2133,"language":431,"meta":432,"style":432},"\u002F\u002F WRONG -- will fail at compile time or produce garbage at runtime\nconst [MyPlugin, NoOpPlugin] = createVuePlugin({\n  name: 'My Plugin',\n  Component: MyPanel,\n})\n\n\u002F\u002F CORRECT\nconst [MyPlugin, NoOpPlugin] = createVuePlugin('My Plugin', MyPanel)\n",[2135],{"type":59,"tag":67,"props":2136,"children":2137},{"__ignoreMap":432},[2138,2146,2190,2218,2237,2248,2255,2263],{"type":59,"tag":438,"props":2139,"children":2140},{"class":440,"line":441},[2141],{"type":59,"tag":438,"props":2142,"children":2143},{"style":445},[2144],{"type":64,"value":2145},"\u002F\u002F WRONG -- will fail at compile time or produce garbage at runtime\n",{"type":59,"tag":438,"props":2147,"children":2148},{"class":440,"line":451},[2149,2153,2157,2161,2165,2169,2173,2177,2182,2186],{"type":59,"tag":438,"props":2150,"children":2151},{"style":455},[2152],{"type":64,"value":1024},{"type":59,"tag":438,"props":2154,"children":2155},{"style":467},[2156],{"type":64,"value":1029},{"type":59,"tag":438,"props":2158,"children":2159},{"style":663},[2160],{"type":64,"value":1034},{"type":59,"tag":438,"props":2162,"children":2163},{"style":467},[2164],{"type":64,"value":1039},{"type":59,"tag":438,"props":2166,"children":2167},{"style":663},[2168],{"type":64,"value":1044},{"type":59,"tag":438,"props":2170,"children":2171},{"style":467},[2172],{"type":64,"value":1049},{"type":59,"tag":438,"props":2174,"children":2175},{"style":467},[2176],{"type":64,"value":1054},{"type":59,"tag":438,"props":2178,"children":2179},{"style":877},[2180],{"type":64,"value":2181}," createVuePlugin",{"type":59,"tag":438,"props":2183,"children":2184},{"style":663},[2185],{"type":64,"value":1063},{"type":59,"tag":438,"props":2187,"children":2188},{"style":467},[2189],{"type":64,"value":1068},{"type":59,"tag":438,"props":2191,"children":2192},{"class":440,"line":473},[2193,2197,2201,2205,2210,2214],{"type":59,"tag":438,"props":2194,"children":2195},{"style":477},[2196],{"type":64,"value":1076},{"type":59,"tag":438,"props":2198,"children":2199},{"style":467},[2200],{"type":64,"value":318},{"type":59,"tag":438,"props":2202,"children":2203},{"style":467},[2204],{"type":64,"value":490},{"type":59,"tag":438,"props":2206,"children":2207},{"style":493},[2208],{"type":64,"value":2209},"My Plugin",{"type":59,"tag":438,"props":2211,"children":2212},{"style":467},[2213],{"type":64,"value":501},{"type":59,"tag":438,"props":2215,"children":2216},{"style":467},[2217],{"type":64,"value":1098},{"type":59,"tag":438,"props":2219,"children":2220},{"class":440,"line":523},[2221,2225,2229,2233],{"type":59,"tag":438,"props":2222,"children":2223},{"style":477},[2224],{"type":64,"value":1159},{"type":59,"tag":438,"props":2226,"children":2227},{"style":467},[2228],{"type":64,"value":318},{"type":59,"tag":438,"props":2230,"children":2231},{"style":663},[2232],{"type":64,"value":1656},{"type":59,"tag":438,"props":2234,"children":2235},{"style":467},[2236],{"type":64,"value":1098},{"type":59,"tag":438,"props":2238,"children":2239},{"class":440,"line":532},[2240,2244],{"type":59,"tag":438,"props":2241,"children":2242},{"style":467},[2243],{"type":64,"value":1180},{"type":59,"tag":438,"props":2245,"children":2246},{"style":663},[2247],{"type":64,"value":1185},{"type":59,"tag":438,"props":2249,"children":2250},{"class":440,"line":542},[2251],{"type":59,"tag":438,"props":2252,"children":2253},{"emptyLinePlaceholder":536},[2254],{"type":64,"value":539},{"type":59,"tag":438,"props":2256,"children":2257},{"class":440,"line":551},[2258],{"type":59,"tag":438,"props":2259,"children":2260},{"style":445},[2261],{"type":64,"value":2262},"\u002F\u002F CORRECT\n",{"type":59,"tag":438,"props":2264,"children":2265},{"class":440,"line":567},[2266,2270,2274,2278,2282,2286,2290,2294,2298,2302,2306,2310,2314,2318],{"type":59,"tag":438,"props":2267,"children":2268},{"style":455},[2269],{"type":64,"value":1024},{"type":59,"tag":438,"props":2271,"children":2272},{"style":467},[2273],{"type":64,"value":1029},{"type":59,"tag":438,"props":2275,"children":2276},{"style":663},[2277],{"type":64,"value":1034},{"type":59,"tag":438,"props":2279,"children":2280},{"style":467},[2281],{"type":64,"value":1039},{"type":59,"tag":438,"props":2283,"children":2284},{"style":663},[2285],{"type":64,"value":1044},{"type":59,"tag":438,"props":2287,"children":2288},{"style":467},[2289],{"type":64,"value":1049},{"type":59,"tag":438,"props":2291,"children":2292},{"style":467},[2293],{"type":64,"value":1054},{"type":59,"tag":438,"props":2295,"children":2296},{"style":877},[2297],{"type":64,"value":2181},{"type":59,"tag":438,"props":2299,"children":2300},{"style":663},[2301],{"type":64,"value":1063},{"type":59,"tag":438,"props":2303,"children":2304},{"style":467},[2305],{"type":64,"value":501},{"type":59,"tag":438,"props":2307,"children":2308},{"style":493},[2309],{"type":64,"value":2209},{"type":59,"tag":438,"props":2311,"children":2312},{"style":467},[2313],{"type":64,"value":501},{"type":59,"tag":438,"props":2315,"children":2316},{"style":467},[2317],{"type":64,"value":1039},{"type":59,"tag":438,"props":2319,"children":2320},{"style":663},[2321],{"type":64,"value":2322}," MyPanel)\n",{"type":59,"tag":60,"props":2324,"children":2325},{},[2326],{"type":64,"value":2327},"Vue plugins also work differently at call time -- you pass props:",{"type":59,"tag":427,"props":2329,"children":2331},{"className":429,"code":2330,"language":431,"meta":432,"style":432},"\u002F\u002F WRONG -- calling Plugin() with no args (React pattern)\nconst plugin = MyPlugin()\n\n\u002F\u002F CORRECT -- Vue Plugin takes props\nconst plugin = MyPlugin({ theme: 'dark' })\n",[2332],{"type":59,"tag":67,"props":2333,"children":2334},{"__ignoreMap":432},[2335,2343,2370,2377,2385],{"type":59,"tag":438,"props":2336,"children":2337},{"class":440,"line":441},[2338],{"type":59,"tag":438,"props":2339,"children":2340},{"style":445},[2341],{"type":64,"value":2342},"\u002F\u002F WRONG -- calling Plugin() with no args (React pattern)\n",{"type":59,"tag":438,"props":2344,"children":2345},{"class":440,"line":451},[2346,2350,2355,2360,2365],{"type":59,"tag":438,"props":2347,"children":2348},{"style":455},[2349],{"type":64,"value":1024},{"type":59,"tag":438,"props":2351,"children":2352},{"style":663},[2353],{"type":64,"value":2354}," plugin ",{"type":59,"tag":438,"props":2356,"children":2357},{"style":467},[2358],{"type":64,"value":2359},"=",{"type":59,"tag":438,"props":2361,"children":2362},{"style":877},[2363],{"type":64,"value":2364}," MyPlugin",{"type":59,"tag":438,"props":2366,"children":2367},{"style":663},[2368],{"type":64,"value":2369},"()\n",{"type":59,"tag":438,"props":2371,"children":2372},{"class":440,"line":473},[2373],{"type":59,"tag":438,"props":2374,"children":2375},{"emptyLinePlaceholder":536},[2376],{"type":64,"value":539},{"type":59,"tag":438,"props":2378,"children":2379},{"class":440,"line":523},[2380],{"type":59,"tag":438,"props":2381,"children":2382},{"style":445},[2383],{"type":64,"value":2384},"\u002F\u002F CORRECT -- Vue Plugin takes props\n",{"type":59,"tag":438,"props":2386,"children":2387},{"class":440,"line":532},[2388,2392,2396,2400,2404,2408,2412,2416,2420,2424,2428,2432,2436],{"type":59,"tag":438,"props":2389,"children":2390},{"style":455},[2391],{"type":64,"value":1024},{"type":59,"tag":438,"props":2393,"children":2394},{"style":663},[2395],{"type":64,"value":2354},{"type":59,"tag":438,"props":2397,"children":2398},{"style":467},[2399],{"type":64,"value":2359},{"type":59,"tag":438,"props":2401,"children":2402},{"style":877},[2403],{"type":64,"value":2364},{"type":59,"tag":438,"props":2405,"children":2406},{"style":663},[2407],{"type":64,"value":1063},{"type":59,"tag":438,"props":2409,"children":2410},{"style":467},[2411],{"type":64,"value":1708},{"type":59,"tag":438,"props":2413,"children":2414},{"style":477},[2415],{"type":64,"value":891},{"type":59,"tag":438,"props":2417,"children":2418},{"style":467},[2419],{"type":64,"value":318},{"type":59,"tag":438,"props":2421,"children":2422},{"style":467},[2423],{"type":64,"value":490},{"type":59,"tag":438,"props":2425,"children":2426},{"style":493},[2427],{"type":64,"value":515},{"type":59,"tag":438,"props":2429,"children":2430},{"style":467},[2431],{"type":64,"value":501},{"type":59,"tag":438,"props":2433,"children":2434},{"style":467},[2435],{"type":64,"value":670},{"type":59,"tag":438,"props":2437,"children":2438},{"style":663},[2439],{"type":64,"value":1185},{"type":59,"tag":293,"props":2441,"children":2443},{"id":2442},"critical-solid-render-prop-not-wrapped-in-function",[2444],{"type":64,"value":2445},"CRITICAL: Solid Render Prop Not Wrapped in Function",{"type":59,"tag":60,"props":2447,"children":2448},{},[2449,2451,2456],{"type":64,"value":2450},"When using Solid components, ",{"type":59,"tag":67,"props":2452,"children":2454},{"className":2453},[],[2455],{"type":64,"value":1823},{"type":64,"value":2457}," must be a function reference, not raw JSX.",{"type":59,"tag":427,"props":2459,"children":2461},{"className":817,"code":2460,"language":819,"meta":432,"style":432},"\u002F\u002F WRONG -- evaluates immediately, breaks Solid reactivity\ncreateSolidPlugin({\n  name: 'My Store',\n  Component: \u003CMyPanel \u002F>, \u002F\u002F This is JSX.Element, not a component function\n})\n\n\u002F\u002F CORRECT -- pass the component function itself\ncreateSolidPlugin({\n  name: 'My Store',\n  Component: (props) => \u003CMyPanel theme={props.theme} \u002F>,\n})\n\n\u002F\u002F ALSO CORRECT -- pass the component reference directly\ncreateSolidPlugin({\n  name: 'My Store',\n  Component: MyPanel,\n})\n",[2462],{"type":59,"tag":67,"props":2463,"children":2464},{"__ignoreMap":432},[2465,2473,2488,2515,2544,2555,2562,2570,2585,2612,2675,2686,2693,2701,2716,2743,2762],{"type":59,"tag":438,"props":2466,"children":2467},{"class":440,"line":441},[2468],{"type":59,"tag":438,"props":2469,"children":2470},{"style":445},[2471],{"type":64,"value":2472},"\u002F\u002F WRONG -- evaluates immediately, breaks Solid reactivity\n",{"type":59,"tag":438,"props":2474,"children":2475},{"class":440,"line":451},[2476,2480,2484],{"type":59,"tag":438,"props":2477,"children":2478},{"style":877},[2479],{"type":64,"value":1999},{"type":59,"tag":438,"props":2481,"children":2482},{"style":663},[2483],{"type":64,"value":1063},{"type":59,"tag":438,"props":2485,"children":2486},{"style":467},[2487],{"type":64,"value":1068},{"type":59,"tag":438,"props":2489,"children":2490},{"class":440,"line":473},[2491,2495,2499,2503,2507,2511],{"type":59,"tag":438,"props":2492,"children":2493},{"style":477},[2494],{"type":64,"value":1076},{"type":59,"tag":438,"props":2496,"children":2497},{"style":467},[2498],{"type":64,"value":318},{"type":59,"tag":438,"props":2500,"children":2501},{"style":467},[2502],{"type":64,"value":490},{"type":59,"tag":438,"props":2504,"children":2505},{"style":493},[2506],{"type":64,"value":1089},{"type":59,"tag":438,"props":2508,"children":2509},{"style":467},[2510],{"type":64,"value":501},{"type":59,"tag":438,"props":2512,"children":2513},{"style":467},[2514],{"type":64,"value":1098},{"type":59,"tag":438,"props":2516,"children":2517},{"class":440,"line":523},[2518,2522,2526,2530,2534,2539],{"type":59,"tag":438,"props":2519,"children":2520},{"style":477},[2521],{"type":64,"value":1159},{"type":59,"tag":438,"props":2523,"children":2524},{"style":467},[2525],{"type":64,"value":318},{"type":59,"tag":438,"props":2527,"children":2528},{"style":467},[2529],{"type":64,"value":958},{"type":59,"tag":438,"props":2531,"children":2532},{"style":461},[2533],{"type":64,"value":1533},{"type":59,"tag":438,"props":2535,"children":2536},{"style":467},[2537],{"type":64,"value":2538}," \u002F>,",{"type":59,"tag":438,"props":2540,"children":2541},{"style":445},[2542],{"type":64,"value":2543}," \u002F\u002F This is JSX.Element, not a component function\n",{"type":59,"tag":438,"props":2545,"children":2546},{"class":440,"line":532},[2547,2551],{"type":59,"tag":438,"props":2548,"children":2549},{"style":467},[2550],{"type":64,"value":1180},{"type":59,"tag":438,"props":2552,"children":2553},{"style":663},[2554],{"type":64,"value":1185},{"type":59,"tag":438,"props":2556,"children":2557},{"class":440,"line":542},[2558],{"type":59,"tag":438,"props":2559,"children":2560},{"emptyLinePlaceholder":536},[2561],{"type":64,"value":539},{"type":59,"tag":438,"props":2563,"children":2564},{"class":440,"line":551},[2565],{"type":59,"tag":438,"props":2566,"children":2567},{"style":445},[2568],{"type":64,"value":2569},"\u002F\u002F CORRECT -- pass the component function itself\n",{"type":59,"tag":438,"props":2571,"children":2572},{"class":440,"line":567},[2573,2577,2581],{"type":59,"tag":438,"props":2574,"children":2575},{"style":877},[2576],{"type":64,"value":1999},{"type":59,"tag":438,"props":2578,"children":2579},{"style":663},[2580],{"type":64,"value":1063},{"type":59,"tag":438,"props":2582,"children":2583},{"style":467},[2584],{"type":64,"value":1068},{"type":59,"tag":438,"props":2586,"children":2587},{"class":440,"line":624},[2588,2592,2596,2600,2604,2608],{"type":59,"tag":438,"props":2589,"children":2590},{"style":477},[2591],{"type":64,"value":1076},{"type":59,"tag":438,"props":2593,"children":2594},{"style":467},[2595],{"type":64,"value":318},{"type":59,"tag":438,"props":2597,"children":2598},{"style":467},[2599],{"type":64,"value":490},{"type":59,"tag":438,"props":2601,"children":2602},{"style":493},[2603],{"type":64,"value":1089},{"type":59,"tag":438,"props":2605,"children":2606},{"style":467},[2607],{"type":64,"value":501},{"type":59,"tag":438,"props":2609,"children":2610},{"style":467},[2611],{"type":64,"value":1098},{"type":59,"tag":438,"props":2613,"children":2614},{"class":440,"line":1130},[2615,2619,2623,2628,2633,2637,2642,2646,2650,2654,2658,2662,2666,2670],{"type":59,"tag":438,"props":2616,"children":2617},{"style":877},[2618],{"type":64,"value":1159},{"type":59,"tag":438,"props":2620,"children":2621},{"style":467},[2622],{"type":64,"value":318},{"type":59,"tag":438,"props":2624,"children":2625},{"style":467},[2626],{"type":64,"value":2627}," (",{"type":59,"tag":438,"props":2629,"children":2630},{"style":888},[2631],{"type":64,"value":2632},"props",{"type":59,"tag":438,"props":2634,"children":2635},{"style":467},[2636],{"type":64,"value":1451},{"type":59,"tag":438,"props":2638,"children":2639},{"style":455},[2640],{"type":64,"value":2641}," =>",{"type":59,"tag":438,"props":2643,"children":2644},{"style":467},[2645],{"type":64,"value":958},{"type":59,"tag":438,"props":2647,"children":2648},{"style":461},[2649],{"type":64,"value":1533},{"type":59,"tag":438,"props":2651,"children":2652},{"style":455},[2653],{"type":64,"value":891},{"type":59,"tag":438,"props":2655,"children":2656},{"style":467},[2657],{"type":64,"value":973},{"type":59,"tag":438,"props":2659,"children":2660},{"style":663},[2661],{"type":64,"value":2632},{"type":59,"tag":438,"props":2663,"children":2664},{"style":467},[2665],{"type":64,"value":1234},{"type":59,"tag":438,"props":2667,"children":2668},{"style":663},[2669],{"type":64,"value":978},{"type":59,"tag":438,"props":2671,"children":2672},{"style":467},[2673],{"type":64,"value":2674},"} \u002F>,\n",{"type":59,"tag":438,"props":2676,"children":2677},{"class":440,"line":1153},[2678,2682],{"type":59,"tag":438,"props":2679,"children":2680},{"style":467},[2681],{"type":64,"value":1180},{"type":59,"tag":438,"props":2683,"children":2684},{"style":663},[2685],{"type":64,"value":1185},{"type":59,"tag":438,"props":2687,"children":2688},{"class":440,"line":1174},[2689],{"type":59,"tag":438,"props":2690,"children":2691},{"emptyLinePlaceholder":536},[2692],{"type":64,"value":539},{"type":59,"tag":438,"props":2694,"children":2695},{"class":440,"line":1188},[2696],{"type":59,"tag":438,"props":2697,"children":2698},{"style":445},[2699],{"type":64,"value":2700},"\u002F\u002F ALSO CORRECT -- pass the component reference directly\n",{"type":59,"tag":438,"props":2702,"children":2703},{"class":440,"line":1196},[2704,2708,2712],{"type":59,"tag":438,"props":2705,"children":2706},{"style":877},[2707],{"type":64,"value":1999},{"type":59,"tag":438,"props":2709,"children":2710},{"style":663},[2711],{"type":64,"value":1063},{"type":59,"tag":438,"props":2713,"children":2714},{"style":467},[2715],{"type":64,"value":1068},{"type":59,"tag":438,"props":2717,"children":2718},{"class":440,"line":1205},[2719,2723,2727,2731,2735,2739],{"type":59,"tag":438,"props":2720,"children":2721},{"style":477},[2722],{"type":64,"value":1076},{"type":59,"tag":438,"props":2724,"children":2725},{"style":467},[2726],{"type":64,"value":318},{"type":59,"tag":438,"props":2728,"children":2729},{"style":467},[2730],{"type":64,"value":490},{"type":59,"tag":438,"props":2732,"children":2733},{"style":493},[2734],{"type":64,"value":1089},{"type":59,"tag":438,"props":2736,"children":2737},{"style":467},[2738],{"type":64,"value":501},{"type":59,"tag":438,"props":2740,"children":2741},{"style":467},[2742],{"type":64,"value":1098},{"type":59,"tag":438,"props":2744,"children":2745},{"class":440,"line":1223},[2746,2750,2754,2758],{"type":59,"tag":438,"props":2747,"children":2748},{"style":477},[2749],{"type":64,"value":1159},{"type":59,"tag":438,"props":2751,"children":2752},{"style":467},[2753],{"type":64,"value":318},{"type":59,"tag":438,"props":2755,"children":2756},{"style":663},[2757],{"type":64,"value":1656},{"type":59,"tag":438,"props":2759,"children":2760},{"style":467},[2761],{"type":64,"value":1098},{"type":59,"tag":438,"props":2763,"children":2764},{"class":440,"line":1570},[2765,2769],{"type":59,"tag":438,"props":2766,"children":2767},{"style":467},[2768],{"type":64,"value":1180},{"type":59,"tag":438,"props":2770,"children":2771},{"style":663},[2772],{"type":64,"value":1185},{"type":59,"tag":293,"props":2774,"children":2776},{"id":2775},"high-ignoring-noop-variant-for-production",[2777],{"type":64,"value":2778},"HIGH: Ignoring NoOp Variant for Production",{"type":59,"tag":60,"props":2780,"children":2781},{},[2782,2784,2789],{"type":64,"value":2783},"The factory returns ",{"type":59,"tag":67,"props":2785,"children":2787},{"className":2786},[],[2788],{"type":64,"value":130},{"type":64,"value":2790},". Both must be destructured and used for proper tree-shaking.",{"type":59,"tag":427,"props":2792,"children":2794},{"className":817,"code":2793,"language":819,"meta":432,"style":432},"\u002F\u002F WRONG -- NoOp variant discarded, devtools code ships to production\nconst [MyPlugin] = createReactPlugin({ name: 'Store', Component: MyPanel })\n\n\u002F\u002F CORRECT -- conditionally use NoOp in production\nconst [MyPlugin, NoOpPlugin] = createReactPlugin({\n  name: 'Store',\n  Component: MyPanel,\n})\nconst ActivePlugin =\n  process.env.NODE_ENV === 'development' ? MyPlugin : NoOpPlugin\n",[2795],{"type":59,"tag":67,"props":2796,"children":2797},{"__ignoreMap":432},[2798,2806,2888,2895,2903,2946,2973,2992,3003,3018],{"type":59,"tag":438,"props":2799,"children":2800},{"class":440,"line":441},[2801],{"type":59,"tag":438,"props":2802,"children":2803},{"style":445},[2804],{"type":64,"value":2805},"\u002F\u002F WRONG -- NoOp variant discarded, devtools code ships to production\n",{"type":59,"tag":438,"props":2807,"children":2808},{"class":440,"line":451},[2809,2813,2817,2821,2825,2829,2833,2837,2841,2845,2849,2853,2858,2862,2866,2871,2875,2880,2884],{"type":59,"tag":438,"props":2810,"children":2811},{"style":455},[2812],{"type":64,"value":1024},{"type":59,"tag":438,"props":2814,"children":2815},{"style":467},[2816],{"type":64,"value":1029},{"type":59,"tag":438,"props":2818,"children":2819},{"style":663},[2820],{"type":64,"value":1034},{"type":59,"tag":438,"props":2822,"children":2823},{"style":467},[2824],{"type":64,"value":1049},{"type":59,"tag":438,"props":2826,"children":2827},{"style":467},[2828],{"type":64,"value":1054},{"type":59,"tag":438,"props":2830,"children":2831},{"style":877},[2832],{"type":64,"value":839},{"type":59,"tag":438,"props":2834,"children":2835},{"style":663},[2836],{"type":64,"value":1063},{"type":59,"tag":438,"props":2838,"children":2839},{"style":467},[2840],{"type":64,"value":1708},{"type":59,"tag":438,"props":2842,"children":2843},{"style":477},[2844],{"type":64,"value":1713},{"type":59,"tag":438,"props":2846,"children":2847},{"style":467},[2848],{"type":64,"value":318},{"type":59,"tag":438,"props":2850,"children":2851},{"style":467},[2852],{"type":64,"value":490},{"type":59,"tag":438,"props":2854,"children":2855},{"style":493},[2856],{"type":64,"value":2857},"Store",{"type":59,"tag":438,"props":2859,"children":2860},{"style":467},[2861],{"type":64,"value":501},{"type":59,"tag":438,"props":2863,"children":2864},{"style":467},[2865],{"type":64,"value":1039},{"type":59,"tag":438,"props":2867,"children":2868},{"style":477},[2869],{"type":64,"value":2870}," Component",{"type":59,"tag":438,"props":2872,"children":2873},{"style":467},[2874],{"type":64,"value":318},{"type":59,"tag":438,"props":2876,"children":2877},{"style":663},[2878],{"type":64,"value":2879}," MyPanel ",{"type":59,"tag":438,"props":2881,"children":2882},{"style":467},[2883],{"type":64,"value":1180},{"type":59,"tag":438,"props":2885,"children":2886},{"style":663},[2887],{"type":64,"value":1185},{"type":59,"tag":438,"props":2889,"children":2890},{"class":440,"line":473},[2891],{"type":59,"tag":438,"props":2892,"children":2893},{"emptyLinePlaceholder":536},[2894],{"type":64,"value":539},{"type":59,"tag":438,"props":2896,"children":2897},{"class":440,"line":523},[2898],{"type":59,"tag":438,"props":2899,"children":2900},{"style":445},[2901],{"type":64,"value":2902},"\u002F\u002F CORRECT -- conditionally use NoOp in production\n",{"type":59,"tag":438,"props":2904,"children":2905},{"class":440,"line":532},[2906,2910,2914,2918,2922,2926,2930,2934,2938,2942],{"type":59,"tag":438,"props":2907,"children":2908},{"style":455},[2909],{"type":64,"value":1024},{"type":59,"tag":438,"props":2911,"children":2912},{"style":467},[2913],{"type":64,"value":1029},{"type":59,"tag":438,"props":2915,"children":2916},{"style":663},[2917],{"type":64,"value":1034},{"type":59,"tag":438,"props":2919,"children":2920},{"style":467},[2921],{"type":64,"value":1039},{"type":59,"tag":438,"props":2923,"children":2924},{"style":663},[2925],{"type":64,"value":1044},{"type":59,"tag":438,"props":2927,"children":2928},{"style":467},[2929],{"type":64,"value":1049},{"type":59,"tag":438,"props":2931,"children":2932},{"style":467},[2933],{"type":64,"value":1054},{"type":59,"tag":438,"props":2935,"children":2936},{"style":877},[2937],{"type":64,"value":839},{"type":59,"tag":438,"props":2939,"children":2940},{"style":663},[2941],{"type":64,"value":1063},{"type":59,"tag":438,"props":2943,"children":2944},{"style":467},[2945],{"type":64,"value":1068},{"type":59,"tag":438,"props":2947,"children":2948},{"class":440,"line":542},[2949,2953,2957,2961,2965,2969],{"type":59,"tag":438,"props":2950,"children":2951},{"style":477},[2952],{"type":64,"value":1076},{"type":59,"tag":438,"props":2954,"children":2955},{"style":467},[2956],{"type":64,"value":318},{"type":59,"tag":438,"props":2958,"children":2959},{"style":467},[2960],{"type":64,"value":490},{"type":59,"tag":438,"props":2962,"children":2963},{"style":493},[2964],{"type":64,"value":2857},{"type":59,"tag":438,"props":2966,"children":2967},{"style":467},[2968],{"type":64,"value":501},{"type":59,"tag":438,"props":2970,"children":2971},{"style":467},[2972],{"type":64,"value":1098},{"type":59,"tag":438,"props":2974,"children":2975},{"class":440,"line":551},[2976,2980,2984,2988],{"type":59,"tag":438,"props":2977,"children":2978},{"style":477},[2979],{"type":64,"value":1159},{"type":59,"tag":438,"props":2981,"children":2982},{"style":467},[2983],{"type":64,"value":318},{"type":59,"tag":438,"props":2985,"children":2986},{"style":663},[2987],{"type":64,"value":1656},{"type":59,"tag":438,"props":2989,"children":2990},{"style":467},[2991],{"type":64,"value":1098},{"type":59,"tag":438,"props":2993,"children":2994},{"class":440,"line":567},[2995,2999],{"type":59,"tag":438,"props":2996,"children":2997},{"style":467},[2998],{"type":64,"value":1180},{"type":59,"tag":438,"props":3000,"children":3001},{"style":663},[3002],{"type":64,"value":1185},{"type":59,"tag":438,"props":3004,"children":3005},{"class":440,"line":624},[3006,3010,3014],{"type":59,"tag":438,"props":3007,"children":3008},{"style":455},[3009],{"type":64,"value":1024},{"type":59,"tag":438,"props":3011,"children":3012},{"style":663},[3013],{"type":64,"value":1215},{"type":59,"tag":438,"props":3015,"children":3016},{"style":467},[3017],{"type":64,"value":1220},{"type":59,"tag":438,"props":3019,"children":3020},{"class":440,"line":1130},[3021,3025,3029,3033,3037,3041,3045,3049,3053,3057,3061,3065,3069],{"type":59,"tag":438,"props":3022,"children":3023},{"style":663},[3024],{"type":64,"value":1229},{"type":59,"tag":438,"props":3026,"children":3027},{"style":467},[3028],{"type":64,"value":1234},{"type":59,"tag":438,"props":3030,"children":3031},{"style":663},[3032],{"type":64,"value":1239},{"type":59,"tag":438,"props":3034,"children":3035},{"style":467},[3036],{"type":64,"value":1234},{"type":59,"tag":438,"props":3038,"children":3039},{"style":663},[3040],{"type":64,"value":1248},{"type":59,"tag":438,"props":3042,"children":3043},{"style":467},[3044],{"type":64,"value":1253},{"type":59,"tag":438,"props":3046,"children":3047},{"style":467},[3048],{"type":64,"value":490},{"type":59,"tag":438,"props":3050,"children":3051},{"style":493},[3052],{"type":64,"value":1262},{"type":59,"tag":438,"props":3054,"children":3055},{"style":467},[3056],{"type":64,"value":501},{"type":59,"tag":438,"props":3058,"children":3059},{"style":467},[3060],{"type":64,"value":1271},{"type":59,"tag":438,"props":3062,"children":3063},{"style":663},[3064],{"type":64,"value":1276},{"type":59,"tag":438,"props":3066,"children":3067},{"style":467},[3068],{"type":64,"value":318},{"type":59,"tag":438,"props":3070,"children":3071},{"style":663},[3072],{"type":64,"value":1285},{"type":59,"tag":293,"props":3074,"children":3076},{"id":3075},"medium-not-passing-theme-prop-to-panel-component",[3077],{"type":64,"value":3078},"MEDIUM: Not Passing Theme Prop to Panel Component",{"type":59,"tag":60,"props":3080,"children":3081},{},[3082,3087,3089,3094],{"type":59,"tag":67,"props":3083,"children":3085},{"className":3084},[],[3086],{"type":64,"value":425},{"type":64,"value":3088}," includes ",{"type":59,"tag":67,"props":3090,"children":3092},{"className":3091},[],[3093],{"type":64,"value":978},{"type":64,"value":3095},". The devtools shell passes it so panels can match light\u002Fdark mode. If your component ignores it, the panel will not adapt to theme changes.",{"type":59,"tag":427,"props":3097,"children":3099},{"className":817,"code":3098,"language":819,"meta":432,"style":432},"\u002F\u002F WRONG -- theme is ignored\nconst Component = () => \u003Cdiv>My Panel\u003C\u002Fdiv>\n\n\u002F\u002F CORRECT -- use theme for styling\nconst Component = ({ theme }: DevtoolsPanelProps) => (\n  \u003Cdiv className={theme === 'dark' ? 'dark-mode' : 'light-mode'}>My Panel\u003C\u002Fdiv>\n)\n",[3100],{"type":59,"tag":67,"props":3101,"children":3102},{"__ignoreMap":432},[3103,3111,3165,3172,3180,3225,3321],{"type":59,"tag":438,"props":3104,"children":3105},{"class":440,"line":441},[3106],{"type":59,"tag":438,"props":3107,"children":3108},{"style":445},[3109],{"type":64,"value":3110},"\u002F\u002F WRONG -- theme is ignored\n",{"type":59,"tag":438,"props":3112,"children":3113},{"class":440,"line":451},[3114,3118,3122,3126,3131,3135,3139,3143,3148,3153,3157,3161],{"type":59,"tag":438,"props":3115,"children":3116},{"style":455},[3117],{"type":64,"value":1024},{"type":59,"tag":438,"props":3119,"children":3120},{"style":663},[3121],{"type":64,"value":1740},{"type":59,"tag":438,"props":3123,"children":3124},{"style":467},[3125],{"type":64,"value":2359},{"type":59,"tag":438,"props":3127,"children":3128},{"style":467},[3129],{"type":64,"value":3130}," ()",{"type":59,"tag":438,"props":3132,"children":3133},{"style":455},[3134],{"type":64,"value":2641},{"type":59,"tag":438,"props":3136,"children":3137},{"style":467},[3138],{"type":64,"value":958},{"type":59,"tag":438,"props":3140,"children":3141},{"style":477},[3142],{"type":64,"value":963},{"type":59,"tag":438,"props":3144,"children":3145},{"style":467},[3146],{"type":64,"value":3147},">",{"type":59,"tag":438,"props":3149,"children":3150},{"style":663},[3151],{"type":64,"value":3152},"My Panel",{"type":59,"tag":438,"props":3154,"children":3155},{"style":467},[3156],{"type":64,"value":993},{"type":59,"tag":438,"props":3158,"children":3159},{"style":477},[3160],{"type":64,"value":963},{"type":59,"tag":438,"props":3162,"children":3163},{"style":467},[3164],{"type":64,"value":1002},{"type":59,"tag":438,"props":3166,"children":3167},{"class":440,"line":473},[3168],{"type":59,"tag":438,"props":3169,"children":3170},{"emptyLinePlaceholder":536},[3171],{"type":64,"value":539},{"type":59,"tag":438,"props":3173,"children":3174},{"class":440,"line":523},[3175],{"type":59,"tag":438,"props":3176,"children":3177},{"style":445},[3178],{"type":64,"value":3179},"\u002F\u002F CORRECT -- use theme for styling\n",{"type":59,"tag":438,"props":3181,"children":3182},{"class":440,"line":532},[3183,3187,3191,3195,3200,3204,3208,3212,3216,3220],{"type":59,"tag":438,"props":3184,"children":3185},{"style":455},[3186],{"type":64,"value":1024},{"type":59,"tag":438,"props":3188,"children":3189},{"style":663},[3190],{"type":64,"value":1740},{"type":59,"tag":438,"props":3192,"children":3193},{"style":467},[3194],{"type":64,"value":2359},{"type":59,"tag":438,"props":3196,"children":3197},{"style":467},[3198],{"type":64,"value":3199}," ({",{"type":59,"tag":438,"props":3201,"children":3202},{"style":888},[3203],{"type":64,"value":891},{"type":59,"tag":438,"props":3205,"children":3206},{"style":467},[3207],{"type":64,"value":896},{"type":59,"tag":438,"props":3209,"children":3210},{"style":461},[3211],{"type":64,"value":464},{"type":59,"tag":438,"props":3213,"children":3214},{"style":467},[3215],{"type":64,"value":1451},{"type":59,"tag":438,"props":3217,"children":3218},{"style":455},[3219],{"type":64,"value":2641},{"type":59,"tag":438,"props":3221,"children":3222},{"style":663},[3223],{"type":64,"value":3224}," (\n",{"type":59,"tag":438,"props":3226,"children":3227},{"class":440,"line":542},[3228,3233,3237,3241,3245,3250,3254,3258,3262,3266,3270,3274,3279,3283,3288,3292,3297,3301,3305,3309,3313,3317],{"type":59,"tag":438,"props":3229,"children":3230},{"style":467},[3231],{"type":64,"value":3232},"  \u003C",{"type":59,"tag":438,"props":3234,"children":3235},{"style":477},[3236],{"type":64,"value":963},{"type":59,"tag":438,"props":3238,"children":3239},{"style":455},[3240],{"type":64,"value":968},{"type":59,"tag":438,"props":3242,"children":3243},{"style":467},[3244],{"type":64,"value":973},{"type":59,"tag":438,"props":3246,"children":3247},{"style":663},[3248],{"type":64,"value":3249},"theme ",{"type":59,"tag":438,"props":3251,"children":3252},{"style":467},[3253],{"type":64,"value":1253},{"type":59,"tag":438,"props":3255,"children":3256},{"style":467},[3257],{"type":64,"value":490},{"type":59,"tag":438,"props":3259,"children":3260},{"style":493},[3261],{"type":64,"value":515},{"type":59,"tag":438,"props":3263,"children":3264},{"style":467},[3265],{"type":64,"value":501},{"type":59,"tag":438,"props":3267,"children":3268},{"style":467},[3269],{"type":64,"value":1271},{"type":59,"tag":438,"props":3271,"children":3272},{"style":467},[3273],{"type":64,"value":490},{"type":59,"tag":438,"props":3275,"children":3276},{"style":493},[3277],{"type":64,"value":3278},"dark-mode",{"type":59,"tag":438,"props":3280,"children":3281},{"style":467},[3282],{"type":64,"value":501},{"type":59,"tag":438,"props":3284,"children":3285},{"style":467},[3286],{"type":64,"value":3287}," :",{"type":59,"tag":438,"props":3289,"children":3290},{"style":467},[3291],{"type":64,"value":490},{"type":59,"tag":438,"props":3293,"children":3294},{"style":493},[3295],{"type":64,"value":3296},"light-mode",{"type":59,"tag":438,"props":3298,"children":3299},{"style":467},[3300],{"type":64,"value":501},{"type":59,"tag":438,"props":3302,"children":3303},{"style":467},[3304],{"type":64,"value":983},{"type":59,"tag":438,"props":3306,"children":3307},{"style":663},[3308],{"type":64,"value":3152},{"type":59,"tag":438,"props":3310,"children":3311},{"style":467},[3312],{"type":64,"value":993},{"type":59,"tag":438,"props":3314,"children":3315},{"style":477},[3316],{"type":64,"value":963},{"type":59,"tag":438,"props":3318,"children":3319},{"style":467},[3320],{"type":64,"value":1002},{"type":59,"tag":438,"props":3322,"children":3323},{"class":440,"line":551},[3324],{"type":59,"tag":438,"props":3325,"children":3326},{"style":663},[3327],{"type":64,"value":1185},{"type":59,"tag":172,"props":3329,"children":3331},{"id":3330},"design-tension",[3332],{"type":64,"value":3333},"Design Tension",{"type":59,"tag":60,"props":3335,"children":3336},{},[3337],{"type":64,"value":3338},"The core architecture is framework-agnostic, but each framework has different idioms:",{"type":59,"tag":179,"props":3340,"children":3341},{},[3342,3354,3367],{"type":59,"tag":110,"props":3343,"children":3344},{},[3345,3347,3352],{"type":64,"value":3346},"React\u002FPreact use an options object with ",{"type":59,"tag":67,"props":3348,"children":3350},{"className":3349},[],[3351],{"type":64,"value":1823},{"type":64,"value":3353}," as a JSX function component.",{"type":59,"tag":110,"props":3355,"children":3356},{},[3357,3359,3365],{"type":64,"value":3358},"Vue uses positional arguments with a ",{"type":59,"tag":67,"props":3360,"children":3362},{"className":3361},[],[3363],{"type":64,"value":3364},"DefineComponent",{"type":64,"value":3366}," and passes props through.",{"type":59,"tag":110,"props":3368,"children":3369},{},[3370],{"type":64,"value":3371},"Solid uses the same options API as React but with Solid's JSX and reactivity model.",{"type":59,"tag":60,"props":3373,"children":3374},{},[3375],{"type":64,"value":3376},"Agents trained on React patterns will get Vue wrong. Always check the import path to determine which factory API to use.",{"type":59,"tag":172,"props":3378,"children":3380},{"id":3379},"cross-references",[3381],{"type":64,"value":3382},"Cross-References",{"type":59,"tag":179,"props":3384,"children":3385},{},[3386,3396],{"type":59,"tag":110,"props":3387,"children":3388},{},[3389,3394],{"type":59,"tag":114,"props":3390,"children":3391},{},[3392],{"type":64,"value":3393},"devtools-plugin-panel",{"type":64,"value":3395}," -- Build your panel component first, then wrap it with the appropriate framework adapter.",{"type":59,"tag":110,"props":3397,"children":3398},{},[3399,3404],{"type":59,"tag":114,"props":3400,"children":3401},{},[3402],{"type":64,"value":3403},"devtools-production",{"type":64,"value":3405}," -- NoOp variants are the primary mechanism for stripping devtools from production bundles.",{"type":59,"tag":172,"props":3407,"children":3409},{"id":3408},"reference-files",[3410],{"type":64,"value":3411},"Reference Files",{"type":59,"tag":179,"props":3413,"children":3414},{},[3415,3426,3437,3448],{"type":59,"tag":110,"props":3416,"children":3417},{},[3418,3424],{"type":59,"tag":67,"props":3419,"children":3421},{"className":3420},[],[3422],{"type":64,"value":3423},"references\u002Freact.md",{"type":64,"value":3425}," -- Full React factory API and examples",{"type":59,"tag":110,"props":3427,"children":3428},{},[3429,3435],{"type":59,"tag":67,"props":3430,"children":3432},{"className":3431},[],[3433],{"type":64,"value":3434},"references\u002Fvue.md",{"type":64,"value":3436}," -- Full Vue factory API and examples (different from React)",{"type":59,"tag":110,"props":3438,"children":3439},{},[3440,3446],{"type":59,"tag":67,"props":3441,"children":3443},{"className":3442},[],[3444],{"type":64,"value":3445},"references\u002Fsolid.md",{"type":64,"value":3447}," -- Full Solid factory API and examples",{"type":59,"tag":110,"props":3449,"children":3450},{},[3451,3457],{"type":59,"tag":67,"props":3452,"children":3454},{"className":3453},[],[3455],{"type":64,"value":3456},"references\u002Fpreact.md",{"type":64,"value":3458}," -- Full Preact factory API and examples",{"type":59,"tag":3460,"props":3461,"children":3462},"style",{},[3463],{"type":64,"value":3464},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":3466,"total":3608},[3467,3483,3495,3507,3522,3534,3544,3554,3567,3577,3588,3598],{"slug":3468,"name":3468,"fn":3469,"description":3470,"org":3471,"tags":3472,"stars":3480,"repoUrl":3481,"updatedAt":3482},"aggregation","perform data aggregation in TanStack Table","Aggregate TanStack Table columns independently of grouping, including grand totals, caller-selected row totals, multiple keyed aggregations, custom context-based definitions, grouped merges, manual values, and worker constraints.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3473,3476,3479],{"name":3474,"slug":3475,"type":15},"Data Analysis","data-analysis",{"name":3477,"slug":3478,"type":15},"Frontend","frontend",{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:59.429787",{"slug":3484,"name":3484,"fn":3485,"description":3486,"org":3487,"tags":3488,"stars":3480,"repoUrl":3481,"updatedAt":3494},"api-not-found","diagnose TanStack Table API errors","Diagnose missing TanStack Table v9 exports, options, state slices, and instance methods. Load before inventing an API when code sees a type error, undefined feature method, absent object key, adapter mismatch, or v8-shaped example.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3489,3492,3493],{"name":3490,"slug":3491,"type":15},"Debugging","debugging",{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":3496,"name":3496,"fn":3497,"description":3498,"org":3499,"tags":3500,"stars":3480,"repoUrl":3481,"updatedAt":3506},"cell-selection","select rectangular cell ranges in tables","Select rectangular cell ranges with cellSelectionFeature: two-corner range state keyed by row and column id, mousedown\u002Fmouseenter handlers, selection edges, render-order resolution under pinning, and autoResetCellSelection. Load when ranges widen unexpectedly after sorting or column reordering, when a drag re-renders the whole table, or when building copy-to-clipboard from a selection.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3501,3502,3503],{"name":3474,"slug":3475,"type":15},{"name":9,"slug":8,"type":15},{"name":3504,"slug":3505,"type":15},"UI Components","ui-components","2026-07-30T05:25:38.403427",{"slug":3508,"name":3508,"fn":3509,"description":3510,"org":3511,"tags":3512,"stars":3480,"repoUrl":3481,"updatedAt":3521},"client-vs-server","manage TanStack Table data pipelines","Choose client or server ownership for filtering, grouping, sorting, expanding, and pagination in TanStack Table v9. Load for manual* flags, mixed pipelines, server counts, or deciding which dataset each row-model stage receives.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3513,3516,3517,3520],{"name":3514,"slug":3515,"type":15},"Data Pipeline","data-pipeline",{"name":3477,"slug":3478,"type":15},{"name":3518,"slug":3519,"type":15},"Performance","performance",{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":3523,"name":3523,"fn":3524,"description":3525,"org":3526,"tags":3527,"stars":3480,"repoUrl":3481,"updatedAt":3533},"column-faceting","build faceted filter UIs","Build faceted filter UIs with columnFacetingFeature, facetedRowModel, facetedUniqueValues, and facetedMinMaxValues. Load for facet counts, numeric ranges, own-filter exclusion, or server-page facet completeness.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3528,3531,3532],{"name":3529,"slug":3530,"type":15},"Data Visualization","data-visualization",{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":3535,"name":3535,"fn":3536,"description":3537,"org":3538,"tags":3539,"stars":3480,"repoUrl":3481,"updatedAt":3543},"column-filtering","implement column filtering in TanStack Table","Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client\u002Fserver ownership.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3540,3541,3542],{"name":3474,"slug":3475,"type":15},{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":3545,"name":3545,"fn":3546,"description":3547,"org":3548,"tags":3549,"stars":3480,"repoUrl":3481,"updatedAt":3553},"column-ordering","manage TanStack Table column ordering","Control TanStack Table v9 leaf columnOrder with stable IDs while accounting for pinning regions, visibility, and groupedColumnMode precedence. Load for drag-and-drop columns or rendered order that differs from state.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3550,3551,3552],{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},{"name":3504,"slug":3505,"type":15},"2026-07-30T05:26:03.37801",{"slug":3555,"name":3555,"fn":3556,"description":3557,"org":3558,"tags":3559,"stars":3480,"repoUrl":3481,"updatedAt":3566},"column-pinning","configure column pinning in TanStack Table","Pin columns into logical start, center, and end regions with columnPinningFeature and renderer-owned sticky CSS. Load for RTL offsets, z-index, backgrounds, overflow, widths, gaps, or overlaps.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3560,3563,3564,3565],{"name":3561,"slug":3562,"type":15},"CSS","css",{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},{"name":3504,"slug":3505,"type":15},"2026-07-30T05:25:55.377366",{"slug":3568,"name":3568,"fn":3569,"description":3570,"org":3571,"tags":3572,"stars":3480,"repoUrl":3481,"updatedAt":3576},"column-resizing","implement column resizing in TanStack Table","Wire columnResizingFeature, header.getResizeHandler, resize mode and direction, pointer or touch events, and performant CSS-variable updates. Load when resize state changes but widths do not, or large tables resize slowly.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3573,3574,3575],{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},{"name":3504,"slug":3505,"type":15},"2026-07-30T05:25:51.400011",{"slug":3578,"name":3578,"fn":3579,"description":3580,"org":3581,"tags":3582,"stars":3480,"repoUrl":3481,"updatedAt":3587},"column-sizing","configure column sizing in TanStack Table","Use columnSizingFeature numeric size, minSize, maxSize, getSize, getStart, getAfter, and total-size APIs in table, grid, or flex CSS. Load for auto or percentage misconceptions and sizing\u002Fpinning layout mismatch.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3583,3584,3585,3586],{"name":3561,"slug":3562,"type":15},{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},{"name":3504,"slug":3505,"type":15},"2026-07-30T05:25:48.703799",{"slug":3589,"name":3589,"fn":3590,"description":3591,"org":3592,"tags":3593,"stars":3480,"repoUrl":3481,"updatedAt":3597},"column-visibility","manage column visibility in TanStack Table","Hide columns with columnVisibilityFeature while rendering visibility-aware header, column, and cell collections. Load when hidden columns remain in the DOM, false-versus-absent state is confused, or enableHiding is misunderstood.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3594,3595,3596],{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},{"name":3504,"slug":3505,"type":15},"2026-07-30T05:25:47.367943",{"slug":3599,"name":3599,"fn":3600,"description":3601,"org":3602,"tags":3603,"stars":3480,"repoUrl":3481,"updatedAt":3607},"core","build data grids with TanStack Table","Use TanStack Table v9 as a headless data-grid state and row-processing engine. Load for first-table architecture, stable data and columns, row numbering with getDisplayIndex, semantic rendering, framework adapter choice, or deciding what Table owns versus the renderer.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3604,3605,3606],{"name":3474,"slug":3475,"type":15},{"name":3477,"slug":3478,"type":15},{"name":3504,"slug":3505,"type":15},"2026-07-30T05:25:52.366295",125,{"items":3610,"total":624},[3611,3621,3633,3645,3654,3665,3675],{"slug":3612,"name":3612,"fn":3613,"description":3614,"org":3615,"tags":3616,"stars":29,"repoUrl":30,"updatedAt":3620},"devtools-app-setup","configure TanStack Devtools for applications","Install TanStack Devtools, pick framework adapter (React\u002FVue\u002FSolid\u002FPreact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3617,3618,3619],{"name":3490,"slug":3491,"type":15},{"name":3477,"slug":3478,"type":15},{"name":9,"slug":8,"type":15},"2026-07-16T06:04:05.544655",{"slug":3622,"name":3622,"fn":3623,"description":3624,"org":3625,"tags":3626,"stars":29,"repoUrl":30,"updatedAt":3632},"devtools-bidirectional","implement bidirectional devtools communication","Two-way event patterns between devtools panel and application. App-to-devtools observation, devtools-to-app commands, time-travel debugging with snapshots and revert. structuredClone for snapshot safety, distinct event suffixes for observation vs commands, serializable payloads only.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3627,3628,3631],{"name":3490,"slug":3491,"type":15},{"name":3629,"slug":3630,"type":15},"Observability","observability",{"name":9,"slug":8,"type":15},"2026-07-16T06:04:40.486044",{"slug":3634,"name":3634,"fn":3635,"description":3636,"org":3637,"tags":3638,"stars":29,"repoUrl":30,"updatedAt":3644},"devtools-event-client","implement typed event clients for libraries","Create typed EventClient for a library. Define event maps with typed payloads, pluginId auto-prepend namespacing, emit()\u002Fon()\u002FonAll()\u002FonAllPluginEvents() API. Connection lifecycle (5 retries, 300ms), event queuing, enabled\u002Fdisabled state, SSR fallbacks, singleton pattern. Unique pluginId requirement to avoid event collisions.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3639,3642,3643],{"name":3640,"slug":3641,"type":15},"API Development","api-development",{"name":23,"slug":24,"type":15},{"name":9,"slug":8,"type":15},"2026-07-16T06:04:34.254605",{"slug":4,"name":4,"fn":5,"description":6,"org":3646,"tags":3647,"stars":29,"repoUrl":30,"updatedAt":31},{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3648,3649,3650,3651,3652,3653],{"name":23,"slug":24,"type":15},{"name":26,"slug":27,"type":15},{"name":13,"slug":14,"type":15},{"name":20,"slug":21,"type":15},{"name":9,"slug":8,"type":15},{"name":17,"slug":18,"type":15},{"slug":3655,"name":3655,"fn":3656,"description":3657,"org":3658,"tags":3659,"stars":29,"repoUrl":30,"updatedAt":3664},"devtools-instrumentation","instrument library code for devtools","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\u002Fclient event bridging.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3660,3661,3662,3663],{"name":3490,"slug":3491,"type":15},{"name":23,"slug":24,"type":15},{"name":3629,"slug":3630,"type":15},{"name":9,"slug":8,"type":15},"2026-07-16T06:04:33.21467",{"slug":3666,"name":3666,"fn":3667,"description":3668,"org":3669,"tags":3670,"stars":29,"repoUrl":30,"updatedAt":3674},"devtools-marketplace","publish plugins to TanStack Devtools Marketplace","Publish plugin to npm and submit to TanStack Devtools Marketplace. PluginMetadata registry format, plugin-registry.ts, pluginImport (importName, type), requires (packageName, minVersion), framework tagging, multi-framework submissions, featured plugins.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3671,3673],{"name":3672,"slug":3672,"type":15},"npm",{"name":9,"slug":8,"type":15},"2026-07-16T06:04:09.110642",{"slug":3393,"name":3393,"fn":3676,"description":3677,"org":3678,"tags":3679,"stars":29,"repoUrl":30,"updatedAt":3684},"build TanStack devtools panels","Build devtools panel components that display emitted event data. Listen via EventClient.on(), handle theme (light\u002Fdark), use @tanstack\u002Fdevtools-ui components. Plugin registration (name, render, id, defaultOpen), lifecycle (mount, activate, destroy), max 3 active plugins. Two paths: Solid.js core with devtools-ui for multi-framework support, or framework-specific panels.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":9},[3680,3681,3682,3683],{"name":3477,"slug":3478,"type":15},{"name":3629,"slug":3630,"type":15},{"name":9,"slug":8,"type":15},{"name":3504,"slug":3505,"type":15},"2026-07-16T06:03:59.434886"]