Merge pull request #344 from mjashanks/master

app preview improvements

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

@@ -21,42 +21,7 @@
     return componentName || "element"
   }
 
-  $: iframe &&
+  const screenPlaceholder =  {
-    console.log(
-      iframe.contentDocument.head.insertAdjacentHTML(
-        "beforeend",
-        `<\style></style>`
-      )
-    )
-  $: 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.currentPreviewItem,
-    screens: screensExist
-      ? $store.currentPreviewItem._screens
-      : [
-          {
     name: "Screen Placeholder",
     route: "*",
     props: {
@@ -93,7 +58,39 @@
         },
       ],
     },
-          },
+  }
+
+
+  $: 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: "",
   }
@@ -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({
+      srcdoc={iframeTemplate} />
-        styles,
-        stylesheetLinks,
-        selectedComponentType,
-        selectedComponentId,
-        frontendDefinition: JSON.stringify(frontendDefinition),
-      })} />
   {/if}
 </div>
 

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

@@ -1,20 +1,6 @@
-export default ({
+export default `<html>
-  styles,
-  stylesheetLinks,
-  selectedComponentType,
-  selectedComponentId,
-  frontendDefinition,
-}) => `<html>
   <head>
-    ${stylesheetLinks}
-
     <style>
-      ${styles || ""}
-
-      .${selectedComponentType}-${selectedComponentId} {
-        border: 2px solid #0055ff; 
-      }
-
       body, html {
         height: 100%!important;
         font-family: Roboto !important;
@@ -35,11 +21,49 @@ 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 });
+        clientModule = module
+        window.addEventListener('message', receiveMessage)
+        window.dispatchEvent(new Event('bb-ready'))
       })
     </script>
   </head>