Fix iframe remounting on routify changes

packages/builder/src/components/design/AppPanel/AppPreview.svelte → packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte

@@ -3,8 +3,6 @@
   import { onMount, onDestroy } from "svelte"
   import { store, selectedScreen, currentAsset } from "builderStore"
   import iframeTemplate from "./iframeTemplate"
-  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
-  import { FrontendTypes } from "constants"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -24,17 +22,8 @@
   let loading = true
   let error
 
-  // Create screen slot placeholder for use when a page is selected rather
-  // than a screen
-  const screenPlaceholder = new Screen()
-    .name("Screen Placeholder")
-    .route("*")
-    .component("@budibase/standard-components/screenslot")
-    .instanceName("Content Placeholder")
-    .json()
-
   // Messages that can be sent from the iframe preview to the builder
-  // Budibase events are and initalisation events
+  // Budibase events are and initialisation events
   const MessageTypes = {
     READY: "ready",
     ERROR: "error",

packages/builder/src/pages/builder/app/[application]/design/_layout.svelte

@@ -1,6 +1,7 @@
 <script>
   import { IconSideNav, IconSideNavItem } from "@budibase/bbui"
   import { goto, isActive } from "@roxi/routify"
+  import AppPanel from "./_components/AppPanel.svelte"
 </script>
 
 <div class="design">
@@ -41,6 +42,7 @@
 
   <div class="content">
     <slot />
+    <AppPanel />
   </div>
 </div>
 
@@ -64,4 +66,17 @@
     align-items: stretch;
     flex: 1 1 auto;
   }
+  /*
+    This is hacky, yes, but it's the only way to prevent routify from
+    remounting the iframe on route changes.
+  */
+  .content :global(> *:last-child) {
+    order: 1;
+  }
+  .content :global(> *:first-child) {
+    order: 0;
+  }
+  .content :global(> *:nth-child(2)) {
+    order: 2;
+  }
 </style>

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/[componentId]/index.svelte

@@ -1,9 +1,7 @@
 <script>
-  import AppPanel from "components/design/AppPanel/AppPanel.svelte"
   import ComponentNavigationPanel from "./_components/ComponentNavigationPanel.svelte"
   import ComponentSettingsPanel from "./_components/ComponentSettingsPanel.svelte"
 </script>
 
 <ComponentNavigationPanel />
-<AppPanel />
 <ComponentSettingsPanel />

packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/index.svelte

@@ -1,7 +1,5 @@
 <script>
   import ComponentListPanel from "./_components/ComponentListPanel.svelte"
-  import AppPanel from "components/design/AppPanel/AppPanel.svelte"
 </script>
 
 <ComponentListPanel />
-<AppPanel />

packages/builder/src/pages/builder/app/[application]/design/screens/[screenId].svelte

@@ -3,7 +3,6 @@
   import { onDestroy } from "svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import { goto, params, redirect } from "@roxi/routify"
-  import AppPanel from "components/design/AppPanel/AppPanel.svelte"
   import ScreenNavigationPanel from "./_components/ScreenNavigationPanel.svelte"
   import ScreenSettingsPanel from "./_components/ScreenSettingsPanel.svelte"
 
@@ -27,5 +26,4 @@
 </script>
 
 <ScreenNavigationPanel />
-<AppPanel />
 <ScreenSettingsPanel />

packages/builder/src/pages/builder/app/[application]/design/screens/_components/ScreenSettingsPanel.svelte

@@ -36,7 +36,7 @@
   }
 
   const setScreenSetting = (setting, value) => {
-    const { name, parser, validate } = setting
+    const { key, parser, validate } = setting
 
     // Parse value if required
     if (parser) {
@@ -48,7 +48,7 @@
       const error = validate(value)
       errors = {
         ...errors,
-        [name]: error,
+        [key]: error,
       }
       if (error) {
         return
@@ -56,13 +56,13 @@
     } else {
       errors = {
         ...errors,
-        [name]: null,
+        [key]: null,
       }
     }
 
     // Update screen object in store
     store.update(state => {
-      setWith(get(selectedScreen), name.split("."), value, Object)
+      setWith(get(selectedScreen), key.split("."), value, Object)
       return state
     })
 

packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte

@@ -1,7 +1,6 @@
 <script>
   import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
   import { Body, Layout } from "@budibase/bbui"
-  import AppPanel from "components/design/AppPanel/AppPanel.svelte"
   import ThemeEditor from "./_components/ThemeEditor.svelte"
 </script>
 
@@ -11,5 +10,3 @@
     <ThemeEditor />
   </Layout>
 </NavigationPanel>
-
-<AppPanel />