From 7b3ab9b9bef509bd6ad1688fbd4897feea4d6f96 Mon Sep 17 00:00:00 2001
From: Liam Bigelow <40188355+bglw@users.noreply.github.com>
Date: Tue, 12 Apr 2022 17:01:18 +1200
Subject: [PATCH] fix: override nested components with preview in the component
 browser

---
 .../lib/app/svelte/lib/helpers-key.test.js    | 62 +++++++++++++++++++
 .../browser/lib/app/svelte/lib/helpers.js     |  6 +-
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/javascript-modules/browser/lib/app/svelte/lib/helpers-key.test.js b/javascript-modules/browser/lib/app/svelte/lib/helpers-key.test.js
index 9d968003..d9b82d7a 100644
--- a/javascript-modules/browser/lib/app/svelte/lib/helpers-key.test.js
+++ b/javascript-modules/browser/lib/app/svelte/lib/helpers-key.test.js
@@ -69,4 +69,66 @@ test("should hydrate structure references", t => {
     });
 });
 
+test("preview data overrides component references", t => {
+    const components = {
+        "components/button/button.bookshop.json": JSON.stringify({
+            blueprint: {
+                text: "Hello World"
+            }
+        }),
+        "components/hero/hero.bookshop.json": JSON.stringify({
+            blueprint: {
+                title: "Hello World",
+                button: "bookshop:button"
+            },
+            preview: {
+                button: {
+                    hello: "World"
+                }
+            }
+        })
+    };
+    const hydrated = hydrateComponents(components, engineMock);
+    t.deepEqual(hydrated.hero.props, {
+        _bookshop_name: "hero",
+        title: "Hello World",
+        button: {
+            hello: "World"
+        }
+    });
+});
+
+test("preview data overrides component array references", t => {
+    const components = {
+        "components/button/button.bookshop.json": JSON.stringify({
+            blueprint: {
+                text: "Hello World"
+            }
+        }),
+        "components/hero/hero.bookshop.json": JSON.stringify({
+            blueprint: {
+                title: "Hello World",
+                buttons: ["bookshop:button"]
+            },
+            preview: {
+                buttons: [{
+                    text: "Hello"
+                }, {
+                    text: "World"
+                }]
+            }
+        })
+    };
+    const hydrated = hydrateComponents(components, engineMock);
+    t.deepEqual(hydrated.hero.props, {
+        _bookshop_name: "hero",
+        title: "Hello World",
+        buttons: [{
+            text: "Hello"
+        }, {
+            text: "World"
+        }]
+    });
+});
+
 // TODO: Re-unit test the browser for 3.0 conventions.
\ No newline at end of file
diff --git a/javascript-modules/browser/lib/app/svelte/lib/helpers.js b/javascript-modules/browser/lib/app/svelte/lib/helpers.js
index 3695fcd5..b7c368e7 100644
--- a/javascript-modules/browser/lib/app/svelte/lib/helpers.js
+++ b/javascript-modules/browser/lib/app/svelte/lib/helpers.js
@@ -22,7 +22,11 @@ const applyPreview = (blueprint, preview) => {
             }
         }
         if (typeof preview[key] === "object") {
-            Object.assign(preview[key], applyPreview(blueprint[key], preview[key]))
+            if (typeof blueprint[key] === "object") {
+                Object.assign(preview[key], applyPreview(blueprint[key], preview[key]));
+            } else {
+                blueprint[key] = preview[key];
+            }
         }
     }