fix: support adding multiple nested components in the component browser

Author: bglw

javascript-modules/browser/lib/app/svelte/lib/helpers-key.test.js

@@ -131,4 +131,35 @@ test("preview data overrides component array references", t => {
     });
 });
 
+test("preview data can reference nested components", 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: ["bookshop:button", "bookshop:button"]
+            }
+        })
+    };
+    const hydrated = hydrateComponents(components, engineMock);
+    t.deepEqual(hydrated.hero.props, {
+        _bookshop_name: "hero",
+        title: "Hello World",
+        buttons: [{
+            _bookshop_name: "button",
+            text: "Hello World"
+        }, {
+            _bookshop_name: "button",
+            text: "Hello World"
+        }]
+    });
+});
+
 // TODO: Re-unit test the browser for 3.0 conventions.

javascript-modules/browser/lib/app/svelte/lib/helpers.js

@@ -137,23 +137,26 @@ export const hydrateComponents = (components, engines, exclude = []) => {
 const findAndReplaceNested = (obj, structures, limitRecursion) => {
     if (!obj) return obj;
     if (Array.isArray(obj)) {
-        if (typeof obj[0] === "string" && /^bookshop:structure:./.test(obj[0])) {
-            const structureKey = obj[0].replace(/^bookshop:structure:/, '');
-            return [randFrom(structures[structureKey], limitRecursion)];
-        }
-        if (typeof obj[0] === "string" && /^bookshop:./.test(obj[0])) {
-            const structureKey = `component:${obj[0].replace(/^bookshop:/, '')}`;
-            return [randFrom(structures[structureKey], limitRecursion)];
+        for (let i = 0; i < obj.length; i++) {
+            if (typeof obj[i] === "string" && /^bookshop:structure:./.test(obj[i])) {
+                const structureKey = obj[i].replace(/^bookshop:structure:|!$/g, '');
+                obj[i] = randFrom(structures[structureKey], limitRecursion);
+            } else if (typeof obj[i] === "string" && /^bookshop:./.test(obj[i])) {
+                const structureKey = `component:${obj[i].replace(/^bookshop:|!$/g, '')}`;
+                obj[i] = randFrom(structures[structureKey], limitRecursion);
+            } else {
+                obj[i] = findAndReplaceNested(obj[i], structures, limitRecursion);
+            }
         }
-        return obj.map(o => findAndReplaceNested(o, structures, limitRecursion));
+        return obj;
     }
     if (typeof obj === "object") {
         Object.entries(obj).forEach(([key, val]) => {
             if (typeof val === "string" && /^bookshop:structure:./.test(val)) {
-                const structureKey = val.replace(/^bookshop:structure:/, '');
+                const structureKey = val.replace(/^bookshop:structure:|!$/g, '');
                 obj[key] = randFrom(structures[structureKey], limitRecursion);
             } else if (typeof val === "string" && /^bookshop:./.test(val)) {
-                const structureKey = `component:${val.replace(/^bookshop:/, '')}`;
+                const structureKey = `component:${val.replace(/^bookshop:|!$/g, '')}`;
                 obj[key] = randFrom(structures[structureKey], limitRecursion);
             } else {
                 obj[key] = findAndReplaceNested(obj[key], structures, limitRecursion);