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

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

@@ -0,0 +1,150 @@
+'use server';
+import React from 'react';
+import { EDITING_COMPONENT_PLACEHOLDER } from '@sitecore-content-sdk/core/layout';
+import { DesignLibraryPreviewEvents, DesignLibraryVariantGenerationEvents, } from './DesignLibraryClientEvents';
+import * as globalCache from '@sitecore-content-sdk/core/utils';
+import { DesignLibraryStatus, COMPONENT_UPDATE_CACHE_KEY_PREFIX, updateComponent as updateComponentOriginal, } from '@sitecore-content-sdk/core/editing';
+import * as codegen from '@sitecore-content-sdk/core/codegen';
+import { AppPlaceholder, PlaceholderMetadata } from '../Placeholder';
+import { DesignLibraryErrorBoundary } from './DesignLibraryErrorBoundary';
+import { ErrorComponent } from '../ErrorBoundary';
+let { getCacheAndClean, hasCache } = globalCache;
+let { createComponentInstance, getImportMapInfo } = codegen;
+let updateComponent = updateComponentOriginal;
+export 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;
+    }
+};
+/**
+ * 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.
+ */
+export 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.createElement(DesignLibraryServerVariantGeneration, { page: page, rendering: rendering, loadServerImportMap: loadServerImportMap, componentMap: componentMap }));
+    }
+    return (React.createElement(DesignLibraryServerPreview, { page: page, rendering: rendering, componentMap: componentMap }));
+};
+/**
+ * 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.
+ */
+export const DesignLibraryServerVariantGeneration = async ({ page, rendering, loadServerImportMap, componentMap, }) => {
+    var _a, _b;
+    let designLibraryStatus = 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[EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
+    if (!componentToUpdate)
+        return React.createElement(ErrorComponent, { message: "Rendering data is missing" });
+    if (!componentToUpdate.uid)
+        return React.createElement(ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
+    const uid = componentToUpdate.uid;
+    const componentUpdateKey = `${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 = 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.createElement(React.Fragment, null,
+        Component ? (React.createElement(DesignLibraryErrorBoundary, { uid: componentToUpdate.uid },
+            React.createElement(PlaceholderMetadata, { rendering: componentToUpdate },
+                React.createElement(Component, { fields: componentToUpdate.fields, params: componentToUpdate.params, key: Date.now() })))) : (React.createElement(AppPlaceholder, { name: EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap, key: Date.now() })),
+        React.createElement(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 })));
+};
+/**
+ * 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.
+ */
+export const DesignLibraryServerPreview = async ({ page, rendering, componentMap, }) => {
+    var _a, _b;
+    let designLibraryStatus = DesignLibraryStatus.READY;
+    let componentToUpdate = (_b = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) === null || _a === void 0 ? void 0 : _a[EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
+    if (!componentToUpdate)
+        return React.createElement(ErrorComponent, { message: "Rendering data is missing" });
+    if (!componentToUpdate.uid)
+        return React.createElement(ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
+    const componentUpdateKey = `${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 = 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.createElement(React.Fragment, null,
+        React.createElement(AppPlaceholder, { name: EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap }),
+        React.createElement(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) })));
+};

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

@@ -0,0 +1,2 @@
+export { DesignLibrary } from './DesignLibrary';
+export { DesignLibraryApp } from './DesignLibraryApp';

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/EditingScripts.js

@@ -1,36 +1,37 @@
-'use client';
-import React from 'react';
-import { useSitecore } from '../enhancers/withSitecore';
-import { getContentSdkPagesClientData } from '@sitecore-content-sdk/core/editing';
-import { getDesignLibraryScriptLink } from '@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.
- */
-export const EditingScripts = () => {
-    var _a;
-    const { page: { mode, layout }, api, } = 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.createElement(React.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 = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
-        return (React.createElement(React.Fragment, null,
-            React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
-    }
-    const contentSdkClientData = Object.assign(Object.assign({}, clientData), getContentSdkPagesClientData());
-    return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
-        clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
-        Object.keys(contentSdkClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(contentSdkClientData[id]) } })))));
-};
+'use client';
+import React from 'react';
+import { useSitecore } from '../enhancers/withSitecore';
+import { getContentSdkPagesClientData } from '@sitecore-content-sdk/core/editing';
+import { getDesignLibraryScriptLink } from '@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
+ */
+export const EditingScripts = () => {
+    var _a;
+    const { page: { mode, layout }, api, } = 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.createElement(React.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 = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
+    }
+    const contentSdkClientData = Object.assign(Object.assign({}, clientData), getContentSdkPagesClientData());
+    return (React.createElement(React.Fragment, null, clientScripts === null || clientScripts === void 0 ? void 0 :
+        clientScripts.map((src, index) => (React.createElement("script", { src: src, key: index }))),
+        Object.keys(contentSdkClientData).map((id) => (React.createElement("script", { key: id, id: id, type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(contentSdkClientData[id]) } })))));
+};

package/dist/esm/components/ErrorBoundary.js

@@ -1,57 +1,64 @@
-'use client';
-import React, { Suspense } from 'react';
-import { withSitecore } from '../enhancers/withSitecore';
-class ErrorBoundary extends React.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.createElement(this.props.errorComponent, { error: this.state.error });
-            }
-            else {
-                if (this.showErrorDetails()) {
-                    return (React.createElement("div", null,
-                        React.createElement("div", { className: "sc-content-sdk-placeholder-error" },
-                            "A rendering error occurred in component",
-                            ' ',
-                            React.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
-                            React.createElement("br", null),
-                            "Error: ",
-                            React.createElement("em", null, this.state.error.message || JSON.stringify(this.state.error)))));
-                }
-                else {
-                    return (React.createElement("div", null,
-                        React.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.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
-    }
-}
-export default withSitecore()(ErrorBoundary);
+'use client';
+import React, { Suspense } from 'react';
+import { withSitecore } from '../enhancers/withSitecore';
+/**
+ * Simple error component applying basic error styling.
+ * @param {object} props - Either with `message` (string) or with `children` (ReactNode), but not both.
+ */
+export const ErrorComponent = (props) => {
+    return (React.createElement("div", { className: "sc-content-sdk-placeholder-error" }, props.message ? props.message : props.children));
+};
+class ErrorBoundary extends React.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.createElement(this.props.errorComponent, { error: this.state.error });
+            }
+            else {
+                if (this.showErrorDetails()) {
+                    return (React.createElement("div", null,
+                        React.createElement(ErrorComponent, null,
+                            "A rendering error occurred in component",
+                            ' ',
+                            React.createElement("em", null, (_a = this.props.rendering) === null || _a === void 0 ? void 0 : _a.componentName),
+                            React.createElement("br", null),
+                            "Error: ",
+                            React.createElement("em", null, this.state.error.message || JSON.stringify(this.state.error)))));
+                }
+                else {
+                    return (React.createElement("div", null,
+                        React.createElement(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.createElement(Suspense, { fallback: React.createElement("h4", null, this.props.componentLoadingMessage || this.defaultLoadingMessage) }, this.props.children));
+    }
+}
+export default withSitecore()(ErrorBoundary);

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

@@ -1,21 +1,18 @@
-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());
-    });
-};
-import React from 'react';
-import { fetchBYOCComponentServerProps } from './feaas-utils';
-import { BYOCWrapper } from './BYOCWrapper';
-import { nonSerializedPlaceholderProps } from '../Placeholder/models';
-export 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]) => !nonSerializedPlaceholderProps.includes(key)));
-    const finalProps = Object.assign(Object.assign({}, (yield fetchBYOCComponentServerProps(params))), serializableProps);
-    return React.createElement(BYOCWrapper, Object.assign({}, finalProps));
-});
+import React from 'react';
+import { fetchBYOCComponentServerProps } from './feaas-utils';
+import { BYOCWrapper } from './BYOCWrapper';
+import { nonSerializedPlaceholderProps } from '../Placeholder/models';
+/**
+ * Server component for BYOC. Retrieves server props and renders client BYOCWrapper.
+ * @param {BYOCServerWrapperProps} props incoming props
+ * @returns rendered BYOCWrapper component
+ * @public
+ */
+export 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]) => !nonSerializedPlaceholderProps.includes(key)));
+    const finalProps = Object.assign(Object.assign({}, (await fetchBYOCComponentServerProps(params))), serializableProps);
+    return React.createElement(BYOCWrapper, Object.assign({}, finalProps));
+};

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

@@ -1,81 +1,91 @@
-'use client';
-import React from 'react';
-import * as FEAAS from '@sitecore-feaas/clientside/react';
-import { getDataFromFields } from '../../utils';
-import { MissingComponent } from '../MissingComponent';
-const DefaultErrorComponent = (props) => {
-    var _a;
-    return (React.createElement("div", null,
-        "A rendering error occurred: ", (_a = props.error) === null || _a === void 0 ? void 0 :
-        _a.message,
-        "."));
-};
-// BYOCComponent remains for backward compatibility and testing purposes
-/**
- * BYOCComponent facilitate the rendering of external components. It manages potential errors,
- * missing components, and customization of error messages or alternative rendering components.
- * @param {ByocComponentProps} props component props
- * @returns dynamically rendered component or Missing Component error frame
- */
-export class BYOCComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
-    static getDerivedStateFromError(error) {
-        // Update state so the next render will show the fallback UI.
-        return { error: error };
-    }
-    componentDidCatch(error) {
-        this.setState({ error });
-    }
-    render() {
-        var _a, _b, _c;
-        const props = this.props;
-        if (this.state.error) {
-            return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: this.state.error })) : (React.createElement(DefaultErrorComponent, { error: this.state.error }));
-        }
-        const { ComponentName: componentName } = props.params || {};
-        if (!componentName) {
-            const noNameProps = {
-                errorOverride: 'BYOC: The ComponentName for this rendering is missing',
-            };
-            return props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (React.createElement(MissingComponent, Object.assign({}, noNameProps)));
-        }
-        const unRegisteredComponentProps = {
-            rendering: {
-                componentName: componentName,
-            },
-            errorOverride: 'BYOC: This component was not registered.',
-        };
-        const fallbackComponent = this.props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (React.createElement(MissingComponent, Object.assign({}, unRegisteredComponentProps)));
-        const ErrorComponent = this.props.errorComponent;
-        let componentProps = {};
-        if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
-            try {
-                componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
-            }
-            catch (e) {
-                console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
-                return ErrorComponent ? (React.createElement(ErrorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
-            }
-        }
-        // apply props from item datasource
-        const dataSourcesData = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_c = props.fields) !== null && _c !== void 0 ? _c : {}) });
-        // we render fallback on client to avoid problems with client-only components
-        return (React.createElement(FEAAS.ExternalComponent, Object.assign({}, props.rendering, { componentName: componentName, clientFallback: fallbackComponent, datasources: dataSourcesData }, componentProps)));
-    }
-}
-/**
- * SXA wrapper for BYOC components
- * @param {BYOCComponentProps} props component props
- * @returns wrapped BYOC component
- */
-export const BYOCWrapper = (props) => {
-    var _a, _b, _c;
-    const styles = (_b = (_a = props.params) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.trimEnd();
-    const id = (_c = props.params) === null || _c === void 0 ? void 0 : _c.RenderingIdentifier;
-    return (React.createElement("div", { className: styles ? styles : undefined, id: id ? id : undefined },
-        React.createElement("div", { className: "component-content" },
-            React.createElement(BYOCComponent, Object.assign({}, props)))));
-};
+'use client';
+import React from 'react';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import { getDataFromFields } from '../../utils';
+import { MissingComponent } from '../MissingComponent';
+// Allow mocking of FEAAS.ExternalComponent for testing
+let { ExternalComponent } = FEAAS;
+export const __mockDependencies = (mocks) => {
+    if (mocks.ExternalComponent) {
+        ExternalComponent = mocks.ExternalComponent;
+    }
+};
+const DefaultErrorComponent = (props) => {
+    var _a;
+    return (React.createElement("div", null,
+        "A rendering error occurred: ", (_a = props.error) === null || _a === void 0 ? void 0 :
+        _a.message,
+        "."));
+};
+// BYOCComponent remains for backward compatibility and testing purposes
+/**
+ * BYOCComponent facilitate the rendering of external components. It manages potential errors,
+ * missing components, and customization of error messages or alternative rendering components.
+ * @param {ByocComponentProps} props component props
+ * @returns dynamically rendered component or Missing Component error frame
+ * @public
+ */
+export class BYOCComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { error: error };
+    }
+    componentDidCatch(error) {
+        this.setState({ error });
+    }
+    render() {
+        var _a, _b, _c;
+        const props = this.props;
+        if (this.state.error) {
+            return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: this.state.error })) : (React.createElement(DefaultErrorComponent, { error: this.state.error }));
+        }
+        const { ComponentName: componentName } = props.params || {};
+        if (!componentName) {
+            const noNameProps = {
+                errorOverride: 'BYOC: The ComponentName for this rendering is missing',
+            };
+            const MissingComp = this.props.missingComponentComponent;
+            return MissingComp ? React.createElement(MissingComp, Object.assign({}, noNameProps)) : React.createElement(MissingComponent, Object.assign({}, noNameProps));
+        }
+        const unRegisteredComponentProps = {
+            rendering: {
+                componentName: componentName,
+            },
+            errorOverride: 'BYOC: This component was not registered.',
+        };
+        const fallbackComponent = this.props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (React.createElement(MissingComponent, Object.assign({}, unRegisteredComponentProps)));
+        const ErrorComponent = this.props.errorComponent;
+        let componentProps = {};
+        if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
+            try {
+                componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
+            }
+            catch (e) {
+                console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
+                return ErrorComponent ? (React.createElement(ErrorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
+            }
+        }
+        // apply props from item datasource
+        const dataSourcesData = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_c = props.fields) !== null && _c !== void 0 ? _c : {}) });
+        // we render fallback on client to avoid problems with client-only components
+        return (React.createElement(ExternalComponent, Object.assign({}, props.rendering, { componentName: componentName, clientFallback: fallbackComponent, datasources: dataSourcesData }, componentProps)));
+    }
+}
+/**
+ * SXA wrapper for BYOC components
+ * @param {BYOCComponentProps} props component props
+ * @returns wrapped BYOC component
+ * @public
+ */
+export const BYOCWrapper = (props) => {
+    var _a, _b, _c;
+    const styles = (_b = (_a = props.params) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.trimEnd();
+    const id = (_c = props.params) === null || _c === void 0 ? void 0 : _c.RenderingIdentifier;
+    return (React.createElement("div", { className: styles ? styles : undefined, id: id ? id : undefined },
+        React.createElement("div", { className: "component-content" },
+            React.createElement(BYOCComponent, Object.assign({}, props)))));
+};