@gem-sdk/core 1.12.0-staging-bbb136c8 → 1.13.0-next.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/cjs/components/Render.liquid.js +92 -43
  2. package/dist/cjs/contexts/BuilderPreviewContext.js +5 -1
  3. package/dist/cjs/helpers/compose-advance-style.js +9 -1
  4. package/dist/cjs/helpers/make-style.js +12 -4
  5. package/dist/cjs/helpers/queries/get-collection.js +2 -2
  6. package/dist/cjs/helpers/render.js +3 -0
  7. package/dist/cjs/helpers/typography.js +68 -0
  8. package/dist/cjs/hooks/useFormatMoney.js +0 -3
  9. package/dist/cjs/index.js +8 -0
  10. package/dist/esm/components/Render.liquid.js +92 -44
  11. package/dist/esm/contexts/BuilderPreviewContext.js +5 -1
  12. package/dist/esm/helpers/compose-advance-style.js +9 -1
  13. package/dist/esm/helpers/make-style.js +12 -5
  14. package/dist/esm/helpers/queries/get-collection.js +2 -2
  15. package/dist/esm/helpers/render.js +3 -1
  16. package/dist/esm/helpers/typography.js +64 -1
  17. package/dist/esm/hooks/useFormatMoney.js +0 -3
  18. package/dist/esm/index.js +4 -4
  19. package/dist/types/index.d.ts +1579 -35
  20. package/package.json +3 -3
package/dist/cjs/components/Render.liquid.js CHANGED
@@ -16,20 +16,35 @@ const componentTexts = [
16
16
  'Text',
17
17
  'Heading'
18
18
  ];
19
- const Render = ({ uid , builder , components , parentId , ...passProps })=>{
19
+ const Render = ({ uid , builder , components , parentId , extraFiles ={} , ...passProps })=>{
20
20
  const item = builder[uid];
21
21
  const Component = components[item?.tag];
22
22
  if (!Component) {
23
23
  console.log('Miss component: ', item);
24
- return '';
24
+ return {
25
+ liquid: '',
26
+ extraFiles
27
+ };
28
+ }
29
+ if (!item) {
30
+ return {
31
+ liquid: '',
32
+ extraFiles
33
+ };
25
34
  }
26
- if (!item) return null;
27
35
  if (item?.type === 'section') {
28
- return '';
36
+ return {
37
+ liquid: '',
38
+ extraFiles
39
+ };
29
40
  } else {
41
+ const customProps = {
42
+ extraFiles: {}
43
+ };
30
44
  const style = composeAdvanceStyle.composeAdvanceStyle(item.advanced, item.tag);
45
+ let liquid = '';
31
46
  if (constant.disableWrap.includes(item.tag)) {
32
- return render.RenderIf(item?.childrens?.length, ()=>{
47
+ liquid = render.RenderIf(item?.childrens?.length, ()=>{
33
48
  return Component({
34
49
  builderProps: {
35
50
  uid,
@@ -46,17 +61,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
46
61
  ...builder[id],
47
62
  uid: id,
48
63
  builder,
49
- components
64
+ components,
65
+ customProps
50
66
  };
51
67
  }),
52
- children: item.childrens.map((id)=>Render({
68
+ children: item.childrens.map((id)=>RenderChildren({
53
69
  uid: id,
54
70
  builder,
55
71
  components,
56
- parentId: uid
72
+ customProps
57
73
  })).join('')
58
74
  });
59
- }, ()=>Component({
75
+ }, ()=>{
76
+ return Component({
60
77
  builderProps: {
61
78
  uid,
62
79
  builderData: item
@@ -68,42 +85,74 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
68
85
  isText: componentTexts.includes(item.tag) ? true : null,
69
86
  parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
70
87
  ...passProps
71
- }));
88
+ });
89
+ });
90
+ } else {
91
+ liquid = render.template`<div style="${style}" class="${item.uid}">
92
+ ${render.RenderIf(item?.childrens?.length, ()=>{
93
+ return Component({
94
+ builderProps: {
95
+ uid,
96
+ builderData: item
97
+ },
98
+ styles: item.styles,
99
+ setting: item.settings,
100
+ ...passProps,
101
+ rawChildren: item.childrens.map((id)=>{
102
+ return {
103
+ ...builder[id],
104
+ uid: id,
105
+ builder,
106
+ components,
107
+ customProps
108
+ };
109
+ }),
110
+ children: item.childrens.map((id)=>RenderChildren({
111
+ uid: id,
112
+ builder,
113
+ components,
114
+ customProps
115
+ })).join('')
116
+ });
117
+ }, ()=>{
118
+ return Component({
119
+ builderProps: {
120
+ uid,
121
+ builderData: item
122
+ },
123
+ styles: item.styles,
124
+ setting: item.settings,
125
+ isText: componentTexts.includes(item.tag) ? true : null,
126
+ ...passProps
127
+ });
128
+ })}
129
+ </div>`;
72
130
  }
73
- return render.template`<div style="${style}" class="${item.uid}">
74
- ${render.RenderIf(item?.childrens?.length, ()=>Component({
75
- builderProps: {
76
- uid,
77
- builderData: item
78
- },
79
- styles: item.styles,
80
- setting: item.settings,
81
- ...passProps,
82
- rawChildren: item.childrens.map((id)=>{
83
- return {
84
- ...builder[id],
85
- uid: id,
86
- builder,
87
- components
88
- };
89
- }),
90
- children: item.childrens.map((id)=>Render({
91
- uid: id,
92
- builder,
93
- components
94
- })).join('')
95
- }), ()=>Component({
96
- builderProps: {
97
- uid,
98
- builderData: item
99
- },
100
- styles: item.styles,
101
- setting: item.settings,
102
- isText: componentTexts.includes(item.tag) ? true : null,
103
- ...passProps
104
- }))}
105
- </div>`;
131
+ return {
132
+ liquid,
133
+ extraFiles: customProps.extraFiles
134
+ };
135
+ }
136
+ };
137
+ const RenderChildren = (props)=>{
138
+ const data = Render(props);
139
+ // Append to prop parent
140
+ for(const key in data.extraFiles){
141
+ if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
142
+ const value = data.extraFiles[key];
143
+ props.customProps.extraFiles[key] = value;
144
+ }
145
+ }
146
+ // Fix limit 256kb
147
+ const textEncoder = new TextEncoder();
148
+ const size = data?.liquid ? textEncoder.encode(data.liquid).length : 0;
149
+ if (Math.ceil(size / 1024) >= 180) {
150
+ const fileName = `gp-section-snippet-${props.uid}`;
151
+ props.customProps.extraFiles[fileName] = data.liquid;
152
+ return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id %}`;
106
153
  }
154
+ return data.liquid;
107
155
  };
108
156
 
157
+ exports.RenderChildren = RenderChildren;
109
158
  exports.default = Render;
package/dist/cjs/contexts/BuilderPreviewContext.js CHANGED
@@ -30,6 +30,7 @@ const root = {
30
30
  };
31
31
  const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
32
32
  state: args,
33
+ loaded: false,
33
34
  addItem: (args)=>{
34
35
  const { position , data } = args;
35
36
  const state = get().state;
@@ -288,7 +289,8 @@ const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
288
289
  },
289
290
  forceChangeState: (data)=>{
290
291
  set({
291
- state: data
292
+ state: data,
293
+ loaded: true
292
294
  });
293
295
  },
294
296
  initState: (data)=>{
@@ -302,6 +304,7 @@ const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
302
304
  };
303
305
  }, {});
304
306
  set({
307
+ loaded: true,
305
308
  state: {
306
309
  ROOT: {
307
310
  ...root,
@@ -313,6 +316,7 @@ const createBuilderPreviewProvider = (args)=>zustand.createStore((set, get)=>({
313
316
  } else {
314
317
  const newState = normalizeBuilderData.normalizeBuilderData(data);
315
318
  set({
319
+ loaded: true,
316
320
  state: {
317
321
  ROOT: {
318
322
  ...root,
package/dist/cjs/helpers/compose-advance-style.js CHANGED
@@ -117,7 +117,15 @@ function composeAdvanceStyle(data, tag) {
117
117
  }
118
118
  } else {
119
119
  if (attr === 'border') {
120
- Object.assign(styles, borders.getBorderStyle(value));
120
+ const borderStyle = value;
121
+ if (borderStyle.border === 'none') {
122
+ borderStyle.border = 'solid';
123
+ borderStyle.color = '#121212';
124
+ borderStyle.isCustom = true;
125
+ borderStyle.width = '0px';
126
+ borderStyle.position = 'all';
127
+ }
128
+ Object.assign(styles, borders.getBorderStyle(borderStyle));
121
129
  }
122
130
  if (attr === 'rounded') {
123
131
  Object.assign(styles, radius.getCornerCSSFromGlobal(value));
package/dist/cjs/helpers/make-style.js CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  var getResonsiveValue = require('./get-resonsive-value.js');
4
4
 
5
+ const removeNullUndefined = (obj)=>Object.entries(obj).reduce((a, [k, v])=>{
6
+ if (v === null || v === undefined) return a;
7
+ return {
8
+ ...a,
9
+ [k]: v
10
+ };
11
+ }, {});
5
12
  const makeStyleKey = (name)=>{
6
13
  return [
7
14
  name,
@@ -16,10 +23,10 @@ const makeStyleKey = (name)=>{
16
23
  ].map((key)=>`--${key}`);
17
24
  };
18
25
  const makeStyle = (style)=>{
19
- return Object.fromEntries(Object.entries(style).map(([key, value])=>[
26
+ return removeNullUndefined(Object.fromEntries(Object.entries(style).map(([key, value])=>[
20
27
  `--${key}`,
21
28
  value
22
- ]));
29
+ ])));
23
30
  };
24
31
  const makeStyleState = (name, value)=>{
25
32
  if (!value) return {};
@@ -52,14 +59,14 @@ const makeStyleResponsive = (name, value)=>{
52
59
  };
53
60
  const makeWidth = (widthValue, fullWidthValue)=>{
54
61
  const getVal = (deviceValue, widthValue, fullWidthValue)=>{
55
- const widthVal = widthValue?.[deviceValue];
62
+ const widthVal = widthValue?.[deviceValue] === undefined ? widthValue?.['desktop'] : widthValue?.[deviceValue];
56
63
  const fullWidthVal = fullWidthValue?.[deviceValue] === undefined ? fullWidthValue?.['desktop'] : fullWidthValue?.[deviceValue];
57
64
  if (fullWidthVal) {
58
65
  return '100%';
59
66
  } else if (fullWidthVal === false) {
60
67
  return widthVal ?? widthVal;
61
68
  } else {
62
- return widthVal;
69
+ return widthVal || 'auto';
63
70
  }
64
71
  };
65
72
  return {
@@ -118,3 +125,4 @@ exports.makeStyleResponsive = makeStyleResponsive;
118
125
  exports.makeStyleResponsiveState = makeStyleResponsiveState;
119
126
  exports.makeStyleState = makeStyleState;
120
127
  exports.makeWidth = makeWidth;
128
+ exports.removeNullUndefined = removeNullUndefined;
package/dist/cjs/helpers/queries/get-collection.js CHANGED
@@ -20,12 +20,12 @@ function productSortedByOrder(key) {
20
20
  case 'CREATED_AT_ASC':
21
21
  return {
22
22
  direction: 'ASC',
23
- field: 'CREATED_AT'
23
+ field: 'PLATFORM_CREATED_AT'
24
24
  };
25
25
  case 'CREATED_AT_DESC':
26
26
  return {
27
27
  direction: 'DESC',
28
- field: 'CREATED_AT'
28
+ field: 'PLATFORM_CREATED_AT'
29
29
  };
30
30
  case 'none':
31
31
  default:
package/dist/cjs/helpers/render.js CHANGED
@@ -60,8 +60,11 @@ const template = (strings, ...keys)=>{
60
60
  });
61
61
  return str;
62
62
  };
63
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
64
+ const composeMemo = (fn, _)=>fn();
63
65
 
64
66
  exports.RenderIf = RenderIf;
67
+ exports.composeMemo = composeMemo;
65
68
  exports.dataStringify = dataStringify;
66
69
  exports.props = props;
67
70
  exports.styles = styles;
package/dist/cjs/helpers/typography.js CHANGED
@@ -1,5 +1,8 @@
1
1
  'use strict';
2
2
 
3
+ var colors = require('./colors.js');
4
+ var makeStyle = require('./make-style.js');
5
+
3
6
  const genTypoClass = (name)=>{
4
7
  return `g-${name}`;
5
8
  };
@@ -15,6 +18,71 @@ const composeTypographyCss = (typography)=>{
15
18
  ${lineHeight ? `line-height: ${lineHeight};` : ''}
16
19
  `;
17
20
  };
21
+ function getCustomCSSByDevice(typography, device) {
22
+ if (!typography || !device) return {};
23
+ const suffix = device === 'desktop' || !device ? '' : `-${device}`;
24
+ const { fontFamily } = typography?.[device] ?? {};
25
+ return {
26
+ [`--size${suffix}`]: typography?.[device]?.fontSize,
27
+ [`--lh${suffix}`]: typography?.[device]?.lineHeight,
28
+ [`--fs${suffix}`]: typography?.[device]?.fontStyle,
29
+ [`--ff${suffix}`]: fontFamily ? `var(--g-font-${fontFamily}, ${fontFamily})` : undefined,
30
+ [`--weight${suffix}`]: typography?.[device]?.fontWeight,
31
+ [`--ls${suffix}`]: typography?.[device]?.letterSpacing
32
+ };
33
+ }
34
+ const composeTypography = (typography)=>{
35
+ if (!typography) return {};
36
+ return makeStyle.removeNullUndefined({
37
+ ...getCustomCSSByDevice(typography, 'desktop'),
38
+ ...getCustomCSSByDevice(typography, 'tablet'),
39
+ ...getCustomCSSByDevice(typography, 'mobile')
40
+ });
41
+ };
42
+ const composeTypographyV2 = (value, attrs)=>{
43
+ if (!value) return {};
44
+ return makeStyle.removeNullUndefined({
45
+ ...makeStyle.makeStyle({
46
+ fs: !attrs?.italic ? value?.fontStyle : undefined,
47
+ ff: value?.fontFamily ? `var(--g-font-${value.fontFamily.replace(/ /g, '-')}, ${value.fontFamily})` : undefined,
48
+ weight: !attrs?.bold ? value?.fontWeight : undefined,
49
+ ls: value?.letterSpacing,
50
+ lh: value?.lineHeight
51
+ }),
52
+ ...makeStyle.makeStyleResponsive('size', value?.fontSize)
53
+ });
54
+ };
55
+ const composeTypographyAttr = (attrs)=>{
56
+ if (!attrs) return {};
57
+ return makeStyle.removeNullUndefined({
58
+ ...makeStyle.makeStyle({
59
+ fs: attrs?.italic ? 'italic' : undefined,
60
+ weight: attrs?.bold ? 'bold' : undefined,
61
+ c: colors.getSingleColorVariable(attrs?.color),
62
+ tt: attrs?.transform,
63
+ tdl: attrs?.underline ? 'underline' : undefined
64
+ })
65
+ });
66
+ };
67
+ const composeTypographyClassName = (typo, typography)=>{
68
+ return typo ? typo?.type && !typo.custom ? genTypoClass(typo.type) : '' : typography?.type && genTypoClass(typography?.type);
69
+ };
70
+ const composeTypographyStyle = (typo, typography, disableAttr)=>{
71
+ if (typo) {
72
+ return {
73
+ ...composeTypographyV2(typo.custom, typo.attrs),
74
+ ...!disableAttr && composeTypographyAttr(typo.attrs)
75
+ };
76
+ }
77
+ return {
78
+ ...!typography?.type ? composeTypography(typography?.custom) : {}
79
+ };
80
+ };
18
81
 
82
+ exports.composeTypography = composeTypography;
83
+ exports.composeTypographyAttr = composeTypographyAttr;
84
+ exports.composeTypographyClassName = composeTypographyClassName;
19
85
  exports.composeTypographyCss = composeTypographyCss;
86
+ exports.composeTypographyStyle = composeTypographyStyle;
87
+ exports.composeTypographyV2 = composeTypographyV2;
20
88
  exports.genTypoClass = genTypoClass;
package/dist/cjs/hooks/useFormatMoney.js CHANGED
@@ -8,9 +8,6 @@ const useFormatMoney = (amount, withCurrency)=>{
8
8
  let value = '';
9
9
  const placeholderRegex = /\{\{\s*(\w+)\s*\}\}/;
10
10
  const formatString = format || '${{amount}}';
11
- if (typeof cents == 'string') {
12
- cents = cents.replace('.', '');
13
- }
14
11
  /**
15
12
  * check default
16
13
  * @param opt opt
package/dist/cjs/index.js CHANGED
@@ -93,6 +93,7 @@ var getProductBySlug = require('./helpers/queries/get-product-by-slug.js');
93
93
  exports.AddOn = AddOn.default;
94
94
  exports.Render = Render.default;
95
95
  exports.RenderPreview = RenderPreview.default;
96
+ exports.RenderChildren = Render_liquid.RenderChildren;
96
97
  exports.RenderLiquid = Render_liquid.default;
97
98
  exports.AddonProvider = AddonContext.AddonProvider;
98
99
  exports.useAddon = AddonContext.useAddon;
@@ -150,6 +151,7 @@ exports.makeStyleResponsive = makeStyle.makeStyleResponsive;
150
151
  exports.makeStyleResponsiveState = makeStyle.makeStyleResponsiveState;
151
152
  exports.makeStyleState = makeStyle.makeStyleState;
152
153
  exports.makeWidth = makeStyle.makeWidth;
154
+ exports.removeNullUndefined = makeStyle.removeNullUndefined;
153
155
  exports.normalizeBuilderData = normalizeBuilderData.normalizeBuilderData;
154
156
  exports.prefetchQueries = prefetchQueries.prefetchQueries;
155
157
  exports.composeSpacing = spacing.composeSpacing;
@@ -176,7 +178,12 @@ exports.getGlobalColorStateStyle = colors.getGlobalColorStateStyle;
176
178
  exports.getGlobalColorStyle = colors.getGlobalColorStyle;
177
179
  exports.getSingleColorVariable = colors.getSingleColorVariable;
178
180
  exports.isColor = colors.isColor;
181
+ exports.composeTypography = typography.composeTypography;
182
+ exports.composeTypographyAttr = typography.composeTypographyAttr;
183
+ exports.composeTypographyClassName = typography.composeTypographyClassName;
179
184
  exports.composeTypographyCss = typography.composeTypographyCss;
185
+ exports.composeTypographyStyle = typography.composeTypographyStyle;
186
+ exports.composeTypographyV2 = typography.composeTypographyV2;
180
187
  exports.genTypoClass = typography.genTypoClass;
181
188
  exports.composeCornerCss = radius.composeCornerCss;
182
189
  exports.composeRadius = radius.composeRadius;
@@ -190,6 +197,7 @@ exports.fpixel = fpixel;
190
197
  exports.gtag = gtag;
191
198
  exports.tiktokpixel = tiktokpixel;
192
199
  exports.RenderIf = render.RenderIf;
200
+ exports.composeMemo = render.composeMemo;
193
201
  exports.dataStringify = render.dataStringify;
194
202
  exports.props = render.props;
195
203
  exports.styles = render.styles;
package/dist/esm/components/Render.liquid.js CHANGED
@@ -12,20 +12,35 @@ const componentTexts = [
12
12
  'Text',
13
13
  'Heading'
14
14
  ];
15
- const Render = ({ uid , builder , components , parentId , ...passProps })=>{
15
+ const Render = ({ uid , builder , components , parentId , extraFiles ={} , ...passProps })=>{
16
16
  const item = builder[uid];
17
17
  const Component = components[item?.tag];
18
18
  if (!Component) {
19
19
  console.log('Miss component: ', item);
20
- return '';
20
+ return {
21
+ liquid: '',
22
+ extraFiles
23
+ };
24
+ }
25
+ if (!item) {
26
+ return {
27
+ liquid: '',
28
+ extraFiles
29
+ };
21
30
  }
22
- if (!item) return null;
23
31
  if (item?.type === 'section') {
24
- return '';
32
+ return {
33
+ liquid: '',
34
+ extraFiles
35
+ };
25
36
  } else {
37
+ const customProps = {
38
+ extraFiles: {}
39
+ };
26
40
  const style = composeAdvanceStyle(item.advanced, item.tag);
41
+ let liquid = '';
27
42
  if (disableWrap.includes(item.tag)) {
28
- return RenderIf(item?.childrens?.length, ()=>{
43
+ liquid = RenderIf(item?.childrens?.length, ()=>{
29
44
  return Component({
30
45
  builderProps: {
31
46
  uid,
@@ -42,17 +57,19 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
42
57
  ...builder[id],
43
58
  uid: id,
44
59
  builder,
45
- components
60
+ components,
61
+ customProps
46
62
  };
47
63
  }),
48
- children: item.childrens.map((id)=>Render({
64
+ children: item.childrens.map((id)=>RenderChildren({
49
65
  uid: id,
50
66
  builder,
51
67
  components,
52
- parentId: uid
68
+ customProps
53
69
  })).join('')
54
70
  });
55
- }, ()=>Component({
71
+ }, ()=>{
72
+ return Component({
56
73
  builderProps: {
57
74
  uid,
58
75
  builderData: item
@@ -64,42 +81,73 @@ const Render = ({ uid , builder , components , parentId , ...passProps })=>{
64
81
  isText: componentTexts.includes(item.tag) ? true : null,
65
82
  parentId: componentsRenderWithParentId.includes(item.tag) ? parentId : null,
66
83
  ...passProps
67
- }));
84
+ });
85
+ });
86
+ } else {
87
+ liquid = template`<div style="${style}" class="${item.uid}">
88
+ ${RenderIf(item?.childrens?.length, ()=>{
89
+ return Component({
90
+ builderProps: {
91
+ uid,
92
+ builderData: item
93
+ },
94
+ styles: item.styles,
95
+ setting: item.settings,
96
+ ...passProps,
97
+ rawChildren: item.childrens.map((id)=>{
98
+ return {
99
+ ...builder[id],
100
+ uid: id,
101
+ builder,
102
+ components,
103
+ customProps
104
+ };
105
+ }),
106
+ children: item.childrens.map((id)=>RenderChildren({
107
+ uid: id,
108
+ builder,
109
+ components,
110
+ customProps
111
+ })).join('')
112
+ });
113
+ }, ()=>{
114
+ return Component({
115
+ builderProps: {
116
+ uid,
117
+ builderData: item
118
+ },
119
+ styles: item.styles,
120
+ setting: item.settings,
121
+ isText: componentTexts.includes(item.tag) ? true : null,
122
+ ...passProps
123
+ });
124
+ })}
125
+ </div>`;
68
126
  }
69
- return template`<div style="${style}" class="${item.uid}">
70
- ${RenderIf(item?.childrens?.length, ()=>Component({
71
- builderProps: {
72
- uid,
73
- builderData: item
74
- },
75
- styles: item.styles,
76
- setting: item.settings,
77
- ...passProps,
78
- rawChildren: item.childrens.map((id)=>{
79
- return {
80
- ...builder[id],
81
- uid: id,
82
- builder,
83
- components
84
- };
85
- }),
86
- children: item.childrens.map((id)=>Render({
87
- uid: id,
88
- builder,
89
- components
90
- })).join('')
91
- }), ()=>Component({
92
- builderProps: {
93
- uid,
94
- builderData: item
95
- },
96
- styles: item.styles,
97
- setting: item.settings,
98
- isText: componentTexts.includes(item.tag) ? true : null,
99
- ...passProps
100
- }))}
101
- </div>`;
127
+ return {
128
+ liquid,
129
+ extraFiles: customProps.extraFiles
130
+ };
131
+ }
132
+ };
133
+ const RenderChildren = (props)=>{
134
+ const data = Render(props);
135
+ // Append to prop parent
136
+ for(const key in data.extraFiles){
137
+ if (Object.prototype.hasOwnProperty.call(data.extraFiles, key)) {
138
+ const value = data.extraFiles[key];
139
+ props.customProps.extraFiles[key] = value;
140
+ }
141
+ }
142
+ // Fix limit 256kb
143
+ const textEncoder = new TextEncoder();
144
+ const size = data?.liquid ? textEncoder.encode(data.liquid).length : 0;
145
+ if (Math.ceil(size / 1024) >= 180) {
146
+ const fileName = `gp-section-snippet-${props.uid}`;
147
+ props.customProps.extraFiles[fileName] = data.liquid;
148
+ return `{% render '${fileName}', product: product, variant: variant, product_form_id: product_form_id %}`;
102
149
  }
150
+ return data.liquid;
103
151
  };
104
152
 
105
- export { Render as default };
153
+ export { RenderChildren, Render as default };
package/dist/esm/contexts/BuilderPreviewContext.js CHANGED
@@ -28,6 +28,7 @@ const root = {
28
28
  };
29
29
  const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
30
30
  state: args,
31
+ loaded: false,
31
32
  addItem: (args)=>{
32
33
  const { position , data } = args;
33
34
  const state = get().state;
@@ -286,7 +287,8 @@ const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
286
287
  },
287
288
  forceChangeState: (data)=>{
288
289
  set({
289
- state: data
290
+ state: data,
291
+ loaded: true
290
292
  });
291
293
  },
292
294
  initState: (data)=>{
@@ -300,6 +302,7 @@ const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
300
302
  };
301
303
  }, {});
302
304
  set({
305
+ loaded: true,
303
306
  state: {
304
307
  ROOT: {
305
308
  ...root,
@@ -311,6 +314,7 @@ const createBuilderPreviewProvider = (args)=>createStore((set, get)=>({
311
314
  } else {
312
315
  const newState = normalizeBuilderData(data);
313
316
  set({
317
+ loaded: true,
314
318
  state: {
315
319
  ROOT: {
316
320
  ...root,
package/dist/esm/helpers/compose-advance-style.js CHANGED
@@ -115,7 +115,15 @@ function composeAdvanceStyle(data, tag) {
115
115
  }
116
116
  } else {
117
117
  if (attr === 'border') {
118
- Object.assign(styles, getBorderStyle(value));
118
+ const borderStyle = value;
119
+ if (borderStyle.border === 'none') {
120
+ borderStyle.border = 'solid';
121
+ borderStyle.color = '#121212';
122
+ borderStyle.isCustom = true;
123
+ borderStyle.width = '0px';
124
+ borderStyle.position = 'all';
125
+ }
126
+ Object.assign(styles, getBorderStyle(borderStyle));
119
127
  }
120
128
  if (attr === 'rounded') {
121
129
  Object.assign(styles, getCornerCSSFromGlobal(value));