@gem-sdk/core 3.0.0-pre-production.15 → 3.0.6

package/dist/esm/components/Render.liquid.js

@@ -1,309 +1,24 @@
-import { makeStyleResponsive } from '../helpers/make-style.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'zustand';
-import 'swr';
-import '@gem-sdk/adapter-shopify';
-import 'swr/mutation';
-import 'swr/infinite';
-import 'vanilla-lazyload';
-import '../hooks/useCartUI.js';
-import 'react-transition-group';
-import '@gem-sdk/core';
-import { disableWrap, customRenderChildren } from './constant.js';
-import 'classnames';
-import 'dayjs';
-import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
-import { baseAssetURL, isLocalEnv } from '../helpers/convert.js';
-import { RenderIf, template } from '../helpers/render.js';
-
-const componentsRenderWithParentId = [
-    'CarouselItem'
-];
-const componentTexts = [
-    'Text',
-    'Heading'
-];
-const componentIconList = [
-    'IconListV2',
-    'IconList'
-];
-const componentUsingAdvanced = [
-    'IconList',
-    'ProductVariants'
-];
-const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
-    const item = builder[uid];
-    const Component = components[item?.tag];
-    if (!Component) {
-        return {
-            liquid: '',
-            extraFiles
-        };
-    }
-    if (!item) {
-        return {
-            liquid: '',
-            extraFiles
-        };
-    }
-    if (item?.type === 'section') {
-        return {
-            liquid: '',
-            extraFiles
-        };
-    } else {
-        const customProps = {
-            extraFiles: {}
-        };
-        const style = composeAdvanceStyle(item.advanced, item.tag);
-        let liquid = '';
-        if (disableWrap.includes(item.tag)) {
-            liquid = RenderIf(item?.childrens?.length, ()=>{
-                return Component({
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    style,
-                    advanced: item.advanced,
-                    parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
-                    pageContext,
-                    ...passProps,
-                    builderAttrs: {
-                        ...passProps.builderAttrs
-                    },
-                    rawChildren: item.childrens.map((id)=>{
-                        return {
-                            ...builder[id],
-                            uid: id,
-                            builder,
-                            components,
-                            customProps,
-                            pageContext
-                        };
-                    }),
-                    children: !customRenderChildren.includes(item.tag) ? WrapRenderChildren({
-                        uid,
-                        customProps
-                    }, item.childrens.map((id)=>RenderChildren({
-                            uid: id,
-                            builder,
-                            components,
-                            customProps,
-                            parentTag: item.tag,
-                            pageContext
-                        }))) : ''
-                });
-            }, ()=>{
-                return Component({
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    advanced: item.advanced,
-                    style,
-                    isText: componentTexts.includes(item.tag) ? true : null,
-                    parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
-                    pageContext,
-                    ...passProps,
-                    builderAttrs: {
-                        ...passProps.builderAttrs
-                    }
-                });
-            });
-        } else {
-            liquid = template`<div gp-el-wrapper style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
-      ${RenderIf(item?.childrens?.length, ()=>{
-                return Component({
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    advanced: {
-                        ...componentUsingAdvanced.includes(item.tag) ? item?.advanced : {},
-                        cssClass: item?.advanced?.cssClass
-                    },
-                    pageContext,
-                    ...passProps,
-                    builderAttrs: {
-                        ...passProps.builderAttrs
-                    },
-                    rawChildren: item.childrens.map((id)=>{
-                        return {
-                            ...builder[id],
-                            uid: id,
-                            builder,
-                            components,
-                            customProps,
-                            pageContext
-                        };
-                    }),
-                    children: !customRenderChildren.includes(item.tag) ? WrapRenderChildren({
-                        uid,
-                        customProps
-                    }, item.childrens.map((id)=>RenderChildren({
-                            uid: id,
-                            builder,
-                            components,
-                            customProps,
-                            parentTag: item.tag,
-                            pageContext
-                        }))) : ''
-                });
-            }, ()=>{
-                return Component({
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    advanced: {
-                        ...componentUsingAdvanced.includes(item.tag) ? item?.advanced : {},
-                        cssClass: item?.advanced?.cssClass
-                    },
-                    pageContext,
-                    isText: componentTexts.includes(item.tag) ? true : null,
-                    style: componentIconList.includes(item.tag) ? style : null,
-                    ...passProps,
-                    builderAttrs: {
-                        ...passProps.builderAttrs
-                    }
-                });
-            })}
-      </div>`;
-        }
-        const { cssCode, jsCode } = RenderCustomCode(item);
-        if (cssCode) liquid += cssCode;
-        if (jsCode) liquid += jsCode;
-        liquid = appendAnimation(item, liquid);
-        return {
-            liquid,
-            extraFiles: customProps.extraFiles
-        };
-    }
-};
-const RenderCustomCode = (item)=>{
-    const { css, javascript, rootClassName } = item.advanced?.editorData || {};
-    const replacedCSS = css?.replaceAll(rootClassName, item.uid);
-    const replacedJS = javascript?.replaceAll(rootClassName, item.uid);
-    const cssCode = RenderIf(!!css, template`
-      <style id="${`custom-css-${item?.uid}`}">
-        ${replacedCSS}
+'use client';
+import{makeStyleResponsive as e}from"../helpers/make-style.js";import"react";import"react/jsx-runtime";import"zustand";import"swr";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"swr/infinite";import"vanilla-lazyload";import"../hooks/useCartUI.js";import"../hooks/useStickyStore.js";import"react-transition-group";import"@gem-sdk/core";import{disableWrap as t,customRenderChildren as n}from"./constant.js";import"classnames";import"dayjs";import{composeAdvanceStyle as r}from"../helpers/compose-advance-style.js";import{baseAssetURL as i,isLocalEnv as s}from"../helpers/convert.js";import{RenderIf as d,template as a}from"../helpers/render.js";let componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],componentIconList=["IconListV2","IconList"],componentUsingAdvanced=["IconList","ProductVariants"],Render=({uid:e,builder:i,components:s,parentId:l,extraFiles:o={},pageContext:p,additionalSettings:c,...u})=>{let m=i[e],g=s[m?.tag];if(!g||!m||m?.type==="section")return{liquid:"",extraFiles:o};{let o={extraFiles:{}},h=r(m.advanced,m.tag),b="";b=t.includes(m.tag)?d(m?.childrens?.length,()=>g({builderProps:{uid:e,builderData:m},styles:m.styles,setting:m.settings,style:h,advanced:m.advanced,parentId:componentsRenderWithParentId.includes(m.tag)?l:null,pageContext:p,...c,...u,builderAttrs:{...u.builderAttrs},rawChildren:m.childrens.map(e=>({...i[e],uid:e,builder:i,components:s,customProps:o,pageContext:p,...c})),children:n.includes(m.tag)?"":WrapRenderChildren({uid:e,customProps:o},m.childrens.map(e=>RenderChildren({uid:e,builder:i,components:s,customProps:o,parentTag:m.tag,pageContext:p,...c})))}),()=>g({builderProps:{uid:e,builderData:m},styles:m.styles,setting:m.settings,advanced:m.advanced,style:h,isText:!!componentTexts.includes(m.tag)||null,parentId:componentsRenderWithParentId.includes(m.tag)?l:null,pageContext:p,...u,builderAttrs:{...u.builderAttrs}})):a`<div gp-el-wrapper style="${componentIconList.includes(m.tag)?"":h}" class="${m.uid} ${m?.childrens?.length||"IconListItemHoz"!==m.tag?"":"hidden"}">
+      ${d(m?.childrens?.length,()=>g({builderProps:{uid:e,builderData:m},styles:m.styles,setting:m.settings,advanced:{...componentUsingAdvanced.includes(m.tag)?m?.advanced:{},cssClass:m?.advanced?.cssClass},pageContext:p,...c,...u,builderAttrs:{...u.builderAttrs},rawChildren:m.childrens.map(e=>({...i[e],uid:e,builder:i,components:s,customProps:o,pageContext:p,...c})),children:n.includes(m.tag)?"":WrapRenderChildren({uid:e,customProps:o},m.childrens.map(e=>RenderChildren({uid:e,builder:i,components:s,customProps:o,parentTag:m.tag,pageContext:p,...c})))}),()=>g({builderProps:{uid:e,builderData:m},styles:m.styles,setting:m.settings,advanced:{...componentUsingAdvanced.includes(m.tag)?m?.advanced:{},cssClass:m?.advanced?.cssClass},pageContext:p,...c,isText:!!componentTexts.includes(m.tag)||null,style:componentIconList.includes(m.tag)?h:null,...u,builderAttrs:{...u.builderAttrs}}))}
+      </div>`;let{cssCode:f,jsCode:v}=RenderCustomCode(m);return f&&(b+=f),v&&(b+=v),{liquid:b=appendAnimation(m,b),extraFiles:o.extraFiles}}},RenderCustomCode=e=>{let{css:t,javascript:n,rootClassName:r}=e.advanced?.editorData||{},i=t?.replaceAll(r,e.uid),s=n?.replaceAll(r,e.uid),l=d(!!t,a`
+      <style id="${`custom-css-${e?.uid}`}">
+        ${i}
       </style>
-    `);
-    const jsCode = RenderIf(!!javascript, template`
-      <script id="${`custom-js-${item?.uid}`}">
+    `),o=d(!!n,a`
+      <script id="${`custom-js-${e?.uid}`}">
         try {
-          ${replacedJS}
+          ${s}
         } catch(err){}
       </script>
-    `);
-    return {
-        cssCode,
-        jsCode
-    };
-};
-const appendAnimation = (props, liquid)=>{
-    const { advanced, tag } = props;
-    const { animation, op: opacity, hasAnimationInteraction, displayInitInteraction } = advanced ?? {};
-    const getAnimationType = (settings, type)=>{
-        return settings?.triggerConfig?.[type]?.animation ?? 'none';
-    };
-    const getSettingsByDevice = (device)=>{
-        if (device === 'desktop') return animation?.desktop;
-        else if (device === 'tablet') return animation?.tablet ?? animation?.desktop;
-        else if (device === 'mobile') return animation?.mobile ?? animation?.tablet ?? animation?.desktop;
-        return animation?.desktop;
-    };
-    const appearDesktop = getAnimationType(getSettingsByDevice('desktop'), 'appear');
-    const hoverDesktop = getAnimationType(getSettingsByDevice('desktop'), 'hover');
-    const appearTablet = getAnimationType(getSettingsByDevice('tablet'), 'appear');
-    const appearMobile = getAnimationType(getSettingsByDevice('mobile'), 'appear');
-    const enableAnimation = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none' || !!hasAnimationInteraction;
-    const enableAnimationWhenInit = animation?.desktop?.enabled && (appearDesktop !== 'none' || hoverDesktop !== 'none') || animation?.tablet?.enabled && appearTablet !== 'none' || animation?.mobile?.enabled && appearMobile !== 'none';
-    if (!enableAnimation) return liquid;
-    const getInitVisibility = (device)=>getSettingsByDevice(device)?.enabled && ![
-            'shake',
-            'none'
-        ].includes(getAnimationType(getSettingsByDevice(device), 'appear')) ? 'hidden' : 'visible';
-    const opacityObject = {
-        desktop: getInitVisibility('desktop'),
-        tablet: getInitVisibility('tablet'),
-        mobile: getInitVisibility('mobile')
-    };
-    return template`
+    `);return{cssCode:l,jsCode:o}},appendAnimation=(t,n)=>{let{advanced:r,tag:l}=t,{animation:o,op:p,hasAnimationInteraction:c,displayInitInteraction:u}=r??{},m=(e,t)=>e?.triggerConfig?.[t]?.animation??"none",g=e=>{if("desktop"===e);else if("tablet"===e)return o?.tablet??o?.desktop;else if("mobile"===e)return o?.mobile??o?.tablet??o?.desktop;return o?.desktop},h=m(g("desktop"),"appear"),b=m(g("desktop"),"hover"),f=m(g("tablet"),"appear"),v=m(g("mobile"),"appear"),y=o?.desktop?.enabled&&("none"!==h||"none"!==b)||o?.tablet?.enabled&&"none"!==f||o?.mobile?.enabled&&"none"!==v||!!c,C=o?.desktop?.enabled&&("none"!==h||"none"!==b)||o?.tablet?.enabled&&"none"!==f||o?.mobile?.enabled&&"none"!==v;if(!y)return n;let $=e=>g(e)?.enabled&&!["shake","none"].includes(m(g(e),"appear"))?"hidden":"visible",x={desktop:$("desktop"),tablet:$("tablet"),mobile:$("mobile")};return a`
   <gp-animation
     gp-interaction-wrapper
-    display-init="${displayInitInteraction === false ? 'hide' : 'show'}"
-    gp-data='${JSON.stringify({
-        config: animation,
-        tag,
-        opacity,
-        notEnableAnimationWhenInit: !enableAnimationWhenInit
-    })}'
-    style="${{
-        display: 'contents'
-    }}"
+    display-init="${!1===u?"hide":"show"}"
+    gp-data='${JSON.stringify({config:o,tag:l,opacity:p,notEnableAnimationWhenInit:!C})}'
+    style="${{display:"contents"}}"
   >
-    <div style="${{
-        ...makeStyleResponsive('v', opacityObject),
-        display: 'contents'
-    }}">${liquid}</div>
+    <div style="${{...e("v",x),display:"contents"}}">${n}</div>
   </gp-animation>
-  ${RenderIf(isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${baseAssetURL}/assets-v2/gp-animation.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-const RenderChildren = (props)=>{
-    const data = Render(props);
-    // Append to prop parent
-    for(const key in data.extraFiles){
-        if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
-            props.customProps.extraFiles[key] = data.extraFiles[key];
-        }
-    }
-    // Fix limit 256kb
-    const textEncoder = new TextEncoder();
-    const size = data?.liquid ? textEncoder.encode(data.liquid).length : 0;
-    if (Math.ceil(size / 1024) >= 180) {
-        const fileName = `gp-section-snippet-${props.uid}`;
-        props.customProps.extraFiles[fileName] = data.liquid;
-        return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`;
-    }
-    return data.liquid;
-};
-const WrapRenderChildren = ({ uid, customProps }, codes)=>{
-    let liquid = '';
-    if (codes?.length) {
-        let tempLiquid = '';
-        let fileIndex = 0;
-        for (const code of codes){
-            if (code) {
-                const textEncoder = new TextEncoder();
-                const newTempLiquid = tempLiquid + code;
-                const newSize = textEncoder.encode(newTempLiquid).length;
-                if (Math.ceil(newSize / 1024) < 180) {
-                    tempLiquid = newTempLiquid;
-                } else {
-                    const fileName = `gp-section-snippet-${uid}-${fileIndex++}`;
-                    customProps.extraFiles[fileName] = tempLiquid;
-                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form %}`;
-                    tempLiquid = code;
-                }
-            }
-        }
-        if (tempLiquid) {
-            liquid += tempLiquid;
-        }
-    }
-    return liquid;
-};
-
-export { RenderChildren, WrapRenderChildren, Render as default };
+  ${d(s,'<script src="{{ \'gp-animation-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${i}/assets-v2/gp-animation-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `},RenderChildren=e=>{let t=Render(e);for(let n in t.extraFiles)Object.prototype.hasOwnProperty.call(t.extraFiles,n)&&(e.customProps.extraFiles[n]=t.extraFiles[n]);let n=new TextEncoder,r=t?.liquid?n.encode(t.liquid).length:0;if(Math.ceil(r/1024)>=180){let n=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[n]=t.liquid,`{% render '${n}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`}return t.liquid},WrapRenderChildren=({uid:e,customProps:t},n)=>{let r="";if(n?.length)for(let i=0;i<n.length;i++){let s=n[i];if(s){let n=r+s,d=new TextEncoder,a=n?d.encode(n).length:0;if(Math.ceil(a/1024)>=180){let n=`gp-section-snippet-${e+i}`;t.extraFiles[n]=s,r+=`{% render '${n}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`}else r+=s}}return r};export{RenderChildren,WrapRenderChildren,Render as default};

package/dist/esm/components/RenderBlock.js

@@ -1,50 +1,2 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { useBuilderComponent } from '../contexts/BuilderComponent.js';
-import { useBuilderStore } from '../contexts/BuilderContext.js';
-import ComponentWrapper from './ComponentWrapper.js';
-
-const RenderBlock = ({ uid })=>{
-    const item = useBuilderStore((s)=>s.getItem(uid));
-    const Component = useBuilderComponent(item?.tag);
-    if (!item || item.type === 'section') return null;
-    return /*#__PURE__*/ jsx(ErrorBoundary, {
-        fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxs(ComponentWrapper, {
-                ...item,
-                children: [
-                    /*#__PURE__*/ jsx("span", {
-                        "aria-label": "Error message",
-                        children: error.message
-                    }),
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        onClick: resetErrorBoundary,
-                        children: "Try again"
-                    })
-                ]
-            }),
-        children: /*#__PURE__*/ jsx(ComponentWrapper, {
-            ...item,
-            children: item?.childrens?.length ? /*#__PURE__*/ jsx(Component, {
-                builderProps: {
-                    uid
-                },
-                styles: item.styles ?? {},
-                setting: item.settings ?? {},
-                children: item?.childrens?.map((id)=>/*#__PURE__*/ jsx(RenderBlockMemo, {
-                        uid: id
-                    }, id))
-            }) : /*#__PURE__*/ jsx(Component, {
-                builderProps: {
-                    uid
-                },
-                styles: item.styles ?? {},
-                setting: item.settings ?? {}
-            })
-        })
-    }, item.uid);
-};
-const RenderBlockMemo = /*#__PURE__*/ memo(RenderBlock);
-
-export { RenderBlockMemo as default };
+'use client';
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{memo as t}from"react";import{ErrorBoundary as o}from"react-error-boundary";import{useBuilderComponent as n}from"../contexts/BuilderComponent.js";import{useBuilderStore as l}from"../contexts/BuilderContext.js";import s from"./ComponentWrapper.js";let RenderBlock=({uid:t})=>{let i=l(e=>e.getItem(t)),d=n(i?.tag);return i&&"section"!==i.type?e(o,{fallbackRender:({error:t,resetErrorBoundary:o})=>r(s,{...i,children:[e("span",{"aria-label":"Error message",children:t.message}),e("button",{type:"button",onClick:o,children:"Try again"})]}),children:e(s,{...i,children:i?.childrens?.length?e(d,{builderProps:{uid:t},styles:i.styles??{},setting:i.settings??{},children:i?.childrens?.map(r=>e(RenderBlockMemo,{uid:r},r))}):e(d,{builderProps:{uid:t},styles:i.styles??{},setting:i.settings??{}})})},i.uid):null},RenderBlockMemo=t(RenderBlock);export{RenderBlockMemo as default};

package/dist/esm/components/RenderCustomCode.js

@@ -1,57 +1,6 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import Head from 'next/head';
-import Script from 'next/script';
-import { useMemo } from 'react';
-import 'zustand';
-import 'react-transition-group';
-import '@gem-sdk/core';
-import 'swr';
-import 'swr/infinite';
-import { useEditorMode } from '../hooks/shop.js';
-import 'classnames';
-import 'dayjs';
-import '../helpers/convert.js';
-import '@gem-sdk/adapter-shopify';
-import 'swr/mutation';
-import 'vanilla-lazyload';
-import '../hooks/useCartUI.js';
-
-const RenderCustomCode = ({ uid, advanced })=>{
-    const mode = useEditorMode();
-    const { css, javascript, rootClassName } = advanced?.editorData || {};
-    const replacedCSS = css?.replaceAll(rootClassName, uid);
-    const replacedJS = javascript?.replaceAll(rootClassName, uid);
-    const mapId = {
-        css: `custom-css-${uid}`,
-        javascript: `custom-js-${uid}`
-    };
-    const jsCode = useMemo(()=>{
-        return `
+'use client';
+import{jsxs as r,Fragment as t,jsx as o}from"react/jsx-runtime";import e from"next/head";import s from"next/script";import{useMemo as i}from"react";import"zustand";import"react-transition-group";import"@gem-sdk/core";import"swr";import"swr/infinite";import{useEditorMode as m}from"../hooks/shop.js";import"classnames";import"dayjs";import"../helpers/convert.js";import"@gem-sdk/adapter-shopify";import"swr/mutation";import"vanilla-lazyload";import"../hooks/useCartUI.js";import"../hooks/useStickyStore.js";let RenderCustomCode=({uid:a,advanced:p})=>{let n=m(),{css:l,javascript:c,rootClassName:d}=p?.editorData||{},u=l?.replaceAll(d,a),h=c?.replaceAll(d,a),j={css:`custom-css-${a}`,javascript:`custom-js-${a}`},f=i(()=>`
       try {
-        ${replacedJS}
+        ${h}
       } catch(err){}
-    `;
-    }, [
-        replacedJS
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx(Head, {
-                children: !!css && /*#__PURE__*/ jsx("style", {
-                    id: mapId['css'],
-                    dangerouslySetInnerHTML: {
-                        __html: replacedCSS
-                    }
-                })
-            }),
-            !!javascript && mode !== 'edit' && /*#__PURE__*/ jsx(Script, {
-                id: mapId['javascript'],
-                dangerouslySetInnerHTML: {
-                    __html: jsCode
-                }
-            })
-        ]
-    });
-};
-
-export { RenderCustomCode as default };
+    `,[h]);return r(t,{children:[o(e,{children:!!l&&o("style",{id:j.css,dangerouslySetInnerHTML:{__html:u}})}),!!c&&"edit"!==n&&o(s,{id:j.javascript,dangerouslySetInnerHTML:{__html:f}})]})};export{RenderCustomCode as default};

package/dist/esm/components/RenderPreview.js

@@ -1,63 +1,2 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { useBuilderComponent } from '../contexts/BuilderComponent.js';
-import { useBuilderPreviewStore } from '../contexts/BuilderPreviewContext.js';
-import ComponentWrapperPreview from './ComponentWrapperPreview.js';
-import RenderSectionMemo from './RenderSection.js';
-
-const RenderPreview = ({ uid, ...passProps })=>{
-    const item = useBuilderPreviewStore((s)=>s.getItem(uid));
-    const Component = useBuilderComponent(item?.tag);
-    if (!item) return null;
-    if (item?.type === 'section') {
-        return /*#__PURE__*/ jsx(RenderSectionMemo, {
-            sectionId: item.uid
-        });
-    } else {
-        return /*#__PURE__*/ jsx(ErrorBoundary, {
-            fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxs(ComponentWrapperPreview, {
-                    ...item,
-                    children: [
-                        /*#__PURE__*/ jsx("span", {
-                            "aria-label": "Error message",
-                            children: error.message
-                        }),
-                        /*#__PURE__*/ jsx("button", {
-                            type: "button",
-                            onClick: resetErrorBoundary,
-                            children: "Try again"
-                        })
-                    ]
-                }),
-            children: /*#__PURE__*/ jsx(ComponentWrapperPreview, {
-                ...item,
-                children: item?.childrens?.length ? /*#__PURE__*/ jsx(Component, {
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    ...passProps,
-                    children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderPreviewMemo, {
-                            "bundle-item": passProps?.['bundle-item'],
-                            uid: id
-                        }, id))
-                }) : /*#__PURE__*/ jsx(Component, {
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    ...passProps
-                })
-            })
-        }, item.uid);
-    }
-};
-const RenderPreviewMemo = /*#__PURE__*/ memo(RenderPreview);
-RenderPreviewMemo.displayName = 'RenderPreviewMemo';
-
-export { RenderPreviewMemo as default };
+'use client';
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{memo as t}from"react";import{ErrorBoundary as i}from"react-error-boundary";import{useBuilderComponent as n}from"../contexts/BuilderComponent.js";import{useBuilderPreviewStore as o}from"../contexts/BuilderPreviewContext.js";import l from"./ComponentWrapperPreview.js";import s from"./RenderSection.js";let RenderPreview=({uid:t,...d})=>{let m=o(e=>e.getItem(t)),a=n(m?.tag);return m?m?.type==="section"?e(s,{sectionId:m.uid}):e(i,{fallbackRender:({error:t,resetErrorBoundary:i})=>r(l,{...m,children:[e("span",{"aria-label":"Error message",children:t.message}),e("button",{type:"button",onClick:i,children:"Try again"})]}),children:e(l,{...m,children:m?.childrens?.length?e(a,{builderProps:{uid:t,builderData:m},styles:m.styles,setting:m.settings,...d,children:m.childrens.map(r=>e(RenderPreviewMemo,{parentStyle:d?.parentStyle,"bundle-item":d?.["bundle-item"],uid:r},r))}):e(a,{builderProps:{uid:t,builderData:m},styles:m.styles,setting:m.settings,...d})})},m.uid):null},RenderPreviewMemo=t(RenderPreview);RenderPreviewMemo.displayName="RenderPreviewMemo";export{RenderPreviewMemo as default};

package/dist/esm/components/RenderSection.js

@@ -1,19 +1,2 @@
-import { jsx } from 'react/jsx-runtime';
-import { memo } from 'react';
-import { BuilderProvider } from '../contexts/BuilderContext.js';
-import { useSection } from '../contexts/SectionContext.js';
-import RenderBlockMemo from './RenderBlock.js';
-
-const RenderSection = ({ sectionId })=>{
-    const state = useSection(sectionId);
-    if (!state) return null;
-    return /*#__PURE__*/ jsx(BuilderProvider, {
-        state: state,
-        children: /*#__PURE__*/ jsx(RenderBlockMemo, {
-            uid: sectionId
-        })
-    }, sectionId);
-};
-const RenderSectionMemo = /*#__PURE__*/ memo(RenderSection);
-
-export { RenderSectionMemo as default };
+'use client';
+import{jsx as e}from"react/jsx-runtime";import{memo as t}from"react";import{BuilderProvider as o}from"../contexts/BuilderContext.js";import{useSection as r}from"../contexts/SectionContext.js";import n from"./RenderBlock.js";let RenderSection=({sectionId:t})=>{let i=r(t);return i?e(o,{state:i,children:e(n,{uid:t})},t):null},RenderSectionMemo=t(RenderSection);export{RenderSectionMemo as default};