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: {
      _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,
    ],
    appRootPath: "",
  }

  $: selectedComponentType = getComponentTypeName($store.currentComponentInfo)

  $: selectedComponentId = $store.currentComponentInfo
    ? $store.currentComponentInfo._id
    : ""

  const refreshContent = () => {
    iframe.contentWindow.postMessage(JSON.stringify({
      styles,
      stylesheetLinks,
      selectedComponentType,
      selectedComponentId,
      frontendDefinition,
    }))
  }
  let iframeLoaded = false
  $: if(iframe && !iframeLoaded) {
    iframe.contentWindow.addEventListener("bb-ready", refreshContent)
    iframeLoaded = 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>