@gem-sdk/components 2.1.43 → 2.1.44
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/helpers.js +6 -1
- package/dist/cjs/image/components/AdaptiveImage.js +13 -16
- package/dist/cjs/text/components/Text.js +0 -1
- package/dist/esm/helpers.js +6 -1
- package/dist/esm/image/components/AdaptiveImage.js +13 -16
- package/dist/esm/text/components/Text.js +0 -1
- package/package.json +2 -2
package/dist/cjs/helpers.js
CHANGED
|
@@ -58,6 +58,10 @@ const getStaticLocale = (tag, key)=>{
|
|
|
58
58
|
const getSettingPreloadData = (disabledValue, enabledValue)=>{
|
|
59
59
|
return `{% if section.settings.section_preload == "false" %}${disabledValue} ${enabledValue ? `{% else %}${enabledValue}` : ''}{% endif %}`;
|
|
60
60
|
};
|
|
61
|
+
const getHttpUrl = (link)=>{
|
|
62
|
+
if (!link) return '';
|
|
63
|
+
return link.match(/^https?:\/\//i) ? link : `http://${link}`;
|
|
64
|
+
};
|
|
61
65
|
const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
|
|
62
66
|
const URL_START_WITH = [
|
|
63
67
|
'#',
|
|
@@ -70,7 +74,7 @@ const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
|
|
|
70
74
|
const isHyperlink = setting?.link !== undefined && setting.link !== '';
|
|
71
75
|
let urlHref = setting?.link ?? '';
|
|
72
76
|
const isHomePageHref = urlHref === '/';
|
|
73
|
-
const regexHttp = new RegExp(/^https
|
|
77
|
+
const regexHttp = new RegExp(/^(?:https?:\/\/)?[\w.-]+\.[a-z]{2,}/i);
|
|
74
78
|
const regexPageType = new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart)\/?/i);
|
|
75
79
|
const isShopifyDomain = isHyperlink && !regexHttp.test(urlHref) && regexPageType.test(urlHref);
|
|
76
80
|
const isDomain = isHyperlink && regexHttp.test(urlHref);
|
|
@@ -81,6 +85,7 @@ const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
|
|
|
81
85
|
urlHref = "{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}" + urlHref;
|
|
82
86
|
}
|
|
83
87
|
}
|
|
88
|
+
if (isDomain) urlHref = getHttpUrl(urlHref);
|
|
84
89
|
const isLink = ()=>{
|
|
85
90
|
if (URL_START_WITH.find((el)=>urlHref.startsWith(el))) return true;
|
|
86
91
|
if (URL_INCLUDES.find((el)=>urlHref.includes(el))) return true;
|
|
@@ -5,29 +5,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var Head = require('next/head');
|
|
7
7
|
var Img = require('./Img.js');
|
|
8
|
+
var React = require('react');
|
|
9
|
+
var getSrcSet = require('../helpers/getSrcSet.js');
|
|
8
10
|
|
|
9
11
|
const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
|
|
10
12
|
const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
|
|
13
|
+
const imageLinkList = React.useMemo(()=>{
|
|
14
|
+
if (!priority) return [];
|
|
15
|
+
return Array.from(new Set(getSrcSet.DEVICES.map((device)=>srcSet?.[device]?.src).filter(Boolean)));
|
|
16
|
+
}, [
|
|
17
|
+
srcSet,
|
|
18
|
+
priority
|
|
19
|
+
]);
|
|
11
20
|
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
12
21
|
children: [
|
|
13
|
-
/*#__PURE__*/ jsxRuntime.
|
|
14
|
-
children:
|
|
15
|
-
!!srcSet?.desktop?.src && /*#__PURE__*/ jsxRuntime.jsx("link", {
|
|
22
|
+
imageLinkList.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(Head, {
|
|
23
|
+
children: imageLinkList.map((link)=>/*#__PURE__*/ jsxRuntime.jsx("link", {
|
|
16
24
|
rel: "preload",
|
|
17
|
-
href:
|
|
25
|
+
href: link,
|
|
18
26
|
as: "image"
|
|
19
|
-
})
|
|
20
|
-
!!srcSet?.tablet?.src && /*#__PURE__*/ jsxRuntime.jsx("link", {
|
|
21
|
-
rel: "preload",
|
|
22
|
-
href: srcSet.tablet.src,
|
|
23
|
-
as: "image"
|
|
24
|
-
}),
|
|
25
|
-
!!srcSet?.mobile?.src && /*#__PURE__*/ jsxRuntime.jsx("link", {
|
|
26
|
-
rel: "preload",
|
|
27
|
-
href: srcSet.mobile.src,
|
|
28
|
-
as: "image"
|
|
29
|
-
})
|
|
30
|
-
]
|
|
27
|
+
}, link))
|
|
31
28
|
}),
|
|
32
29
|
/*#__PURE__*/ jsxRuntime.jsxs("picture", {
|
|
33
30
|
style: {
|
|
@@ -10,7 +10,6 @@ var common = require('./common.js');
|
|
|
10
10
|
const Text = /*#__PURE__*/ React.forwardRef(({ styles, builderAttrs, style, setting, advanced, builderProps, className, children, ...props }, ref)=>{
|
|
11
11
|
const { text, htmlTag: Element = 'div', options, tagWidth, excludeFlex } = setting ?? {};
|
|
12
12
|
const composeGlobalSize = core.makeGlobalSize(setting?.globalSize);
|
|
13
|
-
console.log('Text: ', text);
|
|
14
13
|
const mode = core.useEditorMode();
|
|
15
14
|
const getPlaceHolderWhenContentNone = ()=>{
|
|
16
15
|
let classList = '';
|
package/dist/esm/helpers.js
CHANGED
|
@@ -56,6 +56,10 @@ const getStaticLocale = (tag, key)=>{
|
|
|
56
56
|
const getSettingPreloadData = (disabledValue, enabledValue)=>{
|
|
57
57
|
return `{% if section.settings.section_preload == "false" %}${disabledValue} ${enabledValue ? `{% else %}${enabledValue}` : ''}{% endif %}`;
|
|
58
58
|
};
|
|
59
|
+
const getHttpUrl = (link)=>{
|
|
60
|
+
if (!link) return '';
|
|
61
|
+
return link.match(/^https?:\/\//i) ? link : `http://${link}`;
|
|
62
|
+
};
|
|
59
63
|
const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
|
|
60
64
|
const URL_START_WITH = [
|
|
61
65
|
'#',
|
|
@@ -68,7 +72,7 @@ const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
|
|
|
68
72
|
const isHyperlink = setting?.link !== undefined && setting.link !== '';
|
|
69
73
|
let urlHref = setting?.link ?? '';
|
|
70
74
|
const isHomePageHref = urlHref === '/';
|
|
71
|
-
const regexHttp = new RegExp(/^https
|
|
75
|
+
const regexHttp = new RegExp(/^(?:https?:\/\/)?[\w.-]+\.[a-z]{2,}/i);
|
|
72
76
|
const regexPageType = new RegExp(/^\/?(?:collections|pages|products|blogs|checkout|cart)\/?/i);
|
|
73
77
|
const isShopifyDomain = isHyperlink && !regexHttp.test(urlHref) && regexPageType.test(urlHref);
|
|
74
78
|
const isDomain = isHyperlink && regexHttp.test(urlHref);
|
|
@@ -79,6 +83,7 @@ const getInsertLinkData = (defaultWrap, setting, htmlType)=>{
|
|
|
79
83
|
urlHref = "{{ request.origin }}{{ routes.root_url | split: '/' | join: '/' }}" + urlHref;
|
|
80
84
|
}
|
|
81
85
|
}
|
|
86
|
+
if (isDomain) urlHref = getHttpUrl(urlHref);
|
|
82
87
|
const isLink = ()=>{
|
|
83
88
|
if (URL_START_WITH.find((el)=>urlHref.startsWith(el))) return true;
|
|
84
89
|
if (URL_INCLUDES.find((el)=>urlHref.includes(el))) return true;
|
|
@@ -1,29 +1,26 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import Head from 'next/head';
|
|
3
3
|
import Img from './Img.js';
|
|
4
|
+
import { useMemo } from 'react';
|
|
5
|
+
import { DEVICES } from '../helpers/getSrcSet.js';
|
|
4
6
|
|
|
5
7
|
const AdaptiveImage = ({ srcSet, priority, pictureClass, imagePlaceholder, ...rest })=>{
|
|
6
8
|
const fallBackImage = 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif';
|
|
9
|
+
const imageLinkList = useMemo(()=>{
|
|
10
|
+
if (!priority) return [];
|
|
11
|
+
return Array.from(new Set(DEVICES.map((device)=>srcSet?.[device]?.src).filter(Boolean)));
|
|
12
|
+
}, [
|
|
13
|
+
srcSet,
|
|
14
|
+
priority
|
|
15
|
+
]);
|
|
7
16
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
8
17
|
children: [
|
|
9
|
-
/*#__PURE__*/
|
|
10
|
-
children:
|
|
11
|
-
!!srcSet?.desktop?.src && /*#__PURE__*/ jsx("link", {
|
|
18
|
+
imageLinkList.length > 0 && /*#__PURE__*/ jsx(Head, {
|
|
19
|
+
children: imageLinkList.map((link)=>/*#__PURE__*/ jsx("link", {
|
|
12
20
|
rel: "preload",
|
|
13
|
-
href:
|
|
21
|
+
href: link,
|
|
14
22
|
as: "image"
|
|
15
|
-
})
|
|
16
|
-
!!srcSet?.tablet?.src && /*#__PURE__*/ jsx("link", {
|
|
17
|
-
rel: "preload",
|
|
18
|
-
href: srcSet.tablet.src,
|
|
19
|
-
as: "image"
|
|
20
|
-
}),
|
|
21
|
-
!!srcSet?.mobile?.src && /*#__PURE__*/ jsx("link", {
|
|
22
|
-
rel: "preload",
|
|
23
|
-
href: srcSet.mobile.src,
|
|
24
|
-
as: "image"
|
|
25
|
-
})
|
|
26
|
-
]
|
|
23
|
+
}, link))
|
|
27
24
|
}),
|
|
28
25
|
/*#__PURE__*/ jsxs("picture", {
|
|
29
26
|
style: {
|
|
@@ -6,7 +6,6 @@ import { getDisplayText } from './common.js';
|
|
|
6
6
|
const Text = /*#__PURE__*/ forwardRef(({ styles, builderAttrs, style, setting, advanced, builderProps, className, children, ...props }, ref)=>{
|
|
7
7
|
const { text, htmlTag: Element = 'div', options, tagWidth, excludeFlex } = setting ?? {};
|
|
8
8
|
const composeGlobalSize = makeGlobalSize(setting?.globalSize);
|
|
9
|
-
console.log('Text: ', text);
|
|
10
9
|
const mode = useEditorMode();
|
|
11
10
|
const getPlaceHolderWhenContentNone = ()=>{
|
|
12
11
|
let classList = '';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/components",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.44",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"format": "prettier --write \"./src/**/*.{ts,tsx}\""
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@gem-sdk/core": "2.1.
|
|
24
|
+
"@gem-sdk/core": "2.1.44",
|
|
25
25
|
"@gem-sdk/styles": "2.1.31",
|
|
26
26
|
"@types/react-transition-group": "^4.4.5"
|
|
27
27
|
},
|