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

<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: {
      _id: "screenslot-placeholder",
      _component: "@budibase/standard-components/container",
      _styles: {
        normal: {},
        hover: {},
        active: {},
        selected: {},
      },
      _code: "",
      className: "",
      onLoad: [],
      type: "div",
      _children: [
        {
          _id: "51a1b494-0fa4-49c3-90cc-c2a6c7a3f888",
          _component: "@budibase/standard-components/container",
          _styles: {
            normal: {
              display: "flex",
              "flex-direction": "column",
              "align-items": "center",
            },
            hover: {},
            active: {},
            selected: {},
          },
          _code: "",
          className: "",
          onLoad: [],
          type: "div",
          _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
          _instanceName: "Container",
          _children: [
            {
              _id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
              _component: "@budibase/standard-components/heading",
              _styles: {
                normal: {
                  width: "500px",
                  padding: "8px",
                },
                hover: {},
                active: {},
                selected: {},
              },
              _code: "",
              className: "",
              text: "Screenslot",
              type: "h1",
              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
              _instanceName: "Heading",
              _children: [],
            },
            {
              _id: "71a3da65-72c6-4c43-8c6a-49871c07b77d",
              _component: "@budibase/standard-components/text",
              _styles: {
                normal: {
                  "max-width": "",
                  "text-align": "left",
                  width: "500px",
                  padding: "8px",
                },
                hover: {},
                active: {},
                selected: {},
              },
              _code: "",
              text:
                "The screens that you create will be displayed inside this box.",
              type: "none",
              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
              _instanceName: "Text",
            },
            {
              _id: "8af80374-460d-497b-a5d8-7dd2ec4a7bbc",
              _component: "@budibase/standard-components/text",
              _styles: {
                normal: {
                  "max-width": "",
                  "text-align": "left",
                  width: "500px",
                  padding: "8px",
                },
                hover: {},
                active: {},
                selected: {},
              },
              _code: "",
              text:
                "This box is just a placeholder, to show you the position of screens.",
              type: "none",
              _instanceId: "inst_40d9036_4c81114e2bf145ab8721978c66e09a10",
              _instanceName: "Text",
            },
          ],
        },
      ],
      _instanceName: "Content Placeholder",
    },
  }

  $: 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 = () => {
    iframe.contentWindow.postMessage(
      JSON.stringify({
        styles,
        stylesheetLinks,
        selectedComponentType,
        selectedComponentId,
        frontendDefinition,
        appId: $store.appId,
        instanceId: $backendUiStore.selectedDatabase._id,
      })
    )
  }

  $: 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>