From 3f717681461d24d60a6b058372158d7cd7f94dde Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 9 Nov 2021 11:58:58 +0100
Subject: [PATCH 1/4] still show start from scratch and import when template
 request fails

---
 .../src/components/start/TemplateList.svelte  | 46 +++++++++----------
 1 file changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/builder/src/components/start/TemplateList.svelte b/packages/builder/src/components/start/TemplateList.svelte
index 7c7eb1f8f9..12f8725bd3 100644
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@@ -37,33 +37,33 @@
           <p class="detail">{template?.category?.toUpperCase()}</p>
         </div>
       {/each}
-      <div class="template start-from-scratch" on:click={() => onSelect(null)}>
-        <div
-          class="background-icon"
-          style={`background: rgb(50, 50, 50); color: white;`}
-        >
-          <Icon name="Add" />
-        </div>
-        <Heading size="XS">Start from scratch</Heading>
-        <p class="detail">BLANK</p>
-      </div>
-      <div
-        class="template import"
-        on:click={() => onSelect(null, { useImport: true })}
-      >
-        <div
-          class="background-icon"
-          style={`background: rgb(50, 50, 50); color: white;`}
-        >
-          <Icon name="Add" />
-        </div>
-        <Heading size="XS">Import an app</Heading>
-        <p class="detail">BLANK</p>
-      </div>
     </div>
   {:catch err}
     <h1 style="color:red">{err}</h1>
   {/await}
+  <div class="template start-from-scratch" on:click={() => onSelect(null)}>
+    <div
+      class="background-icon"
+      style={`background: rgb(50, 50, 50); color: white;`}
+    >
+      <Icon name="Add" />
+    </div>
+    <Heading size="XS">Start from scratch</Heading>
+    <p class="detail">BLANK</p>
+  </div>
+  <div
+    class="template import"
+    on:click={() => onSelect(null, { useImport: true })}
+  >
+    <div
+      class="background-icon"
+      style={`background: rgb(50, 50, 50); color: white;`}
+    >
+      <Icon name="Add" />
+    </div>
+    <Heading size="XS">Import an app</Heading>
+    <p class="detail">BLANK</p>
+  </div>
 </Layout>
 
 <style>

From cb459bc87767e5fcb5078b994aaaa7afcdc67348 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 9 Nov 2021 12:15:29 +0100
Subject: [PATCH 2/4] adding flags for messagePassing

---
 .../src/builderStore/store/frontend.js        |  1 +
 .../AppPreview/CurrentItemPreview.svelte      | 29 ++++++++++++++++---
 packages/client/manifest.json                 |  3 +-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 9110aa1430..97c4f58604 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/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: "",
diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 99de9f7942..d5c8230558 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/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 (!loading) return
+        if ($store.clientFeatures.messagePassing) {
+          if (!loading) return
+        }
 
         if (!$store.clientFeatures.intelligentLoading) {
           loading = false
@@ -116,18 +118,37 @@
   }
 
   onMount(() => {
-    window.addEventListener("message", receiveMessage)
+    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) {
+      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 &&
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 2adfd96626..53d2d09638 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -5,7 +5,8 @@
     "deviceAwareness": true,
     "state": true,
     "customThemes": true,
-    "devicePreview": true
+    "devicePreview": true,
+    "messagePassing": true
   },
   "layout": {
     "name": "Layout",

From 72eb24b0fa53f6e7abf5e7f91b0562293274cb61 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 9 Nov 2021 12:24:18 +0100
Subject: [PATCH 3/4] formatting

---
 .../components/design/AppPreview/CurrentItemPreview.svelte  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index d5c8230558..8759d63729 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -122,10 +122,10 @@
       window.addEventListener("message", receiveMessage)
     } else {
       // Legacy - remove in later versions of BB
-       iframe.contentWindow.addEventListener("ready", () => {
+      iframe.contentWindow.addEventListener("ready", () => {
         receiveMessage({ data: { type: MessageTypes.READY }})
       }, { once: true })
-       iframe.contentWindow.addEventListener("error", event => {
+      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
@@ -138,7 +138,7 @@
   onDestroy(() => {
     if (iframe.contentWindow) {
       if ($store.clientFeatures.messagePassing) {
-      window.removeEventListener("message", receiveMessage) //
+        window.removeEventListener("message", receiveMessage) //
       } else {
         // Legacy - remove in later versions of BB
         iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)

From fddf52ad45619f2733152a2b1d1b4b03e9e99ff5 Mon Sep 17 00:00:00 2001
From: Martin McKeaveney <martin@shogunsystems.co.uk>
Date: Tue, 9 Nov 2021 12:25:02 +0100
Subject: [PATCH 4/4] remove comment

---
 .../src/components/design/AppPreview/CurrentItemPreview.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 8759d63729..ac5e7ef48d 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -138,7 +138,7 @@
   onDestroy(() => {
     if (iframe.contentWindow) {
       if ($store.clientFeatures.messagePassing) {
-        window.removeEventListener("message", receiveMessage) //
+        window.removeEventListener("message", receiveMessage)
       } else {
         // Legacy - remove in later versions of BB
         iframe.contentWindow.removeEventListener("bb-event", handleBudibaseEvent)