Handle remounting components when Article content changes but compone…

…nt is not recreated

Addresses sveltejs/sapper#1278

src/dynamicComponents.ts

@@ -52,7 +52,11 @@ export default async function instantiateComponents() {
 
   return () => {
     for (let component of components) {
-      component.$destroy();
+      try {
+        component.$destroy();
+      } catch (e) {
+        console.error(e);
+      }
     }
   };
 }

src/routes/notes/[...path].svelte

@@ -42,7 +42,5 @@
 </svelte:head>
 
 <div class="sm:mr-16">
-  <Article {...note}>
-    {@html note.content}
-  </Article>
+  <Article {...note} />
 </div>

src/routes/writing/[id].svelte

@@ -47,7 +47,5 @@
 </svelte:head>
 
 <div class="sm:mx-16">
-  <Article {...post}>
-    {@html post.content}
-  </Article>
+  <Article {...post} />
 </div>

src/routes/writing/_Article.svelte

@@ -4,22 +4,41 @@
   export let updated = undefined;
   export let confidence = undefined;
   export let devto = undefined;
+  export let content;
 
   import * as labels from '../../postMeta.ts';
-  import { getContext, onMount, onDestroy } from 'svelte';
+  import { tick, getContext, onMount } from 'svelte';
   import instantiateComponents from '../../dynamicComponents';
   getContext('title').set(title);
 
   let destroyComponents;
-  onMount(async () => {
-    destroyComponents = await instantiateComponents();
+  let mounted = false;
+  onMount(() => {
+    mounted = true;
+    remountDynamicComponents();
+    return unmountDynamicComponents;
   });
 
-  onDestroy(() => {
+  function unmountDynamicComponents() {
     if (destroyComponents) {
-      destroyComponents();
+      let d = destroyComponents;
+      destroyComponents = null;
+      return d.then((f) => f());
     }
-  });
+  }
+
+  async function remountDynamicComponents() {
+    if (!mounted) {
+      return;
+    }
+
+    await unmountDynamicComponents();
+    // Wait for DOM to update with new content
+    await tick();
+    destroyComponents = instantiateComponents();
+  }
+
+  $: content, remountDynamicComponents();
 </script>
 
 <article class="font-serif my-4 px-4 sm:px-0">
@@ -45,7 +64,7 @@
   </div>
 
   <div>
-    <slot />
+    {@html content}
   </div>
 
   <hr />

yarn.lock

@@ -927,7 +927,7 @@
 
 "@sveltejs/svelte-repl@github:dimfeld/svelte-repl":
   version "0.1.19"
-  resolved "https://codeload.github.com/dimfeld/svelte-repl/tar.gz/1de1c554152e67cd3675e983fe411cb9c01afcec"
+  resolved "https://codeload.github.com/dimfeld/svelte-repl/tar.gz/1846841fe590a547c50e2ac4db6a7aba97085b48"
   dependencies:
     codemirror "^5.49.2"
     estree-walker "^0.9.0"