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