Remove initial render of components with undefined props by passing in initial props without triggering svelte invalidation

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} />