Merge pull request #344 from mjashanks/master

app preview improvements

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

@@ -21,14 +21,48 @@
     return componentName || "element"
   }
 
-  $: iframe &&
-    console.log(
-      iframe.contentDocument.head.insertAdjacentHTML(
-        "beforeend",
-        `<\style></style>`
-      )
-    )
+  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
@@ -52,49 +86,12 @@
   $: frontendDefinition = {
     appId: $store.appId,
     libraries: $store.libraries,
-    page: $store.currentPreviewItem,
-    screens: screensExist
-      ? $store.currentPreviewItem._screens
-      : [
-          {
-            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",
-                    },
-                  ],
-                },
-              ],
-            },
-          },
-        ],
+    page: $store.pages[$store.currentPageName],
+    screens: [
+          $store.currentFrontEndType === "page"
+          ? screenPlaceholder
+          : $store.currentPreviewItem,
+    ],
     appRootPath: "",
   }
 
@@ -103,6 +100,22 @@
   $: selectedComponentId = $store.currentComponentInfo
     ? $store.currentComponentInfo._id
     : ""
+
+  const refreshContent = () => {
+    iframe.contentWindow.postMessage(JSON.stringify({
+      styles,
+      stylesheetLinks,
+      selectedComponentType,
+      selectedComponentId,
+      frontendDefinition,
+    }))
+  }
+
+  $: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true })
+
+  $: if(iframe && frontendDefinition) {
+		refreshContent()
+	}
 </script>
 
 <div class="component-container">
@@ -111,13 +124,7 @@
       style="height: 100%; width: 100%"
       title="componentPreview"
       bind:this={iframe}
-      srcdoc={iframeTemplate({
-        styles,
-        stylesheetLinks,
-        selectedComponentType,
-        selectedComponentId,
-        frontendDefinition: JSON.stringify(frontendDefinition),
-      })} />
+      srcdoc={iframeTemplate} />
   {/if}
 </div>
 

packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js

@@ -1,20 +1,6 @@
-export default ({
-  styles,
-  stylesheetLinks,
-  selectedComponentType,
-  selectedComponentId,
-  frontendDefinition,
-}) => `<html>
+export default `<html>
   <head>
-    ${stylesheetLinks}
-
     <style>
-      ${styles || ""}
-
-      .${selectedComponentType}-${selectedComponentId} {
-        border: 2px solid #0055ff; 
-      }
-
       body, html {
         height: 100%!important;
         font-family: Roboto !important;
@@ -35,12 +21,50 @@ export default ({
         }
     </style>
     <script>
-        window["##BUDIBASE_FRONTEND_DEFINITION##"] = ${frontendDefinition};
+      function receiveMessage(event) { 
+
+        if (!event.data) return
+
+        const data = JSON.parse(event.data)
+
+        try {
+          if (styles) document.head.removeChild(styles)
+        } catch(_) { }
+
+        try {
+          if (selectedComponentStyle) document.head.removeChild(selectedComponentStyle)
+        } catch(_) { }
+
+        selectedComponentStyle = document.createElement('style');
+        document.head.appendChild(selectedComponentStyle)
+        var selectedCss = '.' + data.selectedComponentType + '-' + data.selectedComponentId + '{ border: 2px solid #0055ff;  }'
+        selectedComponentStyle.appendChild(document.createTextNode(selectedCss))
+
+        styles = document.createElement('style')
+        document.head.appendChild(styles)
+        styles.appendChild(document.createTextNode(data.styles))
+
+        window["##BUDIBASE_FRONTEND_DEFINITION##"] = data.frontendDefinition;
+        if (clientModule) {
+          clientModule.loadBudibase({ window, localStorage })
+        }
+      }
+      let clientModule
+      let styles
+      let selectedComponentStyle
+
+      document.addEventListener("click", function(e) {
+        e.preventDefault()
+        e.stopPropagation()
+        return false;
+      }, true)
 
-        import('/_builder/budibase-client.esm.mjs')
-        .then(module => {
-            module.loadBudibase({ window, localStorage });
-        })
+      import('/_builder/budibase-client.esm.mjs')
+      .then(module => {
+        clientModule = module
+        window.addEventListener('message', receiveMessage)
+        window.dispatchEvent(new Event('bb-ready'))
+      })
     </script>
   </head>
   <body>