@gem-sdk/core 1.12.0-next.10 → 1.12.0-next.11

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

@@ -16,20 +16,35 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
-const Render = ({ uid , builder , components , parentId , ...passProps })=>{
+const Render = ({ uid , builder , components , parentId , extraFiles ={} , ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
         console.log('Miss component: ', item);
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
+    }
+    if (!item) {
+        return {
+            liquid: '',
+            extraFiles
+        };
     }
-    if (!item) return null;
     if (item?.type === 'section') {
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
     } else {
+        const customProps = {
+            extraFiles: {}
+        };
         const style = composeAdvanceStyle.composeAdvanceStyle(item.advanced, item.tag);
+        let liquid = '';
         if (constant.disableWrap.includes(item.tag)) {
-            return render.RenderIf(item?.childrens?.length, ()=>{
+            liquid = render.RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
                         uid,
@@ -46,17 +61,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                             ...builder[id],
                             uid: id,
                             builder,
-                            components
+                            components,
+                            customProps
                         };
                     }),
-                    children: item.childrens.map((id)=>Render({
+                    children: item.childrens.map((id)=>RenderChildren({
                             uid: id,
                             builder,
                             components,
-                            parentId: uid
+                            customProps
                         })).join('')
                 });
-            }, ()=>Component({
+            }, ()=>{
+                return Component({
                     builderProps: {
                         uid,
                         builderData: item
@@ -68,10 +85,12 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                     isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     ...passProps
-                }));
+                });
+            });
         }
-        return render.template`<div style="${style}" class="${item.uid}">
-    ${render.RenderIf(item?.childrens?.length, ()=>Component({
+        liquid = render.template`<div style="${style}" class="${item.uid}">
+    ${render.RenderIf(item?.childrens?.length, ()=>{
+            return Component({
                 builderProps: {
                     uid,
                     builderData: item
@@ -84,15 +103,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                         ...builder[id],
                         uid: id,
                         builder,
-                        components
+                        components,
+                        customProps
                     };
                 }),
-                children: item.childrens.map((id)=>Render({
+                children: item.childrens.map((id)=>RenderChildren({
                         uid: id,
                         builder,
-                        components
+                        components,
+                        customProps
                     })).join('')
-            }), ()=>Component({
+            });
+        }, ()=>{
+            return Component({
                 builderProps: {
                     uid,
                     builderData: item
@@ -101,9 +124,34 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                 setting: item.settings,
                 isText: componentTexts.includes(item.tag) ? true : null,
                 ...passProps
-            }))}
+            });
+        })}
     </div>`;
+        return {
+            liquid,
+            extraFiles: customProps.extraFiles
+        };
+    }
+};
+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)) {
+            const value = data.extraFiles[key];
+            props.customProps.extraFiles[key] = value;
+        }
+    }
+    // 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  %}`;
     }
+    return data.liquid;
 };
 
+exports.RenderChildren = RenderChildren;
 exports.default = Render;

package/dist/cjs/index.js

@@ -93,6 +93,7 @@ var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
 exports.AddOn = AddOn.default;
 exports.Render = Render.default;
 exports.RenderPreview = RenderPreview.default;
+exports.RenderChildren = Render_liquid.RenderChildren;
 exports.RenderLiquid = Render_liquid.default;
 exports.AddonProvider = AddonContext.AddonProvider;
 exports.useAddon = AddonContext.useAddon;

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

@@ -12,20 +12,35 @@ const componentTexts = [
     'Text',
     'Heading'
 ];
-const Render = ({ uid , builder , components , parentId , ...passProps })=>{
+const Render = ({ uid , builder , components , parentId , extraFiles ={} , ...passProps })=>{
     const item = builder[uid];
     const Component = components[item?.tag];
     if (!Component) {
         console.log('Miss component: ', item);
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
+    }
+    if (!item) {
+        return {
+            liquid: '',
+            extraFiles
+        };
     }
-    if (!item) return null;
     if (item?.type === 'section') {
-        return '';
+        return {
+            liquid: '',
+            extraFiles
+        };
     } else {
+        const customProps = {
+            extraFiles: {}
+        };
         const style = composeAdvanceStyle(item.advanced, item.tag);
+        let liquid = '';
         if (disableWrap.includes(item.tag)) {
-            return RenderIf(item?.childrens?.length, ()=>{
+            liquid = RenderIf(item?.childrens?.length, ()=>{
                 return Component({
                     builderProps: {
                         uid,
@@ -42,17 +57,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                             ...builder[id],
                             uid: id,
                             builder,
-                            components
+                            components,
+                            customProps
                         };
                     }),
-                    children: item.childrens.map((id)=>Render({
+                    children: item.childrens.map((id)=>RenderChildren({
                             uid: id,
                             builder,
                             components,
-                            parentId: uid
+                            customProps
                         })).join('')
                 });
-            }, ()=>Component({
+            }, ()=>{
+                return Component({
                     builderProps: {
                         uid,
                         builderData: item
@@ -64,10 +81,12 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                     isText: componentTexts.includes(item.tag) ? true : null,
                     parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
                     ...passProps
-                }));
+                });
+            });
         }
-        return template`<div style="${style}" class="${item.uid}">
-    ${RenderIf(item?.childrens?.length, ()=>Component({
+        liquid = template`<div style="${style}" class="${item.uid}">
+    ${RenderIf(item?.childrens?.length, ()=>{
+            return Component({
                 builderProps: {
                     uid,
                     builderData: item
@@ -80,15 +99,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                         ...builder[id],
                         uid: id,
                         builder,
-                        components
+                        components,
+                        customProps
                     };
                 }),
-                children: item.childrens.map((id)=>Render({
+                children: item.childrens.map((id)=>RenderChildren({
                         uid: id,
                         builder,
-                        components
+                        components,
+                        customProps
                     })).join('')
-            }), ()=>Component({
+            });
+        }, ()=>{
+            return Component({
                 builderProps: {
                     uid,
                     builderData: item
@@ -97,9 +120,33 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
                 setting: item.settings,
                 isText: componentTexts.includes(item.tag) ? true : null,
                 ...passProps
-            }))}
+            });
+        })}
     </div>`;
+        return {
+            liquid,
+            extraFiles: customProps.extraFiles
+        };
+    }
+};
+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)) {
+            const value = data.extraFiles[key];
+            props.customProps.extraFiles[key] = value;
+        }
+    }
+    // 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  %}`;
     }
+    return data.liquid;
 };
 
-export { Render as default };
+export { RenderChildren, Render as default };

package/dist/esm/index.js

@@ -1,7 +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 { RenderChildren, 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';

package/dist/types/index.d.ts

@@ -25,13 +25,21 @@ type Props$1 = {
 };
 declare const RenderPreviewMemo: React.NamedExoticComponent<Props$1>;
 
+type ExtraFiles = {
+    [fileName: string]: string;
+};
 type Props = {
     uid: string;
     builder: Record<string, any>;
     components: Record<string, any>;
+    extraFiles?: ExtraFiles;
     [key: string]: any;
 };
-declare const Render: ({ uid, builder, components, parentId, ...passProps }: Props) => string | null;
+declare const Render: ({ uid, builder, components, parentId, extraFiles, ...passProps }: Props) => {
+    liquid: string;
+    extraFiles: ExtraFiles;
+};
+declare const RenderChildren: (props: Props) => string;
 
 type AddonContextProps = {
     components: Record<string, React.ComponentType<any>>;
@@ -8021,4 +8029,4 @@ type PublishedThemePageSelectFragment = Pick<PublishedThemePage, 'id' | 'name' |
 
 declare const getProductBySlug: (fetcher: FetchFunc, slug?: string) => Promise<ProductSelectFragment>;
 
-export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, WiserWidgetType, baseAssetURL, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };
+export { AddOn, AddonProvider, AddonProviderProps, AlignItemProp, AlignProp, Background, BaseProps, BasePropsWrap, BlockEntity, BoldSubscriptionsWidgetType, Border, BorderStyle, BuilderComponentProvider, BuilderComponentProviderProps, BuilderEntity, BuilderEntityNested, BuilderPreviewProvider, BuilderPreviewProviderProps, BuilderProvider, BuilderProviderProps, BuilderState, Builtin, CartLineProvider, CartLineProviderProps, CollectionDetailFilterDocument, CollectionDetailFilterQueryResponse, CollectionDetailFilterQueryVariables, CollectionDocument, CollectionProvider, CollectionProviderProps, CollectionQueryResponse, CollectionQueryVariables, CollectionSelectFragment, CollectionsDocument, CollectionsQueryResponse, CollectionsQueryVariables, ColorKey, ColorType$1 as ColorType, ColorValueType, Component, ComponentPreset, ComponentSetting, ContainerProp, ControlProp, ControlUI, CornerRadius, CornerRadiusType, CustomComponentConfig, DeepPartial, ExtractState, FetchCollectionArgs, FetchFunc, FetchProductParams, FlexDirectionProp, FontName, GlobalStyleConfig, GlobalStyleResponsiveConfig, GlobalSwatchesData, GraphQLConnection, GroupPropType, HSLAColorType, HSLColorType, HexColorType, InitComponentType, InstantJudgeMeReviewsWidgetType, InstantKlaviyoWidgetType, InstantLooxReviewsWidgetType, JudgeMeReviewsWidgetType, KlaviyoWidgetType, LooxReviewsWidgetType, ModalProvider, ModalProviderProps, NameDevices, NestedKeys, ObjectDeviceGlobalType, ObjectDevices, ObjectLayoutValue, OptionNormalStyle, OptionSpecialStyle, PageViewUpDocument, PageViewUpMutationResponse, PageViewUpMutationVariables, PickyStoryWidgetType, PreviewPageDocument, PreviewPageQueryResponse, PreviewPageQueryVariables, Primitive, ProductInputAnalytic, ProductListProvider, ProductListProviderProps, ProductProvider, ProductProviderProps, ProductReviewsWidgetType, ProductSelectFragment, ProductsDocument, ProductsQueryResponse, ProductsQueryVariables, PublishedThemePageSelectFragment, PublishedThemePagesDocument, PublishedThemePagesQueryResponse, PublishedThemePagesQueryVariables, RGBAColorType, RGBColorType, RenderMemo as Render, RenderChildren, RenderIf, Render as RenderLiquid, RenderMode, RenderPreviewMemo as RenderPreview, RequiredCursorEdge, ResponsiveStateProp, RivyoWidgetType, RoundedSize, RyviuWidgetType, SectionData, SectionEntity, SectionProvider, SectionProviderProps, ShadowProps, ShadowStyle, ShadowStyleApplied, ShadowType, ShopProvider, ShopProviderProps, shop as ShopType, SizeProps, SizeSetting, SizeType, SpacingType, StateProp, StateSelector, StateType, StoreConfig, StorePropertyDocument, StorePropertyQueryResponse, StorePropertyQueryVariables, SwatchesOptionType, SwatchesOptionValue, TransformProp, TypographyProps, TypographySetting, TypographyType, VariantSelectFragment, WiserWidgetType, baseAssetURL, calculateFirstProduct, cls, composeAdvanceStyle, composeBackgroundCss, composeBorderCss, composeCornerCss, composeGridLayout, composeRadius, composeShadowCss, composeSize, composeSizeCss, composeSpacing, composeTextColorCss, composeTypographyCss, convertOldLayout, fetchMedias, fetchVariants, flattenConnection, fpixel, genSizeClass, genTypoClass, genVariable, generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey, getBorderStyle, getCollection, getCornerCSSFromGlobal, getCustomRadius, getGlobalColorCSSProp, getGlobalColorClass, getGlobalColorResponsiveClass, getGlobalColorResponsiveStyle, getGlobalColorStateClass, getGlobalColorStateClassDynamicBtn, getGlobalColorStateResponsiveClass, getGlobalColorStateResponsiveClassDynamicBtn, getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStyle, getProduct, getProductBySlug, getRadiusCSSFromGlobal, getRadiusStyleActiveState, getResponsiveStateValue, getResponsiveValue, getResponsiveValueByScreen, getSelectedVariant, getShortName, getSingleColorVariable, getSpacingVariable, getStyleBackgroundByDevice, getStyleShadow, getStyleShadowState, globalEvent, gridToArrayRegex, gtag, handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor, handleConvertClassColorDynamicBtn, isBrowser, isColor, isDefined, isEmptyChildren, isLocalEnv, loadScript, makeAspectRatio, makeHeight, makeLineClamp, makeStyle, makeStyleResponsive, makeStyleResponsiveState, makeStyleState, makeWidth, normalizeBuilderData, optionLayoutStyle, parseSelectedOption, parseValueWithUnit, prefetchQueries, props, splitStyle, styles, template, tiktokpixel, useAddToCart, useAddon, useAddons, useBuilderComponent, useBuilderPreviewStore, useBuilderStore, useCartData, useCartDiscountCodesUpdate, useCartId, useCartLine, useCartLineStore, useCartNoteUpdate, useCartUI, useCheckAvailableVariantInStock, useCheckoutUrl, useCollection, useCollectionQuery, useCollectionStore, useCollectionsQuery, useConnectedShopify, useCreateCart, useCurrency, useCurrentDevice, useCurrentVariant, useCurrentVariantInStock, useEditorMode, useFeaturedImageGlobal, useFormatMoney, useIsSampleProduct, useIsStorefrontProduct, useIsomorphicLayoutEffect, useLazyVideo, useLoadScript, useLocale, useMatchMutate, useMobileOnly, useModalStore, useMoney, usePageType, usePluginEnable, usePrevious, useProduct, useProductList, useProductListProducts, useProductListSettings, useProductListStore, useProductListStyles, useProductProperties, useProductQuery, useProductStore, useProductsQuery, useQuantity, useRemoveCartItem, useSection, useSectionStore, useSelectedOption, useShopStore, useStoreFront, useSuspenseFetch, useSwatches, useSwatchesOptions, useUniqProductID, useUpdateCartItem, useVariant, useVariantOutStock, useVariants, validateEmail };

package/package.json

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