fix!: Rerender to only update props of component without destroying it

src/__tests__/fixtures/Rerender.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { getContext, onMount } from 'svelte'
+
+  export let name
+
+  const mountCounter = getContext('mountCounter')
+
+  onMount(() => {
+    mountCounter.update((i) => i + 1)
+  })
+</script>
+
+<h1 data-testid="test">Hello {name}!</h1>
+
+<div data-testid="mount-counter">{$mountCounter}</div>

src/__tests__/rerender.test.js

@@ -1,38 +1,28 @@
 /**
  * @jest-environment jsdom
  */
-import { describe, expect, test } from 'vitest'
+import { expect, test } from 'vitest'
+import { writable } from 'svelte/store'
 
-import { render } from '..'
-import Comp from './fixtures/Comp.svelte'
+import { render, waitFor } from '..'
+import Comp from './fixtures/Rerender.svelte'
 
-describe('rerender', () => {
-  test('mounts new component successfully', () => {
-    const { container, rerender } = render(Comp, { props: { name: 'World 1' } })
+const mountCounter = writable(0)
 
-    expect(container.firstChild).toHaveTextContent('Hello World 1!')
-    rerender({ props: { name: 'World 2' } })
-    expect(container.firstChild).toHaveTextContent('Hello World 2!')
+test('mounts new component successfully', async () => {
+  const { getByTestId, rerender } = render(Comp, {
+    props: { name: 'World 1' },
+    context: new Map(Object.entries({ mountCounter })),
   })
 
-  test('destroys old component', () => {
-    let isDestroyed
-
-    const { rerender, component } = render(Comp, { props: { name: '' } })
-
-    component.$$.on_destroy.push(() => {
-      isDestroyed = true
-    })
-    rerender({ props: { name: '' } })
-    expect(isDestroyed).toBeTruthy()
+  await waitFor(() => {
+    expect(getByTestId('test')).toHaveTextContent('Hello World 1!')
+    expect(getByTestId('mount-counter')).toHaveTextContent('1')
   })
 
-  test('destroys old components on multiple rerenders', () => {
-    const { rerender, queryByText } = render(Comp, { props: { name: 'Neil' } })
-
-    rerender({ props: { name: 'Alex' } })
-    expect(queryByText('Hello Neil!')).not.toBeInTheDocument()
-    rerender({ props: { name: 'Geddy' } })
-    expect(queryByText('Hello Alex!')).not.toBeInTheDocument()
+  rerender({ props: { name: 'World 2' } })
+  await waitFor(() => {
+    expect(getByTestId('test')).toHaveTextContent('Hello World 2!')
+    expect(getByTestId('mount-counter')).toHaveTextContent('1')
   })
 })

src/pure.js

@@ -70,21 +70,9 @@ const render = (
     container,
     component,
     debug: (el = container) => console.log(prettyDOM(el)),
-    rerender: (options) => {
-      if (componentCache.has(component)) component.$destroy()
-
-      // eslint-disable-next-line no-new
-      component = new ComponentConstructor({
-        target,
-        ...checkProps(options)
-      })
-
-      containerCache.add({ container, target, component })
-      componentCache.add(component)
-
-      component.$$.on_destroy.push(() => {
-        componentCache.delete(component)
-      })
+    rerender: async (options) => {
+      component.$set(options.props)
+      await tick()
     },
     unmount: () => {
       if (componentCache.has(component)) component.$destroy()

types/index.d.ts

@@ -20,7 +20,7 @@ export type RenderResult<C extends SvelteComponent, Q extends Queries = typeof q
   container: HTMLElement
   component: C
   debug: (el?: HTMLElement | DocumentFragment) => void
-  rerender: (options: SvelteComponentOptions<C>) => void
+  rerender: (options: SvelteComponentOptions<C>) => Promise<void>
   unmount: () => void
 } & { [P in keyof Q]: BoundFunction<Q[P]> }