@sitecore-jss/sitecore-jss-react 22.7.0-canary.1 → 22.7.0-canary.2

package/dist/cjs/components/ErrorBoundary.js

@@ -75,8 +75,8 @@ class ErrorBoundary extends react_1.default.Component {
                 }
             }
         }
-        // do not apply suspense on already dynamic components
-        if (this.props.isDynamic) {
+        // do not apply suspense when suspense is disabled or when on already dynamic components
+        if (this.props.disableSuspense || this.props.isDynamic) {
             return this.props.children;
         }
         return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));

package/dist/cjs/components/PlaceholderCommon.js

@@ -151,9 +151,10 @@ class PlaceholderCommon extends react_1.default.Component {
                 const isByocWrapper = componentRendering.componentName === BYOCWrapper_1.BYOC_WRAPPER_RENDERING_NAME;
                 // all dynamic elements will have a separate render prop
                 const isDynamicComponent = !!((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload);
+                const disableSuspense = this.props.disableSuspense || false;
                 // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
                 // that's why we need to expose element's props here
-                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper }, rendered.props), rendered));
+                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper, disableSuspense: disableSuspense }, rendered.props), rendered));
             }
             // if editMode is equal to 'metadata' then emit shallow chromes for hydration in Pages
             if (((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.editMode) === layout_1.EditMode.Metadata) {
@@ -244,4 +245,5 @@ PlaceholderCommon.propTypes = {
     ]),
     modifyComponentProps: prop_types_1.default.func,
     sitecoreContext: prop_types_1.default.object,
+    disableSuspense: prop_types_1.default.bool,
 };

package/dist/esm/components/ErrorBoundary.js

@@ -50,8 +50,8 @@ class ErrorBoundary extends React.Component {
                 }
             }
         }
-        // do not apply suspense on already dynamic components
-        if (this.props.isDynamic) {
+        // do not apply suspense when suspense is disabled or when on already dynamic components
+        if (this.props.disableSuspense || this.props.isDynamic) {
             return this.props.children;
         }
         return (React.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));

package/dist/esm/components/PlaceholderCommon.js

@@ -145,9 +145,10 @@ export class PlaceholderCommon extends React.Component {
                 const isByocWrapper = componentRendering.componentName === BYOC_WRAPPER_RENDERING_NAME;
                 // all dynamic elements will have a separate render prop
                 const isDynamicComponent = !!((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload);
+                const disableSuspense = this.props.disableSuspense || false;
                 // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
                 // that's why we need to expose element's props here
-                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper }, rendered.props), rendered));
+                rendered = (React.createElement(ErrorBoundary, Object.assign({ key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper, disableSuspense: disableSuspense }, rendered.props), rendered));
             }
             // if editMode is equal to 'metadata' then emit shallow chromes for hydration in Pages
             if (((_b = this.props.sitecoreContext) === null || _b === void 0 ? void 0 : _b.editMode) === EditMode.Metadata) {
@@ -237,4 +238,5 @@ PlaceholderCommon.propTypes = {
     ]),
     modifyComponentProps: PropTypes.func,
     sitecoreContext: PropTypes.object,
+    disableSuspense: PropTypes.bool,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "22.7.0-canary.1",
+  "version": "22.7.0-canary.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -62,14 +62,14 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "22.7.0-canary.1",
+    "@sitecore-jss/sitecore-jss": "22.7.0-canary.2",
     "fast-deep-equal": "^3.1.3",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "31b27434eca1cdfcc402ad567b7ecff70670f675",
+  "gitHead": "ca9f11c61d1477426d308dc99369074a8e562a40",
   "files": [
     "dist",
     "types"

package/types/components/ErrorBoundary.d.ts

@@ -10,6 +10,7 @@ export type ErrorBoundaryProps = {
     sitecoreContext: SitecoreContextValue;
     type: string;
     isDynamic?: boolean;
+    disableSuspense?: boolean;
     errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
     rendering?: ComponentRendering;
     componentLoadingMessage?: string;

package/types/components/PlaceholderCommon.d.ts

@@ -66,6 +66,11 @@ export interface PlaceholderProps {
      * The message that gets displayed while component is loading
      */
     componentLoadingMessage?: string;
+    /**
+     * If true, disables Suspense for the placeholder.
+     * @default false
+     */
+    disableSuspense?: boolean;
 }
 export declare class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
     static propTypes: {
@@ -81,6 +86,7 @@ export declare class PlaceholderCommon<T extends PlaceholderProps> extends React
         errorComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
         modifyComponentProps: PropTypes.Requireable<(...args: any[]) => any>;
         sitecoreContext: PropTypes.Requireable<SitecoreContextValue>;
+        disableSuspense: PropTypes.Requireable<boolean>;
     };
     nodeRefs: Element[];
     state: Readonly<{