Merge pull request #3294 from Budibase/fix/feature-flag-safari

Fix/feature flag safari

packages/builder/src/builderStore/store/frontend.js

@@ -44,6 +44,7 @@ const INITIAL_FRONTEND_STATE = {
     state: false,
     customThemes: false,
     devicePreview: false,
+    messagePassing: false,
   },
   currentFrontEndType: "none",
   selectedScreenId: "",

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

@@ -96,7 +96,9 @@
         // Initialise the app when mounted
         // Display preview immediately if the intelligent loading feature
         // is not supported
+        if ($store.clientFeatures.messagePassing) {
           if (!loading) return
+        }
 
         if (!$store.clientFeatures.intelligentLoading) {
           loading = false
@@ -116,18 +118,37 @@
   }
 
   onMount(() => {
+    if ($store.clientFeatures.messagePassing) {
       window.addEventListener("message", receiveMessage)
+    } else {
+      // Legacy - remove in later versions of BB
+      iframe.contentWindow.addEventListener("ready", () => {
+        receiveMessage({ data: { type: MessageTypes.READY }})
+      }, { once: true })
+      iframe.contentWindow.addEventListener("error", event => {
+        receiveMessage({ data: { type: MessageTypes.ERROR, error: event.detail }})
+      }, { once: true })
+      // Add listener for events sent by client library in preview
+      iframe.contentWindow.addEventListener("bb-event", handleBudibaseEvent)
+      iframe.contentWindow.addEventListener("keydown", handleKeydownEvent)
+    }
   })
 
   // Remove all iframe event listeners on component destroy
   onDestroy(() => {
     if (iframe.contentWindow) {
-      window.removeEventListener("message", receiveMessage) //
+      if ($store.clientFeatures.messagePassing) {
+        window.removeEventListener("message", receiveMessage)
+      } else {
+        // Legacy - remove in later versions of BB
+        iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)
+        iframe.contentWindow.removeEventListener("keydown", handleKeydownEvent)
+      }
     }
   })
 
   const handleBudibaseEvent = event => {
-    const { type, data } = event.data
+    const { type, data } = event.data || event.detail
     if (type === "select-component" && data.id) {
       store.actions.components.select({ _id: data.id })
     } else if (type === "update-prop") {
@@ -164,7 +185,7 @@
   }
 
   const handleKeydownEvent = event => {
-    const { key } = event.data
+    const { key } = event.data || event
     if (
       (key === "Delete" || key === "Backspace") &&
       selectedComponentId &&

packages/builder/src/components/start/TemplateList.svelte

@@ -37,6 +37,10 @@
           <p class="detail">{template?.category?.toUpperCase()}</p>
         </div>
       {/each}
+    </div>
+  {:catch err}
+    <h1 style="color:red">{err}</h1>
+  {/await}
   <div class="template start-from-scratch" on:click={() => onSelect(null)}>
     <div
       class="background-icon"
@@ -60,10 +64,6 @@
     <Heading size="XS">Import an app</Heading>
     <p class="detail">BLANK</p>
   </div>
-    </div>
-  {:catch err}
-    <h1 style="color:red">{err}</h1>
-  {/await}
 </Layout>
 
 <style>

packages/client/manifest.json

@@ -5,7 +5,8 @@
     "deviceAwareness": true,
     "state": true,
     "customThemes": true,
-    "devicePreview": true
+    "devicePreview": true,
+    "messagePassing": true
   },
   "layout": {
     "name": "Layout",