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

package/dist/cjs/components/Placeholder/AppPlaceholder.js

@@ -1,76 +1,79 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppPlaceholder = void 0;
-const placeholder_utils_1 = require("./placeholder-utils");
-const react_1 = __importDefault(require("react"));
-const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
-const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
-const ClientComponentWrapper_1 = require("./ClientComponentWrapper");
-const _rsc_env_1 = require("#rsc-env");
-/**
- * The implemention of placeholder compatible with React Server Components.
- * Renders components from the layout data for the given placeholder name, with consideration for page edit mode.
- * Pulls components from the provided component map.
- * @param {AppPlaceholderProps} props Placeholder props
- * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
- */
-const AppPlaceholder = (props) => {
-    const { rendering: parentRendering, componentMap, page } = props;
-    const placeholderRenderings = (0, placeholder_utils_1.getPlaceholderRenderings)(parentRendering, props.name, page.mode.isEditing);
-    const components = placeholderRenderings
-        .map((rendering, index) => {
-        const { component: Component, isEmpty, componentType, dynamic, } = (0, placeholder_utils_1.getComponentForRendering)(rendering, props.name, componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
-        const isClient = componentType === 'client';
-        const key = rendering.uid || `component-${index}`;
-        const renderedProps = (0, placeholder_utils_1.getAppComponentProps)(props, rendering);
-        const finalRenderedProps = props.modifyComponentProps
-            ? props.modifyComponentProps(renderedProps)
-            : renderedProps;
-        // Client wrapper is required only when component crosses boundary from server to client.
-        // It happens when component is marker as client and rendered in RSC context.
-        // Also, it is not required when component is hidden or empty, as it will be rendered whthout boundary crossing.
-        const useClientWrapper = isClient && _rsc_env_1.rsc && !isEmpty;
-        let rendered = useClientWrapper ? (react_1.default.createElement(ClientComponentWrapper_1.ClientComponentWrapper, { rendering: rendering, componentProps: finalRenderedProps, placeholderName: props.name, key: key })) : (react_1.default.createElement(Component, Object.assign({ key: key }, finalRenderedProps, { rendering: rendering, page: page, componentMap: componentMap })));
-        if (!isEmpty) {
-            const errorBoundaryKey = rendered.type + '-' + index;
-            const disableSuspense = props.disableSuspense || false;
-            rendered = (react_1.default.createElement(ErrorBoundary_1.default, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
-        }
-        // if in edit mode then emit shallow chromes for hydration in Pages
-        if (page.mode.isEditing) {
-            const key = rendering.uid || `component-${index}`;
-            return (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
-        }
-        return rendered;
-    })
-        .filter((element) => element);
-    const finalRendering = page.mode.isEditing
-        ? [
-            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: parentRendering.uid, placeholderName: props.name, rendering: parentRendering }, components),
-        ]
-        : components;
-    const placeholderEmpty = !placeholderRenderings.length;
-    if (placeholderEmpty) {
-        const rendered = props.renderEmpty ? props.renderEmpty(finalRendering) : finalRendering;
-        return page.mode.isEditing ? (0, placeholder_utils_1.renderEmptyPlaceholder)(rendered) : rendered;
-    }
-    if (props.render) {
-        return props.render(components, placeholderRenderings, props);
-    }
-    else if (props.renderEach) {
-        const renderEach = props.renderEach;
-        return finalRendering.map((component, index) => {
-            if (component && component.props && component.props.type === 'text/sitecore') {
-                return component;
-            }
-            return renderEach(component, index);
-        });
-    }
-    else {
-        return finalRendering;
-    }
-};
-exports.AppPlaceholder = AppPlaceholder;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppPlaceholder = void 0;
+const placeholder_utils_1 = require("./placeholder-utils");
+const react_1 = __importDefault(require("react"));
+const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
+const ClientComponentWrapper_1 = require("./ClientComponentWrapper");
+const _rsc_env_1 = require("#rsc-env");
+/**
+ * The implemention of placeholder compatible with React Server Components.
+ * Renders components from the layout data for the given placeholder name, with consideration for page edit mode.
+ * Pulls components from the provided component map.
+ * @param {AppPlaceholderProps} props Placeholder props
+ * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
+ * @public
+ */
+const AppPlaceholder = (props) => {
+    const { rendering: parentRendering, componentMap, page } = props;
+    const placeholderRenderings = (0, placeholder_utils_1.getPlaceholderRenderings)(parentRendering, props.name, page.mode.isEditing);
+    const components = placeholderRenderings
+        .map((rendering, index) => {
+        const { component: Component, isEmpty, componentType, dynamic, } = (0, placeholder_utils_1.getComponentForRendering)(rendering, props.name, componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
+        const isClient = componentType === 'client';
+        const key = rendering.uid || `component-${index}`;
+        // Use rsc context to determine the current runtime
+        const componentRuntime = _rsc_env_1.rsc ? 'server' : 'client';
+        const renderedProps = (0, placeholder_utils_1.getAppComponentProps)(props, rendering);
+        const finalRenderedProps = props.modifyComponentProps
+            ? props.modifyComponentProps(renderedProps)
+            : renderedProps;
+        // Client wrapper is required only when component crosses boundary from server to client.
+        // It happens when component is marker as client and rendered in RSC context.
+        // Also, it is not required when component is hidden or empty, as it will be rendered whthout boundary crossing.
+        const useClientWrapper = isClient && _rsc_env_1.rsc && !isEmpty;
+        let rendered = useClientWrapper ? (react_1.default.createElement(ClientComponentWrapper_1.ClientComponentWrapper, { rendering: rendering, componentProps: finalRenderedProps, placeholderName: props.name, key: key })) : (react_1.default.createElement(Component, Object.assign({ key: key }, finalRenderedProps, { rendering: rendering, page: page, componentMap: componentMap })));
+        if (!isEmpty) {
+            const errorBoundaryKey = rendered.type + '-' + index;
+            const disableSuspense = props.disableSuspense || false;
+            rendered = (react_1.default.createElement(ErrorBoundary_1.default, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
+        }
+        // if in edit mode then emit shallow chromes for hydration in Pages
+        if (page.mode.isEditing) {
+            const key = rendering.uid || `component-${index}`;
+            return (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: rendering, componentRuntime: componentRuntime }, rendered));
+        }
+        return rendered;
+    })
+        .filter((element) => element);
+    const finalRendering = page.mode.isEditing
+        ? [
+            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: parentRendering.uid, placeholderName: props.name, rendering: parentRendering }, components),
+        ]
+        : components;
+    const placeholderEmpty = !placeholderRenderings.length;
+    if (placeholderEmpty) {
+        const rendered = props.renderEmpty ? props.renderEmpty(finalRendering) : finalRendering;
+        return page.mode.isEditing ? (0, placeholder_utils_1.renderEmptyPlaceholder)(rendered) : rendered;
+    }
+    if (props.render) {
+        return props.render(components, placeholderRenderings, props);
+    }
+    else if (props.renderEach) {
+        const renderEach = props.renderEach;
+        return finalRendering.map((component, index) => {
+            if (component && component.props && component.props.type === 'text/sitecore') {
+                return component;
+            }
+            return renderEach(component, index);
+        });
+    }
+    else {
+        return finalRendering;
+    }
+};
+exports.AppPlaceholder = AppPlaceholder;

package/dist/cjs/components/Placeholder/ClientComponentWrapper.js

@@ -1,21 +1,21 @@
-"use strict";
-'use client';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientComponentWrapper = void 0;
-const SitecoreProvider_1 = require("../SitecoreProvider");
-const react_1 = require("react");
-const react_2 = __importDefault(require("react"));
-const withSitecore_1 = require("../../enhancers/withSitecore");
-const placeholder_utils_1 = require("./placeholder-utils");
-const ClientComponentWrapper = (props) => {
-    const { page } = (0, withSitecore_1.useSitecore)();
-    const componentMap = (0, react_1.useContext)(SitecoreProvider_1.ComponentMapReactContext);
-    const componentPropsWithContext = Object.assign(Object.assign({}, props.componentProps), { rendering: props.rendering, componentMap,
-        page });
-    const { component: Component } = (0, placeholder_utils_1.getComponentForRendering)(props.rendering, props.placeholderName, componentMap);
-    return react_2.default.createElement(Component, Object.assign({}, componentPropsWithContext));
-};
-exports.ClientComponentWrapper = ClientComponentWrapper;
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientComponentWrapper = void 0;
+const SitecoreProvider_1 = require("../SitecoreProvider");
+const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
+const withSitecore_1 = require("../../enhancers/withSitecore");
+const placeholder_utils_1 = require("./placeholder-utils");
+const ClientComponentWrapper = (props) => {
+    const { page } = (0, withSitecore_1.useSitecore)();
+    const componentMap = (0, react_1.useContext)(SitecoreProvider_1.ComponentMapReactContext);
+    const componentPropsWithContext = Object.assign(Object.assign({}, props.componentProps), { rendering: props.rendering, componentMap,
+        page });
+    const { component: Component } = (0, placeholder_utils_1.getComponentForRendering)(props.rendering, props.placeholderName, componentMap);
+    return react_2.default.createElement(Component, Object.assign({}, componentPropsWithContext));
+};
+exports.ClientComponentWrapper = ClientComponentWrapper;

package/dist/cjs/components/Placeholder/Placeholder.js

@@ -1,110 +1,144 @@
-"use strict";
-'use client';
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Placeholder = exports.PlaceholderComponent = void 0;
-const react_1 = __importDefault(require("react"));
-const withComponentMap_1 = require("../../enhancers/withComponentMap");
-const editing_1 = require("@sitecore-content-sdk/core/editing");
-const withSitecore_1 = require("../../enhancers/withSitecore");
-const placeholder_utils_1 = require("./placeholder-utils");
-const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
-const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
-class PlaceholderComponent extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.isEmpty = false;
-        this.state = {};
-    }
-    componentDidMount() {
-        if (this.isEmpty && editing_1.PagesEditor.isActive()) {
-            editing_1.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 (0, placeholder_utils_1.renderEmptyPlaceholder)(node);
-    }
-    render() {
-        const childProps = Object.assign({}, this.props);
-        delete childProps.componentMap;
-        if (this.state.error) {
-            if (childProps.errorComponent) {
-                return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
-            }
-            return (react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" },
-                "A rendering error occurred: ",
-                this.state.error.message,
-                "."));
-        }
-        const renderingData = childProps.rendering;
-        const placeholderRenderings = (0, placeholder_utils_1.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 ? (0, placeholder_utils_1.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;
-        }
-    }
-}
-exports.PlaceholderComponent = PlaceholderComponent;
-/**
- * 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 = (0, placeholder_utils_1.getRenderedComponentProps)(props, componentRendering, key);
-        const component = (0, placeholder_utils_1.getComponentForRendering)(componentRendering, name, props.componentMap, hiddenRenderingComponent, missingComponentComponent);
-        let rendered = react_1.default.createElement(component.component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
-        if (!component.isEmpty) {
-            const errorBoundaryKey = rendered.type + '-' + index;
-            const disableSuspense = props.disableSuspense || false;
-            rendered = (react_1.default.createElement(ErrorBoundary_1.default, { "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_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: componentRendering }, rendered));
-        }
-        return rendered;
-    })
-        .filter((element) => element); // remove nulls
-    if (props.page.mode.isEditing) {
-        return [
-            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: props.rendering.uid, placeholderName: name, rendering: props.rendering }, transformedComponents),
-        ];
-    }
-    return transformedComponents;
-};
-const PlaceholderWithComponentMap = (0, withComponentMap_1.withComponentMap)(PlaceholderComponent);
-exports.Placeholder = (0, withSitecore_1.withSitecore)()(PlaceholderWithComponentMap);
+"use strict";
+'use client';
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = exports.PlaceholderComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const withComponentMap_1 = require("../../enhancers/withComponentMap");
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+const withSitecore_1 = require("../../enhancers/withSitecore");
+const placeholder_utils_1 = require("./placeholder-utils");
+const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+const ErrorBoundary_1 = __importStar(require("../ErrorBoundary"));
+class PlaceholderComponent extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.isEmpty = false;
+        this.state = {};
+    }
+    componentDidMount() {
+        if (this.isEmpty && editing_1.PagesEditor.isActive()) {
+            editing_1.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 (0, placeholder_utils_1.renderEmptyPlaceholder)(node);
+    }
+    render() {
+        const childProps = Object.assign({}, this.props);
+        delete childProps.componentMap;
+        if (this.state.error) {
+            if (childProps.errorComponent) {
+                return react_1.default.createElement(childProps.errorComponent, { error: this.state.error });
+            }
+            return (react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: `A rendering error occurred: ${this.state.error.message}.` }));
+        }
+        const renderingData = childProps.rendering;
+        const placeholderRenderings = (0, placeholder_utils_1.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 ? (0, placeholder_utils_1.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;
+        }
+    }
+}
+exports.PlaceholderComponent = PlaceholderComponent;
+/**
+ * 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 = (0, placeholder_utils_1.getRenderedComponentProps)(props, componentRendering, key);
+        const component = (0, placeholder_utils_1.getComponentForRendering)(componentRendering, name, props.componentMap, hiddenRenderingComponent, missingComponentComponent);
+        let rendered = react_1.default.createElement(component.component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
+        if (!component.isEmpty) {
+            const errorBoundaryKey = rendered.type + '-' + index;
+            const disableSuspense = props.disableSuspense || false;
+            rendered = (react_1.default.createElement(ErrorBoundary_1.default, { "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_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: componentRendering }, rendered));
+        }
+        return rendered;
+    })
+        .filter((element) => element); // remove nulls
+    if (props.page.mode.isEditing) {
+        return [
+            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: props.rendering.uid, placeholderName: name, rendering: props.rendering }, transformedComponents),
+        ];
+    }
+    return transformedComponents;
+};
+const PlaceholderWithComponentMap = (0, withComponentMap_1.withComponentMap)(PlaceholderComponent);
+/**
+ * The Placeholder component.
+ * @public
+ */
+exports.Placeholder = (0, withSitecore_1.withSitecore)()(PlaceholderWithComponentMap);

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

@@ -1,63 +1,68 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaceholderMetadata = void 0;
-const react_1 = __importDefault(require("react"));
-const layout_1 = require("@sitecore-content-sdk/core/layout");
-const editing_1 = require("@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.
- */
-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 === editing_1.MetadataKind.Open) {
-            if (chrometype === 'placeholder' && placeholderName) {
-                let phId = '';
-                for (const placeholder of Object.keys(rendering.placeholders)) {
-                    if (placeholderName === placeholder) {
-                        phId = id
-                            ? `${placeholderName}_${id}`
-                            : `${placeholderName}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
-                        break;
-                    }
-                    // Check if the placeholder is a dynamic placeholder
-                    if ((0, layout_1.isDynamicPlaceholder)(placeholder)) {
-                        const pattern = (0, layout_1.getDynamicPlaceholderPattern)(placeholder);
-                        // Check if the placeholder matches the dynamic placeholder pattern
-                        if (pattern.test(placeholderName)) {
-                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
-                            break;
-                        }
-                    }
-                }
-                attributes.id = phId;
-            }
-            else {
-                attributes.id = id;
-            }
-        }
-        return attributes;
-    };
-    const renderComponent = (uid, placeholderName) => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Open, uid, placeholderName))),
-        children,
-        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Close, uid, placeholderName)))));
-    return react_1.default.createElement(react_1.default.Fragment, null, renderComponent(rendering.uid, placeholderName));
-};
-exports.PlaceholderMetadata = PlaceholderMetadata;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceholderMetadata = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const editing_1 = require("@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.
+ */
+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 === editing_1.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}_${editing_1.DEFAULT_PLACEHOLDER_UID}`;
+                        break;
+                    }
+                    // Check if the placeholder is a dynamic placeholder
+                    if ((0, layout_1.isDynamicPlaceholder)(placeholder)) {
+                        const pattern = (0, layout_1.getDynamicPlaceholderPattern)(placeholder);
+                        // Check if the placeholder matches the dynamic placeholder pattern
+                        if (pattern.test(placeholderName)) {
+                            phId = id ? `${placeholder}_${id}` : `${placeholder}_${editing_1.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_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes({ kind: editing_1.MetadataKind.Open, id: rendering.uid, placeholderName }))),
+        children,
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes({ kind: editing_1.MetadataKind.Close, placeholderName })))));
+};
+exports.PlaceholderMetadata = PlaceholderMetadata;