fix: always destroy most recent component on rerender

Author: jgbowser

.all-contributorsrc

@@ -121,6 +121,16 @@
       "contributions": [
         "test"
       ]
+    },
+    {
+      "login": "jgbowser",
+      "name": "John Bowser",
+      "avatar_url": "https://avatars.githubusercontent.com/u/66637570?v=4",
+      "profile": "https://johnbowser.dev/",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -134,6 +134,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/MirrorBytes"><img src="https://avatars3.githubusercontent.com/u/22119469?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bob</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/issues?q=author%3AMirrorBytes" title="Bug reports">🐛</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=MirrorBytes" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/ronmerkin"><img src="https://avatars.githubusercontent.com/u/17492527?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ron Merkin</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=ronmerkin" title="Code">💻</a></td>
     <td align="center"><a href="http://www.benmccann.com"><img src="https://avatars.githubusercontent.com/u/322311?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ben McCann</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=benmccann" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://johnbowser.dev/"><img src="https://avatars.githubusercontent.com/u/66637570?v=4?s=100" width="100px;" alt=""/><br /><sub><b>John Bowser</b></sub></a><br /><a href="https://github.com/testing-library/svelte-testing-library/commits?author=jgbowser" title="Code">💻</a> <a href="https://github.com/testing-library/svelte-testing-library/commits?author=jgbowser" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

src/pure.js

@@ -49,7 +49,7 @@ const render = (
     return { props: options }
   }
 
-  const component = new ComponentConstructor({
+  let component = new ComponentConstructor({
     target,
     ...checkProps(options)
   })
@@ -67,15 +67,15 @@ const render = (
       if (componentCache.has(component)) component.$destroy()
 
       // eslint-disable-next-line no-new
-      const newComponent = new ComponentConstructor({
+      component = new ComponentConstructor({
         target,
         ...checkProps(options)
       })
 
-      containerCache.set(container, { target, newComponent })
-      componentCache.add(newComponent)
+      containerCache.set(container, { target, component })
+      componentCache.add(component)
 
-      newComponent.$$.on_destroy.push(() => { componentCache.delete(newComponent) })
+      component.$$.on_destroy.push(() => { componentCache.delete(component) })
     },
     unmount: () => {
       if (componentCache.has(component)) component.$destroy()