@gem-sdk/pages 2.0.0-dev.890 → 2.0.0-staging.120
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.
- package/dist/cjs/components/ErrorBoundary.js +41 -1
- package/dist/cjs/components/ErrorFallback.js +27 -1
- package/dist/cjs/components/FacebookPixel.js +34 -3
- package/dist/cjs/components/FooterForPostPurchase.js +35 -1
- package/dist/cjs/components/GoogleAnalytic.js +66 -5
- package/dist/cjs/components/TikTokPixel.js +20 -3
- package/dist/cjs/components/builder/Body.js +37 -0
- package/dist/cjs/components/builder/Footer.js +155 -0
- package/dist/cjs/components/builder/Header.js +188 -0
- package/dist/cjs/components/builder/PopupManager.js +64 -1
- package/dist/cjs/components/builder/SwitchView.js +185 -0
- package/dist/cjs/components/builder/Toolbar.js +701 -1
- package/dist/cjs/components/builder/Toolbox.js +485 -1
- package/dist/cjs/components/builder/const.js +56 -0
- package/dist/cjs/components/builder/toolbar/const.js +7 -0
- package/dist/cjs/components/builder/toolbar/utils/findDOMClosest.js +41 -0
- package/dist/cjs/components/builder/toolbar/utils/findOverflowParent.js +20 -0
- package/dist/cjs/components/builder/toolbar/utils/getChildrenByAttrSelector.js +18 -0
- package/dist/cjs/components/builder/toolbar/utils/getDOMElementParents.js +32 -0
- package/dist/cjs/components/builder/toolbar/utils/isOverParent.js +16 -0
- package/dist/cjs/components/builder/toolbar/utils/isOverToolbarPosition.js +12 -0
- package/dist/cjs/components/builder/toolbar/utils/isSection.js +8 -0
- package/dist/cjs/components/builder/toolbar/utils/notVisible.js +8 -0
- package/dist/cjs/components/builder/toolbar/utils/waitForElementToExist.js +27 -0
- package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js +151 -1
- package/dist/cjs/components/image-to-layout/DropElement.js +167 -1
- package/dist/cjs/components/image-to-layout/ImageToLayout.js +42 -1
- package/dist/cjs/index.js +80 -1
- package/dist/cjs/layouts/main.js +31 -1
- package/dist/cjs/libs/api/get-builder-props.js +46 -1
- package/dist/cjs/libs/api/get-collection-props.js +68 -1
- package/dist/cjs/libs/api/get-home-page-props-v2.js +145 -1
- package/dist/cjs/libs/api/get-home-page-props.js +151 -1
- package/dist/cjs/libs/api/get-post-purchase-props-preview.js +268 -1
- package/dist/cjs/libs/api/get-preview-props.js +18 -1
- package/dist/cjs/libs/api/get-product-props.js +73 -1
- package/dist/cjs/libs/api/get-static-page-props-preview.js +155 -1
- package/dist/cjs/libs/api/get-static-page-props-v2.js +164 -1
- package/dist/cjs/libs/api/get-static-page-props.js +148 -1
- package/dist/cjs/libs/custom-fonts.js +60 -6
- package/dist/cjs/libs/fetcher.js +100 -1
- package/dist/cjs/libs/get-layout.js +13 -1
- package/dist/cjs/libs/get-storefront-api.js +12 -1
- package/dist/cjs/libs/getStaticPaths.js +10 -1
- package/dist/cjs/libs/google-fonts.js +118 -1
- package/dist/cjs/libs/helpers/check-option-font.js +65 -0
- package/dist/cjs/libs/helpers/common.js +27 -1
- package/dist/cjs/libs/helpers/gen-css.js +135 -1
- package/dist/cjs/libs/helpers/gen-fonts.js +90 -1
- package/dist/cjs/libs/helpers/generate-manifres.js +5 -1
- package/dist/cjs/libs/helpers/get-fallback.js +34 -1
- package/dist/cjs/libs/helpers/normalize.js +111 -1
- package/dist/cjs/libs/helpers/parse-json.js +16 -1
- package/dist/cjs/libs/helpers/user-agent.js +7 -1
- package/dist/cjs/libs/hooks/use-tracking-view.js +43 -1
- package/dist/cjs/libs/hooks/usePagePreview.js +92 -1
- package/dist/cjs/libs/parse-html.js +34 -1
- package/dist/cjs/libs/shopify-cdn-with-google-fonts.js +1845 -1
- package/dist/cjs/pages/404.js +43 -1
- package/dist/cjs/pages/500.js +74 -1
- package/dist/cjs/pages/CollectionGlobalProvider.js +59 -1
- package/dist/cjs/pages/builder.js +115 -1
- package/dist/cjs/pages/collection-detail.js +64 -1
- package/dist/cjs/pages/preview.js +26 -1
- package/dist/cjs/pages/product-detail.js +69 -1
- package/dist/cjs/pages/static-v2.js +139 -1
- package/dist/cjs/pages/static.js +75 -1
- package/dist/cjs/store/libs-store.js +14 -0
- package/dist/esm/components/ErrorBoundary.js +39 -1
- package/dist/esm/components/ErrorFallback.js +25 -1
- package/dist/esm/components/FacebookPixel.js +32 -3
- package/dist/esm/components/FooterForPostPurchase.js +31 -1
- package/dist/esm/components/GoogleAnalytic.js +64 -5
- package/dist/esm/components/TikTokPixel.js +18 -3
- package/dist/esm/components/builder/Body.js +33 -0
- package/dist/esm/components/builder/Footer.js +151 -0
- package/dist/esm/components/builder/Header.js +184 -0
- package/dist/esm/components/builder/PopupManager.js +60 -1
- package/dist/esm/components/builder/SwitchView.js +181 -0
- package/dist/esm/components/builder/Toolbar.js +697 -1
- package/dist/esm/components/builder/Toolbox.js +481 -1
- package/dist/esm/components/builder/const.js +54 -0
- package/dist/esm/components/builder/toolbar/const.js +4 -0
- package/dist/esm/components/builder/toolbar/utils/findDOMClosest.js +39 -0
- package/dist/esm/components/builder/toolbar/utils/findOverflowParent.js +18 -0
- package/dist/esm/components/builder/toolbar/utils/getChildrenByAttrSelector.js +16 -0
- package/dist/esm/components/builder/toolbar/utils/getDOMElementParents.js +30 -0
- package/dist/esm/components/builder/toolbar/utils/isOverParent.js +14 -0
- package/dist/esm/components/builder/toolbar/utils/isOverToolbarPosition.js +10 -0
- package/dist/esm/components/builder/toolbar/utils/isSection.js +6 -0
- package/dist/esm/components/builder/toolbar/utils/notVisible.js +6 -0
- package/dist/esm/components/builder/toolbar/utils/waitForElementToExist.js +25 -0
- package/dist/esm/components/image-to-layout/AddSectionImageToLayout.js +147 -1
- package/dist/esm/components/image-to-layout/DropElement.js +165 -1
- package/dist/esm/components/image-to-layout/ImageToLayout.js +38 -1
- package/dist/esm/index.js +35 -1
- package/dist/esm/layouts/main.js +27 -1
- package/dist/esm/libs/api/get-builder-props.js +44 -1
- package/dist/esm/libs/api/get-collection-props.js +66 -1
- package/dist/esm/libs/api/get-home-page-props-v2.js +143 -1
- package/dist/esm/libs/api/get-home-page-props.js +149 -1
- package/dist/esm/libs/api/get-post-purchase-props-preview.js +260 -1
- package/dist/esm/libs/api/get-preview-props.js +16 -1
- package/dist/esm/libs/api/get-product-props.js +71 -1
- package/dist/esm/libs/api/get-static-page-props-preview.js +153 -1
- package/dist/esm/libs/api/get-static-page-props-v2.js +162 -1
- package/dist/esm/libs/api/get-static-page-props.js +146 -1
- package/dist/esm/libs/custom-fonts.js +55 -6
- package/dist/esm/libs/fetcher.js +96 -1
- package/dist/esm/libs/get-layout.js +11 -1
- package/dist/esm/libs/get-storefront-api.js +10 -1
- package/dist/esm/libs/getStaticPaths.js +8 -1
- package/dist/esm/libs/google-fonts.js +112 -1
- package/dist/esm/libs/helpers/check-option-font.js +63 -0
- package/dist/esm/libs/helpers/common.js +24 -1
- package/dist/esm/libs/helpers/gen-css.js +133 -1
- package/dist/esm/libs/helpers/gen-fonts.js +87 -1
- package/dist/esm/libs/helpers/generate-manifres.js +3 -1
- package/dist/esm/libs/helpers/get-fallback.js +32 -1
- package/dist/esm/libs/helpers/normalize.js +103 -1
- package/dist/esm/libs/helpers/parse-json.js +13 -1
- package/dist/esm/libs/helpers/user-agent.js +5 -1
- package/dist/esm/libs/hooks/use-tracking-view.js +41 -1
- package/dist/esm/libs/hooks/usePagePreview.js +90 -1
- package/dist/esm/libs/parse-html.js +32 -1
- package/dist/esm/libs/shopify-cdn-with-google-fonts.js +1843 -1
- package/dist/esm/pages/404.js +41 -1
- package/dist/esm/pages/500.js +72 -1
- package/dist/esm/pages/CollectionGlobalProvider.js +55 -1
- package/dist/esm/pages/builder.js +113 -1
- package/dist/esm/pages/collection-detail.js +60 -1
- package/dist/esm/pages/preview.js +24 -1
- package/dist/esm/pages/product-detail.js +65 -1
- package/dist/esm/pages/static-v2.js +137 -1
- package/dist/esm/pages/static.js +71 -1
- package/dist/esm/store/libs-store.js +12 -0
- package/dist/types/index.d.ts +50 -34
- package/package.json +8 -5
- package/dist/cjs/components/Footer.js +0 -1
- package/dist/cjs/components/Header.js +0 -1
- package/dist/cjs/components/builder/toolbar/Onboarding.js +0 -1
- package/dist/esm/components/Footer.js +0 -1
- package/dist/esm/components/Header.js +0 -1
- package/dist/esm/components/builder/toolbar/Onboarding.js +0 -1
|
@@ -1 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
const getStorefrontApi = (handle, provider)=>{
|
|
2
|
+
switch(provider){
|
|
3
|
+
case 'BIGCOMMERCE':
|
|
4
|
+
return `https://${handle}.bigcommerce.com`;
|
|
5
|
+
default:
|
|
6
|
+
return `https://${handle}.myshopify.com/api/2022-07/graphql.json`;
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { getStorefrontApi };
|
|
@@ -1 +1,112 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import { checkNotInOptionFont } from './helpers/check-option-font.js';
|
|
2
|
+
import { getFontsFromDataBuilder } from './helpers/gen-fonts.js';
|
|
3
|
+
|
|
4
|
+
const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
|
|
5
|
+
const IE_UA = 'Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko';
|
|
6
|
+
async function getFontForUA(url, UA) {
|
|
7
|
+
return fetch(url, {
|
|
8
|
+
headers: {
|
|
9
|
+
'User-Agent': UA
|
|
10
|
+
}
|
|
11
|
+
}).then((res)=>{
|
|
12
|
+
if (res.status === 200) {
|
|
13
|
+
return res.text();
|
|
14
|
+
}
|
|
15
|
+
return '';
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
const composeFonts = (fonts)=>{
|
|
19
|
+
const uniqFonts = fonts.filter((font, index, arr)=>{
|
|
20
|
+
return index === arr.findIndex((t)=>t.family === font.family);
|
|
21
|
+
});
|
|
22
|
+
return uniqFonts.map((font)=>{
|
|
23
|
+
const variants = fonts.filter((t)=>t.family === font.family).reduce((acc, t)=>{
|
|
24
|
+
return [
|
|
25
|
+
...acc,
|
|
26
|
+
...t.variants
|
|
27
|
+
];
|
|
28
|
+
}, []).filter((t, index, arr)=>{
|
|
29
|
+
return index === arr.findIndex((v)=>v === t);
|
|
30
|
+
});
|
|
31
|
+
return {
|
|
32
|
+
...font,
|
|
33
|
+
variants
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
const createFontUrl = (fonts, option, fontType)=>{
|
|
38
|
+
const mainFonts = fonts.filter((font)=>{
|
|
39
|
+
return !([
|
|
40
|
+
'bunny',
|
|
41
|
+
'google'
|
|
42
|
+
].includes(font.type) && checkNotInOptionFont(font.family, fontType || 'google')) && (font.type === 'google' || font.type === 'bunny' || !font.type);
|
|
43
|
+
});
|
|
44
|
+
if (!mainFonts.length) return;
|
|
45
|
+
const params = new URLSearchParams();
|
|
46
|
+
const display = option?.display || 'swap';
|
|
47
|
+
const uniqFonts = mainFonts.filter((font, index, arr)=>{
|
|
48
|
+
return index === arr.findIndex((t)=>t.family === font.family);
|
|
49
|
+
});
|
|
50
|
+
const family = composeFonts(uniqFonts).map((font)=>{
|
|
51
|
+
return `${font.family.replace(/ /g, '+')}:${font.variants.join(',')}`;
|
|
52
|
+
}).join('|');
|
|
53
|
+
params.append('family', family);
|
|
54
|
+
params.append('display', display);
|
|
55
|
+
if (option?.subset) {
|
|
56
|
+
params.append('subset', option.subset);
|
|
57
|
+
}
|
|
58
|
+
if (option?.effect) {
|
|
59
|
+
params.append('effect', option.effect);
|
|
60
|
+
}
|
|
61
|
+
const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
|
|
62
|
+
const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
|
|
63
|
+
return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
|
|
64
|
+
};
|
|
65
|
+
// eslint-disable-next-line max-params
|
|
66
|
+
async function getFonts(fonts, option, isImportFontByUrl = true, fontType) {
|
|
67
|
+
/**
|
|
68
|
+
* The order of IE -> Chrome is important, other wise chrome starts loading woff1.
|
|
69
|
+
* CSS cascading 🤷♂️.
|
|
70
|
+
*/ const url = createFontUrl(fonts, option, fontType);
|
|
71
|
+
if (!url) return '';
|
|
72
|
+
try {
|
|
73
|
+
if (isImportFontByUrl) return `@import url('${url}');`;
|
|
74
|
+
const [ie, chrome] = await Promise.all([
|
|
75
|
+
getFontForUA(url, IE_UA),
|
|
76
|
+
getFontForUA(url, CHROME_UA)
|
|
77
|
+
]);
|
|
78
|
+
const maxSize = 50; // 50KB
|
|
79
|
+
const value = ie + chrome;
|
|
80
|
+
if (maxSize) {
|
|
81
|
+
const textEncoder = new TextEncoder();
|
|
82
|
+
const size = value ? textEncoder.encode(value).length : 0;
|
|
83
|
+
if (Math.ceil(size / 1024) >= maxSize) {
|
|
84
|
+
return `@import url('${url}');`;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
return value;
|
|
88
|
+
} catch (e) {
|
|
89
|
+
return '';
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
const getFontFromGlobalStyle = (data, sourceFont)=>{
|
|
93
|
+
if (!data) return '';
|
|
94
|
+
try {
|
|
95
|
+
const globalStyle = JSON.parse(data);
|
|
96
|
+
const fontData = globalStyle?.font ?? {};
|
|
97
|
+
const fonts = Object.entries(fontData).map(([, value])=>{
|
|
98
|
+
return value;
|
|
99
|
+
});
|
|
100
|
+
return getFonts(fonts, undefined, undefined, sourceFont);
|
|
101
|
+
} catch {
|
|
102
|
+
return '';
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
async function getFontStyleFromPageTemplate(pageTemplate, sourceFont) {
|
|
106
|
+
const fontStyle = pageTemplate.map((sectionData)=>{
|
|
107
|
+
return getFonts(getFontsFromDataBuilder(sectionData.data), undefined, undefined, sourceFont);
|
|
108
|
+
});
|
|
109
|
+
return await Promise.all(fontStyle);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export { composeFonts, createFontUrl, getFontFromGlobalStyle, getFontStyleFromPageTemplate, getFonts };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
const listFontsNotInBunny = [
|
|
2
|
+
'Anton SC',
|
|
3
|
+
'Arsenal SC',
|
|
4
|
+
'Baskervville SC',
|
|
5
|
+
'Beiruti',
|
|
6
|
+
'Bodoni Moda SC',
|
|
7
|
+
'Bona Nova SC',
|
|
8
|
+
'Bungee Tint',
|
|
9
|
+
'Edu AU VIC WA NT Hand',
|
|
10
|
+
'Fustat',
|
|
11
|
+
'Ga Maamli',
|
|
12
|
+
'Kalnia Glaze',
|
|
13
|
+
'Maname',
|
|
14
|
+
'Matemasie',
|
|
15
|
+
'Material Icons',
|
|
16
|
+
'Material Icons Outlined',
|
|
17
|
+
'Material Icons Round',
|
|
18
|
+
'Material Icons Sharp',
|
|
19
|
+
'Material Icons Two Tone',
|
|
20
|
+
'Material Symbols Outlined',
|
|
21
|
+
'Material Symbols Rounded',
|
|
22
|
+
'Material Symbols Sharp',
|
|
23
|
+
'Moderustic',
|
|
24
|
+
'New Amsterdam',
|
|
25
|
+
'Playwrite AR',
|
|
26
|
+
'Playwrite AT',
|
|
27
|
+
'Playwrite BE VLG',
|
|
28
|
+
'Playwrite BE WAL',
|
|
29
|
+
'Playwrite CL',
|
|
30
|
+
'Playwrite CU',
|
|
31
|
+
'Playwrite CZ',
|
|
32
|
+
'Playwrite DK Loopet',
|
|
33
|
+
'Playwrite DK Uloopet',
|
|
34
|
+
'Playwrite HR',
|
|
35
|
+
'Playwrite HR Lijeva',
|
|
36
|
+
'Playwrite HU',
|
|
37
|
+
'Playwrite PE',
|
|
38
|
+
'SUSE',
|
|
39
|
+
'Sankofa Display',
|
|
40
|
+
'Wittgenstein',
|
|
41
|
+
'Zain'
|
|
42
|
+
];
|
|
43
|
+
const listFontsNotInGoogle = [
|
|
44
|
+
'Arima Madurai',
|
|
45
|
+
'Coda Caption',
|
|
46
|
+
'Fredoka One',
|
|
47
|
+
'Gentium Book Basic',
|
|
48
|
+
'Kantumruy',
|
|
49
|
+
'Merienda One',
|
|
50
|
+
'Source Sans Pro',
|
|
51
|
+
'Source Serif Pro',
|
|
52
|
+
'Briem Hand',
|
|
53
|
+
'Pushster'
|
|
54
|
+
];
|
|
55
|
+
const objectFont = {
|
|
56
|
+
bunny: listFontsNotInBunny,
|
|
57
|
+
google: listFontsNotInGoogle
|
|
58
|
+
};
|
|
59
|
+
const checkNotInOptionFont = (currentfont, type)=>{
|
|
60
|
+
return objectFont?.[type]?.includes(currentfont);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export { checkNotInOptionFont };
|
|
@@ -1 +1,24 @@
|
|
|
1
|
-
async function wait(
|
|
1
|
+
async function wait(ms) {
|
|
2
|
+
return new Promise((resolve)=>setTimeout(resolve, ms));
|
|
3
|
+
}
|
|
4
|
+
const retryWithDelay = async (fn, config)=>{
|
|
5
|
+
const retries = config?.retries ?? 3;
|
|
6
|
+
const delay = config?.delay ?? 1000;
|
|
7
|
+
try {
|
|
8
|
+
return await fn();
|
|
9
|
+
} catch (err) {
|
|
10
|
+
if (retries <= 0 || config?.retryIf && !config.retryIf(err)) {
|
|
11
|
+
return Promise.reject(err);
|
|
12
|
+
}
|
|
13
|
+
//delay the next call
|
|
14
|
+
await wait(delay);
|
|
15
|
+
//recursively call the same func
|
|
16
|
+
return retryWithDelay(fn, {
|
|
17
|
+
...config,
|
|
18
|
+
retries: retries - 1,
|
|
19
|
+
delay
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export { retryWithDelay, wait };
|
|
@@ -1 +1,133 @@
|
|
|
1
|
-
import{getShortName
|
|
1
|
+
import { getShortName } from '@gem-sdk/core';
|
|
2
|
+
import merge from 'deepmerge';
|
|
3
|
+
|
|
4
|
+
const baseDevices = {
|
|
5
|
+
tablet: '1024px',
|
|
6
|
+
mobile: '767px'
|
|
7
|
+
};
|
|
8
|
+
const devicesOrder = [
|
|
9
|
+
'desktop',
|
|
10
|
+
'tablet',
|
|
11
|
+
'mobile'
|
|
12
|
+
];
|
|
13
|
+
const flattenObject = (obj, prefix)=>{
|
|
14
|
+
return Object.keys(obj).reduce((acc, k)=>{
|
|
15
|
+
const pre = prefix ? `${prefix}-` : '';
|
|
16
|
+
if (typeof obj[k] === 'object' && obj[k] !== null && Object.keys(obj[k]).length > 0) Object.assign(acc, flattenObject(obj[k], pre + k));
|
|
17
|
+
else acc[pre + k] = obj[k];
|
|
18
|
+
return acc;
|
|
19
|
+
}, {});
|
|
20
|
+
};
|
|
21
|
+
const mapObject = (obj)=>{
|
|
22
|
+
return Object.entries(obj ?? {}).reduce((acc, [k, v])=>{
|
|
23
|
+
return {
|
|
24
|
+
...acc,
|
|
25
|
+
[getShortName(k)]: typeof v === 'object' ? mapObject(v) : v
|
|
26
|
+
};
|
|
27
|
+
}, {});
|
|
28
|
+
};
|
|
29
|
+
const getValueByDevice = (data, device)=>{
|
|
30
|
+
const deviceData = {
|
|
31
|
+
typography: Object.fromEntries(Object.entries(data?.typography ?? {}).map(([key, value])=>{
|
|
32
|
+
const typo = {
|
|
33
|
+
...value?.[device]
|
|
34
|
+
};
|
|
35
|
+
if (!typo) return [
|
|
36
|
+
key,
|
|
37
|
+
undefined
|
|
38
|
+
];
|
|
39
|
+
if (typo.fontFamily) {
|
|
40
|
+
typo.fontFamily = `var(--g-font-${typo.fontFamily}, ${typo.fontFamily})`;
|
|
41
|
+
}
|
|
42
|
+
return [
|
|
43
|
+
key,
|
|
44
|
+
typo
|
|
45
|
+
];
|
|
46
|
+
})),
|
|
47
|
+
spacing: Object.fromEntries(Object.entries(data?.spacing ?? {}).map(([key, value])=>{
|
|
48
|
+
return [
|
|
49
|
+
key,
|
|
50
|
+
value?.[device]
|
|
51
|
+
];
|
|
52
|
+
})),
|
|
53
|
+
container: Object.fromEntries(Object.entries(data?.container ?? {}).map(([key, value])=>{
|
|
54
|
+
return [
|
|
55
|
+
key,
|
|
56
|
+
value?.[device]
|
|
57
|
+
];
|
|
58
|
+
})),
|
|
59
|
+
font: Object.fromEntries(Object.entries(data?.font ?? {}).map(([key, value])=>{
|
|
60
|
+
return [
|
|
61
|
+
key,
|
|
62
|
+
value?.family
|
|
63
|
+
];
|
|
64
|
+
})),
|
|
65
|
+
theme: {
|
|
66
|
+
font: Object.fromEntries(Object.entries(data?.theme?.font ?? {}).map(([key, value])=>{
|
|
67
|
+
return [
|
|
68
|
+
key,
|
|
69
|
+
value?.family
|
|
70
|
+
];
|
|
71
|
+
}))
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
return deviceData;
|
|
75
|
+
};
|
|
76
|
+
const quoteFontName = (font)=>{
|
|
77
|
+
if ([
|
|
78
|
+
'sans-serif'
|
|
79
|
+
].includes(font)) {
|
|
80
|
+
return font;
|
|
81
|
+
}
|
|
82
|
+
return `'${font}'`;
|
|
83
|
+
};
|
|
84
|
+
const genCSSVariable = (deviceData)=>{
|
|
85
|
+
return Object.entries(mapObject(flattenObject(deviceData))).map(([key, value])=>{
|
|
86
|
+
if (value === undefined) return undefined;
|
|
87
|
+
if ([
|
|
88
|
+
'font-heading',
|
|
89
|
+
'font-body',
|
|
90
|
+
'theme-font-heading',
|
|
91
|
+
'theme-font-body'
|
|
92
|
+
].includes(key)) {
|
|
93
|
+
return `--g-${key}: ${quoteFontName(value)}`;
|
|
94
|
+
}
|
|
95
|
+
return `--g-${key}:${value}`;
|
|
96
|
+
}).filter((v)=>v !== undefined).join(';');
|
|
97
|
+
};
|
|
98
|
+
const genCSS = (input, mobileOnly)=>{
|
|
99
|
+
if (!input) return '';
|
|
100
|
+
let data = {};
|
|
101
|
+
try {
|
|
102
|
+
if (typeof input === 'string') {
|
|
103
|
+
data = JSON.parse(input);
|
|
104
|
+
} else {
|
|
105
|
+
data = input;
|
|
106
|
+
}
|
|
107
|
+
if (mobileOnly) {
|
|
108
|
+
const desktop = getValueByDevice(data, 'desktop');
|
|
109
|
+
const mobile = getValueByDevice(data, 'mobile');
|
|
110
|
+
const deviceData = merge(desktop, mobile);
|
|
111
|
+
deviceData.color = data.color;
|
|
112
|
+
deviceData.radius = data.radius;
|
|
113
|
+
const cssData = genCSSVariable(deviceData);
|
|
114
|
+
return `:root{${cssData}}`;
|
|
115
|
+
}
|
|
116
|
+
return devicesOrder.map((device)=>{
|
|
117
|
+
const deviceData = getValueByDevice(data, device);
|
|
118
|
+
if (device === 'desktop') {
|
|
119
|
+
deviceData.color = data.color;
|
|
120
|
+
deviceData.radius = data.radius;
|
|
121
|
+
}
|
|
122
|
+
const cssData = genCSSVariable(deviceData);
|
|
123
|
+
if (device === 'desktop') {
|
|
124
|
+
return `:root{${cssData}}`;
|
|
125
|
+
}
|
|
126
|
+
return `@media (max-width: ${baseDevices[device]}) {:root{${cssData}}}`;
|
|
127
|
+
}).join('\n');
|
|
128
|
+
} catch {
|
|
129
|
+
return '';
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
export { genCSS };
|
|
@@ -1 +1,87 @@
|
|
|
1
|
-
|
|
1
|
+
const getFontsFromDataBuilder = (dataBuilder)=>{
|
|
2
|
+
const fonts = [];
|
|
3
|
+
for(const uid in dataBuilder){
|
|
4
|
+
if (Object.prototype.hasOwnProperty.call(dataBuilder, uid)) {
|
|
5
|
+
const data = dataBuilder[uid];
|
|
6
|
+
const styles = data.styles;
|
|
7
|
+
const settings = data.settings;
|
|
8
|
+
getFontFromGroupSetting(fonts, styles);
|
|
9
|
+
getFontFromGroupSetting(fonts, settings);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
return fonts;
|
|
13
|
+
};
|
|
14
|
+
const getFontFromGroupSetting = (fonts, groupSetting)=>{
|
|
15
|
+
const states = [
|
|
16
|
+
'normal',
|
|
17
|
+
'hover',
|
|
18
|
+
'focus',
|
|
19
|
+
'active',
|
|
20
|
+
'disabled',
|
|
21
|
+
'price',
|
|
22
|
+
'compareAtPrice'
|
|
23
|
+
];
|
|
24
|
+
for(const attr in groupSetting){
|
|
25
|
+
if (Object.prototype.hasOwnProperty.call(groupSetting, attr)) {
|
|
26
|
+
const value = groupSetting[attr];
|
|
27
|
+
if (!value) continue;
|
|
28
|
+
getFontValue(fonts, value);
|
|
29
|
+
for (const state of states){
|
|
30
|
+
if (!value[state]) continue;
|
|
31
|
+
getFontValue(fonts, value[state]);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
const getFontValue = (fonts, value)=>{
|
|
37
|
+
let customFontFamily = value.custom?.fontFamily;
|
|
38
|
+
if (typeof customFontFamily === 'string') {
|
|
39
|
+
customFontFamily = {
|
|
40
|
+
value: value.custom?.fontFamily || '',
|
|
41
|
+
type: 'google'
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
const fontFamily = customFontFamily?.value;
|
|
45
|
+
let customFontVariants = value.custom?.fontVariants;
|
|
46
|
+
if (!customFontVariants?.length) {
|
|
47
|
+
customFontVariants = [
|
|
48
|
+
value.custom?.fontWeight
|
|
49
|
+
];
|
|
50
|
+
}
|
|
51
|
+
if (customFontFamily && customFontVariants?.length) {
|
|
52
|
+
const variants = customFontVariants.map((item)=>{
|
|
53
|
+
switch(item){
|
|
54
|
+
case 'regular':
|
|
55
|
+
return '400';
|
|
56
|
+
}
|
|
57
|
+
return item;
|
|
58
|
+
});
|
|
59
|
+
const customFontWeight = value.custom?.fontWeight && variants.includes(value.custom?.fontWeight) ? value.custom?.fontWeight : variants[0];
|
|
60
|
+
if (customFontWeight) {
|
|
61
|
+
const isExist = fonts.find((item)=>item.family == fontFamily && item.variants.includes(customFontWeight));
|
|
62
|
+
if (!isExist) {
|
|
63
|
+
const isFontFamily = fonts.find((item)=>item.family == fontFamily);
|
|
64
|
+
if (isFontFamily) {
|
|
65
|
+
isFontFamily.variants.push(customFontWeight);
|
|
66
|
+
} else {
|
|
67
|
+
const fontVariants = [
|
|
68
|
+
customFontWeight
|
|
69
|
+
];
|
|
70
|
+
if (customFontWeight !== '700') {
|
|
71
|
+
if (variants.includes('700')) {
|
|
72
|
+
fontVariants.push('700'); // Auto add 700 for bold in editor inline
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
fonts.push({
|
|
76
|
+
family: fontFamily || '',
|
|
77
|
+
variants: fontVariants,
|
|
78
|
+
subsets: [],
|
|
79
|
+
type: customFontFamily.type
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export { getFontFromGroupSetting, getFontsFromDataBuilder };
|
|
@@ -1 +1,32 @@
|
|
|
1
|
-
import{prefetchQueries
|
|
1
|
+
import { prefetchQueries } from '@gem-sdk/core';
|
|
2
|
+
|
|
3
|
+
const getFallbackV2 = async (fetcher, data, isStorefront = true)=>{
|
|
4
|
+
const isSample = isStorefront ? !process.env.NEXT_PUBLIC_STOREFRONT_TOKEN : false;
|
|
5
|
+
const queries = data.map((v)=>prefetchQueries(v.data, {
|
|
6
|
+
isSample,
|
|
7
|
+
isStorefront
|
|
8
|
+
})).flat();
|
|
9
|
+
const datas = await Promise.allSettled(queries.map(({ query, variables, func })=>{
|
|
10
|
+
if (func) {
|
|
11
|
+
return func(fetcher, variables);
|
|
12
|
+
}
|
|
13
|
+
if (query) return fetcher([
|
|
14
|
+
query,
|
|
15
|
+
variables
|
|
16
|
+
]);
|
|
17
|
+
return {};
|
|
18
|
+
}));
|
|
19
|
+
const fallback = queries.reduce((acc, { key }, index)=>{
|
|
20
|
+
const res = datas[index];
|
|
21
|
+
if (res?.status === 'fulfilled') {
|
|
22
|
+
return {
|
|
23
|
+
...acc,
|
|
24
|
+
[key]: res.value
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
return acc;
|
|
28
|
+
}, {});
|
|
29
|
+
return fallback;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export { getFallbackV2 };
|
|
@@ -1 +1,103 @@
|
|
|
1
|
-
|
|
1
|
+
const normalizeBuilderData = (data)=>{
|
|
2
|
+
const result = {};
|
|
3
|
+
function compose(cData, currData = {}) {
|
|
4
|
+
if (cData) {
|
|
5
|
+
const { childrens, dateModified, editorConfigs, ...rest } = cData;
|
|
6
|
+
if (rest.type === 'section') {
|
|
7
|
+
currData[rest.uid] = rest;
|
|
8
|
+
} else {
|
|
9
|
+
const items = childrens?.map((child)=>child?.uid) ?? [];
|
|
10
|
+
currData[rest.uid] = {
|
|
11
|
+
...rest,
|
|
12
|
+
childrens: items
|
|
13
|
+
};
|
|
14
|
+
if (childrens) {
|
|
15
|
+
childrens.map((child)=>compose(child, currData));
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
compose(data, result);
|
|
21
|
+
return {
|
|
22
|
+
...result
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
const orderSection = (sections, orders)=>{
|
|
26
|
+
// Filter out sections that are not in the order list
|
|
27
|
+
const ids = orders?.filter((id)=>sections?.some((v)=>v?.id === id));
|
|
28
|
+
// Return the ordered sections
|
|
29
|
+
const orderedSections = ids?.map((id)=>sections?.find((v)=>v?.id === id)) ?? [];
|
|
30
|
+
// Return the sections that are not in the order list
|
|
31
|
+
const sectionsNotInOrder = sections?.filter((v)=>(!v?.id || !ids?.includes(v.id)) && !v?.deletedAt) ?? [];
|
|
32
|
+
// Return the ordered sections + the sections that are not in the order list
|
|
33
|
+
return orderedSections.concat(sectionsNotInOrder);
|
|
34
|
+
};
|
|
35
|
+
function normalizePageSectionResponse(sections, orders) {
|
|
36
|
+
const sortedSections = orderSection(sections, orders);
|
|
37
|
+
const childrens = sortedSections.map((item)=>{
|
|
38
|
+
if (!item?.component) return false;
|
|
39
|
+
try {
|
|
40
|
+
const data = JSON.parse(item.component);
|
|
41
|
+
return data;
|
|
42
|
+
} catch {
|
|
43
|
+
return false;
|
|
44
|
+
}
|
|
45
|
+
}).filter(Boolean);
|
|
46
|
+
return normalizeBuilderData({
|
|
47
|
+
uid: 'ROOT',
|
|
48
|
+
tag: 'Root',
|
|
49
|
+
childrens
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
function normalizePageSectionResponseV2(sections, orders) {
|
|
53
|
+
const sortedSections = orderSection(sections, orders);
|
|
54
|
+
const childrens = sortedSections.map((item)=>{
|
|
55
|
+
if (!item?.component) return false;
|
|
56
|
+
try {
|
|
57
|
+
const data = JSON.parse(item.component);
|
|
58
|
+
return data;
|
|
59
|
+
} catch {
|
|
60
|
+
return false;
|
|
61
|
+
}
|
|
62
|
+
}).filter(Boolean);
|
|
63
|
+
return childrens.map((v)=>{
|
|
64
|
+
return {
|
|
65
|
+
uid: v.uid,
|
|
66
|
+
lazy: Boolean(v.settings?.lazy),
|
|
67
|
+
priority: Boolean(v.settings?.priority),
|
|
68
|
+
data: normalizeBuilderData(v)
|
|
69
|
+
};
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
const parseBuilderTemplateV2 = (data)=>{
|
|
73
|
+
return normalizePageSectionResponseV2([
|
|
74
|
+
...data?.pageSections ?? [],
|
|
75
|
+
...data?.themePageCustomSections ?? []
|
|
76
|
+
], data?.sectionPosition);
|
|
77
|
+
};
|
|
78
|
+
const parseBuilderTemplate = (data)=>{
|
|
79
|
+
return normalizePageSectionResponse([
|
|
80
|
+
...data?.pageSections ?? [],
|
|
81
|
+
...data?.themePageCustomSections ?? []
|
|
82
|
+
], data?.sectionPosition);
|
|
83
|
+
};
|
|
84
|
+
const extractPageBackground = (data)=>{
|
|
85
|
+
try {
|
|
86
|
+
const pageBackgroundStr = data?.metafields?.find((item)=>item?.key === 'page_background')?.value;
|
|
87
|
+
return JSON.parse(pageBackgroundStr ?? '{}');
|
|
88
|
+
} catch {
|
|
89
|
+
return {};
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
const parseBuilderLibraryTemplate = (data)=>{
|
|
93
|
+
return normalizePageSectionResponseV2([
|
|
94
|
+
...data?.sections ?? []
|
|
95
|
+
], data?.sectionPosition);
|
|
96
|
+
};
|
|
97
|
+
const parseShopLibraryPageTemplate = (data)=>{
|
|
98
|
+
return normalizePageSectionResponseV2([
|
|
99
|
+
...data?.shopLibrarySections ?? []
|
|
100
|
+
], data?.sectionPosition);
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export { extractPageBackground, normalizeBuilderData, normalizePageSectionResponseV2, parseBuilderLibraryTemplate, parseBuilderTemplate, parseBuilderTemplateV2, parseShopLibraryPageTemplate };
|
|
@@ -1 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
const parseJson = (json)=>{
|
|
2
|
+
if (!json) return null;
|
|
3
|
+
try {
|
|
4
|
+
return JSON.parse(json);
|
|
5
|
+
} catch (e) {
|
|
6
|
+
return null;
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
const serializableJson = (props)=>{
|
|
10
|
+
return JSON.parse(JSON.stringify(props));
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export { parseJson, serializableJson };
|
|
@@ -1 +1,5 @@
|
|
|
1
|
-
function isBot(
|
|
1
|
+
function isBot(input) {
|
|
2
|
+
return /Googlebot|Mediapartners-Google|AdsBot-Google|googleweblight|Storebot-Google|Google-PageRenderer|Chrome-Lighthouse|Bingbot|BingPreview|Slurp|DuckDuckBot|baiduspider|yandex|sogou|LinkedInBot|bitlybot|tumblr|vkShare|quora link preview|facebookexternalhit|facebookcatalog|Twitterbot|applebot|redditbot|Slackbot|Discordbot|WhatsApp|SkypeUriPreview|ia_archiver/i.test(input);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
export { isBot };
|
|
@@ -1 +1,41 @@
|
|
|
1
|
-
|
|
1
|
+
'use client';
|
|
2
|
+
import { PageViewUpDocument } from '@gem-sdk/core';
|
|
3
|
+
import { useCallback, useEffect } from 'react';
|
|
4
|
+
|
|
5
|
+
const useTrackingView = (token, handle, isFallback)=>{
|
|
6
|
+
const shopToken = token || process.env.NEXT_PUBLIC_SHOP_TOKEN;
|
|
7
|
+
const apiURL = process.env.NEXT_PUBLIC_API_URL;
|
|
8
|
+
const sendTracking = useCallback((handle)=>{
|
|
9
|
+
if (!apiURL || !shopToken) return;
|
|
10
|
+
const variables = {
|
|
11
|
+
pageHandle: handle
|
|
12
|
+
};
|
|
13
|
+
const headers = {
|
|
14
|
+
'Content-Type': 'application/json',
|
|
15
|
+
'X-GemX-Shop-Token': shopToken
|
|
16
|
+
};
|
|
17
|
+
fetch(apiURL, {
|
|
18
|
+
method: 'POST',
|
|
19
|
+
headers,
|
|
20
|
+
body: JSON.stringify({
|
|
21
|
+
query: PageViewUpDocument,
|
|
22
|
+
variables
|
|
23
|
+
})
|
|
24
|
+
}).finally(()=>{
|
|
25
|
+
//
|
|
26
|
+
});
|
|
27
|
+
}, [
|
|
28
|
+
apiURL,
|
|
29
|
+
shopToken
|
|
30
|
+
]);
|
|
31
|
+
useEffect(()=>{
|
|
32
|
+
if (!handle || isFallback) return;
|
|
33
|
+
sendTracking(handle);
|
|
34
|
+
}, [
|
|
35
|
+
handle,
|
|
36
|
+
sendTracking,
|
|
37
|
+
isFallback
|
|
38
|
+
]);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { useTrackingView };
|