@sitecore-content-sdk/react 1.3.0-canary.36 → 1.3.0-canary.38

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

@@ -46,6 +46,7 @@ const withSitecore_1 = require("../../enhancers/withSitecore");
 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;
 const __mockDependencies = (mocks) => {
@@ -75,6 +76,7 @@ exports.DesignLibrary = (0, withLoadImportMap_1.withLoadImportMap)(({ loadImport
     const { page } = (0, withSitecore_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;
     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)({
@@ -86,9 +88,11 @@ exports.DesignLibrary = (0, withLoadImportMap_1.withLoadImportMap)(({ loadImport
     const isGeneratedComponentActive = !!Component;
     if (!isDesignLibrary)
         return null;
+    if (!uid)
+        return react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, react_1.useEffect)(() => {
-        postToDesignLibrary((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid));
+        postToDesignLibrary((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, uid));
         if (!isVariantGeneration) {
             requestAnimationFrame(() => {
                 setRenderKey((k) => (k === 0 ? k + 1 : k));
@@ -100,25 +104,25 @@ exports.DesignLibrary = (0, withLoadImportMap_1.withLoadImportMap)(({ loadImport
         });
         // useEffect will cleanup event handler on re-render
         return () => unsubUpdate && unsubUpdate();
-    }, [isVariantGeneration, rendering]);
+    }, [isVariantGeneration, rendering, uid]);
     // 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;
-        postToDesignLibrary((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid));
-    }, [renderKey, rendering]);
+        postToDesignLibrary((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, uid));
+    }, [renderKey, uid]);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, react_1.useEffect)(() => {
         if (!isDesignLibrary || !isVariantGeneration)
-            return undefined;
+            return;
         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;
         (async () => {
             if (!loadImportMap) {
-                sendErrorEvent(rendering.uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
+                sendErrorEvent(uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             let importMap;
@@ -127,7 +131,7 @@ exports.DesignLibrary = (0, withLoadImportMap_1.withLoadImportMap)(({ loadImport
                 importMap = mod.default;
             }
             catch (e) {
-                sendErrorEvent(rendering.uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
+                sendErrorEvent(uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             // account for component being unmounted while resolving async import map
@@ -140,9 +144,9 @@ exports.DesignLibrary = (0, withLoadImportMap_1.withLoadImportMap)(({ loadImport
                 setComponent(() => Component);
                 setRenderKey((k) => k + 1);
             });
-            const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
+            const importMapEvent = getDesignLibraryImportMapEvent(uid, importMap);
             postToDesignLibrary(importMapEvent);
-            const propsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, propsState.fields, propsState.params);
+            const propsEvent = getDesignLibraryComponentPropsEvent(uid, propsState.fields, propsState.params);
             postToDesignLibrary(propsEvent);
         })();
         // return function that calls unsubscribe - if the component was mounted correctly
@@ -150,8 +154,8 @@ exports.DesignLibrary = (0, withLoadImportMap_1.withLoadImportMap)(({ loadImport
             cancelled = true;
             unsubscribe && unsubscribe();
         };
-    }, [isVariantGeneration, rendering]);
-    return (react_1.default.createElement("main", null, isGeneratedComponentActive ? (react_1.default.createElement(DesignLibraryErrorBoundary_1.DesignLibraryErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
+    }, [isVariantGeneration, uid]);
+    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/DesignLibraryClientEvents.js

@@ -62,6 +62,8 @@ exports.__mockDependencies = __mockDependencies;
  */
 const DesignLibraryPreviewEvents = ({ designLibraryStatus, component, }) => {
     (0, react_1.useEffect)(() => {
+        if (!(component === null || component === void 0 ? void 0 : component.uid))
+            return;
         postToDesignLibrary(getDesignLibraryStatusEvent(designLibraryStatus, component.uid));
         const unsubUpdate = addComponentUpdateHandler(component, (updated) => {
             _updateServerComponentAction({ uid: updated.uid, updatedComponent: updated });
@@ -77,12 +79,15 @@ exports.DesignLibraryPreviewEvents = DesignLibraryPreviewEvents;
  * Design Library component for rendering server components in app router application.
  * DesignLibraryVariantGenerationEvents component serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side in variant generation mode.
  * It posts messages to Design Library Studio and sets up handlers to receive updates and previews which are then passed to the server component via server function updateServerComponentAction.
+ * If the import map is not present then the import map error will be sent to Design Studio.
  * @param {DesignLibraryVariantGenerationEventsProps} props The props. {@link DesignLibraryVariantGenerationEventsProps}
  * @returns {JSX.Element} empty JSX element.
  */
 const DesignLibraryVariantGenerationEvents = ({ designLibraryStatus, component, importMap, importMapError, previewComponentData, }) => {
     (0, react_1.useEffect)(() => {
         var _a, _b;
+        if (!(component === null || component === void 0 ? void 0 : component.uid))
+            return;
         postToDesignLibrary(getDesignLibraryStatusEvent(designLibraryStatus, component.uid));
         const unsubUpdate = addComponentUpdateHandler(component, (updated) => {
             _updateServerComponentAction({

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

@@ -46,6 +46,7 @@ const editing_1 = require("@sitecore-content-sdk/core/editing");
 const codegen = __importStar(require("@sitecore-content-sdk/core/codegen"));
 const Placeholder_1 = require("../Placeholder");
 const DesignLibraryErrorBoundary_1 = require("./DesignLibraryErrorBoundary");
+const ErrorBoundary_1 = require("../ErrorBoundary");
 let { getCacheAndClean, hasCache } = globalCache;
 let { createComponentInstance, getImportMapInfo } = codegen;
 let updateComponent = editing_1.updateComponent;
@@ -95,7 +96,7 @@ exports.DesignLibraryServer = DesignLibraryServer;
  * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
  */
 const DesignLibraryServerVariantGeneration = async ({ page, rendering, loadServerImportMap, componentMap, }) => {
-    var _a;
+    var _a, _b;
     let designLibraryStatus = editing_1.DesignLibraryStatus.READY;
     let importMap;
     let importMapInfo;
@@ -117,18 +118,23 @@ const DesignLibraryServerVariantGeneration = async ({ page, rendering, loadServe
             importMapError = `Error loading import map: ${e}`;
         }
     }
-    let componentToUpdate = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
-    const componentUpdateKey = `${editing_1.COMPONENT_UPDATE_CACHE_KEY_PREFIX}${componentToUpdate.uid}`;
+    let componentToUpdate = (_b = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) === null || _a === void 0 ? void 0 : _a[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
+    if (!componentToUpdate)
+        return react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: "Rendering data is missing" });
+    if (!componentToUpdate.uid)
+        return react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
+    const uid = componentToUpdate.uid;
+    const componentUpdateKey = `${editing_1.COMPONENT_UPDATE_CACHE_KEY_PREFIX}${uid}`;
     // check if we have an update for this component in the global cache
     if (hasCache(componentUpdateKey)) {
         // we have an update, get it and clean the cache
         designLibraryStatus = editing_1.DesignLibraryStatus.RENDERED;
         const updateData = getCacheAndClean(componentUpdateKey);
         // apply the updates to the component rendering
-        if (updateData.updatedComponent) {
+        if (updateData === null || updateData === void 0 ? void 0 : updateData.updatedComponent) {
             updateComponent(componentToUpdate, updateData.updatedComponent.fields, updateData.updatedComponent.params);
         }
-        if (updateData.previewComponent && !importMapError) {
+        if ((updateData === null || updateData === void 0 ? void 0 : updateData.previewComponent) && !importMapError && importMap) {
             previewComponentData = updateData.previewComponent;
             try {
                 // use provided code and import map to create the component instance
@@ -160,9 +166,13 @@ exports.DesignLibraryServerVariantGeneration = DesignLibraryServerVariantGenerat
  * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
  */
 const DesignLibraryServerPreview = async ({ page, rendering, componentMap, }) => {
-    var _a;
+    var _a, _b;
     let designLibraryStatus = editing_1.DesignLibraryStatus.READY;
-    let componentToUpdate = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
+    let componentToUpdate = (_b = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) === null || _a === void 0 ? void 0 : _a[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
+    if (!componentToUpdate)
+        return react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: "Rendering data is missing" });
+    if (!componentToUpdate.uid)
+        return react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
     const componentUpdateKey = `${editing_1.COMPONENT_UPDATE_CACHE_KEY_PREFIX}${componentToUpdate.uid}`;
     // check if we have an update for this component in the global cache
     if (hasCache(componentUpdateKey)) {
@@ -170,7 +180,7 @@ const DesignLibraryServerPreview = async ({ page, rendering, componentMap, }) =>
         designLibraryStatus = editing_1.DesignLibraryStatus.RENDERED;
         const updateData = getCacheAndClean(componentUpdateKey);
         // apply the updates to the component rendering
-        if (updateData.updatedComponent) {
+        if (updateData === null || updateData === void 0 ? void 0 : updateData.updatedComponent) {
             updateComponent(componentToUpdate, updateData.updatedComponent.fields, updateData.updatedComponent.params);
         }
     }

package/dist/cjs/components/ErrorBoundary.js

@@ -34,8 +34,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");
+/**
+ * Simple error component applying basic error styling.
+ * @param {object} props - Either with `message` (string) or with `children` (ReactNode), but not both.
+ */
+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 {
     constructor(props) {
         super(props);
@@ -68,7 +77,7 @@ class ErrorBoundary extends react_1.default.Component {
             else {
                 if (this.showErrorDetails()) {
                     return (react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" },
+                        react_1.default.createElement(exports.ErrorComponent, null,
                             "A rendering error occurred in component",
                             ' ',
                             react_1.default.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
@@ -78,7 +87,7 @@ class ErrorBoundary extends react_1.default.Component {
                 }
                 else {
                     return (react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" }, this.defaultErrorMessage)));
+                        react_1.default.createElement(exports.ErrorComponent, { message: this.defaultErrorMessage })));
                 }
             }
         }

package/dist/cjs/components/FEaaS/BYOCWrapper.js

@@ -88,7 +88,8 @@ class BYOCComponent extends react_1.default.Component {
             const noNameProps = {
                 errorOverride: 'BYOC: The ComponentName for this rendering is missing',
             };
-            return props.missingComponentComponent ? (react_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, noNameProps)));
+            const MissingComp = this.props.missingComponentComponent;
+            return MissingComp ? react_1.default.createElement(MissingComp, Object.assign({}, noNameProps)) : react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, noNameProps));
         }
         const unRegisteredComponentProps = {
             rendering: {

package/dist/cjs/components/FEaaS/FEaaSWrapper.js

@@ -47,7 +47,7 @@ const utils_1 = require("../../utils");
  * @public
  */
 const FEaaSComponent = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
     if (!props.template &&
         (!props.params ||
@@ -65,7 +65,7 @@ const FEaaSComponent = (props) => {
     // we pass all the props as a workaround to avoid hydration error, until we convert all Content SDK components to server side
     // this also allows component to fall back to full client-side rendering when template or src is empty
     // FEAAS should not fetch anything, since Content SDK does the fetching - so we pass empty array into fetch param
-    return (react_1.default.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId, version: (_e = props.params) === null || _e === void 0 ? void 0 : _e.ComponentVersion, component: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentId, instance: (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentInstanceId, revision: computedRevision, fetch: [] }));
+    return (react_1.default.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_e = (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId) !== null && _e !== void 0 ? _e : '', version: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentVersion, component: (_h = (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentId) !== null && _h !== void 0 ? _h : '', instance: (_j = props.params) === null || _j === void 0 ? void 0 : _j.ComponentInstanceId, revision: computedRevision, fetch: [] }));
 };
 exports.FEaaSComponent = FEaaSComponent;
 /**

package/dist/cjs/components/FEaaS/feaas-utils.js

@@ -120,8 +120,9 @@ async function fetchData(dataOptions) {
  * @returns component endpoint URL
  */
 const composeComponentEndpoint = (params, revisionFallback) => {
+    var _a;
     const revision = params.ComponentRevision || revisionFallback;
-    const hostname = params.ComponentHostName.startsWith('https://')
+    const hostname = ((_a = params.ComponentHostName) === null || _a === void 0 ? void 0 : _a.startsWith('https://'))
         ? params.ComponentHostName
         : `https://${params.ComponentHostName}`;
     return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;

package/dist/cjs/components/Form.js

@@ -38,6 +38,7 @@ exports.Form = exports.mockFormModule = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("@sitecore-content-sdk/core");
 const withSitecore_1 = require("../enhancers/withSitecore");
+const ErrorBoundary_1 = require("./ErrorBoundary");
 let { executeScriptElements, loadForm, subscribeToFormSubmitEvent } = core_1.form;
 /**
  * Mock function to replace the form module functions for `testing` purposes.
@@ -82,6 +83,8 @@ const Form = ({ params, rendering }) => {
             });
         }
         else {
+            if (!formRef.current)
+                return;
             // If we are in editing mode, we don't want to send any events
             if (!isEditing) {
                 subscribeToFormSubmitEvent(formRef.current, rendering.uid);
@@ -90,7 +93,7 @@ const Form = ({ params, rendering }) => {
         }
     }, [content]);
     if (isEditing && error) {
-        return (react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" }, "There was a problem loading this section"));
+        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 }));
 };

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

@@ -1,5 +1,38 @@
 "use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -11,7 +44,7 @@ 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"));
+const ErrorBoundary_1 = __importStar(require("../ErrorBoundary"));
 class PlaceholderComponent extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -42,10 +75,7 @@ class PlaceholderComponent extends react_1.default.Component {
             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,
-                "."));
+            return (react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: `A rendering error occurred: ${this.state.error.message}.` }));
         }
         const renderingData = childProps.rendering;
         const placeholderRenderings = (0, placeholder_utils_1.getPlaceholderRenderings)(renderingData, this.props.name, this.props.page.mode.isEditing);

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

@@ -19,7 +19,8 @@ const editing_1 = require("@sitecore-content-sdk/core/editing");
  * @returns {JSX.Element} A React fragment containing open and close code blocks surrounding the children elements.
  */
 const PlaceholderMetadata = ({ rendering, placeholderName, children, componentRuntime, }) => {
-    const getCodeBlockAttributes = (kind, id, placeholderName) => {
+    const getCodeBlockAttributes = ({ kind, id, placeholderName, }) => {
+        var _a;
         const chrometype = placeholderName ? 'placeholder' : 'rendering';
         const attributes = {
             type: 'text/sitecore',
@@ -30,7 +31,7 @@ const PlaceholderMetadata = ({ rendering, placeholderName, children, componentRu
         if (kind === editing_1.MetadataKind.Open) {
             if (chrometype === 'placeholder' && placeholderName) {
                 let phId = '';
-                for (const placeholder of Object.keys(rendering.placeholders)) {
+                for (const placeholder of Object.keys((_a = rendering.placeholders) !== null && _a !== void 0 ? _a : {})) {
                     if (placeholderName === placeholder) {
                         phId = id
                             ? `${placeholderName}_${id}`
@@ -59,10 +60,9 @@ const PlaceholderMetadata = ({ rendering, placeholderName, children, componentRu
         }
         return attributes;
     };
-    const renderComponent = (uid, placeholderName) => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Open, uid, placeholderName))),
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes({ kind: editing_1.MetadataKind.Open, id: rendering.uid, placeholderName }))),
         children,
-        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes(editing_1.MetadataKind.Close, uid, placeholderName)))));
-    return react_1.default.createElement(react_1.default.Fragment, null, renderComponent(rendering.uid, placeholderName));
+        react_1.default.createElement("code", Object.assign({}, getCodeBlockAttributes({ kind: editing_1.MetadataKind.Close, placeholderName })))));
 };
 exports.PlaceholderMetadata = PlaceholderMetadata;

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

@@ -39,17 +39,17 @@ const getPlaceholderRenderings = (rendering, name, isEditing) => {
      * For Metadata EditMode, we need to keep the raw placeholder name in place.
      */
     if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
-        Object.keys(rendering.placeholders).forEach((placeholder) => {
-            const patternPlaceholder = (0, layout_1.isDynamicPlaceholder)(placeholder)
-                ? (0, layout_1.getDynamicPlaceholderPattern)(placeholder)
+        Object.entries(rendering.placeholders).forEach(([key, value]) => {
+            const patternPlaceholder = (0, layout_1.isDynamicPlaceholder)(key)
+                ? (0, layout_1.getDynamicPlaceholderPattern)(key)
                 : null;
             if (patternPlaceholder && patternPlaceholder.test(phName)) {
                 if (isEditing) {
-                    phName = placeholder;
+                    phName = key;
                 }
                 else {
-                    rendering.placeholders[phName] = rendering.placeholders[placeholder];
-                    delete rendering.placeholders[placeholder];
+                    rendering.placeholders[phName] = value;
+                    delete rendering.placeholders[key];
                 }
             }
         });
@@ -74,7 +74,7 @@ exports.getPlaceholderRenderings = getPlaceholderRenderings;
  */
 const getSXAParams = (rendering) => {
     if (!rendering.params)
-        return {};
+        return { styles: '' };
     const { GridParameters, Styles } = rendering.params;
     return ((GridParameters || Styles) && {
         styles: `${GridParameters || ''} ${Styles || ''}`,

package/dist/cjs/enhancers/withAppPlaceholder.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const AppPlaceholder_1 = require("../components/Placeholder/AppPlaceholder");
 const withAppPlaceholder = (Component) => {
     return (props) => {
-        const placeholders = props.rendering.placeholders;
+        const placeholders = props.rendering.placeholders || {};
         const phProps = {};
         for (const placeholder of Object.keys(placeholders)) {
             phProps[placeholder] = (react_1.default.createElement(AppPlaceholder_1.AppPlaceholder, { name: placeholder, rendering: props.rendering, componentMap: props.componentMap, page: props.page }));

package/dist/cjs/enhancers/withPlaceholder.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const withComponentMap_1 = require("./withComponentMap");
 const withSitecore_1 = require("./withSitecore");
 const Placeholder_1 = require("../components/Placeholder");
+const ErrorBoundary_1 = require("../components/ErrorBoundary");
 /**
  * HOC to provide client-side placeholder functionality to a component.
  * @param {WithPlaceholderSpec} placeholders
@@ -30,10 +31,7 @@ function withPlaceholder(placeholders, options) {
                     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,
-                        "."));
+                    return (react_1.default.createElement(ErrorBoundary_1.ErrorComponent, { message: `A rendering error occurred: ${this.state.error.message}.` }));
                 }
                 const renderingData = options && options.resolvePlaceholderDataFromProps
                     ? options.resolvePlaceholderDataFromProps(childProps)

package/dist/esm/components/DesignLibrary/DesignLibrary.js

@@ -10,6 +10,7 @@ import { useSitecore } from '../../enhancers/withSitecore';
 import { Placeholder, PlaceholderMetadata } from '../Placeholder';
 import { DesignLibraryErrorBoundary } from './DesignLibraryErrorBoundary';
 import { withLoadImportMap } from '../../enhancers/withLoadImportMap';
+import { ErrorComponent } from '../ErrorBoundary';
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, sendErrorEvent, } = codegen;
 let { postToDesignLibrary } = editing;
 export const __mockDependencies = (mocks) => {
@@ -38,6 +39,7 @@ export const DesignLibrary = withLoadImportMap(({ loadImportMap }) => {
     const { page } = useSitecore();
     const route = page.layout.sitecore.route;
     const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
+    const uid = rendering === null || rendering === void 0 ? void 0 : rendering.uid;
     const { isDesignLibrary } = page.mode;
     const isVariantGeneration = (_b = page.mode.designLibrary) === null || _b === void 0 ? void 0 : _b.isVariantGeneration;
     const [propsState, setPropsState] = useState({
@@ -49,9 +51,11 @@ export const DesignLibrary = withLoadImportMap(({ loadImportMap }) => {
     const isGeneratedComponentActive = !!Component;
     if (!isDesignLibrary)
         return null;
+    if (!uid)
+        return React.createElement(ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rendering.uid));
+        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, uid));
         if (!isVariantGeneration) {
             requestAnimationFrame(() => {
                 setRenderKey((k) => (k === 0 ? k + 1 : k));
@@ -63,25 +67,25 @@ export const DesignLibrary = withLoadImportMap(({ loadImportMap }) => {
         });
         // useEffect will cleanup event handler on re-render
         return () => unsubUpdate && unsubUpdate();
-    }, [isVariantGeneration, rendering]);
+    }, [isVariantGeneration, rendering, uid]);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         // Send a rendered event only as effect of a component update command
         if (renderKey === 0)
             return;
-        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rendering.uid));
-    }, [renderKey, rendering]);
+        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, uid));
+    }, [renderKey, uid]);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
         if (!isDesignLibrary || !isVariantGeneration)
-            return undefined;
+            return;
         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;
         (async () => {
             if (!loadImportMap) {
-                sendErrorEvent(rendering.uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
+                sendErrorEvent(uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             let importMap;
@@ -90,7 +94,7 @@ export const DesignLibrary = withLoadImportMap(({ loadImportMap }) => {
                 importMap = mod.default;
             }
             catch (e) {
-                sendErrorEvent(rendering.uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
+                sendErrorEvent(uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             // account for component being unmounted while resolving async import map
@@ -103,9 +107,9 @@ export const DesignLibrary = withLoadImportMap(({ loadImportMap }) => {
                 setComponent(() => Component);
                 setRenderKey((k) => k + 1);
             });
-            const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
+            const importMapEvent = getDesignLibraryImportMapEvent(uid, importMap);
             postToDesignLibrary(importMapEvent);
-            const propsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, propsState.fields, propsState.params);
+            const propsEvent = getDesignLibraryComponentPropsEvent(uid, propsState.fields, propsState.params);
             postToDesignLibrary(propsEvent);
         })();
         // return function that calls unsubscribe - if the component was mounted correctly
@@ -113,8 +117,8 @@ export const DesignLibrary = withLoadImportMap(({ loadImportMap }) => {
             cancelled = true;
             unsubscribe && unsubscribe();
         };
-    }, [isVariantGeneration, rendering]);
-    return (React.createElement("main", null, isGeneratedComponentActive ? (React.createElement(DesignLibraryErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
+    }, [isVariantGeneration, uid]);
+    return (React.createElement("main", null, isGeneratedComponentActive ? (React.createElement(DesignLibraryErrorBoundary, { uid: uid, renderKey: renderKey },
         React.createElement(PlaceholderMetadata, { rendering: rendering },
             React.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 });

package/dist/esm/components/DesignLibrary/DesignLibraryClientEvents.js

@@ -25,6 +25,8 @@ export const __mockDependencies = (mocks) => {
  */
 export const DesignLibraryPreviewEvents = ({ designLibraryStatus, component, }) => {
     useEffect(() => {
+        if (!(component === null || component === void 0 ? void 0 : component.uid))
+            return;
         postToDesignLibrary(getDesignLibraryStatusEvent(designLibraryStatus, component.uid));
         const unsubUpdate = addComponentUpdateHandler(component, (updated) => {
             _updateServerComponentAction({ uid: updated.uid, updatedComponent: updated });
@@ -39,12 +41,15 @@ export const DesignLibraryPreviewEvents = ({ designLibraryStatus, component, })
  * Design Library component for rendering server components in app router application.
  * DesignLibraryVariantGenerationEvents component serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side in variant generation mode.
  * It posts messages to Design Library Studio and sets up handlers to receive updates and previews which are then passed to the server component via server function updateServerComponentAction.
+ * If the import map is not present then the import map error will be sent to Design Studio.
  * @param {DesignLibraryVariantGenerationEventsProps} props The props. {@link DesignLibraryVariantGenerationEventsProps}
  * @returns {JSX.Element} empty JSX element.
  */
 export const DesignLibraryVariantGenerationEvents = ({ designLibraryStatus, component, importMap, importMapError, previewComponentData, }) => {
     useEffect(() => {
         var _a, _b;
+        if (!(component === null || component === void 0 ? void 0 : component.uid))
+            return;
         postToDesignLibrary(getDesignLibraryStatusEvent(designLibraryStatus, component.uid));
         const unsubUpdate = addComponentUpdateHandler(component, (updated) => {
             _updateServerComponentAction({