@sitecore-jss/sitecore-jss-react 21.3.1 → 21.4.0-canary.2

package/dist/cjs/components/FEaaSComponent.js

@@ -39,6 +39,7 @@ exports.composeComponentEndpoint = exports.fetchFEaaSComponentServerProps = expo
 const react_1 = __importDefault(require("react"));
 const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const utils_1 = require("../utils");
 exports.FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
 /**
  * @param {FEaaSComponentProps} props component props
@@ -46,7 +47,7 @@ exports.FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
 const FEaaSComponent = (props) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
-    if ((!props.lastModified || !props.template) &&
+    if (!props.template &&
         (!props.params ||
             !props.params.LibraryId ||
             !props.params.ComponentId ||
@@ -57,23 +58,25 @@ const FEaaSComponent = (props) => {
         return null;
     }
     let data = null;
-    if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentDataOverride) {
-        // Use override data if provided
-        try {
-            data = JSON.parse(props.params.ComponentDataOverride);
+    if (props.fetchedData === null || props.fetchedData === undefined) {
+        if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentDataOverride) {
+            // Use override data if provided
+            try {
+                data = JSON.parse(props.params.ComponentDataOverride);
+            }
+            catch (e) {
+                data = null;
+            }
         }
-        catch (e) {
-            data = null;
+        else if (props.fields) {
+            // Otherwise use datasource data (provided in fields)
+            data = (0, utils_1.getDataFromFields)(props.fields);
         }
     }
-    else if (props.fields) {
-        // Otherwise use datasource data (provided in fields)
-        data = getDataFromFields(props.fields);
-    }
     // FEaaS control would still be hydrated by client
     // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
     // this also allows component to fall back to full client-side rendering when template or src is empty
-    return (react_1.default.createElement(FEAAS.Component, { data: data, template: props.template || '', "last-modified": props.lastModified, 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 }));
+    return (react_1.default.createElement(FEAAS.Component, { data: props.fetchedData || 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 }));
 };
 exports.FEaaSComponent = FEaaSComponent;
 /**
@@ -87,34 +90,65 @@ function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
     return __awaiter(this, void 0, void 0, function* () {
         const revisionFallback = pageState && pageState !== layout_1.LayoutServicePageState.Normal ? 'staged' : 'published';
         const src = endpointOverride || (0, exports.composeComponentEndpoint)(params, revisionFallback);
+        let template = '';
+        let fetchedData = null;
+        const fetchDataOptions = params.ComponentDataOverride
+            ? JSON.parse(params.ComponentDataOverride)
+            : {};
         try {
-            const { template, lastModified } = yield FEAAS.fetchComponent(src);
-            return {
-                revisionFallback,
-                template,
-                lastModified,
-            };
+            template = yield fetchComponentTemplate(src, params, revisionFallback);
+            fetchedData = yield fetchData(fetchDataOptions);
         }
         catch (e) {
-            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
-                revisionFallback}" is present`);
             console.error(e);
-            // leave revision fallback in so we can re-try with client-side rendering
-            return {
-                revisionFallback,
-            };
         }
+        return {
+            fetchedData,
+            revisionFallback,
+            template,
+        };
     });
 }
 exports.fetchFEaaSComponentServerProps = fetchFEaaSComponentServerProps;
-const getDataFromFields = (fields) => {
-    let data = {};
-    data = Object.entries(fields).reduce((acc, [key]) => {
-        acc[key] = (0, layout_1.getFieldValue)(fields, key);
-        return acc;
-    }, data);
-    return data;
-};
+/**
+ * @param {string} src component endpoint
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ */
+function fetchComponentTemplate(src, params, revisionFallback) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const { template } = yield FEAAS.fetchComponent(src);
+            return template;
+        }
+        catch (error) {
+            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
+                revisionFallback}" is present`);
+            throw error;
+        }
+    });
+}
+/**
+ * Fetches component data based on the provided data options.
+ * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
+ *
+ * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
+ * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
+ * or rejects with an error if data fetching encounters an issue.
+ * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
+ */
+function fetchData(dataOptions) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
+            return fetchedData;
+        }
+        catch (error) {
+            console.error('Fetch FEAAS component data settings failed');
+            throw error;
+        }
+    });
+}
 /**
  * Build component endpoint URL from component's params
  * @param {FEaaSComponentParams} params rendering parameters for FEAAS component

package/dist/cjs/components/FEaaSWrapper.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FEaaSWrapper = exports.FEAAS_WRAPPER_RENDERING_NAME = void 0;
+const FEaaSComponent_1 = require("./FEaaSComponent");
+const react_1 = __importDefault(require("react"));
+exports.FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
+const FEaaSWrapper = (props) => {
+    var _a, _b;
+    const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
+    const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
+    return (react_1.default.createElement("div", { className: styles, id: id ? id : undefined },
+        react_1.default.createElement("div", { className: "component-content" },
+            react_1.default.createElement(FEaaSComponent_1.FEaaSComponent, Object.assign({}, props)))));
+};
+exports.FEaaSWrapper = FEaaSWrapper;

package/dist/cjs/components/Image.js

@@ -18,8 +18,8 @@ exports.Image = exports.getEEMarkup = void 0;
 const media_1 = require("@sitecore-jss/sitecore-jss/media");
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
-const server_1 = __importDefault(require("react-dom/server"));
 const utils_1 = require("../utils");
+const utils_2 = require("../utils");
 const getEditableWrapper = (editableMarkup, ...otherProps) => (
 // create an inline wrapper and use dangerouslySetInnerHTML.
 // if we try to parse the EE value, the parser will strip invalid or disallowed attributes from html elements - and EE uses several
@@ -61,7 +61,7 @@ const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps) => {
     if (!imgAttrs) {
         return getEditableWrapper(imageField.editable);
     }
-    const imgHtml = server_1.default.renderToStaticMarkup(react_1.default.createElement("img", Object.assign({}, imgAttrs)));
+    const imgHtml = `<img ${(0, utils_2.getAttributesString)(imgAttrs)} />`;
     const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
     return getEditableWrapper(editableMarkup);
 };

package/dist/cjs/components/MissingComponent.js

@@ -10,7 +10,11 @@ const MissingComponent = (props) => {
     const componentName = props.rendering && props.rendering.componentName
         ? props.rendering.componentName
         : 'Unnamed Component';
-    console.log(`Component props for unimplemented '${componentName}' component`, props);
+    // error override would mean component is not unimplemented
+    !props.errorOverride &&
+        console.log(`Component props for unimplemented '${componentName}' component`, props);
+    const errorMessage = props.errorOverride ||
+        'JSS component is missing React implementation. See the developer console for more information.';
     return (react_1.default.createElement("div", { style: {
             background: 'darkorange',
             outline: '5px solid orange',
@@ -19,7 +23,7 @@ const MissingComponent = (props) => {
             maxWidth: '500px',
         } },
         react_1.default.createElement("h2", null, componentName),
-        react_1.default.createElement("p", null, "JSS component is missing React implementation. See the developer console for more information.")));
+        react_1.default.createElement("p", null, errorMessage)));
 };
 exports.MissingComponent = MissingComponent;
 exports.MissingComponent.propTypes = {

package/dist/cjs/components/Placeholder.js

@@ -50,36 +50,8 @@ class PlaceholderComponent extends PlaceholderCommon_1.PlaceholderCommon {
         }
         const renderingData = childProps.rendering;
         const placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, this.props.name);
-        this.isEmpty = placeholderData.every((rendering) => isRawRendering(rendering));
-        // This is a workaround to insert Experience Editor-specific markup on the page for empty placeholders.
-        // It makes sure the markup is inserted by react and thus avoiding hydration errors when in editing mode
-        if (this.isEmpty && utils_1.ExperienceEditor.isActive()) {
-            const codePos = placeholderData.findIndex((component) => component.name === 'code' &&
-                component.attributes.kind === 'open');
-            const plhId = placeholderData[codePos].attributes.id;
-            const emptyPlaceholderMarkup = [
-                {
-                    name: 'span',
-                    contents: null,
-                    attributes: {
-                        type: 'text/sitecore',
-                        'sc-part-of': 'placeholder rendering',
-                        style: 'display: none;',
-                    },
-                },
-                {
-                    name: 'div',
-                    contents: null,
-                    attributes: {
-                        class: 'scEnabledChrome scEmptyPlaceholder',
-                        'sc-part-of': 'placeholder',
-                        'sc-placeholder-id': plhId,
-                    },
-                },
-            ];
-            placeholderData.splice(codePos + 1, 0, ...emptyPlaceholderMarkup);
-        }
         const components = this.getComponentsForRenderingData(placeholderData);
+        this.isEmpty = placeholderData.every((rendering) => isRawRendering(rendering));
         if (this.props.renderEmpty && this.isEmpty) {
             const rendered = this.props.renderEmpty(components);
             return components.length ? this.renderEmptyPlaceholder(rendered) : rendered;

package/dist/cjs/components/PlaceholderCommon.js

@@ -21,6 +21,9 @@ const MissingComponent_1 = require("./MissingComponent");
 const utils_1 = require("../utils");
 const HiddenRendering_1 = require("./HiddenRendering");
 const FEaaSComponent_1 = require("./FEaaSComponent");
+const FEaaSWrapper_1 = require("./FEaaSWrapper");
+const BYOCComponent_1 = require("./BYOCComponent");
+const BYOCWrapper_1 = require("./BYOCWrapper");
 /**
  * These patterns need for right rendering Dynamic placeholders.
  * Must be distinguished Splitter components and another placeholders(containers)
@@ -103,8 +106,20 @@ class PlaceholderCommon extends react_1.default.Component {
             else {
                 component = this.getComponentForRendering(componentRendering);
             }
-            if (componentRendering.componentName === FEaaSComponent_1.FEAAS_COMPONENT_RENDERING_NAME) {
-                component = FEaaSComponent_1.FEaaSComponent;
+            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
+            if (!component) {
+                if (componentRendering.componentName === FEaaSComponent_1.FEAAS_COMPONENT_RENDERING_NAME) {
+                    component = FEaaSComponent_1.FEaaSComponent;
+                }
+                else if (componentRendering.componentName === FEaaSWrapper_1.FEAAS_WRAPPER_RENDERING_NAME) {
+                    component = FEaaSWrapper_1.FEaaSWrapper;
+                }
+                else if (componentRendering.componentName === BYOCComponent_1.BYOC_COMPONENT_RENDERING_NAME) {
+                    component = BYOCComponent_1.BYOCComponent;
+                }
+                else if (componentRendering.componentName === BYOCWrapper_1.BYOC_WRAPPER_RENDERING_NAME) {
+                    component = BYOCWrapper_1.BYOCWrapper;
+                }
             }
             if (!component) {
                 console.error(`Placeholder ${name} contains unknown component ${componentRendering.componentName}. Ensure that a React component exists for it, and that it is registered in your componentFactory.js.`);

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = exports.constants = void 0;
+exports.ComponentBuilder = exports.EditFrame = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.LinkPropTypes = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichTextPropTypes = exports.RichText = exports.getEEMarkup = exports.Image = exports.Placeholder = exports.getFEAASLibraryStylesheetLinks = exports.mediaApi = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = exports.constants = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
@@ -22,6 +22,8 @@ Object.defineProperty(exports, "GraphQLDictionaryService", { enumerable: true, g
 Object.defineProperty(exports, "RestDictionaryService", { enumerable: true, get: function () { return i18n_1.RestDictionaryService; } });
 var media_1 = require("@sitecore-jss/sitecore-jss/media");
 Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
+var feaas_1 = require("@sitecore-jss/sitecore-jss/feaas");
+Object.defineProperty(exports, "getFEAASLibraryStylesheetLinks", { enumerable: true, get: function () { return feaas_1.getFEAASLibraryStylesheetLinks; } });
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
 var Image_1 = require("./components/Image");
@@ -37,6 +39,13 @@ Object.defineProperty(exports, "DateField", { enumerable: true, get: function ()
 var FEaaSComponent_1 = require("./components/FEaaSComponent");
 Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: function () { return FEaaSComponent_1.FEaaSComponent; } });
 Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return FEaaSComponent_1.fetchFEaaSComponentServerProps; } });
+var FEaaSWrapper_1 = require("./components/FEaaSWrapper");
+Object.defineProperty(exports, "FEaaSWrapper", { enumerable: true, get: function () { return FEaaSWrapper_1.FEaaSWrapper; } });
+var BYOCComponent_1 = require("./components/BYOCComponent");
+Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return BYOCComponent_1.BYOCComponent; } });
+Object.defineProperty(exports, "fetchBYOCComponentServerProps", { enumerable: true, get: function () { return BYOCComponent_1.fetchBYOCComponentServerProps; } });
+var BYOCWrapper_1 = require("./components/BYOCWrapper");
+Object.defineProperty(exports, "BYOCWrapper", { enumerable: true, get: function () { return BYOCWrapper_1.BYOCWrapper; } });
 var Link_1 = require("./components/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.Link; } });
 Object.defineProperty(exports, "LinkPropTypes", { enumerable: true, get: function () { return Link_1.LinkPropTypes; } });

package/dist/cjs/utils.js

@@ -1,6 +1,18 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addClassName = exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
+exports.getDataFromFields = exports.getAttributesString = exports.addClassName = exports.convertAttributesToReactProps = exports.convertStyleAttribute = exports.convertKebabCasetoCamelCase = void 0;
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 const style_attr_1 = require("style-attr");
 // https://stackoverflow.com/a/10426674/9324
 const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
@@ -51,7 +63,7 @@ exports.convertAttributesToReactProps = convertAttributesToReactProps;
 /**
  * "class" property will be transformed into or appended to "className" instead.
  * @param {string} otherAttrs all other props included on the image component
- * * @returns {void}
+ * @returns {void}
  */
 const addClassName = (otherAttrs) => {
     if (otherAttrs.class) {
@@ -68,3 +80,39 @@ const addClassName = (otherAttrs) => {
     }
 };
 exports.addClassName = addClassName;
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+const getAttributesString = (attributes) => {
+    const { className } = attributes, restAttributes = __rest(attributes, ["className"]);
+    const attributesEntries = Object.entries(restAttributes).map(([key, value]) => {
+        if (typeof value === 'object') {
+            const valueString = JSON.stringify(value)
+                .replace(/"|{|}/g, '')
+                .replace(/,/g, ';');
+            return `${key}="${valueString}"`;
+        }
+        return `${key}="${value}"`;
+    });
+    if (className) {
+        attributesEntries.push(`class="${className}"`);
+    }
+    return attributesEntries.join(' ');
+};
+exports.getAttributesString = getAttributesString;
+/**
+ * Used in FEAAS and BYOC implementations to convert datasource item field values into component props
+ * @param {ComponentFields} fields field collection from Sitecore
+ * @returns JSON object that can be used as props
+ */
+const getDataFromFields = (fields) => {
+    let data = {};
+    data = Object.entries(fields).reduce((acc, [key]) => {
+        acc[key] = (0, layout_1.getFieldValue)(fields, key);
+        return acc;
+    }, data);
+    return data;
+};
+exports.getDataFromFields = getDataFromFields;

package/dist/esm/components/BYOCComponent.js

@@ -0,0 +1,94 @@
+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 { getDataFromFields } from '../utils';
+import { MissingComponent } from './MissingComponent';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+export const BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';
+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 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 dynamicly 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;
+        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;
+        const isNull = Object.keys(props.fetchedData).length === 0;
+        let componentProps = isNull ? null : props.fetchedData;
+        if (!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 }));
+                }
+            }
+            else {
+                componentProps = props.fields ? getDataFromFields(props.fields) : {};
+            }
+        }
+        return (React.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, fallback: fallbackComponent }, componentProps)));
+    }
+}
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * @param {BYOCComponentParams} params component params
+ */
+export function fetchBYOCComponentServerProps(params) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const fetchDataOptions = params.ComponentProps
+            ? JSON.parse(params.ComponentProps)
+            : {};
+        const fetchedData = yield FEAAS.DataSettings.fetch(fetchDataOptions || {});
+        return {
+            fetchedData,
+        };
+    });
+}

package/dist/esm/components/BYOCWrapper.js

@@ -0,0 +1,11 @@
+import { BYOCComponent } from './BYOCComponent';
+import React from 'react';
+export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
+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)))));
+};

package/dist/esm/components/FEaaSComponent.js

@@ -9,7 +9,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import React from 'react';
 import * as FEAAS from '@sitecore-feaas/clientside/react';
-import { LayoutServicePageState, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { getDataFromFields } from '../utils';
 export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
 /**
  * @param {FEaaSComponentProps} props component props
@@ -17,7 +18,7 @@ export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
 export const FEaaSComponent = (props) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const computedRevision = ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentRevision) || props.revisionFallback;
-    if ((!props.lastModified || !props.template) &&
+    if (!props.template &&
         (!props.params ||
             !props.params.LibraryId ||
             !props.params.ComponentId ||
@@ -28,23 +29,25 @@ export const FEaaSComponent = (props) => {
         return null;
     }
     let data = null;
-    if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentDataOverride) {
-        // Use override data if provided
-        try {
-            data = JSON.parse(props.params.ComponentDataOverride);
+    if (props.fetchedData === null || props.fetchedData === undefined) {
+        if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentDataOverride) {
+            // Use override data if provided
+            try {
+                data = JSON.parse(props.params.ComponentDataOverride);
+            }
+            catch (e) {
+                data = null;
+            }
         }
-        catch (e) {
-            data = null;
+        else if (props.fields) {
+            // Otherwise use datasource data (provided in fields)
+            data = getDataFromFields(props.fields);
         }
     }
-    else if (props.fields) {
-        // Otherwise use datasource data (provided in fields)
-        data = getDataFromFields(props.fields);
-    }
     // FEaaS control would still be hydrated by client
     // we pass all the props as a workaround to avoid hydration error, until we convert all JSS components to server side
     // this also allows component to fall back to full client-side rendering when template or src is empty
-    return (React.createElement(FEAAS.Component, { data: data, template: props.template || '', "last-modified": props.lastModified, 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 }));
+    return (React.createElement(FEAAS.Component, { data: props.fetchedData || 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 }));
 };
 /**
  * Fetches server component props required for server rendering, based on rendering params.
@@ -57,33 +60,64 @@ export function fetchFEaaSComponentServerProps(params, pageState, endpointOverri
     return __awaiter(this, void 0, void 0, function* () {
         const revisionFallback = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
         const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
+        let template = '';
+        let fetchedData = null;
+        const fetchDataOptions = params.ComponentDataOverride
+            ? JSON.parse(params.ComponentDataOverride)
+            : {};
         try {
-            const { template, lastModified } = yield FEAAS.fetchComponent(src);
-            return {
-                revisionFallback,
-                template,
-                lastModified,
-            };
+            template = yield fetchComponentTemplate(src, params, revisionFallback);
+            fetchedData = yield fetchData(fetchDataOptions);
         }
         catch (e) {
+            console.error(e);
+        }
+        return {
+            fetchedData,
+            revisionFallback,
+            template,
+        };
+    });
+}
+/**
+ * @param {string} src component endpoint
+ * @param {FEaaSComponentParams} params rendering parameters for FEAAS component
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ */
+function fetchComponentTemplate(src, params, revisionFallback) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const { template } = yield FEAAS.fetchComponent(src);
+            return template;
+        }
+        catch (error) {
             console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
                 revisionFallback}" is present`);
-            console.error(e);
-            // leave revision fallback in so we can re-try with client-side rendering
-            return {
-                revisionFallback,
-            };
+            throw error;
+        }
+    });
+}
+/**
+ * Fetches component data based on the provided data options.
+ * This function asynchronously fetches data using the FEAAS.DataSettings.fetch method.
+ *
+ * @param {FEAAS.DataOptions} dataOptions - Options to customize data fetching.
+ * @returns {Promise<FEAAS.DataScopes>} A promise that resolves with the fetched data,
+ * or rejects with an error if data fetching encounters an issue.
+ * @throws {Error} If an error occurs during data fetching, it is propagated as an error.
+ */
+function fetchData(dataOptions) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const fetchedData = yield FEAAS.DataSettings.fetch(dataOptions || {});
+            return fetchedData;
+        }
+        catch (error) {
+            console.error('Fetch FEAAS component data settings failed');
+            throw error;
         }
     });
 }
-const getDataFromFields = (fields) => {
-    let data = {};
-    data = Object.entries(fields).reduce((acc, [key]) => {
-        acc[key] = getFieldValue(fields, key);
-        return acc;
-    }, data);
-    return data;
-};
 /**
  * Build component endpoint URL from component's params
  * @param {FEaaSComponentParams} params rendering parameters for FEAAS component

package/dist/esm/components/FEaaSWrapper.js

@@ -0,0 +1,11 @@
+import { FEaaSComponent } from './FEaaSComponent';
+import React from 'react';
+export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
+export const FEaaSWrapper = (props) => {
+    var _a, _b;
+    const styles = `component feaas ${(_a = props.params) === null || _a === void 0 ? void 0 : _a.styles}`.trimEnd();
+    const id = (_b = props.params) === null || _b === void 0 ? void 0 : _b.RenderingIdentifier;
+    return (React.createElement("div", { className: styles, id: id ? id : undefined },
+        React.createElement("div", { className: "component-content" },
+            React.createElement(FEaaSComponent, Object.assign({}, props)))));
+};