@gem-sdk/core 1.21.7 → 1.21.9

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 (8) hide show
  1. package/dist/cjs/components/ComponentWrapperPreview.js +27 -10
  2. package/dist/cjs/components/Render.liquid.js +26 -0
  3. package/dist/cjs/components/RenderCustomCode.js +56 -0
  4. package/dist/esm/components/ComponentWrapperPreview.js +28 -11
  5. package/dist/esm/components/Render.liquid.js +26 -0
  6. package/dist/esm/components/RenderCustomCode.js +52 -0
  7. package/dist/types/index.d.ts +14 -5
  8. package/package.json +2 -2
package/dist/cjs/components/ComponentWrapperPreview.js CHANGED
@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
6
6
  var react = require('react');
7
7
  var composeAdvanceStyle = require('../helpers/compose-advance-style.js');
8
8
  var constant = require('./constant.js');
9
+ var RenderCustomCode = require('./RenderCustomCode.js');
9
10
 
10
11
  const ComponentWrapperPreview = ({ children, ...props })=>{
11
12
  if (props.type === 'section') {
@@ -53,19 +54,35 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
53
54
  'data-component-label': props.label
54
55
  };
55
56
  if (constant.disableWrap.includes(props.tag) && /*#__PURE__*/ react.isValidElement(children)) {
56
- return /*#__PURE__*/ jsxRuntime.jsx(children.type, {
57
- ...children.props,
58
- style,
59
- builderAttrs,
60
- advanced
57
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
58
+ children: [
59
+ /*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
60
+ uid: props.uid,
61
+ advanced: advanced
62
+ }),
63
+ /*#__PURE__*/ jsxRuntime.jsx(children.type, {
64
+ ...children.props,
65
+ style,
66
+ builderAttrs,
67
+ advanced
68
+ })
69
+ ]
61
70
  });
62
71
  }
63
72
  // Render
64
- return /*#__PURE__*/ jsxRuntime.jsx("div", {
65
- style: style,
66
- className: `${props.uid}`,
67
- ...builderAttrs,
68
- children: children
73
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
74
+ children: [
75
+ /*#__PURE__*/ jsxRuntime.jsx(RenderCustomCode.default, {
76
+ uid: props.uid,
77
+ advanced: advanced
78
+ }),
79
+ /*#__PURE__*/ jsxRuntime.jsx("div", {
80
+ style: style,
81
+ className: `${props.uid}`,
82
+ ...builderAttrs,
83
+ children: children
84
+ })
85
+ ]
69
86
  });
70
87
  };
71
88
 
package/dist/cjs/components/Render.liquid.js CHANGED
@@ -136,12 +136,38 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, ...passPr
136
136
  })}
137
137
  </div>`;
138
138
  }
139
+ const { cssCode, jsCode } = RenderCustomCode(item);
140
+ if (cssCode) liquid += cssCode;
141
+ if (jsCode) liquid += jsCode;
139
142
  return {
140
143
  liquid,
141
144
  extraFiles: customProps.extraFiles
142
145
  };
143
146
  }
144
147
  };
148
+ const RenderCustomCode = (item)=>{
149
+ const { css, javascript, rootClassName } = item.advanced?.editorData || {};
150
+ const replacedCSS = css?.replaceAll(rootClassName, item.uid);
151
+ const replacedJS = javascript?.replaceAll(rootClassName, item.uid);
152
+ const cssCode = render.RenderIf(!!css, render.template`
153
+ <style
154
+ id="${`custom-css-${item?.uid}`}"
155
+ >${replacedCSS}</style>
156
+ `);
157
+ const jsCode = render.RenderIf(!!javascript, render.template`
158
+ <script
159
+ id="${`custom-js-${item?.uid}`}"
160
+ >
161
+ try {
162
+ ${replacedJS}
163
+ } catch(err){}
164
+ </script>
165
+ `);
166
+ return {
167
+ cssCode,
168
+ jsCode
169
+ };
170
+ };
145
171
  const RenderChildren = (props)=>{
146
172
  const data = Render(props);
147
173
  // Append to prop parent
package/dist/cjs/components/RenderCustomCode.js ADDED
@@ -0,0 +1,56 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var jsxRuntime = require('react/jsx-runtime');
6
+ var Head = require('next/head');
7
+ var Script = require('next/script');
8
+ var react = require('react');
9
+ require('zustand');
10
+ require('swr');
11
+ require('@gem-sdk/adapter-shopify');
12
+ require('swr/mutation');
13
+ var shop = require('../hooks/shop.js');
14
+ require('vanilla-lazyload');
15
+ require('../hooks/useCartUI.js');
16
+ require('../helpers/convert.js');
17
+
18
+ const RenderCustomCode = ({ uid, advanced })=>{
19
+ const mode = shop.useEditorMode();
20
+ const { css, javascript, rootClassName } = advanced?.editorData || {};
21
+ const replacedCSS = css?.replaceAll(rootClassName, uid);
22
+ const replacedJS = javascript?.replaceAll(rootClassName, uid);
23
+ const mapId = {
24
+ css: `custom-css-${uid}`,
25
+ javascript: `custom-js-${uid}`
26
+ };
27
+ const jsCode = react.useMemo(()=>{
28
+ return `
29
+ try {
30
+ ${replacedJS}
31
+ } catch(err){}
32
+ `;
33
+ }, [
34
+ replacedJS
35
+ ]);
36
+ return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
37
+ children: [
38
+ /*#__PURE__*/ jsxRuntime.jsx(Head, {
39
+ children: !!css && /*#__PURE__*/ jsxRuntime.jsx("style", {
40
+ id: mapId['css'],
41
+ dangerouslySetInnerHTML: {
42
+ __html: replacedCSS
43
+ }
44
+ })
45
+ }),
46
+ !!javascript && mode !== 'edit' && /*#__PURE__*/ jsxRuntime.jsx(Script, {
47
+ id: mapId['javascript'],
48
+ dangerouslySetInnerHTML: {
49
+ __html: jsCode
50
+ }
51
+ })
52
+ ]
53
+ });
54
+ };
55
+
56
+ exports.default = RenderCustomCode;
package/dist/esm/components/ComponentWrapperPreview.js CHANGED
@@ -1,7 +1,8 @@
1
- import { jsx } from 'react/jsx-runtime';
1
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
2
  import { isValidElement } from 'react';
3
3
  import { composeAdvanceStyle } from '../helpers/compose-advance-style.js';
4
4
  import { disableWrap } from './constant.js';
5
+ import RenderCustomCode from './RenderCustomCode.js';
5
6
 
6
7
  const ComponentWrapperPreview = ({ children, ...props })=>{
7
8
  if (props.type === 'section') {
@@ -49,19 +50,35 @@ const ComponentWrapperPreview = ({ children, ...props })=>{
49
50
  'data-component-label': props.label
50
51
  };
51
52
  if (disableWrap.includes(props.tag) && /*#__PURE__*/ isValidElement(children)) {
52
- return /*#__PURE__*/ jsx(children.type, {
53
- ...children.props,
54
- style,
55
- builderAttrs,
56
- advanced
53
+ return /*#__PURE__*/ jsxs(Fragment, {
54
+ children: [
55
+ /*#__PURE__*/ jsx(RenderCustomCode, {
56
+ uid: props.uid,
57
+ advanced: advanced
58
+ }),
59
+ /*#__PURE__*/ jsx(children.type, {
60
+ ...children.props,
61
+ style,
62
+ builderAttrs,
63
+ advanced
64
+ })
65
+ ]
57
66
  });
58
67
  }
59
68
  // Render
60
- return /*#__PURE__*/ jsx("div", {
61
- style: style,
62
- className: `${props.uid}`,
63
- ...builderAttrs,
64
- children: children
69
+ return /*#__PURE__*/ jsxs(Fragment, {
70
+ children: [
71
+ /*#__PURE__*/ jsx(RenderCustomCode, {
72
+ uid: props.uid,
73
+ advanced: advanced
74
+ }),
75
+ /*#__PURE__*/ jsx("div", {
76
+ style: style,
77
+ className: `${props.uid}`,
78
+ ...builderAttrs,
79
+ children: children
80
+ })
81
+ ]
65
82
  });
66
83
  };
67
84
 
package/dist/esm/components/Render.liquid.js CHANGED
@@ -132,12 +132,38 @@ const Render = ({ uid, builder, components, parentId, extraFiles = {}, ...passPr
132
132
  })}
133
133
  </div>`;
134
134
  }
135
+ const { cssCode, jsCode } = RenderCustomCode(item);
136
+ if (cssCode) liquid += cssCode;
137
+ if (jsCode) liquid += jsCode;
135
138
  return {
136
139
  liquid,
137
140
  extraFiles: customProps.extraFiles
138
141
  };
139
142
  }
140
143
  };
144
+ const RenderCustomCode = (item)=>{
145
+ const { css, javascript, rootClassName } = item.advanced?.editorData || {};
146
+ const replacedCSS = css?.replaceAll(rootClassName, item.uid);
147
+ const replacedJS = javascript?.replaceAll(rootClassName, item.uid);
148
+ const cssCode = RenderIf(!!css, template`
149
+ <style
150
+ id="${`custom-css-${item?.uid}`}"
151
+ >${replacedCSS}</style>
152
+ `);
153
+ const jsCode = RenderIf(!!javascript, template`
154
+ <script
155
+ id="${`custom-js-${item?.uid}`}"
156
+ >
157
+ try {
158
+ ${replacedJS}
159
+ } catch(err){}
160
+ </script>
161
+ `);
162
+ return {
163
+ cssCode,
164
+ jsCode
165
+ };
166
+ };
141
167
  const RenderChildren = (props)=>{
142
168
  const data = Render(props);
143
169
  // Append to prop parent
package/dist/esm/components/RenderCustomCode.js ADDED
@@ -0,0 +1,52 @@
1
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
+ import Head from 'next/head';
3
+ import Script from 'next/script';
4
+ import { useMemo } from 'react';
5
+ import 'zustand';
6
+ import 'swr';
7
+ import '@gem-sdk/adapter-shopify';
8
+ import 'swr/mutation';
9
+ import { useEditorMode } from '../hooks/shop.js';
10
+ import 'vanilla-lazyload';
11
+ import '../hooks/useCartUI.js';
12
+ import '../helpers/convert.js';
13
+
14
+ const RenderCustomCode = ({ uid, advanced })=>{
15
+ const mode = useEditorMode();
16
+ const { css, javascript, rootClassName } = advanced?.editorData || {};
17
+ const replacedCSS = css?.replaceAll(rootClassName, uid);
18
+ const replacedJS = javascript?.replaceAll(rootClassName, uid);
19
+ const mapId = {
20
+ css: `custom-css-${uid}`,
21
+ javascript: `custom-js-${uid}`
22
+ };
23
+ const jsCode = useMemo(()=>{
24
+ return `
25
+ try {
26
+ ${replacedJS}
27
+ } catch(err){}
28
+ `;
29
+ }, [
30
+ replacedJS
31
+ ]);
32
+ return /*#__PURE__*/ jsxs(Fragment, {
33
+ children: [
34
+ /*#__PURE__*/ jsx(Head, {
35
+ children: !!css && /*#__PURE__*/ jsx("style", {
36
+ id: mapId['css'],
37
+ dangerouslySetInnerHTML: {
38
+ __html: replacedCSS
39
+ }
40
+ })
41
+ }),
42
+ !!javascript && mode !== 'edit' && /*#__PURE__*/ jsx(Script, {
43
+ id: mapId['javascript'],
44
+ dangerouslySetInnerHTML: {
45
+ __html: jsCode
46
+ }
47
+ })
48
+ ]
49
+ });
50
+ };
51
+
52
+ export { RenderCustomCode as default };
package/dist/types/index.d.ts CHANGED
@@ -8389,6 +8389,15 @@ declare const composeTypographyStyle: (typo?: TypographySettingV2, typography?:
8389
8389
  '--pt-mobile'?: csstype.Property.PaddingTop<string | number> | undefined;
8390
8390
  '--hvr-pt-mobile'?: csstype.Property.PaddingTop<string | number> | undefined;
8391
8391
  '--focus-pt-mobile'?: csstype.Property.PaddingTop<string | number> | undefined;
8392
+ '--pe'?: csstype.Property.PointerEvents | undefined;
8393
+ '--hvr-pe'?: csstype.Property.PointerEvents | undefined;
8394
+ '--focus-pe'?: csstype.Property.PointerEvents | undefined;
8395
+ '--pe-tablet'?: csstype.Property.PointerEvents | undefined;
8396
+ '--hvr-pe-tablet'?: csstype.Property.PointerEvents | undefined;
8397
+ '--focus-pe-tablet'?: csstype.Property.PointerEvents | undefined;
8398
+ '--pe-mobile'?: csstype.Property.PointerEvents | undefined;
8399
+ '--hvr-pe-mobile'?: csstype.Property.PointerEvents | undefined;
8400
+ '--focus-pe-mobile'?: csstype.Property.PointerEvents | undefined;
8392
8401
  '--pos'?: csstype.Property.Position | undefined;
8393
8402
  '--hvr-pos'?: csstype.Property.Position | undefined;
8394
8403
  '--focus-pos'?: csstype.Property.Position | undefined;
@@ -9418,7 +9427,7 @@ type RequiredCursorEdge<T> = {
9418
9427
  };
9419
9428
  declare const fetchVariants: (fetcher: FetchFunc, { id, isSample, isStorefront }: FetchProductParams) => Promise<RequiredCursorEdge<VariantSelectFragment>[]>;
9420
9429
  declare const fetchMedias: (fetcher: FetchFunc, { id, isSample, isStorefront }: FetchProductParams) => Promise<(Pick<MediaEdge, "cursor"> & {
9421
- node?: Maybe<Pick<Media, "width" | "height" | "id" | "contentType" | "previewImage" | "src" | "alt">>;
9430
+ node?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
9422
9431
  })[]>;
9423
9432
 
9424
9433
  type FetchProductsParams = {
@@ -9613,13 +9622,13 @@ declare const useSelectedOption: () => {
9613
9622
  setSelectedOption: (optionId?: Maybe<string>, optionValue?: Maybe<string>, productId?: Maybe<string>, noEmit?: boolean) => void;
9614
9623
  forceSelectedOption: (selectedOption?: Record<string, string>, productId?: Maybe<string>, noEmit?: boolean) => void;
9615
9624
  };
9616
- declare const useVariants: () => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "barcode" | "baseID" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "platform" | "price" | "salePrice" | "sku" | "soldIndividually"> & {
9625
+ declare const useVariants: () => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
9617
9626
  selectedOptions: Pick<SelectedOption, "value" | "name" | "optionType">[];
9618
- media?: Maybe<Pick<Media, "width" | "height" | "id" | "contentType" | "previewImage" | "src" | "alt">>;
9627
+ media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
9619
9628
  }>[];
9620
- declare const useVariant: (id: string) => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "barcode" | "baseID" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "platform" | "price" | "salePrice" | "sku" | "soldIndividually"> & {
9629
+ declare const useVariant: (id: string) => Maybe<Pick<ProductVariant, "title" | "width" | "length" | "weight" | "height" | "id" | "baseID" | "platform" | "sku" | "barcode" | "costPrice" | "inventoryPolicy" | "inventoryQuantity" | "inventoryStatus" | "isDigital" | "lowInventoryAmount" | "manageInventory" | "mediaId" | "price" | "salePrice" | "soldIndividually"> & {
9621
9630
  selectedOptions: Pick<SelectedOption, "value" | "name" | "optionType">[];
9622
- media?: Maybe<Pick<Media, "width" | "height" | "id" | "contentType" | "previewImage" | "src" | "alt">>;
9631
+ media?: Maybe<Pick<Media, "width" | "height" | "id" | "src" | "alt" | "contentType" | "previewImage">>;
9623
9632
  }>;
9624
9633
  declare const useCurrentVariant: () => Maybe<VariantSelectFragment>;
9625
9634
  declare const useCurrentVariantInStock: () => boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.21.7",
3
+ "version": "1.21.9",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "devDependencies": {
27
27
  "@gem-sdk/adapter-shopify": "1.12.0",
28
- "@gem-sdk/styles": "1.21.5"
28
+ "@gem-sdk/styles": "1.21.8"
29
29
  },
30
30
  "dependencies": {
31
31
  "react-error-boundary": "4.0.10",