@sitecore-content-sdk/react 1.1.0-canary.14 → 1.1.0-canary.19

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 (4) hide show
  1. package/dist/cjs/components/DesignLibrary.js +59 -18
  2. package/dist/esm/components/DesignLibrary.js +59 -18
  3. package/package.json +3 -3
  4. package/types/components/DesignLibrary.d.ts +7 -4
package/dist/cjs/components/DesignLibrary.js CHANGED
@@ -32,6 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
32
32
  return result;
33
33
  };
34
34
  })();
35
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
36
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
37
+ return new (P || (P = Promise))(function (resolve, reject) {
38
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
39
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
40
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
41
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
42
+ });
43
+ };
35
44
  Object.defineProperty(exports, "__esModule", { value: true });
36
45
  exports.DesignLibrary = exports.VariantGeneration = exports.__mockDependencies = void 0;
37
46
  /* eslint-disable jsdoc/require-param */
@@ -127,31 +136,63 @@ const VariantGeneration = (props) => {
127
136
  const rendering = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
128
137
  const [renderKey, setRenderKey] = (0, react_1.useState)(0);
129
138
  const [initError, setInitError] = (0, react_1.useState)(false);
139
+ const [importMapError, setImportMapError] = (0, react_1.useState)(false);
130
140
  const [Component, setComponent] = (0, react_1.useState)(null);
131
- if (!props.importMap) {
132
- return react_1.default.createElement("div", null, "No import map found. Please check your import map.");
133
- }
134
141
  if (!rendering) {
135
142
  return react_1.default.createElement("div", null, "No component found in layout data. Please check your layout data.");
136
143
  }
137
144
  (0, react_1.useEffect)(() => {
138
- const unsubscribe = addComponentPreviewHandler(props.importMap, (error, Component) => {
139
- setRenderKey((key) => key + 1);
140
- if (error) {
141
- setInitError(true);
145
+ let cancelled = false;
146
+ // since import map is loaded lazily, we only need to add preview event handler once the import map is loaded
147
+ // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
148
+ let unsubscribe = undefined;
149
+ const init = () => __awaiter(void 0, void 0, void 0, function* () {
150
+ let importMap = undefined;
151
+ if (!props.loadImportMap) {
152
+ console.error('No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.');
153
+ setImportMapError(true);
154
+ return;
155
+ }
156
+ try {
157
+ const importMapImport = yield props.loadImportMap();
158
+ importMap = importMapImport.default;
159
+ }
160
+ catch (error) {
161
+ console.error('Error loading import map:', error);
162
+ setImportMapError(true);
142
163
  return;
143
164
  }
144
- setInitError(false);
145
- setComponent(() => Component);
165
+ // account for component being unmounted while resolving async import map
166
+ if (cancelled)
167
+ return;
168
+ unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
169
+ setRenderKey((key) => key + 1);
170
+ if (error) {
171
+ setInitError(true);
172
+ return;
173
+ }
174
+ setInitError(false);
175
+ setComponent(() => Component);
176
+ });
177
+ const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
178
+ console.debug('Component Library: sending event', importMapEvent);
179
+ window.parent.postMessage(importMapEvent, '*');
180
+ const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
181
+ console.debug('Component Library: sending event', componentPropsEvent);
182
+ window.top.postMessage(componentPropsEvent, '*');
146
183
  });
147
- const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, props.importMap);
148
- console.debug('Component Library: sending event', importMapEvent);
149
- window.parent.postMessage(importMapEvent, '*');
150
- const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
151
- console.debug('Component Library: sending event', componentPropsEvent);
152
- window.top.postMessage(componentPropsEvent, '*');
153
- return unsubscribe;
184
+ init();
185
+ // return function that calls unsubsubribe - if the component was mounted correctly
186
+ return () => {
187
+ cancelled = true;
188
+ if (unsubscribe) {
189
+ unsubscribe();
190
+ }
191
+ };
154
192
  }, []);
193
+ if (importMapError) {
194
+ return (react_1.default.createElement("div", null, "No dynamic import map loaded. Please check a dynamic import map function is passed into Design Library"));
195
+ }
155
196
  if (initError) {
156
197
  return react_1.default.createElement("div", { key: renderKey }, "Error during component initialization");
157
198
  }
@@ -159,7 +200,7 @@ const VariantGeneration = (props) => {
159
200
  react_1.default.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (react_1.default.createElement("div", null, "Loading preview..."))));
160
201
  };
161
202
  exports.VariantGeneration = VariantGeneration;
162
- const DesignLibrary = ({ importMap }) => {
203
+ const DesignLibrary = ({ loadImportMap }) => {
163
204
  var _a;
164
205
  const { page } = (0, withSitecore_1.useSitecore)();
165
206
  const { isDesignLibrary } = page.mode;
@@ -168,7 +209,7 @@ const DesignLibrary = ({ importMap }) => {
168
209
  return null;
169
210
  }
170
211
  if (isVariantGeneration) {
171
- return react_1.default.createElement(exports.VariantGeneration, { importMap: importMap });
212
+ return react_1.default.createElement(exports.VariantGeneration, { loadImportMap: loadImportMap });
172
213
  }
173
214
  return react_1.default.createElement(Preview, null);
174
215
  };
package/dist/esm/components/DesignLibrary.js CHANGED
@@ -1,3 +1,12 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
1
10
  /* eslint-disable jsdoc/require-param */
2
11
  /* eslint-disable prefer-const */
3
12
  import React, { useEffect, useMemo, useState } from 'react';
@@ -90,38 +99,70 @@ export const VariantGeneration = (props) => {
90
99
  const rendering = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
91
100
  const [renderKey, setRenderKey] = useState(0);
92
101
  const [initError, setInitError] = useState(false);
102
+ const [importMapError, setImportMapError] = useState(false);
93
103
  const [Component, setComponent] = useState(null);
94
- if (!props.importMap) {
95
- return React.createElement("div", null, "No import map found. Please check your import map.");
96
- }
97
104
  if (!rendering) {
98
105
  return React.createElement("div", null, "No component found in layout data. Please check your layout data.");
99
106
  }
100
107
  useEffect(() => {
101
- const unsubscribe = addComponentPreviewHandler(props.importMap, (error, Component) => {
102
- setRenderKey((key) => key + 1);
103
- if (error) {
104
- setInitError(true);
108
+ let cancelled = false;
109
+ // since import map is loaded lazily, we only need to add preview event handler once the import map is loaded
110
+ // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
111
+ let unsubscribe = undefined;
112
+ const init = () => __awaiter(void 0, void 0, void 0, function* () {
113
+ let importMap = undefined;
114
+ if (!props.loadImportMap) {
115
+ console.error('No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.');
116
+ setImportMapError(true);
117
+ return;
118
+ }
119
+ try {
120
+ const importMapImport = yield props.loadImportMap();
121
+ importMap = importMapImport.default;
122
+ }
123
+ catch (error) {
124
+ console.error('Error loading import map:', error);
125
+ setImportMapError(true);
105
126
  return;
106
127
  }
107
- setInitError(false);
108
- setComponent(() => Component);
128
+ // account for component being unmounted while resolving async import map
129
+ if (cancelled)
130
+ return;
131
+ unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
132
+ setRenderKey((key) => key + 1);
133
+ if (error) {
134
+ setInitError(true);
135
+ return;
136
+ }
137
+ setInitError(false);
138
+ setComponent(() => Component);
139
+ });
140
+ const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
141
+ console.debug('Component Library: sending event', importMapEvent);
142
+ window.parent.postMessage(importMapEvent, '*');
143
+ const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
144
+ console.debug('Component Library: sending event', componentPropsEvent);
145
+ window.top.postMessage(componentPropsEvent, '*');
109
146
  });
110
- const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, props.importMap);
111
- console.debug('Component Library: sending event', importMapEvent);
112
- window.parent.postMessage(importMapEvent, '*');
113
- const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
114
- console.debug('Component Library: sending event', componentPropsEvent);
115
- window.top.postMessage(componentPropsEvent, '*');
116
- return unsubscribe;
147
+ init();
148
+ // return function that calls unsubsubribe - if the component was mounted correctly
149
+ return () => {
150
+ cancelled = true;
151
+ if (unsubscribe) {
152
+ unsubscribe();
153
+ }
154
+ };
117
155
  }, []);
156
+ if (importMapError) {
157
+ return (React.createElement("div", null, "No dynamic import map loaded. Please check a dynamic import map function is passed into Design Library"));
158
+ }
118
159
  if (initError) {
119
160
  return React.createElement("div", { key: renderKey }, "Error during component initialization");
120
161
  }
121
162
  return (React.createElement("main", null, Component ? (React.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
122
163
  React.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (React.createElement("div", null, "Loading preview..."))));
123
164
  };
124
- export const DesignLibrary = ({ importMap }) => {
165
+ export const DesignLibrary = ({ loadImportMap }) => {
125
166
  var _a;
126
167
  const { page } = useSitecore();
127
168
  const { isDesignLibrary } = page.mode;
@@ -130,7 +171,7 @@ export const DesignLibrary = ({ importMap }) => {
130
171
  return null;
131
172
  }
132
173
  if (isVariantGeneration) {
133
- return React.createElement(VariantGeneration, { importMap: importMap });
174
+ return React.createElement(VariantGeneration, { loadImportMap: loadImportMap });
134
175
  }
135
176
  return React.createElement(Preview, null);
136
177
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-content-sdk/react",
3
- "version": "1.1.0-canary.14",
3
+ "version": "1.1.0-canary.19",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "sideEffects": false,
@@ -63,12 +63,12 @@
63
63
  "react-dom": "^19.1.0"
64
64
  },
65
65
  "dependencies": {
66
- "@sitecore-content-sdk/core": "1.1.0-canary.14",
66
+ "@sitecore-content-sdk/core": "1.1.0-canary.19",
67
67
  "fast-deep-equal": "^3.1.3"
68
68
  },
69
69
  "description": "",
70
70
  "types": "types/index.d.ts",
71
- "gitHead": "c6c24d51d14bc5b39be456afd74f2f8c4aa29813",
71
+ "gitHead": "b5f7b7445b29ab83d26a09eee9f68da533fb991f",
72
72
  "files": [
73
73
  "dist",
74
74
  "types"
package/types/components/DesignLibrary.d.ts CHANGED
@@ -1,11 +1,14 @@
1
1
  import { JSX } from 'react';
2
2
  import * as codegen from '@sitecore-content-sdk/core/codegen';
3
3
  export declare const __mockDependencies: (mocks: any) => void;
4
+ export type ImportMapImport = {
5
+ default: codegen.ImportEntry[];
6
+ };
4
7
  type VariantGenerationProps = {
5
8
  /**
6
9
  * The import map to be used in variant generation mode.
7
10
  */
8
- importMap?: codegen.ImportEntry[];
11
+ loadImportMap?: () => Promise<ImportMapImport>;
9
12
  };
10
13
  /**
11
14
  * This component is used to render the component in variant generation mode.
@@ -14,10 +17,10 @@ type VariantGenerationProps = {
14
17
  export declare const VariantGeneration: (props: VariantGenerationProps) => JSX.Element;
15
18
  type DesignLibraryProps = {
16
19
  /**
17
- * The import map to be used in variant generation mode.
20
+ * The dynamic import for import map to be used in variant generation mode.
18
21
  * Currently it's optional but it will be required in the next major version.
19
22
  */
20
- importMap?: codegen.ImportEntry[];
23
+ loadImportMap?: () => Promise<ImportMapImport>;
21
24
  };
22
- export declare const DesignLibrary: ({ importMap }: DesignLibraryProps) => JSX.Element;
25
+ export declare const DesignLibrary: ({ loadImportMap }: DesignLibraryProps) => JSX.Element;
23
26
  export {};