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

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

@@ -0,0 +1,193 @@
+"use strict";
+'use server';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignLibraryServerPreview = exports.DesignLibraryServerVariantGeneration = exports.DesignLibraryServer = exports.__mockDependencies = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const DesignLibraryClientEvents_1 = require("./DesignLibraryClientEvents");
+const globalCache = __importStar(require("@sitecore-content-sdk/core/utils"));
+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;
+const __mockDependencies = async (mocks) => {
+    getCacheAndClean = mocks.getCacheAndClean;
+    hasCache = mocks.hasCache;
+    createComponentInstance = mocks.createComponentInstance;
+    if (mocks.updateComponent) {
+        updateComponent = mocks.updateComponent;
+    }
+    if (mocks.getImportMapInfo) {
+        getImportMapInfo = mocks.getImportMapInfo;
+    }
+};
+exports.__mockDependencies = __mockDependencies;
+/**
+ * Design Library component for rendering server components in app router application.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * when generation is enabled (`page.mode.designLibrary.isVariantGeneration === true`),
+ * wires the **variant generation** handshake so the parent (Design Library) can send
+ * generated code to preview and iterate on.
+ * Also renders the DesignLibraryClientEvents component which serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side.
+ * @param {DesignLibraryServerProps} props The props. {@link DesignLibraryServerProps}
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
+ */
+const DesignLibraryServer = async ({ page, componentMap, rendering, loadServerImportMap, }) => {
+    var _a;
+    if (!page.mode.isDesignLibrary) {
+        return null;
+    }
+    const isVariantGeneration = (_a = page.mode.designLibrary) === null || _a === void 0 ? void 0 : _a.isVariantGeneration;
+    if (isVariantGeneration) {
+        return (react_1.default.createElement(exports.DesignLibraryServerVariantGeneration, { page: page, rendering: rendering, loadServerImportMap: loadServerImportMap, componentMap: componentMap }));
+    }
+    return (react_1.default.createElement(exports.DesignLibraryServerPreview, { page: page, rendering: rendering, componentMap: componentMap }));
+};
+exports.DesignLibraryServer = DesignLibraryServer;
+/**
+ * Design Library component for rendering server components in app router application in variant generation mode.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes on first render and,
+ * wires the **variant generation** handshake so the parent (Design Library) can send
+ * generated code to preview and iterate on.
+ * Also renders the DesignLibraryVariantGenerationEvents component which serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side.
+ * @param {DesignLibraryServerVariantGenerationProps} props The props. {@link DesignLibraryServerVariantGenerationProps}
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
+ */
+const DesignLibraryServerVariantGeneration = async ({ page, rendering, loadServerImportMap, componentMap, }) => {
+    var _a, _b;
+    let designLibraryStatus = editing_1.DesignLibraryStatus.READY;
+    let importMap;
+    let importMapInfo;
+    let Component;
+    let importMapError;
+    let previewComponentData;
+    // load importmap and importmap payload to pass to FE
+    // if not provided, or errors during load set error to pass to FE
+    if (!loadServerImportMap) {
+        importMapError = 'No loadImportMap provided';
+    }
+    else {
+        try {
+            const mod = await loadServerImportMap();
+            importMap = mod.default;
+            importMapInfo = getImportMapInfo(importMap);
+        }
+        catch (e) {
+            importMapError = `Error loading import map: ${e}`;
+        }
+    }
+    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 === null || updateData === void 0 ? void 0 : updateData.updatedComponent) {
+            updateComponent(componentToUpdate, updateData.updatedComponent.fields, updateData.updatedComponent.params);
+        }
+        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
+                Component = createComponentInstance(importMap, updateData.previewComponent);
+            }
+            catch (error) {
+                // error during component initialization - send error to client
+                importMapError = error.toString();
+            }
+        }
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        Component ? (react_1.default.createElement(DesignLibraryErrorBoundary_1.DesignLibraryErrorBoundary, { uid: componentToUpdate.uid },
+            react_1.default.createElement(Placeholder_1.PlaceholderMetadata, { rendering: componentToUpdate },
+                react_1.default.createElement(Component, { fields: componentToUpdate.fields, params: componentToUpdate.params, key: Date.now() })))) : (react_1.default.createElement(Placeholder_1.AppPlaceholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap, key: Date.now() })),
+        react_1.default.createElement(DesignLibraryClientEvents_1.DesignLibraryVariantGenerationEvents, { designLibraryStatus: designLibraryStatus, importMap: importMapInfo, 
+            // pass a new object since we have mutated the original which leads to old reference passed to the client
+            component: Object.assign({}, componentToUpdate), importMapError: importMapError, previewComponentData: previewComponentData })));
+};
+exports.DesignLibraryServerVariantGeneration = DesignLibraryServerVariantGeneration;
+/**
+ * Design Library component for rendering server components in app router application when variant generation is not enabled.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * wires the **component update** handshake so the parent (Design Library) can send
+ * updated component props.
+ * Also renders the DesignLibraryPreviewEvents component which serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side.
+ * @param {DesignLibraryServerPreviewProps} props The props. {@link DesignLibraryServerPreviewProps}
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
+ */
+const DesignLibraryServerPreview = async ({ page, rendering, componentMap, }) => {
+    var _a, _b;
+    let designLibraryStatus = editing_1.DesignLibraryStatus.READY;
+    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)) {
+        // 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 === null || updateData === void 0 ? void 0 : updateData.updatedComponent) {
+            updateComponent(componentToUpdate, updateData.updatedComponent.fields, updateData.updatedComponent.params);
+        }
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Placeholder_1.AppPlaceholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap }),
+        react_1.default.createElement(DesignLibraryClientEvents_1.DesignLibraryPreviewEvents, { designLibraryStatus: designLibraryStatus, 
+            // pass a new object since we have mutated the original which leads to old reference passed to the client
+            component: Object.assign({}, componentToUpdate) })));
+};
+exports.DesignLibraryServerPreview = DesignLibraryServerPreview;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignLibraryApp = 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; } });

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/EditingScripts.js

@@ -1,43 +1,44 @@
-"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.EditingScripts = void 0;
-const react_1 = __importDefault(require("react"));
-const withSitecore_1 = require("../enhancers/withSitecore");
-const editing_1 = require("@sitecore-content-sdk/core/editing");
-const editing_2 = require("@sitecore-content-sdk/core/editing");
-/**
- * Renders client scripts and data for editing/preview mode for Pages.
- * Renders script required for the Design Library (when mode.isDesignLibrary is true).
- * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
- */
-const EditingScripts = () => {
-    var _a;
-    const { page: { mode, layout }, api, } = (0, withSitecore_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) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
-    }
-    // In case of Design Library - render only the script for Design Library
-    if (mode.isDesignLibrary) {
-        // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
-        const now = new Date();
-        const hour = String(now.getUTCHours()).padStart(2, '0');
-        const day = String(now.getUTCDate()).padStart(2, '0');
-        const month = String(now.getUTCMonth() + 1).padStart(2, '0');
-        const year = String(now.getUTCFullYear());
-        const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
-        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
-    }
-    const contentSdkClientData = Object.assign(Object.assign({}, clientData), (0, editing_1.getContentSdkPagesClientData)());
-    return (react_1.default.createElement(react_1.default.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
-        clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),
-        Object.keys(contentSdkClientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(contentSdkClientData[id]) } })))));
-};
-exports.EditingScripts = EditingScripts;
+"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.EditingScripts = void 0;
+const react_1 = __importDefault(require("react"));
+const withSitecore_1 = require("../enhancers/withSitecore");
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+const editing_2 = require("@sitecore-content-sdk/core/editing");
+/**
+ * Renders client scripts and data for editing/preview mode for Pages.
+ * Renders script required for the Design Library (when mode.isDesignLibrary is true).
+ * @returns A JSX element containing the editing scripts or an empty fragment if not in editing/preview mode.
+ * @public
+ */
+const EditingScripts = () => {
+    var _a;
+    const { page: { mode, layout }, api, } = (0, withSitecore_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) {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+    // In case of Design Library - render only the script for Design Library
+    if (mode.isDesignLibrary) {
+        // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
+        const now = new Date();
+        const hour = String(now.getUTCHours()).padStart(2, '0');
+        const day = String(now.getUTCDate()).padStart(2, '0');
+        const month = String(now.getUTCMonth() + 1).padStart(2, '0');
+        const year = String(now.getUTCFullYear());
+        const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
+        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
+    }
+    const contentSdkClientData = Object.assign(Object.assign({}, clientData), (0, editing_1.getContentSdkPagesClientData)());
+    return (react_1.default.createElement(react_1.default.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
+        clientScripts.map((src, index) => (react_1.default.createElement("script", { src: src, key: index }))),
+        Object.keys(contentSdkClientData).map((id) => (react_1.default.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(contentSdkClientData[id]) } })))));
+};
+exports.EditingScripts = EditingScripts;

package/dist/cjs/components/ErrorBoundary.js

@@ -1,92 +1,101 @@
-"use strict";
-'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const withSitecore_1 = require("../enhancers/withSitecore");
-class ErrorBoundary extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this.defaultErrorMessage = 'There was a problem loading this section.';
-        this.defaultLoadingMessage = 'Loading component...';
-        this.state = { error: null };
-    }
-    static getDerivedStateFromError(error) {
-        return { error: error };
-    }
-    componentDidCatch(error, errorInfo) {
-        var _a, _b;
-        if (this.showErrorDetails()) {
-            console.error(`An error occurred in component ${(_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName} (${(_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.uid}): `);
-        }
-        console.error({ error, errorInfo });
-    }
-    isInDevMode() {
-        return process.env.NODE_ENV === 'development';
-    }
-    showErrorDetails() {
-        return this.isInDevMode() || this.props.page.mode.isEditing || this.props.page.mode.isPreview;
-    }
-    render() {
-        var _a;
-        if (this.state.error) {
-            if (this.props.errorComponent) {
-                return react_1.default.createElement(this.props.errorComponent, { error: this.state.error });
-            }
-            else {
-                if (this.showErrorDetails()) {
-                    return (react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" },
-                            "A rendering error occurred in component",
-                            ' ',
-                            react_1.default.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
-                            react_1.default.createElement("br", null),
-                            "Error: ",
-                            react_1.default.createElement("em", null, this.state.error.message || JSON.stringify(this.state.error)))));
-                }
-                else {
-                    return (react_1.default.createElement("div", null,
-                        react_1.default.createElement("div", { className: "sc-content-sdk-placeholder-error" }, this.defaultErrorMessage)));
-                }
-            }
-        }
-        // do not apply suspense when suspense is disabled or when on already dynamic components
-        if (this.props.disableSuspense || 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);
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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);
+        this.defaultErrorMessage = 'There was a problem loading this section.';
+        this.defaultLoadingMessage = 'Loading component...';
+        this.state = { error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { error: error };
+    }
+    componentDidCatch(error, errorInfo) {
+        var _a, _b;
+        if (this.showErrorDetails()) {
+            console.error(`An error occurred in component ${(_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName} (${(_b = this.props.rendering) === null || _b === void 0 ? void 0 : _b.uid}): `);
+        }
+        console.error({ error, errorInfo });
+    }
+    isInDevMode() {
+        return process.env.NODE_ENV === 'development';
+    }
+    showErrorDetails() {
+        return this.isInDevMode() || this.props.page.mode.isEditing || this.props.page.mode.isPreview;
+    }
+    render() {
+        var _a;
+        if (this.state.error) {
+            if (this.props.errorComponent) {
+                return react_1.default.createElement(this.props.errorComponent, { error: this.state.error });
+            }
+            else {
+                if (this.showErrorDetails()) {
+                    return (react_1.default.createElement("div", null,
+                        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),
+                            react_1.default.createElement("br", null),
+                            "Error: ",
+                            react_1.default.createElement("em", null, this.state.error.message || JSON.stringify(this.state.error)))));
+                }
+                else {
+                    return (react_1.default.createElement("div", null,
+                        react_1.default.createElement(exports.ErrorComponent, { message: this.defaultErrorMessage })));
+                }
+            }
+        }
+        // do not apply suspense when suspense is disabled or when on already dynamic components
+        if (this.props.disableSuspense || 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);

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

@@ -1,28 +1,25 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BYOCServerWrapper = void 0;
-const react_1 = __importDefault(require("react"));
-const feaas_utils_1 = require("./feaas-utils");
-const BYOCWrapper_1 = require("./BYOCWrapper");
-const models_1 = require("../Placeholder/models");
-const BYOCServerWrapper = (props) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a;
-    const params = ((_a = props.rendering) === null || _a === void 0 ? void 0 : _a.params) || {};
-    // only pass serializable props to the client BYOC component
-    const serializableProps = Object.fromEntries(Object.entries(props).filter(([key]) => !models_1.nonSerializedPlaceholderProps.includes(key)));
-    const finalProps = Object.assign(Object.assign({}, (yield (0, feaas_utils_1.fetchBYOCComponentServerProps)(params))), serializableProps);
-    return react_1.default.createElement(BYOCWrapper_1.BYOCWrapper, Object.assign({}, finalProps));
-});
-exports.BYOCServerWrapper = BYOCServerWrapper;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BYOCServerWrapper = void 0;
+const react_1 = __importDefault(require("react"));
+const feaas_utils_1 = require("./feaas-utils");
+const BYOCWrapper_1 = require("./BYOCWrapper");
+const models_1 = require("../Placeholder/models");
+/**
+ * Server component for BYOC. Retrieves server props and renders client BYOCWrapper.
+ * @param {BYOCServerWrapperProps} props incoming props
+ * @returns rendered BYOCWrapper component
+ * @public
+ */
+const BYOCServerWrapper = async (props) => {
+    var _a;
+    const params = ((_a = props.rendering) === null || _a === void 0 ? void 0 : _a.params) || {};
+    // only pass serializable props to the client BYOC component
+    const serializableProps = Object.fromEntries(Object.entries(props).filter(([key]) => !models_1.nonSerializedPlaceholderProps.includes(key)));
+    const finalProps = Object.assign(Object.assign({}, (await (0, feaas_utils_1.fetchBYOCComponentServerProps)(params))), serializableProps);
+    return react_1.default.createElement(BYOCWrapper_1.BYOCWrapper, Object.assign({}, finalProps));
+};
+exports.BYOCServerWrapper = BYOCServerWrapper;