[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-tanstack-devtools-production":3,"mdc--oc8n6x-key":38,"related-repo-tanstack-devtools-production":4978,"related-org-tanstack-devtools-production":5067},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":33,"sourceUrl":36,"mdContent":37},"devtools-production","configure devtools for production and development","Handle devtools in production vs development. removeDevtoolsOnBuild, devDependency vs regular dependency, conditional imports, NoOp plugin variants for tree-shaking, non-Vite production exclusion patterns.\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],{"name":13,"slug":14,"type":15},"Performance","performance","tag",{"name":17,"slug":18,"type":15},"Deployment","deployment",{"name":20,"slug":21,"type":15},"Vite","vite",{"name":9,"slug":8,"type":15},476,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Fdevtools","2026-07-17T06:04:30.109945",null,92,[29,30,31,32],"devtool","devtools","react","solidjs",{"repoUrl":24,"stars":23,"forks":27,"topics":34,"description":35},[29,30,31,32],"🤖 Framework-agnostic devtools panel for handling TanStack libraries devtools and your custom devtool plugins","https:\u002F\u002Fgithub.com\u002FTanStack\u002Fdevtools\u002Ftree\u002FHEAD\u002Fpackages\u002Fdevtools\u002Fskills\u002Fdevtools-production","---\nname: devtools-production\ndescription: >\n  Handle devtools in production vs development. removeDevtoolsOnBuild,\n  devDependency vs regular dependency, conditional imports, NoOp plugin\n  variants for tree-shaking, non-Vite production exclusion patterns.\ntype: lifecycle\nlibrary: '@tanstack\u002Fdevtools'\nlibrary_version: '0.10.12'\nrequires: devtools-app-setup\nsources:\n  - docs\u002Fproduction.md\n  - docs\u002Fvite-plugin.md\n  - packages\u002Fdevtools-vite\u002Fsrc\u002Fplugin.ts\n  - packages\u002Fdevtools-vite\u002Fsrc\u002Fremove-devtools.ts\n  - packages\u002Fdevtools\u002Fpackage.json\n  - packages\u002Fdevtools\u002Ftsup.config.ts\n  - packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fplugin.tsx\n  - packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fpanel.tsx\n---\n\n# TanStack Devtools Production Handling\n\n> **Prerequisite:** Read the **devtools-app-setup** skill first. The initial setup decisions (framework adapter, Vite plugin, dependency type) directly determine which production strategy applies.\n\n## How Production Stripping Works\n\nTanStack Devtools has two independent mechanisms for keeping devtools out of production bundles. Understanding both is essential because they serve different project types.\n\n### Mechanism 1: Vite Plugin Auto-Stripping (Vite projects)\n\nThe `@tanstack\u002Fdevtools-vite` plugin includes a sub-plugin named `@tanstack\u002Fdevtools:remove-devtools-on-build`. When `removeDevtoolsOnBuild` is `true` (the default), this plugin runs during `vite build` and any non-`serve` command where the mode is `production`.\n\nIt uses oxc-parser to parse every source file, find imports from these packages, and remove them along with any JSX elements they produce:\n\n- `@tanstack\u002Freact-devtools`\n- `@tanstack\u002Fpreact-devtools`\n- `@tanstack\u002Fsolid-devtools`\n- `@tanstack\u002Fvue-devtools`\n- `@tanstack\u002Fsvelte-devtools`\n- `@tanstack\u002Fangular-devtools`\n- `@tanstack\u002Fdevtools`\n\nThe stripping is AST-based. It removes the import declaration, then finds and removes any JSX elements whose tag name matches one of the imported identifiers. It also traces plugin references inside the `plugins` prop array and removes their imports if they become unused.\n\nSource: `packages\u002Fdevtools-vite\u002Fsrc\u002Fremove-devtools.ts`\n\nThis means for a standard Vite project, the default setup from **devtools-app-setup** already handles production correctly with zero additional configuration:\n\n```tsx\n\u002F\u002F This import and JSX element are completely removed from the production build\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CTanStackDevtools\n        plugins={\n          [\n            \u002F* ... *\u002F\n          ]\n        }\n      \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\n### Mechanism 2: Conditional Exports (package.json)\n\nThe `@tanstack\u002Fdevtools` core package uses Node.js conditional exports to serve different bundles based on the environment:\n\n```json\n{\n  \"exports\": {\n    \"workerd\": { \"import\": \".\u002Fdist\u002Fserver.js\" },\n    \"browser\": {\n      \"development\": { \"import\": \".\u002Fdist\u002Fdev.js\" },\n      \"import\": \".\u002Fdist\u002Findex.js\"\n    },\n    \"node\": { \"import\": \".\u002Fdist\u002Fserver.js\" }\n  }\n}\n```\n\nKey points:\n\n- `browser` + `development` condition resolves to `dev.js` (dev-only extras).\n- `browser` without `development` resolves to `index.js` (production build).\n- `node` and `workerd` resolve to `server.js` (server-safe, no DOM).\n\nThese are built via `tsup-preset-solid` with `dev_entry: true` and `server_entry: true` in `packages\u002Fdevtools\u002Ftsup.config.ts`.\n\n## The Two Workflows\n\n### Development-Only Workflow (Default, Recommended)\n\nThis is the standard path from **devtools-app-setup**. Devtools are present during `vite dev` and stripped automatically on `vite build`.\n\n**Install as dev dependencies:**\n\n```bash\nnpm install -D @tanstack\u002Freact-devtools @tanstack\u002Fdevtools-vite\n```\n\n**Vite config -- default behavior:**\n\n```ts\nimport { devtools } from '@tanstack\u002Fdevtools-vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default {\n  plugins: [\n    devtools(), \u002F\u002F removeDevtoolsOnBuild defaults to true\n    react(),\n  ],\n}\n```\n\n**Application code -- no guards needed:**\n\n```tsx\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CTanStackDevtools\n        plugins={\n          [\n            \u002F* ... *\u002F\n          ]\n        }\n      \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\nThe Vite plugin handles everything. The import and JSX are removed from the production build. Since the packages are dev dependencies, they are not even available in a production `node_modules` after `npm install --production`.\n\n### Production Workflow (Intentional)\n\nWhen you deliberately want devtools accessible in a deployed application. This requires three changes from the default setup.\n\n**1. Install as regular dependencies (not `-D`):**\n\n```bash\nnpm install @tanstack\u002Freact-devtools @tanstack\u002Fdevtools-vite\n```\n\nThis ensures the packages are available in production `node_modules`.\n\n**2. Disable auto-stripping in the Vite config:**\n\n```ts\nimport { devtools } from '@tanstack\u002Fdevtools-vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default {\n  plugins: [\n    devtools({\n      removeDevtoolsOnBuild: false,\n    }),\n    react(),\n  ],\n}\n```\n\n**3. Application code remains the same:**\n\n```tsx\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CTanStackDevtools\n        plugins={\n          [\n            \u002F* ... *\u002F\n          ]\n        }\n      \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\nWith `removeDevtoolsOnBuild: false`, the Vite build plugin skips the AST stripping pass entirely, so all devtools code ships to production.\n\nYou can combine this with `requireUrlFlag` from the shell config to hide the devtools UI unless a URL parameter is present:\n\n```tsx\n\u003CTanStackDevtools\n  config={{\n    requireUrlFlag: true,\n    urlFlag: 'debug', \u002F\u002F visit ?debug to show devtools\n  }}\n  plugins={\n    [\n      \u002F* ... *\u002F\n    ]\n  }\n\u002F>\n```\n\n## Non-Vite Projects\n\nWithout the Vite plugin, there is no automatic stripping. You must manually prevent devtools from entering production bundles using one of these strategies.\n\n### Strategy A: Conditional Dynamic Import\n\nCreate a separate file for devtools setup, then conditionally import it:\n\n```tsx\n\u002F\u002F devtools-setup.tsx\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nexport default function Devtools() {\n  return (\n    \u003CTanStackDevtools\n      plugins={\n        [\n          \u002F\u002F your plugins\n        ]\n      }\n    \u002F>\n  )\n}\n```\n\n```tsx\n\u002F\u002F App.tsx\nconst Devtools =\n  process.env.NODE_ENV === 'development'\n    ? (await import('.\u002Fdevtools-setup')).default\n    : () => null\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CDevtools \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\nWhen `NODE_ENV` is `'production'`, bundlers eliminate the dead `import()` path. The devtools-setup module and all its transitive dependencies are never included in the bundle.\n\n### Strategy B: Bundler-Specific Dead Code Elimination\n\nFor bundlers that support define\u002Freplace plugins (webpack `DefinePlugin`, esbuild `define`, Rollup `@rollup\u002Fplugin-replace`), wrap the import in a condition that the bundler can statically evaluate:\n\n```tsx\n\u002F\u002F webpack example with DefinePlugin\nlet DevtoolsComponent: React.ComponentType = () => null\n\nif (__DEV__) {\n  const { TanStackDevtools } = await import('@tanstack\u002Freact-devtools')\n  DevtoolsComponent = () => (\n    \u003CTanStackDevtools\n      plugins={\n        [\n          \u002F* ... *\u002F\n        ]\n      }\n    \u002F>\n  )\n}\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CDevtoolsComponent \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\nThe key requirement is that the condition must be statically resolvable by the bundler. `process.env.NODE_ENV === 'development'` works for most bundlers. Framework-specific globals like `__DEV__` also work.\n\n## NoOp Plugin Variants for Tree-Shaking\n\nWhen building reusable plugin packages with `@tanstack\u002Fdevtools-utils`, the factory functions return a `[Plugin, NoOpPlugin]` tuple. The `NoOpPlugin` renders an empty fragment and carries no real dependencies. This is the primary mechanism for library authors to make their plugins tree-shakable.\n\n```tsx\nimport { createReactPlugin } from '@tanstack\u002Fdevtools-utils\u002Freact'\n\nconst [QueryPlugin, QueryNoOpPlugin] = createReactPlugin({\n  name: 'TanStack Query',\n  Component: ({ theme }) => \u003CQueryDevtoolsPanel theme={theme} \u002F>,\n})\n\n\u002F\u002F The library exports both, and consumers choose:\nexport { QueryPlugin, QueryNoOpPlugin }\n```\n\nConsumer code uses the NoOp variant in production:\n\n```tsx\nimport { QueryPlugin, QueryNoOpPlugin } from '@tanstack\u002Fquery-devtools'\n\nconst ActivePlugin =\n  process.env.NODE_ENV === 'development' ? QueryPlugin : QueryNoOpPlugin\n\nfunction App() {\n  return \u003CTanStackDevtools plugins={[ActivePlugin()]} \u002F>\n}\n```\n\nThe NoOp pattern exists for every framework adapter:\n\n| Framework     | Factory              | Source                                          |\n| ------------- | -------------------- | ----------------------------------------------- |\n| React         | `createReactPlugin`  | `packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fplugin.tsx`  |\n| React (panel) | `createReactPanel`   | `packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fpanel.tsx`   |\n| Preact        | `createPreactPlugin` | `packages\u002Fdevtools-utils\u002Fsrc\u002Fpreact\u002Fplugin.tsx` |\n| Solid         | `createSolidPlugin`  | `packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fplugin.tsx`  |\n| Vue           | `createVuePlugin`    | `packages\u002Fdevtools-utils\u002Fsrc\u002Fvue\u002Fplugin.ts`     |\n\nAll return `readonly [Plugin, NoOpPlugin]`. The `NoOpPlugin` always has the same metadata (`name`, `id`, `defaultOpen`) but its render function produces an empty fragment, so the bundler can tree-shake the real panel component and all its dependencies.\n\nSee the **devtools-framework-adapters** skill for the full factory API details.\n\n## Common Mistakes\n\n### HIGH: Keeping devtools in production without disabling stripping\n\nThe Vite plugin's `removeDevtoolsOnBuild` defaults to `true`. If you want devtools in production, you must both disable stripping AND install as a regular dependency. Missing either step causes failure.\n\n**Wrong -- devtools stripped despite wanting them in production:**\n\n```ts\n\u002F\u002F vite.config.ts\nexport default {\n  plugins: [\n    devtools(), \u002F\u002F removeDevtoolsOnBuild defaults to true -- code is stripped\n    react(),\n  ],\n}\n```\n\n```bash\n# package.json has devtools as devDependency\nnpm install -D @tanstack\u002Freact-devtools\n```\n\n**Correct -- both changes together:**\n\n```ts\n\u002F\u002F vite.config.ts\nexport default {\n  plugins: [devtools({ removeDevtoolsOnBuild: false }), react()],\n}\n```\n\n```bash\n# regular dependency so it's available in production node_modules\nnpm install @tanstack\u002Freact-devtools\n```\n\nMissing `removeDevtoolsOnBuild: false` causes the AST stripping to remove all devtools imports and JSX at build time. Missing the regular dependency means `node_modules` may not contain the package in production environments that prune dev dependencies.\n\n### HIGH: Non-Vite projects not excluding devtools manually\n\nWithout the Vite plugin, devtools code is never automatically stripped. If you import `TanStackDevtools` unconditionally, the entire devtools shell and all plugin panels ship to production.\n\n**Wrong -- always imports devtools regardless of environment:**\n\n```tsx\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CTanStackDevtools\n        plugins={\n          [\n            \u002F* ... *\u002F\n          ]\n        }\n      \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\n**Correct -- conditional import based on NODE_ENV:**\n\n```tsx\nconst Devtools =\n  process.env.NODE_ENV === 'development'\n    ? (await import('.\u002Fdevtools-setup')).default\n    : () => null\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CDevtools \u002F>\n    \u003C\u002F>\n  )\n}\n```\n\nThe conditional must be statically evaluable by your bundler so it can eliminate the dead branch. Using a separate file for the devtools setup ensures the entire module subgraph is tree-shaken.\n\n### MEDIUM: Not using NoOp variants in plugin libraries\n\nWhen building a reusable plugin package, exporting only the `Plugin` function (ignoring the `NoOpPlugin` from the tuple) means consumers have no lightweight alternative for production builds.\n\n**Wrong -- NoOp variant discarded:**\n\n```tsx\nconst [MyPlugin] = createReactPlugin({\n  name: 'Store Inspector',\n  Component: StoreInspectorPanel,\n})\n\nexport { MyPlugin }\n```\n\n**Correct -- both variants exported:**\n\n```tsx\nconst [MyPlugin, MyNoOpPlugin] = createReactPlugin({\n  name: 'Store Inspector',\n  Component: StoreInspectorPanel,\n})\n\nexport { MyPlugin, MyNoOpPlugin }\n```\n\nConsumers then choose the appropriate variant based on their environment. Without the NoOp export, the only way to exclude the plugin is to not import the package at all, which requires the conditional-import pattern at the application level.\n\n## Design Tension\n\nDevelopment convenience pulls toward automatic stripping (dev dependencies, Vite plugin handles everything). Production usage pulls toward explicit inclusion (regular dependencies, disabled stripping, URL flag gating). These two paths are mutually exclusive in their dependency and configuration choices. A project must commit to one path. Attempting to mix them -- for example, keeping devtools as a dev dependency while setting `removeDevtoolsOnBuild: false` -- leads to builds that fail silently when the production environment prunes dev dependencies.\n\nFor staging\u002Fpreview environments where you want devtools but not in the final production deployment, use `requireUrlFlag` with the development-only workflow intact, rather than switching to the production workflow.\n\n## Cross-References\n\n- **devtools-app-setup** -- Initial setup decisions (framework, install command, Vite plugin placement) that this skill builds on.\n- **devtools-vite-plugin** -- The `removeDevtoolsOnBuild` option and AST stripping logic live in the Vite plugin. See that skill for all Vite plugin configuration.\n- **devtools-framework-adapters** -- The `[Plugin, NoOpPlugin]` tuple pattern and all framework-specific factory APIs.\n\n## Key Source Files\n\n- `packages\u002Fdevtools-vite\u002Fsrc\u002Fplugin.ts` -- Vite plugin entry, `removeDevtoolsOnBuild` option, sub-plugin registration\n- `packages\u002Fdevtools-vite\u002Fsrc\u002Fremove-devtools.ts` -- AST-based stripping logic (oxc-parser + MagicString)\n- `packages\u002Fdevtools\u002Fpackage.json` -- Conditional exports (`browser.development` -> `dev.js`, `browser` -> `index.js`, `node`\u002F`workerd` -> `server.js`)\n- `packages\u002Fdevtools\u002Ftsup.config.ts` -- Build config producing `dev.js`, `index.js`, `server.js` via `tsup-preset-solid`\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fplugin.tsx` -- `createReactPlugin` returning `[Plugin, NoOpPlugin]`\n- `packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fpanel.tsx` -- `createReactPanel` returning `[Panel, NoOpPanel]`\n",{"data":39,"body":53},{"name":4,"description":6,"type":40,"library":41,"library_version":42,"requires":43,"sources":44},"lifecycle","@tanstack\u002Fdevtools","0.10.12","devtools-app-setup",[45,46,47,48,49,50,51,52],"docs\u002Fproduction.md","docs\u002Fvite-plugin.md","packages\u002Fdevtools-vite\u002Fsrc\u002Fplugin.ts","packages\u002Fdevtools-vite\u002Fsrc\u002Fremove-devtools.ts","packages\u002Fdevtools\u002Fpackage.json","packages\u002Fdevtools\u002Ftsup.config.ts","packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fplugin.tsx","packages\u002Fdevtools-utils\u002Fsrc\u002Freact\u002Fpanel.tsx",{"type":54,"children":55},"root",[56,65,87,94,99,106,168,173,240,253,263,274,523,529,540,840,845,923,957,963,969,994,1002,1039,1047,1221,1229,1408,1428,1434,1439,1455,1481,1492,1500,1694,1702,1880,1893,1906,2052,2058,2063,2069,2074,2249,2498,2526,2532,2561,2901,2922,2928,2957,3200,3205,3415,3420,3581,3624,3636,3642,3648,3667,3675,3773,3808,3816,3918,3948,3967,3973,3985,3993,4171,4179,4401,4406,4412,4432,4440,4569,4577,4719,4724,4730,4742,4754,4760,4804,4810,4972],{"type":57,"tag":58,"props":59,"children":61},"element","h1",{"id":60},"tanstack-devtools-production-handling",[62],{"type":63,"value":64},"text","TanStack Devtools Production Handling",{"type":57,"tag":66,"props":67,"children":68},"blockquote",{},[69],{"type":57,"tag":70,"props":71,"children":72},"p",{},[73,79,81,85],{"type":57,"tag":74,"props":75,"children":76},"strong",{},[77],{"type":63,"value":78},"Prerequisite:",{"type":63,"value":80}," Read the ",{"type":57,"tag":74,"props":82,"children":83},{},[84],{"type":63,"value":43},{"type":63,"value":86}," skill first. The initial setup decisions (framework adapter, Vite plugin, dependency type) directly determine which production strategy applies.",{"type":57,"tag":88,"props":89,"children":91},"h2",{"id":90},"how-production-stripping-works",[92],{"type":63,"value":93},"How Production Stripping Works",{"type":57,"tag":70,"props":95,"children":96},{},[97],{"type":63,"value":98},"TanStack Devtools has two independent mechanisms for keeping devtools out of production bundles. Understanding both is essential because they serve different project types.",{"type":57,"tag":100,"props":101,"children":103},"h3",{"id":102},"mechanism-1-vite-plugin-auto-stripping-vite-projects",[104],{"type":63,"value":105},"Mechanism 1: Vite Plugin Auto-Stripping (Vite projects)",{"type":57,"tag":70,"props":107,"children":108},{},[109,111,118,120,126,128,134,136,142,144,150,152,158,160,166],{"type":63,"value":110},"The ",{"type":57,"tag":112,"props":113,"children":115},"code",{"className":114},[],[116],{"type":63,"value":117},"@tanstack\u002Fdevtools-vite",{"type":63,"value":119}," plugin includes a sub-plugin named ",{"type":57,"tag":112,"props":121,"children":123},{"className":122},[],[124],{"type":63,"value":125},"@tanstack\u002Fdevtools:remove-devtools-on-build",{"type":63,"value":127},". When ",{"type":57,"tag":112,"props":129,"children":131},{"className":130},[],[132],{"type":63,"value":133},"removeDevtoolsOnBuild",{"type":63,"value":135}," is ",{"type":57,"tag":112,"props":137,"children":139},{"className":138},[],[140],{"type":63,"value":141},"true",{"type":63,"value":143}," (the default), this plugin runs during ",{"type":57,"tag":112,"props":145,"children":147},{"className":146},[],[148],{"type":63,"value":149},"vite build",{"type":63,"value":151}," and any non-",{"type":57,"tag":112,"props":153,"children":155},{"className":154},[],[156],{"type":63,"value":157},"serve",{"type":63,"value":159}," command where the mode is ",{"type":57,"tag":112,"props":161,"children":163},{"className":162},[],[164],{"type":63,"value":165},"production",{"type":63,"value":167},".",{"type":57,"tag":70,"props":169,"children":170},{},[171],{"type":63,"value":172},"It uses oxc-parser to parse every source file, find imports from these packages, and remove them along with any JSX elements they produce:",{"type":57,"tag":174,"props":175,"children":176},"ul",{},[177,187,196,205,214,223,232],{"type":57,"tag":178,"props":179,"children":180},"li",{},[181],{"type":57,"tag":112,"props":182,"children":184},{"className":183},[],[185],{"type":63,"value":186},"@tanstack\u002Freact-devtools",{"type":57,"tag":178,"props":188,"children":189},{},[190],{"type":57,"tag":112,"props":191,"children":193},{"className":192},[],[194],{"type":63,"value":195},"@tanstack\u002Fpreact-devtools",{"type":57,"tag":178,"props":197,"children":198},{},[199],{"type":57,"tag":112,"props":200,"children":202},{"className":201},[],[203],{"type":63,"value":204},"@tanstack\u002Fsolid-devtools",{"type":57,"tag":178,"props":206,"children":207},{},[208],{"type":57,"tag":112,"props":209,"children":211},{"className":210},[],[212],{"type":63,"value":213},"@tanstack\u002Fvue-devtools",{"type":57,"tag":178,"props":215,"children":216},{},[217],{"type":57,"tag":112,"props":218,"children":220},{"className":219},[],[221],{"type":63,"value":222},"@tanstack\u002Fsvelte-devtools",{"type":57,"tag":178,"props":224,"children":225},{},[226],{"type":57,"tag":112,"props":227,"children":229},{"className":228},[],[230],{"type":63,"value":231},"@tanstack\u002Fangular-devtools",{"type":57,"tag":178,"props":233,"children":234},{},[235],{"type":57,"tag":112,"props":236,"children":238},{"className":237},[],[239],{"type":63,"value":41},{"type":57,"tag":70,"props":241,"children":242},{},[243,245,251],{"type":63,"value":244},"The stripping is AST-based. It removes the import declaration, then finds and removes any JSX elements whose tag name matches one of the imported identifiers. It also traces plugin references inside the ",{"type":57,"tag":112,"props":246,"children":248},{"className":247},[],[249],{"type":63,"value":250},"plugins",{"type":63,"value":252}," prop array and removes their imports if they become unused.",{"type":57,"tag":70,"props":254,"children":255},{},[256,258],{"type":63,"value":257},"Source: ",{"type":57,"tag":112,"props":259,"children":261},{"className":260},[],[262],{"type":63,"value":48},{"type":57,"tag":70,"props":264,"children":265},{},[266,268,272],{"type":63,"value":267},"This means for a standard Vite project, the default setup from ",{"type":57,"tag":74,"props":269,"children":270},{},[271],{"type":63,"value":43},{"type":63,"value":273}," already handles production correctly with zero additional configuration:",{"type":57,"tag":275,"props":276,"children":281},"pre",{"className":277,"code":278,"language":279,"meta":280,"style":280},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F This import and JSX element are completely removed from the production build\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CTanStackDevtools\n        plugins={\n          [\n            \u002F* ... *\u002F\n          ]\n        }\n      \u002F>\n    \u003C\u002F>\n  )\n}\n","tsx","",[282],{"type":57,"tag":112,"props":283,"children":284},{"__ignoreMap":280},[285,297,344,354,380,395,404,424,437,451,460,469,478,487,496,505,514],{"type":57,"tag":286,"props":287,"children":290},"span",{"class":288,"line":289},"line",1,[291],{"type":57,"tag":286,"props":292,"children":294},{"style":293},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[295],{"type":63,"value":296},"\u002F\u002F This import and JSX element are completely removed from the production build\n",{"type":57,"tag":286,"props":298,"children":300},{"class":288,"line":299},2,[301,307,313,319,324,329,334,339],{"type":57,"tag":286,"props":302,"children":304},{"style":303},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[305],{"type":63,"value":306},"import",{"type":57,"tag":286,"props":308,"children":310},{"style":309},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[311],{"type":63,"value":312}," {",{"type":57,"tag":286,"props":314,"children":316},{"style":315},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[317],{"type":63,"value":318}," TanStackDevtools",{"type":57,"tag":286,"props":320,"children":321},{"style":309},[322],{"type":63,"value":323}," }",{"type":57,"tag":286,"props":325,"children":326},{"style":303},[327],{"type":63,"value":328}," from",{"type":57,"tag":286,"props":330,"children":331},{"style":309},[332],{"type":63,"value":333}," '",{"type":57,"tag":286,"props":335,"children":337},{"style":336},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[338],{"type":63,"value":186},{"type":57,"tag":286,"props":340,"children":341},{"style":309},[342],{"type":63,"value":343},"'\n",{"type":57,"tag":286,"props":345,"children":347},{"class":288,"line":346},3,[348],{"type":57,"tag":286,"props":349,"children":351},{"emptyLinePlaceholder":350},true,[352],{"type":63,"value":353},"\n",{"type":57,"tag":286,"props":355,"children":357},{"class":288,"line":356},4,[358,364,370,375],{"type":57,"tag":286,"props":359,"children":361},{"style":360},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[362],{"type":63,"value":363},"function",{"type":57,"tag":286,"props":365,"children":367},{"style":366},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[368],{"type":63,"value":369}," App",{"type":57,"tag":286,"props":371,"children":372},{"style":309},[373],{"type":63,"value":374},"()",{"type":57,"tag":286,"props":376,"children":377},{"style":309},[378],{"type":63,"value":379}," {\n",{"type":57,"tag":286,"props":381,"children":383},{"class":288,"line":382},5,[384,389],{"type":57,"tag":286,"props":385,"children":386},{"style":303},[387],{"type":63,"value":388},"  return",{"type":57,"tag":286,"props":390,"children":392},{"style":391},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[393],{"type":63,"value":394}," (\n",{"type":57,"tag":286,"props":396,"children":398},{"class":288,"line":397},6,[399],{"type":57,"tag":286,"props":400,"children":401},{"style":309},[402],{"type":63,"value":403},"    \u003C>\n",{"type":57,"tag":286,"props":405,"children":407},{"class":288,"line":406},7,[408,413,419],{"type":57,"tag":286,"props":409,"children":410},{"style":309},[411],{"type":63,"value":412},"      \u003C",{"type":57,"tag":286,"props":414,"children":416},{"style":415},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[417],{"type":63,"value":418},"YourApp",{"type":57,"tag":286,"props":420,"children":421},{"style":309},[422],{"type":63,"value":423}," \u002F>\n",{"type":57,"tag":286,"props":425,"children":427},{"class":288,"line":426},8,[428,432],{"type":57,"tag":286,"props":429,"children":430},{"style":309},[431],{"type":63,"value":412},{"type":57,"tag":286,"props":433,"children":434},{"style":415},[435],{"type":63,"value":436},"TanStackDevtools\n",{"type":57,"tag":286,"props":438,"children":440},{"class":288,"line":439},9,[441,446],{"type":57,"tag":286,"props":442,"children":443},{"style":360},[444],{"type":63,"value":445},"        plugins",{"type":57,"tag":286,"props":447,"children":448},{"style":309},[449],{"type":63,"value":450},"={\n",{"type":57,"tag":286,"props":452,"children":454},{"class":288,"line":453},10,[455],{"type":57,"tag":286,"props":456,"children":457},{"style":315},[458],{"type":63,"value":459},"          [\n",{"type":57,"tag":286,"props":461,"children":463},{"class":288,"line":462},11,[464],{"type":57,"tag":286,"props":465,"children":466},{"style":293},[467],{"type":63,"value":468},"            \u002F* ... *\u002F\n",{"type":57,"tag":286,"props":470,"children":472},{"class":288,"line":471},12,[473],{"type":57,"tag":286,"props":474,"children":475},{"style":315},[476],{"type":63,"value":477},"          ]\n",{"type":57,"tag":286,"props":479,"children":481},{"class":288,"line":480},13,[482],{"type":57,"tag":286,"props":483,"children":484},{"style":309},[485],{"type":63,"value":486},"        }\n",{"type":57,"tag":286,"props":488,"children":490},{"class":288,"line":489},14,[491],{"type":57,"tag":286,"props":492,"children":493},{"style":309},[494],{"type":63,"value":495},"      \u002F>\n",{"type":57,"tag":286,"props":497,"children":499},{"class":288,"line":498},15,[500],{"type":57,"tag":286,"props":501,"children":502},{"style":309},[503],{"type":63,"value":504},"    \u003C\u002F>\n",{"type":57,"tag":286,"props":506,"children":508},{"class":288,"line":507},16,[509],{"type":57,"tag":286,"props":510,"children":511},{"style":391},[512],{"type":63,"value":513},"  )\n",{"type":57,"tag":286,"props":515,"children":517},{"class":288,"line":516},17,[518],{"type":57,"tag":286,"props":519,"children":520},{"style":309},[521],{"type":63,"value":522},"}\n",{"type":57,"tag":100,"props":524,"children":526},{"id":525},"mechanism-2-conditional-exports-packagejson",[527],{"type":63,"value":528},"Mechanism 2: Conditional Exports (package.json)",{"type":57,"tag":70,"props":530,"children":531},{},[532,533,538],{"type":63,"value":110},{"type":57,"tag":112,"props":534,"children":536},{"className":535},[],[537],{"type":63,"value":41},{"type":63,"value":539}," core package uses Node.js conditional exports to serve different bundles based on the environment:",{"type":57,"tag":275,"props":541,"children":545},{"className":542,"code":543,"language":544,"meta":280,"style":280},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"exports\": {\n    \"workerd\": { \"import\": \".\u002Fdist\u002Fserver.js\" },\n    \"browser\": {\n      \"development\": { \"import\": \".\u002Fdist\u002Fdev.js\" },\n      \"import\": \".\u002Fdist\u002Findex.js\"\n    },\n    \"node\": { \"import\": \".\u002Fdist\u002Fserver.js\" }\n  }\n}\n","json",[546],{"type":57,"tag":112,"props":547,"children":548},{"__ignoreMap":280},[549,557,584,645,669,727,760,768,825,833],{"type":57,"tag":286,"props":550,"children":551},{"class":288,"line":289},[552],{"type":57,"tag":286,"props":553,"children":554},{"style":309},[555],{"type":63,"value":556},"{\n",{"type":57,"tag":286,"props":558,"children":559},{"class":288,"line":299},[560,565,570,575,580],{"type":57,"tag":286,"props":561,"children":562},{"style":309},[563],{"type":63,"value":564},"  \"",{"type":57,"tag":286,"props":566,"children":567},{"style":360},[568],{"type":63,"value":569},"exports",{"type":57,"tag":286,"props":571,"children":572},{"style":309},[573],{"type":63,"value":574},"\"",{"type":57,"tag":286,"props":576,"children":577},{"style":309},[578],{"type":63,"value":579},":",{"type":57,"tag":286,"props":581,"children":582},{"style":309},[583],{"type":63,"value":379},{"type":57,"tag":286,"props":585,"children":586},{"class":288,"line":346},[587,592,597,601,605,609,614,619,623,627,631,636,640],{"type":57,"tag":286,"props":588,"children":589},{"style":309},[590],{"type":63,"value":591},"    \"",{"type":57,"tag":286,"props":593,"children":594},{"style":415},[595],{"type":63,"value":596},"workerd",{"type":57,"tag":286,"props":598,"children":599},{"style":309},[600],{"type":63,"value":574},{"type":57,"tag":286,"props":602,"children":603},{"style":309},[604],{"type":63,"value":579},{"type":57,"tag":286,"props":606,"children":607},{"style":309},[608],{"type":63,"value":312},{"type":57,"tag":286,"props":610,"children":611},{"style":309},[612],{"type":63,"value":613}," \"",{"type":57,"tag":286,"props":615,"children":617},{"style":616},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[618],{"type":63,"value":306},{"type":57,"tag":286,"props":620,"children":621},{"style":309},[622],{"type":63,"value":574},{"type":57,"tag":286,"props":624,"children":625},{"style":309},[626],{"type":63,"value":579},{"type":57,"tag":286,"props":628,"children":629},{"style":309},[630],{"type":63,"value":613},{"type":57,"tag":286,"props":632,"children":633},{"style":336},[634],{"type":63,"value":635},".\u002Fdist\u002Fserver.js",{"type":57,"tag":286,"props":637,"children":638},{"style":309},[639],{"type":63,"value":574},{"type":57,"tag":286,"props":641,"children":642},{"style":309},[643],{"type":63,"value":644}," },\n",{"type":57,"tag":286,"props":646,"children":647},{"class":288,"line":356},[648,652,657,661,665],{"type":57,"tag":286,"props":649,"children":650},{"style":309},[651],{"type":63,"value":591},{"type":57,"tag":286,"props":653,"children":654},{"style":415},[655],{"type":63,"value":656},"browser",{"type":57,"tag":286,"props":658,"children":659},{"style":309},[660],{"type":63,"value":574},{"type":57,"tag":286,"props":662,"children":663},{"style":309},[664],{"type":63,"value":579},{"type":57,"tag":286,"props":666,"children":667},{"style":309},[668],{"type":63,"value":379},{"type":57,"tag":286,"props":670,"children":671},{"class":288,"line":382},[672,677,682,686,690,694,698,702,706,710,714,719,723],{"type":57,"tag":286,"props":673,"children":674},{"style":309},[675],{"type":63,"value":676},"      \"",{"type":57,"tag":286,"props":678,"children":679},{"style":616},[680],{"type":63,"value":681},"development",{"type":57,"tag":286,"props":683,"children":684},{"style":309},[685],{"type":63,"value":574},{"type":57,"tag":286,"props":687,"children":688},{"style":309},[689],{"type":63,"value":579},{"type":57,"tag":286,"props":691,"children":692},{"style":309},[693],{"type":63,"value":312},{"type":57,"tag":286,"props":695,"children":696},{"style":309},[697],{"type":63,"value":613},{"type":57,"tag":286,"props":699,"children":700},{"style":391},[701],{"type":63,"value":306},{"type":57,"tag":286,"props":703,"children":704},{"style":309},[705],{"type":63,"value":574},{"type":57,"tag":286,"props":707,"children":708},{"style":309},[709],{"type":63,"value":579},{"type":57,"tag":286,"props":711,"children":712},{"style":309},[713],{"type":63,"value":613},{"type":57,"tag":286,"props":715,"children":716},{"style":336},[717],{"type":63,"value":718},".\u002Fdist\u002Fdev.js",{"type":57,"tag":286,"props":720,"children":721},{"style":309},[722],{"type":63,"value":574},{"type":57,"tag":286,"props":724,"children":725},{"style":309},[726],{"type":63,"value":644},{"type":57,"tag":286,"props":728,"children":729},{"class":288,"line":397},[730,734,738,742,746,750,755],{"type":57,"tag":286,"props":731,"children":732},{"style":309},[733],{"type":63,"value":676},{"type":57,"tag":286,"props":735,"children":736},{"style":616},[737],{"type":63,"value":306},{"type":57,"tag":286,"props":739,"children":740},{"style":309},[741],{"type":63,"value":574},{"type":57,"tag":286,"props":743,"children":744},{"style":309},[745],{"type":63,"value":579},{"type":57,"tag":286,"props":747,"children":748},{"style":309},[749],{"type":63,"value":613},{"type":57,"tag":286,"props":751,"children":752},{"style":336},[753],{"type":63,"value":754},".\u002Fdist\u002Findex.js",{"type":57,"tag":286,"props":756,"children":757},{"style":309},[758],{"type":63,"value":759},"\"\n",{"type":57,"tag":286,"props":761,"children":762},{"class":288,"line":406},[763],{"type":57,"tag":286,"props":764,"children":765},{"style":309},[766],{"type":63,"value":767},"    },\n",{"type":57,"tag":286,"props":769,"children":770},{"class":288,"line":426},[771,775,780,784,788,792,796,800,804,808,812,816,820],{"type":57,"tag":286,"props":772,"children":773},{"style":309},[774],{"type":63,"value":591},{"type":57,"tag":286,"props":776,"children":777},{"style":415},[778],{"type":63,"value":779},"node",{"type":57,"tag":286,"props":781,"children":782},{"style":309},[783],{"type":63,"value":574},{"type":57,"tag":286,"props":785,"children":786},{"style":309},[787],{"type":63,"value":579},{"type":57,"tag":286,"props":789,"children":790},{"style":309},[791],{"type":63,"value":312},{"type":57,"tag":286,"props":793,"children":794},{"style":309},[795],{"type":63,"value":613},{"type":57,"tag":286,"props":797,"children":798},{"style":616},[799],{"type":63,"value":306},{"type":57,"tag":286,"props":801,"children":802},{"style":309},[803],{"type":63,"value":574},{"type":57,"tag":286,"props":805,"children":806},{"style":309},[807],{"type":63,"value":579},{"type":57,"tag":286,"props":809,"children":810},{"style":309},[811],{"type":63,"value":613},{"type":57,"tag":286,"props":813,"children":814},{"style":336},[815],{"type":63,"value":635},{"type":57,"tag":286,"props":817,"children":818},{"style":309},[819],{"type":63,"value":574},{"type":57,"tag":286,"props":821,"children":822},{"style":309},[823],{"type":63,"value":824}," }\n",{"type":57,"tag":286,"props":826,"children":827},{"class":288,"line":439},[828],{"type":57,"tag":286,"props":829,"children":830},{"style":309},[831],{"type":63,"value":832},"  }\n",{"type":57,"tag":286,"props":834,"children":835},{"class":288,"line":453},[836],{"type":57,"tag":286,"props":837,"children":838},{"style":309},[839],{"type":63,"value":522},{"type":57,"tag":70,"props":841,"children":842},{},[843],{"type":63,"value":844},"Key points:",{"type":57,"tag":174,"props":846,"children":847},{},[848,873,898],{"type":57,"tag":178,"props":849,"children":850},{},[851,856,858,863,865,871],{"type":57,"tag":112,"props":852,"children":854},{"className":853},[],[855],{"type":63,"value":656},{"type":63,"value":857}," + ",{"type":57,"tag":112,"props":859,"children":861},{"className":860},[],[862],{"type":63,"value":681},{"type":63,"value":864}," condition resolves to ",{"type":57,"tag":112,"props":866,"children":868},{"className":867},[],[869],{"type":63,"value":870},"dev.js",{"type":63,"value":872}," (dev-only extras).",{"type":57,"tag":178,"props":874,"children":875},{},[876,881,883,888,890,896],{"type":57,"tag":112,"props":877,"children":879},{"className":878},[],[880],{"type":63,"value":656},{"type":63,"value":882}," without ",{"type":57,"tag":112,"props":884,"children":886},{"className":885},[],[887],{"type":63,"value":681},{"type":63,"value":889}," resolves to ",{"type":57,"tag":112,"props":891,"children":893},{"className":892},[],[894],{"type":63,"value":895},"index.js",{"type":63,"value":897}," (production build).",{"type":57,"tag":178,"props":899,"children":900},{},[901,906,908,913,915,921],{"type":57,"tag":112,"props":902,"children":904},{"className":903},[],[905],{"type":63,"value":779},{"type":63,"value":907}," and ",{"type":57,"tag":112,"props":909,"children":911},{"className":910},[],[912],{"type":63,"value":596},{"type":63,"value":914}," resolve to ",{"type":57,"tag":112,"props":916,"children":918},{"className":917},[],[919],{"type":63,"value":920},"server.js",{"type":63,"value":922}," (server-safe, no DOM).",{"type":57,"tag":70,"props":924,"children":925},{},[926,928,934,936,942,943,949,951,956],{"type":63,"value":927},"These are built via ",{"type":57,"tag":112,"props":929,"children":931},{"className":930},[],[932],{"type":63,"value":933},"tsup-preset-solid",{"type":63,"value":935}," with ",{"type":57,"tag":112,"props":937,"children":939},{"className":938},[],[940],{"type":63,"value":941},"dev_entry: true",{"type":63,"value":907},{"type":57,"tag":112,"props":944,"children":946},{"className":945},[],[947],{"type":63,"value":948},"server_entry: true",{"type":63,"value":950}," in ",{"type":57,"tag":112,"props":952,"children":954},{"className":953},[],[955],{"type":63,"value":50},{"type":63,"value":167},{"type":57,"tag":88,"props":958,"children":960},{"id":959},"the-two-workflows",[961],{"type":63,"value":962},"The Two Workflows",{"type":57,"tag":100,"props":964,"children":966},{"id":965},"development-only-workflow-default-recommended",[967],{"type":63,"value":968},"Development-Only Workflow (Default, Recommended)",{"type":57,"tag":70,"props":970,"children":971},{},[972,974,978,980,986,988,993],{"type":63,"value":973},"This is the standard path from ",{"type":57,"tag":74,"props":975,"children":976},{},[977],{"type":63,"value":43},{"type":63,"value":979},". Devtools are present during ",{"type":57,"tag":112,"props":981,"children":983},{"className":982},[],[984],{"type":63,"value":985},"vite dev",{"type":63,"value":987}," and stripped automatically on ",{"type":57,"tag":112,"props":989,"children":991},{"className":990},[],[992],{"type":63,"value":149},{"type":63,"value":167},{"type":57,"tag":70,"props":995,"children":996},{},[997],{"type":57,"tag":74,"props":998,"children":999},{},[1000],{"type":63,"value":1001},"Install as dev dependencies:",{"type":57,"tag":275,"props":1003,"children":1007},{"className":1004,"code":1005,"language":1006,"meta":280,"style":280},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install -D @tanstack\u002Freact-devtools @tanstack\u002Fdevtools-vite\n","bash",[1008],{"type":57,"tag":112,"props":1009,"children":1010},{"__ignoreMap":280},[1011],{"type":57,"tag":286,"props":1012,"children":1013},{"class":288,"line":289},[1014,1019,1024,1029,1034],{"type":57,"tag":286,"props":1015,"children":1016},{"style":415},[1017],{"type":63,"value":1018},"npm",{"type":57,"tag":286,"props":1020,"children":1021},{"style":336},[1022],{"type":63,"value":1023}," install",{"type":57,"tag":286,"props":1025,"children":1026},{"style":336},[1027],{"type":63,"value":1028}," -D",{"type":57,"tag":286,"props":1030,"children":1031},{"style":336},[1032],{"type":63,"value":1033}," @tanstack\u002Freact-devtools",{"type":57,"tag":286,"props":1035,"children":1036},{"style":336},[1037],{"type":63,"value":1038}," @tanstack\u002Fdevtools-vite\n",{"type":57,"tag":70,"props":1040,"children":1041},{},[1042],{"type":57,"tag":74,"props":1043,"children":1044},{},[1045],{"type":63,"value":1046},"Vite config -- default behavior:",{"type":57,"tag":275,"props":1048,"children":1052},{"className":1049,"code":1050,"language":1051,"meta":280,"style":280},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { devtools } from '@tanstack\u002Fdevtools-vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default {\n  plugins: [\n    devtools(), \u002F\u002F removeDevtoolsOnBuild defaults to true\n    react(),\n  ],\n}\n","ts",[1053],{"type":57,"tag":112,"props":1054,"children":1055},{"__ignoreMap":280},[1056,1092,1122,1129,1146,1163,1185,1202,1214],{"type":57,"tag":286,"props":1057,"children":1058},{"class":288,"line":289},[1059,1063,1067,1072,1076,1080,1084,1088],{"type":57,"tag":286,"props":1060,"children":1061},{"style":303},[1062],{"type":63,"value":306},{"type":57,"tag":286,"props":1064,"children":1065},{"style":309},[1066],{"type":63,"value":312},{"type":57,"tag":286,"props":1068,"children":1069},{"style":315},[1070],{"type":63,"value":1071}," devtools",{"type":57,"tag":286,"props":1073,"children":1074},{"style":309},[1075],{"type":63,"value":323},{"type":57,"tag":286,"props":1077,"children":1078},{"style":303},[1079],{"type":63,"value":328},{"type":57,"tag":286,"props":1081,"children":1082},{"style":309},[1083],{"type":63,"value":333},{"type":57,"tag":286,"props":1085,"children":1086},{"style":336},[1087],{"type":63,"value":117},{"type":57,"tag":286,"props":1089,"children":1090},{"style":309},[1091],{"type":63,"value":343},{"type":57,"tag":286,"props":1093,"children":1094},{"class":288,"line":299},[1095,1099,1104,1109,1113,1118],{"type":57,"tag":286,"props":1096,"children":1097},{"style":303},[1098],{"type":63,"value":306},{"type":57,"tag":286,"props":1100,"children":1101},{"style":315},[1102],{"type":63,"value":1103}," react ",{"type":57,"tag":286,"props":1105,"children":1106},{"style":303},[1107],{"type":63,"value":1108},"from",{"type":57,"tag":286,"props":1110,"children":1111},{"style":309},[1112],{"type":63,"value":333},{"type":57,"tag":286,"props":1114,"children":1115},{"style":336},[1116],{"type":63,"value":1117},"@vitejs\u002Fplugin-react",{"type":57,"tag":286,"props":1119,"children":1120},{"style":309},[1121],{"type":63,"value":343},{"type":57,"tag":286,"props":1123,"children":1124},{"class":288,"line":346},[1125],{"type":57,"tag":286,"props":1126,"children":1127},{"emptyLinePlaceholder":350},[1128],{"type":63,"value":353},{"type":57,"tag":286,"props":1130,"children":1131},{"class":288,"line":356},[1132,1137,1142],{"type":57,"tag":286,"props":1133,"children":1134},{"style":303},[1135],{"type":63,"value":1136},"export",{"type":57,"tag":286,"props":1138,"children":1139},{"style":303},[1140],{"type":63,"value":1141}," default",{"type":57,"tag":286,"props":1143,"children":1144},{"style":309},[1145],{"type":63,"value":379},{"type":57,"tag":286,"props":1147,"children":1148},{"class":288,"line":382},[1149,1154,1158],{"type":57,"tag":286,"props":1150,"children":1151},{"style":391},[1152],{"type":63,"value":1153},"  plugins",{"type":57,"tag":286,"props":1155,"children":1156},{"style":309},[1157],{"type":63,"value":579},{"type":57,"tag":286,"props":1159,"children":1160},{"style":315},[1161],{"type":63,"value":1162}," [\n",{"type":57,"tag":286,"props":1164,"children":1165},{"class":288,"line":397},[1166,1171,1175,1180],{"type":57,"tag":286,"props":1167,"children":1168},{"style":366},[1169],{"type":63,"value":1170},"    devtools",{"type":57,"tag":286,"props":1172,"children":1173},{"style":315},[1174],{"type":63,"value":374},{"type":57,"tag":286,"props":1176,"children":1177},{"style":309},[1178],{"type":63,"value":1179},",",{"type":57,"tag":286,"props":1181,"children":1182},{"style":293},[1183],{"type":63,"value":1184}," \u002F\u002F removeDevtoolsOnBuild defaults to true\n",{"type":57,"tag":286,"props":1186,"children":1187},{"class":288,"line":406},[1188,1193,1197],{"type":57,"tag":286,"props":1189,"children":1190},{"style":366},[1191],{"type":63,"value":1192},"    react",{"type":57,"tag":286,"props":1194,"children":1195},{"style":315},[1196],{"type":63,"value":374},{"type":57,"tag":286,"props":1198,"children":1199},{"style":309},[1200],{"type":63,"value":1201},",\n",{"type":57,"tag":286,"props":1203,"children":1204},{"class":288,"line":426},[1205,1210],{"type":57,"tag":286,"props":1206,"children":1207},{"style":315},[1208],{"type":63,"value":1209},"  ]",{"type":57,"tag":286,"props":1211,"children":1212},{"style":309},[1213],{"type":63,"value":1201},{"type":57,"tag":286,"props":1215,"children":1216},{"class":288,"line":439},[1217],{"type":57,"tag":286,"props":1218,"children":1219},{"style":309},[1220],{"type":63,"value":522},{"type":57,"tag":70,"props":1222,"children":1223},{},[1224],{"type":57,"tag":74,"props":1225,"children":1226},{},[1227],{"type":63,"value":1228},"Application code -- no guards needed:",{"type":57,"tag":275,"props":1230,"children":1232},{"className":277,"code":1231,"language":279,"meta":280,"style":280},"import { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CTanStackDevtools\n        plugins={\n          [\n            \u002F* ... *\u002F\n          ]\n        }\n      \u002F>\n    \u003C\u002F>\n  )\n}\n",[1233],{"type":57,"tag":112,"props":1234,"children":1235},{"__ignoreMap":280},[1236,1271,1278,1297,1308,1315,1330,1341,1352,1359,1366,1373,1380,1387,1394,1401],{"type":57,"tag":286,"props":1237,"children":1238},{"class":288,"line":289},[1239,1243,1247,1251,1255,1259,1263,1267],{"type":57,"tag":286,"props":1240,"children":1241},{"style":303},[1242],{"type":63,"value":306},{"type":57,"tag":286,"props":1244,"children":1245},{"style":309},[1246],{"type":63,"value":312},{"type":57,"tag":286,"props":1248,"children":1249},{"style":315},[1250],{"type":63,"value":318},{"type":57,"tag":286,"props":1252,"children":1253},{"style":309},[1254],{"type":63,"value":323},{"type":57,"tag":286,"props":1256,"children":1257},{"style":303},[1258],{"type":63,"value":328},{"type":57,"tag":286,"props":1260,"children":1261},{"style":309},[1262],{"type":63,"value":333},{"type":57,"tag":286,"props":1264,"children":1265},{"style":336},[1266],{"type":63,"value":186},{"type":57,"tag":286,"props":1268,"children":1269},{"style":309},[1270],{"type":63,"value":343},{"type":57,"tag":286,"props":1272,"children":1273},{"class":288,"line":299},[1274],{"type":57,"tag":286,"props":1275,"children":1276},{"emptyLinePlaceholder":350},[1277],{"type":63,"value":353},{"type":57,"tag":286,"props":1279,"children":1280},{"class":288,"line":346},[1281,1285,1289,1293],{"type":57,"tag":286,"props":1282,"children":1283},{"style":360},[1284],{"type":63,"value":363},{"type":57,"tag":286,"props":1286,"children":1287},{"style":366},[1288],{"type":63,"value":369},{"type":57,"tag":286,"props":1290,"children":1291},{"style":309},[1292],{"type":63,"value":374},{"type":57,"tag":286,"props":1294,"children":1295},{"style":309},[1296],{"type":63,"value":379},{"type":57,"tag":286,"props":1298,"children":1299},{"class":288,"line":356},[1300,1304],{"type":57,"tag":286,"props":1301,"children":1302},{"style":303},[1303],{"type":63,"value":388},{"type":57,"tag":286,"props":1305,"children":1306},{"style":391},[1307],{"type":63,"value":394},{"type":57,"tag":286,"props":1309,"children":1310},{"class":288,"line":382},[1311],{"type":57,"tag":286,"props":1312,"children":1313},{"style":309},[1314],{"type":63,"value":403},{"type":57,"tag":286,"props":1316,"children":1317},{"class":288,"line":397},[1318,1322,1326],{"type":57,"tag":286,"props":1319,"children":1320},{"style":309},[1321],{"type":63,"value":412},{"type":57,"tag":286,"props":1323,"children":1324},{"style":415},[1325],{"type":63,"value":418},{"type":57,"tag":286,"props":1327,"children":1328},{"style":309},[1329],{"type":63,"value":423},{"type":57,"tag":286,"props":1331,"children":1332},{"class":288,"line":406},[1333,1337],{"type":57,"tag":286,"props":1334,"children":1335},{"style":309},[1336],{"type":63,"value":412},{"type":57,"tag":286,"props":1338,"children":1339},{"style":415},[1340],{"type":63,"value":436},{"type":57,"tag":286,"props":1342,"children":1343},{"class":288,"line":426},[1344,1348],{"type":57,"tag":286,"props":1345,"children":1346},{"style":360},[1347],{"type":63,"value":445},{"type":57,"tag":286,"props":1349,"children":1350},{"style":309},[1351],{"type":63,"value":450},{"type":57,"tag":286,"props":1353,"children":1354},{"class":288,"line":439},[1355],{"type":57,"tag":286,"props":1356,"children":1357},{"style":315},[1358],{"type":63,"value":459},{"type":57,"tag":286,"props":1360,"children":1361},{"class":288,"line":453},[1362],{"type":57,"tag":286,"props":1363,"children":1364},{"style":293},[1365],{"type":63,"value":468},{"type":57,"tag":286,"props":1367,"children":1368},{"class":288,"line":462},[1369],{"type":57,"tag":286,"props":1370,"children":1371},{"style":315},[1372],{"type":63,"value":477},{"type":57,"tag":286,"props":1374,"children":1375},{"class":288,"line":471},[1376],{"type":57,"tag":286,"props":1377,"children":1378},{"style":309},[1379],{"type":63,"value":486},{"type":57,"tag":286,"props":1381,"children":1382},{"class":288,"line":480},[1383],{"type":57,"tag":286,"props":1384,"children":1385},{"style":309},[1386],{"type":63,"value":495},{"type":57,"tag":286,"props":1388,"children":1389},{"class":288,"line":489},[1390],{"type":57,"tag":286,"props":1391,"children":1392},{"style":309},[1393],{"type":63,"value":504},{"type":57,"tag":286,"props":1395,"children":1396},{"class":288,"line":498},[1397],{"type":57,"tag":286,"props":1398,"children":1399},{"style":391},[1400],{"type":63,"value":513},{"type":57,"tag":286,"props":1402,"children":1403},{"class":288,"line":507},[1404],{"type":57,"tag":286,"props":1405,"children":1406},{"style":309},[1407],{"type":63,"value":522},{"type":57,"tag":70,"props":1409,"children":1410},{},[1411,1413,1419,1421,1427],{"type":63,"value":1412},"The Vite plugin handles everything. The import and JSX are removed from the production build. Since the packages are dev dependencies, they are not even available in a production ",{"type":57,"tag":112,"props":1414,"children":1416},{"className":1415},[],[1417],{"type":63,"value":1418},"node_modules",{"type":63,"value":1420}," after ",{"type":57,"tag":112,"props":1422,"children":1424},{"className":1423},[],[1425],{"type":63,"value":1426},"npm install --production",{"type":63,"value":167},{"type":57,"tag":100,"props":1429,"children":1431},{"id":1430},"production-workflow-intentional",[1432],{"type":63,"value":1433},"Production Workflow (Intentional)",{"type":57,"tag":70,"props":1435,"children":1436},{},[1437],{"type":63,"value":1438},"When you deliberately want devtools accessible in a deployed application. This requires three changes from the default setup.",{"type":57,"tag":70,"props":1440,"children":1441},{},[1442],{"type":57,"tag":74,"props":1443,"children":1444},{},[1445,1447,1453],{"type":63,"value":1446},"1. Install as regular dependencies (not ",{"type":57,"tag":112,"props":1448,"children":1450},{"className":1449},[],[1451],{"type":63,"value":1452},"-D",{"type":63,"value":1454},"):",{"type":57,"tag":275,"props":1456,"children":1458},{"className":1004,"code":1457,"language":1006,"meta":280,"style":280},"npm install @tanstack\u002Freact-devtools @tanstack\u002Fdevtools-vite\n",[1459],{"type":57,"tag":112,"props":1460,"children":1461},{"__ignoreMap":280},[1462],{"type":57,"tag":286,"props":1463,"children":1464},{"class":288,"line":289},[1465,1469,1473,1477],{"type":57,"tag":286,"props":1466,"children":1467},{"style":415},[1468],{"type":63,"value":1018},{"type":57,"tag":286,"props":1470,"children":1471},{"style":336},[1472],{"type":63,"value":1023},{"type":57,"tag":286,"props":1474,"children":1475},{"style":336},[1476],{"type":63,"value":1033},{"type":57,"tag":286,"props":1478,"children":1479},{"style":336},[1480],{"type":63,"value":1038},{"type":57,"tag":70,"props":1482,"children":1483},{},[1484,1486,1491],{"type":63,"value":1485},"This ensures the packages are available in production ",{"type":57,"tag":112,"props":1487,"children":1489},{"className":1488},[],[1490],{"type":63,"value":1418},{"type":63,"value":167},{"type":57,"tag":70,"props":1493,"children":1494},{},[1495],{"type":57,"tag":74,"props":1496,"children":1497},{},[1498],{"type":63,"value":1499},"2. Disable auto-stripping in the Vite config:",{"type":57,"tag":275,"props":1501,"children":1503},{"className":1049,"code":1502,"language":1051,"meta":280,"style":280},"import { devtools } from '@tanstack\u002Fdevtools-vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default {\n  plugins: [\n    devtools({\n      removeDevtoolsOnBuild: false,\n    }),\n    react(),\n  ],\n}\n",[1504],{"type":57,"tag":112,"props":1505,"children":1506},{"__ignoreMap":280},[1507,1542,1569,1576,1591,1606,1622,1644,1661,1676,1687],{"type":57,"tag":286,"props":1508,"children":1509},{"class":288,"line":289},[1510,1514,1518,1522,1526,1530,1534,1538],{"type":57,"tag":286,"props":1511,"children":1512},{"style":303},[1513],{"type":63,"value":306},{"type":57,"tag":286,"props":1515,"children":1516},{"style":309},[1517],{"type":63,"value":312},{"type":57,"tag":286,"props":1519,"children":1520},{"style":315},[1521],{"type":63,"value":1071},{"type":57,"tag":286,"props":1523,"children":1524},{"style":309},[1525],{"type":63,"value":323},{"type":57,"tag":286,"props":1527,"children":1528},{"style":303},[1529],{"type":63,"value":328},{"type":57,"tag":286,"props":1531,"children":1532},{"style":309},[1533],{"type":63,"value":333},{"type":57,"tag":286,"props":1535,"children":1536},{"style":336},[1537],{"type":63,"value":117},{"type":57,"tag":286,"props":1539,"children":1540},{"style":309},[1541],{"type":63,"value":343},{"type":57,"tag":286,"props":1543,"children":1544},{"class":288,"line":299},[1545,1549,1553,1557,1561,1565],{"type":57,"tag":286,"props":1546,"children":1547},{"style":303},[1548],{"type":63,"value":306},{"type":57,"tag":286,"props":1550,"children":1551},{"style":315},[1552],{"type":63,"value":1103},{"type":57,"tag":286,"props":1554,"children":1555},{"style":303},[1556],{"type":63,"value":1108},{"type":57,"tag":286,"props":1558,"children":1559},{"style":309},[1560],{"type":63,"value":333},{"type":57,"tag":286,"props":1562,"children":1563},{"style":336},[1564],{"type":63,"value":1117},{"type":57,"tag":286,"props":1566,"children":1567},{"style":309},[1568],{"type":63,"value":343},{"type":57,"tag":286,"props":1570,"children":1571},{"class":288,"line":346},[1572],{"type":57,"tag":286,"props":1573,"children":1574},{"emptyLinePlaceholder":350},[1575],{"type":63,"value":353},{"type":57,"tag":286,"props":1577,"children":1578},{"class":288,"line":356},[1579,1583,1587],{"type":57,"tag":286,"props":1580,"children":1581},{"style":303},[1582],{"type":63,"value":1136},{"type":57,"tag":286,"props":1584,"children":1585},{"style":303},[1586],{"type":63,"value":1141},{"type":57,"tag":286,"props":1588,"children":1589},{"style":309},[1590],{"type":63,"value":379},{"type":57,"tag":286,"props":1592,"children":1593},{"class":288,"line":382},[1594,1598,1602],{"type":57,"tag":286,"props":1595,"children":1596},{"style":391},[1597],{"type":63,"value":1153},{"type":57,"tag":286,"props":1599,"children":1600},{"style":309},[1601],{"type":63,"value":579},{"type":57,"tag":286,"props":1603,"children":1604},{"style":315},[1605],{"type":63,"value":1162},{"type":57,"tag":286,"props":1607,"children":1608},{"class":288,"line":397},[1609,1613,1618],{"type":57,"tag":286,"props":1610,"children":1611},{"style":366},[1612],{"type":63,"value":1170},{"type":57,"tag":286,"props":1614,"children":1615},{"style":315},[1616],{"type":63,"value":1617},"(",{"type":57,"tag":286,"props":1619,"children":1620},{"style":309},[1621],{"type":63,"value":556},{"type":57,"tag":286,"props":1623,"children":1624},{"class":288,"line":406},[1625,1630,1634,1640],{"type":57,"tag":286,"props":1626,"children":1627},{"style":391},[1628],{"type":63,"value":1629},"      removeDevtoolsOnBuild",{"type":57,"tag":286,"props":1631,"children":1632},{"style":309},[1633],{"type":63,"value":579},{"type":57,"tag":286,"props":1635,"children":1637},{"style":1636},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1638],{"type":63,"value":1639}," false",{"type":57,"tag":286,"props":1641,"children":1642},{"style":309},[1643],{"type":63,"value":1201},{"type":57,"tag":286,"props":1645,"children":1646},{"class":288,"line":426},[1647,1652,1657],{"type":57,"tag":286,"props":1648,"children":1649},{"style":309},[1650],{"type":63,"value":1651},"    }",{"type":57,"tag":286,"props":1653,"children":1654},{"style":315},[1655],{"type":63,"value":1656},")",{"type":57,"tag":286,"props":1658,"children":1659},{"style":309},[1660],{"type":63,"value":1201},{"type":57,"tag":286,"props":1662,"children":1663},{"class":288,"line":439},[1664,1668,1672],{"type":57,"tag":286,"props":1665,"children":1666},{"style":366},[1667],{"type":63,"value":1192},{"type":57,"tag":286,"props":1669,"children":1670},{"style":315},[1671],{"type":63,"value":374},{"type":57,"tag":286,"props":1673,"children":1674},{"style":309},[1675],{"type":63,"value":1201},{"type":57,"tag":286,"props":1677,"children":1678},{"class":288,"line":453},[1679,1683],{"type":57,"tag":286,"props":1680,"children":1681},{"style":315},[1682],{"type":63,"value":1209},{"type":57,"tag":286,"props":1684,"children":1685},{"style":309},[1686],{"type":63,"value":1201},{"type":57,"tag":286,"props":1688,"children":1689},{"class":288,"line":462},[1690],{"type":57,"tag":286,"props":1691,"children":1692},{"style":309},[1693],{"type":63,"value":522},{"type":57,"tag":70,"props":1695,"children":1696},{},[1697],{"type":57,"tag":74,"props":1698,"children":1699},{},[1700],{"type":63,"value":1701},"3. Application code remains the same:",{"type":57,"tag":275,"props":1703,"children":1704},{"className":277,"code":1231,"language":279,"meta":280,"style":280},[1705],{"type":57,"tag":112,"props":1706,"children":1707},{"__ignoreMap":280},[1708,1743,1750,1769,1780,1787,1802,1813,1824,1831,1838,1845,1852,1859,1866,1873],{"type":57,"tag":286,"props":1709,"children":1710},{"class":288,"line":289},[1711,1715,1719,1723,1727,1731,1735,1739],{"type":57,"tag":286,"props":1712,"children":1713},{"style":303},[1714],{"type":63,"value":306},{"type":57,"tag":286,"props":1716,"children":1717},{"style":309},[1718],{"type":63,"value":312},{"type":57,"tag":286,"props":1720,"children":1721},{"style":315},[1722],{"type":63,"value":318},{"type":57,"tag":286,"props":1724,"children":1725},{"style":309},[1726],{"type":63,"value":323},{"type":57,"tag":286,"props":1728,"children":1729},{"style":303},[1730],{"type":63,"value":328},{"type":57,"tag":286,"props":1732,"children":1733},{"style":309},[1734],{"type":63,"value":333},{"type":57,"tag":286,"props":1736,"children":1737},{"style":336},[1738],{"type":63,"value":186},{"type":57,"tag":286,"props":1740,"children":1741},{"style":309},[1742],{"type":63,"value":343},{"type":57,"tag":286,"props":1744,"children":1745},{"class":288,"line":299},[1746],{"type":57,"tag":286,"props":1747,"children":1748},{"emptyLinePlaceholder":350},[1749],{"type":63,"value":353},{"type":57,"tag":286,"props":1751,"children":1752},{"class":288,"line":346},[1753,1757,1761,1765],{"type":57,"tag":286,"props":1754,"children":1755},{"style":360},[1756],{"type":63,"value":363},{"type":57,"tag":286,"props":1758,"children":1759},{"style":366},[1760],{"type":63,"value":369},{"type":57,"tag":286,"props":1762,"children":1763},{"style":309},[1764],{"type":63,"value":374},{"type":57,"tag":286,"props":1766,"children":1767},{"style":309},[1768],{"type":63,"value":379},{"type":57,"tag":286,"props":1770,"children":1771},{"class":288,"line":356},[1772,1776],{"type":57,"tag":286,"props":1773,"children":1774},{"style":303},[1775],{"type":63,"value":388},{"type":57,"tag":286,"props":1777,"children":1778},{"style":391},[1779],{"type":63,"value":394},{"type":57,"tag":286,"props":1781,"children":1782},{"class":288,"line":382},[1783],{"type":57,"tag":286,"props":1784,"children":1785},{"style":309},[1786],{"type":63,"value":403},{"type":57,"tag":286,"props":1788,"children":1789},{"class":288,"line":397},[1790,1794,1798],{"type":57,"tag":286,"props":1791,"children":1792},{"style":309},[1793],{"type":63,"value":412},{"type":57,"tag":286,"props":1795,"children":1796},{"style":415},[1797],{"type":63,"value":418},{"type":57,"tag":286,"props":1799,"children":1800},{"style":309},[1801],{"type":63,"value":423},{"type":57,"tag":286,"props":1803,"children":1804},{"class":288,"line":406},[1805,1809],{"type":57,"tag":286,"props":1806,"children":1807},{"style":309},[1808],{"type":63,"value":412},{"type":57,"tag":286,"props":1810,"children":1811},{"style":415},[1812],{"type":63,"value":436},{"type":57,"tag":286,"props":1814,"children":1815},{"class":288,"line":426},[1816,1820],{"type":57,"tag":286,"props":1817,"children":1818},{"style":360},[1819],{"type":63,"value":445},{"type":57,"tag":286,"props":1821,"children":1822},{"style":309},[1823],{"type":63,"value":450},{"type":57,"tag":286,"props":1825,"children":1826},{"class":288,"line":439},[1827],{"type":57,"tag":286,"props":1828,"children":1829},{"style":315},[1830],{"type":63,"value":459},{"type":57,"tag":286,"props":1832,"children":1833},{"class":288,"line":453},[1834],{"type":57,"tag":286,"props":1835,"children":1836},{"style":293},[1837],{"type":63,"value":468},{"type":57,"tag":286,"props":1839,"children":1840},{"class":288,"line":462},[1841],{"type":57,"tag":286,"props":1842,"children":1843},{"style":315},[1844],{"type":63,"value":477},{"type":57,"tag":286,"props":1846,"children":1847},{"class":288,"line":471},[1848],{"type":57,"tag":286,"props":1849,"children":1850},{"style":309},[1851],{"type":63,"value":486},{"type":57,"tag":286,"props":1853,"children":1854},{"class":288,"line":480},[1855],{"type":57,"tag":286,"props":1856,"children":1857},{"style":309},[1858],{"type":63,"value":495},{"type":57,"tag":286,"props":1860,"children":1861},{"class":288,"line":489},[1862],{"type":57,"tag":286,"props":1863,"children":1864},{"style":309},[1865],{"type":63,"value":504},{"type":57,"tag":286,"props":1867,"children":1868},{"class":288,"line":498},[1869],{"type":57,"tag":286,"props":1870,"children":1871},{"style":391},[1872],{"type":63,"value":513},{"type":57,"tag":286,"props":1874,"children":1875},{"class":288,"line":507},[1876],{"type":57,"tag":286,"props":1877,"children":1878},{"style":309},[1879],{"type":63,"value":522},{"type":57,"tag":70,"props":1881,"children":1882},{},[1883,1885,1891],{"type":63,"value":1884},"With ",{"type":57,"tag":112,"props":1886,"children":1888},{"className":1887},[],[1889],{"type":63,"value":1890},"removeDevtoolsOnBuild: false",{"type":63,"value":1892},", the Vite build plugin skips the AST stripping pass entirely, so all devtools code ships to production.",{"type":57,"tag":70,"props":1894,"children":1895},{},[1896,1898,1904],{"type":63,"value":1897},"You can combine this with ",{"type":57,"tag":112,"props":1899,"children":1901},{"className":1900},[],[1902],{"type":63,"value":1903},"requireUrlFlag",{"type":63,"value":1905}," from the shell config to hide the devtools UI unless a URL parameter is present:",{"type":57,"tag":275,"props":1907,"children":1909},{"className":277,"code":1908,"language":279,"meta":280,"style":280},"\u003CTanStackDevtools\n  config={{\n    requireUrlFlag: true,\n    urlFlag: 'debug', \u002F\u002F visit ?debug to show devtools\n  }}\n  plugins={\n    [\n      \u002F* ... *\u002F\n    ]\n  }\n\u002F>\n",[1910],{"type":57,"tag":112,"props":1911,"children":1912},{"__ignoreMap":280},[1913,1925,1938,1959,1994,2002,2013,2021,2029,2037,2044],{"type":57,"tag":286,"props":1914,"children":1915},{"class":288,"line":289},[1916,1921],{"type":57,"tag":286,"props":1917,"children":1918},{"style":309},[1919],{"type":63,"value":1920},"\u003C",{"type":57,"tag":286,"props":1922,"children":1923},{"style":415},[1924],{"type":63,"value":436},{"type":57,"tag":286,"props":1926,"children":1927},{"class":288,"line":299},[1928,1933],{"type":57,"tag":286,"props":1929,"children":1930},{"style":360},[1931],{"type":63,"value":1932},"  config",{"type":57,"tag":286,"props":1934,"children":1935},{"style":309},[1936],{"type":63,"value":1937},"={{\n",{"type":57,"tag":286,"props":1939,"children":1940},{"class":288,"line":346},[1941,1946,1950,1955],{"type":57,"tag":286,"props":1942,"children":1943},{"style":391},[1944],{"type":63,"value":1945},"    requireUrlFlag",{"type":57,"tag":286,"props":1947,"children":1948},{"style":309},[1949],{"type":63,"value":579},{"type":57,"tag":286,"props":1951,"children":1952},{"style":1636},[1953],{"type":63,"value":1954}," true",{"type":57,"tag":286,"props":1956,"children":1957},{"style":309},[1958],{"type":63,"value":1201},{"type":57,"tag":286,"props":1960,"children":1961},{"class":288,"line":356},[1962,1967,1971,1975,1980,1985,1989],{"type":57,"tag":286,"props":1963,"children":1964},{"style":391},[1965],{"type":63,"value":1966},"    urlFlag",{"type":57,"tag":286,"props":1968,"children":1969},{"style":309},[1970],{"type":63,"value":579},{"type":57,"tag":286,"props":1972,"children":1973},{"style":309},[1974],{"type":63,"value":333},{"type":57,"tag":286,"props":1976,"children":1977},{"style":336},[1978],{"type":63,"value":1979},"debug",{"type":57,"tag":286,"props":1981,"children":1982},{"style":309},[1983],{"type":63,"value":1984},"'",{"type":57,"tag":286,"props":1986,"children":1987},{"style":309},[1988],{"type":63,"value":1179},{"type":57,"tag":286,"props":1990,"children":1991},{"style":293},[1992],{"type":63,"value":1993}," \u002F\u002F visit ?debug to show devtools\n",{"type":57,"tag":286,"props":1995,"children":1996},{"class":288,"line":382},[1997],{"type":57,"tag":286,"props":1998,"children":1999},{"style":309},[2000],{"type":63,"value":2001},"  }}\n",{"type":57,"tag":286,"props":2003,"children":2004},{"class":288,"line":397},[2005,2009],{"type":57,"tag":286,"props":2006,"children":2007},{"style":360},[2008],{"type":63,"value":1153},{"type":57,"tag":286,"props":2010,"children":2011},{"style":309},[2012],{"type":63,"value":450},{"type":57,"tag":286,"props":2014,"children":2015},{"class":288,"line":406},[2016],{"type":57,"tag":286,"props":2017,"children":2018},{"style":315},[2019],{"type":63,"value":2020},"    [\n",{"type":57,"tag":286,"props":2022,"children":2023},{"class":288,"line":426},[2024],{"type":57,"tag":286,"props":2025,"children":2026},{"style":293},[2027],{"type":63,"value":2028},"      \u002F* ... *\u002F\n",{"type":57,"tag":286,"props":2030,"children":2031},{"class":288,"line":439},[2032],{"type":57,"tag":286,"props":2033,"children":2034},{"style":315},[2035],{"type":63,"value":2036},"    ]\n",{"type":57,"tag":286,"props":2038,"children":2039},{"class":288,"line":453},[2040],{"type":57,"tag":286,"props":2041,"children":2042},{"style":309},[2043],{"type":63,"value":832},{"type":57,"tag":286,"props":2045,"children":2046},{"class":288,"line":462},[2047],{"type":57,"tag":286,"props":2048,"children":2049},{"style":309},[2050],{"type":63,"value":2051},"\u002F>\n",{"type":57,"tag":88,"props":2053,"children":2055},{"id":2054},"non-vite-projects",[2056],{"type":63,"value":2057},"Non-Vite Projects",{"type":57,"tag":70,"props":2059,"children":2060},{},[2061],{"type":63,"value":2062},"Without the Vite plugin, there is no automatic stripping. You must manually prevent devtools from entering production bundles using one of these strategies.",{"type":57,"tag":100,"props":2064,"children":2066},{"id":2065},"strategy-a-conditional-dynamic-import",[2067],{"type":63,"value":2068},"Strategy A: Conditional Dynamic Import",{"type":57,"tag":70,"props":2070,"children":2071},{},[2072],{"type":63,"value":2073},"Create a separate file for devtools setup, then conditionally import it:",{"type":57,"tag":275,"props":2075,"children":2077},{"className":277,"code":2076,"language":279,"meta":280,"style":280},"\u002F\u002F devtools-setup.tsx\nimport { TanStackDevtools } from '@tanstack\u002Freact-devtools'\n\nexport default function Devtools() {\n  return (\n    \u003CTanStackDevtools\n      plugins={\n        [\n          \u002F\u002F your plugins\n        ]\n      }\n    \u002F>\n  )\n}\n",[2078],{"type":57,"tag":112,"props":2079,"children":2080},{"__ignoreMap":280},[2081,2089,2124,2131,2160,2171,2183,2195,2203,2211,2219,2227,2235,2242],{"type":57,"tag":286,"props":2082,"children":2083},{"class":288,"line":289},[2084],{"type":57,"tag":286,"props":2085,"children":2086},{"style":293},[2087],{"type":63,"value":2088},"\u002F\u002F devtools-setup.tsx\n",{"type":57,"tag":286,"props":2090,"children":2091},{"class":288,"line":299},[2092,2096,2100,2104,2108,2112,2116,2120],{"type":57,"tag":286,"props":2093,"children":2094},{"style":303},[2095],{"type":63,"value":306},{"type":57,"tag":286,"props":2097,"children":2098},{"style":309},[2099],{"type":63,"value":312},{"type":57,"tag":286,"props":2101,"children":2102},{"style":315},[2103],{"type":63,"value":318},{"type":57,"tag":286,"props":2105,"children":2106},{"style":309},[2107],{"type":63,"value":323},{"type":57,"tag":286,"props":2109,"children":2110},{"style":303},[2111],{"type":63,"value":328},{"type":57,"tag":286,"props":2113,"children":2114},{"style":309},[2115],{"type":63,"value":333},{"type":57,"tag":286,"props":2117,"children":2118},{"style":336},[2119],{"type":63,"value":186},{"type":57,"tag":286,"props":2121,"children":2122},{"style":309},[2123],{"type":63,"value":343},{"type":57,"tag":286,"props":2125,"children":2126},{"class":288,"line":346},[2127],{"type":57,"tag":286,"props":2128,"children":2129},{"emptyLinePlaceholder":350},[2130],{"type":63,"value":353},{"type":57,"tag":286,"props":2132,"children":2133},{"class":288,"line":356},[2134,2138,2142,2147,2152,2156],{"type":57,"tag":286,"props":2135,"children":2136},{"style":303},[2137],{"type":63,"value":1136},{"type":57,"tag":286,"props":2139,"children":2140},{"style":303},[2141],{"type":63,"value":1141},{"type":57,"tag":286,"props":2143,"children":2144},{"style":360},[2145],{"type":63,"value":2146}," function",{"type":57,"tag":286,"props":2148,"children":2149},{"style":366},[2150],{"type":63,"value":2151}," Devtools",{"type":57,"tag":286,"props":2153,"children":2154},{"style":309},[2155],{"type":63,"value":374},{"type":57,"tag":286,"props":2157,"children":2158},{"style":309},[2159],{"type":63,"value":379},{"type":57,"tag":286,"props":2161,"children":2162},{"class":288,"line":382},[2163,2167],{"type":57,"tag":286,"props":2164,"children":2165},{"style":303},[2166],{"type":63,"value":388},{"type":57,"tag":286,"props":2168,"children":2169},{"style":391},[2170],{"type":63,"value":394},{"type":57,"tag":286,"props":2172,"children":2173},{"class":288,"line":397},[2174,2179],{"type":57,"tag":286,"props":2175,"children":2176},{"style":309},[2177],{"type":63,"value":2178},"    \u003C",{"type":57,"tag":286,"props":2180,"children":2181},{"style":415},[2182],{"type":63,"value":436},{"type":57,"tag":286,"props":2184,"children":2185},{"class":288,"line":406},[2186,2191],{"type":57,"tag":286,"props":2187,"children":2188},{"style":360},[2189],{"type":63,"value":2190},"      plugins",{"type":57,"tag":286,"props":2192,"children":2193},{"style":309},[2194],{"type":63,"value":450},{"type":57,"tag":286,"props":2196,"children":2197},{"class":288,"line":426},[2198],{"type":57,"tag":286,"props":2199,"children":2200},{"style":315},[2201],{"type":63,"value":2202},"        [\n",{"type":57,"tag":286,"props":2204,"children":2205},{"class":288,"line":439},[2206],{"type":57,"tag":286,"props":2207,"children":2208},{"style":293},[2209],{"type":63,"value":2210},"          \u002F\u002F your plugins\n",{"type":57,"tag":286,"props":2212,"children":2213},{"class":288,"line":453},[2214],{"type":57,"tag":286,"props":2215,"children":2216},{"style":315},[2217],{"type":63,"value":2218},"        ]\n",{"type":57,"tag":286,"props":2220,"children":2221},{"class":288,"line":462},[2222],{"type":57,"tag":286,"props":2223,"children":2224},{"style":309},[2225],{"type":63,"value":2226},"      }\n",{"type":57,"tag":286,"props":2228,"children":2229},{"class":288,"line":471},[2230],{"type":57,"tag":286,"props":2231,"children":2232},{"style":309},[2233],{"type":63,"value":2234},"    \u002F>\n",{"type":57,"tag":286,"props":2236,"children":2237},{"class":288,"line":480},[2238],{"type":57,"tag":286,"props":2239,"children":2240},{"style":391},[2241],{"type":63,"value":513},{"type":57,"tag":286,"props":2243,"children":2244},{"class":288,"line":489},[2245],{"type":57,"tag":286,"props":2246,"children":2247},{"style":309},[2248],{"type":63,"value":522},{"type":57,"tag":275,"props":2250,"children":2252},{"className":277,"code":2251,"language":279,"meta":280,"style":280},"\u002F\u002F App.tsx\nconst Devtools =\n  process.env.NODE_ENV === 'development'\n    ? (await import('.\u002Fdevtools-setup')).default\n    : () => null\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CDevtools \u002F>\n    \u003C\u002F>\n  )\n}\n",[2253],{"type":57,"tag":112,"props":2254,"children":2255},{"__ignoreMap":280},[2256,2264,2282,2325,2379,2402,2409,2428,2439,2446,2461,2477,2484,2491],{"type":57,"tag":286,"props":2257,"children":2258},{"class":288,"line":289},[2259],{"type":57,"tag":286,"props":2260,"children":2261},{"style":293},[2262],{"type":63,"value":2263},"\u002F\u002F App.tsx\n",{"type":57,"tag":286,"props":2265,"children":2266},{"class":288,"line":299},[2267,2272,2277],{"type":57,"tag":286,"props":2268,"children":2269},{"style":360},[2270],{"type":63,"value":2271},"const",{"type":57,"tag":286,"props":2273,"children":2274},{"style":315},[2275],{"type":63,"value":2276}," Devtools ",{"type":57,"tag":286,"props":2278,"children":2279},{"style":309},[2280],{"type":63,"value":2281},"=\n",{"type":57,"tag":286,"props":2283,"children":2284},{"class":288,"line":346},[2285,2290,2294,2299,2303,2308,2313,2317,2321],{"type":57,"tag":286,"props":2286,"children":2287},{"style":315},[2288],{"type":63,"value":2289},"  process",{"type":57,"tag":286,"props":2291,"children":2292},{"style":309},[2293],{"type":63,"value":167},{"type":57,"tag":286,"props":2295,"children":2296},{"style":315},[2297],{"type":63,"value":2298},"env",{"type":57,"tag":286,"props":2300,"children":2301},{"style":309},[2302],{"type":63,"value":167},{"type":57,"tag":286,"props":2304,"children":2305},{"style":315},[2306],{"type":63,"value":2307},"NODE_ENV ",{"type":57,"tag":286,"props":2309,"children":2310},{"style":309},[2311],{"type":63,"value":2312},"===",{"type":57,"tag":286,"props":2314,"children":2315},{"style":309},[2316],{"type":63,"value":333},{"type":57,"tag":286,"props":2318,"children":2319},{"style":336},[2320],{"type":63,"value":681},{"type":57,"tag":286,"props":2322,"children":2323},{"style":309},[2324],{"type":63,"value":343},{"type":57,"tag":286,"props":2326,"children":2327},{"class":288,"line":356},[2328,2333,2338,2343,2348,2352,2356,2361,2365,2370,2374],{"type":57,"tag":286,"props":2329,"children":2330},{"style":309},[2331],{"type":63,"value":2332},"    ?",{"type":57,"tag":286,"props":2334,"children":2335},{"style":315},[2336],{"type":63,"value":2337}," (",{"type":57,"tag":286,"props":2339,"children":2340},{"style":303},[2341],{"type":63,"value":2342},"await",{"type":57,"tag":286,"props":2344,"children":2345},{"style":309},[2346],{"type":63,"value":2347}," import",{"type":57,"tag":286,"props":2349,"children":2350},{"style":315},[2351],{"type":63,"value":1617},{"type":57,"tag":286,"props":2353,"children":2354},{"style":309},[2355],{"type":63,"value":1984},{"type":57,"tag":286,"props":2357,"children":2358},{"style":336},[2359],{"type":63,"value":2360},".\u002Fdevtools-setup",{"type":57,"tag":286,"props":2362,"children":2363},{"style":309},[2364],{"type":63,"value":1984},{"type":57,"tag":286,"props":2366,"children":2367},{"style":315},[2368],{"type":63,"value":2369},"))",{"type":57,"tag":286,"props":2371,"children":2372},{"style":309},[2373],{"type":63,"value":167},{"type":57,"tag":286,"props":2375,"children":2376},{"style":315},[2377],{"type":63,"value":2378},"default\n",{"type":57,"tag":286,"props":2380,"children":2381},{"class":288,"line":382},[2382,2387,2392,2397],{"type":57,"tag":286,"props":2383,"children":2384},{"style":309},[2385],{"type":63,"value":2386},"    :",{"type":57,"tag":286,"props":2388,"children":2389},{"style":309},[2390],{"type":63,"value":2391}," ()",{"type":57,"tag":286,"props":2393,"children":2394},{"style":360},[2395],{"type":63,"value":2396}," =>",{"type":57,"tag":286,"props":2398,"children":2399},{"style":309},[2400],{"type":63,"value":2401}," null\n",{"type":57,"tag":286,"props":2403,"children":2404},{"class":288,"line":397},[2405],{"type":57,"tag":286,"props":2406,"children":2407},{"emptyLinePlaceholder":350},[2408],{"type":63,"value":353},{"type":57,"tag":286,"props":2410,"children":2411},{"class":288,"line":406},[2412,2416,2420,2424],{"type":57,"tag":286,"props":2413,"children":2414},{"style":360},[2415],{"type":63,"value":363},{"type":57,"tag":286,"props":2417,"children":2418},{"style":366},[2419],{"type":63,"value":369},{"type":57,"tag":286,"props":2421,"children":2422},{"style":309},[2423],{"type":63,"value":374},{"type":57,"tag":286,"props":2425,"children":2426},{"style":309},[2427],{"type":63,"value":379},{"type":57,"tag":286,"props":2429,"children":2430},{"class":288,"line":426},[2431,2435],{"type":57,"tag":286,"props":2432,"children":2433},{"style":303},[2434],{"type":63,"value":388},{"type":57,"tag":286,"props":2436,"children":2437},{"style":391},[2438],{"type":63,"value":394},{"type":57,"tag":286,"props":2440,"children":2441},{"class":288,"line":439},[2442],{"type":57,"tag":286,"props":2443,"children":2444},{"style":309},[2445],{"type":63,"value":403},{"type":57,"tag":286,"props":2447,"children":2448},{"class":288,"line":453},[2449,2453,2457],{"type":57,"tag":286,"props":2450,"children":2451},{"style":309},[2452],{"type":63,"value":412},{"type":57,"tag":286,"props":2454,"children":2455},{"style":415},[2456],{"type":63,"value":418},{"type":57,"tag":286,"props":2458,"children":2459},{"style":309},[2460],{"type":63,"value":423},{"type":57,"tag":286,"props":2462,"children":2463},{"class":288,"line":462},[2464,2468,2473],{"type":57,"tag":286,"props":2465,"children":2466},{"style":309},[2467],{"type":63,"value":412},{"type":57,"tag":286,"props":2469,"children":2470},{"style":415},[2471],{"type":63,"value":2472},"Devtools",{"type":57,"tag":286,"props":2474,"children":2475},{"style":309},[2476],{"type":63,"value":423},{"type":57,"tag":286,"props":2478,"children":2479},{"class":288,"line":471},[2480],{"type":57,"tag":286,"props":2481,"children":2482},{"style":309},[2483],{"type":63,"value":504},{"type":57,"tag":286,"props":2485,"children":2486},{"class":288,"line":480},[2487],{"type":57,"tag":286,"props":2488,"children":2489},{"style":391},[2490],{"type":63,"value":513},{"type":57,"tag":286,"props":2492,"children":2493},{"class":288,"line":489},[2494],{"type":57,"tag":286,"props":2495,"children":2496},{"style":309},[2497],{"type":63,"value":522},{"type":57,"tag":70,"props":2499,"children":2500},{},[2501,2503,2509,2510,2516,2518,2524],{"type":63,"value":2502},"When ",{"type":57,"tag":112,"props":2504,"children":2506},{"className":2505},[],[2507],{"type":63,"value":2508},"NODE_ENV",{"type":63,"value":135},{"type":57,"tag":112,"props":2511,"children":2513},{"className":2512},[],[2514],{"type":63,"value":2515},"'production'",{"type":63,"value":2517},", bundlers eliminate the dead ",{"type":57,"tag":112,"props":2519,"children":2521},{"className":2520},[],[2522],{"type":63,"value":2523},"import()",{"type":63,"value":2525}," path. The devtools-setup module and all its transitive dependencies are never included in the bundle.",{"type":57,"tag":100,"props":2527,"children":2529},{"id":2528},"strategy-b-bundler-specific-dead-code-elimination",[2530],{"type":63,"value":2531},"Strategy B: Bundler-Specific Dead Code Elimination",{"type":57,"tag":70,"props":2533,"children":2534},{},[2535,2537,2543,2545,2551,2553,2559],{"type":63,"value":2536},"For bundlers that support define\u002Freplace plugins (webpack ",{"type":57,"tag":112,"props":2538,"children":2540},{"className":2539},[],[2541],{"type":63,"value":2542},"DefinePlugin",{"type":63,"value":2544},", esbuild ",{"type":57,"tag":112,"props":2546,"children":2548},{"className":2547},[],[2549],{"type":63,"value":2550},"define",{"type":63,"value":2552},", Rollup ",{"type":57,"tag":112,"props":2554,"children":2556},{"className":2555},[],[2557],{"type":63,"value":2558},"@rollup\u002Fplugin-replace",{"type":63,"value":2560},"), wrap the import in a condition that the bundler can statically evaluate:",{"type":57,"tag":275,"props":2562,"children":2564},{"className":277,"code":2563,"language":279,"meta":280,"style":280},"\u002F\u002F webpack example with DefinePlugin\nlet DevtoolsComponent: React.ComponentType = () => null\n\nif (__DEV__) {\n  const { TanStackDevtools } = await import('@tanstack\u002Freact-devtools')\n  DevtoolsComponent = () => (\n    \u003CTanStackDevtools\n      plugins={\n        [\n          \u002F* ... *\u002F\n        ]\n      }\n    \u002F>\n  )\n}\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CDevtoolsComponent \u002F>\n    \u003C\u002F>\n  )\n}\n",[2565],{"type":57,"tag":112,"props":2566,"children":2567},{"__ignoreMap":280},[2568,2576,2624,2631,2648,2702,2726,2737,2748,2755,2763,2770,2777,2784,2791,2798,2805,2824,2836,2844,2860,2877,2885,2893],{"type":57,"tag":286,"props":2569,"children":2570},{"class":288,"line":289},[2571],{"type":57,"tag":286,"props":2572,"children":2573},{"style":293},[2574],{"type":63,"value":2575},"\u002F\u002F webpack example with DefinePlugin\n",{"type":57,"tag":286,"props":2577,"children":2578},{"class":288,"line":299},[2579,2584,2589,2593,2598,2602,2607,2612,2616,2620],{"type":57,"tag":286,"props":2580,"children":2581},{"style":360},[2582],{"type":63,"value":2583},"let",{"type":57,"tag":286,"props":2585,"children":2586},{"style":315},[2587],{"type":63,"value":2588}," DevtoolsComponent",{"type":57,"tag":286,"props":2590,"children":2591},{"style":309},[2592],{"type":63,"value":579},{"type":57,"tag":286,"props":2594,"children":2595},{"style":415},[2596],{"type":63,"value":2597}," React",{"type":57,"tag":286,"props":2599,"children":2600},{"style":309},[2601],{"type":63,"value":167},{"type":57,"tag":286,"props":2603,"children":2604},{"style":415},[2605],{"type":63,"value":2606},"ComponentType",{"type":57,"tag":286,"props":2608,"children":2609},{"style":309},[2610],{"type":63,"value":2611}," =",{"type":57,"tag":286,"props":2613,"children":2614},{"style":309},[2615],{"type":63,"value":2391},{"type":57,"tag":286,"props":2617,"children":2618},{"style":360},[2619],{"type":63,"value":2396},{"type":57,"tag":286,"props":2621,"children":2622},{"style":309},[2623],{"type":63,"value":2401},{"type":57,"tag":286,"props":2625,"children":2626},{"class":288,"line":346},[2627],{"type":57,"tag":286,"props":2628,"children":2629},{"emptyLinePlaceholder":350},[2630],{"type":63,"value":353},{"type":57,"tag":286,"props":2632,"children":2633},{"class":288,"line":356},[2634,2639,2644],{"type":57,"tag":286,"props":2635,"children":2636},{"style":303},[2637],{"type":63,"value":2638},"if",{"type":57,"tag":286,"props":2640,"children":2641},{"style":315},[2642],{"type":63,"value":2643}," (__DEV__) ",{"type":57,"tag":286,"props":2645,"children":2646},{"style":309},[2647],{"type":63,"value":556},{"type":57,"tag":286,"props":2649,"children":2650},{"class":288,"line":382},[2651,2656,2660,2664,2668,2672,2677,2681,2685,2689,2693,2697],{"type":57,"tag":286,"props":2652,"children":2653},{"style":360},[2654],{"type":63,"value":2655},"  const",{"type":57,"tag":286,"props":2657,"children":2658},{"style":309},[2659],{"type":63,"value":312},{"type":57,"tag":286,"props":2661,"children":2662},{"style":315},[2663],{"type":63,"value":318},{"type":57,"tag":286,"props":2665,"children":2666},{"style":309},[2667],{"type":63,"value":323},{"type":57,"tag":286,"props":2669,"children":2670},{"style":309},[2671],{"type":63,"value":2611},{"type":57,"tag":286,"props":2673,"children":2674},{"style":303},[2675],{"type":63,"value":2676}," await",{"type":57,"tag":286,"props":2678,"children":2679},{"style":309},[2680],{"type":63,"value":2347},{"type":57,"tag":286,"props":2682,"children":2683},{"style":391},[2684],{"type":63,"value":1617},{"type":57,"tag":286,"props":2686,"children":2687},{"style":309},[2688],{"type":63,"value":1984},{"type":57,"tag":286,"props":2690,"children":2691},{"style":336},[2692],{"type":63,"value":186},{"type":57,"tag":286,"props":2694,"children":2695},{"style":309},[2696],{"type":63,"value":1984},{"type":57,"tag":286,"props":2698,"children":2699},{"style":391},[2700],{"type":63,"value":2701},")\n",{"type":57,"tag":286,"props":2703,"children":2704},{"class":288,"line":397},[2705,2710,2714,2718,2722],{"type":57,"tag":286,"props":2706,"children":2707},{"style":366},[2708],{"type":63,"value":2709},"  DevtoolsComponent",{"type":57,"tag":286,"props":2711,"children":2712},{"style":309},[2713],{"type":63,"value":2611},{"type":57,"tag":286,"props":2715,"children":2716},{"style":309},[2717],{"type":63,"value":2391},{"type":57,"tag":286,"props":2719,"children":2720},{"style":360},[2721],{"type":63,"value":2396},{"type":57,"tag":286,"props":2723,"children":2724},{"style":391},[2725],{"type":63,"value":394},{"type":57,"tag":286,"props":2727,"children":2728},{"class":288,"line":406},[2729,2733],{"type":57,"tag":286,"props":2730,"children":2731},{"style":309},[2732],{"type":63,"value":2178},{"type":57,"tag":286,"props":2734,"children":2735},{"style":415},[2736],{"type":63,"value":436},{"type":57,"tag":286,"props":2738,"children":2739},{"class":288,"line":426},[2740,2744],{"type":57,"tag":286,"props":2741,"children":2742},{"style":360},[2743],{"type":63,"value":2190},{"type":57,"tag":286,"props":2745,"children":2746},{"style":309},[2747],{"type":63,"value":450},{"type":57,"tag":286,"props":2749,"children":2750},{"class":288,"line":439},[2751],{"type":57,"tag":286,"props":2752,"children":2753},{"style":315},[2754],{"type":63,"value":2202},{"type":57,"tag":286,"props":2756,"children":2757},{"class":288,"line":453},[2758],{"type":57,"tag":286,"props":2759,"children":2760},{"style":293},[2761],{"type":63,"value":2762},"          \u002F* ... *\u002F\n",{"type":57,"tag":286,"props":2764,"children":2765},{"class":288,"line":462},[2766],{"type":57,"tag":286,"props":2767,"children":2768},{"style":315},[2769],{"type":63,"value":2218},{"type":57,"tag":286,"props":2771,"children":2772},{"class":288,"line":471},[2773],{"type":57,"tag":286,"props":2774,"children":2775},{"style":309},[2776],{"type":63,"value":2226},{"type":57,"tag":286,"props":2778,"children":2779},{"class":288,"line":480},[2780],{"type":57,"tag":286,"props":2781,"children":2782},{"style":309},[2783],{"type":63,"value":2234},{"type":57,"tag":286,"props":2785,"children":2786},{"class":288,"line":489},[2787],{"type":57,"tag":286,"props":2788,"children":2789},{"style":391},[2790],{"type":63,"value":513},{"type":57,"tag":286,"props":2792,"children":2793},{"class":288,"line":498},[2794],{"type":57,"tag":286,"props":2795,"children":2796},{"style":309},[2797],{"type":63,"value":522},{"type":57,"tag":286,"props":2799,"children":2800},{"class":288,"line":507},[2801],{"type":57,"tag":286,"props":2802,"children":2803},{"emptyLinePlaceholder":350},[2804],{"type":63,"value":353},{"type":57,"tag":286,"props":2806,"children":2807},{"class":288,"line":516},[2808,2812,2816,2820],{"type":57,"tag":286,"props":2809,"children":2810},{"style":360},[2811],{"type":63,"value":363},{"type":57,"tag":286,"props":2813,"children":2814},{"style":366},[2815],{"type":63,"value":369},{"type":57,"tag":286,"props":2817,"children":2818},{"style":309},[2819],{"type":63,"value":374},{"type":57,"tag":286,"props":2821,"children":2822},{"style":309},[2823],{"type":63,"value":379},{"type":57,"tag":286,"props":2825,"children":2827},{"class":288,"line":2826},18,[2828,2832],{"type":57,"tag":286,"props":2829,"children":2830},{"style":303},[2831],{"type":63,"value":388},{"type":57,"tag":286,"props":2833,"children":2834},{"style":391},[2835],{"type":63,"value":394},{"type":57,"tag":286,"props":2837,"children":2839},{"class":288,"line":2838},19,[2840],{"type":57,"tag":286,"props":2841,"children":2842},{"style":309},[2843],{"type":63,"value":403},{"type":57,"tag":286,"props":2845,"children":2847},{"class":288,"line":2846},20,[2848,2852,2856],{"type":57,"tag":286,"props":2849,"children":2850},{"style":309},[2851],{"type":63,"value":412},{"type":57,"tag":286,"props":2853,"children":2854},{"style":415},[2855],{"type":63,"value":418},{"type":57,"tag":286,"props":2857,"children":2858},{"style":309},[2859],{"type":63,"value":423},{"type":57,"tag":286,"props":2861,"children":2863},{"class":288,"line":2862},21,[2864,2868,2873],{"type":57,"tag":286,"props":2865,"children":2866},{"style":309},[2867],{"type":63,"value":412},{"type":57,"tag":286,"props":2869,"children":2870},{"style":415},[2871],{"type":63,"value":2872},"DevtoolsComponent",{"type":57,"tag":286,"props":2874,"children":2875},{"style":309},[2876],{"type":63,"value":423},{"type":57,"tag":286,"props":2878,"children":2880},{"class":288,"line":2879},22,[2881],{"type":57,"tag":286,"props":2882,"children":2883},{"style":309},[2884],{"type":63,"value":504},{"type":57,"tag":286,"props":2886,"children":2888},{"class":288,"line":2887},23,[2889],{"type":57,"tag":286,"props":2890,"children":2891},{"style":391},[2892],{"type":63,"value":513},{"type":57,"tag":286,"props":2894,"children":2896},{"class":288,"line":2895},24,[2897],{"type":57,"tag":286,"props":2898,"children":2899},{"style":309},[2900],{"type":63,"value":522},{"type":57,"tag":70,"props":2902,"children":2903},{},[2904,2906,2912,2914,2920],{"type":63,"value":2905},"The key requirement is that the condition must be statically resolvable by the bundler. ",{"type":57,"tag":112,"props":2907,"children":2909},{"className":2908},[],[2910],{"type":63,"value":2911},"process.env.NODE_ENV === 'development'",{"type":63,"value":2913}," works for most bundlers. Framework-specific globals like ",{"type":57,"tag":112,"props":2915,"children":2917},{"className":2916},[],[2918],{"type":63,"value":2919},"__DEV__",{"type":63,"value":2921}," also work.",{"type":57,"tag":88,"props":2923,"children":2925},{"id":2924},"noop-plugin-variants-for-tree-shaking",[2926],{"type":63,"value":2927},"NoOp Plugin Variants for Tree-Shaking",{"type":57,"tag":70,"props":2929,"children":2930},{},[2931,2933,2939,2941,2947,2949,2955],{"type":63,"value":2932},"When building reusable plugin packages with ",{"type":57,"tag":112,"props":2934,"children":2936},{"className":2935},[],[2937],{"type":63,"value":2938},"@tanstack\u002Fdevtools-utils",{"type":63,"value":2940},", the factory functions return a ",{"type":57,"tag":112,"props":2942,"children":2944},{"className":2943},[],[2945],{"type":63,"value":2946},"[Plugin, NoOpPlugin]",{"type":63,"value":2948}," tuple. The ",{"type":57,"tag":112,"props":2950,"children":2952},{"className":2951},[],[2953],{"type":63,"value":2954},"NoOpPlugin",{"type":63,"value":2956}," renders an empty fragment and carries no real dependencies. This is the primary mechanism for library authors to make their plugins tree-shakable.",{"type":57,"tag":275,"props":2958,"children":2960},{"className":277,"code":2959,"language":279,"meta":280,"style":280},"import { createReactPlugin } from '@tanstack\u002Fdevtools-utils\u002Freact'\n\nconst [QueryPlugin, QueryNoOpPlugin] = createReactPlugin({\n  name: 'TanStack Query',\n  Component: ({ theme }) => \u003CQueryDevtoolsPanel theme={theme} \u002F>,\n})\n\n\u002F\u002F The library exports both, and consumers choose:\nexport { QueryPlugin, QueryNoOpPlugin }\n",[2961],{"type":57,"tag":112,"props":2962,"children":2963},{"__ignoreMap":280},[2964,3001,3008,3055,3084,3145,3157,3164,3172],{"type":57,"tag":286,"props":2965,"children":2966},{"class":288,"line":289},[2967,2971,2975,2980,2984,2988,2992,2997],{"type":57,"tag":286,"props":2968,"children":2969},{"style":303},[2970],{"type":63,"value":306},{"type":57,"tag":286,"props":2972,"children":2973},{"style":309},[2974],{"type":63,"value":312},{"type":57,"tag":286,"props":2976,"children":2977},{"style":315},[2978],{"type":63,"value":2979}," createReactPlugin",{"type":57,"tag":286,"props":2981,"children":2982},{"style":309},[2983],{"type":63,"value":323},{"type":57,"tag":286,"props":2985,"children":2986},{"style":303},[2987],{"type":63,"value":328},{"type":57,"tag":286,"props":2989,"children":2990},{"style":309},[2991],{"type":63,"value":333},{"type":57,"tag":286,"props":2993,"children":2994},{"style":336},[2995],{"type":63,"value":2996},"@tanstack\u002Fdevtools-utils\u002Freact",{"type":57,"tag":286,"props":2998,"children":2999},{"style":309},[3000],{"type":63,"value":343},{"type":57,"tag":286,"props":3002,"children":3003},{"class":288,"line":299},[3004],{"type":57,"tag":286,"props":3005,"children":3006},{"emptyLinePlaceholder":350},[3007],{"type":63,"value":353},{"type":57,"tag":286,"props":3009,"children":3010},{"class":288,"line":346},[3011,3015,3020,3025,3029,3034,3039,3043,3047,3051],{"type":57,"tag":286,"props":3012,"children":3013},{"style":360},[3014],{"type":63,"value":2271},{"type":57,"tag":286,"props":3016,"children":3017},{"style":309},[3018],{"type":63,"value":3019}," [",{"type":57,"tag":286,"props":3021,"children":3022},{"style":315},[3023],{"type":63,"value":3024},"QueryPlugin",{"type":57,"tag":286,"props":3026,"children":3027},{"style":309},[3028],{"type":63,"value":1179},{"type":57,"tag":286,"props":3030,"children":3031},{"style":315},[3032],{"type":63,"value":3033}," QueryNoOpPlugin",{"type":57,"tag":286,"props":3035,"children":3036},{"style":309},[3037],{"type":63,"value":3038},"]",{"type":57,"tag":286,"props":3040,"children":3041},{"style":309},[3042],{"type":63,"value":2611},{"type":57,"tag":286,"props":3044,"children":3045},{"style":366},[3046],{"type":63,"value":2979},{"type":57,"tag":286,"props":3048,"children":3049},{"style":315},[3050],{"type":63,"value":1617},{"type":57,"tag":286,"props":3052,"children":3053},{"style":309},[3054],{"type":63,"value":556},{"type":57,"tag":286,"props":3056,"children":3057},{"class":288,"line":356},[3058,3063,3067,3071,3076,3080],{"type":57,"tag":286,"props":3059,"children":3060},{"style":391},[3061],{"type":63,"value":3062},"  name",{"type":57,"tag":286,"props":3064,"children":3065},{"style":309},[3066],{"type":63,"value":579},{"type":57,"tag":286,"props":3068,"children":3069},{"style":309},[3070],{"type":63,"value":333},{"type":57,"tag":286,"props":3072,"children":3073},{"style":336},[3074],{"type":63,"value":3075},"TanStack Query",{"type":57,"tag":286,"props":3077,"children":3078},{"style":309},[3079],{"type":63,"value":1984},{"type":57,"tag":286,"props":3081,"children":3082},{"style":309},[3083],{"type":63,"value":1201},{"type":57,"tag":286,"props":3085,"children":3086},{"class":288,"line":382},[3087,3092,3096,3101,3107,3112,3116,3121,3126,3130,3135,3140],{"type":57,"tag":286,"props":3088,"children":3089},{"style":366},[3090],{"type":63,"value":3091},"  Component",{"type":57,"tag":286,"props":3093,"children":3094},{"style":309},[3095],{"type":63,"value":579},{"type":57,"tag":286,"props":3097,"children":3098},{"style":309},[3099],{"type":63,"value":3100}," ({",{"type":57,"tag":286,"props":3102,"children":3104},{"style":3103},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[3105],{"type":63,"value":3106}," theme",{"type":57,"tag":286,"props":3108,"children":3109},{"style":309},[3110],{"type":63,"value":3111}," })",{"type":57,"tag":286,"props":3113,"children":3114},{"style":360},[3115],{"type":63,"value":2396},{"type":57,"tag":286,"props":3117,"children":3118},{"style":309},[3119],{"type":63,"value":3120}," \u003C",{"type":57,"tag":286,"props":3122,"children":3123},{"style":415},[3124],{"type":63,"value":3125},"QueryDevtoolsPanel",{"type":57,"tag":286,"props":3127,"children":3128},{"style":360},[3129],{"type":63,"value":3106},{"type":57,"tag":286,"props":3131,"children":3132},{"style":309},[3133],{"type":63,"value":3134},"={",{"type":57,"tag":286,"props":3136,"children":3137},{"style":315},[3138],{"type":63,"value":3139},"theme",{"type":57,"tag":286,"props":3141,"children":3142},{"style":309},[3143],{"type":63,"value":3144},"} \u002F>,\n",{"type":57,"tag":286,"props":3146,"children":3147},{"class":288,"line":397},[3148,3153],{"type":57,"tag":286,"props":3149,"children":3150},{"style":309},[3151],{"type":63,"value":3152},"}",{"type":57,"tag":286,"props":3154,"children":3155},{"style":315},[3156],{"type":63,"value":2701},{"type":57,"tag":286,"props":3158,"children":3159},{"class":288,"line":406},[3160],{"type":57,"tag":286,"props":3161,"children":3162},{"emptyLinePlaceholder":350},[3163],{"type":63,"value":353},{"type":57,"tag":286,"props":3165,"children":3166},{"class":288,"line":426},[3167],{"type":57,"tag":286,"props":3168,"children":3169},{"style":293},[3170],{"type":63,"value":3171},"\u002F\u002F The library exports both, and consumers choose:\n",{"type":57,"tag":286,"props":3173,"children":3174},{"class":288,"line":439},[3175,3179,3183,3188,3192,3196],{"type":57,"tag":286,"props":3176,"children":3177},{"style":303},[3178],{"type":63,"value":1136},{"type":57,"tag":286,"props":3180,"children":3181},{"style":309},[3182],{"type":63,"value":312},{"type":57,"tag":286,"props":3184,"children":3185},{"style":315},[3186],{"type":63,"value":3187}," QueryPlugin",{"type":57,"tag":286,"props":3189,"children":3190},{"style":309},[3191],{"type":63,"value":1179},{"type":57,"tag":286,"props":3193,"children":3194},{"style":315},[3195],{"type":63,"value":3033},{"type":57,"tag":286,"props":3197,"children":3198},{"style":309},[3199],{"type":63,"value":824},{"type":57,"tag":70,"props":3201,"children":3202},{},[3203],{"type":63,"value":3204},"Consumer code uses the NoOp variant in production:",{"type":57,"tag":275,"props":3206,"children":3208},{"className":277,"code":3207,"language":279,"meta":280,"style":280},"import { QueryPlugin, QueryNoOpPlugin } from '@tanstack\u002Fquery-devtools'\n\nconst ActivePlugin =\n  process.env.NODE_ENV === 'development' ? QueryPlugin : QueryNoOpPlugin\n\nfunction App() {\n  return \u003CTanStackDevtools plugins={[ActivePlugin()]} \u002F>\n}\n",[3209],{"type":57,"tag":112,"props":3210,"children":3211},{"__ignoreMap":280},[3212,3256,3263,3279,3337,3344,3363,3408],{"type":57,"tag":286,"props":3213,"children":3214},{"class":288,"line":289},[3215,3219,3223,3227,3231,3235,3239,3243,3247,3252],{"type":57,"tag":286,"props":3216,"children":3217},{"style":303},[3218],{"type":63,"value":306},{"type":57,"tag":286,"props":3220,"children":3221},{"style":309},[3222],{"type":63,"value":312},{"type":57,"tag":286,"props":3224,"children":3225},{"style":315},[3226],{"type":63,"value":3187},{"type":57,"tag":286,"props":3228,"children":3229},{"style":309},[3230],{"type":63,"value":1179},{"type":57,"tag":286,"props":3232,"children":3233},{"style":315},[3234],{"type":63,"value":3033},{"type":57,"tag":286,"props":3236,"children":3237},{"style":309},[3238],{"type":63,"value":323},{"type":57,"tag":286,"props":3240,"children":3241},{"style":303},[3242],{"type":63,"value":328},{"type":57,"tag":286,"props":3244,"children":3245},{"style":309},[3246],{"type":63,"value":333},{"type":57,"tag":286,"props":3248,"children":3249},{"style":336},[3250],{"type":63,"value":3251},"@tanstack\u002Fquery-devtools",{"type":57,"tag":286,"props":3253,"children":3254},{"style":309},[3255],{"type":63,"value":343},{"type":57,"tag":286,"props":3257,"children":3258},{"class":288,"line":299},[3259],{"type":57,"tag":286,"props":3260,"children":3261},{"emptyLinePlaceholder":350},[3262],{"type":63,"value":353},{"type":57,"tag":286,"props":3264,"children":3265},{"class":288,"line":346},[3266,3270,3275],{"type":57,"tag":286,"props":3267,"children":3268},{"style":360},[3269],{"type":63,"value":2271},{"type":57,"tag":286,"props":3271,"children":3272},{"style":315},[3273],{"type":63,"value":3274}," ActivePlugin ",{"type":57,"tag":286,"props":3276,"children":3277},{"style":309},[3278],{"type":63,"value":2281},{"type":57,"tag":286,"props":3280,"children":3281},{"class":288,"line":356},[3282,3286,3290,3294,3298,3302,3306,3310,3314,3318,3323,3328,3332],{"type":57,"tag":286,"props":3283,"children":3284},{"style":315},[3285],{"type":63,"value":2289},{"type":57,"tag":286,"props":3287,"children":3288},{"style":309},[3289],{"type":63,"value":167},{"type":57,"tag":286,"props":3291,"children":3292},{"style":315},[3293],{"type":63,"value":2298},{"type":57,"tag":286,"props":3295,"children":3296},{"style":309},[3297],{"type":63,"value":167},{"type":57,"tag":286,"props":3299,"children":3300},{"style":315},[3301],{"type":63,"value":2307},{"type":57,"tag":286,"props":3303,"children":3304},{"style":309},[3305],{"type":63,"value":2312},{"type":57,"tag":286,"props":3307,"children":3308},{"style":309},[3309],{"type":63,"value":333},{"type":57,"tag":286,"props":3311,"children":3312},{"style":336},[3313],{"type":63,"value":681},{"type":57,"tag":286,"props":3315,"children":3316},{"style":309},[3317],{"type":63,"value":1984},{"type":57,"tag":286,"props":3319,"children":3320},{"style":309},[3321],{"type":63,"value":3322}," ?",{"type":57,"tag":286,"props":3324,"children":3325},{"style":315},[3326],{"type":63,"value":3327}," QueryPlugin ",{"type":57,"tag":286,"props":3329,"children":3330},{"style":309},[3331],{"type":63,"value":579},{"type":57,"tag":286,"props":3333,"children":3334},{"style":315},[3335],{"type":63,"value":3336}," QueryNoOpPlugin\n",{"type":57,"tag":286,"props":3338,"children":3339},{"class":288,"line":382},[3340],{"type":57,"tag":286,"props":3341,"children":3342},{"emptyLinePlaceholder":350},[3343],{"type":63,"value":353},{"type":57,"tag":286,"props":3345,"children":3346},{"class":288,"line":397},[3347,3351,3355,3359],{"type":57,"tag":286,"props":3348,"children":3349},{"style":360},[3350],{"type":63,"value":363},{"type":57,"tag":286,"props":3352,"children":3353},{"style":366},[3354],{"type":63,"value":369},{"type":57,"tag":286,"props":3356,"children":3357},{"style":309},[3358],{"type":63,"value":374},{"type":57,"tag":286,"props":3360,"children":3361},{"style":309},[3362],{"type":63,"value":379},{"type":57,"tag":286,"props":3364,"children":3365},{"class":288,"line":406},[3366,3370,3374,3379,3384,3388,3393,3398,3403],{"type":57,"tag":286,"props":3367,"children":3368},{"style":303},[3369],{"type":63,"value":388},{"type":57,"tag":286,"props":3371,"children":3372},{"style":309},[3373],{"type":63,"value":3120},{"type":57,"tag":286,"props":3375,"children":3376},{"style":415},[3377],{"type":63,"value":3378},"TanStackDevtools",{"type":57,"tag":286,"props":3380,"children":3381},{"style":360},[3382],{"type":63,"value":3383}," plugins",{"type":57,"tag":286,"props":3385,"children":3386},{"style":309},[3387],{"type":63,"value":3134},{"type":57,"tag":286,"props":3389,"children":3390},{"style":315},[3391],{"type":63,"value":3392},"[",{"type":57,"tag":286,"props":3394,"children":3395},{"style":366},[3396],{"type":63,"value":3397},"ActivePlugin",{"type":57,"tag":286,"props":3399,"children":3400},{"style":315},[3401],{"type":63,"value":3402},"()]",{"type":57,"tag":286,"props":3404,"children":3405},{"style":309},[3406],{"type":63,"value":3407},"} \u002F>\n",{"type":57,"tag":286,"props":3409,"children":3410},{"class":288,"line":426},[3411],{"type":57,"tag":286,"props":3412,"children":3413},{"style":309},[3414],{"type":63,"value":522},{"type":57,"tag":70,"props":3416,"children":3417},{},[3418],{"type":63,"value":3419},"The NoOp pattern exists for every framework adapter:",{"type":57,"tag":3421,"props":3422,"children":3423},"table",{},[3424,3448],{"type":57,"tag":3425,"props":3426,"children":3427},"thead",{},[3428],{"type":57,"tag":3429,"props":3430,"children":3431},"tr",{},[3432,3438,3443],{"type":57,"tag":3433,"props":3434,"children":3435},"th",{},[3436],{"type":63,"value":3437},"Framework",{"type":57,"tag":3433,"props":3439,"children":3440},{},[3441],{"type":63,"value":3442},"Factory",{"type":57,"tag":3433,"props":3444,"children":3445},{},[3446],{"type":63,"value":3447},"Source",{"type":57,"tag":3449,"props":3450,"children":3451},"tbody",{},[3452,3478,3503,3529,3555],{"type":57,"tag":3429,"props":3453,"children":3454},{},[3455,3461,3470],{"type":57,"tag":3456,"props":3457,"children":3458},"td",{},[3459],{"type":63,"value":3460},"React",{"type":57,"tag":3456,"props":3462,"children":3463},{},[3464],{"type":57,"tag":112,"props":3465,"children":3467},{"className":3466},[],[3468],{"type":63,"value":3469},"createReactPlugin",{"type":57,"tag":3456,"props":3471,"children":3472},{},[3473],{"type":57,"tag":112,"props":3474,"children":3476},{"className":3475},[],[3477],{"type":63,"value":51},{"type":57,"tag":3429,"props":3479,"children":3480},{},[3481,3486,3495],{"type":57,"tag":3456,"props":3482,"children":3483},{},[3484],{"type":63,"value":3485},"React (panel)",{"type":57,"tag":3456,"props":3487,"children":3488},{},[3489],{"type":57,"tag":112,"props":3490,"children":3492},{"className":3491},[],[3493],{"type":63,"value":3494},"createReactPanel",{"type":57,"tag":3456,"props":3496,"children":3497},{},[3498],{"type":57,"tag":112,"props":3499,"children":3501},{"className":3500},[],[3502],{"type":63,"value":52},{"type":57,"tag":3429,"props":3504,"children":3505},{},[3506,3511,3520],{"type":57,"tag":3456,"props":3507,"children":3508},{},[3509],{"type":63,"value":3510},"Preact",{"type":57,"tag":3456,"props":3512,"children":3513},{},[3514],{"type":57,"tag":112,"props":3515,"children":3517},{"className":3516},[],[3518],{"type":63,"value":3519},"createPreactPlugin",{"type":57,"tag":3456,"props":3521,"children":3522},{},[3523],{"type":57,"tag":112,"props":3524,"children":3526},{"className":3525},[],[3527],{"type":63,"value":3528},"packages\u002Fdevtools-utils\u002Fsrc\u002Fpreact\u002Fplugin.tsx",{"type":57,"tag":3429,"props":3530,"children":3531},{},[3532,3537,3546],{"type":57,"tag":3456,"props":3533,"children":3534},{},[3535],{"type":63,"value":3536},"Solid",{"type":57,"tag":3456,"props":3538,"children":3539},{},[3540],{"type":57,"tag":112,"props":3541,"children":3543},{"className":3542},[],[3544],{"type":63,"value":3545},"createSolidPlugin",{"type":57,"tag":3456,"props":3547,"children":3548},{},[3549],{"type":57,"tag":112,"props":3550,"children":3552},{"className":3551},[],[3553],{"type":63,"value":3554},"packages\u002Fdevtools-utils\u002Fsrc\u002Fsolid\u002Fplugin.tsx",{"type":57,"tag":3429,"props":3556,"children":3557},{},[3558,3563,3572],{"type":57,"tag":3456,"props":3559,"children":3560},{},[3561],{"type":63,"value":3562},"Vue",{"type":57,"tag":3456,"props":3564,"children":3565},{},[3566],{"type":57,"tag":112,"props":3567,"children":3569},{"className":3568},[],[3570],{"type":63,"value":3571},"createVuePlugin",{"type":57,"tag":3456,"props":3573,"children":3574},{},[3575],{"type":57,"tag":112,"props":3576,"children":3578},{"className":3577},[],[3579],{"type":63,"value":3580},"packages\u002Fdevtools-utils\u002Fsrc\u002Fvue\u002Fplugin.ts",{"type":57,"tag":70,"props":3582,"children":3583},{},[3584,3586,3592,3594,3599,3601,3607,3609,3615,3616,3622],{"type":63,"value":3585},"All return ",{"type":57,"tag":112,"props":3587,"children":3589},{"className":3588},[],[3590],{"type":63,"value":3591},"readonly [Plugin, NoOpPlugin]",{"type":63,"value":3593},". The ",{"type":57,"tag":112,"props":3595,"children":3597},{"className":3596},[],[3598],{"type":63,"value":2954},{"type":63,"value":3600}," always has the same metadata (",{"type":57,"tag":112,"props":3602,"children":3604},{"className":3603},[],[3605],{"type":63,"value":3606},"name",{"type":63,"value":3608},", ",{"type":57,"tag":112,"props":3610,"children":3612},{"className":3611},[],[3613],{"type":63,"value":3614},"id",{"type":63,"value":3608},{"type":57,"tag":112,"props":3617,"children":3619},{"className":3618},[],[3620],{"type":63,"value":3621},"defaultOpen",{"type":63,"value":3623},") but its render function produces an empty fragment, so the bundler can tree-shake the real panel component and all its dependencies.",{"type":57,"tag":70,"props":3625,"children":3626},{},[3627,3629,3634],{"type":63,"value":3628},"See the ",{"type":57,"tag":74,"props":3630,"children":3631},{},[3632],{"type":63,"value":3633},"devtools-framework-adapters",{"type":63,"value":3635}," skill for the full factory API details.",{"type":57,"tag":88,"props":3637,"children":3639},{"id":3638},"common-mistakes",[3640],{"type":63,"value":3641},"Common Mistakes",{"type":57,"tag":100,"props":3643,"children":3645},{"id":3644},"high-keeping-devtools-in-production-without-disabling-stripping",[3646],{"type":63,"value":3647},"HIGH: Keeping devtools in production without disabling stripping",{"type":57,"tag":70,"props":3649,"children":3650},{},[3651,3653,3658,3660,3665],{"type":63,"value":3652},"The Vite plugin's ",{"type":57,"tag":112,"props":3654,"children":3656},{"className":3655},[],[3657],{"type":63,"value":133},{"type":63,"value":3659}," defaults to ",{"type":57,"tag":112,"props":3661,"children":3663},{"className":3662},[],[3664],{"type":63,"value":141},{"type":63,"value":3666},". If you want devtools in production, you must both disable stripping AND install as a regular dependency. Missing either step causes failure.",{"type":57,"tag":70,"props":3668,"children":3669},{},[3670],{"type":57,"tag":74,"props":3671,"children":3672},{},[3673],{"type":63,"value":3674},"Wrong -- devtools stripped despite wanting them in production:",{"type":57,"tag":275,"props":3676,"children":3678},{"className":1049,"code":3677,"language":1051,"meta":280,"style":280},"\u002F\u002F vite.config.ts\nexport default {\n  plugins: [\n    devtools(), \u002F\u002F removeDevtoolsOnBuild defaults to true -- code is stripped\n    react(),\n  ],\n}\n",[3679],{"type":57,"tag":112,"props":3680,"children":3681},{"__ignoreMap":280},[3682,3690,3705,3720,3740,3755,3766],{"type":57,"tag":286,"props":3683,"children":3684},{"class":288,"line":289},[3685],{"type":57,"tag":286,"props":3686,"children":3687},{"style":293},[3688],{"type":63,"value":3689},"\u002F\u002F vite.config.ts\n",{"type":57,"tag":286,"props":3691,"children":3692},{"class":288,"line":299},[3693,3697,3701],{"type":57,"tag":286,"props":3694,"children":3695},{"style":303},[3696],{"type":63,"value":1136},{"type":57,"tag":286,"props":3698,"children":3699},{"style":303},[3700],{"type":63,"value":1141},{"type":57,"tag":286,"props":3702,"children":3703},{"style":309},[3704],{"type":63,"value":379},{"type":57,"tag":286,"props":3706,"children":3707},{"class":288,"line":346},[3708,3712,3716],{"type":57,"tag":286,"props":3709,"children":3710},{"style":391},[3711],{"type":63,"value":1153},{"type":57,"tag":286,"props":3713,"children":3714},{"style":309},[3715],{"type":63,"value":579},{"type":57,"tag":286,"props":3717,"children":3718},{"style":315},[3719],{"type":63,"value":1162},{"type":57,"tag":286,"props":3721,"children":3722},{"class":288,"line":356},[3723,3727,3731,3735],{"type":57,"tag":286,"props":3724,"children":3725},{"style":366},[3726],{"type":63,"value":1170},{"type":57,"tag":286,"props":3728,"children":3729},{"style":315},[3730],{"type":63,"value":374},{"type":57,"tag":286,"props":3732,"children":3733},{"style":309},[3734],{"type":63,"value":1179},{"type":57,"tag":286,"props":3736,"children":3737},{"style":293},[3738],{"type":63,"value":3739}," \u002F\u002F removeDevtoolsOnBuild defaults to true -- code is stripped\n",{"type":57,"tag":286,"props":3741,"children":3742},{"class":288,"line":382},[3743,3747,3751],{"type":57,"tag":286,"props":3744,"children":3745},{"style":366},[3746],{"type":63,"value":1192},{"type":57,"tag":286,"props":3748,"children":3749},{"style":315},[3750],{"type":63,"value":374},{"type":57,"tag":286,"props":3752,"children":3753},{"style":309},[3754],{"type":63,"value":1201},{"type":57,"tag":286,"props":3756,"children":3757},{"class":288,"line":397},[3758,3762],{"type":57,"tag":286,"props":3759,"children":3760},{"style":315},[3761],{"type":63,"value":1209},{"type":57,"tag":286,"props":3763,"children":3764},{"style":309},[3765],{"type":63,"value":1201},{"type":57,"tag":286,"props":3767,"children":3768},{"class":288,"line":406},[3769],{"type":57,"tag":286,"props":3770,"children":3771},{"style":309},[3772],{"type":63,"value":522},{"type":57,"tag":275,"props":3774,"children":3776},{"className":1004,"code":3775,"language":1006,"meta":280,"style":280},"# package.json has devtools as devDependency\nnpm install -D @tanstack\u002Freact-devtools\n",[3777],{"type":57,"tag":112,"props":3778,"children":3779},{"__ignoreMap":280},[3780,3788],{"type":57,"tag":286,"props":3781,"children":3782},{"class":288,"line":289},[3783],{"type":57,"tag":286,"props":3784,"children":3785},{"style":293},[3786],{"type":63,"value":3787},"# package.json has devtools as devDependency\n",{"type":57,"tag":286,"props":3789,"children":3790},{"class":288,"line":299},[3791,3795,3799,3803],{"type":57,"tag":286,"props":3792,"children":3793},{"style":415},[3794],{"type":63,"value":1018},{"type":57,"tag":286,"props":3796,"children":3797},{"style":336},[3798],{"type":63,"value":1023},{"type":57,"tag":286,"props":3800,"children":3801},{"style":336},[3802],{"type":63,"value":1028},{"type":57,"tag":286,"props":3804,"children":3805},{"style":336},[3806],{"type":63,"value":3807}," @tanstack\u002Freact-devtools\n",{"type":57,"tag":70,"props":3809,"children":3810},{},[3811],{"type":57,"tag":74,"props":3812,"children":3813},{},[3814],{"type":63,"value":3815},"Correct -- both changes together:",{"type":57,"tag":275,"props":3817,"children":3819},{"className":1049,"code":3818,"language":1051,"meta":280,"style":280},"\u002F\u002F vite.config.ts\nexport default {\n  plugins: [devtools({ removeDevtoolsOnBuild: false }), react()],\n}\n",[3820],{"type":57,"tag":112,"props":3821,"children":3822},{"__ignoreMap":280},[3823,3830,3845,3911],{"type":57,"tag":286,"props":3824,"children":3825},{"class":288,"line":289},[3826],{"type":57,"tag":286,"props":3827,"children":3828},{"style":293},[3829],{"type":63,"value":3689},{"type":57,"tag":286,"props":3831,"children":3832},{"class":288,"line":299},[3833,3837,3841],{"type":57,"tag":286,"props":3834,"children":3835},{"style":303},[3836],{"type":63,"value":1136},{"type":57,"tag":286,"props":3838,"children":3839},{"style":303},[3840],{"type":63,"value":1141},{"type":57,"tag":286,"props":3842,"children":3843},{"style":309},[3844],{"type":63,"value":379},{"type":57,"tag":286,"props":3846,"children":3847},{"class":288,"line":346},[3848,3852,3856,3860,3864,3868,3873,3878,3882,3886,3890,3894,3898,3903,3907],{"type":57,"tag":286,"props":3849,"children":3850},{"style":391},[3851],{"type":63,"value":1153},{"type":57,"tag":286,"props":3853,"children":3854},{"style":309},[3855],{"type":63,"value":579},{"type":57,"tag":286,"props":3857,"children":3858},{"style":315},[3859],{"type":63,"value":3019},{"type":57,"tag":286,"props":3861,"children":3862},{"style":366},[3863],{"type":63,"value":30},{"type":57,"tag":286,"props":3865,"children":3866},{"style":315},[3867],{"type":63,"value":1617},{"type":57,"tag":286,"props":3869,"children":3870},{"style":309},[3871],{"type":63,"value":3872},"{",{"type":57,"tag":286,"props":3874,"children":3875},{"style":391},[3876],{"type":63,"value":3877}," removeDevtoolsOnBuild",{"type":57,"tag":286,"props":3879,"children":3880},{"style":309},[3881],{"type":63,"value":579},{"type":57,"tag":286,"props":3883,"children":3884},{"style":1636},[3885],{"type":63,"value":1639},{"type":57,"tag":286,"props":3887,"children":3888},{"style":309},[3889],{"type":63,"value":323},{"type":57,"tag":286,"props":3891,"children":3892},{"style":315},[3893],{"type":63,"value":1656},{"type":57,"tag":286,"props":3895,"children":3896},{"style":309},[3897],{"type":63,"value":1179},{"type":57,"tag":286,"props":3899,"children":3900},{"style":366},[3901],{"type":63,"value":3902}," react",{"type":57,"tag":286,"props":3904,"children":3905},{"style":315},[3906],{"type":63,"value":3402},{"type":57,"tag":286,"props":3908,"children":3909},{"style":309},[3910],{"type":63,"value":1201},{"type":57,"tag":286,"props":3912,"children":3913},{"class":288,"line":356},[3914],{"type":57,"tag":286,"props":3915,"children":3916},{"style":309},[3917],{"type":63,"value":522},{"type":57,"tag":275,"props":3919,"children":3921},{"className":1004,"code":3920,"language":1006,"meta":280,"style":280},"# regular dependency so it's available in production node_modules\nnpm install @tanstack\u002Freact-devtools\n",[3922],{"type":57,"tag":112,"props":3923,"children":3924},{"__ignoreMap":280},[3925,3933],{"type":57,"tag":286,"props":3926,"children":3927},{"class":288,"line":289},[3928],{"type":57,"tag":286,"props":3929,"children":3930},{"style":293},[3931],{"type":63,"value":3932},"# regular dependency so it's available in production node_modules\n",{"type":57,"tag":286,"props":3934,"children":3935},{"class":288,"line":299},[3936,3940,3944],{"type":57,"tag":286,"props":3937,"children":3938},{"style":415},[3939],{"type":63,"value":1018},{"type":57,"tag":286,"props":3941,"children":3942},{"style":336},[3943],{"type":63,"value":1023},{"type":57,"tag":286,"props":3945,"children":3946},{"style":336},[3947],{"type":63,"value":3807},{"type":57,"tag":70,"props":3949,"children":3950},{},[3951,3953,3958,3960,3965],{"type":63,"value":3952},"Missing ",{"type":57,"tag":112,"props":3954,"children":3956},{"className":3955},[],[3957],{"type":63,"value":1890},{"type":63,"value":3959}," causes the AST stripping to remove all devtools imports and JSX at build time. Missing the regular dependency means ",{"type":57,"tag":112,"props":3961,"children":3963},{"className":3962},[],[3964],{"type":63,"value":1418},{"type":63,"value":3966}," may not contain the package in production environments that prune dev dependencies.",{"type":57,"tag":100,"props":3968,"children":3970},{"id":3969},"high-non-vite-projects-not-excluding-devtools-manually",[3971],{"type":63,"value":3972},"HIGH: Non-Vite projects not excluding devtools manually",{"type":57,"tag":70,"props":3974,"children":3975},{},[3976,3978,3983],{"type":63,"value":3977},"Without the Vite plugin, devtools code is never automatically stripped. If you import ",{"type":57,"tag":112,"props":3979,"children":3981},{"className":3980},[],[3982],{"type":63,"value":3378},{"type":63,"value":3984}," unconditionally, the entire devtools shell and all plugin panels ship to production.",{"type":57,"tag":70,"props":3986,"children":3987},{},[3988],{"type":57,"tag":74,"props":3989,"children":3990},{},[3991],{"type":63,"value":3992},"Wrong -- always imports devtools regardless of environment:",{"type":57,"tag":275,"props":3994,"children":3995},{"className":277,"code":1231,"language":279,"meta":280,"style":280},[3996],{"type":57,"tag":112,"props":3997,"children":3998},{"__ignoreMap":280},[3999,4034,4041,4060,4071,4078,4093,4104,4115,4122,4129,4136,4143,4150,4157,4164],{"type":57,"tag":286,"props":4000,"children":4001},{"class":288,"line":289},[4002,4006,4010,4014,4018,4022,4026,4030],{"type":57,"tag":286,"props":4003,"children":4004},{"style":303},[4005],{"type":63,"value":306},{"type":57,"tag":286,"props":4007,"children":4008},{"style":309},[4009],{"type":63,"value":312},{"type":57,"tag":286,"props":4011,"children":4012},{"style":315},[4013],{"type":63,"value":318},{"type":57,"tag":286,"props":4015,"children":4016},{"style":309},[4017],{"type":63,"value":323},{"type":57,"tag":286,"props":4019,"children":4020},{"style":303},[4021],{"type":63,"value":328},{"type":57,"tag":286,"props":4023,"children":4024},{"style":309},[4025],{"type":63,"value":333},{"type":57,"tag":286,"props":4027,"children":4028},{"style":336},[4029],{"type":63,"value":186},{"type":57,"tag":286,"props":4031,"children":4032},{"style":309},[4033],{"type":63,"value":343},{"type":57,"tag":286,"props":4035,"children":4036},{"class":288,"line":299},[4037],{"type":57,"tag":286,"props":4038,"children":4039},{"emptyLinePlaceholder":350},[4040],{"type":63,"value":353},{"type":57,"tag":286,"props":4042,"children":4043},{"class":288,"line":346},[4044,4048,4052,4056],{"type":57,"tag":286,"props":4045,"children":4046},{"style":360},[4047],{"type":63,"value":363},{"type":57,"tag":286,"props":4049,"children":4050},{"style":366},[4051],{"type":63,"value":369},{"type":57,"tag":286,"props":4053,"children":4054},{"style":309},[4055],{"type":63,"value":374},{"type":57,"tag":286,"props":4057,"children":4058},{"style":309},[4059],{"type":63,"value":379},{"type":57,"tag":286,"props":4061,"children":4062},{"class":288,"line":356},[4063,4067],{"type":57,"tag":286,"props":4064,"children":4065},{"style":303},[4066],{"type":63,"value":388},{"type":57,"tag":286,"props":4068,"children":4069},{"style":391},[4070],{"type":63,"value":394},{"type":57,"tag":286,"props":4072,"children":4073},{"class":288,"line":382},[4074],{"type":57,"tag":286,"props":4075,"children":4076},{"style":309},[4077],{"type":63,"value":403},{"type":57,"tag":286,"props":4079,"children":4080},{"class":288,"line":397},[4081,4085,4089],{"type":57,"tag":286,"props":4082,"children":4083},{"style":309},[4084],{"type":63,"value":412},{"type":57,"tag":286,"props":4086,"children":4087},{"style":415},[4088],{"type":63,"value":418},{"type":57,"tag":286,"props":4090,"children":4091},{"style":309},[4092],{"type":63,"value":423},{"type":57,"tag":286,"props":4094,"children":4095},{"class":288,"line":406},[4096,4100],{"type":57,"tag":286,"props":4097,"children":4098},{"style":309},[4099],{"type":63,"value":412},{"type":57,"tag":286,"props":4101,"children":4102},{"style":415},[4103],{"type":63,"value":436},{"type":57,"tag":286,"props":4105,"children":4106},{"class":288,"line":426},[4107,4111],{"type":57,"tag":286,"props":4108,"children":4109},{"style":360},[4110],{"type":63,"value":445},{"type":57,"tag":286,"props":4112,"children":4113},{"style":309},[4114],{"type":63,"value":450},{"type":57,"tag":286,"props":4116,"children":4117},{"class":288,"line":439},[4118],{"type":57,"tag":286,"props":4119,"children":4120},{"style":315},[4121],{"type":63,"value":459},{"type":57,"tag":286,"props":4123,"children":4124},{"class":288,"line":453},[4125],{"type":57,"tag":286,"props":4126,"children":4127},{"style":293},[4128],{"type":63,"value":468},{"type":57,"tag":286,"props":4130,"children":4131},{"class":288,"line":462},[4132],{"type":57,"tag":286,"props":4133,"children":4134},{"style":315},[4135],{"type":63,"value":477},{"type":57,"tag":286,"props":4137,"children":4138},{"class":288,"line":471},[4139],{"type":57,"tag":286,"props":4140,"children":4141},{"style":309},[4142],{"type":63,"value":486},{"type":57,"tag":286,"props":4144,"children":4145},{"class":288,"line":480},[4146],{"type":57,"tag":286,"props":4147,"children":4148},{"style":309},[4149],{"type":63,"value":495},{"type":57,"tag":286,"props":4151,"children":4152},{"class":288,"line":489},[4153],{"type":57,"tag":286,"props":4154,"children":4155},{"style":309},[4156],{"type":63,"value":504},{"type":57,"tag":286,"props":4158,"children":4159},{"class":288,"line":498},[4160],{"type":57,"tag":286,"props":4161,"children":4162},{"style":391},[4163],{"type":63,"value":513},{"type":57,"tag":286,"props":4165,"children":4166},{"class":288,"line":507},[4167],{"type":57,"tag":286,"props":4168,"children":4169},{"style":309},[4170],{"type":63,"value":522},{"type":57,"tag":70,"props":4172,"children":4173},{},[4174],{"type":57,"tag":74,"props":4175,"children":4176},{},[4177],{"type":63,"value":4178},"Correct -- conditional import based on NODE_ENV:",{"type":57,"tag":275,"props":4180,"children":4182},{"className":277,"code":4181,"language":279,"meta":280,"style":280},"const Devtools =\n  process.env.NODE_ENV === 'development'\n    ? (await import('.\u002Fdevtools-setup')).default\n    : () => null\n\nfunction App() {\n  return (\n    \u003C>\n      \u003CYourApp \u002F>\n      \u003CDevtools \u002F>\n    \u003C\u002F>\n  )\n}\n",[4183],{"type":57,"tag":112,"props":4184,"children":4185},{"__ignoreMap":280},[4186,4201,4240,4287,4306,4313,4332,4343,4350,4365,4380,4387,4394],{"type":57,"tag":286,"props":4187,"children":4188},{"class":288,"line":289},[4189,4193,4197],{"type":57,"tag":286,"props":4190,"children":4191},{"style":360},[4192],{"type":63,"value":2271},{"type":57,"tag":286,"props":4194,"children":4195},{"style":315},[4196],{"type":63,"value":2276},{"type":57,"tag":286,"props":4198,"children":4199},{"style":309},[4200],{"type":63,"value":2281},{"type":57,"tag":286,"props":4202,"children":4203},{"class":288,"line":299},[4204,4208,4212,4216,4220,4224,4228,4232,4236],{"type":57,"tag":286,"props":4205,"children":4206},{"style":315},[4207],{"type":63,"value":2289},{"type":57,"tag":286,"props":4209,"children":4210},{"style":309},[4211],{"type":63,"value":167},{"type":57,"tag":286,"props":4213,"children":4214},{"style":315},[4215],{"type":63,"value":2298},{"type":57,"tag":286,"props":4217,"children":4218},{"style":309},[4219],{"type":63,"value":167},{"type":57,"tag":286,"props":4221,"children":4222},{"style":315},[4223],{"type":63,"value":2307},{"type":57,"tag":286,"props":4225,"children":4226},{"style":309},[4227],{"type":63,"value":2312},{"type":57,"tag":286,"props":4229,"children":4230},{"style":309},[4231],{"type":63,"value":333},{"type":57,"tag":286,"props":4233,"children":4234},{"style":336},[4235],{"type":63,"value":681},{"type":57,"tag":286,"props":4237,"children":4238},{"style":309},[4239],{"type":63,"value":343},{"type":57,"tag":286,"props":4241,"children":4242},{"class":288,"line":346},[4243,4247,4251,4255,4259,4263,4267,4271,4275,4279,4283],{"type":57,"tag":286,"props":4244,"children":4245},{"style":309},[4246],{"type":63,"value":2332},{"type":57,"tag":286,"props":4248,"children":4249},{"style":315},[4250],{"type":63,"value":2337},{"type":57,"tag":286,"props":4252,"children":4253},{"style":303},[4254],{"type":63,"value":2342},{"type":57,"tag":286,"props":4256,"children":4257},{"style":309},[4258],{"type":63,"value":2347},{"type":57,"tag":286,"props":4260,"children":4261},{"style":315},[4262],{"type":63,"value":1617},{"type":57,"tag":286,"props":4264,"children":4265},{"style":309},[4266],{"type":63,"value":1984},{"type":57,"tag":286,"props":4268,"children":4269},{"style":336},[4270],{"type":63,"value":2360},{"type":57,"tag":286,"props":4272,"children":4273},{"style":309},[4274],{"type":63,"value":1984},{"type":57,"tag":286,"props":4276,"children":4277},{"style":315},[4278],{"type":63,"value":2369},{"type":57,"tag":286,"props":4280,"children":4281},{"style":309},[4282],{"type":63,"value":167},{"type":57,"tag":286,"props":4284,"children":4285},{"style":315},[4286],{"type":63,"value":2378},{"type":57,"tag":286,"props":4288,"children":4289},{"class":288,"line":356},[4290,4294,4298,4302],{"type":57,"tag":286,"props":4291,"children":4292},{"style":309},[4293],{"type":63,"value":2386},{"type":57,"tag":286,"props":4295,"children":4296},{"style":309},[4297],{"type":63,"value":2391},{"type":57,"tag":286,"props":4299,"children":4300},{"style":360},[4301],{"type":63,"value":2396},{"type":57,"tag":286,"props":4303,"children":4304},{"style":309},[4305],{"type":63,"value":2401},{"type":57,"tag":286,"props":4307,"children":4308},{"class":288,"line":382},[4309],{"type":57,"tag":286,"props":4310,"children":4311},{"emptyLinePlaceholder":350},[4312],{"type":63,"value":353},{"type":57,"tag":286,"props":4314,"children":4315},{"class":288,"line":397},[4316,4320,4324,4328],{"type":57,"tag":286,"props":4317,"children":4318},{"style":360},[4319],{"type":63,"value":363},{"type":57,"tag":286,"props":4321,"children":4322},{"style":366},[4323],{"type":63,"value":369},{"type":57,"tag":286,"props":4325,"children":4326},{"style":309},[4327],{"type":63,"value":374},{"type":57,"tag":286,"props":4329,"children":4330},{"style":309},[4331],{"type":63,"value":379},{"type":57,"tag":286,"props":4333,"children":4334},{"class":288,"line":406},[4335,4339],{"type":57,"tag":286,"props":4336,"children":4337},{"style":303},[4338],{"type":63,"value":388},{"type":57,"tag":286,"props":4340,"children":4341},{"style":391},[4342],{"type":63,"value":394},{"type":57,"tag":286,"props":4344,"children":4345},{"class":288,"line":426},[4346],{"type":57,"tag":286,"props":4347,"children":4348},{"style":309},[4349],{"type":63,"value":403},{"type":57,"tag":286,"props":4351,"children":4352},{"class":288,"line":439},[4353,4357,4361],{"type":57,"tag":286,"props":4354,"children":4355},{"style":309},[4356],{"type":63,"value":412},{"type":57,"tag":286,"props":4358,"children":4359},{"style":415},[4360],{"type":63,"value":418},{"type":57,"tag":286,"props":4362,"children":4363},{"style":309},[4364],{"type":63,"value":423},{"type":57,"tag":286,"props":4366,"children":4367},{"class":288,"line":453},[4368,4372,4376],{"type":57,"tag":286,"props":4369,"children":4370},{"style":309},[4371],{"type":63,"value":412},{"type":57,"tag":286,"props":4373,"children":4374},{"style":415},[4375],{"type":63,"value":2472},{"type":57,"tag":286,"props":4377,"children":4378},{"style":309},[4379],{"type":63,"value":423},{"type":57,"tag":286,"props":4381,"children":4382},{"class":288,"line":462},[4383],{"type":57,"tag":286,"props":4384,"children":4385},{"style":309},[4386],{"type":63,"value":504},{"type":57,"tag":286,"props":4388,"children":4389},{"class":288,"line":471},[4390],{"type":57,"tag":286,"props":4391,"children":4392},{"style":391},[4393],{"type":63,"value":513},{"type":57,"tag":286,"props":4395,"children":4396},{"class":288,"line":480},[4397],{"type":57,"tag":286,"props":4398,"children":4399},{"style":309},[4400],{"type":63,"value":522},{"type":57,"tag":70,"props":4402,"children":4403},{},[4404],{"type":63,"value":4405},"The conditional must be statically evaluable by your bundler so it can eliminate the dead branch. Using a separate file for the devtools setup ensures the entire module subgraph is tree-shaken.",{"type":57,"tag":100,"props":4407,"children":4409},{"id":4408},"medium-not-using-noop-variants-in-plugin-libraries",[4410],{"type":63,"value":4411},"MEDIUM: Not using NoOp variants in plugin libraries",{"type":57,"tag":70,"props":4413,"children":4414},{},[4415,4417,4423,4425,4430],{"type":63,"value":4416},"When building a reusable plugin package, exporting only the ",{"type":57,"tag":112,"props":4418,"children":4420},{"className":4419},[],[4421],{"type":63,"value":4422},"Plugin",{"type":63,"value":4424}," function (ignoring the ",{"type":57,"tag":112,"props":4426,"children":4428},{"className":4427},[],[4429],{"type":63,"value":2954},{"type":63,"value":4431}," from the tuple) means consumers have no lightweight alternative for production builds.",{"type":57,"tag":70,"props":4433,"children":4434},{},[4435],{"type":57,"tag":74,"props":4436,"children":4437},{},[4438],{"type":63,"value":4439},"Wrong -- NoOp variant discarded:",{"type":57,"tag":275,"props":4441,"children":4443},{"className":277,"code":4442,"language":279,"meta":280,"style":280},"const [MyPlugin] = createReactPlugin({\n  name: 'Store Inspector',\n  Component: StoreInspectorPanel,\n})\n\nexport { MyPlugin }\n",[4444],{"type":57,"tag":112,"props":4445,"children":4446},{"__ignoreMap":280},[4447,4483,4511,4531,4542,4549],{"type":57,"tag":286,"props":4448,"children":4449},{"class":288,"line":289},[4450,4454,4458,4463,4467,4471,4475,4479],{"type":57,"tag":286,"props":4451,"children":4452},{"style":360},[4453],{"type":63,"value":2271},{"type":57,"tag":286,"props":4455,"children":4456},{"style":309},[4457],{"type":63,"value":3019},{"type":57,"tag":286,"props":4459,"children":4460},{"style":315},[4461],{"type":63,"value":4462},"MyPlugin",{"type":57,"tag":286,"props":4464,"children":4465},{"style":309},[4466],{"type":63,"value":3038},{"type":57,"tag":286,"props":4468,"children":4469},{"style":309},[4470],{"type":63,"value":2611},{"type":57,"tag":286,"props":4472,"children":4473},{"style":366},[4474],{"type":63,"value":2979},{"type":57,"tag":286,"props":4476,"children":4477},{"style":315},[4478],{"type":63,"value":1617},{"type":57,"tag":286,"props":4480,"children":4481},{"style":309},[4482],{"type":63,"value":556},{"type":57,"tag":286,"props":4484,"children":4485},{"class":288,"line":299},[4486,4490,4494,4498,4503,4507],{"type":57,"tag":286,"props":4487,"children":4488},{"style":391},[4489],{"type":63,"value":3062},{"type":57,"tag":286,"props":4491,"children":4492},{"style":309},[4493],{"type":63,"value":579},{"type":57,"tag":286,"props":4495,"children":4496},{"style":309},[4497],{"type":63,"value":333},{"type":57,"tag":286,"props":4499,"children":4500},{"style":336},[4501],{"type":63,"value":4502},"Store Inspector",{"type":57,"tag":286,"props":4504,"children":4505},{"style":309},[4506],{"type":63,"value":1984},{"type":57,"tag":286,"props":4508,"children":4509},{"style":309},[4510],{"type":63,"value":1201},{"type":57,"tag":286,"props":4512,"children":4513},{"class":288,"line":346},[4514,4518,4522,4527],{"type":57,"tag":286,"props":4515,"children":4516},{"style":391},[4517],{"type":63,"value":3091},{"type":57,"tag":286,"props":4519,"children":4520},{"style":309},[4521],{"type":63,"value":579},{"type":57,"tag":286,"props":4523,"children":4524},{"style":315},[4525],{"type":63,"value":4526}," StoreInspectorPanel",{"type":57,"tag":286,"props":4528,"children":4529},{"style":309},[4530],{"type":63,"value":1201},{"type":57,"tag":286,"props":4532,"children":4533},{"class":288,"line":356},[4534,4538],{"type":57,"tag":286,"props":4535,"children":4536},{"style":309},[4537],{"type":63,"value":3152},{"type":57,"tag":286,"props":4539,"children":4540},{"style":315},[4541],{"type":63,"value":2701},{"type":57,"tag":286,"props":4543,"children":4544},{"class":288,"line":382},[4545],{"type":57,"tag":286,"props":4546,"children":4547},{"emptyLinePlaceholder":350},[4548],{"type":63,"value":353},{"type":57,"tag":286,"props":4550,"children":4551},{"class":288,"line":397},[4552,4556,4560,4565],{"type":57,"tag":286,"props":4553,"children":4554},{"style":303},[4555],{"type":63,"value":1136},{"type":57,"tag":286,"props":4557,"children":4558},{"style":309},[4559],{"type":63,"value":312},{"type":57,"tag":286,"props":4561,"children":4562},{"style":315},[4563],{"type":63,"value":4564}," MyPlugin",{"type":57,"tag":286,"props":4566,"children":4567},{"style":309},[4568],{"type":63,"value":824},{"type":57,"tag":70,"props":4570,"children":4571},{},[4572],{"type":57,"tag":74,"props":4573,"children":4574},{},[4575],{"type":63,"value":4576},"Correct -- both variants exported:",{"type":57,"tag":275,"props":4578,"children":4580},{"className":277,"code":4579,"language":279,"meta":280,"style":280},"const [MyPlugin, MyNoOpPlugin] = createReactPlugin({\n  name: 'Store Inspector',\n  Component: StoreInspectorPanel,\n})\n\nexport { MyPlugin, MyNoOpPlugin }\n",[4581],{"type":57,"tag":112,"props":4582,"children":4583},{"__ignoreMap":280},[4584,4628,4655,4674,4685,4692],{"type":57,"tag":286,"props":4585,"children":4586},{"class":288,"line":289},[4587,4591,4595,4599,4603,4608,4612,4616,4620,4624],{"type":57,"tag":286,"props":4588,"children":4589},{"style":360},[4590],{"type":63,"value":2271},{"type":57,"tag":286,"props":4592,"children":4593},{"style":309},[4594],{"type":63,"value":3019},{"type":57,"tag":286,"props":4596,"children":4597},{"style":315},[4598],{"type":63,"value":4462},{"type":57,"tag":286,"props":4600,"children":4601},{"style":309},[4602],{"type":63,"value":1179},{"type":57,"tag":286,"props":4604,"children":4605},{"style":315},[4606],{"type":63,"value":4607}," MyNoOpPlugin",{"type":57,"tag":286,"props":4609,"children":4610},{"style":309},[4611],{"type":63,"value":3038},{"type":57,"tag":286,"props":4613,"children":4614},{"style":309},[4615],{"type":63,"value":2611},{"type":57,"tag":286,"props":4617,"children":4618},{"style":366},[4619],{"type":63,"value":2979},{"type":57,"tag":286,"props":4621,"children":4622},{"style":315},[4623],{"type":63,"value":1617},{"type":57,"tag":286,"props":4625,"children":4626},{"style":309},[4627],{"type":63,"value":556},{"type":57,"tag":286,"props":4629,"children":4630},{"class":288,"line":299},[4631,4635,4639,4643,4647,4651],{"type":57,"tag":286,"props":4632,"children":4633},{"style":391},[4634],{"type":63,"value":3062},{"type":57,"tag":286,"props":4636,"children":4637},{"style":309},[4638],{"type":63,"value":579},{"type":57,"tag":286,"props":4640,"children":4641},{"style":309},[4642],{"type":63,"value":333},{"type":57,"tag":286,"props":4644,"children":4645},{"style":336},[4646],{"type":63,"value":4502},{"type":57,"tag":286,"props":4648,"children":4649},{"style":309},[4650],{"type":63,"value":1984},{"type":57,"tag":286,"props":4652,"children":4653},{"style":309},[4654],{"type":63,"value":1201},{"type":57,"tag":286,"props":4656,"children":4657},{"class":288,"line":346},[4658,4662,4666,4670],{"type":57,"tag":286,"props":4659,"children":4660},{"style":391},[4661],{"type":63,"value":3091},{"type":57,"tag":286,"props":4663,"children":4664},{"style":309},[4665],{"type":63,"value":579},{"type":57,"tag":286,"props":4667,"children":4668},{"style":315},[4669],{"type":63,"value":4526},{"type":57,"tag":286,"props":4671,"children":4672},{"style":309},[4673],{"type":63,"value":1201},{"type":57,"tag":286,"props":4675,"children":4676},{"class":288,"line":356},[4677,4681],{"type":57,"tag":286,"props":4678,"children":4679},{"style":309},[4680],{"type":63,"value":3152},{"type":57,"tag":286,"props":4682,"children":4683},{"style":315},[4684],{"type":63,"value":2701},{"type":57,"tag":286,"props":4686,"children":4687},{"class":288,"line":382},[4688],{"type":57,"tag":286,"props":4689,"children":4690},{"emptyLinePlaceholder":350},[4691],{"type":63,"value":353},{"type":57,"tag":286,"props":4693,"children":4694},{"class":288,"line":397},[4695,4699,4703,4707,4711,4715],{"type":57,"tag":286,"props":4696,"children":4697},{"style":303},[4698],{"type":63,"value":1136},{"type":57,"tag":286,"props":4700,"children":4701},{"style":309},[4702],{"type":63,"value":312},{"type":57,"tag":286,"props":4704,"children":4705},{"style":315},[4706],{"type":63,"value":4564},{"type":57,"tag":286,"props":4708,"children":4709},{"style":309},[4710],{"type":63,"value":1179},{"type":57,"tag":286,"props":4712,"children":4713},{"style":315},[4714],{"type":63,"value":4607},{"type":57,"tag":286,"props":4716,"children":4717},{"style":309},[4718],{"type":63,"value":824},{"type":57,"tag":70,"props":4720,"children":4721},{},[4722],{"type":63,"value":4723},"Consumers then choose the appropriate variant based on their environment. Without the NoOp export, the only way to exclude the plugin is to not import the package at all, which requires the conditional-import pattern at the application level.",{"type":57,"tag":88,"props":4725,"children":4727},{"id":4726},"design-tension",[4728],{"type":63,"value":4729},"Design Tension",{"type":57,"tag":70,"props":4731,"children":4732},{},[4733,4735,4740],{"type":63,"value":4734},"Development convenience pulls toward automatic stripping (dev dependencies, Vite plugin handles everything). Production usage pulls toward explicit inclusion (regular dependencies, disabled stripping, URL flag gating). These two paths are mutually exclusive in their dependency and configuration choices. A project must commit to one path. Attempting to mix them -- for example, keeping devtools as a dev dependency while setting ",{"type":57,"tag":112,"props":4736,"children":4738},{"className":4737},[],[4739],{"type":63,"value":1890},{"type":63,"value":4741}," -- leads to builds that fail silently when the production environment prunes dev dependencies.",{"type":57,"tag":70,"props":4743,"children":4744},{},[4745,4747,4752],{"type":63,"value":4746},"For staging\u002Fpreview environments where you want devtools but not in the final production deployment, use ",{"type":57,"tag":112,"props":4748,"children":4750},{"className":4749},[],[4751],{"type":63,"value":1903},{"type":63,"value":4753}," with the development-only workflow intact, rather than switching to the production workflow.",{"type":57,"tag":88,"props":4755,"children":4757},{"id":4756},"cross-references",[4758],{"type":63,"value":4759},"Cross-References",{"type":57,"tag":174,"props":4761,"children":4762},{},[4763,4772,4789],{"type":57,"tag":178,"props":4764,"children":4765},{},[4766,4770],{"type":57,"tag":74,"props":4767,"children":4768},{},[4769],{"type":63,"value":43},{"type":63,"value":4771}," -- Initial setup decisions (framework, install command, Vite plugin placement) that this skill builds on.",{"type":57,"tag":178,"props":4773,"children":4774},{},[4775,4780,4782,4787],{"type":57,"tag":74,"props":4776,"children":4777},{},[4778],{"type":63,"value":4779},"devtools-vite-plugin",{"type":63,"value":4781}," -- The ",{"type":57,"tag":112,"props":4783,"children":4785},{"className":4784},[],[4786],{"type":63,"value":133},{"type":63,"value":4788}," option and AST stripping logic live in the Vite plugin. See that skill for all Vite plugin configuration.",{"type":57,"tag":178,"props":4790,"children":4791},{},[4792,4796,4797,4802],{"type":57,"tag":74,"props":4793,"children":4794},{},[4795],{"type":63,"value":3633},{"type":63,"value":4781},{"type":57,"tag":112,"props":4798,"children":4800},{"className":4799},[],[4801],{"type":63,"value":2946},{"type":63,"value":4803}," tuple pattern and all framework-specific factory APIs.",{"type":57,"tag":88,"props":4805,"children":4807},{"id":4806},"key-source-files",[4808],{"type":63,"value":4809},"Key Source Files",{"type":57,"tag":174,"props":4811,"children":4812},{},[4813,4830,4840,4895,4929,4951],{"type":57,"tag":178,"props":4814,"children":4815},{},[4816,4821,4823,4828],{"type":57,"tag":112,"props":4817,"children":4819},{"className":4818},[],[4820],{"type":63,"value":47},{"type":63,"value":4822}," -- Vite plugin entry, ",{"type":57,"tag":112,"props":4824,"children":4826},{"className":4825},[],[4827],{"type":63,"value":133},{"type":63,"value":4829}," option, sub-plugin registration",{"type":57,"tag":178,"props":4831,"children":4832},{},[4833,4838],{"type":57,"tag":112,"props":4834,"children":4836},{"className":4835},[],[4837],{"type":63,"value":48},{"type":63,"value":4839}," -- AST-based stripping logic (oxc-parser + MagicString)",{"type":57,"tag":178,"props":4841,"children":4842},{},[4843,4848,4850,4856,4858,4863,4864,4869,4870,4875,4876,4881,4883,4888,4889,4894],{"type":57,"tag":112,"props":4844,"children":4846},{"className":4845},[],[4847],{"type":63,"value":49},{"type":63,"value":4849}," -- Conditional exports (",{"type":57,"tag":112,"props":4851,"children":4853},{"className":4852},[],[4854],{"type":63,"value":4855},"browser.development",{"type":63,"value":4857}," -> ",{"type":57,"tag":112,"props":4859,"children":4861},{"className":4860},[],[4862],{"type":63,"value":870},{"type":63,"value":3608},{"type":57,"tag":112,"props":4865,"children":4867},{"className":4866},[],[4868],{"type":63,"value":656},{"type":63,"value":4857},{"type":57,"tag":112,"props":4871,"children":4873},{"className":4872},[],[4874],{"type":63,"value":895},{"type":63,"value":3608},{"type":57,"tag":112,"props":4877,"children":4879},{"className":4878},[],[4880],{"type":63,"value":779},{"type":63,"value":4882},"\u002F",{"type":57,"tag":112,"props":4884,"children":4886},{"className":4885},[],[4887],{"type":63,"value":596},{"type":63,"value":4857},{"type":57,"tag":112,"props":4890,"children":4892},{"className":4891},[],[4893],{"type":63,"value":920},{"type":63,"value":1656},{"type":57,"tag":178,"props":4896,"children":4897},{},[4898,4903,4905,4910,4911,4916,4917,4922,4924],{"type":57,"tag":112,"props":4899,"children":4901},{"className":4900},[],[4902],{"type":63,"value":50},{"type":63,"value":4904}," -- Build config producing ",{"type":57,"tag":112,"props":4906,"children":4908},{"className":4907},[],[4909],{"type":63,"value":870},{"type":63,"value":3608},{"type":57,"tag":112,"props":4912,"children":4914},{"className":4913},[],[4915],{"type":63,"value":895},{"type":63,"value":3608},{"type":57,"tag":112,"props":4918,"children":4920},{"className":4919},[],[4921],{"type":63,"value":920},{"type":63,"value":4923}," via ",{"type":57,"tag":112,"props":4925,"children":4927},{"className":4926},[],[4928],{"type":63,"value":933},{"type":57,"tag":178,"props":4930,"children":4931},{},[4932,4937,4939,4944,4946],{"type":57,"tag":112,"props":4933,"children":4935},{"className":4934},[],[4936],{"type":63,"value":51},{"type":63,"value":4938}," -- ",{"type":57,"tag":112,"props":4940,"children":4942},{"className":4941},[],[4943],{"type":63,"value":3469},{"type":63,"value":4945}," returning ",{"type":57,"tag":112,"props":4947,"children":4949},{"className":4948},[],[4950],{"type":63,"value":2946},{"type":57,"tag":178,"props":4952,"children":4953},{},[4954,4959,4960,4965,4966],{"type":57,"tag":112,"props":4955,"children":4957},{"className":4956},[],[4958],{"type":63,"value":52},{"type":63,"value":4938},{"type":57,"tag":112,"props":4961,"children":4963},{"className":4962},[],[4964],{"type":63,"value":3494},{"type":63,"value":4945},{"type":57,"tag":112,"props":4967,"children":4969},{"className":4968},[],[4970],{"type":63,"value":4971},"[Panel, NoOpPanel]",{"type":57,"tag":4973,"props":4974,"children":4975},"style",{},[4976],{"type":63,"value":4977},"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":4979,"total":439},[4980,4993,5005,5019,5034,5045,5054],{"slug":43,"name":43,"fn":4981,"description":4982,"org":4983,"tags":4984,"stars":23,"repoUrl":24,"updatedAt":4992},"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},[4985,4988,4991],{"name":4986,"slug":4987,"type":15},"Debugging","debugging",{"name":4989,"slug":4990,"type":15},"Frontend","frontend",{"name":9,"slug":8,"type":15},"2026-07-16T06:04:05.544655",{"slug":4994,"name":4994,"fn":4995,"description":4996,"org":4997,"tags":4998,"stars":23,"repoUrl":24,"updatedAt":5004},"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},[4999,5000,5003],{"name":4986,"slug":4987,"type":15},{"name":5001,"slug":5002,"type":15},"Observability","observability",{"name":9,"slug":8,"type":15},"2026-07-16T06:04:40.486044",{"slug":5006,"name":5006,"fn":5007,"description":5008,"org":5009,"tags":5010,"stars":23,"repoUrl":24,"updatedAt":5018},"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},[5011,5014,5017],{"name":5012,"slug":5013,"type":15},"API Development","api-development",{"name":5015,"slug":5016,"type":15},"Engineering","engineering",{"name":9,"slug":8,"type":15},"2026-07-16T06:04:34.254605",{"slug":3633,"name":3633,"fn":5020,"description":5021,"org":5022,"tags":5023,"stars":23,"repoUrl":24,"updatedAt":5033},"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},[5024,5025,5027,5028,5030,5031],{"name":5015,"slug":5016,"type":15},{"name":3510,"slug":5026,"type":15},"preact",{"name":3460,"slug":31,"type":15},{"name":5029,"slug":32,"type":15},"SolidJS",{"name":9,"slug":8,"type":15},{"name":3562,"slug":5032,"type":15},"vue","2026-07-16T06:04:33.553047",{"slug":5035,"name":5035,"fn":5036,"description":5037,"org":5038,"tags":5039,"stars":23,"repoUrl":24,"updatedAt":5044},"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},[5040,5041,5042,5043],{"name":4986,"slug":4987,"type":15},{"name":5015,"slug":5016,"type":15},{"name":5001,"slug":5002,"type":15},{"name":9,"slug":8,"type":15},"2026-07-16T06:04:33.21467",{"slug":5046,"name":5046,"fn":5047,"description":5048,"org":5049,"tags":5050,"stars":23,"repoUrl":24,"updatedAt":5053},"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},[5051,5052],{"name":1018,"slug":1018,"type":15},{"name":9,"slug":8,"type":15},"2026-07-16T06:04:09.110642",{"slug":5055,"name":5055,"fn":5056,"description":5057,"org":5058,"tags":5059,"stars":23,"repoUrl":24,"updatedAt":5066},"devtools-plugin-panel","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},[5060,5061,5062,5063],{"name":4989,"slug":4990,"type":15},{"name":5001,"slug":5002,"type":15},{"name":9,"slug":8,"type":15},{"name":5064,"slug":5065,"type":15},"UI Components","ui-components","2026-07-16T06:03:59.434886",{"items":5068,"total":5202},[5069,5083,5093,5103,5116,5128,5138,5148,5161,5171,5182,5192],{"slug":5070,"name":5070,"fn":5071,"description":5072,"org":5073,"tags":5074,"stars":5080,"repoUrl":5081,"updatedAt":5082},"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},[5075,5078,5079],{"name":5076,"slug":5077,"type":15},"Data Analysis","data-analysis",{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},28175,"https:\u002F\u002Fgithub.com\u002FTanStack\u002Ftable","2026-07-30T05:25:59.429787",{"slug":5084,"name":5084,"fn":5085,"description":5086,"org":5087,"tags":5088,"stars":5080,"repoUrl":5081,"updatedAt":5092},"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},[5089,5090,5091],{"name":4986,"slug":4987,"type":15},{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:26:05.418735",{"slug":5094,"name":5094,"fn":5095,"description":5096,"org":5097,"tags":5098,"stars":5080,"repoUrl":5081,"updatedAt":5102},"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},[5099,5100,5101],{"name":5076,"slug":5077,"type":15},{"name":9,"slug":8,"type":15},{"name":5064,"slug":5065,"type":15},"2026-07-30T05:25:38.403427",{"slug":5104,"name":5104,"fn":5105,"description":5106,"org":5107,"tags":5108,"stars":5080,"repoUrl":5081,"updatedAt":5115},"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},[5109,5112,5113,5114],{"name":5110,"slug":5111,"type":15},"Data Pipeline","data-pipeline",{"name":4989,"slug":4990,"type":15},{"name":13,"slug":14,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:45.400104",{"slug":5117,"name":5117,"fn":5118,"description":5119,"org":5120,"tags":5121,"stars":5080,"repoUrl":5081,"updatedAt":5127},"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},[5122,5125,5126],{"name":5123,"slug":5124,"type":15},"Data Visualization","data-visualization",{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:41.397257",{"slug":5129,"name":5129,"fn":5130,"description":5131,"org":5132,"tags":5133,"stars":5080,"repoUrl":5081,"updatedAt":5137},"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},[5134,5135,5136],{"name":5076,"slug":5077,"type":15},{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},"2026-07-30T05:25:53.391632",{"slug":5139,"name":5139,"fn":5140,"description":5141,"org":5142,"tags":5143,"stars":5080,"repoUrl":5081,"updatedAt":5147},"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},[5144,5145,5146],{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},{"name":5064,"slug":5065,"type":15},"2026-07-30T05:26:03.37801",{"slug":5149,"name":5149,"fn":5150,"description":5151,"org":5152,"tags":5153,"stars":5080,"repoUrl":5081,"updatedAt":5160},"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},[5154,5157,5158,5159],{"name":5155,"slug":5156,"type":15},"CSS","css",{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},{"name":5064,"slug":5065,"type":15},"2026-07-30T05:25:55.377366",{"slug":5162,"name":5162,"fn":5163,"description":5164,"org":5165,"tags":5166,"stars":5080,"repoUrl":5081,"updatedAt":5170},"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},[5167,5168,5169],{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},{"name":5064,"slug":5065,"type":15},"2026-07-30T05:25:51.400011",{"slug":5172,"name":5172,"fn":5173,"description":5174,"org":5175,"tags":5176,"stars":5080,"repoUrl":5081,"updatedAt":5181},"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},[5177,5178,5179,5180],{"name":5155,"slug":5156,"type":15},{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},{"name":5064,"slug":5065,"type":15},"2026-07-30T05:25:48.703799",{"slug":5183,"name":5183,"fn":5184,"description":5185,"org":5186,"tags":5187,"stars":5080,"repoUrl":5081,"updatedAt":5191},"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},[5188,5189,5190],{"name":4989,"slug":4990,"type":15},{"name":9,"slug":8,"type":15},{"name":5064,"slug":5065,"type":15},"2026-07-30T05:25:47.367943",{"slug":5193,"name":5193,"fn":5194,"description":5195,"org":5196,"tags":5197,"stars":5080,"repoUrl":5081,"updatedAt":5201},"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},[5198,5199,5200],{"name":5076,"slug":5077,"type":15},{"name":4989,"slug":4990,"type":15},{"name":5064,"slug":5065,"type":15},"2026-07-30T05:25:52.366295",125]