@sitecore-jss/sitecore-jss-react 22.1.0-canary.6 → 22.1.0-canary.8

package/dist/cjs/components/ErrorBoundary.js

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const withSitecoreContext_1 = require("../enhancers/withSitecoreContext");
+class ErrorBoundary extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.defaultErrorMessage = 'There was a problem loading this section.'; // eslint-disable-line
+        this.defaultLoadingMessage = 'Loading component...';
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error({ error, errorInfo });
+    }
+    isInDevMode() {
+        return process.env.NODE_ENV === 'development';
+    }
+    render() {
+        var _a, _b;
+        if (this.state.error) {
+            if (this.props.customErrorComponent) {
+                return react_1.default.createElement(this.props.customErrorComponent, { error: this.state.error });
+            }
+            else {
+                if (this.isInDevMode() || ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing)) {
+                    return (react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "sc-jss-placeholder-error" },
+                            "A rendering error occurred in component",
+                            ' ',
+                            react_1.default.createElement("em", null, (_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.componentName),
+                            react_1.default.createElement("br", null),
+                            "Error: ",
+                            react_1.default.createElement("em", null, this.state.error.message))));
+                }
+                else {
+                    return (react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "sc-jss-placeholder-error" }, this.defaultErrorMessage)));
+                }
+            }
+        }
+        return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+    }
+}
+exports.default = (0, withSitecoreContext_1.withSitecoreContext)()(ErrorBoundary);

package/dist/cjs/components/PlaceholderCommon.js

@@ -24,6 +24,7 @@ const FEaaSComponent_1 = require("./FEaaSComponent");
 const FEaaSWrapper_1 = require("./FEaaSWrapper");
 const BYOCComponent_1 = require("./BYOCComponent");
 const BYOCWrapper_1 = require("./BYOCWrapper");
+const ErrorBoundary_1 = __importDefault(require("./ErrorBoundary"));
 class PlaceholderCommon extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -126,7 +127,12 @@ class PlaceholderCommon extends react_1.default.Component {
             })), { rendering: componentRendering });
             return react_1.default.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
         })
-            .filter((element) => element); // remove nulls
+            .filter((element) => element)
+            .map((element, id) => {
+            // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
+            const type = element.props.type === 'text/sitecore' ? element.props.type : '';
+            return (react_1.default.createElement(ErrorBoundary_1.default, { key: element.type + '-' + id, customErrorComponent: this.props.errorComponent, rendering: element.props.rendering, componentLoadingMessage: this.props.componentLoadingMessage, type: type }, element));
+        });
     }
     getComponentForRendering(renderingDefinition) {
         var _a;

package/dist/esm/components/ErrorBoundary.js

@@ -0,0 +1,45 @@
+import React, { Suspense } from 'react';
+import { withSitecoreContext } from '../enhancers/withSitecoreContext';
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.defaultErrorMessage = 'There was a problem loading this section.'; // eslint-disable-line
+        this.defaultLoadingMessage = 'Loading component...';
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error({ error, errorInfo });
+    }
+    isInDevMode() {
+        return process.env.NODE_ENV === 'development';
+    }
+    render() {
+        var _a, _b;
+        if (this.state.error) {
+            if (this.props.customErrorComponent) {
+                return React.createElement(this.props.customErrorComponent, { error: this.state.error });
+            }
+            else {
+                if (this.isInDevMode() || ((_a = this.props.sitecoreContext) === null || _a === void 0 ? void 0 : _a.pageEditing)) {
+                    return (React.createElement("div", null,
+                        React.createElement("div", { className: "sc-jss-placeholder-error" },
+                            "A rendering error occurred in component",
+                            ' ',
+                            React.createElement("em", null, (_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.componentName),
+                            React.createElement("br", null),
+                            "Error: ",
+                            React.createElement("em", null, this.state.error.message))));
+                }
+                else {
+                    return (React.createElement("div", null,
+                        React.createElement("div", { className: "sc-jss-placeholder-error" }, this.defaultErrorMessage)));
+                }
+            }
+        }
+        return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+    }
+}
+export default withSitecoreContext()(ErrorBoundary);

package/dist/esm/components/PlaceholderCommon.js

@@ -18,6 +18,7 @@ import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './FEaaSComponent
 import { FEaaSWrapper, FEAAS_WRAPPER_RENDERING_NAME } from './FEaaSWrapper';
 import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
 import { BYOCWrapper, BYOC_WRAPPER_RENDERING_NAME } from './BYOCWrapper';
+import ErrorBoundary from './ErrorBoundary';
 export class PlaceholderCommon extends React.Component {
     constructor(props) {
         super(props);
@@ -120,7 +121,12 @@ export class PlaceholderCommon extends React.Component {
             })), { rendering: componentRendering });
             return React.createElement(component, this.props.modifyComponentProps ? this.props.modifyComponentProps(finalProps) : finalProps);
         })
-            .filter((element) => element); // remove nulls
+            .filter((element) => element)
+            .map((element, id) => {
+            // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
+            const type = element.props.type === 'text/sitecore' ? element.props.type : '';
+            return (React.createElement(ErrorBoundary, { key: element.type + '-' + id, customErrorComponent: this.props.errorComponent, rendering: element.props.rendering, componentLoadingMessage: this.props.componentLoadingMessage, type: type }, element));
+        });
     }
     getComponentForRendering(renderingDefinition) {
         var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.1.0-canary.6",
+  "version": "22.1.0-canary.8",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -61,14 +61,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.6",
+    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.8",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "09561a04bef1c889ebe3c999ad61040f059eed57",
+  "gitHead": "74bfc5998039cdc358f5e715febb54997fcd7ef1",
   "files": [
     "dist",
     "types"

package/types/components/ErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="@types/react" />
+import React, { ReactNode } from 'react';
+import { ComponentRendering } from '@sitecore-jss/sitecore-jss/layout';
+import { SitecoreContextValue } from './SitecoreContext';
+type CustomErrorComponentProps = {
+    [prop: string]: unknown;
+};
+export type ErrorBoundaryProps = {
+    children: ReactNode;
+    sitecoreContext: SitecoreContextValue;
+    type: string;
+    customErrorComponent?: React.ComponentClass<CustomErrorComponentProps> | React.FC<CustomErrorComponentProps>;
+    rendering?: ComponentRendering;
+    componentLoadingMessage?: string;
+};
+declare const _default: (props: import("../enhancers/withSitecoreContext").WithSitecoreContextHocProps<ErrorBoundaryProps>) => React.JSX.Element;
+export default _default;

package/types/components/PlaceholderCommon.d.ts

@@ -57,6 +57,10 @@ export interface PlaceholderProps {
      * the placeholder
      */
     errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
+    /**
+     * The message that gets displayed while component is loading
+     */
+    componentLoadingMessage?: string;
 }
 export declare class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
     static propTypes: {
@@ -86,9 +90,7 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
     } | {
         styles: string;
     };
-    getComponentsForRenderingData(placeholderData: (ComponentRendering | HtmlElementRendering)[]): React.ReactElement<{
-        [attr: string]: unknown;
-    }, string | React.JSXElementConstructor<any>>[];
+    getComponentsForRenderingData(placeholderData: (ComponentRendering | HtmlElementRendering)[]): React.JSX.Element[];
     getComponentForRendering(renderingDefinition: ComponentRendering): ComponentType | null;
     addRef(nodeRef: Element): void;
     createRawElement(elem: HtmlElementRendering, baseProps: {