From 492c2acc9a65e815cb327fda877c09a6f632c332 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 17 Dec 2021 09:18:07 +0000
Subject: [PATCH] Remove initial render of components with undefined props by
 passing in initial props without triggering svelte invalidation

---
 .../client/src/components/Component.svelte    | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 2ce97ee5fd..3e79c0bb15 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <script>
-  import { getContext, setContext } from "svelte"
+  import { getContext, setContext, beforeUpdate } from "svelte"
   import { writable } from "svelte/store"
   import * as AppComponents from "components/app"
   import Router from "./Router.svelte"
@@ -22,6 +22,13 @@
   // Ref to the svelte component
   let ref
 
+  // Initial settings are passed in on first render of the component.
+  // When the first instance of cachedSettings are set, this object is set to
+  // reference cachedSettings, so that mutations to cachedSettings also affect
+  // initialSettings, but it does not get caught by svelte invalidation - which
+  // would happen if we spread cachedSettings directly to the component.
+  let initialSettings
+
   // Component settings are the un-enriched settings for this component that
   // need to be enriched at this level.
   // Nested settings are the un-enriched block settings that are to be passed on
@@ -132,11 +139,6 @@
     editing,
   })
 
-  // Set initial props when the component mounts
-  $: if (ref?.$set) {
-    assignAllSettings()
-  }
-
   // Extracts all settings from the component instance
   const getRawSettings = instance => {
     let validSettings = {}
@@ -276,6 +278,7 @@
     const allSettings = { ...enriched, ...nested, ...conditional }
     if (!cachedSettings) {
       cachedSettings = { ...allSettings }
+      initialSettings = cachedSettings
     } else {
       Object.keys(allSettings).forEach(key => {
         const same = propsAreSame(allSettings[key], cachedSettings[key])
@@ -287,11 +290,6 @@
     }
   }
 
-  // Assigns the full set of settings to this component
-  const assignAllSettings = () => {
-    ref?.$set?.({ ...cachedSettings })
-  }
-
   // Assigns a certain setting to this component.
   // We manually use the svelte $set function to avoid triggering additional
   // reactive statements.
@@ -321,7 +319,7 @@
       data-id={id}
       data-name={name}
     >
-      <svelte:component this={constructor} bind:this={ref}>
+      <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
         {#if children.length}
           {#each children as child (child._id)}
             <svelte:self instance={child} />