@sitecore-content-sdk/react 1.2.0-canary.50 → 1.2.0-canary.52

package/dist/cjs/components/Placeholder/{ServerPlaceholder.js → AppPlaceholder.js}

@@ -3,63 +3,61 @@ 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");
+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");
 /**
- * React Server Component implementation for Placeholder.
+ * 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 {PlaceholderProps} props Placeholder props
+ * @param {AppPlaceholderProps} 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 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, isEmpty, componentType, dynamic } = (0, placeholder_utils_1.getComponentForRendering)(rendering, props.name, props.componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
+        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 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);
+        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 && (0, placeholder_utils_1.getRSC)() && !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 (props.page.mode.isEditing) {
+        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 = props.page.mode.isEditing
+    const finalRendering = page.mode.isEditing
         ? [
-            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: props.rendering.uid, placeholderName: props.name, rendering: props.rendering }, components),
+            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 props.page.mode.isEditing ? (0, placeholder_utils_1.renderEmptyPlaceholder)(rendered) : rendered;
+        return page.mode.isEditing ? (0, placeholder_utils_1.renderEmptyPlaceholder)(rendered) : rendered;
     }
     if (props.render) {
-        return props.render(components, placeholderRenderings, serializableProps);
+        return props.render(components, placeholderRenderings, props);
     }
     else if (props.renderEach) {
         const renderEach = props.renderEach;
@@ -74,4 +72,4 @@ const ServerPlaceholder = (props) => {
         return finalRendering;
     }
 };
-exports.ServerPlaceholder = ServerPlaceholder;
+exports.AppPlaceholder = AppPlaceholder;

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

@@ -0,0 +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;

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

@@ -14,12 +14,12 @@ 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; } });
+exports.AppPlaceholder = exports.PlaceholderMetadata = exports.PlaceholderComponent = exports.Placeholder = void 0;
 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; } });
+var AppPlaceholder_1 = require("./AppPlaceholder");
+Object.defineProperty(exports, "AppPlaceholder", { enumerable: true, get: function () { return AppPlaceholder_1.AppPlaceholder; } });
 __exportStar(require("./placeholder-utils"), exports);

package/dist/cjs/components/Placeholder/placeholder-utils.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getComponentForRendering = exports.getRenderedComponentProps = exports.renderEmptyPlaceholder = exports.getSXAParams = exports.getPlaceholderRenderings = void 0;
+exports.getAppComponentProps = getAppComponentProps;
+exports.getRSC = getRSC;
 const react_1 = __importDefault(require("react"));
 const MissingComponent_1 = require("../MissingComponent");
 const sharedTypes_1 = require("../sharedTypes");
@@ -22,6 +24,7 @@ const layout_1 = require("@sitecore-content-sdk/core/layout");
 const core_1 = require("@sitecore-content-sdk/core");
 const HiddenRendering_1 = require("../HiddenRendering");
 const FEaaS_1 = require("../FEaaS");
+const rsc_env_1 = require("rsc-env");
 /**
  * Get the renderings for the specified placeholder from the rendering data.
  * @param {ComponentRendering | RouteData } rendering rendering data
@@ -97,15 +100,30 @@ exports.renderEmptyPlaceholder = renderEmptyPlaceholder;
  * @returns {RenderedProps} props to be passed to the rendered component
  */
 const getRenderedComponentProps = (placeholderProps, componentRendering, renderingKey) => {
-    const { fields: placeholderFields, params: placeholderParams } = placeholderProps, passThroughProps = __rest(placeholderProps, ["fields", "params"]);
+    // eslint-disable-next-line no-unused-vars
+    const { fields, params: placeholderParams } = placeholderProps, passThroughProps = __rest(placeholderProps, ["fields", "params"]);
     delete passThroughProps.missingComponentComponent;
     delete passThroughProps.hiddenRenderingComponent;
     delete passThroughProps.name;
-    const fields = Object.assign(Object.assign({}, (placeholderFields || {})), (componentRendering.fields || {}));
-    const params = Object.assign(Object.assign({}, (placeholderParams || {})), (componentRendering.params || {}));
-    return Object.assign(Object.assign({ key: renderingKey }, passThroughProps), { fields, params: Object.assign(Object.assign({}, params), (0, exports.getSXAParams)(componentRendering)), rendering: componentRendering });
+    const mergedContentProps = getAppComponentProps(placeholderProps, componentRendering);
+    return Object.assign(Object.assign(Object.assign({ key: renderingKey }, passThroughProps), mergedContentProps), { rendering: componentRendering });
 };
 exports.getRenderedComponentProps = getRenderedComponentProps;
+/**
+ * Merge placeholder and component field and params content props.
+ * @param {BasePlaceholderProps} placeholderProps placeholder props
+ * @param {ComponentRendering} componentRendering component rendering
+ * @returns {ComponentProps} merged props
+ */
+function getAppComponentProps(placeholderProps, componentRendering) {
+    const fields = Object.assign(Object.assign({}, (placeholderProps.fields || {})), (componentRendering.fields || {}));
+    const params = Object.assign(Object.assign({}, (placeholderProps.params || {})), (componentRendering.params || {}));
+    return {
+        fields,
+        params: Object.assign(Object.assign({}, params), (0, exports.getSXAParams)(componentRendering)),
+        rendering: componentRendering,
+    };
+}
 /**
  * Get component implemenation from the component map based on the rendering definition.
  * @param {ComponentRendering} renderingDefinition rendering data
@@ -121,6 +139,7 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
         return {
             component: hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering_1.HiddenRendering,
             isEmpty: true,
+            componentType: 'universal',
         };
     }
     else if (!renderingDefinition.componentName) {
@@ -128,6 +147,7 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
         return {
             component: () => react_1.default.createElement(react_1.default.Fragment, null),
             isEmpty: true,
+            componentType: 'universal',
         };
     }
     let component = null;
@@ -142,16 +162,22 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
         if (renderingDefinition.componentName === FEaaS_1.FEAAS_COMPONENT_RENDERING_NAME) {
             return {
                 component: FEaaS_1.FEaaSComponent,
+                isEmpty: false,
+                componentType: 'universal',
             };
         }
         else if (renderingDefinition.componentName === FEaaS_1.FEAAS_WRAPPER_RENDERING_NAME) {
             return {
                 component: FEaaS_1.FEaaSWrapper,
+                isEmpty: false,
+                componentType: 'universal',
             };
         }
         else if (renderingDefinition.componentName === FEaaS_1.BYOC_COMPONENT_RENDERING_NAME) {
             return {
                 component: FEaaS_1.BYOCComponent,
+                isEmpty: false,
+                componentType: 'universal',
             };
         }
         else if (renderingDefinition.componentName === FEaaS_1.BYOC_WRAPPER_RENDERING_NAME) {
@@ -160,11 +186,14 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
             return {
                 component: FEaaS_1.BYOCWrapper,
                 dynamic: true,
+                componentType: 'universal',
+                isEmpty: false,
             };
         }
         return {
             component: missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent_1.MissingComponent,
             isEmpty: true,
+            componentType: 'universal',
         };
     }
     // Render SXA Rendering Variant if available
@@ -180,7 +209,16 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
     return {
         component: renderedComponent,
         dynamic,
-        componentType: component.componentType,
+        componentType: component
+            .componentType,
+        isEmpty: false,
     };
 };
 exports.getComponentForRendering = getComponentForRendering;
+/**
+ * Get the RSC environment variable.
+ * @returns {boolean} true if RSC is enabled, false otherwise.
+ */
+function getRSC() {
+    return rsc_env_1.rsc;
+}

package/dist/cjs/enhancers/{withServerPlaceholder.js → withAppPlaceholder.js}

@@ -3,19 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withServerPlaceholder = void 0;
+exports.withAppPlaceholder = void 0;
 const react_1 = __importDefault(require("react"));
-const ServerPlaceholder_1 = require("../components/Placeholder/ServerPlaceholder");
-const withServerPlaceholder = (Component) => {
+const AppPlaceholder_1 = require("../components/Placeholder/AppPlaceholder");
+const withAppPlaceholder = (Component) => {
     return (props) => {
         const placeholders = props.rendering.placeholders;
         const phProps = {};
         for (const placeholder of Object.keys(placeholders)) {
-            phProps[placeholder] = (react_1.default.createElement(ServerPlaceholder_1.ServerPlaceholder, { name: placeholder, rendering: props.rendering, page: props.page, componentMap: props.componentMap }));
+            phProps[placeholder] = (react_1.default.createElement(AppPlaceholder_1.AppPlaceholder, { name: placeholder, rendering: props.rendering, componentMap: props.componentMap, page: props.page }));
         }
         const displayName = Component.displayName || Component.name || 'Component';
         const propsCopy = Object.assign(Object.assign({}, props), { displayName });
         return react_1.default.createElement(Component, Object.assign({}, propsCopy, { placeholders: phProps }));
     };
 };
-exports.withServerPlaceholder = withServerPlaceholder;
+exports.withAppPlaceholder = withAppPlaceholder;

package/dist/cjs/enhancers/withPlaceholder.js

@@ -45,13 +45,15 @@ function withPlaceholder(placeholders, options) {
                     if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
                         placeholderData = (0, Placeholder_1.getPlaceholderRenderings)(renderingData, placeholder.placeholder, childProps.page.mode.isEditing);
                         if (placeholderData) {
-                            childProps[placeholder.prop] = Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
+                            childProps[placeholder.prop] =
+                                Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
                         }
                     }
                     else {
                         placeholderData = (0, Placeholder_1.getPlaceholderRenderings)(renderingData, placeholder, childProps.page.mode.isEditing);
                         if (placeholderData) {
-                            childProps[placeholder] = Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
+                            childProps[placeholder] =
+                                Placeholder_1.PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
                         }
                     }
                 });

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecore = exports.withSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.DesignLibrary = exports.BYOCServerWrapper = exports.FEaaSServerWrapper = exports.FEaaSClientWrapper = exports.FEaaSWrapper = exports.BYOCClientWrapper = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.ServerPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecore = exports.withSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.DesignLibrary = exports.BYOCServerWrapper = exports.FEaaSServerWrapper = exports.FEaaSClientWrapper = exports.FEaaSWrapper = exports.BYOCClientWrapper = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.AppPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
 exports.SitePathService = exports.ClientEditingChromesUpdate = exports.DefaultEmptyFieldEditingComponentImage = void 0;
 var core_1 = require("@sitecore-content-sdk/core");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return core_1.constants; } });
@@ -31,7 +31,7 @@ var Form_1 = require("./components/Form");
 Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
-Object.defineProperty(exports, "ServerPlaceholder", { enumerable: true, get: function () { return Placeholder_1.ServerPlaceholder; } });
+Object.defineProperty(exports, "AppPlaceholder", { enumerable: true, get: function () { return Placeholder_1.AppPlaceholder; } });
 var Image_1 = require("./components/Image");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return Image_1.Image; } });
 var RichText_1 = require("./components/RichText");

package/dist/esm/components/Placeholder/{ServerPlaceholder.js → AppPlaceholder.js}

@@ -1,59 +1,57 @@
-import { nonSerializedPlaceholderProps } from './models';
-import { getComponentForRendering, getPlaceholderRenderings, getRenderedComponentProps, renderEmptyPlaceholder, } from './placeholder-utils';
+import { getAppComponentProps, getComponentForRendering, getPlaceholderRenderings, renderEmptyPlaceholder, getRSC, } from './placeholder-utils';
 import React from 'react';
 import { PlaceholderMetadata } from './PlaceholderMetadata';
 import ErrorBoundary from '../ErrorBoundary';
+import { ClientComponentWrapper } from './ClientComponentWrapper';
 /**
- * React Server Component implementation for Placeholder.
+ * 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 {PlaceholderProps} props Placeholder props
+ * @param {AppPlaceholderProps} props Placeholder props
  * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
  */
-export 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 = nonSerializedPlaceholderProps.reduce((finalProps, prop) => {
-        delete finalProps[prop];
-        return finalProps;
-    }, Object.assign({}, props));
-    const placeholderRenderings = getPlaceholderRenderings(props.rendering, props.name, (_a = props.page) === null || _a === void 0 ? void 0 : _a.mode.isEditing);
+export const AppPlaceholder = (props) => {
+    const { rendering: parentRendering, componentMap, page } = props;
+    const placeholderRenderings = getPlaceholderRenderings(parentRendering, props.name, page.mode.isEditing);
     const components = placeholderRenderings
         .map((rendering, index) => {
-        const { component, isEmpty, componentType, dynamic } = getComponentForRendering(rendering, props.name, props.componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
+        const { component: Component, isEmpty, componentType, dynamic, } = getComponentForRendering(rendering, props.name, componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
         const isClient = componentType === 'client';
         const key = rendering.uid || `component-${index}`;
-        const finalPhProps = isClient ? serializableProps : props;
-        const renderedProps = getRenderedComponentProps(finalPhProps, rendering, key);
-        let rendered = React.createElement(component, props.modifyComponentProps ? props.modifyComponentProps(renderedProps) : renderedProps);
+        const renderedProps = 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 && getRSC() && !isEmpty;
+        let rendered = useClientWrapper ? (React.createElement(ClientComponentWrapper, { rendering: rendering, componentProps: finalRenderedProps, placeholderName: props.name, key: key })) : (React.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.createElement(ErrorBoundary, { "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) {
+        if (page.mode.isEditing) {
             const key = rendering.uid || `component-${index}`;
             return (React.createElement(PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
         }
         return rendered;
     })
         .filter((element) => element);
-    const finalRendering = props.page.mode.isEditing
+    const finalRendering = page.mode.isEditing
         ? [
-            React.createElement(PlaceholderMetadata, { key: props.rendering.uid, placeholderName: props.name, rendering: props.rendering }, components),
+            React.createElement(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 props.page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
+        return page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
     }
     if (props.render) {
-        return props.render(components, placeholderRenderings, serializableProps);
+        return props.render(components, placeholderRenderings, props);
     }
     else if (props.renderEach) {
         const renderEach = props.renderEach;

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

@@ -0,0 +1,14 @@
+'use client';
+import { ComponentMapReactContext } from '../SitecoreProvider';
+import { useContext } from 'react';
+import React from 'react';
+import { useSitecore } from '../../enhancers/withSitecore';
+import { getComponentForRendering } from './placeholder-utils';
+export const ClientComponentWrapper = (props) => {
+    const { page } = useSitecore();
+    const componentMap = useContext(ComponentMapReactContext);
+    const componentPropsWithContext = Object.assign(Object.assign({}, props.componentProps), { rendering: props.rendering, componentMap,
+        page });
+    const { component: Component } = getComponentForRendering(props.rendering, props.placeholderName, componentMap);
+    return React.createElement(Component, Object.assign({}, componentPropsWithContext));
+};

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

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

package/dist/esm/components/Placeholder/placeholder-utils.js

@@ -16,6 +16,7 @@ import { isDynamicPlaceholder, getDynamicPlaceholderPattern, } from '@sitecore-c
 import { constants } from '@sitecore-content-sdk/core';
 import { HiddenRendering } from '../HiddenRendering';
 import { FEaaSComponent, FEaaSWrapper, BYOCComponent, BYOCWrapper, BYOC_COMPONENT_RENDERING_NAME, BYOC_WRAPPER_RENDERING_NAME, FEAAS_COMPONENT_RENDERING_NAME, FEAAS_WRAPPER_RENDERING_NAME, } from '../FEaaS';
+import { rsc } from 'rsc-env';
 /**
  * Get the renderings for the specified placeholder from the rendering data.
  * @param {ComponentRendering | RouteData } rendering rendering data
@@ -88,14 +89,29 @@ export const renderEmptyPlaceholder = (node) => {
  * @returns {RenderedProps} props to be passed to the rendered component
  */
 export const getRenderedComponentProps = (placeholderProps, componentRendering, renderingKey) => {
-    const { fields: placeholderFields, params: placeholderParams } = placeholderProps, passThroughProps = __rest(placeholderProps, ["fields", "params"]);
+    // eslint-disable-next-line no-unused-vars
+    const { fields, params: placeholderParams } = placeholderProps, passThroughProps = __rest(placeholderProps, ["fields", "params"]);
     delete passThroughProps.missingComponentComponent;
     delete passThroughProps.hiddenRenderingComponent;
     delete passThroughProps.name;
-    const fields = Object.assign(Object.assign({}, (placeholderFields || {})), (componentRendering.fields || {}));
-    const params = Object.assign(Object.assign({}, (placeholderParams || {})), (componentRendering.params || {}));
-    return Object.assign(Object.assign({ key: renderingKey }, passThroughProps), { fields, params: Object.assign(Object.assign({}, params), getSXAParams(componentRendering)), rendering: componentRendering });
+    const mergedContentProps = getAppComponentProps(placeholderProps, componentRendering);
+    return Object.assign(Object.assign(Object.assign({ key: renderingKey }, passThroughProps), mergedContentProps), { rendering: componentRendering });
 };
+/**
+ * Merge placeholder and component field and params content props.
+ * @param {BasePlaceholderProps} placeholderProps placeholder props
+ * @param {ComponentRendering} componentRendering component rendering
+ * @returns {ComponentProps} merged props
+ */
+export function getAppComponentProps(placeholderProps, componentRendering) {
+    const fields = Object.assign(Object.assign({}, (placeholderProps.fields || {})), (componentRendering.fields || {}));
+    const params = Object.assign(Object.assign({}, (placeholderProps.params || {})), (componentRendering.params || {}));
+    return {
+        fields,
+        params: Object.assign(Object.assign({}, params), getSXAParams(componentRendering)),
+        rendering: componentRendering,
+    };
+}
 /**
  * Get component implemenation from the component map based on the rendering definition.
  * @param {ComponentRendering} renderingDefinition rendering data
@@ -111,6 +127,7 @@ export const getComponentForRendering = (renderingDefinition, placeholderName, c
         return {
             component: hiddenRenderingComponent !== null && hiddenRenderingComponent !== void 0 ? hiddenRenderingComponent : HiddenRendering,
             isEmpty: true,
+            componentType: 'universal',
         };
     }
     else if (!renderingDefinition.componentName) {
@@ -118,6 +135,7 @@ export const getComponentForRendering = (renderingDefinition, placeholderName, c
         return {
             component: () => React.createElement(React.Fragment, null),
             isEmpty: true,
+            componentType: 'universal',
         };
     }
     let component = null;
@@ -132,16 +150,22 @@ export const getComponentForRendering = (renderingDefinition, placeholderName, c
         if (renderingDefinition.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
             return {
                 component: FEaaSComponent,
+                isEmpty: false,
+                componentType: 'universal',
             };
         }
         else if (renderingDefinition.componentName === FEAAS_WRAPPER_RENDERING_NAME) {
             return {
                 component: FEaaSWrapper,
+                isEmpty: false,
+                componentType: 'universal',
             };
         }
         else if (renderingDefinition.componentName === BYOC_COMPONENT_RENDERING_NAME) {
             return {
                 component: BYOCComponent,
+                isEmpty: false,
+                componentType: 'universal',
             };
         }
         else if (renderingDefinition.componentName === BYOC_WRAPPER_RENDERING_NAME) {
@@ -150,11 +174,14 @@ export const getComponentForRendering = (renderingDefinition, placeholderName, c
             return {
                 component: BYOCWrapper,
                 dynamic: true,
+                componentType: 'universal',
+                isEmpty: false,
             };
         }
         return {
             component: missingComponentComponent !== null && missingComponentComponent !== void 0 ? missingComponentComponent : MissingComponent,
             isEmpty: true,
+            componentType: 'universal',
         };
     }
     // Render SXA Rendering Variant if available
@@ -170,6 +197,15 @@ export const getComponentForRendering = (renderingDefinition, placeholderName, c
     return {
         component: renderedComponent,
         dynamic,
-        componentType: component.componentType,
+        componentType: component
+            .componentType,
+        isEmpty: false,
     };
 };
+/**
+ * Get the RSC environment variable.
+ * @returns {boolean} true if RSC is enabled, false otherwise.
+ */
+export function getRSC() {
+    return rsc;
+}

package/dist/esm/enhancers/{withServerPlaceholder.js → withAppPlaceholder.js}

@@ -1,11 +1,11 @@
 import React from 'react';
-import { ServerPlaceholder } from '../components/Placeholder/ServerPlaceholder';
-export const withServerPlaceholder = (Component) => {
+import { AppPlaceholder } from '../components/Placeholder/AppPlaceholder';
+export const withAppPlaceholder = (Component) => {
     return (props) => {
         const placeholders = props.rendering.placeholders;
         const phProps = {};
         for (const placeholder of Object.keys(placeholders)) {
-            phProps[placeholder] = (React.createElement(ServerPlaceholder, { name: placeholder, rendering: props.rendering, page: props.page, componentMap: props.componentMap }));
+            phProps[placeholder] = (React.createElement(AppPlaceholder, { name: placeholder, rendering: props.rendering, componentMap: props.componentMap, page: props.page }));
         }
         const displayName = Component.displayName || Component.name || 'Component';
         const propsCopy = Object.assign(Object.assign({}, props), { displayName });

package/dist/esm/enhancers/withPlaceholder.js

@@ -39,13 +39,15 @@ export function withPlaceholder(placeholders, options) {
                     if (typeof placeholder !== 'string' && placeholder.placeholder && placeholder.prop) {
                         placeholderData = getPlaceholderRenderings(renderingData, placeholder.placeholder, childProps.page.mode.isEditing);
                         if (placeholderData) {
-                            childProps[placeholder.prop] = PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
+                            childProps[placeholder.prop] =
+                                PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
                         }
                     }
                     else {
                         placeholderData = getPlaceholderRenderings(renderingData, placeholder, childProps.page.mode.isEditing);
                         if (placeholderData) {
-                            childProps[placeholder] = PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
+                            childProps[placeholder] =
+                                PlaceholderComponent.getRenderedComponents(this.props, placeholderData);
                         }
                     }
                 });

package/dist/esm/index.js

@@ -5,7 +5,7 @@ export { DictionaryService } from '@sitecore-content-sdk/core/i18n';
 export { DefaultRetryStrategy, GraphQLRequestClient, ErrorPage, } from '@sitecore-content-sdk/core/client';
 export { mediaApi } from '@sitecore-content-sdk/core/media';
 export { Form } from './components/Form';
-export { Placeholder, ServerPlaceholder, } from './components/Placeholder';
+export { Placeholder, AppPlaceholder, } from './components/Placeholder';
 export { Image, } from './components/Image';
 export { RichText } from './components/RichText';
 export { Text } from './components/Text';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "1.2.0-canary.50",
+  "version": "1.2.0-canary.52",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -72,12 +72,13 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "1.2.0-canary.50",
-    "fast-deep-equal": "^3.1.3"
+    "@sitecore-content-sdk/core": "1.2.0-canary.52",
+    "fast-deep-equal": "^3.1.3",
+    "rsc-env": "^0.0.2"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "c07d740a39a1a1f057396a59ab07b9ffb0e06c77",
+  "gitHead": "561443139cdafcc487d7f3faba2038a24771474c",
   "files": [
     "dist",
     "types"

package/types/components/Placeholder/{ServerPlaceholder.d.ts → AppPlaceholder.d.ts}

@@ -1,10 +1,10 @@
-import { PlaceholderProps } from './models';
+import { AppPlaceholderProps } from './models';
 import React from 'react';
 /**
- * React Server Component implementation for Placeholder.
+ * 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 {PlaceholderProps} props Placeholder props
+ * @param {AppPlaceholderProps} props Placeholder props
  * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
  */
-export declare const ServerPlaceholder: (props: PlaceholderProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element | (string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element)[];
+export declare const AppPlaceholder: (props: AppPlaceholderProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element | (string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element)[];

package/types/components/Placeholder/ClientComponentWrapper.d.ts

@@ -0,0 +1,9 @@
+import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+import React from 'react';
+import { AppComponentProps } from './models';
+export interface ClientComponentWrapperProps {
+    rendering: ComponentRendering;
+    componentProps: AppComponentProps;
+    placeholderName: string;
+}
+export declare const ClientComponentWrapper: (props: ClientComponentWrapperProps) => React.JSX.Element;

package/types/components/Placeholder/index.d.ts

@@ -1,5 +1,5 @@
-export { ServerPlaceholder } from './ServerPlaceholder';
 export { Placeholder, PlaceholderComponent } from './Placeholder';
 export { PlaceholderMetadata } from './PlaceholderMetadata';
-export { PlaceholderProps } from './models';
+export { PlaceholderProps, AppPlaceholderProps } from './models';
+export { AppPlaceholder } from './AppPlaceholder';
 export * from './placeholder-utils';

package/types/components/Placeholder/models.d.ts

@@ -11,18 +11,20 @@ export type ComponentProps = {
     [key: string]: unknown;
     rendering: ComponentRendering;
 };
-export interface PlaceholderProps {
-    [key: string]: unknown;
+export interface AppComponentProps {
+    fields: {
+        [name: string]: Field | Item | Item[];
+    };
+    params: {
+        [name: string]: string;
+    };
+    rendering: ComponentRendering;
+}
+export interface BasePlaceholderProps {
     /** Name of the placeholder to render. */
     name: string;
     /** Rendering data to be used when rendering the placeholder. */
     rendering: ComponentRendering | RouteData;
-    /**
-     * Component Map will be used to map Sitecore component names to app implementation
-     * When rendered within a <SitecoreProvider> component, defaults to the context componentMap.
-     * When rendered as a server placeholder, this prop must be provided.
-     */
-    componentMap?: ComponentMap;
     /**
      * An object of field names/values that are aggregated and propagated through the component tree created by a placeholder.
      * Any component or placeholder rendered by a placeholder will have access to this data via `props.fields`.
@@ -37,13 +39,6 @@ export interface PlaceholderProps {
     params?: {
         [name: string]: string;
     };
-    /**
-     * Modify final props of component (before render) provided by rendering data.
-     * Can be used in case when you need to insert additional data into the component.
-     * @param {ComponentProps} componentProps component props to be modified
-     * @returns {ComponentProps} modified or initial props
-     */
-    modifyComponentProps?: (componentProps: ComponentProps) => ComponentProps;
     /**
      * A component that is rendered in place of any components that are in this placeholder,
      * but do not have a definition in the componentMap (i.e. don't have a React implementation)
@@ -76,18 +71,54 @@ export interface PlaceholderProps {
      * Render props function that is called when the placeholder contains no content components.
      */
     renderEmpty?: (components: React.ReactNode[]) => React.ReactNode;
+    /**
+     * Render props function that is called for each non-system component added to the placeholder.
+     * Mutually exclusive with `render`.
+     */
+    renderEach?: (component: React.ReactNode, index: number) => React.ReactNode;
+}
+export interface PlaceholderProps extends BasePlaceholderProps {
+    [key: string]: unknown;
+    /**
+     * Component Map will be used to map Sitecore component names to app implementation
+     * When rendered within a <SitecoreProvider> component, defaults to the context componentMap.
+     * When rendered as a server placeholder, this prop must be provided. This prop is not used in AppPlaceholder.
+     */
+    componentMap?: ComponentMap;
+    /**
+     * Modify final props of component (before render) provided by rendering data.
+     * Can be used in case when you need to insert additional data into the component.
+     * @param {ComponentProps} componentProps component props to be modified
+     * @returns {ComponentProps} modified or initial props
+     */
+    modifyComponentProps?: (componentProps: ComponentProps) => ComponentProps;
     /**
      * Render props function that enables control over the rendering of the components in the placeholder.
      * Useful for techniques like wrapping each child in a wrapper component.
      */
     render?: (components: React.ReactNode[], data: ComponentRendering[], props: PlaceholderProps) => React.ReactNode;
+}
+export interface AppPlaceholderProps extends BasePlaceholderProps {
     /**
-     * Render props function that is called for each non-system component added to the placeholder.
-     * Mutually exclusive with `render`.
+     * Component Map will be used to map Sitecore component names to app implementation
+     * When rendered within a <SitecoreProvider> component, defaults to the context componentMap.
+     * When rendered as a server placeholder, this prop must be provided. This prop is not used in AppPlaceholder.
      */
-    renderEach?: (component: React.ReactNode, index: number) => React.ReactNode;
+    componentMap: ComponentMap;
+    /**
+     * Modify final props of component (before render) provided by rendering data.
+     * Can be used in case when you need to insert additional data into the component.
+     * @param {AppComponentProps} componentProps component props to be modified
+     * @returns {AppComponentProps} modified or initial props
+     */
+    modifyComponentProps?: (componentProps: AppComponentProps) => AppComponentProps;
+    /**
+     * Render props function that enables control over the rendering of the components in the placeholder.
+     * Useful for techniques like wrapping each child in a wrapper component.
+     */
+    render?: (components: React.ReactNode[], data: ComponentRendering[], props: AppPlaceholderProps) => React.ReactNode;
 }
-export type RenderedProps = Omit<PlaceholderProps, 'fields | params'> & {
+export type RenderedProps = Omit<PlaceholderProps, 'fields' | 'params'> & {
     key: string;
     fields: {
         [field: string]: unknown;
@@ -97,6 +128,12 @@ export type RenderedProps = Omit<PlaceholderProps, 'fields | params'> & {
     };
     rendering: ComponentRendering;
 };
+export interface ComponentForRendering {
+    component: React.ComponentType<any>;
+    isEmpty: boolean;
+    dynamic?: boolean;
+    componentType?: ComponentType;
+}
 /**
  * Prop names from placeholder that cannot be serialized and passed from server to client side components
  */

package/types/components/Placeholder/placeholder-utils.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { ComponentMap } from '../sharedTypes';
 import { ComponentRendering, RouteData } from '@sitecore-content-sdk/core/layout';
-import { BYOCComponent } from '../FEaaS';
-import { PlaceholderProps, RenderedProps } from './models';
+import { AppComponentProps, BasePlaceholderProps, ComponentForRendering, PlaceholderProps, RenderedProps } from './models';
 /**
  * Get the renderings for the specified placeholder from the rendering data.
  * @param {ComponentRendering | RouteData } rendering rendering data
@@ -35,6 +34,13 @@ export declare const renderEmptyPlaceholder: (node: React.ReactNode | React.Reac
  * @returns {RenderedProps} props to be passed to the rendered component
  */
 export declare const getRenderedComponentProps: (placeholderProps: PlaceholderProps, componentRendering: ComponentRendering, renderingKey: string) => RenderedProps;
+/**
+ * Merge placeholder and component field and params content props.
+ * @param {BasePlaceholderProps} placeholderProps placeholder props
+ * @param {ComponentRendering} componentRendering component rendering
+ * @returns {ComponentProps} merged props
+ */
+export declare function getAppComponentProps<T extends BasePlaceholderProps>(placeholderProps: T, componentRendering: ComponentRendering): AppComponentProps;
 /**
  * Get component implemenation from the component map based on the rendering definition.
  * @param {ComponentRendering} renderingDefinition rendering data
@@ -44,34 +50,9 @@ export declare const getRenderedComponentProps: (placeholderProps: PlaceholderPr
  * @param {React.ComponentClass} [missingComponentComponent] fallback implementation in case no component is found in the component map
  * @returns {ContentSDKComponet | null} component implementation or null if no component map is provided
  */
-export declare const getComponentForRendering: (renderingDefinition: ComponentRendering, placeholderName: string, componentMap?: ComponentMap, hiddenRenderingComponent?: React.ComponentClass | React.FC, missingComponentComponent?: React.ComponentClass | React.FC) => {
-    component: (() => React.JSX.Element) | React.ComponentClass<{}, any> | React.FC<{}>;
-    isEmpty: boolean;
-    dynamic?: undefined;
-    componentType?: undefined;
-} | {
-    component: (props: import("../FEaaS").FEaaSComponentProps) => React.JSX.Element;
-    isEmpty?: undefined;
-    dynamic?: undefined;
-    componentType?: undefined;
-} | {
-    component: typeof BYOCComponent;
-    isEmpty?: undefined;
-    dynamic?: undefined;
-    componentType?: undefined;
-} | {
-    component: (props: import("../FEaaS").BYOCComponentProps) => React.JSX.Element;
-    dynamic: boolean;
-    isEmpty?: undefined;
-    componentType?: undefined;
-} | {
-    component: React.FC<import("../MissingComponent").MissingComponentProps> | React.ComponentClass<{}, any>;
-    isEmpty: boolean;
-    dynamic?: undefined;
-    componentType?: undefined;
-} | {
-    component: React.ComponentType;
-    dynamic: boolean;
-    componentType: unknown;
-    isEmpty?: undefined;
-};
+export declare const getComponentForRendering: (renderingDefinition: ComponentRendering, placeholderName: string, componentMap?: ComponentMap, hiddenRenderingComponent?: React.ComponentClass | React.FC, missingComponentComponent?: React.ComponentClass | React.FC) => ComponentForRendering;
+/**
+ * Get the RSC environment variable.
+ * @returns {boolean} true if RSC is enabled, false otherwise.
+ */
+export declare function getRSC(): boolean;

package/types/enhancers/{withServerPlaceholder.d.ts → withAppPlaceholder.d.ts}

@@ -1,15 +1,15 @@
 import React from 'react';
 import { ComponentType } from 'react';
 import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
-import { ComponentMap } from '../components/sharedTypes';
 import { Page } from '@sitecore-content-sdk/core/client';
+import { ComponentMap } from '../components/sharedTypes';
 export type ComponentProps = {
     rendering: ComponentRendering;
     placeholders: Record<string, React.ReactNode>;
 };
 export type WrapperProps = {
+    rendering: ComponentRendering;
     page: Page;
     componentMap: ComponentMap;
-    rendering: ComponentRendering;
 };
-export declare const withServerPlaceholder: <T extends ComponentProps, W extends T & WrapperProps>(Component: ComponentType<T>) => (props: W) => React.JSX.Element;
+export declare const withAppPlaceholder: <T extends ComponentProps, W extends T & WrapperProps>(Component: ComponentType<T>) => (props: W) => React.JSX.Element;

package/types/index.d.ts

@@ -7,7 +7,7 @@ export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, GraphQLRequest
 export { mediaApi } from '@sitecore-content-sdk/core/media';
 export { Form } from './components/Form';
 export { ReactContentSdkComponent, ComponentMap, ReactModule } from './components/sharedTypes';
-export { Placeholder, PlaceholderProps, PlaceholderProps as PlaceholderComponentProps, ServerPlaceholder, } from './components/Placeholder';
+export { Placeholder, PlaceholderProps, PlaceholderProps as PlaceholderComponentProps, AppPlaceholder, AppPlaceholderProps, } from './components/Placeholder';
 export { Image, ImageProps, ImageField, ImageFieldValue, ImageSizeParameters, } from './components/Image';
 export { RichText, RichTextProps, RichTextField } from './components/RichText';
 export { Text, TextField } from './components/Text';