@sitecore-content-sdk/react 2.0.0-canary.2 → 2.0.0-canary.20

package/dist/cjs/components/Date.js

@@ -20,19 +20,13 @@ const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
 const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
 const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
 const layout_1 = require("@sitecore-content-sdk/content/layout");
-/**
- * The DateField component.
- * @public
- */
-exports.DateField = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(
-// eslint-disable-next-line no-unused-vars
-(_a) => {
-    var { field, tag, editable = true, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
+const DateFieldComponent = (_a) => {
+    var { field, tag, render } = _a, htmlProps = __rest(_a, ["field", "tag", "render"]);
     if ((0, layout_1.isFieldValueEmpty)(field)) {
         return null;
     }
+    delete htmlProps.editable; // prevent editable from being passed to the DOM
     let children;
-    const htmlProps = Object.assign({}, otherProps);
     if (render) {
         children = render(field.value ? new Date(field.value) : null);
     }
@@ -40,10 +34,18 @@ exports.DateField = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFiel
         children = field.value;
     }
     if (tag) {
-        return react_1.default.createElement(tag || 'span', htmlProps, children);
+        const Tag = (tag || 'span');
+        return react_1.default.createElement(Tag, Object.assign({}, htmlProps), children);
     }
     else {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText }));
+};
+/**
+ * The DateField component.
+ * @public
+ */
+exports.DateField = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(DateFieldComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText,
+}));
 exports.DateField.displayName = 'Date';

package/dist/cjs/components/DefaultEmptyFieldEditingComponents.js

@@ -11,7 +11,8 @@ const react_1 = __importDefault(require("react"));
  * @public
  */
 const DefaultEmptyFieldEditingComponentText = (props) => {
-    return react_1.default.createElement(props.tag || 'span', Object.assign(Object.assign({}, props), { suppressHydrationWarning: true }), '[No text in field]');
+    const Tag = (props.tag || 'span');
+    return (react_1.default.createElement(Tag, Object.assign({}, props, { suppressHydrationWarning: true }), "[No text in field]"));
 };
 exports.DefaultEmptyFieldEditingComponentText = DefaultEmptyFieldEditingComponentText;
 /**

package/dist/cjs/components/DesignLibrary/DesignLibrary.js

@@ -42,10 +42,9 @@ const layout_1 = require("@sitecore-content-sdk/content/layout");
 const editing_1 = require("@sitecore-content-sdk/content/editing");
 const codegen = __importStar(require("@sitecore-content-sdk/content/codegen"));
 const editing = __importStar(require("@sitecore-content-sdk/content/editing"));
-const withSitecore_1 = require("../../enhancers/withSitecore");
+const SitecoreProvider_1 = require("../../components/SitecoreProvider");
 const Placeholder_1 = require("../Placeholder");
 const DesignLibraryErrorBoundary_1 = require("./DesignLibraryErrorBoundary");
-const withLoadImportMap_1 = require("../../enhancers/withLoadImportMap");
 const ErrorBoundary_1 = require("../ErrorBoundary");
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, sendErrorEvent, } = codegen;
 let { postToDesignLibrary } = editing;
@@ -66,15 +65,12 @@ exports.__mockDependencies = __mockDependencies;
  * 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} [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.
  * @public
  */
 const DesignLibrary = () => {
     var _a, _b;
-    const { page } = (0, withSitecore_1.useSitecore)();
-    const loadImportMap = (0, withLoadImportMap_1.useLoadImportMap)();
+    const { page, loadImportMap } = (0, SitecoreProvider_1.useSitecore)();
     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 uid = rendering === null || rendering === void 0 ? void 0 : rendering.uid;
@@ -123,7 +119,7 @@ const DesignLibrary = () => {
         let unsubscribe;
         (async () => {
             if (!loadImportMap) {
-                sendErrorEvent(uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
+                sendErrorEvent(uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.ImportMapMissing);
                 return;
             }
             let importMap;
@@ -132,7 +128,7 @@ const DesignLibrary = () => {
                 importMap = mod.default;
             }
             catch (e) {
-                sendErrorEvent(uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
+                sendErrorEvent(uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.ImportMapLoad);
                 return;
             }
             // account for component being unmounted while resolving async import map
@@ -155,7 +151,7 @@ const DesignLibrary = () => {
             cancelled = true;
             unsubscribe && unsubscribe();
         };
-    }, [isVariantGeneration, uid]);
+    }, [isDesignLibrary, isVariantGeneration, uid, loadImportMap, propsState]);
     return (react_1.default.createElement("main", null, isGeneratedComponentActive ? (react_1.default.createElement(DesignLibraryErrorBoundary_1.DesignLibraryErrorBoundary, { uid: uid, renderKey: renderKey },
         react_1.default.createElement(Placeholder_1.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 }))))));

package/dist/cjs/components/DesignLibrary/DesignLibraryErrorBoundary.js

@@ -37,6 +37,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DesignLibraryErrorBoundary = void 0;
 const react_1 = __importStar(require("react"));
 const codegen_1 = require("@sitecore-content-sdk/content/codegen");
+/**
+ * Error boundary for the Design Library component.
+ * Catches errors during rendering and sends them to the Design Library
+ * @param {DesignLibraryErrorBoundaryProps} props - The props for the error boundary, including the component UID and children to render.
+ * @internal
+ */
 class DesignLibraryErrorBoundary extends react_1.default.Component {
     constructor() {
         super(...arguments);

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesignLibraryApp = exports.DesignLibrary = void 0;
+exports.DesignLibraryErrorBoundary = exports.DesignLibrary = void 0;
 var DesignLibrary_1 = require("./DesignLibrary");
 Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
-var DesignLibraryApp_1 = require("./DesignLibraryApp");
-Object.defineProperty(exports, "DesignLibraryApp", { enumerable: true, get: function () { return DesignLibraryApp_1.DesignLibraryApp; } });
+var DesignLibraryErrorBoundary_1 = require("./DesignLibraryErrorBoundary");
+Object.defineProperty(exports, "DesignLibraryErrorBoundary", { enumerable: true, get: function () { return DesignLibraryErrorBoundary_1.DesignLibraryErrorBoundary; } });

package/dist/cjs/components/EditingScripts.js

@@ -6,7 +6,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditingScripts = void 0;
 const react_1 = __importDefault(require("react"));
-const withSitecore_1 = require("../enhancers/withSitecore");
+const SitecoreProvider_1 = require("./SitecoreProvider");
 const editing_1 = require("@sitecore-content-sdk/content/editing");
 /**
  * Renders client scripts and data for editing/preview mode for Pages.
@@ -16,7 +16,7 @@ const editing_1 = require("@sitecore-content-sdk/content/editing");
  */
 const EditingScripts = () => {
     var _a;
-    const { page: { mode, layout }, api, } = (0, withSitecore_1.useSitecore)();
+    const { page: { mode, layout }, api, } = (0, SitecoreProvider_1.useSitecore)();
     const { clientData, clientScripts } = layout.sitecore.context;
     // Don't render anything if not in editing mode and rendering type is not component
     if (mode.isNormal || mode.isPreview) {

package/dist/cjs/components/ErrorBoundary.js

@@ -36,16 +36,17 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorComponent = void 0;
 const react_1 = __importStar(require("react"));
-const withSitecore_1 = require("../enhancers/withSitecore");
+const SitecoreProvider_1 = require("./SitecoreProvider");
 /**
  * Simple error component applying basic error styling.
  * @param {object} props - Either with `message` (string) or with `children` (ReactNode), but not both.
+ * @internal
  */
 const ErrorComponent = (props) => {
     return (react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" }, props.message ? props.message : props.children));
 };
 exports.ErrorComponent = ErrorComponent;
-class ErrorBoundary extends react_1.default.Component {
+class ErrorBoundaryClass extends react_1.default.Component {
     constructor(props) {
         super(props);
         this.defaultErrorMessage = 'There was a problem loading this section.';
@@ -69,7 +70,7 @@ class ErrorBoundary extends react_1.default.Component {
         return this.isInDevMode() || this.props.page.mode.isEditing || this.props.page.mode.isPreview;
     }
     render() {
-        var _a;
+        var _a, _b;
         if (this.state.error) {
             if (this.props.errorComponent) {
                 return react_1.default.createElement(this.props.errorComponent, { error: this.state.error });
@@ -92,10 +93,14 @@ class ErrorBoundary extends react_1.default.Component {
             }
         }
         // do not apply suspense when suspense is disabled or when on already dynamic components
-        if (this.props.disableSuspense || this.props.isDynamic) {
+        if (((_b = this.props.disableSuspense) !== null && _b !== void 0 ? _b : true) || this.props.isDynamic)
             return this.props.children;
-        }
         return (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
     }
 }
-exports.default = (0, withSitecore_1.withSitecore)()(ErrorBoundary);
+const ErrorBoundary = (props) => {
+    const { page } = (0, SitecoreProvider_1.useSitecore)();
+    const boundaryProps = Object.assign(Object.assign({}, props), { page });
+    return react_1.default.createElement(ErrorBoundaryClass, Object.assign({}, boundaryProps));
+};
+exports.default = ErrorBoundary;

package/dist/cjs/components/File.js

@@ -37,7 +37,9 @@ const File = (_a) => {
     const anchorAttrs = {
         href: file.src,
     };
-    return react_1.default.createElement('a', Object.assign(Object.assign({}, anchorAttrs), otherProps), linkText, children);
+    return (react_1.default.createElement("a", Object.assign({}, anchorAttrs, otherProps),
+        linkText,
+        children));
 };
 exports.File = File;
 exports.File.displayName = 'File';

package/dist/cjs/components/Form.js

@@ -37,8 +37,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = exports.mockFormModule = void 0;
 const react_1 = __importStar(require("react"));
 const content_1 = require("@sitecore-content-sdk/content");
-const withSitecore_1 = require("../enhancers/withSitecore");
+const core_1 = require("@sitecore-content-sdk/core");
+const SitecoreProvider_1 = require("./SitecoreProvider");
 const ErrorBoundary_1 = require("./ErrorBoundary");
+const { ERROR_MESSAGES } = core_1.constants;
 let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = content_1.form;
 /**
  * Mock function to replace the form module functions for `testing` purposes.
@@ -56,11 +58,11 @@ exports.mockFormModule = mockFormModule;
  * @public
  */
 const Form = ({ params, rendering }) => {
-    var _a;
+    var _a, _b, _c, _d, _e;
     const id = params === null || params === void 0 ? void 0 : params.RenderingIdentifier;
     const [error, setError] = (0, react_1.useState)(false);
     const [content, setContent] = (0, react_1.useState)('');
-    const context = (0, withSitecore_1.useSitecore)();
+    const context = (0, SitecoreProvider_1.useSitecore)();
     const formRef = (0, react_1.useRef)(null);
     const isEditing = context.page.mode.isEditing;
     (0, react_1.useEffect)(() => {
@@ -70,14 +72,14 @@ const Form = ({ params, rendering }) => {
             const edgeId = (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId;
             if (!edgeId) {
                 /* eslint-disable no-console */
-                console.warn('Warning: clientContextId is missing – form cannot be loaded properly on the client');
+                console.warn(`${ERROR_MESSAGES.MV_006}. Form cannot be loaded properly on the client`);
                 return;
             }
             loadForm(edgeId, params.FormId, (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl)
                 .then(setContent)
                 .catch(() => {
                 if (isEditing) {
-                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for content-sdk:form for more details.`);
+                    console.error(`Failed to load form with id ${params.FormId}. Check debug logs for content-sdk:form for more details. ${ERROR_MESSAGES.CONTACT_SUPPORT}`);
                 }
                 setError(true);
             });
@@ -91,10 +93,17 @@ const Form = ({ params, rendering }) => {
             }
             executeScriptElements(formRef.current);
         }
-    }, [content]);
+    }, [
+        content,
+        isEditing,
+        params.FormId,
+        rendering.uid,
+        (_b = (_a = context.api) === null || _a === void 0 ? void 0 : _a.edge) === null || _b === void 0 ? void 0 : _b.clientContextId,
+        (_d = (_c = context.api) === null || _c === void 0 ? void 0 : _c.edge) === null || _d === void 0 ? void 0 : _d.edgeUrl,
+    ]);
     if (isEditing && error) {
         return react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: "There was a problem loading this section" });
     }
-    return (react_1.default.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_a = params.styles) === null || _a === void 0 ? void 0 : _a.trimEnd(), id: id ? id : undefined }));
+    return (react_1.default.createElement("div", { ref: formRef, dangerouslySetInnerHTML: { __html: content }, className: (_e = params.styles) === null || _e === void 0 ? void 0 : _e.trimEnd(), id: id ? id : undefined }));
 };
 exports.Form = Form;

package/dist/cjs/components/Image.js

@@ -15,7 +15,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = void 0;
-/* eslint-disable no-unused-vars */
 const media_1 = require("@sitecore-content-sdk/content/media");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");
@@ -40,17 +39,13 @@ const getImageAttrs = (_a, imageParams, mediaUrlPrefix) => {
     newAttrs.src = resolvedSrc;
     return newAttrs;
 };
-/**
- * The Image component.
- * @param {ImageProps} props component props
- * @public
- */
-exports.Image = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((_a) => {
-    var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
+const ImageComponent = (_a) => {
+    var { imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["imageParams", "field", "mediaUrlPrefix"]);
     const dynamicMedia = field;
     if ((0, layout_1.isFieldValueEmpty)(dynamicMedia)) {
         return null;
     }
+    delete otherProps.editable; // prevent editable from being passed to the DOM
     // some wise-guy/gal is passing in a 'raw' image object value
     const img = dynamicMedia.src
         ? field
@@ -67,5 +62,13 @@ exports.Image = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEdi
         return react_1.default.createElement("img", Object.assign({}, attrs));
     }
     return null; // we can't handle the truth
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage }));
+};
+/**
+ * The Image component.
+ * @param {ImageProps} props component props
+ * @public
+ */
+exports.Image = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(ImageComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentImage,
+}));
 exports.Image.displayName = 'Image';

package/dist/cjs/components/Link.js

@@ -1,38 +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);
-    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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -44,24 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const layout_1 = require("@sitecore-content-sdk/content/layout");
 const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
 const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
 const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
-/**
- * The Link component.
- * @param {LinkProps} props component props
- * @public
- */
-exports.Link = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((0, react_1.forwardRef)(
-// eslint-disable-next-line no-unused-vars
-(_a, ref) => {
-    var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+const LinkComponent = (_a) => {
+    var { field, showLinkTextWithChildrenPresent, ref } = _a, otherProps = __rest(_a, ["field", "showLinkTextWithChildrenPresent", "ref"]);
     const children = otherProps.children;
     const dynamicField = field;
+    delete otherProps.editable; // prevent editable from being passed to the DOM
     if ((0, layout_1.isFieldValueEmpty)(dynamicField)) {
         return null;
     }
@@ -85,7 +49,16 @@ exports.Link = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEdit
         anchorAttrs.rel = 'noopener noreferrer';
     }
     const linkText = showLinkTextWithChildrenPresent || !children ? link.text || link.href : null;
-    const element = react_1.default.createElement('a', Object.assign(Object.assign(Object.assign({}, anchorAttrs), otherProps), { key: 'link', ref }), linkText, children);
-    return react_1.default.createElement(react_1.default.Fragment, null, element);
-}), { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText, isForwardRef: true }), true);
+    return (react_1.default.createElement("a", Object.assign({}, anchorAttrs, otherProps, { key: "link", ref: ref }),
+        linkText,
+        children));
+};
+/**
+ * The Link component.
+ * @param {LinkProps} props component props
+ * @public
+ */
+exports.Link = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(LinkComponent, {
+    defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponents_1.DefaultEmptyFieldEditingComponentText,
+}));
 exports.Link.displayName = 'Link';

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

@@ -6,74 +6,72 @@ 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;
+const PlaceholderMetadata_1 = require("./PlaceholderMetadata");
+const AppPlaceholderComponent = (props) => {
+    const renderingData = props.rendering;
+    const isEditing = props.page.mode.isEditing;
+    const placeholderRenderings = (0, placeholder_utils_1.getPlaceholderRenderings)(renderingData, props.name, isEditing);
+    const isEmpty = !placeholderRenderings.length;
+    const components = getPlaceholderComponents(props, placeholderRenderings);
+    if (isEmpty) {
+        let renderedOutput = components;
+        if (props.renderEmpty) {
+            renderedOutput = props.renderEmpty(components);
+        }
+        return isEditing ? (0, placeholder_utils_1.renderEmptyPlaceholder)(renderedOutput) : renderedOutput;
+    }
+    else if (props.render) {
+        return props.render(components, placeholderRenderings, props);
+    }
+    return components;
+};
+const getPlaceholderComponents = (placeholderProps, placeholderRenderings) => {
+    const { name, rendering, passThroughComponentProps, missingComponentComponent, hiddenRenderingComponent, errorComponent, componentLoadingMessage, renderEach, modifyComponentProps, componentMap, page, } = placeholderProps;
+    const isEditing = page.mode.isEditing;
+    const componentRuntime = _rsc_env_1.rsc ? 'server' : 'client';
+    const transformedComponents = placeholderRenderings
+        .map((componentRendering, index) => {
+        const { component: ChildComponent, isEmpty: componentEmpty, componentType, dynamic, } = (0, placeholder_utils_1.getComponentForRendering)(componentRendering, name, componentMap, hiddenRenderingComponent, missingComponentComponent);
+        const key = componentRendering.uid || `component-${index}`;
+        const renderedProps = modifyComponentProps
+            ? modifyComponentProps((0, placeholder_utils_1.getChildComponentProps)(placeholderProps, componentRendering))
+            : (0, placeholder_utils_1.getChildComponentProps)(placeholderProps, componentRendering);
         // 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 useClientWrapper = componentType === 'client' && _rsc_env_1.rsc && !componentEmpty;
+        let rendered = useClientWrapper ? (react_1.default.createElement(ClientComponentWrapper_1.ClientComponentWrapper, { rendering: renderedProps.rendering, componentProps: Object.assign(Object.assign({}, renderedProps), passThroughComponentProps), placeholderName: name, key: key })) : (react_1.default.createElement(ChildComponent, Object.assign({ key: key }, renderedProps, passThroughComponentProps, { page: page, componentMap: componentMap })));
+        if (renderEach) {
+            rendered = renderEach(rendered, index);
+        }
+        if (!componentEmpty) {
             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));
+            rendered = (react_1.default.createElement(ErrorBoundary_1.default, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: errorComponent, componentLoadingMessage: componentLoadingMessage, isDynamic: dynamic, disableSuspense: placeholderProps.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;
+        return isEditing ? (react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: key, rendering: componentRendering, componentRuntime: componentRuntime }, rendered)) : (rendered);
     })
-        .filter((element) => element);
-    const finalRendering = page.mode.isEditing
-        ? [
-            react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: parentRendering.uid || 'placeholder-metadata-root', 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;
+        .filter((element) => element); // remove nulls
+    if (!isEditing) {
+        return transformedComponents;
     }
+    return [
+        react_1.default.createElement(PlaceholderMetadata_1.PlaceholderMetadata, { key: rendering.uid, placeholderName: name, rendering: rendering }, transformedComponents),
+    ];
 };
+/**
+ * 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) => (
+// Using error boundary for errors that may happen within Placeholder itself
+react_1.default.createElement(ErrorBoundary_1.default, { errorComponent: props.errorComponent },
+    react_1.default.createElement(AppPlaceholderComponent, Object.assign({}, props))));
 exports.AppPlaceholder = AppPlaceholder;

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

@@ -6,16 +6,12 @@ var __importDefault = (this && this.__importDefault) || function (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 react_1 = __importDefault(require("react"));
 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));
+    const { page, componentMap: clientComponentMap } = (0, SitecoreProvider_1.useSitecore)();
+    const componentPropsWithContext = Object.assign(Object.assign({}, props.componentProps), { rendering: props.rendering, componentMap: clientComponentMap, page });
+    const { component: Component } = (0, placeholder_utils_1.getComponentForRendering)(props.rendering, props.placeholderName, clientComponentMap);
+    return react_1.default.createElement(Component, Object.assign({}, componentPropsWithContext));
 };
 exports.ClientComponentWrapper = ClientComponentWrapper;