@gem-sdk/core 1.5.0-canary-4fb10428 → 1.5.0

package/dist/cjs/components/ComponentWrapper.js

@@ -5,41 +5,16 @@ 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');
 
-const disableWrap = [
-    'Col',
-    'Row',
-    'Section',
-    'Image',
-    'Text',
-    'Button',
-    'ProductButton',
-    'Cart',
-    'Tabs',
-    'TabItem',
-    'Carousel',
-    'CarouselItem',
-    'ShopPayButton',
-    'AccordionItem',
-    'Video',
-    'Header',
-    'HeroBanner',
-    'Icon',
-    'IconList',
-    'HTMLCode',
-    'IconListHoz',
-    'IconListItem',
-    'CSSCode',
-];
 const ComponentWrapper = ({ children, ...props }) => {
     if (props.type === 'section')
         return null;
     const style = composeAdvanceStyle.composeAdvanceStyle(props.advanced, props.tag);
-    if (disableWrap.includes(props.tag) && react.isValidElement(children)) {
+    if (constant.disableWrap.includes(props.tag) && react.isValidElement(children)) {
         return jsxRuntime.jsx(children.type, { ...children.props, ...{ style } });
     }
     return (jsxRuntime.jsx("div", { style: style, className: `${props.uid}`, children: children }));
 };
 
 exports.default = ComponentWrapper;
-exports.disableWrap = disableWrap;

package/dist/cjs/components/ComponentWrapperPreview.js

@@ -5,7 +5,7 @@ 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 ComponentWrapper = require('./ComponentWrapper.js');
+var constant = require('./constant.js');
 
 const ComponentWrapperPreview = ({ children, ...props }) => {
     if (props.type === 'section') {
@@ -48,7 +48,7 @@ const ComponentWrapperPreview = ({ children, ...props }) => {
         'data-component-tag': props.tag,
         'data-component-label': props.label,
     };
-    if (ComponentWrapper.disableWrap.includes(props.tag) && react.isValidElement(children)) {
+    if (constant.disableWrap.includes(props.tag) && react.isValidElement(children)) {
         return jsxRuntime.jsx(children.type, { ...children.props, ...{ style, builderAttrs } });
     }
     // Render

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

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('swr');
+var render = require('../helpers/render.js');
+var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
+var constant = require('./constant.js');
+
+const Render = ({ uid, builder, components, ...passProps }) => {
+    const item = builder[uid];
+    const Component = components[item?.tag];
+    if (!Component) {
+        console.log('Miss component: ', item);
+        return '';
+    }
+    if (!item)
+        return null;
+    if (item?.type === 'section') {
+        return '';
+    }
+    else {
+        const style = composeAdvanceStyle.composeAdvanceStyle(item.advanced, item.tag);
+        if (constant.disableWrap.includes(item.tag)) {
+            return render.RenderIf(item?.childrens?.length, () => {
+                return Component({
+                    builderProps: { uid, builderData: item },
+                    styles: item.styles,
+                    setting: item.settings,
+                    style,
+                    ...passProps,
+                    children: item.childrens
+                        .map((id) => Render({ uid: id, builder, components }))
+                        .join(''),
+                });
+            }, () => Component({
+                builderProps: { uid, builderData: item },
+                styles: item.styles,
+                setting: item.settings,
+                style,
+                ...passProps,
+            }));
+        }
+        return render.template `<div style="${style}" class="${item.uid}">
+    ${render.RenderIf(item?.childrens?.length, () => Component({
+            builderProps: { uid, builderData: item },
+            styles: item.styles,
+            setting: item.settings,
+            ...passProps,
+            children: item.childrens
+                .map((id) => Render({ uid: id, builder, components }))
+                .join(''),
+        }), () => Component({
+            builderProps: { uid, builderData: item },
+            styles: item.styles,
+            setting: item.settings,
+            ...passProps,
+        }))}
+    </div>`;
+    }
+};
+
+exports.default = Render;

package/dist/cjs/components/constant.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const disableWrap = [
+    'Col',
+    'Row',
+    'Section',
+    'Image',
+    'Text',
+    'Button',
+    'ProductButton',
+    'Cart',
+    'Tabs',
+    'TabItem',
+    'Carousel',
+    'CarouselItem',
+    'ShopPayButton',
+    'AccordionItem',
+    'Video',
+    'Header',
+    'HeroBanner',
+    'Icon',
+    'IconList',
+    'HTMLCode',
+    'IconListHoz',
+    'IconListItem',
+    'CSSCode',
+];
+
+exports.disableWrap = disableWrap;

package/dist/cjs/helpers/render.js

@@ -0,0 +1,62 @@
+'use strict';
+
+const RenderIf = (c, t, f) => (c ? (typeof t === 'string' ? t : t()) : (typeof f === 'string' ? f : f?.()) ?? '');
+const isObject = (obj) => {
+    if (typeof obj === 'object' && !Array.isArray(obj) && obj !== null) {
+        return true;
+    }
+    return false;
+};
+const props = (strings, ...keys) => {
+    const props = keys[0];
+    const propsArr = [];
+    for (const attr in props) {
+        if (Object.hasOwnProperty.call(props, attr)) {
+            const val = props[attr];
+            if (val) {
+                propsArr.push(`${attr}="${val}"`);
+            }
+            else {
+                propsArr.push(`${attr}`);
+            }
+        }
+    }
+    return propsArr.join(' ');
+};
+const styles = (strings, ...keys) => {
+    const styles = keys[0];
+    const styleArr = [];
+    for (const attr in styles) {
+        if (Object.hasOwnProperty.call(styles, attr)) {
+            const val = styles[attr];
+            if (val !== undefined)
+                styleArr.push(`${attr}:${val}`);
+        }
+    }
+    return styleArr.join(';');
+};
+const template = (strings, ...keys) => {
+    let str = '';
+    strings.forEach((item, index) => {
+        str += item;
+        if (keys[index] !== undefined) {
+            if (isObject(keys[index])) {
+                if (/style=["|']/.test(item)) {
+                    str += styles `${keys[index]}`;
+                }
+                else {
+                    str += props `${keys[index]}`;
+                }
+            }
+            else {
+                str += keys[index];
+            }
+        }
+    });
+    return str;
+};
+
+exports.RenderIf = RenderIf;
+exports.props = props;
+exports.styles = styles;
+exports.template = template;

package/dist/cjs/index.js

@@ -3,6 +3,7 @@
 var AddOn = require('./components/AddOn.js');
 var Render = require('./components/Render.js');
 var RenderPreview = require('./components/RenderPreview.js');
+var Render_liquid = require('./components/Render.liquid.js');
 var AddonContext = require('./contexts/AddonContext.js');
 var BuilderComponent = require('./contexts/BuilderComponent.js');
 var BuilderContext = require('./contexts/BuilderContext.js');
@@ -47,6 +48,7 @@ var product = require('./helpers/product.js');
 var fpixel = require('./helpers/tracking/fpixel.js');
 var gtag = require('./helpers/tracking/gtag.js');
 var tiktokpixel = require('./helpers/tracking/tiktokpixel.js');
+var render = require('./helpers/render.js');
 var useAddToCart = require('./hooks/cart/use-add-to-cart.js');
 var useCartData = require('./hooks/cart/use-cart-data.js');
 var useCartDiscountCodesUpdate = require('./hooks/cart/use-cart-discount-codes-update.js');
@@ -85,6 +87,7 @@ var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
 exports.AddOn = AddOn.default;
 exports.Render = Render.default;
 exports.RenderPreview = RenderPreview.default;
+exports.RenderLiquid = Render_liquid.default;
 exports.AddonProvider = AddonContext.AddonProvider;
 exports.useAddon = AddonContext.useAddon;
 exports.useAddons = AddonContext.useAddons;
@@ -168,6 +171,10 @@ exports.parseSelectedOption = product.parseSelectedOption;
 exports.fpixel = fpixel;
 exports.gtag = gtag;
 exports.tiktokpixel = tiktokpixel;
+exports.RenderIf = render.RenderIf;
+exports.props = render.props;
+exports.styles = render.styles;
+exports.template = render.template;
 exports.useAddToCart = useAddToCart.useAddToCart;
 exports.useCartData = useCartData.useCartData;
 exports.useCartDiscountCodesUpdate = useCartDiscountCodesUpdate.useCartDiscountCodesUpdate;

package/dist/esm/components/ComponentWrapper.js

@@ -1,32 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
+import { disableWrap } from './constant.js';
 
-const disableWrap = [
-    'Col',
-    'Row',
-    'Section',
-    'Image',
-    'Text',
-    'Button',
-    'ProductButton',
-    'Cart',
-    'Tabs',
-    'TabItem',
-    'Carousel',
-    'CarouselItem',
-    'ShopPayButton',
-    'AccordionItem',
-    'Video',
-    'Header',
-    'HeroBanner',
-    'Icon',
-    'IconList',
-    'HTMLCode',
-    'IconListHoz',
-    'IconListItem',
-    'CSSCode',
-];
 const ComponentWrapper = ({ children, ...props }) => {
     if (props.type === 'section')
         return null;
@@ -37,4 +13,4 @@ const ComponentWrapper = ({ children, ...props }) => {
     return (jsx("div", { style: style, className: `${props.uid}`, children: children }));
 };
 
-export { ComponentWrapper as default, disableWrap };
+export { ComponentWrapper as default };

package/dist/esm/components/ComponentWrapperPreview.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { isValidElement } from 'react';
 import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
-import { disableWrap } from './ComponentWrapper.js';
+import { disableWrap } from './constant.js';
 
 const ComponentWrapperPreview = ({ children, ...props }) => {
     if (props.type === 'section') {

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

@@ -0,0 +1,60 @@
+import 'react';
+import 'swr';
+import { RenderIf, template } from '../helpers/render.js';
+import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
+import { disableWrap } from './constant.js';
+
+const Render = ({ uid, builder, components, ...passProps }) => {
+    const item = builder[uid];
+    const Component = components[item?.tag];
+    if (!Component) {
+        console.log('Miss component: ', item);
+        return '';
+    }
+    if (!item)
+        return null;
+    if (item?.type === 'section') {
+        return '';
+    }
+    else {
+        const style = composeAdvanceStyle(item.advanced, item.tag);
+        if (disableWrap.includes(item.tag)) {
+            return RenderIf(item?.childrens?.length, () => {
+                return Component({
+                    builderProps: { uid, builderData: item },
+                    styles: item.styles,
+                    setting: item.settings,
+                    style,
+                    ...passProps,
+                    children: item.childrens
+                        .map((id) => Render({ uid: id, builder, components }))
+                        .join(''),
+                });
+            }, () => Component({
+                builderProps: { uid, builderData: item },
+                styles: item.styles,
+                setting: item.settings,
+                style,
+                ...passProps,
+            }));
+        }
+        return template `<div style="${style}" class="${item.uid}">
+    ${RenderIf(item?.childrens?.length, () => Component({
+            builderProps: { uid, builderData: item },
+            styles: item.styles,
+            setting: item.settings,
+            ...passProps,
+            children: item.childrens
+                .map((id) => Render({ uid: id, builder, components }))
+                .join(''),
+        }), () => Component({
+            builderProps: { uid, builderData: item },
+            styles: item.styles,
+            setting: item.settings,
+            ...passProps,
+        }))}
+    </div>`;
+    }
+};
+
+export { Render as default };

package/dist/esm/components/constant.js

@@ -0,0 +1,27 @@
+const disableWrap = [
+    'Col',
+    'Row',
+    'Section',
+    'Image',
+    'Text',
+    'Button',
+    'ProductButton',
+    'Cart',
+    'Tabs',
+    'TabItem',
+    'Carousel',
+    'CarouselItem',
+    'ShopPayButton',
+    'AccordionItem',
+    'Video',
+    'Header',
+    'HeroBanner',
+    'Icon',
+    'IconList',
+    'HTMLCode',
+    'IconListHoz',
+    'IconListItem',
+    'CSSCode',
+];
+
+export { disableWrap };

package/dist/esm/helpers/render.js

@@ -0,0 +1,57 @@
+const RenderIf = (c, t, f) => (c ? (typeof t === 'string' ? t : t()) : (typeof f === 'string' ? f : f?.()) ?? '');
+const isObject = (obj) => {
+    if (typeof obj === 'object' && !Array.isArray(obj) && obj !== null) {
+        return true;
+    }
+    return false;
+};
+const props = (strings, ...keys) => {
+    const props = keys[0];
+    const propsArr = [];
+    for (const attr in props) {
+        if (Object.hasOwnProperty.call(props, attr)) {
+            const val = props[attr];
+            if (val) {
+                propsArr.push(`${attr}="${val}"`);
+            }
+            else {
+                propsArr.push(`${attr}`);
+            }
+        }
+    }
+    return propsArr.join(' ');
+};
+const styles = (strings, ...keys) => {
+    const styles = keys[0];
+    const styleArr = [];
+    for (const attr in styles) {
+        if (Object.hasOwnProperty.call(styles, attr)) {
+            const val = styles[attr];
+            if (val !== undefined)
+                styleArr.push(`${attr}:${val}`);
+        }
+    }
+    return styleArr.join(';');
+};
+const template = (strings, ...keys) => {
+    let str = '';
+    strings.forEach((item, index) => {
+        str += item;
+        if (keys[index] !== undefined) {
+            if (isObject(keys[index])) {
+                if (/style=["|']/.test(item)) {
+                    str += styles `${keys[index]}`;
+                }
+                else {
+                    str += props `${keys[index]}`;
+                }
+            }
+            else {
+                str += keys[index];
+            }
+        }
+    });
+    return str;
+};
+
+export { RenderIf, props, styles, template };

package/dist/esm/index.js

@@ -1,6 +1,7 @@
 export { default as AddOn } from './components/AddOn.js';
 export { default as Render } from './components/Render.js';
 export { default as RenderPreview } from './components/RenderPreview.js';
+export { default as RenderLiquid } from './components/Render.liquid.js';
 export { AddonProvider, useAddon, useAddons } from './contexts/AddonContext.js';
 export { BuilderComponentProvider, useBuilderComponent } from './contexts/BuilderComponent.js';
 export { BuilderProvider, useBuilderStore } from './contexts/BuilderContext.js';
@@ -48,6 +49,7 @@ import * as gtag from './helpers/tracking/gtag.js';
 export { gtag };
 import * as tiktokpixel from './helpers/tracking/tiktokpixel.js';
 export { tiktokpixel };
+export { RenderIf, props, styles, template } from './helpers/render.js';
 export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
 export { useCartData } from './hooks/cart/use-cart-data.js';
 export { useCartDiscountCodesUpdate } from './hooks/cart/use-cart-discount-codes-update.js';