@gem-sdk/core 1.31.0 → 1.31.7

package/dist/cjs/components/ComponentWrapper.js

@@ -7,32 +7,25 @@ var react = require('react');
 var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
 var constant = require('./constant.js');
 var RenderCustomCode = require('./RenderCustomCode.js');
-var AnimationWrapper = require('./animation/AnimationWrapper.js');
 
 const ComponentWrapper = ({ children, ...props })=>{
     if (props.type === 'section') return null;
     const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
     const advanced = props.advanced;
-    const { animation } = advanced ?? {};
-    const enableAnimation = animation?.desktop?.enabled || animation?.tablet?.enabled || animation?.mobile?.enabled;
-    let dynamicChildren = /*#__PURE__*/ jsxRuntime.jsx("div", {
-        style: style,
-        className: `${props.uid} ${advanced?.cssClass}`,
-        children: children
-    });
     if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
-        dynamicChildren = /*#__PURE__*/ jsxRuntime.jsx(children.type, {
-            className: advanced?.cssClass,
-            ...children.props,
-            style,
-            advanced
-        });
-    }
-    if (enableAnimation) {
-        dynamicChildren = /*#__PURE__*/ jsxRuntime.jsx(AnimationWrapper.default, {
-            children: dynamicChildren,
-            settings: animation,
-            tag: props.tag
+        return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
+                    uid: props.uid,
+                    advanced: advanced
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(children.type, {
+                    className: advanced?.cssClass,
+                    ...children.props,
+                    style,
+                    advanced
+                })
+            ]
         });
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -41,7 +34,11 @@ const ComponentWrapper = ({ children, ...props })=>{
                 uid: props.uid,
                 advanced: advanced
             }),
-            dynamicChildren
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                style: style,
+                className: `${props.uid} ${advanced?.cssClass}`,
+                children: children
+            })
         ]
     });
 };

package/dist/cjs/components/Render.js

@@ -14,47 +14,50 @@ 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
-    });
-    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
+    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);
+        }, item.uid);
+    }
 };
 const RenderMemo = /*#__PURE__*/ react.memo(Render);
 RenderMemo.displayName = 'RenderMemo';

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

@@ -225,8 +225,7 @@ const appendAnimation = (props, liquid)=>{
         mobile: getInitOpacity('mobile')
     };
     const inheritParentStyle = {
-        all: tag === 'Section' ? '' : 'inherit',
-        position: 'static'
+        all: tag === 'Section' ? '' : 'inherit'
     };
     return render.template`
   ${render.RenderIf(convert.isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${convert.baseAssetURL}/assets/gp-animation.js" defer="defer"></script>`)}

package/dist/esm/components/ComponentWrapper.js

@@ -3,32 +3,25 @@ import { isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
 import { disableWrap } from './constant.js';
 import RenderCustomCode from './RenderCustomCode.js';
-import AnimationWrapper from './animation/AnimationWrapper.js';
 
 const ComponentWrapper = ({ children, ...props })=>{
     if (props.type === 'section') return null;
     const style = composeAdvanceStyle(props.advanced, props.tag);
     const advanced = props.advanced;
-    const { animation } = advanced ?? {};
-    const enableAnimation = animation?.desktop?.enabled || animation?.tablet?.enabled || animation?.mobile?.enabled;
-    let dynamicChildren = /*#__PURE__*/ jsx("div", {
-        style: style,
-        className: `${props.uid} ${advanced?.cssClass}`,
-        children: children
-    });
     if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
-        dynamicChildren = /*#__PURE__*/ jsx(children.type, {
-            className: advanced?.cssClass,
-            ...children.props,
-            style,
-            advanced
-        });
-    }
-    if (enableAnimation) {
-        dynamicChildren = /*#__PURE__*/ jsx(AnimationWrapper, {
-            children: dynamicChildren,
-            settings: animation,
-            tag: props.tag
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(RenderCustomCode, {
+                    uid: props.uid,
+                    advanced: advanced
+                }),
+                /*#__PURE__*/ jsx(children.type, {
+                    className: advanced?.cssClass,
+                    ...children.props,
+                    style,
+                    advanced
+                })
+            ]
         });
     }
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -37,7 +30,11 @@ const ComponentWrapper = ({ children, ...props })=>{
                 uid: props.uid,
                 advanced: advanced
             }),
-            dynamicChildren
+            /*#__PURE__*/ jsx("div", {
+                style: style,
+                className: `${props.uid} ${advanced?.cssClass}`,
+                children: children
+            })
         ]
     });
 };

package/dist/esm/components/Render.js

@@ -10,47 +10,50 @@ const Render = ({ uid, ...passProps })=>{
     const item = useBuilderStore((s)=>s.getItem(uid));
     const Component = useBuilderComponent(item?.tag);
     if (!item) return null;
-    if (item?.type === 'section') return /*#__PURE__*/ jsx(RenderSectionMemo, {
-        sectionId: item.uid
-    });
-    return /*#__PURE__*/ jsx(ErrorBoundary, {
-        fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxs(Fragment, {
-                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,
-                    builderData: item
-                },
-                styles: item.styles,
-                setting: item.settings,
-                ...passProps,
-                children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderMemo, {
-                        uid: id
-                    }, id))
-            }) : /*#__PURE__*/ jsx(Component, {
-                builderProps: {
-                    uid,
-                    builderData: item
-                },
-                styles: item.styles,
-                setting: item.settings,
-                ...passProps
+    if (item?.type === 'section') {
+        return /*#__PURE__*/ jsx(RenderSectionMemo, {
+            sectionId: item.uid
+        });
+    } else {
+        return /*#__PURE__*/ jsx(ErrorBoundary, {
+            fallbackRender: ({ error, resetErrorBoundary })=>/*#__PURE__*/ jsxs(Fragment, {
+                    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,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps,
+                    children: item.childrens.map((id)=>/*#__PURE__*/ jsx(RenderMemo, {
+                            uid: id
+                        }, id))
+                }) : /*#__PURE__*/ jsx(Component, {
+                    builderProps: {
+                        uid,
+                        builderData: item
+                    },
+                    styles: item.styles,
+                    setting: item.settings,
+                    ...passProps
+                })
             })
-        })
-    }, item.uid);
+        }, item.uid);
+    }
 };
 const RenderMemo = /*#__PURE__*/ memo(Render);
 RenderMemo.displayName = 'RenderMemo';

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

@@ -221,8 +221,7 @@ const appendAnimation = (props, liquid)=>{
         mobile: getInitOpacity('mobile')
     };
     const inheritParentStyle = {
-        all: tag === 'Section' ? '' : 'inherit',
-        position: 'static'
+        all: tag === 'Section' ? '' : 'inherit'
     };
     return template`
   ${RenderIf(isLocalEnv, `<script src="{{ 'gp-animation.js' | asset_url }}" defer="defer"></script>`, `<script src="${baseAssetURL}/assets/gp-animation.js" defer="defer"></script>`)}

package/dist/types/index.d.ts

@@ -155,7 +155,7 @@ type ObjectLayoutValue = {
     keepCol?: boolean;
 };
 type ProductReviewsWidgetType = 'reviews' | 'badge';
-type TrustooWidgetType = 'starRating' | 'reviews';
+type TrustooWidgetType = 'starRatingInList' | 'starRating' | 'reviews';
 type WiserWidgetType = 'related' | 'recommended' | 'alsobought' | 'recentview' | 'newarrivals' | 'featured' | 'topselling' | 'trending' | 'recent_related';
 type InstantJudgeMeReviewsWidgetType = 'single_product_preview_badge' | 'review_widget' | 'reviews_carousel' | 'floating_reviews_tab' | 'all_reviews_widget' | 'verified_reviews_count_badge' | 'medals' | 'media_grid' | 'all_reviews_text';
 type InstantLooxReviewsWidgetType = 'product_reviews_widget' | 'reviews_widget_all_stores' | 'product_star_ratings_widget' | 'carousel_widget';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.31.0",
+  "version": "1.31.7",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",

package/dist/cjs/components/animation/AnimationWrapper.js

@@ -1,50 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var makeStyle = require('../../helpers/make-style.js');
-var react = require('react');
-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('../../helpers/convert.js');
-var useLivePageAnimation = require('../../hooks/animation/useLivePageAnimation.js');
-
-const AnimationWrapper = ({ children, settings, tag })=>{
-    const wrapperRef = react.useRef(null);
-    const getAnimationType = (settings, type)=>{
-        return settings?.triggerConfig?.[type]?.animation ?? 'none';
-    };
-    const getSettingsByDevice = (device)=>{
-        if (device === 'desktop') return settings?.desktop;
-        else if (device === 'tablet') return settings?.tablet ?? settings?.desktop;
-        else if (device === 'mobile') return settings?.mobile ?? settings?.tablet ?? settings?.desktop;
-        return settings?.desktop;
-    };
-    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' };
-    useLivePageAnimation.useLivePageAnimation(wrapperRef, settings, tag);
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        ref: wrapperRef,
-        style: {
-            ...makeStyle.makeStyleResponsive('op', opacityObject)
-        },
-        children: children
-    });
-};
-
-exports.default = AnimationWrapper;

package/dist/cjs/hooks/animation/animations.js

@@ -1,227 +0,0 @@
-'use strict';
-
-// Any logic changes made to this file must also be applied to 
-// packages/web-components/src/helpers/animations.ts, and vice versa.
-const EASING = {
-    ease: 'cubic-bezier(0.46,0.03,0.52,0.96)',
-    'ease-in': 'cubic-bezier(0.55,0.08,0.68,0.53)',
-    'ease-out': 'cubic-bezier(0.46,0.03,0.52,0.96)',
-    linear: 'linear'
-};
-const animations = ()=>{
-    const normalizeOptions = (options)=>{
-        const cloneOptions = JSON.parse(JSON.stringify(options));
-        const numberMember = [
-            'delay',
-            'speed',
-            'scale',
-            'intensity'
-        ];
-        numberMember.forEach((keyName)=>{
-            if (!cloneOptions?.[keyName]) return;
-            if (keyName === 'scale') {
-                if (!cloneOptions?.zoomDirection) throw new TypeError(`zoomDirection not found on zoom preset`);
-                const [i1, i2] = cloneOptions?.scale?.in ?? [
-                    1,
-                    1
-                ];
-                const [o1, o2] = cloneOptions?.scale?.out ?? [
-                    1,
-                    1
-                ];
-                cloneOptions[keyName] = {
-                    in: [
-                        Number(i1) / 100,
-                        Number(i2) / 100
-                    ],
-                    out: [
-                        Number(o1) / 100,
-                        Number(o2) / 100
-                    ]
-                };
-                return;
-            }
-            const num = Number(cloneOptions?.[keyName]);
-            if (keyName === 'delay') cloneOptions[keyName] = num * 1000;
-            else cloneOptions[keyName] = num;
-            if (!isFinite(num)) throw new TypeError(`${keyName} must be a number`);
-        });
-        return cloneOptions;
-    };
-    const slide = (target, options)=>{
-        const normalizedOptions = normalizeOptions(options);
-        const { direction, distance } = normalizedOptions;
-        const coordinate = [
-            'left',
-            'right'
-        ].includes(direction ?? '') ? 'X' : 'Y';
-        const isNeg = [
-            'left',
-            'down'
-        ].includes(direction ?? '') ? '-' : '';
-        const preset = [
-            {
-                opacity: 0,
-                transform: `translate${coordinate}(${isNeg}${distance ?? 50}%)`
-            },
-            {
-                opacity: 1,
-                transform: `translate${coordinate}(0)`
-            }
-        ];
-        return generateAnimationInstance(target, preset, {
-            ...generateOptions(normalizedOptions, 500),
-            fill: 'forwards'
-        });
-    };
-    const fade = (target, options)=>{
-        const normalizedOptions = normalizeOptions(options);
-        const preset = [
-            {
-                opacity: 0
-            },
-            {
-                opacity: 1
-            }
-        ];
-        return generateAnimationInstance(target, preset, {
-            ...generateOptions(normalizedOptions, 500)
-        });
-    };
-    const generateOptions = (options, defaultDuration)=>{
-        const convertSpeedToDuration = (speed)=>{
-            if (!speed) return defaultDuration;
-            return 1.5 / speed * 1000;
-        };
-        const { loop, delay, speed, easing } = options ?? {};
-        const duration = convertSpeedToDuration(speed);
-        const actualDelay = delay ?? 0;
-        const actualDuration = loop ? duration + actualDelay : duration;
-        return {
-            iterations: loop ? Infinity : 1,
-            duration: actualDuration,
-            delay: actualDelay,
-            easing: EASING[easing ?? 'linear']
-        };
-    };
-    const zoom = (target, options)=>{
-        const normalizedOptions = normalizeOptions(options);
-        const { scale, zoomDirection, isFade } = normalizedOptions;
-        const [i1, i2] = scale.in;
-        const [o1, o2] = scale.out;
-        const zoomInPreset = [
-            {
-                transform: `scale(${i1}, ${i1})`,
-                opacity: isFade ? 0 : 1
-            },
-            {
-                transform: `scale(${i2 ?? 1.2}, ${i2 ?? 1.2})`,
-                opacity: 1
-            }
-        ];
-        const zoomOutPreset = [
-            {
-                transform: `scale(${o1}, ${o1})`,
-                opacity: isFade ? 0 : 1
-            },
-            {
-                transform: `scale(${o2 ?? 0.8}, ${o2 ?? 0.8})`,
-                opacity: 1
-            }
-        ];
-        const zoomPreset = zoomDirection === 'in' ? zoomInPreset : zoomOutPreset;
-        return generateAnimationInstance(target, zoomPreset, {
-            ...generateOptions(normalizedOptions, 700),
-            fill: 'forwards'
-        });
-    };
-    const generateLoopDelayEffect = (keyframes, delay, duration)=>{
-        if (!delay) return keyframes;
-        const offset = delay / duration;
-        const keyframe = [
-            ...keyframes
-        ].pop();
-        return [
-            ...keyframes,
-            {
-                ...keyframe,
-                offset: 1 - offset
-            }
-        ];
-    };
-    const shake = (target, options)=>{
-        const normalizedOptions = normalizeOptions(options);
-        const { intensity } = normalizedOptions ?? {};
-        const zeroIntensity = [
-            {
-                transform: 'translate3d(0, 0, 0)',
-                opacity: 1
-            }
-        ];
-        const unitIntensity = [
-            {
-                transform: 'translate3d(4px, 0, 0)',
-                opacity: 1
-            },
-            {
-                transform: 'translate3d(-4px, 0, 0)',
-                opacity: 1
-            },
-            {
-                transform: 'translate3d(4px, 0, 0)',
-                opacity: 1
-            }
-        ];
-        let keyframes = [];
-        Array.from(Array(intensity ?? 1).keys()).forEach(()=>{
-            keyframes = [
-                ...keyframes,
-                ...unitIntensity
-            ];
-        });
-        const shakePreset = [
-            {
-                transform: 'translate3d(-1px, 0, 0)',
-                opacity: 1
-            },
-            {
-                transform: 'translate3d(2px, 0, 0)',
-                opacity: 1
-            },
-            {
-                transform: 'translate3d(-4px, 0, 0)',
-                opacity: 1
-            },
-            ...keyframes,
-            {
-                transform: 'translate3d(-4px, 0, 0)',
-                opacity: 1
-            },
-            {
-                transform: 'translate3d(2px, 0, 0)',
-                opacity: 1
-            },
-            {
-                transform: 'translate3d(-1px, 0, 0)',
-                opacity: 1
-            }
-        ];
-        return generateAnimationInstance(target, intensity ? shakePreset : zeroIntensity, {
-            ...generateOptions(normalizedOptions ?? {}, 820)
-        });
-    };
-    const generateAnimationInstance = (target, effectPreset, options)=>{
-        const effect = new KeyframeEffect(target, options.iterations && options.iterations === 1 ? effectPreset : generateLoopDelayEffect(effectPreset, options?.delay ?? 0, (options?.duration) ?? 0), {
-            ...options
-        });
-        return new Animation(effect, document.timeline);
-    };
-    return {
-        zoom,
-        shake,
-        fade,
-        slide
-    };
-};
-
-exports.animations = animations;