@sitecore-content-sdk/react 1.3.0-canary.9 → 1.4.0-canary.2

package/dist/esm/components/Placeholder/Placeholder.js

@@ -1,103 +1,104 @@
-'use client';
-import React from 'react';
-import { withComponentMap } from '../../enhancers/withComponentMap';
-import { PagesEditor } from '@sitecore-content-sdk/core/editing';
-import { withSitecore } from '../../enhancers/withSitecore';
-import { getComponentForRendering, getPlaceholderRenderings, getRenderedComponentProps, renderEmptyPlaceholder, } from './placeholder-utils';
-import { PlaceholderMetadata } from './PlaceholderMetadata';
-import ErrorBoundary from '../ErrorBoundary';
-export class PlaceholderComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.isEmpty = false;
-        this.state = {};
-    }
-    componentDidMount() {
-        if (this.isEmpty && PagesEditor.isActive()) {
-            PagesEditor.resetChromes();
-        }
-    }
-    componentDidCatch(error) {
-        this.setState({ error });
-    }
-    /**
-     * Renders the placeholder when it is empty. The required CSS styles are applied to the placeholder in edit mode.
-     * @param {React.ReactNode | React.ReactElement[]} node react node
-     * @returns react node
-     * @deprecated use renderEmptyPlaceholder from react/nextjs import instead
-     */
-    renderEmptyPlaceholder(node) {
-        return renderEmptyPlaceholder(node);
-    }
-    render() {
-        const childProps = Object.assign({}, this.props);
-        delete childProps.componentMap;
-        if (this.state.error) {
-            if (childProps.errorComponent) {
-                return React.createElement(childProps.errorComponent, { error: this.state.error });
-            }
-            return (React.createElement("div", { className: "sc-content-sdk-placeholder-error" },
-                "A rendering error occurred: ",
-                this.state.error.message,
-                "."));
-        }
-        const renderingData = childProps.rendering;
-        const placeholderRenderings = getPlaceholderRenderings(renderingData, this.props.name, this.props.page.mode.isEditing);
-        this.isEmpty = !placeholderRenderings.length;
-        const components = PlaceholderComponent.getRenderedComponents(this.props, placeholderRenderings);
-        if (this.isEmpty) {
-            const rendered = this.props.renderEmpty ? this.props.renderEmpty(components) : components;
-            return this.props.page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
-        }
-        else if (this.props.render) {
-            return this.props.render(components, placeholderRenderings, childProps);
-        }
-        else if (this.props.renderEach) {
-            const renderEach = this.props.renderEach;
-            return components.map((component, index) => {
-                if (component && component.props && component.props.type === 'text/sitecore') {
-                    return component;
-                }
-                return renderEach(component, index);
-            });
-        }
-        else {
-            return components;
-        }
-    }
-}
-/**
- * Renders the components for the placeholder based on the provided rendering data.
- * @param {PlaceholderProps} props placeholder component props
- * @param {ComponentRendering[]} placeholderRenderings renderings within placeholder
- * @returns {React.ReactNode | React.ReactElement[]} rendered components
- */
-PlaceholderComponent.getRenderedComponents = (props, placeholderRenderings) => {
-    const { name, missingComponentComponent, hiddenRenderingComponent } = props;
-    const transformedComponents = placeholderRenderings
-        .map((componentRendering, index) => {
-        const key = componentRendering.uid || `component-${index}`;
-        const renderedProps = getRenderedComponentProps(props, componentRendering, key);
-        const component = getComponentForRendering(componentRendering, name, props.componentMap, hiddenRenderingComponent, missingComponentComponent);
-        let rendered = React.createElement(component.component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
-        if (!component.isEmpty) {
-            const errorBoundaryKey = rendered.type + '-' + index;
-            const disableSuspense = props.disableSuspense || false;
-            rendered = (React.createElement(ErrorBoundary, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: component.dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
-        }
-        // if in edit mode then emit shallow chromes for hydration in Pages
-        if (props.page.mode.isEditing) {
-            return (React.createElement(PlaceholderMetadata, { key: key, rendering: componentRendering }, rendered));
-        }
-        return rendered;
-    })
-        .filter((element) => element); // remove nulls
-    if (props.page.mode.isEditing) {
-        return [
-            React.createElement(PlaceholderMetadata, { key: props.rendering.uid, placeholderName: name, rendering: props.rendering }, transformedComponents),
-        ];
-    }
-    return transformedComponents;
-};
-const PlaceholderWithComponentMap = withComponentMap(PlaceholderComponent);
-export const Placeholder = withSitecore()(PlaceholderWithComponentMap);
+'use client';
+import React from 'react';
+import { withComponentMap } from '../../enhancers/withComponentMap';
+import { PagesEditor } from '@sitecore-content-sdk/core/editing';
+import { withSitecore } from '../../enhancers/withSitecore';
+import { getComponentForRendering, getPlaceholderRenderings, getRenderedComponentProps, renderEmptyPlaceholder, } from './placeholder-utils';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
+import ErrorBoundary, { ErrorComponent } from '../ErrorBoundary';
+export class PlaceholderComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.isEmpty = false;
+        this.state = {};
+    }
+    componentDidMount() {
+        if (this.isEmpty && PagesEditor.isActive()) {
+            PagesEditor.resetChromes();
+        }
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+    }
+    /**
+     * Renders the placeholder when it is empty. The required CSS styles are applied to the placeholder in edit mode.
+     * @param {React.ReactNode | React.ReactElement[]} node react node
+     * @returns react node
+     * @deprecated use renderEmptyPlaceholder from react/nextjs import instead
+     */
+    renderEmptyPlaceholder(node) {
+        return renderEmptyPlaceholder(node);
+    }
+    render() {
+        const childProps = Object.assign({}, this.props);
+        delete childProps.componentMap;
+        if (this.state.error) {
+            if (childProps.errorComponent) {
+                return React.createElement(childProps.errorComponent, { error: this.state.error });
+            }
+            return (React.createElement(ErrorComponent, { message: `A rendering error occurred: ${this.state.error.message}.` }));
+        }
+        const renderingData = childProps.rendering;
+        const placeholderRenderings = getPlaceholderRenderings(renderingData, this.props.name, this.props.page.mode.isEditing);
+        this.isEmpty = !placeholderRenderings.length;
+        const components = PlaceholderComponent.getRenderedComponents(this.props, placeholderRenderings);
+        if (this.isEmpty) {
+            const rendered = this.props.renderEmpty ? this.props.renderEmpty(components) : components;
+            return this.props.page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
+        }
+        else if (this.props.render) {
+            return this.props.render(components, placeholderRenderings, childProps);
+        }
+        else if (this.props.renderEach) {
+            const renderEach = this.props.renderEach;
+            return components.map((component, index) => {
+                if (component && component.props && component.props.type === 'text/sitecore') {
+                    return component;
+                }
+                return renderEach(component, index);
+            });
+        }
+        else {
+            return components;
+        }
+    }
+}
+/**
+ * Renders the components for the placeholder based on the provided rendering data.
+ * @param {PlaceholderProps} props placeholder component props
+ * @param {ComponentRendering[]} placeholderRenderings renderings within placeholder
+ * @returns {React.ReactNode | React.ReactElement[]} rendered components
+ */
+PlaceholderComponent.getRenderedComponents = (props, placeholderRenderings) => {
+    const { name, missingComponentComponent, hiddenRenderingComponent } = props;
+    const transformedComponents = placeholderRenderings
+        .map((componentRendering, index) => {
+        const key = componentRendering.uid || `component-${index}`;
+        const renderedProps = getRenderedComponentProps(props, componentRendering, key);
+        const component = getComponentForRendering(componentRendering, name, props.componentMap, hiddenRenderingComponent, missingComponentComponent);
+        let rendered = React.createElement(component.component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
+        if (!component.isEmpty) {
+            const errorBoundaryKey = rendered.type + '-' + index;
+            const disableSuspense = props.disableSuspense || false;
+            rendered = (React.createElement(ErrorBoundary, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: component.dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
+        }
+        // if in edit mode then emit shallow chromes for hydration in Pages
+        if (props.page.mode.isEditing) {
+            return (React.createElement(PlaceholderMetadata, { key: key, rendering: componentRendering }, rendered));
+        }
+        return rendered;
+    })
+        .filter((element) => element); // remove nulls
+    if (props.page.mode.isEditing) {
+        return [
+            React.createElement(PlaceholderMetadata, { key: props.rendering.uid, placeholderName: name, rendering: props.rendering }, transformedComponents),
+        ];
+    }
+    return transformedComponents;
+};
+const PlaceholderWithComponentMap = withComponentMap(PlaceholderComponent);
+/**
+ * The Placeholder component.
+ * @public
+ */
+export const Placeholder = withSitecore()(PlaceholderWithComponentMap);

package/dist/esm/components/Placeholder/PlaceholderMetadata.js

@@ -1,56 +1,61 @@
-import React from 'react';
-import { getDynamicPlaceholderPattern, isDynamicPlaceholder, } from '@sitecore-content-sdk/core/layout';
-import { MetadataKind, DEFAULT_PLACEHOLDER_UID } from '@sitecore-content-sdk/core/editing';
-/**
- * A React component to generate metadata blocks for a placeholder or rendering.
- * It utilizes dynamic attributes based on whether the component acts as a placeholder
- * or as a rendering to properly render the surrounding code blocks.
- * @param {object} props The properties passed to the component.
- * @param {ComponentRendering} props.rendering The rendering data.
- * @param {string} [props.placeholderName] The name of the placeholder.
- * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
- * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
- */
-export const PlaceholderMetadata = ({ rendering, placeholderName, children, }) => {
-    const getCodeBlockAttributes = (kind, id, placeholderName) => {
-        const chrometype = placeholderName ? 'placeholder' : 'rendering';
-        const attributes = {
-            type: 'text/sitecore',
-            chrometype: chrometype,
-            className: 'scpm',
-            kind: kind,
-        };
-        if (kind === MetadataKind.Open) {
-            if (chrometype === 'placeholder' && placeholderName) {
-                let phId = '';
-                for (const placeholder of Object.keys(rendering.placeholders)) {
-                    if (placeholderName === placeholder) {
-                        phId = id
-                            ? `${placeholderName}_${id}`
-                            : `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
-                        break;
-                    }
-                    // Check if the placeholder is a dynamic placeholder
-                    if (isDynamicPlaceholder(placeholder)) {
-                        const pattern = getDynamicPlaceholderPattern(placeholder);
-                        // Check if the placeholder matches the dynamic placeholder pattern
-                        if (pattern.test(placeholderName)) {
-                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
-                            break;
-                        }
-                    }
-                }
-                attributes.id = phId;
-            }
-            else {
-                attributes.id = id;
-            }
-        }
-        return attributes;
-    };
-    const renderComponent = (uid, placeholderName) => (React.createElement(React.Fragment, null,
-        React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Open, uid, placeholderName))),
-        children,
-        React.createElement("code", Object.assign({}, getCodeBlockAttributes(MetadataKind.Close, uid, placeholderName)))));
-    return React.createElement(React.Fragment, null, renderComponent(rendering.uid, placeholderName));
-};
+import React from 'react';
+import { getDynamicPlaceholderPattern, isDynamicPlaceholder, } from '@sitecore-content-sdk/core/layout';
+import { MetadataKind, DEFAULT_PLACEHOLDER_UID } from '@sitecore-content-sdk/core/editing';
+/**
+ * A React component to generate metadata blocks for a placeholder or rendering.
+ * It utilizes dynamic attributes based on whether the component acts as a placeholder
+ * or as a rendering to properly render the surrounding code blocks.
+ * @param {object} props The properties passed to the component.
+ * @param {ComponentRendering} props.rendering The rendering data.
+ * @param {string} [props.placeholderName] The name of the placeholder.
+ * @param {'server' | 'client'} [props.componentRuntime] Component runtime type. Used to add data-csdk-component-runtime attribute to rendering chromes.
+ * @param {JSX.Element} props.children The child components or elements to be wrapped by the metadata code blocks.
+ * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
+ */
+export const PlaceholderMetadata = ({ rendering, placeholderName, children, componentRuntime, }) => {
+    const getCodeBlockAttributes = ({ kind, id, placeholderName, }) => {
+        var _a;
+        const chrometype = placeholderName ? 'placeholder' : 'rendering';
+        const attributes = {
+            type: 'text/sitecore',
+            chrometype: chrometype,
+            className: 'scpm',
+            kind: kind,
+        };
+        if (kind === MetadataKind.Open) {
+            if (chrometype === 'placeholder' && placeholderName) {
+                let phId = '';
+                for (const placeholder of Object.keys((_a = rendering.placeholders) !== null && _a !== void 0 ? _a : {})) {
+                    if (placeholderName === placeholder) {
+                        phId = id
+                            ? `${placeholderName}_${id}`
+                            : `${placeholderName}_${DEFAULT_PLACEHOLDER_UID}`;
+                        break;
+                    }
+                    // Check if the placeholder is a dynamic placeholder
+                    if (isDynamicPlaceholder(placeholder)) {
+                        const pattern = getDynamicPlaceholderPattern(placeholder);
+                        // Check if the placeholder matches the dynamic placeholder pattern
+                        if (pattern.test(placeholderName)) {
+                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${DEFAULT_PLACEHOLDER_UID}`;
+                            break;
+                        }
+                    }
+                }
+                attributes.id = phId;
+            }
+            else {
+                attributes.id = id;
+            }
+            // Add component runtime attribute for rendering chromes
+            if (chrometype === 'rendering' && componentRuntime) {
+                attributes['data-csdk-component-runtime'] = componentRuntime;
+            }
+        }
+        return attributes;
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("code", Object.assign({}, getCodeBlockAttributes({ kind: MetadataKind.Open, id: rendering.uid, placeholderName }))),
+        children,
+        React.createElement("code", Object.assign({}, getCodeBlockAttributes({ kind: MetadataKind.Close, placeholderName })))));
+};

package/dist/esm/components/Placeholder/index.js

@@ -1,4 +1,4 @@
-export { Placeholder, PlaceholderComponent } from './Placeholder';
-export { PlaceholderMetadata } from './PlaceholderMetadata';
-export { AppPlaceholder } from './AppPlaceholder';
-export * from './placeholder-utils';
+export { Placeholder, PlaceholderComponent } from './Placeholder';
+export { PlaceholderMetadata } from './PlaceholderMetadata';
+export { AppPlaceholder } from './AppPlaceholder';
+export * from './placeholder-utils';

package/dist/esm/components/Placeholder/models.js

@@ -1,15 +1,15 @@
-/**
- * Prop names from placeholder that cannot be serialized and passed from server to client side components
- */
-export const nonSerializedPlaceholderProps = [
-    'renderEmpty',
-    'render',
-    'renderEach',
-    'errorComponent',
-    'componentLoadingMessage',
-    'modifyComponentProps',
-    'componentMap',
-    'page',
-    'missingComponentComponent',
-    'hiddenRenderingComponent',
-];
+/**
+ * Prop names from placeholder that cannot be serialized and passed from server to client side components
+ */
+export const nonSerializedPlaceholderProps = [
+    'renderEmpty',
+    'render',
+    'renderEach',
+    'errorComponent',
+    'componentLoadingMessage',
+    'modifyComponentProps',
+    'componentMap',
+    'page',
+    'missingComponentComponent',
+    'hiddenRenderingComponent',
+];