feat: add Svelte 5 adapter and devtools-utils Svelte factories

.changeset/svelte-devtools-adapter.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/svelte-devtools': minor
+'@tanstack/devtools-utils': minor
+---
+
+feat: add Svelte 5 adapter and devtools-utils Svelte factories

docs/config.json

@@ -45,6 +45,13 @@
             { "label": "Basic Setup", "to": "framework/vue/basic-setup" },
             { "label": "Vue Adapter", "to": "framework/vue/adapter" }
           ]
+        },
+        {
+          "label": "svelte",
+          "children": [
+            { "label": "Basic Setup", "to": "framework/svelte/basic-setup" },
+            { "label": "Svelte Adapter", "to": "framework/svelte/adapter" }
+          ]
         }
       ]
     },
@@ -89,6 +96,12 @@
           "children": [
             { "label": "Custom Plugins", "to": "framework/vue/guides/custom-plugins" }
           ]
+        },
+        {
+          "label": "svelte",
+          "children": [
+            { "label": "Custom Plugins", "to": "framework/svelte/guides/custom-plugins" }
+          ]
         }
       ]
     },
@@ -121,6 +134,12 @@
           "children": [
             { "label": "Vue Reference", "to": "framework/vue/reference/index" }
           ]
+        },
+        {
+          "label": "svelte",
+          "children": [
+            { "label": "Svelte Reference", "to": "framework/svelte/reference/index" }
+          ]
         }
       ]
     },

docs/devtools-utils.md

@@ -21,7 +21,7 @@ interface DevtoolsPanelProps {
 }
 ```
 
-> The Vue variant additionally accepts `'system'` as a theme value.
+> The Vue and Svelte variants additionally accept `'system'` as a theme value.
 
 Import it from the framework-specific subpath:
 
@@ -37,6 +37,9 @@ import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
 
 // Vue
 import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/vue'
+
+// Svelte
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/svelte'
 ```
 
 ## React
@@ -252,6 +255,49 @@ const [MyPanel, NoOpPanel] = createVuePanel(MyDevtoolsCore)
 
 The panel component accepts `theme` and `devtoolsProps` as props. It mounts the core instance into a `div` element on `onMounted` and calls `unmount()` on `onUnmounted`.
 
+## Svelte
+
+### createSveltePlugin
+
+The Svelte factory takes a `name` string and a Svelte component as separate arguments, similar to the Vue API.
+
+**Signature:**
+
+```ts
+function createSveltePlugin(
+  name: string,
+  component: Component<any>,
+): readonly [Plugin, NoOpPlugin]
+```
+
+**Usage:**
+
+```ts
+import { createSveltePlugin } from '@tanstack/devtools-utils/svelte'
+import MyStorePanel from './MyStorePanel.svelte'
+
+const [MyPlugin, NoOpPlugin] = createSveltePlugin('My Store', MyStorePanel)
+```
+
+The returned functions:
+
+- **`Plugin(props?)`** -- returns `{ name, component, props }` where `component` is your Svelte component.
+- **`NoOpPlugin(props?)`** -- returns `{ name, component: NoOpComponent, props }` where the component renders nothing visible.
+
+Both accept an optional `props` object that gets forwarded to the component on mount.
+
+### createSveltePanel
+
+For class-based devtools cores, Svelte provides `createSveltePanel`. It creates a wrapper that handles mounting and unmounting the core class:
+
+```ts
+import { createSveltePanel } from '@tanstack/devtools-utils/svelte'
+
+const [MyPanel, NoOpPanel] = createSveltePanel(MyDevtoolsCore)
+```
+
+The panel accepts `theme` and `devtoolsProps` props. It creates a `div` element, mounts the core instance into it, and calls `unmount()` on cleanup.
+
 ## When to Use Factories vs Manual Plugin Objects
 
 **Use the factories** when you are building a reusable library plugin that will be published as a package. The factories ensure:

docs/framework/svelte/adapter.md

@@ -0,0 +1,76 @@
+---
+title: TanStack Devtools Svelte Adapter
+id: adapter
+---
+
+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.
+
+## Installation
+
+```sh
+npm install @tanstack/svelte-devtools
+```
+
+## Component Props
+
+The `TanStackDevtools` component accepts the following props, defined by the `TanStackDevtoolsSvelteInit` interface:
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `plugins` | `TanStackDevtoolsSveltePlugin[]` | Array of plugins to render inside the devtools panel. |
+| `config` | `Partial<TanStackDevtoolsConfig>` | Configuration for the devtools shell. Sets the initial state on first load; afterwards settings are persisted in local storage. |
+| `eventBusConfig` | `ClientEventBusConfig` | Configuration for the TanStack Devtools client event bus. |
+
+## Plugin Type
+
+Each plugin in the `plugins` array must conform to the `TanStackDevtoolsSveltePlugin` type:
+
+```ts
+type TanStackDevtoolsSveltePlugin = {
+  id?: string
+  component: Component<any>
+  name: string | Component<any>
+  props?: Record<string, any>
+  defaultOpen?: boolean
+}
+```
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | `string` (optional) | Unique identifier for the plugin. |
+| `component` | `Component<any>` | The Svelte component to render as the plugin panel content. |
+| `name` | `string \| Component<any>` | Display name for the tab title. Can be a plain string or a Svelte component for custom rendering. |
+| `props` | `Record<string, any>` (optional) | Additional props passed to the plugin component on mount. |
+| `defaultOpen` | `boolean` (optional) | Whether this plugin tab should be open by default. |
+
+## Key Difference from Other Frameworks
+
+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.
+
+```svelte
+<!-- Svelte: pass component reference + props -->
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+  import { SvelteQueryDevtoolsPanel } from '@tanstack/svelte-query-devtools'
+
+  const plugins = [
+    {
+      name: 'Svelte Query',
+      component: SvelteQueryDevtoolsPanel,
+      props: { style: 'height: 100%' },
+    },
+  ]
+</script>
+
+<TanStackDevtools {plugins} />
+```
+
+## Exports
+
+The `@tanstack/svelte-devtools` package exports:
+
+- **`TanStackDevtools`** -- The main Svelte component that renders the devtools panel.
+- **`TanStackDevtoolsSveltePlugin`** (type) -- The type for plugin definitions.
+- **`TanStackDevtoolsSvelteInit`** (type) -- The props interface for the `TanStackDevtools` component.
+
+The package depends on `@tanstack/devtools` (the core package), which provides `TanStackDevtoolsCore`, `TanStackDevtoolsConfig`, `ClientEventBusConfig`, and other core utilities.

docs/framework/svelte/basic-setup.md

@@ -0,0 +1,53 @@
+---
+title: Basic setup
+id: basic-setup
+---
+
+TanStack Devtools provides you with an easy-to-use and modular client that allows you to compose multiple devtools into one easy-to-use panel.
+
+## Setup
+
+Install the [TanStack Devtools](https://www.npmjs.com/package/@tanstack/svelte-devtools) library. This will install the devtools core as well as provide you with the Svelte-specific adapter.
+
+```bash
+npm i @tanstack/svelte-devtools
+```
+
+Next, in the root of your application, import the `TanStackDevtools` component from `@tanstack/svelte-devtools` and add it to your template.
+
+```svelte
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+</script>
+
+<main>
+  <!-- Your app content -->
+</main>
+<TanStackDevtools />
+```
+
+Import the desired devtools and provide them to the `TanStackDevtools` component via the `plugins` prop along with a label for the menu.
+
+```svelte
+<script lang="ts">
+  import { TanStackDevtools } from '@tanstack/svelte-devtools'
+  import type { TanStackDevtoolsSveltePlugin } from '@tanstack/svelte-devtools'
+  import { SvelteQueryDevtoolsPanel } from '@tanstack/svelte-query-devtools'
+
+  const plugins: TanStackDevtoolsSveltePlugin[] = [
+    {
+      name: 'Svelte Query',
+      component: SvelteQueryDevtoolsPanel,
+    },
+  ]
+</script>
+
+<main>
+  <!-- Your app content -->
+</main>
+<TanStackDevtools {plugins} />
+```
+
+> Note: The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. Additional props can be provided via the `props` field and are passed to the component on mount.
+
+Finally, add any additional configuration you desire to the `TanStackDevtools` component. More information can be found under the [TanStack Devtools Configuration](../../configuration) section.