From 86fe21e731936d57120234a8c87fc685c90b6a01 Mon Sep 17 00:00:00 2001
From: Daniel Imfeld <daniel@danielimfeld.com>
Date: Wed, 24 Jun 2020 20:24:02 +0000
Subject: [PATCH] Handle remounting components when Article content changes but
 component is not recreated

Addresses sveltejs/sapper#1278
---
 src/dynamicComponents.ts           |  6 +++++-
 src/routes/notes/[...path].svelte  |  4 +---
 src/routes/writing/[id].svelte     |  4 +---
 src/routes/writing/_Article.svelte | 33 +++++++++++++++++++++++-------
 yarn.lock                          |  2 +-
 5 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/dynamicComponents.ts b/src/dynamicComponents.ts
index 7914aee..0191753 100644
--- a/src/dynamicComponents.ts
+++ b/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);
+      }
     }
   };
 }
diff --git a/src/routes/notes/[...path].svelte b/src/routes/notes/[...path].svelte
index 4796aad..6be07e5 100644
--- a/src/routes/notes/[...path].svelte
+++ b/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>
diff --git a/src/routes/writing/[id].svelte b/src/routes/writing/[id].svelte
index 2472e10..aba4ef8 100644
--- a/src/routes/writing/[id].svelte
+++ b/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>
diff --git a/src/routes/writing/_Article.svelte b/src/routes/writing/_Article.svelte
index 261c9fc..010c0b2 100644
--- a/src/routes/writing/_Article.svelte
+++ b/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 />
diff --git a/yarn.lock b/yarn.lock
index 04cbb28..b7ed350 100644
--- a/yarn.lock
+++ b/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"