@sitecore-content-sdk/react 0.3.0-canary.2 → 0.3.0-canary.21

package/dist/cjs/components/EditingScripts.js

@@ -12,12 +12,11 @@ const editing_2 = require("@sitecore-content-sdk/core/editing");
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
  * Renders script required for the Design Library (when RenderingType is `component`).
- * @param {EditingScriptsProps} props - The props for the EditingScripts component.
- * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
  * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-const EditingScripts = (props) => {
-    const { pageContext: { pageState, clientData, clientScripts, renderingType }, } = (0, withSitecore_1.useSitecore)();
+const EditingScripts = () => {
+    var _a;
+    const { pageContext: { pageState, clientData, clientScripts, renderingType }, api, } = (0, withSitecore_1.useSitecore)();
     // Don't render anything if not in editing/preview mode and rendering type is not component
     if (renderingType !== layout_1.RenderingType.Component &&
         (pageState === layout_1.LayoutServicePageState.Normal ||
@@ -28,7 +27,7 @@ const EditingScripts = (props) => {
     // In case of RenderingType.Component - render only the script for Design Libnrary
     if (renderingType === layout_1.RenderingType.Component) {
         // Add cache buster to the script URL
-        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)(props.sitecoreEdgeUrl)}?cb=${Date.now()}`;
+        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${Date.now()}`;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
     }

package/dist/cjs/components/ErrorBoundary.js

@@ -85,8 +85,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

@@ -74,8 +74,9 @@ class PlaceholderCommon extends react_1.default.Component {
     getSXAParams(rendering) {
         if (!rendering.params)
             return {};
-        return (rendering.params.FieldNames && {
-            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        const { GridParameters, Styles } = rendering.params;
+        return ((GridParameters || Styles) && {
+            styles: `${GridParameters || ''} ${Styles || ''}`,
         });
     }
     getComponentsForRenderingData(placeholderData) {
@@ -131,9 +132,13 @@ class PlaceholderCommon extends react_1.default.Component {
             if (!isEmpty) {
                 // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
                 const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                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: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+                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);
+                rendered = (react_1.default.createElement(ErrorBoundary_1.default, Object.assign({ "data-testid": "error-boundary", key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper, disableSuspense: disableSuspense }, rendered.props), rendered));
             }
             // if in edit mode then emit shallow chromes for hydration in Pages
             if ((_b = this.props.pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing) {

package/dist/esm/components/EditingScripts.js

@@ -6,12 +6,11 @@ import { getDesignLibraryScriptLink } from '@sitecore-content-sdk/core/editing';
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
  * Renders script required for the Design Library (when RenderingType is `component`).
- * @param {EditingScriptsProps} props - The props for the EditingScripts component.
- * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
  * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-export const EditingScripts = (props) => {
-    const { pageContext: { pageState, clientData, clientScripts, renderingType }, } = useSitecore();
+export const EditingScripts = () => {
+    var _a;
+    const { pageContext: { pageState, clientData, clientScripts, renderingType }, api, } = useSitecore();
     // Don't render anything if not in editing/preview mode and rendering type is not component
     if (renderingType !== RenderingType.Component &&
         (pageState === LayoutServicePageState.Normal ||
@@ -22,7 +21,7 @@ export const EditingScripts = (props) => {
     // In case of RenderingType.Component - render only the script for Design Libnrary
     if (renderingType === RenderingType.Component) {
         // Add cache buster to the script URL
-        const scriptUrl = `${getDesignLibraryScriptLink(props.sitecoreEdgeUrl)}?cb=${Date.now()}`;
+        const scriptUrl = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${Date.now()}`;
         return (React.createElement(React.Fragment, null,
             React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
     }

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

@@ -68,8 +68,9 @@ export class PlaceholderCommon extends React.Component {
     getSXAParams(rendering) {
         if (!rendering.params)
             return {};
-        return (rendering.params.FieldNames && {
-            styles: `${rendering.params.GridParameters || ''} ${rendering.params.Styles || ''}`,
+        const { GridParameters, Styles } = rendering.params;
+        return ((GridParameters || Styles) && {
+            styles: `${GridParameters || ''} ${Styles || ''}`,
         });
     }
     getComponentsForRenderingData(placeholderData) {
@@ -125,9 +126,13 @@ export class PlaceholderCommon extends React.Component {
             if (!isEmpty) {
                 // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used
                 const type = rendered.props.type === 'text/sitecore' ? rendered.props.type : '';
+                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: ((_a = component.render) === null || _a === void 0 ? void 0 : _a.preload) ? true : false }, rendered.props), rendered));
+                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);
+                rendered = (React.createElement(ErrorBoundary, Object.assign({ "data-testid": "error-boundary", key: rendered.type + '-' + index, errorComponent: this.props.errorComponent, componentLoadingMessage: this.props.componentLoadingMessage, type: type, isDynamic: isDynamicComponent || isByocWrapper, disableSuspense: disableSuspense }, rendered.props), rendered));
             }
             // if in edit mode then emit shallow chromes for hydration in Pages
             if ((_b = this.props.pageContext) === null || _b === void 0 ? void 0 : _b.pageEditing) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "0.3.0-canary.2",
+  "version": "0.3.0-canary.21",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -63,12 +63,12 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "0.3.0-canary.2",
+    "@sitecore-content-sdk/core": "0.3.0-canary.21",
     "fast-deep-equal": "^3.1.3"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "8243c78fad6aa9456ac8cb726ac0a90c72589506",
+  "gitHead": "c793864ef8bbfec2c08aaf4959a169a7519401ce",
   "files": [
     "dist",
     "types"

package/types/components/EditingScripts.d.ts

@@ -1,18 +1,7 @@
 import { JSX } from 'react';
-/**
- * Props for the EditingScripts component.
- */
-export type EditingScriptsProps = {
-    /**
-     * Sitecore Edge Platform URL.
-     */
-    sitecoreEdgeUrl?: string;
-};
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
  * Renders script required for the Design Library (when RenderingType is `component`).
- * @param {EditingScriptsProps} props - The props for the EditingScripts component.
- * @param {string} props.sitecoreEdgeUrl - Sitecore Edge Platform URL.
  * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
  */
-export declare const EditingScripts: (props: EditingScriptsProps) => JSX.Element;
+export declare const EditingScripts: () => JSX.Element;

package/types/components/ErrorBoundary.d.ts

@@ -12,6 +12,7 @@ export type ErrorBoundaryProps = {
     errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
     rendering?: ComponentRendering;
     componentLoadingMessage?: string;
+    disableSuspense?: boolean;
 };
 declare const _default: (props: import("@sitecore-content-sdk/core/utils").EnhancedOmit<ErrorBoundaryProps, keyof import("../enhancers/withSitecore").WithSitecoreProps>) => React.JSX.Element;
 export default _default;

package/types/components/PlaceholderCommon.d.ts

@@ -65,6 +65,11 @@ export interface PlaceholderProps {
      * The message that gets displayed while component is loading
      */
     componentLoadingMessage?: string;
+    /**
+     * If true, disables Suspense in ErrorBoundary for the placeholder.
+     * @default false
+     */
+    disableSuspense?: boolean;
 }
 export declare class PlaceholderCommon<T extends PlaceholderProps> extends React.Component<T> {
     state: Readonly<{