|
| 1 | +--- |
| 2 | +title: TanStack Devtools Svelte Adapter |
| 3 | +id: adapter |
| 4 | +--- |
| 5 | + |
| 6 | +The Svelte adapter wraps `TanStackDevtoolsCore` in a Svelte 5 component, using Svelte's `mount()` and `unmount()` APIs to dynamically render plugins into the correct DOM containers managed by the devtools shell. |
| 7 | + |
| 8 | +## Installation |
| 9 | + |
| 10 | +```sh |
| 11 | +npm install @tanstack/svelte-devtools |
| 12 | +``` |
| 13 | + |
| 14 | +## Component Props |
| 15 | + |
| 16 | +The `TanStackDevtools` component accepts the following props, defined by the `TanStackDevtoolsSvelteInit` interface: |
| 17 | + |
| 18 | +| Prop | Type | Description | |
| 19 | +| --- | --- | --- | |
| 20 | +| `plugins` | `TanStackDevtoolsSveltePlugin[]` | Array of plugins to render inside the devtools panel. | |
| 21 | +| `config` | `Partial<TanStackDevtoolsConfig>` | Configuration for the devtools shell. Sets the initial state on first load; afterwards settings are persisted in local storage. | |
| 22 | +| `eventBusConfig` | `ClientEventBusConfig` | Configuration for the TanStack Devtools client event bus. | |
| 23 | + |
| 24 | +## Plugin Type |
| 25 | + |
| 26 | +Each plugin in the `plugins` array must conform to the `TanStackDevtoolsSveltePlugin` type: |
| 27 | + |
| 28 | +```ts |
| 29 | +type TanStackDevtoolsSveltePlugin = { |
| 30 | + id?: string |
| 31 | + component: Component<any> |
| 32 | + name: string | Component<any> |
| 33 | + props?: Record<string, any> |
| 34 | + defaultOpen?: boolean |
| 35 | +} |
| 36 | +``` |
| 37 | +
|
| 38 | +| Field | Type | Description | |
| 39 | +| --- | --- | --- | |
| 40 | +| `id` | `string` (optional) | Unique identifier for the plugin. | |
| 41 | +| `component` | `Component<any>` | The Svelte component to render as the plugin panel content. | |
| 42 | +| `name` | `string \| Component<any>` | Display name for the tab title. Can be a plain string or a Svelte component for custom rendering. | |
| 43 | +| `props` | `Record<string, any>` (optional) | Additional props passed to the plugin component on mount. | |
| 44 | +| `defaultOpen` | `boolean` (optional) | Whether this plugin tab should be open by default. | |
| 45 | +
|
| 46 | +## Key Difference from Other Frameworks |
| 47 | +
|
| 48 | +The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. Props are provided through the `props` field and passed to the component via Svelte's `mount()` API, rather than being embedded directly in a JSX expression. |
| 49 | +
|
| 50 | +```svelte |
| 51 | +<!-- Svelte: pass component reference + props --> |
| 52 | +<script lang="ts"> |
| 53 | + import { TanStackDevtools } from '@tanstack/svelte-devtools' |
| 54 | + import { SvelteQueryDevtoolsPanel } from '@tanstack/svelte-query-devtools' |
| 55 | + |
| 56 | + const plugins = [ |
| 57 | + { |
| 58 | + name: 'Svelte Query', |
| 59 | + component: SvelteQueryDevtoolsPanel, |
| 60 | + props: { style: 'height: 100%' }, |
| 61 | + }, |
| 62 | + ] |
| 63 | +</script> |
| 64 | + |
| 65 | +<TanStackDevtools {plugins} /> |
| 66 | +``` |
| 67 | + |
| 68 | +## Exports |
| 69 | + |
| 70 | +The `@tanstack/svelte-devtools` package exports: |
| 71 | + |
| 72 | +- **`TanStackDevtools`** -- The main Svelte component that renders the devtools panel. |
| 73 | +- **`TanStackDevtoolsSveltePlugin`** (type) -- The type for plugin definitions. |
| 74 | +- **`TanStackDevtoolsSvelteInit`** (type) -- The props interface for the `TanStackDevtools` component. |
| 75 | + |
| 76 | +The package depends on `@tanstack/devtools` (the core package), which provides `TanStackDevtoolsCore`, `TanStackDevtoolsConfig`, `ClientEventBusConfig`, and other core utilities. |
0 commit comments