@gem-sdk/core 2.0.0-dev.896 → 2.0.0

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

@@ -1,23 +1,319 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var makeStyle=require("../helpers/make-style.js");require("react"),require("react/jsx-runtime"),require("zustand"),require("swr"),require("@gem-sdk/adapter-shopify"),require("swr/mutation"),require("vanilla-lazyload"),require("../hooks/useCartUI.js"),require("react-transition-group"),require("@gem-sdk/core"),require("classnames");var constant=require("./constant.js"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),convert=require("../helpers/convert.js"),render=require("../helpers/render.js");const componentsRenderWithParentId=["CarouselItem"],componentTexts=["Text","Heading"],componentIconList=["IconListV2","IconList"],componentUsingAdvanced=["IconList"],Render=({uid:e,builder:t,components:r,parentId:n,extraFiles:s={},pageContext:d,...i})=>{let a=t[e],l=r[a?.tag];if(!l)return console.log("Miss component: ",a),{liquid:"",extraFiles:s};if(!a||a?.type==="section")return{liquid:"",extraFiles:s};{let s={extraFiles:{}},o=composeAdvanceStyle.composeAdvanceStyle(a.advanced,a.tag),c="";c=constant.disableWrap.includes(a.tag)?render.RenderIf(a?.childrens?.length,()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,style:o,advanced:a.advanced,parentId:componentsRenderWithParentId.includes(a.tag)?n:null,pageContext:d,...i,rawChildren:a.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:s,pageContext:d})),children:constant.customRenderChildren.includes(a.tag)?"":WrapRenderChildren({uid:e,customProps:s},a.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:s,parentTag:a.tag,pageContext:d})))}),()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:a.advanced,style:o,isText:!!componentTexts.includes(a.tag)||null,parentId:componentsRenderWithParentId.includes(a.tag)?n:null,pageContext:d,...i})):render.template`<div style="${componentIconList.includes(a.tag)?"":o}" class="${a.uid} ${a?.childrens?.length||"IconListItemHoz"!==a.tag?"":"hidden"}">
-      ${render.RenderIf(a?.childrens?.length,()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:{...componentUsingAdvanced.includes(a.tag)?a?.advanced:{},cssClass:a?.advanced?.cssClass},pageContext:d,...i,rawChildren:a.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:s,pageContext:d})),children:constant.customRenderChildren.includes(a.tag)?"":WrapRenderChildren({uid:e,customProps:s},a.childrens.map(e=>RenderChildren({uid:e,builder:t,components:r,customProps:s,parentTag:a.tag,pageContext:d})))}),()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:{cssClass:a?.advanced?.cssClass},pageContext:d,isText:!!componentTexts.includes(a.tag)||null,style:componentIconList.includes(a.tag)?o:null,...i}))}
-      </div>`;let{cssCode:p,jsCode:u}=RenderCustomCode(a);return p&&(c+=p),u&&(c+=u),{liquid:c=appendAnimation(a,c),extraFiles:s.extraFiles}}},RenderCustomCode=e=>{let{css:t,javascript:r,rootClassName:n}=e.advanced?.editorData||{},s=t?.replaceAll(n,e.uid),d=r?.replaceAll(n,e.uid),i=render.RenderIf(!!t,render.template`
-      <style
-        id="${`custom-css-${e?.uid}`}"
-      >${s}</style>
-    `),a=render.RenderIf(!!r,render.template`
-      <script
-        id="${`custom-js-${e?.uid}`}"
-      >
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var makeStyle = require('../helpers/make-style.js');
+require('react');
+require('react/jsx-runtime');
+require('zustand');
+require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('swr/infinite');
+require('vanilla-lazyload');
+require('../hooks/useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+var constant = require('./constant.js');
+require('classnames');
+require('dayjs');
+var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
+var convert = require('../helpers/convert.js');
+var render = require('../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, enableLazyloadImage, ...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.composeAdvanceStyle(item.advanced, item.tag);
+        let liquid = '';
+        if (constant.disableWrap.includes(item.tag)) {
+            liquid = render.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,
+                    enableLazyloadImage,
+                    ...passProps,
+                    builderAttrs: {
+                        ...passProps.builderAttrs
+                    },
+                    rawChildren: item.childrens.map((id)=>{
+                        return {
+                            ...builder[id],
+                            uid: id,
+                            builder,
+                            components,
+                            customProps,
+                            pageContext,
+                            enableLazyloadImage
+                        };
+                    }),
+                    children: !constant.customRenderChildren.includes(item.tag) ? WrapRenderChildren({
+                        uid,
+                        customProps
+                    }, item.childrens.map((id)=>RenderChildren({
+                            uid: id,
+                            builder,
+                            components,
+                            customProps,
+                            parentTag: item.tag,
+                            pageContext,
+                            enableLazyloadImage
+                        }))) : ''
+                });
+            }, ()=>{
+                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,
+                    enableLazyloadImage,
+                    ...passProps,
+                    builderAttrs: {
+                        ...passProps.builderAttrs
+                    }
+                });
+            });
+        } else {
+            liquid = render.template`<div gp-el-wrapper style="${!componentIconList.includes(item.tag) ? style : ''}" class="${item.uid} ${!item?.childrens?.length && item.tag === 'IconListItemHoz' ? 'hidden' : ''}">
+      ${render.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,
+                    enableLazyloadImage,
+                    ...passProps,
+                    builderAttrs: {
+                        ...passProps.builderAttrs
+                    },
+                    rawChildren: item.childrens.map((id)=>{
+                        return {
+                            ...builder[id],
+                            uid: id,
+                            builder,
+                            components,
+                            customProps,
+                            pageContext,
+                            enableLazyloadImage
+                        };
+                    }),
+                    children: !constant.customRenderChildren.includes(item.tag) ? WrapRenderChildren({
+                        uid,
+                        customProps
+                    }, item.childrens.map((id)=>RenderChildren({
+                            uid: id,
+                            builder,
+                            components,
+                            customProps,
+                            parentTag: item.tag,
+                            pageContext,
+                            enableLazyloadImage
+                        }))) : ''
+                });
+            }, ()=>{
+                return Component({
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    advanced: {
+                        ...componentUsingAdvanced.includes(item.tag) ? item?.advanced : {},
+                        cssClass: item?.advanced?.cssClass
+                    },
+                    pageContext,
+                    enableLazyloadImage,
+                    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 = render.RenderIf(!!css, render.template`
+      <style id="${`custom-css-${item?.uid}`}">
+        ${replacedCSS}
+      </style>
+    `);
+    const jsCode = render.RenderIf(!!javascript, render.template`
+      <script id="${`custom-js-${item?.uid}`}">
         try {
-          ${d}
+          ${replacedJS}
         } catch(err){}
       </script>
-    `);return{cssCode:i,jsCode:a}},appendAnimation=(e,t)=>{let{advanced:r,tag:n}=e,{animation:s,op:d}=r??{},i=(e,t)=>e?.triggerConfig?.[t]?.animation??"none",a=e=>{if("desktop"===e);else if("tablet"===e)return s?.tablet??s?.desktop;else if("mobile"===e)return s?.mobile??s?.tablet??s?.desktop;return s?.desktop},l=i(a("desktop"),"appear"),o=i(a("desktop"),"hover"),c=i(a("tablet"),"appear"),p=i(a("mobile"),"appear"),u=s?.desktop?.enabled&&("none"!==l||"none"!==o)||s?.tablet?.enabled&&"none"!==c||s?.mobile?.enabled&&"none"!==p;if(!u)return t;let m=e=>a(e)?.enabled&&!["shake","none"].includes(i(a(e),"appear"))?"hidden":"visible",g={desktop:m("desktop"),tablet:m("tablet"),mobile:m("mobile")};return render.template`
+    `);
+    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 render.template`
   <gp-animation
-    gp-data='${JSON.stringify({config:s,tag:n,opacity:d})}'
-    style="${{display:"contents"}}"
+    gp-interaction-wrapper
+    display-init="${displayInitInteraction === false ? 'hide' : 'show'}"
+    gp-data='${JSON.stringify({
+        config: animation,
+        tag,
+        opacity,
+        notEnableAnimationWhenInit: !enableAnimationWhenInit
+    })}'
+    style="${{
+        display: 'contents'
+    }}"
   >
-    <div style="${{...makeStyle.makeStyleResponsive("v",g),display:"contents"}}">${t}</div>
+    <div style="${{
+        ...makeStyle.makeStyleResponsive('v', opacityObject),
+        display: 'contents'
+    }}">${liquid}</div>
   </gp-animation>
-  ${render.RenderIf(convert.isLocalEnv,'<script src="{{ \'gp-animation.js\' | asset_url }}" defer="defer"></script>',`<script src="${convert.baseAssetURL}/assets-v2/gp-animation.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `},RenderChildren=e=>{let t=Render(e);for(let r in t.extraFiles)Object.prototype.hasOwnProperty.call(t.extraFiles,r)&&(e.customProps.extraFiles[r]=t.extraFiles[r]);let r=new TextEncoder,n=t?.liquid?r.encode(t.liquid).length:0;if(Math.ceil(n/1024)>=180){let r=`gp-section-snippet-${e.uid}`;return e.customProps.extraFiles[r]=t.liquid,`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`}return t.liquid},WrapRenderChildren=({uid:e,customProps:t},r)=>{let n="";if(r?.length)for(let s=0;s<r.length;s++){let d=r[s];if(d){let r=n+d,i=new TextEncoder,a=r?i.encode(r).length:0;if(Math.ceil(a/1024)>=180){let r=`gp-section-snippet-${e+s}`;t.extraFiles[r]=d,n+=`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`}else n+=d}}return n};exports.RenderChildren=RenderChildren,exports.WrapRenderChildren=WrapRenderChildren,exports.default=Render;
+  ${render.RenderIf(convert.isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${convert.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) {
+        for(let i = 0; i < codes.length; i++){
+            const code = codes[i];
+            if (code) {
+                const newLiquid = liquid + code;
+                // Fix limit 256kb
+                const textEncoder = new TextEncoder();
+                const size = newLiquid ? textEncoder.encode(newLiquid).length : 0;
+                if (Math.ceil(size / 1024) >= 180) {
+                    const fileName = `gp-section-snippet-${uid + i}`;
+                    customProps.extraFiles[fileName] = code;
+                    liquid += `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`;
+                } else {
+                    liquid += code;
+                }
+            }
+        }
+    }
+    return liquid;
+};
+
+exports.RenderChildren = RenderChildren;
+exports.WrapRenderChildren = WrapRenderChildren;
+exports.default = Render;

package/dist/cjs/components/RenderBlock.js

@@ -1 +1,54 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),reactErrorBoundary=require("react-error-boundary"),BuilderComponent=require("../contexts/BuilderComponent.js"),BuilderContext=require("../contexts/BuilderContext.js"),ComponentWrapper=require("./ComponentWrapper.js");const RenderBlock=({uid:e})=>{let r=BuilderContext.useBuilderStore(r=>r.getItem(e)),t=BuilderComponent.useBuilderComponent(r?.tag);return r&&"section"!==r.type?jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary,{fallbackRender:({error:e,resetErrorBoundary:t})=>jsxRuntime.jsxs(ComponentWrapper.default,{...r,children:[jsxRuntime.jsx("span",{"aria-label":"Error message",children:e.message}),jsxRuntime.jsx("button",{type:"button",onClick:t,children:"Try again"})]}),children:jsxRuntime.jsx(ComponentWrapper.default,{...r,children:r?.childrens?.length?jsxRuntime.jsx(t,{builderProps:{uid:e},styles:r.styles??{},setting:r.settings??{},children:r?.childrens?.map(e=>jsxRuntime.jsx(RenderBlockMemo,{uid:e},e))}):jsxRuntime.jsx(t,{builderProps:{uid:e},styles:r.styles??{},setting:r.settings??{}})})},r.uid):null},RenderBlockMemo=react.memo(RenderBlock);exports.default=RenderBlockMemo;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactErrorBoundary = require('react-error-boundary');
+var BuilderComponent = require('../contexts/BuilderComponent.js');
+var BuilderContext = require('../contexts/BuilderContext.js');
+var ComponentWrapper = require('./ComponentWrapper.js');
+
+const RenderBlock = ({ uid })=>{
+    const item = BuilderContext.useBuilderStore((s)=>s.getItem(uid));
+    const Component = BuilderComponent.useBuilderComponent(item?.tag);
+    if (!item || item.type === 'section') return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, {
+        fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxRuntime.jsxs(ComponentWrapper.default, {
+                ...item,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("span", {
+                        "aria-label": "Error message",
+                        children: error.message
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        type: "button",
+                        onClick: resetErrorBoundary,
+                        children: "Try again"
+                    })
+                ]
+            }),
+        children: /*#__PURE__*/ jsxRuntime.jsx(ComponentWrapper.default, {
+            ...item,
+            children: item?.childrens?.length ? /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                builderProps: {
+                    uid
+                },
+                styles: item.styles ?? {},
+                setting: item.settings ?? {},
+                children: item?.childrens?.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderBlockMemo, {
+                        uid: id
+                    }, id))
+            }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                builderProps: {
+                    uid
+                },
+                styles: item.styles ?? {},
+                setting: item.settings ?? {}
+            })
+        })
+    }, item.uid);
+};
+const RenderBlockMemo = /*#__PURE__*/ react.memo(RenderBlock);
+
+exports.default = RenderBlockMemo;

package/dist/cjs/components/RenderCustomCode.js

@@ -1,5 +1,61 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),Head=require("next/head"),Script=require("next/script"),react=require("react");require("zustand"),require("swr"),require("@gem-sdk/adapter-shopify"),require("swr/mutation");var shop=require("../hooks/shop.js");require("vanilla-lazyload"),require("../hooks/useCartUI.js"),require("react-transition-group"),require("@gem-sdk/core"),require("classnames"),require("../helpers/convert.js");const RenderCustomCode=({uid:e,advanced:r})=>{let s=shop.useEditorMode(),{css:t,javascript:i,rootClassName:u}=r?.editorData||{},a=t?.replaceAll(u,e),o=i?.replaceAll(u,e),n={css:`custom-css-${e}`,javascript:`custom-js-${e}`},c=react.useMemo(()=>`
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Head = require('next/head');
+var Script = require('next/script');
+var react = require('react');
+require('zustand');
+require('react-transition-group');
+require('@gem-sdk/core');
+require('swr');
+require('swr/infinite');
+var shop = require('../hooks/shop.js');
+require('classnames');
+require('dayjs');
+require('../helpers/convert.js');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../hooks/useCartUI.js');
+
+const RenderCustomCode = ({ uid, advanced })=>{
+    const mode = shop.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 = react.useMemo(()=>{
+        return `
       try {
-        ${o}
+        ${replacedJS}
       } catch(err){}
-    `,[o]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Head,{children:!!t&&jsxRuntime.jsx("style",{id:n.css,dangerouslySetInnerHTML:{__html:a}})}),!!i&&"edit"!==s&&jsxRuntime.jsx(Script,{id:n.javascript,dangerouslySetInnerHTML:{__html:c}})]})};exports.default=RenderCustomCode;
+    `;
+    }, [
+        replacedJS
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(Head, {
+                children: !!css && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                    id: mapId['css'],
+                    dangerouslySetInnerHTML: {
+                        __html: replacedCSS
+                    }
+                })
+            }),
+            !!javascript && mode !== 'edit' && /*#__PURE__*/ jsxRuntime.jsx(Script, {
+                id: mapId['javascript'],
+                dangerouslySetInnerHTML: {
+                    __html: jsCode
+                }
+            })
+        ]
+    });
+};
+
+exports.default = RenderCustomCode;

package/dist/cjs/components/RenderPreview.js

@@ -1 +1,67 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),reactErrorBoundary=require("react-error-boundary"),BuilderComponent=require("../contexts/BuilderComponent.js"),BuilderPreviewContext=require("../contexts/BuilderPreviewContext.js"),ComponentWrapperPreview=require("./ComponentWrapperPreview.js"),RenderSection=require("./RenderSection.js");const RenderPreview=({uid:e,...r})=>{let t=BuilderPreviewContext.useBuilderPreviewStore(r=>r.getItem(e)),n=BuilderComponent.useBuilderComponent(t?.tag);return t?t?.type==="section"?jsxRuntime.jsx(RenderSection.default,{sectionId:t.uid}):jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary,{fallbackRender:({error:e,resetErrorBoundary:r})=>jsxRuntime.jsxs(ComponentWrapperPreview.default,{...t,children:[jsxRuntime.jsx("span",{"aria-label":"Error message",children:e.message}),jsxRuntime.jsx("button",{type:"button",onClick:r,children:"Try again"})]}),children:jsxRuntime.jsx(ComponentWrapperPreview.default,{...t,children:t?.childrens?.length?jsxRuntime.jsx(n,{builderProps:{uid:e,builderData:t},styles:t.styles,setting:t.settings,...r,children:t.childrens.map(e=>jsxRuntime.jsx(RenderPreviewMemo,{...r,uid:e},e))}):jsxRuntime.jsx(n,{builderProps:{uid:e,builderData:t},styles:t.styles,setting:t.settings,...r})})},t.uid):null},RenderPreviewMemo=react.memo(RenderPreview);RenderPreviewMemo.displayName="RenderPreviewMemo",exports.default=RenderPreviewMemo;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactErrorBoundary = require('react-error-boundary');
+var BuilderComponent = require('../contexts/BuilderComponent.js');
+var BuilderPreviewContext = require('../contexts/BuilderPreviewContext.js');
+var ComponentWrapperPreview = require('./ComponentWrapperPreview.js');
+var RenderSection = require('./RenderSection.js');
+
+const RenderPreview = ({ uid, ...passProps })=>{
+    const item = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.getItem(uid));
+    const Component = BuilderComponent.useBuilderComponent(item?.tag);
+    if (!item) return null;
+    if (item?.type === 'section') {
+        return /*#__PURE__*/ jsxRuntime.jsx(RenderSection.default, {
+            sectionId: item.uid
+        });
+    } else {
+        return /*#__PURE__*/ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, {
+            fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxRuntime.jsxs(ComponentWrapperPreview.default, {
+                    ...item,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("span", {
+                            "aria-label": "Error message",
+                            children: error.message
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            type: "button",
+                            onClick: resetErrorBoundary,
+                            children: "Try again"
+                        })
+                    ]
+                }),
+            children: /*#__PURE__*/ jsxRuntime.jsx(ComponentWrapperPreview.default, {
+                ...item,
+                children: item?.childrens?.length ? /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps,
+                    children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderPreviewMemo, {
+                            "bundle-item": passProps?.['bundle-item'],
+                            uid: id
+                        }, id))
+                }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps
+                })
+            })
+        }, item.uid);
+    }
+};
+const RenderPreviewMemo = /*#__PURE__*/ react.memo(RenderPreview);
+RenderPreviewMemo.displayName = 'RenderPreviewMemo';
+
+exports.default = RenderPreviewMemo;

package/dist/cjs/components/RenderSection.js

@@ -1 +1,23 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),BuilderContext=require("../contexts/BuilderContext.js"),SectionContext=require("../contexts/SectionContext.js"),RenderBlock=require("./RenderBlock.js");const RenderSection=({sectionId:e})=>{let t=SectionContext.useSection(e);return t?jsxRuntime.jsx(BuilderContext.BuilderProvider,{state:t,children:jsxRuntime.jsx(RenderBlock.default,{uid:e})},e):null},RenderSectionMemo=react.memo(RenderSection);exports.default=RenderSectionMemo;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var BuilderContext = require('../contexts/BuilderContext.js');
+var SectionContext = require('../contexts/SectionContext.js');
+var RenderBlock = require('./RenderBlock.js');
+
+const RenderSection = ({ sectionId })=>{
+    const state = SectionContext.useSection(sectionId);
+    if (!state) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(BuilderContext.BuilderProvider, {
+        state: state,
+        children: /*#__PURE__*/ jsxRuntime.jsx(RenderBlock.default, {
+            uid: sectionId
+        })
+    }, sectionId);
+};
+const RenderSectionMemo = /*#__PURE__*/ react.memo(RenderSection);
+
+exports.default = RenderSectionMemo;