merge from master

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte

@@ -110,6 +110,7 @@
         appId: $store.appId,
       })
     )
+    )
   }
 
   $: if (iframe)

packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig

@@ -1,161 +0,0 @@
-<script>
-  import { store, backendUiStore } from "builderStore"
-  import { map, join } from "lodash/fp"
-  import iframeTemplate from "./iframeTemplate"
-  import { pipe } from "components/common/core"
-
-  let iframe
-  let styles = ""
-
-  function transform_component(comp) {
-    const props = comp.props || comp
-    if (props && props._children && props._children.length) {
-      props._children = props._children.map(transform_component)
-    }
-
-    return props
-  }
-
-  const getComponentTypeName = component => {
-    let [componentName] = component._component.match(/[a-z]*$/)
-    return componentName || "element"
-  }
-
-  const screenPlaceholder = {
-    name: "Screen Placeholder",
-    route: "*",
-    props: {
-      _component: "@budibase/standard-components/container",
-      type: "div",
-      _children: [
-        {
-          _component: "@budibase/standard-components/container",
-          _styles: { normal: {}, hover: {}, active: {}, selected: {} },
-          _id: "__screenslot__text",
-          _code: "",
-          className: "",
-          onLoad: [],
-          type: "div",
-          _children: [
-            {
-              _component: "@budibase/standard-components/text",
-              _styles: {
-                normal: {},
-                hover: {},
-                active: {},
-                selected: {},
-              },
-              _id: "__screenslot__text_2",
-              _code: "",
-              text: "content",
-              font: "",
-              color: "",
-              textAlign: "inline",
-              verticalAlign: "inline",
-              formattingTag: "none",
-            },
-          ],
-        },
-      ],
-    },
-  }
-
-  $: hasComponent = !!$store.currentPreviewItem
-
-  $: {
-    styles = ""
-    // Apply the CSS from the currently selected page and its screens
-    const currentPage = $store.pages[$store.currentPageName]
-    styles += currentPage._css
-    for (let screen of currentPage._screens) {
-      styles += screen._css
-    }
-    styles = styles
-  }
-
-  $: stylesheetLinks = pipe($store.pages.stylesheets, [
-    map(s => `<link rel="stylesheet" href="${s}"/>`),
-    join("\n"),
-  ])
-
-  $: screensExist =
-    $store.currentPreviewItem._screens &&
-    $store.currentPreviewItem._screens.length > 0
-
-  $: frontendDefinition = {
-    appId: $store.appId,
-    libraries: $store.libraries,
-    page: $store.pages[$store.currentPageName],
-    screens: [
-      $store.currentFrontEndType === "page"
-        ? screenPlaceholder
-        : $store.currentPreviewItem,
-    ],
-  }
-
-  $: selectedComponentType = getComponentTypeName($store.currentComponentInfo)
-
-  $: selectedComponentId = $store.currentComponentInfo
-    ? $store.currentComponentInfo._id
-    : ""
-
-  const refreshContent = () => {
-<<<<<<< HEAD
-    iframe.contentWindow.postMessage(JSON.stringify({
-      styles,
-      stylesheetLinks,
-      selectedComponentType,
-      selectedComponentId,
-      frontendDefinition,
-      appId: $store.appId
-    }))
-=======
-    iframe.contentWindow.postMessage(
-      JSON.stringify({
-        styles,
-        stylesheetLinks,
-        selectedComponentType,
-        selectedComponentId,
-        frontendDefinition,
-      })
-    )
->>>>>>> master
-  }
-
-  $: if (iframe)
-    iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
-      once: true,
-    })
-
-  $: if (iframe && frontendDefinition) {
-    refreshContent()
-  }
-</script>
-
-<div class="component-container">
-  {#if hasComponent && $store.currentPreviewItem}
-    <iframe
-      style="height: 100%; width: 100%"
-      title="componentPreview"
-      bind:this={iframe}
-      srcdoc={iframeTemplate} />
-  {/if}
-</div>
-
-<style>
-  .component-container {
-    grid-row-start: middle;
-    grid-column-start: middle;
-    position: relative;
-    overflow: hidden;
-    margin: auto;
-    height: 100%;
-  }
-
-  .component-container iframe {
-    border: 0;
-    left: 0;
-    top: 0;
-    width: 100%;
-  }
-</style>