fix: override nested components with preview in the component browser

CloudCannon · Apr 12, 2022 · 7b3ab9b · 7b3ab9b
1 parent 513cb32
commit 7b3ab9b
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 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
@@ -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.
diff --git 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];
+            }
         }
     }