@sitecore-content-sdk/react 1.2.0-canary.3 → 1.2.0-canary.30

package/dist/cjs/components/ClientEditingChromesUpdate.js

@@ -0,0 +1,52 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientEditingChromesUpdate = void 0;
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+const react_1 = __importStar(require("react"));
+/**
+ * Updates editing chromes in app router / RSC context.
+ * This ensures all the relevant Pages editing markup is applied once all client components are loaded.
+ */
+const ClientEditingChromesUpdate = () => {
+    (0, react_1.useEffect)(() => {
+        if ((0, editing_1.isEditorActive)()) {
+            (0, editing_1.resetEditorChromes)();
+        }
+    }, []);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.ClientEditingChromesUpdate = ClientEditingChromesUpdate;

package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = void 0;
 const react_1 = __importDefault(require("react"));
-const DefaultEmptyFieldEditingComponentText = () => {
-    return react_1.default.createElement("span", null, "[No text in field]");
+const DefaultEmptyFieldEditingComponentText = (props) => {
+    return react_1.default.createElement(props.tag || 'span', props, '[No text in field]');
 };
 exports.DefaultEmptyFieldEditingComponentText = DefaultEmptyFieldEditingComponentText;
-const DefaultEmptyFieldEditingComponentImage = () => {
+const DefaultEmptyFieldEditingComponentImage = (props) => {
     const inlineStyles = {
         minWidth: '48px',
         minHeight: '48px',
@@ -17,6 +17,6 @@ const DefaultEmptyFieldEditingComponentImage = () => {
         maxHeight: '400px',
         cursor: 'pointer',
     };
-    return (react_1.default.createElement("img", { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: "scEmptyImage", style: inlineStyles }));
+    return (react_1.default.createElement("img", Object.assign({}, props, { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: `scEmptyImage ${props.className || ''}`, style: inlineStyles })));
 };
 exports.DefaultEmptyFieldEditingComponentImage = DefaultEmptyFieldEditingComponentImage;

package/dist/cjs/components/DesignLibrary.js

@@ -43,7 +43,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesignLibrary = exports.VariantGeneration = exports.__mockDependencies = void 0;
+exports.DesignLibrary = exports.__mockDependencies = void 0;
 /* eslint-disable jsdoc/require-param */
 /* eslint-disable prefer-const */
 const react_1 = __importStar(require("react"));
@@ -52,55 +52,31 @@ const layout_1 = require("@sitecore-content-sdk/core/layout");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
 const codegen = __importStar(require("@sitecore-content-sdk/core/codegen"));
 const withSitecore_1 = require("../enhancers/withSitecore");
+const Placeholder_2 = require("./Placeholder");
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
 const __mockDependencies = (mocks) => {
     addComponentPreviewHandler = mocks.addComponentPreviewHandler;
 };
 exports.__mockDependencies = __mockDependencies;
-/**
- * This component is used to render the component in preview mode.
- * It is used to send the rendered event to the parent window and render the component.
- * Reacts on the update event from the parent window and re-renders the component.
- */
-const Preview = () => {
-    const { page } = (0, withSitecore_1.useSitecore)();
-    const { layout: { sitecore: { route }, }, } = page;
-    const [renderKey, setRenderKey] = (0, react_1.useState)(0);
-    const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
-    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
-    // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
-    let componentReady = false;
-    // have an up-to-date layout state between re-renders (SSR re-render excluded)
-    const persistedRoot = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [rootComponent, rootUpdate]);
-    route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
-    (0, react_1.useEffect)(() => {
-        // useEffect will fire when components are ready - and we inform the whole wide world of it too
-        if (!componentReady) {
-            componentReady = true;
-            window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rootComponent.uid), '*');
-        }
-        const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
-            setRootUpdate(Object.assign({}, updatedRoot));
-            setRenderKey((key) => key + 1);
-        });
-        // useEffect will cleanup event handler on re-render
-        return unsubscribe;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0) {
-            return;
-        }
-        window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
-    }, [renderKey, rootComponent.uid]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("main", null,
-            react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
-};
 const sendErrorEvent = (uid, error, type) => {
     const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
     console.error('Component Library: sending error event', errorEvent);
-    window.top.postMessage(errorEvent, '*');
+    if (typeof window !== 'undefined') {
+        const target = window.parent && window.parent !== window ? window.parent : window;
+        target.postMessage(errorEvent, '*');
+    }
+};
+const postToDL = (evt) => {
+    if (typeof window === 'undefined')
+        return;
+    const target = window.parent && window.parent !== window ? window.parent : window;
+    try {
+        console.log('Component Library: sending event', evt === null || evt === void 0 ? void 0 : evt.name, evt);
+        target.postMessage(evt, '*');
+    }
+    catch (err) {
+        console.error('Component Library: postMessage failed', err, evt);
+    }
 };
 class ErrorBoundary extends react_1.default.Component {
     constructor() {
@@ -128,36 +104,74 @@ class ErrorBoundary extends react_1.default.Component {
     }
 }
 /**
- * This component is used to render the component in variant generation mode.
- * It is used to send the import-map and component-props events to the parent window and render the dynamic component.
+ * Design Library component.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * when generation is enabled (`page.mode.designLibrary.isVariantGeneration === true`),
+ * wires the **variant generation** handshake so the parent (DL Studio) can send
+ * generated code to preview and iterate on.
+ * @param {DesignLibraryProps} props
+ * @param {() => Promise<{ default: import('../codegen').ImportEntry[] }>} [props.loadImportMap] Optional async loader that resolves to the import-map used to resolve the generated component’s imports. Required when `isVariantGeneration` is true.
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
  */
-const VariantGeneration = (props) => {
+const DesignLibrary = ({ loadImportMap }) => {
+    var _a, _b;
     const { page } = (0, withSitecore_1.useSitecore)();
-    const { layout: { sitecore: { route }, }, } = page;
-    const rendering = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
+    const route = page.layout.sitecore.route;
+    const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
+    const { isDesignLibrary } = page.mode;
+    const isVariantGeneration = (_b = page.mode.designLibrary) === null || _b === void 0 ? void 0 : _b.isVariantGeneration;
+    const [propsState, setPropsState] = (0, react_1.useState)({
+        fields: rendering === null || rendering === void 0 ? void 0 : rendering.fields,
+        params: rendering === null || rendering === void 0 ? void 0 : rendering.params,
+    });
     const [renderKey, setRenderKey] = (0, react_1.useState)(0);
     const [Component, setComponent] = (0, react_1.useState)(null);
+    const isGeneratedComponentActive = !!Component;
+    if (!isDesignLibrary)
+        return null;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, react_1.useEffect)(() => {
+        postToDL((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid));
+        if (!isVariantGeneration) {
+            requestAnimationFrame(() => {
+                setRenderKey((k) => (k === 0 ? k + 1 : k));
+            });
+        }
+        const unsubUpdate = (0, editing_1.addComponentUpdateHandler)(rendering, (updated) => {
+            setPropsState({ fields: updated.fields, params: updated.params });
+            setRenderKey((k) => k + 1);
+        });
+        // useEffect will cleanup event handler on re-render
+        return () => unsubUpdate && unsubUpdate();
+    }, [isVariantGeneration, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, react_1.useEffect)(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0)
+            return;
+        postToDL((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid));
+    }, [renderKey, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, react_1.useEffect)(() => {
+        if (!isDesignLibrary || !isVariantGeneration)
+            return undefined;
         let cancelled = false;
         // since import map is loaded lazily, we only need to add preview event handler once the import map is loaded
         // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
-        let unsubscribe = undefined;
-        const init = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            let importMap = undefined;
-            if (!props.loadImportMap) {
-                const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
-                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+        let unsubscribe;
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            if (!loadImportMap) {
+                sendErrorEvent(rendering.uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
+            let importMap;
             try {
-                const importMapImport = yield props.loadImportMap();
-                importMap = importMapImport.default;
+                const mod = yield loadImportMap();
+                importMap = mod.default;
             }
-            catch (error) {
-                const errorMessage = `Error loading import map: ${error}`;
-                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+            catch (e) {
+                sendErrorEvent(rendering.uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             // account for component being unmounted while resolving async import map
@@ -165,56 +179,24 @@ const VariantGeneration = (props) => {
                 return;
             unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
                 // Error event is already sent in the addComponentPreviewHandler
-                if (error) {
+                if (error)
                     return;
-                }
-                setRenderKey((key) => key + 1);
                 setComponent(() => Component);
+                setRenderKey((k) => k + 1);
             });
             const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
-            console.debug('Component Library: sending event', importMapEvent);
-            window.parent.postMessage(importMapEvent, '*');
-            const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
-            console.debug('Component Library: sending event', componentPropsEvent);
-            window.top.postMessage(componentPropsEvent, '*');
-            const readyEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid);
-            console.debug('Component Library: sending event', readyEvent);
-            (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(readyEvent, '*');
-        });
-        init();
-        // return function that calls unsubsubribe - if the component was mounted correctly
+            postToDL(importMapEvent);
+            const propsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, propsState.fields, propsState.params);
+            postToDL(propsEvent);
+        }))();
+        // return function that calls unsubscribe - if the component was mounted correctly
         return () => {
             cancelled = true;
-            if (unsubscribe) {
-                unsubscribe();
-            }
+            unsubscribe && unsubscribe();
         };
-    }, []);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, react_1.useEffect)(() => {
-        var _a;
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0)
-            return undefined;
-        const renderedEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid);
-        console.debug('Component Library: sending event', renderedEvent);
-        (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(renderedEvent, '*');
-    }, [renderKey, rendering === null || rendering === void 0 ? void 0 : rendering.uid]);
-    return (react_1.default.createElement("main", null, Component ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
-        react_1.default.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (react_1.default.createElement("div", null, "Loading preview..."))));
-};
-exports.VariantGeneration = VariantGeneration;
-const DesignLibrary = ({ loadImportMap }) => {
-    var _a;
-    const { page } = (0, withSitecore_1.useSitecore)();
-    const { isDesignLibrary } = page.mode;
-    const isVariantGeneration = (_a = page.mode.designLibrary) === null || _a === void 0 ? void 0 : _a.isVariantGeneration;
-    if (!isDesignLibrary) {
-        return null;
-    }
-    if (isVariantGeneration) {
-        return react_1.default.createElement(exports.VariantGeneration, { loadImportMap: loadImportMap });
-    }
-    return react_1.default.createElement(Preview, null);
+    }, [isVariantGeneration, rendering]);
+    return (react_1.default.createElement("main", null, isGeneratedComponentActive ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
+        react_1.default.createElement(Placeholder_2.PlaceholderMetadata, { rendering: rendering },
+            react_1.default.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 };
 exports.DesignLibrary = DesignLibrary;

package/dist/cjs/components/EditingScripts.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/components/ErrorBoundary.js

@@ -1,4 +1,5 @@
 "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);

package/dist/cjs/components/Link.js

@@ -1,4 +1,5 @@
 "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);
@@ -45,7 +46,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
-/* eslint-disable no-unused-expressions, @typescript-eslint/no-unused-expressions */
 const react_1 = __importStar(require("react"));
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");

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

@@ -0,0 +1,110 @@
+"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);

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

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerPlaceholder = void 0;
+const models_1 = require("./models");
+const placeholder_utils_1 = require("./placeholder-utils");
+const react_1 = __importDefault(require("react"));
+const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
+/**
+ * React Server Component implementation for Placeholder.
+ * 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 {PlaceholderProps} props Placeholder props
+ * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
+ */
+const ServerPlaceholder = (props) => {
+    var _a;
+    if (!props.componentMap) {
+        throw new Error('Component map is required for ServerPlaceholder');
+    }
+    // get serializable props for client rendering
+    const serializableProps = models_1.nonSerializedPlaceholderProps.reduce((finalProps, prop) => {
+        delete finalProps[prop];
+        return finalProps;
+    }, Object.assign({}, props));
+    const placeholderRenderings = (0, placeholder_utils_1.getPlaceholderRenderings)(props.rendering, props.name, (_a = props.page) === null || _a === void 0 ? void 0 : _a.mode.isEditing);
+    const components = placeholderRenderings
+        .map((rendering, index) => {
+        const { component, isEmpty, componentType, dynamic } = (0, placeholder_utils_1.getComponentForRendering)(rendering, props.name, props.componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
+        const isClient = componentType === 'client';
+        const key = rendering.uid || `component-${index}`;
+        const finalPhProps = isClient ? serializableProps : props;
+        const renderedProps = (0, placeholder_utils_1.getRenderedComponentProps)(finalPhProps, rendering, key);
+        let rendered = react_1.default.createElement(component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
+        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 (props.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 = props.page.mode.isEditing
+        ? [
+            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: props.rendering.uid, placeholderName: props.name, rendering: props.rendering }, components),
+        ]
+        : components;
+    const placeholderEmpty = !placeholderRenderings.length;
+    if (placeholderEmpty) {
+        const rendered = props.renderEmpty ? props.renderEmpty(finalRendering) : finalRendering;
+        return props.page.mode.isEditing ? (0, placeholder_utils_1.renderEmptyPlaceholder)(rendered) : rendered;
+    }
+    if (props.render) {
+        return props.render(components, placeholderRenderings, serializableProps);
+    }
+    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.ServerPlaceholder = ServerPlaceholder;

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

@@ -0,0 +1,25 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlaceholderMetadata = exports.PlaceholderComponent = exports.Placeholder = exports.ServerPlaceholder = void 0;
+var ServerPlaceholder_1 = require("./ServerPlaceholder");
+Object.defineProperty(exports, "ServerPlaceholder", { enumerable: true, get: function () { return ServerPlaceholder_1.ServerPlaceholder; } });
+var Placeholder_1 = require("./Placeholder");
+Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
+Object.defineProperty(exports, "PlaceholderComponent", { enumerable: true, get: function () { return Placeholder_1.PlaceholderComponent; } });
+var PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+Object.defineProperty(exports, "PlaceholderMetadata", { enumerable: true, get: function () { return PlaceholderMetadata_1.PlaceholderMetadata; } });
+__exportStar(require("./placeholder-utils"), exports);

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nonSerializedPlaceholderProps = void 0;
+/**
+ * Prop names from placeholder that cannot be serialized and passed from server to client side components
+ */
+exports.nonSerializedPlaceholderProps = [
+    'renderEmpty',
+    'render',
+    'renderEach',
+    'errorComponent',
+    'componentLoadingMessage',
+    'modifyComponentProps',
+    'componentMap',
+    'page',
+    'missingComponentComponent',
+    'hiddenRenderingComponent',
+    'rendering',
+];