@sitecore-content-sdk/react 1.1.0-canary.1 → 1.1.0-canary.11

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 +62 -23
  2. package/dist/esm/components/DesignLibrary.js +58 -19
  3. package/package.json +3 -3
  4. package/types/components/DesignLibrary.d.ts +17 -2
package/dist/cjs/components/DesignLibrary.js CHANGED
@@ -1,5 +1,4 @@
1
1
  "use strict";
2
- /* eslint-disable prefer-const */
3
2
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
3
  if (k2 === undefined) k2 = k;
5
4
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -35,12 +34,15 @@ var __importStar = (this && this.__importStar) || (function () {
35
34
  })();
36
35
  Object.defineProperty(exports, "__esModule", { value: true });
37
36
  exports.DesignLibrary = exports.VariantGeneration = exports.__mockDependencies = void 0;
37
+ /* eslint-disable jsdoc/require-param */
38
+ /* eslint-disable prefer-const */
38
39
  const react_1 = __importStar(require("react"));
39
40
  const Placeholder_1 = require("./Placeholder");
40
41
  const layout_1 = require("@sitecore-content-sdk/core/layout");
41
- const editing = __importStar(require("@sitecore-content-sdk/core/editing"));
42
+ const editing_1 = require("@sitecore-content-sdk/core/editing");
43
+ const codegen = __importStar(require("@sitecore-content-sdk/core/codegen"));
42
44
  const withSitecore_1 = require("../enhancers/withSitecore");
43
- let { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = editing;
45
+ let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
44
46
  const __mockDependencies = (mocks) => {
45
47
  addComponentPreviewHandler = mocks.addComponentPreviewHandler;
46
48
  };
@@ -68,9 +70,9 @@ const Preview = () => {
68
70
  // useEffect will fire when components are ready - and we inform the whole wide world of it too
69
71
  if (!componentReady) {
70
72
  componentReady = true;
71
- window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rootComponent.uid), '*');
73
+ window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rootComponent.uid), '*');
72
74
  }
73
- const unsubscribe = addComponentUpdateHandler(persistedRoot, (updatedRoot) => {
75
+ const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
74
76
  setRootUpdate(Object.assign({}, updatedRoot));
75
77
  setRenderKey((key) => key + 1);
76
78
  });
@@ -82,45 +84,82 @@ const Preview = () => {
82
84
  if (renderKey === 0) {
83
85
  return;
84
86
  }
85
- window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
87
+ window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
86
88
  }, [renderKey, rootComponent.uid]);
87
89
  return (react_1.default.createElement(react_1.default.Fragment, null,
88
90
  react_1.default.createElement("main", null,
89
91
  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 }))))));
90
92
  };
93
+ class ErrorBoundary extends react_1.default.Component {
94
+ constructor() {
95
+ super(...arguments);
96
+ this.state = {
97
+ hasError: false,
98
+ };
99
+ }
100
+ static getDerivedStateFromError() {
101
+ return { hasError: true };
102
+ }
103
+ componentDidUpdate(prevProps) {
104
+ if (prevProps.renderKey !== this.props.renderKey) {
105
+ this.setState({ hasError: false });
106
+ }
107
+ }
108
+ componentDidCatch(error) {
109
+ const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
110
+ console.debug('Component Library: sending error event', errorEvent);
111
+ window.top.postMessage(errorEvent, '*');
112
+ }
113
+ render() {
114
+ if (this.state.hasError) {
115
+ return react_1.default.createElement("div", null, "Error during component rendering");
116
+ }
117
+ return this.props.children;
118
+ }
119
+ }
91
120
  /**
92
121
  * This component is used to render the component in variant generation mode.
93
122
  * It is used to send the import-map and component-props events to the parent window and render the dynamic component.
94
123
  */
95
- const VariantGeneration = () => {
124
+ const VariantGeneration = (props) => {
96
125
  const { page } = (0, withSitecore_1.useSitecore)();
97
126
  const { layout: { sitecore: { route }, }, } = page;
98
127
  const rendering = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
99
- const [Component, setComponent] = react_1.default.useState(null);
128
+ const [renderKey, setRenderKey] = (0, react_1.useState)(0);
129
+ const [initError, setInitError] = (0, react_1.useState)(false);
130
+ 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
+ if (!rendering) {
135
+ return react_1.default.createElement("div", null, "No component found in layout data. Please check your layout data.");
136
+ }
100
137
  (0, react_1.useEffect)(() => {
101
- if (!rendering) {
102
- return () => { };
103
- }
104
- const unsubscribe = addComponentPreviewHandler((Component) => {
138
+ const unsubscribe = addComponentPreviewHandler(props.importMap, (error, Component) => {
139
+ setRenderKey((key) => key + 1);
140
+ if (error) {
141
+ setInitError(true);
142
+ return;
143
+ }
144
+ setInitError(false);
105
145
  setComponent(() => Component);
106
146
  });
107
- const importMap = [];
108
- const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
109
- console.debug('Component Library: sending import-map event', importMapEvent);
110
- window.top.postMessage(importMapEvent, '*');
147
+ const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, props.importMap);
148
+ console.debug('Component Library: sending event', importMapEvent);
149
+ window.parent.postMessage(importMapEvent, '*');
111
150
  const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
112
- console.debug('Component Library: sending component-props event', componentPropsEvent);
151
+ console.debug('Component Library: sending event', componentPropsEvent);
113
152
  window.top.postMessage(componentPropsEvent, '*');
114
153
  return unsubscribe;
115
154
  }, []);
116
- if (!rendering) {
117
- return react_1.default.createElement("div", null, "No component found in layout data. Please check your layout data.");
155
+ if (initError) {
156
+ return react_1.default.createElement("div", { key: renderKey }, "Error during component initialization");
118
157
  }
119
- return Component ? (react_1.default.createElement("div", null,
120
- react_1.default.createElement(Component, { fields: rendering.fields, params: rendering.params }))) : (react_1.default.createElement("div", null, "Loading preview..."));
158
+ return (react_1.default.createElement("main", null, Component ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
159
+ react_1.default.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (react_1.default.createElement("div", null, "Loading preview..."))));
121
160
  };
122
161
  exports.VariantGeneration = VariantGeneration;
123
- const DesignLibrary = () => {
162
+ const DesignLibrary = ({ importMap }) => {
124
163
  var _a;
125
164
  const { page } = (0, withSitecore_1.useSitecore)();
126
165
  const { isDesignLibrary } = page.mode;
@@ -129,7 +168,7 @@ const DesignLibrary = () => {
129
168
  return null;
130
169
  }
131
170
  if (isVariantGeneration) {
132
- return react_1.default.createElement(exports.VariantGeneration, null);
171
+ return react_1.default.createElement(exports.VariantGeneration, { importMap: importMap });
133
172
  }
134
173
  return react_1.default.createElement(Preview, null);
135
174
  };
package/dist/esm/components/DesignLibrary.js CHANGED
@@ -1,10 +1,12 @@
1
+ /* eslint-disable jsdoc/require-param */
1
2
  /* eslint-disable prefer-const */
2
3
  import React, { useEffect, useMemo, useState } from 'react';
3
4
  import { Placeholder } from './Placeholder';
4
5
  import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-content-sdk/core/layout';
5
- import * as editing from '@sitecore-content-sdk/core/editing';
6
+ import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
7
+ import * as codegen from '@sitecore-content-sdk/core/codegen';
6
8
  import { useSitecore } from '../enhancers/withSitecore';
7
- let { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = editing;
9
+ let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
8
10
  export const __mockDependencies = (mocks) => {
9
11
  addComponentPreviewHandler = mocks.addComponentPreviewHandler;
10
12
  };
@@ -51,38 +53,75 @@ const Preview = () => {
51
53
  React.createElement("main", null,
52
54
  React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
53
55
  };
56
+ class ErrorBoundary extends React.Component {
57
+ constructor() {
58
+ super(...arguments);
59
+ this.state = {
60
+ hasError: false,
61
+ };
62
+ }
63
+ static getDerivedStateFromError() {
64
+ return { hasError: true };
65
+ }
66
+ componentDidUpdate(prevProps) {
67
+ if (prevProps.renderKey !== this.props.renderKey) {
68
+ this.setState({ hasError: false });
69
+ }
70
+ }
71
+ componentDidCatch(error) {
72
+ const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
73
+ console.debug('Component Library: sending error event', errorEvent);
74
+ window.top.postMessage(errorEvent, '*');
75
+ }
76
+ render() {
77
+ if (this.state.hasError) {
78
+ return React.createElement("div", null, "Error during component rendering");
79
+ }
80
+ return this.props.children;
81
+ }
82
+ }
54
83
  /**
55
84
  * This component is used to render the component in variant generation mode.
56
85
  * It is used to send the import-map and component-props events to the parent window and render the dynamic component.
57
86
  */
58
- export const VariantGeneration = () => {
87
+ export const VariantGeneration = (props) => {
59
88
  const { page } = useSitecore();
60
89
  const { layout: { sitecore: { route }, }, } = page;
61
90
  const rendering = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
62
- const [Component, setComponent] = React.useState(null);
91
+ const [renderKey, setRenderKey] = useState(0);
92
+ const [initError, setInitError] = useState(false);
93
+ 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
+ if (!rendering) {
98
+ return React.createElement("div", null, "No component found in layout data. Please check your layout data.");
99
+ }
63
100
  useEffect(() => {
64
- if (!rendering) {
65
- return () => { };
66
- }
67
- const unsubscribe = addComponentPreviewHandler((Component) => {
101
+ const unsubscribe = addComponentPreviewHandler(props.importMap, (error, Component) => {
102
+ setRenderKey((key) => key + 1);
103
+ if (error) {
104
+ setInitError(true);
105
+ return;
106
+ }
107
+ setInitError(false);
68
108
  setComponent(() => Component);
69
109
  });
70
- const importMap = [];
71
- const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
72
- console.debug('Component Library: sending import-map event', importMapEvent);
73
- window.top.postMessage(importMapEvent, '*');
110
+ const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, props.importMap);
111
+ console.debug('Component Library: sending event', importMapEvent);
112
+ window.parent.postMessage(importMapEvent, '*');
74
113
  const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
75
- console.debug('Component Library: sending component-props event', componentPropsEvent);
114
+ console.debug('Component Library: sending event', componentPropsEvent);
76
115
  window.top.postMessage(componentPropsEvent, '*');
77
116
  return unsubscribe;
78
117
  }, []);
79
- if (!rendering) {
80
- return React.createElement("div", null, "No component found in layout data. Please check your layout data.");
118
+ if (initError) {
119
+ return React.createElement("div", { key: renderKey }, "Error during component initialization");
81
120
  }
82
- return Component ? (React.createElement("div", null,
83
- React.createElement(Component, { fields: rendering.fields, params: rendering.params }))) : (React.createElement("div", null, "Loading preview..."));
121
+ return (React.createElement("main", null, Component ? (React.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
122
+ React.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (React.createElement("div", null, "Loading preview..."))));
84
123
  };
85
- export const DesignLibrary = () => {
124
+ export const DesignLibrary = ({ importMap }) => {
86
125
  var _a;
87
126
  const { page } = useSitecore();
88
127
  const { isDesignLibrary } = page.mode;
@@ -91,7 +130,7 @@ export const DesignLibrary = () => {
91
130
  return null;
92
131
  }
93
132
  if (isVariantGeneration) {
94
- return React.createElement(VariantGeneration, null);
133
+ return React.createElement(VariantGeneration, { importMap: importMap });
95
134
  }
96
135
  return React.createElement(Preview, null);
97
136
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sitecore-content-sdk/react",
3
- "version": "1.1.0-canary.1",
3
+ "version": "1.1.0-canary.11",
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.1",
66
+ "@sitecore-content-sdk/core": "1.1.0-canary.11",
67
67
  "fast-deep-equal": "^3.1.3"
68
68
  },
69
69
  "description": "",
70
70
  "types": "types/index.d.ts",
71
- "gitHead": "3cbc41c878aceb82b5fbdf78663472d30af29650",
71
+ "gitHead": "f6fc3ea76db3d246cf639b9b8d97ba64b0797fac",
72
72
  "files": [
73
73
  "dist",
74
74
  "types"
package/types/components/DesignLibrary.d.ts CHANGED
@@ -1,8 +1,23 @@
1
1
  import { JSX } from 'react';
2
+ import * as codegen from '@sitecore-content-sdk/core/codegen';
2
3
  export declare const __mockDependencies: (mocks: any) => void;
4
+ type VariantGenerationProps = {
5
+ /**
6
+ * The import map to be used in variant generation mode.
7
+ */
8
+ importMap?: codegen.ImportEntry[];
9
+ };
3
10
  /**
4
11
  * This component is used to render the component in variant generation mode.
5
12
  * It is used to send the import-map and component-props events to the parent window and render the dynamic component.
6
13
  */
7
- export declare const VariantGeneration: () => JSX.Element;
8
- export declare const DesignLibrary: () => JSX.Element;
14
+ export declare const VariantGeneration: (props: VariantGenerationProps) => JSX.Element;
15
+ type DesignLibraryProps = {
16
+ /**
17
+ * The import map to be used in variant generation mode.
18
+ * Currently it's optional but it will be required in the next major version.
19
+ */
20
+ importMap?: codegen.ImportEntry[];
21
+ };
22
+ export declare const DesignLibrary: ({ importMap }: DesignLibraryProps) => JSX.Element;
23
+ export {};