Adjust iframe builder preview to prevent requirement of rollup-plugin-html

6 years ago · db0e234858
1 changed files with 49 additions and 1 deletions
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@ -1 +1,49 @@
-export { default } from "./iframeTemplate.html"
+export default `
 <html>
  <head>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <style>
      body, html {
        height: 100% !important;
        font-family: Inter, sans-serif !important;
        margin: 0 !important;
      }
      *, *:before, *:after {
        box-sizing: border-box;
      }
    </style>
    <script src='/assets/budibase-client.js'></script>
    <script>
      function receiveMessage(event) { 
        if (!event.data) {
          return
        }
        // Extract data from message
        const { selectedComponentId, layout, screen, previewType, appId } = JSON.parse(event.data)
        // Set some flags so the app knows we're in the builder
        window["##BUDIBASE_IN_BUILDER##"] = true
        window["##BUDIBASE_APP_ID##"] = appId
        window["##BUDIBASE_PREVIEW_LAYOUT##"] = layout
        window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
        window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
        window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
        window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
        // Initialise app
        if (window.loadBudibase) {
          loadBudibase()
        }
      }
      window.addEventListener("message", receiveMessage)
      window.dispatchEvent(new Event("bb-ready"))
    </script>
  </head>
  <body>
  asdasd
  </body>
 </html>
 `