@redneckz/wildless-cms-uni-blocks 0.6.19 → 0.6.20

package/bin/migration-scripts/0.6.19.js

@@ -0,0 +1,21 @@
+export const description = 'v0.6.19';
+
+export default (unitPath, content) => {
+  if (!content?.slots) {
+    return content;
+  }
+
+  adjustRootSlots(content.slots);
+
+  return { ...content };
+};
+
+function adjustRootSlots(slots) {
+  Object.keys(slots).forEach((slotKey) => {
+    if (Array.isArray(slots[slotKey])) {
+      return;
+    }
+    const slotBlocks = slots[slotKey].blocks;
+    slots[slotKey] = slotBlocks;
+  });
+}

package/bundle/bundle.umd.js

@@ -2650,8 +2650,11 @@
     OtherProducts.childrenTypes = ['OtherProductsItem'];
 
     function getParentBlockDef(ancestors, type) {
-        const [, ...blocks] = ancestors || [];
-        return blocks.reverse().find((_) => !type || type === _?.type) || {};
+        const [block] = (ancestors || [])
+            .map((item) => item)
+            .reverse()
+            .find(([_]) => _ && 'type' in _ && (!type || type === _.type)) || [];
+        return block || {};
     }
 
     function getParentBlockContent(ancestors, defaultContent) {
@@ -3546,19 +3549,30 @@
     });
 
     const DEFAULT_SLOT_NAME = null;
-    const DEFAULT_ANCESTORS = [DEFAULT_SLOT_NAME];
 
-    const defaultChildRenderer = (_) => _;
-    function renderBlock(block, options, ancestors = DEFAULT_ANCESTORS) {
-        const { key, page, blockDecorator, blocksRegistry, context } = options;
-        const { type, blocks: childBlocks } = block;
+    function renderSlots({ slots = {}, parent, options, ancestors = [], }) {
+        return Object.entries(slots).reduce((res, [slotName, slotBlocks]) => ({
+            ...res,
+            [slotName]: renderBlocksList({
+                blocks: slotBlocks,
+                parent,
+                slotName,
+                options,
+                ancestors,
+            }),
+        }), {});
+    }
+
+    function renderBlock({ block = {}, options, ancestors = [] }) {
+        const { key, page, blockDecorator, blocksRegistry = {}, context } = options;
+        const { type, slots, blocks: childBlocks } = block;
         if (!(type && type in blocksRegistry)) {
             console.warn(`No block with "${type}" is registered`);
         }
         const BlockComponent = type && blocksRegistry[type];
-        const { renderChild = defaultChildRenderer } = BlockComponent || {};
-        const renderChildBlock = (_, j) => renderChild(renderBlock(_, { ...options, key: `${options.key}-${j}` }, [...ancestors, block]), j);
-        const children = childBlocks?.length ? childBlocks.map(renderChildBlock) : null;
+        const subBlockRenderProps = { parent: block, options, ancestors };
+        const children = renderBlocksList({ ...subBlockRenderProps, blocks: childBlocks });
+        const blockSlots = slots ? renderSlots({ ...subBlockRenderProps, slots }) : {};
         return blockDecorator({
             blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
             block,
@@ -3566,32 +3580,45 @@
             // Adjusted by decorator block and blockClassName
             render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
                 const { version, anchor, labels, content } = adjustedBlock;
-                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, context: context, page: page, ancestors: ancestors, version: version, anchor: anchor, labels: labels, ...content, children: children }, key)) : null;
+                return BlockComponent ? (jsx(BlockComponent, { className: adjustedBlockClassName, context: context, page: page, ancestors: ancestors, version: version, anchor: anchor, labels: labels, slots: blockSlots, ...content, children: children }, key)) : null;
             },
         }, key);
     }
 
+    const defaultChildRenderer = (_) => _;
+    function renderBlocksList({ blocks = [], parent, slotName = DEFAULT_SLOT_NAME, options, ancestors = [], }) {
+        const { blocksRegistry = {} } = options;
+        const { type } = parent;
+        const BlockComponent = type && blocksRegistry[type];
+        const { renderChild = defaultChildRenderer } = BlockComponent || {};
+        return blocks.map((_, j) => renderChild(renderBlock({
+            block: _,
+            options: { ...options, key: `${options.key ? options.key : _.type}-${j}` },
+            ancestors: [...ancestors, [parent, slotName]],
+        }), j));
+    }
+
     const defaultBlockDecorator = ({ blockClassName, block, render }) => render({ blockClassName, block });
     const ContentPage = JSX((props) => {
-        const { className = '', context, data = {} } = props;
+        const { className = '', blocksRegistry, blockDecorator, context, data = {} } = props;
         const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
-        const blocksListRenderer = renderBlocksList(props);
-        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [slots?.header?.blocks?.length ? (jsx("div", { className: `${style2className(slots.header.style)}`, children: blocksListRenderer(slots.header.blocks, ['header']) })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: blocksListRenderer(blocks) })) : null, likeControl ? renderLikeControl(context) : null] }));
-    });
-    function renderBlocksList({ blocksRegistry, data, blockDecorator, context }) {
-        return (blocks, ancestors) => blocks.map((block, i) => renderBlock(block, {
-            key: `${block.type || '#'}-${i}`,
+        const options = {
+            key: '',
             blocksRegistry,
-            page: data || {},
+            page: data,
             blockDecorator: blockDecorator || defaultBlockDecorator,
             context,
-        }, ancestors));
-    }
+        };
+        const pageSlots = renderSlots({ slots, parent: data, options });
+        return (jsxs("section", { className: `relative ${style2className(pageStyle)} ${className}`, "data-theme": colorPalette, children: [pageSlots?.header ? (jsx("div", { className: "mb-5 shadow-[0_8px_32px_0px_#00000014]", children: pageSlots.header })) : null, blocks?.length ? (jsx("div", { className: "container grid grid-cols-12 gap-1", children: renderBlocksList({ blocks, parent: data, options }) })) : null, likeControl ? renderLikeControl(context) : null] }));
+    });
+    ContentPage.childrenTypes = [];
+    ContentPage.slots = () => ['header'];
     function renderLikeControl(context) {
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto", context: context }, "LikeControl") }));
     }
 
-    const packageVersion = "0.6.19";
+    const packageVersion = "0.6.20";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;