@sitecore-content-sdk/react 1.2.0-canary.1 → 1.2.0-canary.2

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 (3) hide show
  1. package/dist/cjs/components/DesignLibrary.js +26 -21
  2. package/dist/esm/components/DesignLibrary.js +26 -21
  3. package/package.json +3 -3
package/dist/cjs/components/DesignLibrary.js CHANGED
@@ -96,6 +96,11 @@ const Preview = () => {
96
96
  react_1.default.createElement("main", null,
97
97
  react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
98
98
  };
99
+ const sendErrorEvent = (uid, error, type) => {
100
+ const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
101
+ console.error('Component Library: sending error event', errorEvent);
102
+ window.top.postMessage(errorEvent, '*');
103
+ };
99
104
  class ErrorBoundary extends react_1.default.Component {
100
105
  constructor() {
101
106
  super(...arguments);
@@ -112,9 +117,7 @@ class ErrorBoundary extends react_1.default.Component {
112
117
  }
113
118
  }
114
119
  componentDidCatch(error) {
115
- const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
116
- console.debug('Component Library: sending error event', errorEvent);
117
- window.top.postMessage(errorEvent, '*');
120
+ sendErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
118
121
  }
119
122
  render() {
120
123
  if (this.state.hasError) {
@@ -132,12 +135,7 @@ const VariantGeneration = (props) => {
132
135
  const { layout: { sitecore: { route }, }, } = page;
133
136
  const rendering = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
134
137
  const [renderKey, setRenderKey] = (0, react_1.useState)(0);
135
- const [initError, setInitError] = (0, react_1.useState)(false);
136
- const [importMapError, setImportMapError] = (0, react_1.useState)(false);
137
138
  const [Component, setComponent] = (0, react_1.useState)(null);
138
- if (!rendering) {
139
- return react_1.default.createElement("div", null, "No component found in layout data. Please check your layout data.");
140
- }
141
139
  // eslint-disable-next-line react-hooks/rules-of-hooks
142
140
  (0, react_1.useEffect)(() => {
143
141
  let cancelled = false;
@@ -145,10 +143,11 @@ const VariantGeneration = (props) => {
145
143
  // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
146
144
  let unsubscribe = undefined;
147
145
  const init = () => __awaiter(void 0, void 0, void 0, function* () {
146
+ var _a;
148
147
  let importMap = undefined;
149
148
  if (!props.loadImportMap) {
150
- console.error('No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.');
151
- setImportMapError(true);
149
+ const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
150
+ sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
152
151
  return;
153
152
  }
154
153
  try {
@@ -156,20 +155,19 @@ const VariantGeneration = (props) => {
156
155
  importMap = importMapImport.default;
157
156
  }
158
157
  catch (error) {
159
- console.error('Error loading import map:', error);
160
- setImportMapError(true);
158
+ const errorMessage = `Error loading import map: ${error}`;
159
+ sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
161
160
  return;
162
161
  }
163
162
  // account for component being unmounted while resolving async import map
164
163
  if (cancelled)
165
164
  return;
166
165
  unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
167
- setRenderKey((key) => key + 1);
166
+ // Error event is already sent in the addComponentPreviewHandler
168
167
  if (error) {
169
- setInitError(true);
170
168
  return;
171
169
  }
172
- setInitError(false);
170
+ setRenderKey((key) => key + 1);
173
171
  setComponent(() => Component);
174
172
  });
175
173
  const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
@@ -178,6 +176,9 @@ const VariantGeneration = (props) => {
178
176
  const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
179
177
  console.debug('Component Library: sending event', componentPropsEvent);
180
178
  window.top.postMessage(componentPropsEvent, '*');
179
+ const readyEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid);
180
+ console.debug('Component Library: sending event', readyEvent);
181
+ (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(readyEvent, '*');
181
182
  });
182
183
  init();
183
184
  // return function that calls unsubsubribe - if the component was mounted correctly
@@ -188,12 +189,16 @@ const VariantGeneration = (props) => {
188
189
  }
189
190
  };
190
191
  }, []);
191
- if (importMapError) {
192
- return (react_1.default.createElement("div", null, "No dynamic import map loaded. Please check a dynamic import map function is passed into Design Library"));
193
- }
194
- if (initError) {
195
- return react_1.default.createElement("div", { key: renderKey }, "Error during component initialization");
196
- }
192
+ // eslint-disable-next-line react-hooks/rules-of-hooks
193
+ (0, react_1.useEffect)(() => {
194
+ var _a;
195
+ // Send a rendered event only as effect of a component update command
196
+ if (renderKey === 0)
197
+ return undefined;
198
+ const renderedEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid);
199
+ console.debug('Component Library: sending event', renderedEvent);
200
+ (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(renderedEvent, '*');
201
+ }, [renderKey, rendering === null || rendering === void 0 ? void 0 : rendering.uid]);
197
202
  return (react_1.default.createElement("main", null, Component ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
198
203
  react_1.default.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (react_1.default.createElement("div", null, "Loading preview..."))));
199
204
  };
package/dist/esm/components/DesignLibrary.js CHANGED
@@ -59,6 +59,11 @@ const Preview = () => {
59
59
  React.createElement("main", null,
60
60
  React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
61
61
  };
62
+ const sendErrorEvent = (uid, error, type) => {
63
+ const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
64
+ console.error('Component Library: sending error event', errorEvent);
65
+ window.top.postMessage(errorEvent, '*');
66
+ };
62
67
  class ErrorBoundary extends React.Component {
63
68
  constructor() {
64
69
  super(...arguments);
@@ -75,9 +80,7 @@ class ErrorBoundary extends React.Component {
75
80
  }
76
81
  }
77
82
  componentDidCatch(error) {
78
- const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
79
- console.debug('Component Library: sending error event', errorEvent);
80
- window.top.postMessage(errorEvent, '*');
83
+ sendErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
81
84
  }
82
85
  render() {
83
86
  if (this.state.hasError) {
@@ -95,12 +98,7 @@ export const VariantGeneration = (props) => {
95
98
  const { layout: { sitecore: { route }, }, } = page;
96
99
  const rendering = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
97
100
  const [renderKey, setRenderKey] = useState(0);
98
- const [initError, setInitError] = useState(false);
99
- const [importMapError, setImportMapError] = useState(false);
100
101
  const [Component, setComponent] = useState(null);
101
- if (!rendering) {
102
- return React.createElement("div", null, "No component found in layout data. Please check your layout data.");
103
- }
104
102
  // eslint-disable-next-line react-hooks/rules-of-hooks
105
103
  useEffect(() => {
106
104
  let cancelled = false;
@@ -108,10 +106,11 @@ export const VariantGeneration = (props) => {
108
106
  // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
109
107
  let unsubscribe = undefined;
110
108
  const init = () => __awaiter(void 0, void 0, void 0, function* () {
109
+ var _a;
111
110
  let importMap = undefined;
112
111
  if (!props.loadImportMap) {
113
- console.error('No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.');
114
- setImportMapError(true);
112
+ const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
113
+ sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
115
114
  return;
116
115
  }
117
116
  try {
@@ -119,20 +118,19 @@ export const VariantGeneration = (props) => {
119
118
  importMap = importMapImport.default;
120
119
  }
121
120
  catch (error) {
122
- console.error('Error loading import map:', error);
123
- setImportMapError(true);
121
+ const errorMessage = `Error loading import map: ${error}`;
122
+ sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
124
123
  return;
125
124
  }
126
125
  // account for component being unmounted while resolving async import map
127
126
  if (cancelled)
128
127
  return;
129
128
  unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
130
- setRenderKey((key) => key + 1);
129
+ // Error event is already sent in the addComponentPreviewHandler
131
130
  if (error) {
132
- setInitError(true);
133
131
  return;
134
132
  }
135
- setInitError(false);
133
+ setRenderKey((key) => key + 1);
136
134
  setComponent(() => Component);
137
135
  });
138
136
  const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
@@ -141,6 +139,9 @@ export const VariantGeneration = (props) => {
141
139
  const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
142
140
  console.debug('Component Library: sending event', componentPropsEvent);
143
141
  window.top.postMessage(componentPropsEvent, '*');
142
+ const readyEvent = getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rendering.uid);
143
+ console.debug('Component Library: sending event', readyEvent);
144
+ (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(readyEvent, '*');
144
145
  });
145
146
  init();
146
147
  // return function that calls unsubsubribe - if the component was mounted correctly
@@ -151,12 +152,16 @@ export const VariantGeneration = (props) => {
151
152
  }
152
153
  };
153
154
  }, []);
154
- if (importMapError) {
155
- return (React.createElement("div", null, "No dynamic import map loaded. Please check a dynamic import map function is passed into Design Library"));
156
- }
157
- if (initError) {
158
- return React.createElement("div", { key: renderKey }, "Error during component initialization");
159
- }
155
+ // eslint-disable-next-line react-hooks/rules-of-hooks
156
+ useEffect(() => {
157
+ var _a;
158
+ // Send a rendered event only as effect of a component update command
159
+ if (renderKey === 0)
160
+ return undefined;
161
+ const renderedEvent = getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rendering.uid);
162
+ console.debug('Component Library: sending event', renderedEvent);
163
+ (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(renderedEvent, '*');
164
+ }, [renderKey, rendering === null || rendering === void 0 ? void 0 : rendering.uid]);
160
165
  return (React.createElement("main", null, Component ? (React.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
161
166
  React.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (React.createElement("div", null, "Loading preview..."))));
162
167
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-content-sdk/react",
3
- "version": "1.2.0-canary.1",
3
+ "version": "1.2.0-canary.2",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "sideEffects": false,
@@ -72,12 +72,12 @@
72
72
  "react-dom": "^19.1.0"
73
73
  },
74
74
  "dependencies": {
75
- "@sitecore-content-sdk/core": "1.2.0-canary.1",
75
+ "@sitecore-content-sdk/core": "1.2.0-canary.2",
76
76
  "fast-deep-equal": "^3.1.3"
77
77
  },
78
78
  "description": "",
79
79
  "types": "types/index.d.ts",
80
- "gitHead": "565f6fc2a2cb57ddcaf3dddb6e0a416a996eeb80",
80
+ "gitHead": "91681af284f72808222c3648de790d2bba5c5953",
81
81
  "files": [
82
82
  "dist",
83
83
  "types"