@gem-sdk/pages 1.13.0-next.9 → 1.13.7

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 (13) hide show
  1. package/dist/cjs/components/AddSectionImageToLayout.js +1 -1
  2. package/dist/cjs/components/ImageToLayout.js +4 -4
  3. package/dist/cjs/components/PagesSuggestion.js +6 -5
  4. package/dist/cjs/components/builder/Toolbox.js +27 -50
  5. package/dist/cjs/libs/google-fonts.js +23 -2
  6. package/dist/cjs/pages/builder.js +3 -1
  7. package/dist/esm/components/AddSectionImageToLayout.js +1 -1
  8. package/dist/esm/components/ImageToLayout.js +4 -4
  9. package/dist/esm/components/PagesSuggestion.js +6 -5
  10. package/dist/esm/components/builder/Toolbox.js +28 -51
  11. package/dist/esm/libs/google-fonts.js +23 -3
  12. package/dist/esm/pages/builder.js +3 -1
  13. package/package.json +1 -1
package/dist/cjs/components/AddSectionImageToLayout.js CHANGED
@@ -32,7 +32,7 @@ const defaultPadding = {
32
32
  tablet: 'var(--g-ct-p)',
33
33
  mobile: 'var(--g-ct-p)'
34
34
  };
35
- const AddSectionImageToLayout = ()=>{
35
+ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
36
36
  const [link, setLink] = react.useState('');
37
37
  const [isInput, setIsInput] = react.useState(false);
38
38
  const onClick = (index)=>{
package/dist/cjs/components/ImageToLayout.js CHANGED
@@ -134,7 +134,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
134
134
  })
135
135
  }),
136
136
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
137
- className: "image-to-layout-input-border max-w-[calc(100%_-_32px)]",
137
+ className: "image-to-layout-input-border relative max-w-[calc(100%_-_32px)]",
138
138
  children: [
139
139
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
140
140
  className: "image-to-layout-input-wrapper flex h-[60px] w-[600px] max-w-[calc(100%)] items-center rounded-[3px] border py-[10px] pl-3 pr-2",
@@ -206,7 +206,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
206
206
  }),
207
207
  /*#__PURE__*/ jsxRuntime.jsx("div", {
208
208
  id: "gp-img-to-layout-generate-btn",
209
- className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
209
+ className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
210
210
  children: "Generate"
211
211
  }),
212
212
  /*#__PURE__*/ jsxRuntime.jsx(PagesSuggestion.PagesSuggestion, {
@@ -218,7 +218,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
218
218
  ]
219
219
  }),
220
220
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
221
- className: "error-url mx-[-1px] mb-[-1px] hidden items-center bg-white pt-[8px]",
221
+ className: "error-url items-cente absolute bottom-[-24px] mx-[-1px] mb-[-1px] hidden",
222
222
  children: [
223
223
  /*#__PURE__*/ jsxRuntime.jsx("svg", {
224
224
  width: "16",
@@ -242,7 +242,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
242
242
  ]
243
243
  }),
244
244
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
245
- className: "mt-4 flex items-center text-xs",
245
+ className: "mt-[24px] flex items-center text-xs",
246
246
  children: [
247
247
  /*#__PURE__*/ jsxRuntime.jsx("span", {
248
248
  className: "font-normal text-[#676767]",
package/dist/cjs/components/PagesSuggestion.js CHANGED
@@ -18,7 +18,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
18
18
  return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
19
19
  children: [
20
20
  /*#__PURE__*/ jsxRuntime.jsx("div", {
21
- className: `z-9 gps-page-suggestion max-w-[calc(100%_+_2px)] bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[-1px] top-[-1px]`,
21
+ className: `z-9 gps-page-suggestion max-w-[calc(100%)] bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[0px] top-[0px]`,
22
22
  children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
23
23
  className: "h-full w-full overflow-hidden rounded-[3px]",
24
24
  children: [
@@ -95,7 +95,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
95
95
  onClick: ()=>setOpenSuggestion(false),
96
96
  id: "gp-img-to-layout-generate-btn-modal",
97
97
  "aria-hidden": true,
98
- className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
98
+ className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
99
99
  children: "Generate"
100
100
  })
101
101
  ]
@@ -116,6 +116,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
116
116
  height: "32",
117
117
  viewBox: "0 0 32 32",
118
118
  fill: "none",
119
+ className: "min-h-[32px] min-w-[32px]",
119
120
  xmlns: "http://www.w3.org/2000/svg",
120
121
  children: [
121
122
  /*#__PURE__*/ jsxRuntime.jsx("path", {
@@ -133,14 +134,14 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
133
134
  ]
134
135
  }),
135
136
  /*#__PURE__*/ jsxRuntime.jsx("span", {
136
- className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
137
+ className: "item-link mobile:whitespace-pre-wrap ml-[24px] whitespace-nowrap text-xs text-[#212121]",
137
138
  children: page
138
139
  })
139
140
  ]
140
141
  }),
141
142
  /*#__PURE__*/ jsxRuntime.jsxs("div", {
142
143
  "data-url": page,
143
- className: "gps-suggestion-item-btn invisible ml-[24px] flex h-[32px] cursor-pointer items-center rounded-[3px] px-2 hover:bg-black/10",
144
+ className: "gps-suggestion-item-btn mobile:ml-0 ml-[24px] hidden h-[32px] cursor-pointer items-center rounded-[3px] px-2 hover:bg-black/10",
144
145
  children: [
145
146
  /*#__PURE__*/ jsxRuntime.jsxs("svg", {
146
147
  width: "16",
@@ -174,7 +175,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
174
175
  /*#__PURE__*/ jsxRuntime.jsx("div", {
175
176
  onClick: ()=>setOpenSuggestion(false),
176
177
  "aria-hidden": true,
177
- className: `fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
178
+ className: `gps-bg-fixed fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
178
179
  })
179
180
  ]
180
181
  });
package/dist/cjs/components/builder/Toolbox.js CHANGED
@@ -5,12 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var core = require('@gem-sdk/core');
7
7
  var react = require('react');
8
+ var getStorefrontApi = require('../../libs/get-storefront-api.js');
8
9
  var googleFonts = require('../../libs/google-fonts.js');
9
10
  var genCss = require('../../libs/helpers/gen-css.js');
10
- var getStorefrontApi = require('../../libs/get-storefront-api.js');
11
- var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
12
- var normalize = require('../../libs/helpers/normalize.js');
13
11
  var genFonts = require('../../libs/helpers/gen-fonts.js');
12
+ var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
14
13
 
15
14
  const globalStyleId = 'global-style';
16
15
  const globalFontId = 'google-font-builder';
@@ -20,6 +19,7 @@ const Toolbox = ()=>{
20
19
  const provider = core.useShopStore((s)=>s.provider);
21
20
  const changeStorefrontInfo = core.useShopStore((s)=>s.changeStorefrontInfo);
22
21
  const initState = core.useBuilderPreviewStore((s)=>s.initState);
22
+ const state = core.useBuilderPreviewStore((s)=>s.state);
23
23
  const initNormalizeState = core.useBuilderPreviewStore((s)=>s.forceChangeState);
24
24
  const changeItemPropByKey = core.useBuilderPreviewStore((s)=>s.changeItemPropByKey);
25
25
  const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
@@ -29,7 +29,14 @@ const Toolbox = ()=>{
29
29
  const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
30
30
  const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
31
31
  const clearModal = core.useModalStore((s)=>s.clearModal);
32
- const [fonts, setFonts] = react.useState([]);
32
+ const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
33
+ state
34
+ ]);
35
+ const customFontUrl = react.useMemo(()=>{
36
+ return googleFonts.createFontUrl(fonts);
37
+ }, [
38
+ fonts
39
+ ]);
33
40
  // Revalidate all query with key match query/
34
41
  const onRevalidateQuery = react.useCallback(()=>{
35
42
  matchMutate(/query\//, {
@@ -100,24 +107,10 @@ const Toolbox = ()=>{
100
107
  try {
101
108
  const detail = e.detail;
102
109
  if (detail.data) {
103
- let dataBuilder = {};
104
110
  if (detail.type === 'flat') {
105
111
  initNormalizeState(detail.data);
106
- dataBuilder = detail.data;
107
112
  } else {
108
113
  initState(detail.data);
109
- dataBuilder = detail.data.reduceRight((prev, current)=>{
110
- const item = normalize.normalizeBuilderData(current);
111
- return {
112
- ...prev,
113
- ...item
114
- };
115
- }, {});
116
- }
117
- // Append link font to head
118
- if (dataBuilder) {
119
- const fonts = genFonts.getFontsFromDataBuilder(dataBuilder);
120
- setFonts(fonts);
121
114
  }
122
115
  }
123
116
  } catch {
@@ -161,21 +154,11 @@ const Toolbox = ()=>{
161
154
  data: detail.propValue,
162
155
  group: detail.group
163
156
  });
164
- // Check link google font to <head>
165
- if (detail.propValue?.custom) {
166
- const settings = {
167
- [detail.propName]: detail.propValue
168
- };
169
- const currentFonts = JSON.parse(JSON.stringify(fonts));
170
- genFonts.getFontFromGroupSetting(currentFonts, settings);
171
- setFonts(currentFonts);
172
- }
173
157
  }
174
158
  } catch {
175
159
  //
176
160
  }
177
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
178
- [
161
+ }, [
179
162
  changeItemPropByKey
180
163
  ]);
181
164
  // Move entity
@@ -225,30 +208,24 @@ const Toolbox = ()=>{
225
208
  changeLayoutSettings
226
209
  ]);
227
210
  react.useEffect(()=>{
228
- if (fonts?.length) {
229
- fonts.forEach((font)=>{
230
- const fontUrl = googleFonts.createFontUrl([
231
- font
232
- ]);
233
- if (fontUrl) {
234
- const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
235
- if (googleFont) {
236
- if (googleFont.getAttribute('href') !== fontUrl) {
237
- googleFont.setAttribute('href', fontUrl);
238
- }
239
- } else {
240
- const link = document.createElement('link');
241
- link.className = fontElementSettingClassName;
242
- link.dataset.font = encodeURI(font.family);
243
- link.href = fontUrl;
244
- link.rel = 'stylesheet';
245
- document.head.appendChild(link);
246
- }
211
+ if (customFontUrl) {
212
+ const fontId = 'google-font';
213
+ const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
214
+ if (googleFont) {
215
+ if (googleFont.getAttribute('href') !== customFontUrl) {
216
+ googleFont.setAttribute('href', customFontUrl);
247
217
  }
248
- });
218
+ } else {
219
+ const link = document.createElement('link');
220
+ link.className = fontElementSettingClassName;
221
+ link.dataset.font = fontId;
222
+ link.href = customFontUrl;
223
+ link.rel = 'stylesheet';
224
+ document.head.appendChild(link);
225
+ }
249
226
  }
250
227
  }, [
251
- fonts
228
+ customFontUrl
252
229
  ]);
253
230
  react.useEffect(()=>{
254
231
  window.addEventListener('update-shop-info', onChangeShopInfo);
package/dist/cjs/libs/google-fonts.js CHANGED
@@ -11,14 +11,34 @@ async function getFontForUA(url, UA) {
11
11
  }
12
12
  }).then((res)=>res.text());
13
13
  }
14
+ const composeFonts = (fonts)=>{
15
+ const uniqFonts = fonts.filter((font, index, arr)=>{
16
+ return index === arr.findIndex((t)=>t.family === font.family);
17
+ });
18
+ return uniqFonts.map((font)=>{
19
+ const variants = fonts.filter((t)=>t.family === font.family).reduce((acc, t)=>{
20
+ return [
21
+ ...acc,
22
+ ...t.variants
23
+ ];
24
+ }, []).filter((t, index, arr)=>{
25
+ return index === arr.findIndex((v)=>v === t);
26
+ });
27
+ return {
28
+ ...font,
29
+ variants
30
+ };
31
+ });
32
+ };
14
33
  const createFontUrl = (fonts, option)=>{
15
34
  const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
16
35
  if (!googleFonts.length) return;
17
36
  const params = new URLSearchParams();
18
37
  const display = option?.display || 'swap';
19
- const family = googleFonts.filter((font, index, arr)=>{
38
+ const uniqFonts = googleFonts.filter((font, index, arr)=>{
20
39
  return index === arr.findIndex((t)=>t.family === font.family);
21
- }).map((font)=>{
40
+ });
41
+ const family = composeFonts(uniqFonts).map((font)=>{
22
42
  return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
23
43
  }).join('|');
24
44
  params.append('family', family);
@@ -75,6 +95,7 @@ async function getFontStyleFromPageTemplate(pageTemplate) {
75
95
  return await Promise.all(fontStyle);
76
96
  }
77
97
 
98
+ exports.composeFonts = composeFonts;
78
99
  exports.createFontUrl = createFontUrl;
79
100
  exports.getFontFromGlobalStyle = getFontFromGlobalStyle;
80
101
  exports.getFontStyleFromPageTemplate = getFontStyleFromPageTemplate;
package/dist/cjs/pages/builder.js CHANGED
@@ -75,7 +75,9 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
75
75
  /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
76
76
  editorImageToLayout: editorImageToLayout || false
77
77
  }),
78
- /*#__PURE__*/ jsxRuntime.jsx(AddSectionImageToLayout.default, {}),
78
+ /*#__PURE__*/ jsxRuntime.jsx(AddSectionImageToLayout.default, {
79
+ editorImageToLayout: editorImageToLayout || false
80
+ }),
79
81
  /*#__PURE__*/ jsxRuntime.jsx("div", {
80
82
  id: "visual-content"
81
83
  }),
package/dist/esm/components/AddSectionImageToLayout.js CHANGED
@@ -28,7 +28,7 @@ const defaultPadding = {
28
28
  tablet: 'var(--g-ct-p)',
29
29
  mobile: 'var(--g-ct-p)'
30
30
  };
31
- const AddSectionImageToLayout = ()=>{
31
+ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
32
32
  const [link, setLink] = useState('');
33
33
  const [isInput, setIsInput] = useState(false);
34
34
  const onClick = (index)=>{
package/dist/esm/components/ImageToLayout.js CHANGED
@@ -130,7 +130,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
130
130
  })
131
131
  }),
132
132
  /*#__PURE__*/ jsxs("div", {
133
- className: "image-to-layout-input-border max-w-[calc(100%_-_32px)]",
133
+ className: "image-to-layout-input-border relative max-w-[calc(100%_-_32px)]",
134
134
  children: [
135
135
  /*#__PURE__*/ jsxs("div", {
136
136
  className: "image-to-layout-input-wrapper flex h-[60px] w-[600px] max-w-[calc(100%)] items-center rounded-[3px] border py-[10px] pl-3 pr-2",
@@ -202,7 +202,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
202
202
  }),
203
203
  /*#__PURE__*/ jsx("div", {
204
204
  id: "gp-img-to-layout-generate-btn",
205
- className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
205
+ className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
206
206
  children: "Generate"
207
207
  }),
208
208
  /*#__PURE__*/ jsx(PagesSuggestion, {
@@ -214,7 +214,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
214
214
  ]
215
215
  }),
216
216
  /*#__PURE__*/ jsxs("div", {
217
- className: "error-url mx-[-1px] mb-[-1px] hidden items-center bg-white pt-[8px]",
217
+ className: "error-url items-cente absolute bottom-[-24px] mx-[-1px] mb-[-1px] hidden",
218
218
  children: [
219
219
  /*#__PURE__*/ jsx("svg", {
220
220
  width: "16",
@@ -238,7 +238,7 @@ const ImageToLayout = ({ editorImageToLayout })=>{
238
238
  ]
239
239
  }),
240
240
  /*#__PURE__*/ jsxs("div", {
241
- className: "mt-4 flex items-center text-xs",
241
+ className: "mt-[24px] flex items-center text-xs",
242
242
  children: [
243
243
  /*#__PURE__*/ jsx("span", {
244
244
  className: "font-normal text-[#676767]",
package/dist/esm/components/PagesSuggestion.js CHANGED
@@ -16,7 +16,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
16
16
  return /*#__PURE__*/ jsxs(Fragment, {
17
17
  children: [
18
18
  /*#__PURE__*/ jsx("div", {
19
- className: `z-9 gps-page-suggestion max-w-[calc(100%_+_2px)] bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[-1px] top-[-1px]`,
19
+ className: `z-9 gps-page-suggestion max-w-[calc(100%)] bg-white ${isOpen ? 'block' : 'hidden'} absolute left-[0px] top-[0px]`,
20
20
  children: /*#__PURE__*/ jsxs("div", {
21
21
  className: "h-full w-full overflow-hidden rounded-[3px]",
22
22
  children: [
@@ -93,7 +93,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
93
93
  onClick: ()=>setOpenSuggestion(false),
94
94
  id: "gp-img-to-layout-generate-btn-modal",
95
95
  "aria-hidden": true,
96
- className: "generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white",
96
+ className: `generate-image-to-layout-btn flex h-[40px] w-[94px] cursor-pointer items-center justify-center rounded-[3px] text-sm font-medium text-white ${!link ? 'btn-disable' : ''}`,
97
97
  children: "Generate"
98
98
  })
99
99
  ]
@@ -114,6 +114,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
114
114
  height: "32",
115
115
  viewBox: "0 0 32 32",
116
116
  fill: "none",
117
+ className: "min-h-[32px] min-w-[32px]",
117
118
  xmlns: "http://www.w3.org/2000/svg",
118
119
  children: [
119
120
  /*#__PURE__*/ jsx("path", {
@@ -131,14 +132,14 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
131
132
  ]
132
133
  }),
133
134
  /*#__PURE__*/ jsx("span", {
134
- className: "item-link ml-[24px] whitespace-nowrap text-xs text-[#212121]",
135
+ className: "item-link mobile:whitespace-pre-wrap ml-[24px] whitespace-nowrap text-xs text-[#212121]",
135
136
  children: page
136
137
  })
137
138
  ]
138
139
  }),
139
140
  /*#__PURE__*/ jsxs("div", {
140
141
  "data-url": page,
141
- className: "gps-suggestion-item-btn invisible ml-[24px] flex h-[32px] cursor-pointer items-center rounded-[3px] px-2 hover:bg-black/10",
142
+ className: "gps-suggestion-item-btn mobile:ml-0 ml-[24px] hidden h-[32px] cursor-pointer items-center rounded-[3px] px-2 hover:bg-black/10",
142
143
  children: [
143
144
  /*#__PURE__*/ jsxs("svg", {
144
145
  width: "16",
@@ -172,7 +173,7 @@ const PagesSuggestion = ({ isOpen , link , setLink , setOpenSuggestion })=>{
172
173
  /*#__PURE__*/ jsx("div", {
173
174
  onClick: ()=>setOpenSuggestion(false),
174
175
  "aria-hidden": true,
175
- className: `fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
176
+ className: `gps-bg-fixed fixed left-0 top-0 h-[100vh] w-[100vw] bg-transparent ${isOpen ? 'block' : 'hidden'}`
176
177
  })
177
178
  ]
178
179
  });
package/dist/esm/components/builder/Toolbox.js CHANGED
@@ -1,12 +1,11 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
3
- import { memo, useState, useCallback, useEffect } from 'react';
3
+ import { memo, useMemo, useCallback, useEffect } from 'react';
4
+ import { getStorefrontApi } from '../../libs/get-storefront-api.js';
4
5
  import { createFontUrl } from '../../libs/google-fonts.js';
5
6
  import { genCSS } from '../../libs/helpers/gen-css.js';
6
- import { getStorefrontApi } from '../../libs/get-storefront-api.js';
7
+ import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
7
8
  import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
8
- import { normalizeBuilderData } from '../../libs/helpers/normalize.js';
9
- import { getFontsFromDataBuilder, getFontFromGroupSetting } from '../../libs/helpers/gen-fonts.js';
10
9
 
11
10
  const globalStyleId = 'global-style';
12
11
  const globalFontId = 'google-font-builder';
@@ -16,6 +15,7 @@ const Toolbox = ()=>{
16
15
  const provider = useShopStore((s)=>s.provider);
17
16
  const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
18
17
  const initState = useBuilderPreviewStore((s)=>s.initState);
18
+ const state = useBuilderPreviewStore((s)=>s.state);
19
19
  const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
20
20
  const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
21
21
  const addItem = useBuilderPreviewStore((s)=>s.addItem);
@@ -25,7 +25,14 @@ const Toolbox = ()=>{
25
25
  const changeSwatches = useShopStore((s)=>s.changeSwatches);
26
26
  const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
27
27
  const clearModal = useModalStore((s)=>s.clearModal);
28
- const [fonts, setFonts] = useState([]);
28
+ const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
29
+ state
30
+ ]);
31
+ const customFontUrl = useMemo(()=>{
32
+ return createFontUrl(fonts);
33
+ }, [
34
+ fonts
35
+ ]);
29
36
  // Revalidate all query with key match query/
30
37
  const onRevalidateQuery = useCallback(()=>{
31
38
  matchMutate(/query\//, {
@@ -96,24 +103,10 @@ const Toolbox = ()=>{
96
103
  try {
97
104
  const detail = e.detail;
98
105
  if (detail.data) {
99
- let dataBuilder = {};
100
106
  if (detail.type === 'flat') {
101
107
  initNormalizeState(detail.data);
102
- dataBuilder = detail.data;
103
108
  } else {
104
109
  initState(detail.data);
105
- dataBuilder = detail.data.reduceRight((prev, current)=>{
106
- const item = normalizeBuilderData(current);
107
- return {
108
- ...prev,
109
- ...item
110
- };
111
- }, {});
112
- }
113
- // Append link font to head
114
- if (dataBuilder) {
115
- const fonts = getFontsFromDataBuilder(dataBuilder);
116
- setFonts(fonts);
117
110
  }
118
111
  }
119
112
  } catch {
@@ -157,21 +150,11 @@ const Toolbox = ()=>{
157
150
  data: detail.propValue,
158
151
  group: detail.group
159
152
  });
160
- // Check link google font to <head>
161
- if (detail.propValue?.custom) {
162
- const settings = {
163
- [detail.propName]: detail.propValue
164
- };
165
- const currentFonts = JSON.parse(JSON.stringify(fonts));
166
- getFontFromGroupSetting(currentFonts, settings);
167
- setFonts(currentFonts);
168
- }
169
153
  }
170
154
  } catch {
171
155
  //
172
156
  }
173
- }, // eslint-disable-next-line react-hooks/exhaustive-deps
174
- [
157
+ }, [
175
158
  changeItemPropByKey
176
159
  ]);
177
160
  // Move entity
@@ -221,30 +204,24 @@ const Toolbox = ()=>{
221
204
  changeLayoutSettings
222
205
  ]);
223
206
  useEffect(()=>{
224
- if (fonts?.length) {
225
- fonts.forEach((font)=>{
226
- const fontUrl = createFontUrl([
227
- font
228
- ]);
229
- if (fontUrl) {
230
- const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${encodeURI(font.family)}"]`);
231
- if (googleFont) {
232
- if (googleFont.getAttribute('href') !== fontUrl) {
233
- googleFont.setAttribute('href', fontUrl);
234
- }
235
- } else {
236
- const link = document.createElement('link');
237
- link.className = fontElementSettingClassName;
238
- link.dataset.font = encodeURI(font.family);
239
- link.href = fontUrl;
240
- link.rel = 'stylesheet';
241
- document.head.appendChild(link);
242
- }
207
+ if (customFontUrl) {
208
+ const fontId = 'google-font';
209
+ const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
210
+ if (googleFont) {
211
+ if (googleFont.getAttribute('href') !== customFontUrl) {
212
+ googleFont.setAttribute('href', customFontUrl);
243
213
  }
244
- });
214
+ } else {
215
+ const link = document.createElement('link');
216
+ link.className = fontElementSettingClassName;
217
+ link.dataset.font = fontId;
218
+ link.href = customFontUrl;
219
+ link.rel = 'stylesheet';
220
+ document.head.appendChild(link);
221
+ }
245
222
  }
246
223
  }, [
247
- fonts
224
+ customFontUrl
248
225
  ]);
249
226
  useEffect(()=>{
250
227
  window.addEventListener('update-shop-info', onChangeShopInfo);
package/dist/esm/libs/google-fonts.js CHANGED
@@ -9,14 +9,34 @@ async function getFontForUA(url, UA) {
9
9
  }
10
10
  }).then((res)=>res.text());
11
11
  }
12
+ const composeFonts = (fonts)=>{
13
+ const uniqFonts = fonts.filter((font, index, arr)=>{
14
+ return index === arr.findIndex((t)=>t.family === font.family);
15
+ });
16
+ return uniqFonts.map((font)=>{
17
+ const variants = fonts.filter((t)=>t.family === font.family).reduce((acc, t)=>{
18
+ return [
19
+ ...acc,
20
+ ...t.variants
21
+ ];
22
+ }, []).filter((t, index, arr)=>{
23
+ return index === arr.findIndex((v)=>v === t);
24
+ });
25
+ return {
26
+ ...font,
27
+ variants
28
+ };
29
+ });
30
+ };
12
31
  const createFontUrl = (fonts, option)=>{
13
32
  const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
14
33
  if (!googleFonts.length) return;
15
34
  const params = new URLSearchParams();
16
35
  const display = option?.display || 'swap';
17
- const family = googleFonts.filter((font, index, arr)=>{
36
+ const uniqFonts = googleFonts.filter((font, index, arr)=>{
18
37
  return index === arr.findIndex((t)=>t.family === font.family);
19
- }).map((font)=>{
38
+ });
39
+ const family = composeFonts(uniqFonts).map((font)=>{
20
40
  return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
21
41
  }).join('|');
22
42
  params.append('family', family);
@@ -73,4 +93,4 @@ async function getFontStyleFromPageTemplate(pageTemplate) {
73
93
  return await Promise.all(fontStyle);
74
94
  }
75
95
 
76
- export { createFontUrl, getFontFromGlobalStyle, getFontStyleFromPageTemplate, getFonts };
96
+ export { composeFonts, createFontUrl, getFontFromGlobalStyle, getFontStyleFromPageTemplate, getFonts };
package/dist/esm/pages/builder.js CHANGED
@@ -73,7 +73,9 @@ const BuilderPage = ({ components , seo , themeStyle , fontStyle , sectionData ,
73
73
  /*#__PURE__*/ jsx(ImageToLayout, {
74
74
  editorImageToLayout: editorImageToLayout || false
75
75
  }),
76
- /*#__PURE__*/ jsx(AddSectionImageToLayout, {}),
76
+ /*#__PURE__*/ jsx(AddSectionImageToLayout, {
77
+ editorImageToLayout: editorImageToLayout || false
78
+ }),
77
79
  /*#__PURE__*/ jsx("div", {
78
80
  id: "visual-content"
79
81
  }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.13.0-next.9",
3
+ "version": "1.13.7",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",