@sitecore-jss/sitecore-jss-react 21.3.0-canary.4 → 21.3.0-canary.41

package/README.md

@@ -3,8 +3,8 @@
 This module is provided as a part of Sitecore JavaScript Rendering SDK (JSS). It contains React components and integration for JSS.
 
 <!---
-@TODO: Update to version 20.0.0 docs before release
+@TODO: Update to next version docs before release
 -->
-[Documentation](https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-react.html)
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-react.html)
 
-[API reference documentation](/ref-docs/sitecore-jss-react/).
+[API reference documentation](/ref-docs/sitecore-jss-react/)

package/dist/cjs/components/BYOCRenderer.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BYOCRenderer = void 0;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../utils");
+const MissingComponent_1 = require("./MissingComponent");
+const DefaultErrorComponent = (props) => {
+    var _a;
+    return (react_1.default.createElement("div", null,
+        "A rendering error occurred: ", (_a = props.error) === null || _a === void 0 ? void 0 :
+        _a.message,
+        "."));
+};
+/**
+ * BYOCRenderer helps rendering BYOC components - that can be taken from anywhere
+ * and registered without being deployed as Sitecore renderings
+ * @param {ByocRendererProps} props component props
+ * @returns dynamicly rendered component or Missing Component error frame
+ */
+class BYOCRenderer extends react_1.default.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_1.default.createElement(this.props.errorComponent, { error: this.state.error })) : (react_1.default.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_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, noNameProps)));
+        }
+        // props.components would contain component from internal FEAAS regsitered component collection (registered in app)
+        // we can't access this collection here directly, as the collection from packages's dependency would be different from the one in app
+        const Component = (_a = props.components[componentName]) === null || _a === void 0 ? void 0 : _a.component;
+        if (!Component) {
+            console.warn(`Component "${componentName}" was not registered, please ensure the FEEAS.External.registerComponent call is made.`);
+            const missingProps = {
+                rendering: {
+                    componentName: componentName,
+                },
+                errorOverride: 'BYOC: This component was not registered.',
+            };
+            return props.missingComponentComponent ? (react_1.default.createElement(this.props.missingComponentComponent, Object.assign({}, missingProps))) : (react_1.default.createElement(MissingComponent_1.MissingComponent, Object.assign({}, missingProps)));
+        }
+        let componentProps = undefined;
+        if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentProps) {
+            try {
+                componentProps = (_c = JSON.parse(props.params.ComponentProps)) !== null && _c !== void 0 ? _c : {};
+            }
+            catch (e) {
+                console.warn(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
+                return this.props.errorComponent ? (react_1.default.createElement(this.props.errorComponent, { error: e })) : (react_1.default.createElement(DefaultErrorComponent, { error: e }));
+            }
+        }
+        if (!componentProps) {
+            componentProps = props.fields ? (0, utils_1.getDataFromFields)(props.fields) : {};
+        }
+        return react_1.default.createElement(Component, Object.assign({}, componentProps));
+    }
+}
+exports.BYOCRenderer = BYOCRenderer;

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/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/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.BYOCRenderer = 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,8 @@ 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 BYOCRenderer_1 = require("./components/BYOCRenderer");
+Object.defineProperty(exports, "BYOCRenderer", { enumerable: true, get: function () { return BYOCRenderer_1.BYOCRenderer; } });
 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/BYOCRenderer.js

@@ -0,0 +1,70 @@
+import React from '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,
+        "."));
+};
+/**
+ * BYOCRenderer helps rendering BYOC components - that can be taken from anywhere
+ * and registered without being deployed as Sitecore renderings
+ * @param {ByocRendererProps} props component props
+ * @returns dynamicly rendered component or Missing Component error frame
+ */
+export class BYOCRenderer 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)));
+        }
+        // props.components would contain component from internal FEAAS regsitered component collection (registered in app)
+        // we can't access this collection here directly, as the collection from packages's dependency would be different from the one in app
+        const Component = (_a = props.components[componentName]) === null || _a === void 0 ? void 0 : _a.component;
+        if (!Component) {
+            console.warn(`Component "${componentName}" was not registered, please ensure the FEEAS.External.registerComponent call is made.`);
+            const missingProps = {
+                rendering: {
+                    componentName: componentName,
+                },
+                errorOverride: 'BYOC: This component was not registered.',
+            };
+            return props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, missingProps))) : (React.createElement(MissingComponent, Object.assign({}, missingProps)));
+        }
+        let componentProps = undefined;
+        if ((_b = props.params) === null || _b === void 0 ? void 0 : _b.ComponentProps) {
+            try {
+                componentProps = (_c = JSON.parse(props.params.ComponentProps)) !== null && _c !== void 0 ? _c : {};
+            }
+            catch (e) {
+                console.warn(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
+                return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
+            }
+        }
+        if (!componentProps) {
+            componentProps = props.fields ? getDataFromFields(props.fields) : {};
+        }
+        return React.createElement(Component, Object.assign({}, componentProps));
+    }
+}

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/Image.js

@@ -12,8 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOMServer from 'react-dom/server';
 import { addClassName, convertAttributesToReactProps } from '../utils';
+import { getAttributesString } from '../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
@@ -55,7 +55,7 @@ export const getEEMarkup = (imageField, imageParams, mediaUrlPrefix, otherProps)
     if (!imgAttrs) {
         return getEditableWrapper(imageField.editable);
     }
-    const imgHtml = ReactDOMServer.renderToStaticMarkup(React.createElement("img", Object.assign({}, imgAttrs)));
+    const imgHtml = `<img ${getAttributesString(imgAttrs)} />`;
     const editableMarkup = imageField.editable.replace(foundImg.imgTag, imgHtml);
     return getEditableWrapper(editableMarkup);
 };

package/dist/esm/components/MissingComponent.js

@@ -4,7 +4,11 @@ export 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.createElement("div", { style: {
             background: 'darkorange',
             outline: '5px solid orange',
@@ -13,7 +17,7 @@ export const MissingComponent = (props) => {
             maxWidth: '500px',
         } },
         React.createElement("h2", null, componentName),
-        React.createElement("p", null, "JSS component is missing React implementation. See the developer console for more information.")));
+        React.createElement("p", null, errorMessage)));
 };
 MissingComponent.propTypes = {
     rendering: PropTypes.shape({

package/dist/esm/components/Placeholder.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PlaceholderCommon } from './PlaceholderCommon';
 import { withComponentFactory } from '../enhancers/withComponentFactory';
-import { HorizonEditor, ExperienceEditor } from '@sitecore-jss/sitecore-jss/utils';
+import { HorizonEditor } from '@sitecore-jss/sitecore-jss/utils';
 /**
  * @param {HtmlElementRendering | ComponentRendering} rendering
  */
@@ -44,36 +44,8 @@ class PlaceholderComponent extends PlaceholderCommon {
         }
         const renderingData = childProps.rendering;
         const placeholderData = 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 && 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/esm/index.js

@@ -4,12 +4,14 @@ export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChi
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
+export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas';
 export { Placeholder } from './components/Placeholder';
 export { Image, getEEMarkup, } from './components/Image';
 export { RichText, RichTextPropTypes } from './components/RichText';
 export { Text } from './components/Text';
 export { DateField } from './components/Date';
 export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
+export { BYOCRenderer, } from './components/BYOCRenderer';
 export { Link, LinkPropTypes } from './components/Link';
 export { File } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';

package/dist/esm/utils.js

@@ -1,3 +1,15 @@
+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;
+};
+import { getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
 import { parse as styleParse } from 'style-attr';
 // https://stackoverflow.com/a/10426674/9324
 export const convertKebabCasetoCamelCase = (str) => str.replace(/^.|-./g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.substr(1).toUpperCase());
@@ -45,7 +57,7 @@ export const convertAttributesToReactProps = (attributes) => {
 /**
  * "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}
  */
 export const addClassName = (otherAttrs) => {
     if (otherAttrs.class) {
@@ -61,3 +73,37 @@ export const addClassName = (otherAttrs) => {
         delete otherAttrs.class;
     }
 };
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+export 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(' ');
+};
+/**
+ * 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
+ */
+export const getDataFromFields = (fields) => {
+    let data = {};
+    data = Object.entries(fields).reduce((acc, [key]) => {
+        acc[key] = getFieldValue(fields, key);
+        return acc;
+    }, data);
+    return data;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-react",
-  "version": "21.3.0-canary.4",
+  "version": "21.3.0-canary.41",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -62,14 +62,14 @@
   },
   "dependencies": {
     "@sitecore-feaas/clientside": "^0.3.0",
-    "@sitecore-jss/sitecore-jss": "^21.3.0-canary.4",
+    "@sitecore-jss/sitecore-jss": "^21.3.0-canary.41",
     "deep-equal": "^2.1.0",
     "prop-types": "^15.8.1",
     "style-attr": "^1.3.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "9dfa65d417e4fe131729735e202397879232f0f2",
+  "gitHead": "99f1b478d91b9a562ad721b8ca75a64eadc6d73d",
   "files": [
     "dist",
     "types"

package/types/components/BYOCRenderer.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
+import { MissingComponentProps } from './MissingComponent';
+import { RegisteredComponents } from '@sitecore-feaas/clientside/types/ui/FEAASExternal';
+/**
+ * Data from rendering params on Sitecore's BYOC rendering
+ */
+export type BYOCRenderingParams = {
+    /**
+     * Name of the component to render
+     */
+    ComponentName: string;
+    /**
+     * JSON props to pass into rendered component
+     */
+    ComponentProps?: string;
+    /**
+     * A string with classes that can be used to apply themes, via SXA functionality
+     */
+    styles?: string;
+    RenderingIdentifier?: string;
+};
+/**
+ * Props for BYOC wrapper component
+ */
+export type BYOCProps = {
+    /**
+     * rendering params
+     */
+    params?: BYOCRenderingParams;
+    /**
+     * fields from datasource items to be passed as rendered child component props
+     */
+    fields?: ComponentFields;
+};
+/**
+ * Props for BYOCRenderer component. Includes components list to load external components from.
+ */
+export type BYOCRendererProps = BYOCProps & {
+    /**
+     * Registered component collection. Would be taken from FEAAS.External.registered
+     */
+    components: RegisteredComponents;
+    /**
+     * Error component override. To be shown when Renderer or underlying component throws
+     */
+    errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
+    /**
+     * Override to indicate missing component situations. Would be shown when BYOC component is not registered
+     * or ComponentName is missing
+     */
+    missingComponentComponent?: React.ComponentClass<MissingComponentProps> | React.FC<MissingComponentProps>;
+};
+type ErrorComponentProps = {
+    [prop: string]: unknown;
+    error?: Error;
+};
+/**
+ * BYOCRenderer helps rendering BYOC components - that can be taken from anywhere
+ * and registered without being deployed as Sitecore renderings
+ * @param {ByocRendererProps} props component props
+ * @returns dynamicly rendered component or Missing Component error frame
+ */
+export declare class BYOCRenderer extends React.Component<BYOCRendererProps> {
+    state: Readonly<{
+        error?: Error;
+    }>;
+    constructor(props: BYOCRendererProps);
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    componentDidCatch(error: Error): void;
+    render(): JSX.Element;
+}
+export {};

package/types/components/FEaaSComponent.d.ts

@@ -1,3 +1,4 @@
+import * as FEAAS from '@sitecore-feaas/clientside/react';
 import { ComponentFields, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 export declare const FEAAS_COMPONENT_RENDERING_NAME = "FEaaSComponent";
 /**
@@ -24,14 +25,14 @@ type FEaaSComponentServerProps = {
      * HTML template for presentation rendered inside the component
      */
     template?: string;
-    /**
-     * the date component data was last modified
-     */
-    lastModified?: string;
     /**
      * Default revision to be fetched. Should be 'staged' for editing/preview. Can be overriden by params.ComponentRevision
      */
     revisionFallback?: RevisionType;
+    /**
+     * Fetched data from server component props for server rendering, based on rendering params.
+     */
+    fetchedData?: FEAAS.DataScopes;
 };
 /**
  * FEaaS props for client side component. Should be used as fallback when server props are not provided.

package/types/components/MissingComponent.d.ts

@@ -3,5 +3,6 @@ export interface MissingComponentProps {
     rendering?: {
         componentName?: string;
     };
+    errorOverride?: string;
 }
 export declare const MissingComponent: React.FC<MissingComponentProps>;

package/types/index.d.ts

@@ -4,6 +4,7 @@ export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutService
 export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
+export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas';
 export { ComponentFactory } from './components/sharedTypes';
 export { Placeholder, PlaceholderComponentProps } from './components/Placeholder';
 export { Image, ImageProps, ImageField, getEEMarkup, ImageFieldValue, ImageSizeParameters, } from './components/Image';
@@ -11,6 +12,7 @@ export { RichText, RichTextProps, RichTextPropTypes, RichTextField } from './com
 export { Text, TextField } from './components/Text';
 export { DateField, DateFieldProps } from './components/Date';
 export { FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
+export { BYOCProps, BYOCRenderer, BYOCRenderingParams, BYOCRendererProps, } from './components/BYOCRenderer';
 export { Link, LinkField, LinkFieldValue, LinkProps, LinkPropTypes } from './components/Link';
 export { File, FileField } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';

package/types/utils.d.ts

@@ -1,3 +1,4 @@
+import { ComponentFields } from '@sitecore-jss/sitecore-jss/layout';
 export declare const convertKebabCasetoCamelCase: (str: string) => string;
 /**
  * https://facebook.github.io/react/docs/dom-elements.html
@@ -18,8 +19,24 @@ export declare const convertAttributesToReactProps: (attributes: {
 /**
  * "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}
  */
 export declare const addClassName: (otherAttrs: {
     [key: string]: unknown;
 }) => void;
+/**
+ * Converts the given tag attributes object to a string
+ * @param {Object.<string, unknown>} attributes the attributes object
+ * @returns {string} string representation of the attributes
+ */
+export declare const getAttributesString: (attributes: {
+    [key: string]: unknown;
+}) => string;
+/**
+ * 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
+ */
+export declare const getDataFromFields: (fields: ComponentFields) => {
+    [key: string]: unknown;
+};