fix(svelte-devtools): preserve plugin state on updates

Author: kolaworld

.changeset/fresh-svelte-factories.md

@@ -3,4 +3,4 @@
 '@tanstack/svelte-devtools': patch
 ---
 
-Align Svelte panel construction and plugin metadata with the other framework factories, use compiled Svelte components to own panel and no-op lifecycles, forward shared plugin props through the Svelte adapter, and cleanly replace mounted components when plugin props change.
+Align Svelte panel construction and plugin metadata with the other framework factories, use compiled Svelte components to own panel and no-op lifecycles, forward shared plugin props through the Svelte adapter, and update mounted component props without resetting their state.

docs/framework/svelte/adapter.md

@@ -47,7 +47,7 @@ type TanStackDevtoolsSveltePlugin = {
 
 The Svelte adapter uses `component` (a Svelte component reference) instead of `render` (a JSX element) in plugin definitions. It passes `{ theme, devtoolsOpen, ...plugin.props }` to the component through Svelte's `mount()` API.
 
-When the core renders a plugin again, the adapter unmounts the component associated with that container before mounting its replacement. This runs Svelte cleanup and leaves one component instance owning the container.
+When the core renders a plugin again, the adapter updates the existing Svelte host with the latest component and props. If the component identity is unchanged, its state and lifecycle remain intact. The adapter unmounts the host when the plugin is destroyed or the Devtools instance shuts down.
 
 ```svelte
 <!-- Svelte: pass component reference + props -->

docs/plugin-lifecycle.md

@@ -196,7 +196,7 @@ The Svelte adapter mounts the plugin component directly into the container and f
 <TanStackDevtools {plugins} />
 ```
 
-Internally, the adapter calls `mount(component, { target, props })` with `{ theme, devtoolsOpen, ...plugin.props }`. Before a repeated render, it unmounts the component associated with that container and then mounts the replacement. It also unmounts the active component when the plugin is destroyed. Both paths run the component's Svelte cleanup lifecycle.
+Internally, the adapter mounts a Svelte host component into the plugin container with `{ theme, devtoolsOpen, ...plugin.props }`. Repeated renders update that host's component and props, preserving the mounted plugin's state when its component identity is unchanged. The host is unmounted when the plugin is destroyed or the adapter shuts down, which runs the component's Svelte cleanup lifecycle.
 
 ### The Key Insight
 

packages/svelte-devtools/package.json

@@ -53,7 +53,6 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
-    "@tanstack/devtools-utils": "workspace:*",
     "svelte": "^5.0.0"
   },
   "peerDependencies": {

packages/svelte-devtools/src/ComponentHost.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { Component } from 'svelte'
+
+  interface Props {
+    component: Component<any>
+    componentProps: Record<string, unknown>
+  }
+
+  let {
+    component: CurrentComponent,
+    componentProps: currentComponentProps,
+  }: Props = $props()
+
+  export function update(
+    component: Component<any>,
+    componentProps: Record<string, unknown>,
+  ) {
+    CurrentComponent = component
+    currentComponentProps = componentProps
+  }
+</script>
+
+<CurrentComponent {...currentComponentProps} />

packages/svelte-devtools/src/devtools.svelte.ts

@@ -1,13 +1,14 @@
 import { flushSync, mount, unmount } from 'svelte'
 import { TanStackDevtoolsCore } from '@tanstack/devtools'
+import ComponentHost from './ComponentHost.svelte'
 import type { Component } from 'svelte'
 import type { TanStackDevtoolsPlugin } from '@tanstack/devtools'
 import type {
   TanStackDevtoolsSvelteInit,
   TanStackDevtoolsSveltePlugin,
 } from './types'
 
-type MountedComponent = ReturnType<typeof mount>
+type MountedComponent = ReturnType<typeof ComponentHost>
 
 export class TanStackDevtoolsSvelteAdapter {
   private devtools: TanStackDevtoolsCore | null = null
@@ -27,10 +28,6 @@ export class TanStackDevtoolsSvelteAdapter {
 
   update(init: TanStackDevtoolsSvelteInit) {
     if (this.devtools) {
-      // Tear down the previously mounted plugin components before re-applying
-      // config. The core re-invokes `render`/`name` for the new plugin set, so
-      // without this the old Svelte instances are orphaned and leak.
-      this.destroyAllComponents()
       this.devtools.setConfig({
         config: init.config,
         eventBusConfig: init.eventBusConfig,
@@ -95,11 +92,15 @@ export class TanStackDevtoolsSvelteAdapter {
     container: HTMLElement,
     props: Record<string, unknown>,
   ) {
-    this.destroyComponentInContainer(container)
+    const mounted = this.mountedComponents.get(container)
+    if (mounted) {
+      flushSync(() => mounted.update(component, props))
+      return
+    }
 
-    const instance = mount(component, {
+    const instance = mount(ComponentHost, {
       target: container,
-      props,
+      props: { component, componentProps: props },
     })
     this.mountedComponents.set(container, instance)
     flushSync()

packages/svelte-devtools/tests/LifecyclePanel.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+
+  interface Props {
+    devtoolsOpen: boolean
+    recordDestroy: () => void
+    recordMount: () => void
+    recordUpdate: (devtoolsOpen: boolean) => void
+  }
+
+  let { devtoolsOpen, recordDestroy, recordMount, recordUpdate }: Props =
+    $props()
+
+  onMount(() => {
+    recordMount()
+    return recordDestroy
+  })
+
+  $effect(() => {
+    recordUpdate(devtoolsOpen)
+  })
+</script>
+
+<div data-devtools-open={devtoolsOpen}></div>

packages/svelte-devtools/tests/devtools.test.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { createSveltePanel } from '@tanstack/devtools-utils/svelte'
 import { TanStackDevtoolsSvelteAdapter } from '../src/devtools.svelte'
+import LifecyclePanel from './LifecyclePanel.svelte'
 import type { TanStackDevtoolsPlugin } from '@tanstack/devtools'
 
 const { capturePlugins } = vi.hoisted(() => ({ capturePlugins: vi.fn() }))
@@ -22,18 +22,20 @@ describe('TanStackDevtoolsSvelteAdapter', () => {
     capturePlugins.mockReset()
   })
 
-  it('unmounts a panel before rendering its replacement', () => {
-    const coreMount = vi.fn()
-    const coreUnmount = vi.fn()
-    class PanelCore {
-      mount = coreMount
-      unmount = coreUnmount
-    }
-    const [Panel] = createSveltePanel(PanelCore)
-
+  it('updates panel props without replacing the mounted component', () => {
+    const recordDestroy = vi.fn()
+    const recordMount = vi.fn()
+    const recordUpdate = vi.fn()
     const adapter = new TanStackDevtoolsSvelteAdapter()
     adapter.mount(document.createElement('div'), {
-      plugins: [{ id: 'test', name: 'Test', component: Panel }],
+      plugins: [
+        {
+          id: 'test',
+          name: 'Test',
+          component: LifecyclePanel,
+          props: { recordDestroy, recordMount, recordUpdate },
+        },
+      ],
     })
 
     const plugins = capturePlugins.mock
@@ -44,12 +46,25 @@ describe('TanStackDevtoolsSvelteAdapter', () => {
     }
 
     expect(container.children).toHaveLength(1)
-    expect(coreMount).toHaveBeenCalledTimes(5)
-    expect(coreUnmount).toHaveBeenCalledTimes(4)
+    expect(
+      container.firstElementChild?.getAttribute('data-devtools-open'),
+    ).toBe('true')
+    expect(recordMount).toHaveBeenCalledOnce()
+    expect(recordDestroy).not.toHaveBeenCalled()
+    expect(recordUpdate.mock.calls.map(([open]) => open)).toEqual([
+      true,
+      false,
+      true,
+      false,
+      true,
+    ])
 
-    adapter.destroy()
+    plugins[0]!.destroy?.('test')
 
     expect(container.children).toHaveLength(0)
-    expect(coreUnmount).toHaveBeenCalledTimes(5)
+    expect(recordDestroy).toHaveBeenCalledOnce()
+
+    adapter.destroy()
+    expect(recordDestroy).toHaveBeenCalledOnce()
   })
 })