@gem-sdk/core 1.38.0 → 2.0.0-dev.832

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -1,136 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
-var constant = require('./constant.js');
-var RenderCustomCode = require('./RenderCustomCode.js');
-var ComponentToolbarPreview = require('./ComponentToolbarPreview.js');
-var useApplyAnimation = require('../hooks/animation/useApplyAnimation.js');
-
-const ComponentWrapperPreview = ({ children, ...props })=>{
-    react.useEffect(()=>{
-        const event = new CustomEvent('editor:component:render', {
-            bubbles: true,
-            detail: {
-                componentUid: props.uid
-            }
-        });
-        window.dispatchEvent(event);
-    }, [
-        props.uid
-    ]);
-    useApplyAnimation.default({
-        props
-    });
-    if (props.type === 'section') {
-        return null;
-    }
-    const customProps = {};
-    if (props.tag === 'Section' && props.isThemeSection) {
-        customProps['data-theme-section'] = true;
-    }
-    // Build editor configs
-    if (props.editorConfigs) {
-        const editorConfigs = props.editorConfigs;
-        if (editorConfigs.placeholder?.notAppendBeforeAfter) {
-            customProps['data-placeholder-not-append-before-after'] = true;
-        }
-        if (editorConfigs.toolbar?.parent) {
-            customProps['data-toolbar-parent'] = true;
-        }
-        if (editorConfigs.component?.noDelete) {
-            customProps['data-component-no-delete'] = true;
-        }
-        if (editorConfigs.component?.noDuplicate) {
-            customProps['data-component-no-duplicate'] = true;
-        }
-        if (editorConfigs.component?.noDragDrop) {
-            customProps['data-component-no-drag-drop'] = true;
-        }
-        if (editorConfigs.component?.noSetting) {
-            customProps['data-component-no-setting'] = true;
-        }
-        if (editorConfigs.component?.isThirdParty) {
-            customProps['data-component-is-third-party'] = true;
-        }
-        if (editorConfigs.toolbar?.hide) {
-            customProps['data-toolbar-hide'] = true;
-        }
-        if (editorConfigs.slots?.children) {
-            customProps['data-slots-children'] = true;
-        }
-        if (!editorConfigs.toolbar?.hide) {
-            customProps['data-toolbar-wrap'] = true;
-        }
-    }
-    // Show toolbar wrapper
-    if (!props?.editorConfigs?.toolbar?.hide) {
-        customProps['data-toolbar-wrap'] = true;
-    }
-    const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
-    const advanced = props.advanced;
-    const builderAttrs = {
-        ...customProps,
-        'data-uid': props.uid,
-        'data-component-type': 'component',
-        'data-component-tag': props.tag,
-        'data-component-label': props.label
-    };
-    if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
-        return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
-                    uid: props.uid,
-                    advanced: advanced
-                }),
-                /*#__PURE__*/ jsxRuntime.jsxs(children.type, {
-                    className: advanced?.cssClass,
-                    ...children.props,
-                    style,
-                    builderAttrs,
-                    advanced,
-                    children: [
-                        children.props['children'],
-                        /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
-                            ...props
-                        })
-                    ]
-                })
-            ]
-        });
-    }
-    // Render
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
-                uid: props.uid,
-                advanced: advanced
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                style: !constant.excludeApplyStyle.includes(props.tag) ? style : {
-                    '--mb': style?.['--mb'],
-                    '--mb-tablet': style?.['--mb-tablet'],
-                    '--mb-mobile': style?.['--mb-mobile']
-                },
-                className: `${props.uid} ${props.advanced?.cssClass ? props.advanced?.cssClass : ''}`,
-                ...builderAttrs,
-                children: [
-                    !constant.excludeApplyStyle.includes(props.tag) && children,
-                    /*#__PURE__*/ react.isValidElement(children) && constant.excludeApplyStyle.includes(props.tag) && /*#__PURE__*/ jsxRuntime.jsx(children.type, {
-                        ...children.props,
-                        style,
-                        advanced
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(ComponentToolbarPreview.ComponentToolbarPreview, {
-                        ...props
-                    })
-                ]
-            })
-        ]
-    });
-};
-
-exports.default = ComponentWrapperPreview;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js"),RenderCustomCode=require("./RenderCustomCode.js"),ComponentToolbarPreview=require("./ComponentToolbarPreview.js"),useApplyAnimation=require("../hooks/animation/useApplyAnimation.js");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("../helpers/convert.js");const ComponentWrapperPreview=({children:e,...t})=>{react.useEffect(()=>{let e=new CustomEvent("editor:component:render",{bubbles:!0,detail:{componentUid:t.uid}});window.dispatchEvent(e)},[t.uid]),useApplyAnimation.default({props:t});let o=shop.usePageType();if("section"===t.type)return null;let a={};if("Section"===t.tag&&t.isThemeSection&&(a["data-theme-section"]=!0),t.editorConfigs){let e=t.editorConfigs;e.placeholder?.notAppendBeforeAfter&&(a["data-placeholder-not-append-before-after"]=!0),e.placeholder?.notAppendLeftRight&&(a["data-placeholder-not-append-left-right"]=!0),e.toolbar?.parent&&(a["data-toolbar-parent"]=!0),e.component?.noDelete&&(a["data-component-no-delete"]=!0),e.component?.noDuplicate&&(a["data-component-no-duplicate"]=!0),e.component?.noDragDrop&&(a["data-component-no-drag-drop"]=!0),e.component?.noSetting&&(a["data-component-no-setting"]=!0),e.component?.isThirdParty&&(a["data-component-is-third-party"]=!0),e.toolbar?.hide&&(a["data-toolbar-hide"]=!0),e.slots?.children&&(a["data-slots-children"]=!0),e.toolbar?.hide||(a["data-toolbar-wrap"]=!0)}t?.editorConfigs?.toolbar?.hide||(a["data-toolbar-wrap"]=!0);let n=e=>"GP_FUNNEL_PAGE"===o&&["ProductList","Header"].includes(e),r=composeAdvanceStyle.composeAdvanceStyle(t.advanced,t.tag,o),s=t.advanced,d={...a,"data-uid":t.uid,"data-component-type":"component","data-component-tag":t.tag,"data-component-label":t.label,"data-not-droppable":n(t.tag)};return constant.disableWrap.includes(t.tag)&&react.isValidElement(e)?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(RenderCustomCode.default,{uid:t.uid,advanced:s}),jsxRuntime.jsxs(e.type,{className:s?.cssClass,...e.props,style:r,builderAttrs:d,advanced:s,children:[e.props.children,jsxRuntime.jsx(ComponentToolbarPreview.default,{...t})]})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(RenderCustomCode.default,{uid:t.uid,advanced:s}),jsxRuntime.jsxs("div",{style:constant.excludeApplyStyle.includes(t.tag)?{"--mb":r?.["--mb"],"--mb-tablet":r?.["--mb-tablet"],"--mb-mobile":r?.["--mb-mobile"]}:r,className:`${t.uid} ${t.advanced?.cssClass?t.advanced?.cssClass:""}`,...d,children:[!constant.excludeApplyStyle.includes(t.tag)&&e,react.isValidElement(e)&&constant.excludeApplyStyle.includes(t.tag)&&jsxRuntime.jsx(e.type,{...e.props,style:r,advanced:s}),jsxRuntime.jsx(ComponentToolbarPreview.default,{...t})]})]})};var ComponentWrapperPreview$1=react.memo(ComponentWrapperPreview);exports.default=ComponentWrapperPreview$1;

package/dist/cjs/components/Empty.js

@@ -1,7 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const Empty = ()=>null;
-
-exports.default = Empty;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const Empty=()=>null;exports.default=()=>null;

package/dist/cjs/components/Render.js

@@ -1,65 +1 @@
-'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');
-var RenderSection = require('./RenderSection.js');
-
-const Render = ({ uid, ...passProps })=>{
-    const item = BuilderContext.useBuilderStore((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(jsxRuntime.Fragment, {
-                    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,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    ...passProps,
-                    children: item.childrens.map((id)=>/*#__PURE__*/ jsxRuntime.jsx(RenderMemo, {
-                            uid: id
-                        }, id))
-                }) : /*#__PURE__*/ jsxRuntime.jsx(Component, {
-                    builderProps: {
-                        uid,
-                        builderData: item
-                    },
-                    styles: item.styles,
-                    setting: item.settings,
-                    ...passProps
-                })
-            })
-        }, item.uid);
-    }
-};
-const RenderMemo = /*#__PURE__*/ react.memo(Render);
-RenderMemo.displayName = 'RenderMemo';
-
-exports.default = RenderMemo;
+"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"),RenderSection=require("./RenderSection.js");const Render=({uid:e,...r})=>{let t=BuilderContext.useBuilderStore(r=>r.getItem(e)),n=BuilderComponent.useBuilderComponent(t?.tag),s=BuilderContext.useBuilderStore(e=>e.getIsPostPurchase()),i=react.useMemo(()=>s?"POST_PURCHASE":void 0,[s]);return t?t?.type==="section"?jsxRuntime.jsx(RenderSection.default,{sectionId:t.uid}):jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary,{fallbackRender:({error:e,resetErrorBoundary:r})=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("span",{"aria-label":"Error message",children:e.message}),jsxRuntime.jsx("button",{type:"button",onClick:r,children:"Try again"})]}),children:jsxRuntime.jsx(ComponentWrapper.default,{...t,pageType:i,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(RenderMemo,{uid:e},e))}):jsxRuntime.jsx(n,{builderProps:{uid:e,builderData:t},styles:t.styles,setting:t.settings,...r})})},t.uid):null},RenderMemo=react.memo(Render);RenderMemo.displayName="RenderMemo",exports.default=RenderMemo;

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

@@ -1,297 +1,23 @@
-'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('vanilla-lazyload');
-require('../hooks/useCartUI.js');
-require('react-transition-group');
-require('@gem-sdk/core');
-var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
-var convert = require('../helpers/convert.js');
-var render = require('../helpers/render.js');
-var constant = require('./constant.js');
-
-const componentsRenderWithParentId = [
-    'CarouselItem'
-];
-const componentTexts = [
-    'Text',
-    'Heading'
-];
-const componentIconList = [
-    'IconListV2',
-    'IconList'
-];
-const componentUsingAdvanced = [
-    'IconList'
-];
-const Render = ({ uid, builder, components, parentId, extraFiles = {}, pageContext, ...passProps })=>{
-    const item = builder[uid];
-    const Component = components[item?.tag];
-    if (!Component) {
-        console.log('Miss component: ', item);
-        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,
-                    ...passProps,
-                    rawChildren: item.childrens.map((id)=>{
-                        return {
-                            ...builder[id],
-                            uid: id,
-                            builder,
-                            components,
-                            customProps,
-                            pageContext
-                        };
-                    }),
-                    children: !constant.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
-                });
-            });
-        } else {
-            liquid = render.template`<div 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,
-                    ...passProps,
-                    rawChildren: item.childrens.map((id)=>{
-                        return {
-                            ...builder[id],
-                            uid: id,
-                            builder,
-                            components,
-                            customProps,
-                            pageContext
-                        };
-                    }),
-                    children: !constant.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: {
-                        cssClass: item?.advanced?.cssClass
-                    },
-                    pageContext,
-                    isText: componentTexts.includes(item.tag) ? true : null,
-                    style: componentIconList.includes(item.tag) ? style : null,
-                    ...passProps
-                });
-            })}
-      </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`
+"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:i,...d})=>{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:i,...d,rawChildren:a.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:s,pageContext:i})),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:i})))}),()=>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:i,...d})):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:i,...d,rawChildren:a.childrens.map(e=>({...t[e],uid:e,builder:t,components:r,customProps:s,pageContext:i})),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:i})))}),()=>l({builderProps:{uid:e,builderData:a},styles:a.styles,setting:a.settings,advanced:{cssClass:a?.advanced?.cssClass},pageContext:i,isText:!!componentTexts.includes(a.tag)||null,style:componentIconList.includes(a.tag)?o:null,...d}))}
+      </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),i=r?.replaceAll(n,e.uid),d=render.RenderIf(!!t,render.template`
       <style
-        id="${`custom-css-${item?.uid}`}"
-      >${replacedCSS}</style>
-    `);
-    const jsCode = render.RenderIf(!!javascript, render.template`
+        id="${`custom-css-${e?.uid}`}"
+      >${s}</style>
+    `),a=render.RenderIf(!!r,render.template`
       <script
-        id="${`custom-js-${item?.uid}`}"
+        id="${`custom-js-${e?.uid}`}"
       >
         try {
-          ${replacedJS}
+          ${i}
         } catch(err){}
       </script>
-    `);
-    return {
-        cssCode,
-        jsCode
-    };
-};
-const appendAnimation = (props, liquid)=>{
-    const { advanced, tag } = props;
-    const { animation, op: opacity } = 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';
-    if (!enableAnimation) return liquid;
-    const getInitOpacity = (device)=>+!(getSettingsByDevice(device)?.enabled && ![
-            'shake',
-            'none'
-        ].includes(getAnimationType(getSettingsByDevice(device), 'appear')));
-    const opacityObject = {
-        desktop: getInitOpacity('desktop'),
-        tablet: getInitOpacity('tablet'),
-        mobile: getInitOpacity('mobile')
-    };
-    const inheritParentStyle = {
-        all: tag === 'Section' ? '' : 'inherit',
-        position: 'static',
-        transform: 'unset'
-    };
-    return render.template`
+    `);return{cssCode:d,jsCode:a}},appendAnimation=(e,t)=>{let{advanced:r,tag:n}=e,{animation:s,op:i}=r??{},d=(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=d(a("desktop"),"appear"),o=d(a("desktop"),"hover"),c=d(a("tablet"),"appear"),p=d(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(d(a(e),"appear"))),g={desktop:m("desktop"),tablet:m("tablet"),mobile:m("mobile")},h={all:"Section"===n?"":"inherit",position:"static",transform:"unset"};return render.template`
   <gp-animation
-    gp-data='${JSON.stringify({
-        config: animation,
-        tag,
-        opacity
-    })}'
-    style="${{
-        ...inheritParentStyle
-    }}"
+    gp-data='${JSON.stringify({config:s,tag:n,opacity:i})}'
+    style="${{...h}}"
   >
-    <div style="${{
-        ...makeStyle.makeStyleResponsive('op', opacityObject)
-    }}">${liquid}</div>
+    <div style="${{...makeStyle.makeStyleResponsive("op",g)}}">${t}</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>`)}
-  `;
-};
-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;
+  ${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 i=r[s];if(i){let r=n+i,d=new TextEncoder,a=r?d.encode(r).length:0;if(Math.ceil(a/1024)>=180){let r=`gp-section-snippet-${e+s}`;t.extraFiles[r]=i,n+=`{% render '${r}', product: product, variant: variant, product_form_id: product_form_id, productSelectedVariant: productSelectedVariant, form: form  %}`}else n+=i}}return n};exports.RenderChildren=RenderChildren,exports.WrapRenderChildren=WrapRenderChildren,exports.default=Render;

package/dist/cjs/components/RenderBlock.js

@@ -1,54 +1 @@
-'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;
+"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;

package/dist/cjs/components/RenderCustomCode.js

@@ -1,58 +1,5 @@
-'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('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('../helpers/convert.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 `
+"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(()=>`
       try {
-        ${replacedJS}
+        ${o}
       } catch(err){}
-    `;
-    }, [
-        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;
+    `,[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;