Render screenslot when showing legacy layouts and remove concept of preview type

packages/builder/src/builderStore/store/frontend.js

@@ -42,7 +42,6 @@ const INITIAL_FRONTEND_STATE = {
     messagePassing: false,
     continueIfAction: false,
   },
-  currentFrontEndType: "none",
   errors: [],
   hasAppPackage: false,
   libraries: null,
@@ -191,7 +190,6 @@ export const getFrontendStore = () => {
             screens.find(screen => screen._id === screenId) || screens[0]
           if (!screen) return state
 
-          state.currentFrontEndType = FrontendTypes.SCREEN
           state.selectedScreenId = screen._id
           state.currentView = "detail"
           state.selectedComponentId = screen.props?._id
@@ -287,13 +285,8 @@ export const getFrontendStore = () => {
     },
     preview: {
       saveSelected: async () => {
-        const state = get(store)
         const selectedAsset = get(currentAsset)
-        if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
+        return await store.actions.screens.save(selectedAsset)
-          return await store.actions.screens.save(selectedAsset)
-        } else {
-          return await store.actions.layouts.save(selectedAsset)
-        }
       },
       setDevice: device => {
         store.update(state => {
@@ -308,8 +301,6 @@ export const getFrontendStore = () => {
           const layout =
             store.actions.layouts.find(layoutId) || get(store).layouts[0]
           if (!layout) return
-          state.currentFrontEndType = FrontendTypes.LAYOUT
-          state.currentView = "detail"
           state.selectedLayoutId = layout._id
           state.selectedComponentId = layout.props?._id
           return state

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

@@ -19,6 +19,7 @@
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "builderStore/componentUtils"
   import { isActive, goto } from "@roxi/routify"
+  import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
 
   let iframe
   let layout
@@ -42,14 +43,22 @@
     $store.clientLibPath
   )
 
+  const placeholderScreen = new Screen()
+    .name("Screen Placeholder")
+    .route("/")
+    .component("@budibase/standard-components/screenslot")
+    .instanceName("Content Placeholder")
+    .normalStyle({ flex: "1 1 auto" })
+    .json()
+
   // Extract data to pass to the iframe
   $: {
-    screen = $selectedScreen
-
     // If viewing legacy layouts, always show the custom layout
     if ($isActive("./layouts")) {
+      screen = placeholderScreen
       layout = $selectedLayout
     } else {
+      screen = $selectedScreen
       layout = $store.layouts.find(layout => layout._id === screen?.layoutId)
     }
   }
@@ -63,7 +72,6 @@
     layout,
     screen,
     selectedComponentId,
-    previewType: $store.currentFrontEndType,
     theme: $store.theme,
     customTheme: $store.customTheme,
     previewDevice: $store.previewDevice,

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/iframeTemplate.js

@@ -61,7 +61,6 @@ export default `
           selectedComponentId,
           layout,
           screen,
-          previewType,
           appId,
           theme,
           customTheme,
@@ -76,7 +75,6 @@ export default `
         window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
         window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
         window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
-        window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
         window["##BUDIBASE_PREVIEW_THEME##"] = theme
         window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
         window["##BUDIBASE_PREVIEW_DEVICE##"] = previewDevice

packages/client/src/components/ClientApp.svelte

@@ -156,7 +156,7 @@
 
                   <div id="app-body">
                     <CustomThemeWrapper>
-                      {#key `${$screenStore.activeLayout._id}-${$builderStore.previewType}`}
+                      {#key $screenStore.activeLayout._id}
                         <Component
                           isLayout
                           instance={$screenStore.activeLayout.props}

packages/client/src/components/Component.svelte

@@ -106,9 +106,7 @@
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
   $: builderInteractive =
-    $builderStore.inBuilder &&
+    $builderStore.inBuilder && insideScreenslot && !isBlock
-    ($builderStore.previewType === "layout" || insideScreenslot) &&
-    !isBlock
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
   $: interactive = builderInteractive || devToolsInteractive
   $: editing = editable && selected && $builderStore.editMode
@@ -210,7 +208,7 @@
   const getComponentConstructor = component => {
     const split = component?.split("/")
     const name = split?.[split.length - 1]
-    if (name === "screenslot" && $builderStore.previewType !== "layout") {
+    if (name === "screenslot" && !insideScreenslot) {
       return Router
     }
     return AppComponents[name]

packages/client/src/index.js

@@ -15,7 +15,6 @@ const loadBudibase = () => {
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
     selectedComponentId: window["##BUDIBASE_SELECTED_COMPONENT_ID##"],
     previewId: window["##BUDIBASE_PREVIEW_ID##"],
-    previewType: window["##BUDIBASE_PREVIEW_TYPE##"],
     theme: window["##BUDIBASE_PREVIEW_THEME##"],
     customTheme: window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"],
     previewDevice: window["##BUDIBASE_PREVIEW_DEVICE##"],

packages/client/src/stores/builder.js

@@ -13,7 +13,6 @@ const createBuilderStore = () => {
     selectedComponentId: null,
     editMode: false,
     previewId: null,
-    previewType: null,
     selectedPath: [],
     theme: null,
     customTheme: null,

packages/client/src/stores/components.js

@@ -18,9 +18,9 @@ const createComponentStore = () => {
 
       // Derive the selected component instance and definition
       let asset
-      const { layout, screen, previewType, selectedComponentId } = $builderState
+      const { screen, selectedComponentId } = $builderState
       if ($builderState.inBuilder) {
-        asset = previewType === "layout" ? layout : screen
+        asset = screen
       } else {
         asset = $screenState.activeScreen
       }