@gem-sdk/pages 1.25.3 → 1.25.12

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 (15) hide show
  1. package/dist/cjs/components/builder/Toolbox.js +62 -40
  2. package/dist/cjs/libs/helpers/gen-fonts.js +9 -3
  3. package/dist/cjs/pages/builder.js +42 -40
  4. package/dist/cjs/pages/collection-detail.js +12 -10
  5. package/dist/cjs/pages/product-detail.js +18 -16
  6. package/dist/cjs/pages/static-v2.js +14 -12
  7. package/dist/cjs/pages/static.js +13 -11
  8. package/dist/esm/components/builder/Toolbox.js +63 -41
  9. package/dist/esm/libs/helpers/gen-fonts.js +9 -3
  10. package/dist/esm/pages/builder.js +43 -41
  11. package/dist/esm/pages/collection-detail.js +13 -11
  12. package/dist/esm/pages/product-detail.js +19 -17
  13. package/dist/esm/pages/static-v2.js +15 -13
  14. package/dist/esm/pages/static.js +14 -12
  15. package/package.json +2 -2
package/dist/cjs/components/builder/Toolbox.js CHANGED
@@ -12,19 +12,17 @@ var genFonts = require('../../libs/helpers/gen-fonts.js');
12
12
  var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
13
13
 
14
14
  const globalStyleId = 'global-style';
15
- const globalFontId = 'google-font-builder';
16
- const fontElementSettingClassName = 'google-font-element';
17
15
  const Toolbox = ()=>{
18
16
  const matchMutate = core.useMatchMutate();
19
17
  const provider = core.useShopStore((s)=>s.provider);
20
18
  const changeStorefrontInfo = core.useShopStore((s)=>s.changeStorefrontInfo);
19
+ const setDynamicProduct = core.usePageStore((s)=>s.setDynamicProduct);
20
+ const setDynamicCollection = core.usePageStore((s)=>s.setDynamicCollection);
21
21
  const initState = core.useBuilderPreviewStore((s)=>s.initState);
22
22
  const state = core.useBuilderPreviewStore((s)=>s.state);
23
23
  const initNormalizeState = core.useBuilderPreviewStore((s)=>s.forceChangeState);
24
24
  const forceChangeItemProp = core.useBuilderPreviewStore((s)=>s.forceChangeItemProp);
25
25
  const changeItemPropByKey = core.useBuilderPreviewStore((s)=>s.changeItemPropByKey);
26
- const setDynamicProduct = core.useBuilderPreviewStore((s)=>s.setDynamicProduct);
27
- const setDynamicCollection = core.useBuilderPreviewStore((s)=>s.setDynamicCollection);
28
26
  const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
29
27
  const moveItem = core.useBuilderPreviewStore((s)=>s.moveItem);
30
28
  const removeItem = core.useBuilderPreviewStore((s)=>s.removeItem);
@@ -37,11 +35,62 @@ const Toolbox = ()=>{
37
35
  const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
38
36
  state
39
37
  ]);
40
- const customFontUrl = react.useMemo(()=>{
41
- return googleFonts.createFontUrl(fonts);
42
- }, [
43
- fonts
44
- ]);
38
+ const setFontsToHead = (className, fonts)=>{
39
+ // clear fonts
40
+ if (!fonts?.length) {
41
+ const googleFonts = document.querySelectorAll(`.${className}`);
42
+ googleFonts.forEach((googleFont)=>{
43
+ googleFont.remove();
44
+ });
45
+ return;
46
+ }
47
+ // clear fonts not use
48
+ const googleFonts$1 = document.querySelectorAll(`.${className}`);
49
+ googleFonts$1.forEach((googleFont)=>{
50
+ const fontName = googleFont.getAttribute('data-font');
51
+ const variantName = googleFont.getAttribute('data-font-variant');
52
+ if (!fontName || !variantName) {
53
+ googleFont.remove();
54
+ } else {
55
+ const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
56
+ if (!isUse) {
57
+ googleFont.remove();
58
+ }
59
+ }
60
+ });
61
+ // append new fonts
62
+ for (const font of fonts){
63
+ if (font.type == 'google') {
64
+ if (font.variants?.length) {
65
+ for (const variant of font.variants){
66
+ const cloneFont = JSON.parse(JSON.stringify(font));
67
+ cloneFont.variants = [
68
+ variant
69
+ ]; // set single variant. Fix error reload font when change href other variant
70
+ const fontName = cloneFont.family;
71
+ const variantName = variant;
72
+ const url = googleFonts.createFontUrl([
73
+ cloneFont
74
+ ]);
75
+ if (url) {
76
+ const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
77
+ if (googleFont) {
78
+ continue;
79
+ } else {
80
+ const link = document.createElement('link');
81
+ link.className = className;
82
+ link.dataset.font = fontName;
83
+ link.dataset.fontVariant = variantName;
84
+ link.href = url;
85
+ link.rel = 'stylesheet';
86
+ document.head.appendChild(link);
87
+ }
88
+ }
89
+ }
90
+ }
91
+ }
92
+ }
93
+ };
45
94
  // Revalidate all query with key match query/
46
95
  const onRevalidateQuery = react.useCallback(()=>{
47
96
  matchMutate(/query\//, {
@@ -77,22 +126,8 @@ const Toolbox = ()=>{
77
126
  }
78
127
  return item;
79
128
  });
80
- const fontUrl = googleFonts.createFontUrl(font);
81
129
  const globalStyle = document.getElementById(globalStyleId);
82
- const googleFont = document.getElementById(globalFontId);
83
- if (fontUrl) {
84
- if (googleFont) {
85
- if (googleFont.getAttribute('href') !== fontUrl) {
86
- googleFont.setAttribute('href', fontUrl);
87
- }
88
- } else {
89
- const link = document.createElement('link');
90
- link.id = globalFontId;
91
- link.href = fontUrl;
92
- link.rel = 'stylesheet';
93
- document.head.appendChild(link);
94
- }
95
- }
130
+ setFontsToHead('google-font-builder', font);
96
131
  if (globalStyle) {
97
132
  globalStyle.innerHTML = themeStyle;
98
133
  } else {
@@ -254,24 +289,11 @@ const Toolbox = ()=>{
254
289
  setDynamicCollection
255
290
  ]);
256
291
  react.useEffect(()=>{
257
- if (customFontUrl) {
258
- const fontId = 'google-font';
259
- const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
260
- if (googleFont) {
261
- if (googleFont.getAttribute('href') !== customFontUrl) {
262
- googleFont.setAttribute('href', customFontUrl);
263
- }
264
- } else {
265
- const link = document.createElement('link');
266
- link.className = fontElementSettingClassName;
267
- link.dataset.font = fontId;
268
- link.href = customFontUrl;
269
- link.rel = 'stylesheet';
270
- document.head.appendChild(link);
271
- }
292
+ if (fonts) {
293
+ setFontsToHead('google-font-element', fonts);
272
294
  }
273
295
  }, [
274
- customFontUrl
296
+ fonts
275
297
  ]);
276
298
  react.useEffect(()=>{
277
299
  window.addEventListener('update-shop-info', onChangeShopInfo);
package/dist/cjs/libs/helpers/gen-fonts.js CHANGED
@@ -36,11 +36,17 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
36
36
  if (isFontFamily) {
37
37
  isFontFamily.variants.push(customFontWeight);
38
38
  } else {
39
+ const fontVariants = [
40
+ customFontWeight
41
+ ];
42
+ if (customFontWeight !== '700') {
43
+ if (variants.includes('700')) {
44
+ fontVariants.push('700'); // Auto add 700 for bold in editor inline
45
+ }
46
+ }
39
47
  fonts.push({
40
48
  family: customFontFamily,
41
- variants: [
42
- customFontWeight
43
- ],
49
+ variants: fontVariants,
44
50
  subsets: [],
45
51
  type: 'google'
46
52
  });
package/dist/cjs/pages/builder.js CHANGED
@@ -50,48 +50,50 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
50
50
  })
51
51
  ]
52
52
  }),
53
- /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
54
- components: components,
55
- children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
56
- data: sectionData,
57
- children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
58
- state: initState,
59
- isThemeSectionEditor: isThemeSectionEditor,
60
- children: [
61
- /*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
62
- /*#__PURE__*/ jsxRuntime.jsx(Toolbar.default, {}),
63
- /*#__PURE__*/ jsxRuntime.jsx(PopupManager.default, {}),
64
- loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
65
- className: "builder z-1 relative",
66
- children: [
67
- isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
68
- className: "h-[40px] bg-[#f4f4f4]"
69
- }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {}),
70
- /*#__PURE__*/ jsxRuntime.jsx("div", {
71
- id: "storefront",
72
- className: isThemeSectionEditor ? 'theme-section-editor' : '',
73
- children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
74
- children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
53
+ /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
54
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
55
+ components: components,
56
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
57
+ data: sectionData,
58
+ children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
59
+ state: initState,
60
+ isThemeSectionEditor: isThemeSectionEditor,
61
+ children: [
62
+ /*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
63
+ /*#__PURE__*/ jsxRuntime.jsx(Toolbar.default, {}),
64
+ /*#__PURE__*/ jsxRuntime.jsx(PopupManager.default, {}),
65
+ loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
66
+ className: "builder z-1 relative",
67
+ children: [
68
+ isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
69
+ className: "h-[40px] bg-[#f4f4f4]"
70
+ }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {}),
71
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
72
+ id: "storefront",
73
+ className: isThemeSectionEditor ? 'theme-section-editor' : '',
74
+ children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
75
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
76
+ uid: "ROOT"
77
+ })
78
+ }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
75
79
  uid: "ROOT"
76
80
  })
77
- }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
78
- uid: "ROOT"
79
- })
80
- }),
81
- /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
82
- editorImageToLayout: editorImageToLayout || false
83
- }),
84
- /*#__PURE__*/ jsxRuntime.jsx(AddSectionImageToLayout.default, {
85
- editorImageToLayout: editorImageToLayout || false
86
- }),
87
- /*#__PURE__*/ jsxRuntime.jsx("div", {
88
- id: "visual-content"
89
- }),
90
- !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
91
- ]
92
- })
93
- ]
94
- }, "preview")
81
+ }),
82
+ /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
83
+ editorImageToLayout: editorImageToLayout || false
84
+ }),
85
+ /*#__PURE__*/ jsxRuntime.jsx(AddSectionImageToLayout.default, {
86
+ editorImageToLayout: editorImageToLayout || false
87
+ }),
88
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
89
+ id: "visual-content"
90
+ }),
91
+ !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
92
+ ]
93
+ })
94
+ ]
95
+ }, "preview")
96
+ })
95
97
  })
96
98
  })
97
99
  ]
package/dist/cjs/pages/collection-detail.js CHANGED
@@ -40,16 +40,18 @@ const CollectionDetailPage = ({ seo, components, builderData, sectionData, theme
40
40
  })
41
41
  ]
42
42
  }),
43
- /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
44
- components: components,
45
- children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
46
- data: sectionData,
47
- children: /*#__PURE__*/ jsxRuntime.jsx(CollectionProvider, {
48
- collection: collection,
49
- children: builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
50
- state: builderData,
51
- children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
52
- uid: "ROOT"
43
+ /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
44
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
45
+ components: components,
46
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
47
+ data: sectionData,
48
+ children: /*#__PURE__*/ jsxRuntime.jsx(CollectionProvider, {
49
+ collection: collection,
50
+ children: builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
51
+ state: builderData,
52
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
53
+ uid: "ROOT"
54
+ })
53
55
  })
54
56
  })
55
57
  })
package/dist/cjs/pages/product-detail.js CHANGED
@@ -40,23 +40,25 @@ const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, bu
40
40
  })
41
41
  ]
42
42
  }),
43
- /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
44
- components: components,
45
- children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
46
- data: sectionData,
47
- children: /*#__PURE__*/ jsxRuntime.jsxs(ProductProvider, {
48
- product: product,
49
- children: [
50
- builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
51
- state: builderData,
52
- children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
53
- uid: "ROOT"
43
+ /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
44
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
45
+ components: components,
46
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
47
+ data: sectionData,
48
+ children: /*#__PURE__*/ jsxRuntime.jsxs(ProductProvider, {
49
+ product: product,
50
+ children: [
51
+ builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
52
+ state: builderData,
53
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
54
+ uid: "ROOT"
55
+ })
56
+ }),
57
+ /*#__PURE__*/ jsxRuntime.jsx(core.AddOn, {
58
+ name: "sticky-add-to-cart"
54
59
  })
55
- }),
56
- /*#__PURE__*/ jsxRuntime.jsx(core.AddOn, {
57
- name: "sticky-add-to-cart"
58
- })
59
- ]
60
+ ]
61
+ })
60
62
  })
61
63
  })
62
64
  })
package/dist/cjs/pages/static-v2.js CHANGED
@@ -61,18 +61,20 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
61
61
  }, fontStyle))
62
62
  ]
63
63
  }),
64
- /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
65
- components: components,
66
- children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
67
- data: sectionData,
68
- children: builderData?.map((builder)=>/*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
69
- state: builder.data,
70
- lazy: builder.lazy,
71
- priority: builder.priority,
72
- children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
73
- uid: builder.uid
74
- })
75
- }, builder.uid))
64
+ /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
65
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
66
+ components: components,
67
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
68
+ data: sectionData,
69
+ children: builderData?.map((builder)=>/*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
70
+ state: builder.data,
71
+ lazy: builder.lazy,
72
+ priority: builder.priority,
73
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
74
+ uid: builder.uid
75
+ })
76
+ }, builder.uid))
77
+ })
76
78
  })
77
79
  })
78
80
  ]
package/dist/cjs/pages/static.js CHANGED
@@ -52,17 +52,19 @@ const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fon
52
52
  })
53
53
  ]
54
54
  }),
55
- /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
56
- components: components,
57
- children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
58
- data: sectionData,
59
- children: /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
60
- children: builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
61
- state: builderData,
62
- children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
63
- uid: "ROOT"
64
- })
65
- }, "body")
55
+ /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
56
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
57
+ components: components,
58
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
59
+ data: sectionData,
60
+ children: /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
61
+ children: builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
62
+ state: builderData,
63
+ children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
64
+ uid: "ROOT"
65
+ })
66
+ }, "body")
67
+ })
66
68
  })
67
69
  })
68
70
  })
package/dist/esm/components/builder/Toolbox.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
2
+ import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
3
3
  import { memo, useMemo, useCallback, useEffect } from 'react';
4
4
  import { getStorefrontApi } from '../../libs/get-storefront-api.js';
5
5
  import { createFontUrl } from '../../libs/google-fonts.js';
@@ -8,19 +8,17 @@ import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
8
8
  import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
9
9
 
10
10
  const globalStyleId = 'global-style';
11
- const globalFontId = 'google-font-builder';
12
- const fontElementSettingClassName = 'google-font-element';
13
11
  const Toolbox = ()=>{
14
12
  const matchMutate = useMatchMutate();
15
13
  const provider = useShopStore((s)=>s.provider);
16
14
  const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
15
+ const setDynamicProduct = usePageStore((s)=>s.setDynamicProduct);
16
+ const setDynamicCollection = usePageStore((s)=>s.setDynamicCollection);
17
17
  const initState = useBuilderPreviewStore((s)=>s.initState);
18
18
  const state = useBuilderPreviewStore((s)=>s.state);
19
19
  const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
20
20
  const forceChangeItemProp = useBuilderPreviewStore((s)=>s.forceChangeItemProp);
21
21
  const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
22
- const setDynamicProduct = useBuilderPreviewStore((s)=>s.setDynamicProduct);
23
- const setDynamicCollection = useBuilderPreviewStore((s)=>s.setDynamicCollection);
24
22
  const addItem = useBuilderPreviewStore((s)=>s.addItem);
25
23
  const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
26
24
  const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
@@ -33,11 +31,62 @@ const Toolbox = ()=>{
33
31
  const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
34
32
  state
35
33
  ]);
36
- const customFontUrl = useMemo(()=>{
37
- return createFontUrl(fonts);
38
- }, [
39
- fonts
40
- ]);
34
+ const setFontsToHead = (className, fonts)=>{
35
+ // clear fonts
36
+ if (!fonts?.length) {
37
+ const googleFonts = document.querySelectorAll(`.${className}`);
38
+ googleFonts.forEach((googleFont)=>{
39
+ googleFont.remove();
40
+ });
41
+ return;
42
+ }
43
+ // clear fonts not use
44
+ const googleFonts = document.querySelectorAll(`.${className}`);
45
+ googleFonts.forEach((googleFont)=>{
46
+ const fontName = googleFont.getAttribute('data-font');
47
+ const variantName = googleFont.getAttribute('data-font-variant');
48
+ if (!fontName || !variantName) {
49
+ googleFont.remove();
50
+ } else {
51
+ const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
52
+ if (!isUse) {
53
+ googleFont.remove();
54
+ }
55
+ }
56
+ });
57
+ // append new fonts
58
+ for (const font of fonts){
59
+ if (font.type == 'google') {
60
+ if (font.variants?.length) {
61
+ for (const variant of font.variants){
62
+ const cloneFont = JSON.parse(JSON.stringify(font));
63
+ cloneFont.variants = [
64
+ variant
65
+ ]; // set single variant. Fix error reload font when change href other variant
66
+ const fontName = cloneFont.family;
67
+ const variantName = variant;
68
+ const url = createFontUrl([
69
+ cloneFont
70
+ ]);
71
+ if (url) {
72
+ const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
73
+ if (googleFont) {
74
+ continue;
75
+ } else {
76
+ const link = document.createElement('link');
77
+ link.className = className;
78
+ link.dataset.font = fontName;
79
+ link.dataset.fontVariant = variantName;
80
+ link.href = url;
81
+ link.rel = 'stylesheet';
82
+ document.head.appendChild(link);
83
+ }
84
+ }
85
+ }
86
+ }
87
+ }
88
+ }
89
+ };
41
90
  // Revalidate all query with key match query/
42
91
  const onRevalidateQuery = useCallback(()=>{
43
92
  matchMutate(/query\//, {
@@ -73,22 +122,8 @@ const Toolbox = ()=>{
73
122
  }
74
123
  return item;
75
124
  });
76
- const fontUrl = createFontUrl(font);
77
125
  const globalStyle = document.getElementById(globalStyleId);
78
- const googleFont = document.getElementById(globalFontId);
79
- if (fontUrl) {
80
- if (googleFont) {
81
- if (googleFont.getAttribute('href') !== fontUrl) {
82
- googleFont.setAttribute('href', fontUrl);
83
- }
84
- } else {
85
- const link = document.createElement('link');
86
- link.id = globalFontId;
87
- link.href = fontUrl;
88
- link.rel = 'stylesheet';
89
- document.head.appendChild(link);
90
- }
91
- }
126
+ setFontsToHead('google-font-builder', font);
92
127
  if (globalStyle) {
93
128
  globalStyle.innerHTML = themeStyle;
94
129
  } else {
@@ -250,24 +285,11 @@ const Toolbox = ()=>{
250
285
  setDynamicCollection
251
286
  ]);
252
287
  useEffect(()=>{
253
- if (customFontUrl) {
254
- const fontId = 'google-font';
255
- const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
256
- if (googleFont) {
257
- if (googleFont.getAttribute('href') !== customFontUrl) {
258
- googleFont.setAttribute('href', customFontUrl);
259
- }
260
- } else {
261
- const link = document.createElement('link');
262
- link.className = fontElementSettingClassName;
263
- link.dataset.font = fontId;
264
- link.href = customFontUrl;
265
- link.rel = 'stylesheet';
266
- document.head.appendChild(link);
267
- }
288
+ if (fonts) {
289
+ setFontsToHead('google-font-element', fonts);
268
290
  }
269
291
  }, [
270
- customFontUrl
292
+ fonts
271
293
  ]);
272
294
  useEffect(()=>{
273
295
  window.addEventListener('update-shop-info', onChangeShopInfo);
package/dist/esm/libs/helpers/gen-fonts.js CHANGED
@@ -34,11 +34,17 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
34
34
  if (isFontFamily) {
35
35
  isFontFamily.variants.push(customFontWeight);
36
36
  } else {
37
+ const fontVariants = [
38
+ customFontWeight
39
+ ];
40
+ if (customFontWeight !== '700') {
41
+ if (variants.includes('700')) {
42
+ fontVariants.push('700'); // Auto add 700 for bold in editor inline
43
+ }
44
+ }
37
45
  fonts.push({
38
46
  family: customFontFamily,
39
- variants: [
40
- customFontWeight
41
- ],
47
+ variants: fontVariants,
42
48
  subsets: [],
43
49
  type: 'google'
44
50
  });
package/dist/esm/pages/builder.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
2
+ import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
3
3
  import { NextSeo } from 'next-seo';
4
4
  import Head from 'next/head';
5
5
  import { useState, useMemo, useEffect } from 'react';
@@ -48,48 +48,50 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
48
48
  })
49
49
  ]
50
50
  }),
51
- /*#__PURE__*/ jsx(BuilderComponentProvider, {
52
- components: components,
53
- children: /*#__PURE__*/ jsx(SectionProvider, {
54
- data: sectionData,
55
- children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
56
- state: initState,
57
- isThemeSectionEditor: isThemeSectionEditor,
58
- children: [
59
- /*#__PURE__*/ jsx(Toolbox, {}),
60
- /*#__PURE__*/ jsx(Toolbar, {}),
61
- /*#__PURE__*/ jsx(PopupManager, {}),
62
- loadSuccess && /*#__PURE__*/ jsxs("div", {
63
- className: "builder z-1 relative",
64
- children: [
65
- isThemeSectionEditor ? /*#__PURE__*/ jsx("div", {
66
- className: "h-[40px] bg-[#f4f4f4]"
67
- }) : /*#__PURE__*/ jsx(Header, {}),
68
- /*#__PURE__*/ jsx("div", {
69
- id: "storefront",
70
- className: isThemeSectionEditor ? 'theme-section-editor' : '',
71
- children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
72
- children: /*#__PURE__*/ jsx(RenderPreview, {
51
+ /*#__PURE__*/ jsx(PageProvider, {
52
+ children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
53
+ components: components,
54
+ children: /*#__PURE__*/ jsx(SectionProvider, {
55
+ data: sectionData,
56
+ children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
57
+ state: initState,
58
+ isThemeSectionEditor: isThemeSectionEditor,
59
+ children: [
60
+ /*#__PURE__*/ jsx(Toolbox, {}),
61
+ /*#__PURE__*/ jsx(Toolbar, {}),
62
+ /*#__PURE__*/ jsx(PopupManager, {}),
63
+ loadSuccess && /*#__PURE__*/ jsxs("div", {
64
+ className: "builder z-1 relative",
65
+ children: [
66
+ isThemeSectionEditor ? /*#__PURE__*/ jsx("div", {
67
+ className: "h-[40px] bg-[#f4f4f4]"
68
+ }) : /*#__PURE__*/ jsx(Header, {}),
69
+ /*#__PURE__*/ jsx("div", {
70
+ id: "storefront",
71
+ className: isThemeSectionEditor ? 'theme-section-editor' : '',
72
+ children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
73
+ children: /*#__PURE__*/ jsx(RenderPreview, {
74
+ uid: "ROOT"
75
+ })
76
+ }) : /*#__PURE__*/ jsx(RenderPreview, {
73
77
  uid: "ROOT"
74
78
  })
75
- }) : /*#__PURE__*/ jsx(RenderPreview, {
76
- uid: "ROOT"
77
- })
78
- }),
79
- /*#__PURE__*/ jsx(ImageToLayout, {
80
- editorImageToLayout: editorImageToLayout || false
81
- }),
82
- /*#__PURE__*/ jsx(AddSectionImageToLayout, {
83
- editorImageToLayout: editorImageToLayout || false
84
- }),
85
- /*#__PURE__*/ jsx("div", {
86
- id: "visual-content"
87
- }),
88
- !isThemeSectionEditor && /*#__PURE__*/ jsx(Footer, {})
89
- ]
90
- })
91
- ]
92
- }, "preview")
79
+ }),
80
+ /*#__PURE__*/ jsx(ImageToLayout, {
81
+ editorImageToLayout: editorImageToLayout || false
82
+ }),
83
+ /*#__PURE__*/ jsx(AddSectionImageToLayout, {
84
+ editorImageToLayout: editorImageToLayout || false
85
+ }),
86
+ /*#__PURE__*/ jsx("div", {
87
+ id: "visual-content"
88
+ }),
89
+ !isThemeSectionEditor && /*#__PURE__*/ jsx(Footer, {})
90
+ ]
91
+ })
92
+ ]
93
+ }, "preview")
94
+ })
93
95
  })
94
96
  })
95
97
  ]
package/dist/esm/pages/collection-detail.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
2
+ import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
3
3
  import { NextSeo } from 'next-seo';
4
4
  import dynamic from 'next/dynamic';
5
5
  import Head from 'next/head';
@@ -36,16 +36,18 @@ const CollectionDetailPage = ({ seo, components, builderData, sectionData, theme
36
36
  })
37
37
  ]
38
38
  }),
39
- /*#__PURE__*/ jsx(BuilderComponentProvider, {
40
- components: components,
41
- children: /*#__PURE__*/ jsx(SectionProvider, {
42
- data: sectionData,
43
- children: /*#__PURE__*/ jsx(CollectionProvider, {
44
- collection: collection,
45
- children: builderData && /*#__PURE__*/ jsx(BuilderProvider, {
46
- state: builderData,
47
- children: /*#__PURE__*/ jsx(Render, {
48
- uid: "ROOT"
39
+ /*#__PURE__*/ jsx(PageProvider, {
40
+ children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
41
+ components: components,
42
+ children: /*#__PURE__*/ jsx(SectionProvider, {
43
+ data: sectionData,
44
+ children: /*#__PURE__*/ jsx(CollectionProvider, {
45
+ collection: collection,
46
+ children: builderData && /*#__PURE__*/ jsx(BuilderProvider, {
47
+ state: builderData,
48
+ children: /*#__PURE__*/ jsx(Render, {
49
+ uid: "ROOT"
50
+ })
49
51
  })
50
52
  })
51
53
  })
package/dist/esm/pages/product-detail.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render, AddOn } from '@gem-sdk/core';
2
+ import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render, AddOn } from '@gem-sdk/core';
3
3
  import { NextSeo } from 'next-seo';
4
4
  import dynamic from 'next/dynamic';
5
5
  import Head from 'next/head';
@@ -36,23 +36,25 @@ const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, bu
36
36
  })
37
37
  ]
38
38
  }),
39
- /*#__PURE__*/ jsx(BuilderComponentProvider, {
40
- components: components,
41
- children: /*#__PURE__*/ jsx(SectionProvider, {
42
- data: sectionData,
43
- children: /*#__PURE__*/ jsxs(ProductProvider, {
44
- product: product,
45
- children: [
46
- builderData && /*#__PURE__*/ jsx(BuilderProvider, {
47
- state: builderData,
48
- children: /*#__PURE__*/ jsx(Render, {
49
- uid: "ROOT"
39
+ /*#__PURE__*/ jsx(PageProvider, {
40
+ children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
41
+ components: components,
42
+ children: /*#__PURE__*/ jsx(SectionProvider, {
43
+ data: sectionData,
44
+ children: /*#__PURE__*/ jsxs(ProductProvider, {
45
+ product: product,
46
+ children: [
47
+ builderData && /*#__PURE__*/ jsx(BuilderProvider, {
48
+ state: builderData,
49
+ children: /*#__PURE__*/ jsx(Render, {
50
+ uid: "ROOT"
51
+ })
52
+ }),
53
+ /*#__PURE__*/ jsx(AddOn, {
54
+ name: "sticky-add-to-cart"
50
55
  })
51
- }),
52
- /*#__PURE__*/ jsx(AddOn, {
53
- name: "sticky-add-to-cart"
54
- })
55
- ]
56
+ ]
57
+ })
56
58
  })
57
59
  })
58
60
  })
package/dist/esm/pages/static-v2.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
2
+ import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
3
3
  import { NextSeo } from 'next-seo';
4
4
  import Head from 'next/head';
5
5
  import { useRouter } from 'next/router';
@@ -59,18 +59,20 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
59
59
  }, fontStyle))
60
60
  ]
61
61
  }),
62
- /*#__PURE__*/ jsx(BuilderComponentProvider, {
63
- components: components,
64
- children: /*#__PURE__*/ jsx(SectionProvider, {
65
- data: sectionData,
66
- children: builderData?.map((builder)=>/*#__PURE__*/ jsx(BuilderProvider, {
67
- state: builder.data,
68
- lazy: builder.lazy,
69
- priority: builder.priority,
70
- children: /*#__PURE__*/ jsx(Render, {
71
- uid: builder.uid
72
- })
73
- }, builder.uid))
62
+ /*#__PURE__*/ jsx(PageProvider, {
63
+ children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
64
+ components: components,
65
+ children: /*#__PURE__*/ jsx(SectionProvider, {
66
+ data: sectionData,
67
+ children: builderData?.map((builder)=>/*#__PURE__*/ jsx(BuilderProvider, {
68
+ state: builder.data,
69
+ lazy: builder.lazy,
70
+ priority: builder.priority,
71
+ children: /*#__PURE__*/ jsx(Render, {
72
+ uid: builder.uid
73
+ })
74
+ }, builder.uid))
75
+ })
74
76
  })
75
77
  })
76
78
  ]
package/dist/esm/pages/static.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
2
+ import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
3
3
  import { NextSeo } from 'next-seo';
4
4
  import Head from 'next/head';
5
5
  import { useRouter } from 'next/router';
@@ -48,17 +48,19 @@ const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fon
48
48
  })
49
49
  ]
50
50
  }),
51
- /*#__PURE__*/ jsx(BuilderComponentProvider, {
52
- components: components,
53
- children: /*#__PURE__*/ jsx(SectionProvider, {
54
- data: sectionData,
55
- children: /*#__PURE__*/ jsx(Fragment, {
56
- children: builderData && /*#__PURE__*/ jsx(BuilderProvider, {
57
- state: builderData,
58
- children: /*#__PURE__*/ jsx(Render, {
59
- uid: "ROOT"
60
- })
61
- }, "body")
51
+ /*#__PURE__*/ jsx(PageProvider, {
52
+ children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
53
+ components: components,
54
+ children: /*#__PURE__*/ jsx(SectionProvider, {
55
+ data: sectionData,
56
+ children: /*#__PURE__*/ jsx(Fragment, {
57
+ children: builderData && /*#__PURE__*/ jsx(BuilderProvider, {
58
+ state: builderData,
59
+ children: /*#__PURE__*/ jsx(Render, {
60
+ uid: "ROOT"
61
+ })
62
+ }, "body")
63
+ })
62
64
  })
63
65
  })
64
66
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/pages",
3
- "version": "1.25.3",
3
+ "version": "1.25.12",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  "next-seo": "^6.0.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@gem-sdk/core": "1.25.0",
28
+ "@gem-sdk/core": "1.25.11",
29
29
  "@gem-sdk/plugin-cookie-bar": "1.25.0",
30
30
  "@gem-sdk/plugin-quick-view": "1.25.0",
31
31
  "@gem-sdk/plugin-sticky-add-to-cart": "1.25.0"