@sitecore-jss/sitecore-jss-react 22.0.0-canary.9 → 22.0.0

package/dist/cjs/components/FEaaSComponent.js

@@ -22,72 +22,131 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FEaaSComponent = exports.FEAAS_MODULE_SRC = exports.FEAAS_COMPONENT_RENDERING_NAME = void 0;
-/* eslint-disable react/prop-types */
-const react_1 = __importStar(require("react"));
+exports.composeComponentEndpoint = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.FEAAS_COMPONENT_RENDERING_NAME = void 0;
+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';
-exports.FEAAS_MODULE_SRC = 'https://feaasstatic.blob.core.windows.net/packages/clientside/latest/browser/index.esm.js';
-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;
-};
-const FEaaSComponent = ({ params, fields }) => {
-    if (!params ||
-        !params.LibraryId ||
-        !params.ComponentId ||
-        !params.ComponentVersion ||
-        !params.ComponentRevision ||
-        !params.ComponentHostName) {
+/**
+ * @param {FEaaSComponentProps} props component props
+ */
+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.template &&
+        (!props.params ||
+            !props.params.LibraryId ||
+            !props.params.ComponentId ||
+            !props.params.ComponentVersion ||
+            !props.params.ComponentHostName ||
+            !computedRevision)) {
         // Missing FEaaS component required props
         return null;
     }
-    // Load script asynchronously on the page once, only if FEAAS component is used
-    (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = window.FEAASLoading) !== null && _a !== void 0 ? _a : (window.FEAASLoading = new Promise((resolve) => {
-            const script = document.createElement('script');
-            script.src = exports.FEAAS_MODULE_SRC;
-            script.type = 'module';
-            script.onload = resolve;
-            document.head.appendChild(script);
-        }));
-    }, []);
-    let data = '';
-    if (params === null || params === void 0 ? void 0 : params.ComponentDataOverride) {
-        // Use override data if provided
-        data = params.ComponentDataOverride;
-    }
-    else if (fields) {
-        // Otherwise use datasource data (provided in fields)
-        // FEaaS expects wrapping "_" as catch-all datasource template id
-        data = JSON.stringify({ _: getDataFromFields(fields) });
-    }
-    const reqProps = {
-        library: params.LibraryId,
-        cdn: params.ComponentHostName,
-        component: params.ComponentId,
-        version: params.ComponentVersion,
-        revision: params.ComponentRevision,
-        data,
-    };
-    const optProps = {};
-    if (params.ComponentInstanceId) {
-        optProps.instance = params.ComponentInstanceId;
-    }
-    if (params.ComponentHTMLOverride) {
-        optProps.dangerouslySetInnerHTML = { __html: params.ComponentHTMLOverride };
-    }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("link", { rel: "preload", as: "style", href: `${reqProps.cdn}/styles/${reqProps.library}/published.css` }),
-        react_1.default.createElement("link", { rel: "preload", as: "fetch", href: `${reqProps.cdn}/components/${reqProps.library}/${reqProps.component}/${reqProps.version}/${reqProps.revision}.html` }),
-        react_1.default.createElement("link", { rel: "preload", as: "script", href: exports.FEAAS_MODULE_SRC }),
-        react_1.default.createElement("feaas-stylesheet", { library: reqProps.library, cdn: reqProps.cdn }),
-        react_1.default.createElement("feaas-component", Object.assign({}, reqProps, optProps))));
+    // combine fetchedData from server with datasource data (if present)
+    const data = Object.assign(Object.assign({}, props.fetchedData), { _: (0, utils_1.getDataFromFields)((_b = props.fields) !== null && _b !== void 0 ? _b : {}) });
+    // 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
+    // FEAAS should not fetch anything, since JSS does the fetching - so we pass empty array into fetch param
+    return (react_1.default.createElement(FEAAS.Component, { data: data, template: props.template, cdn: (_c = props.params) === null || _c === void 0 ? void 0 : _c.ComponentHostName, library: (_d = props.params) === null || _d === void 0 ? void 0 : _d.LibraryId, version: (_e = props.params) === null || _e === void 0 ? void 0 : _e.ComponentVersion, component: (_f = props.params) === null || _f === void 0 ? void 0 : _f.ComponentId, instance: (_g = props.params) === null || _g === void 0 ? void 0 : _g.ComponentInstanceId, revision: computedRevision, fetch: [] }));
 };
 exports.FEaaSComponent = FEaaSComponent;
+/**
+ * Fetches server component props required for server rendering, based on rendering params.
+ * Component endpoint will either be retrieved from params or from endpointOverride
+ * @param {FEaaSComponentParams} params component params
+ * @param {LayoutServicePageState} [pageState] page state to determine which component variant to use
+ * @param {string} [endpointOverride] optional override for component endpoint
+ */
+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 = {};
+        const fetchDataOptions = params.ComponentDataOverride
+            ? JSON.parse(params.ComponentDataOverride)
+            : {};
+        try {
+            template = yield fetchComponentTemplate(src, params, revisionFallback);
+            fetchedData = yield fetchData(fetchDataOptions);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        return {
+            fetchedData,
+            revisionFallback,
+            template,
+        };
+    });
+}
+exports.fetchFEaaSComponentServerProps = fetchFEaaSComponentServerProps;
+/**
+ * @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
+ * @param {RevisionType} revisionFallback fallback revision to fetch if revision is absent in params
+ * @returns component endpoint URL
+ */
+const composeComponentEndpoint = (params, revisionFallback) => {
+    const revision = params.ComponentRevision || revisionFallback;
+    const hostname = params.ComponentHostName.startsWith('https://')
+        ? params.ComponentHostName
+        : `https://${params.ComponentHostName}`;
+    return `${hostname}/components/${params.LibraryId}/${params.ComponentId}/${params.ComponentVersion}/${revision}`;
+};
+exports.composeComponentEndpoint = composeComponentEndpoint;

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,19 +61,15 @@ 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);
 };
 exports.getEEMarkup = getEEMarkup;
 const Image = (_a) => {
-    var { media, editable, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["media", "editable", "imageParams", "field", "mediaUrlPrefix"]);
-    // allows the mistake of using 'field' prop instead of 'media' (consistent with other helpers)
-    if (field && !media) {
-        media = field;
-    }
-    const dynamicMedia = media;
-    if (!media ||
+    var { editable = true, imageParams, field, mediaUrlPrefix } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix"]);
+    const dynamicMedia = field;
+    if (!field ||
         (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
         return null;
     }
@@ -83,7 +79,7 @@ const Image = (_a) => {
     }
     // some wise-guy/gal is passing in a 'raw' image object value
     const img = dynamicMedia.src
-        ? media
+        ? field
         : dynamicMedia.value;
     if (!img) {
         return null;
@@ -118,7 +114,4 @@ exports.Image.propTypes = {
     mediaUrlPrefix: prop_types_1.default.instanceOf(RegExp),
     imageParams: prop_types_1.default.objectOf(prop_types_1.default.oneOfType([prop_types_1.default.number.isRequired, prop_types_1.default.string.isRequired]).isRequired),
 };
-exports.Image.defaultProps = {
-    editable: true,
-};
 exports.Image.displayName = 'Image';

package/dist/cjs/components/Link.js

@@ -40,9 +40,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkPropTypes = exports.Link = void 0;
 const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
-const html_react_parser_1 = __importDefault(require("html-react-parser"));
 exports.Link = (0, react_1.forwardRef)((_a, ref) => {
-    var { field, editable, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
+    var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
     const children = otherProps.children;
     const dynamicField = field;
     if (!field ||
@@ -59,13 +58,13 @@ exports.Link = (0, react_1.forwardRef)((_a, ref) => {
         // However, we cannot combine arbitrary unparsed HTML (innerHTML) based components with actual vDOM components (the children)
         // because the innerHTML is not parsed - it'd make a discontinuous vDOM. So, we'll go for the next best compromise of rendering the link field and children separately
         // as siblings. Should be "good enough" for most cases - and write your own helper if it isn't. Or bring xEditor out of 2006.
-        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper' }, otherProps), { key: 'editable' });
-        const components = (0, html_react_parser_1.default)(markup, {
-            htmlparser2: {
-                lowerCaseTags: false,
-            },
-        });
-        resultTags.push(react_1.default.createElement("span", Object.assign({}, htmlProps), components));
+        const htmlProps = Object.assign(Object.assign({ className: 'sc-link-wrapper', dangerouslySetInnerHTML: {
+                __html: markup,
+            } }, otherProps), { key: 'editable' });
+        // Exclude children, since 'dangerouslySetInnerHTML' and 'children' can't be set together
+        // and children will be added as a sibling
+        delete htmlProps.children;
+        resultTags.push(react_1.default.createElement("span", Object.assign({}, htmlProps)));
         // don't render normal link tag when editing, if no children exist
         // this preserves normal-ish behavior if not using a link body (no hacks required)
         if (!children) {
@@ -110,7 +109,4 @@ exports.LinkPropTypes = {
     showLinkTextWithChildrenPresent: prop_types_1.default.bool,
 };
 exports.Link.propTypes = exports.LinkPropTypes;
-exports.Link.defaultProps = {
-    editable: true,
-};
 exports.Link.displayName = 'Link';

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,14 +21,9 @@ const MissingComponent_1 = require("./MissingComponent");
 const utils_1 = require("../utils");
 const HiddenRendering_1 = require("./HiddenRendering");
 const FEaaSComponent_1 = require("./FEaaSComponent");
-/**
- * These patterns need for right rendering Dynamic placeholders.
- * Must be distinguished Splitter components and another placeholders(containers)
- */
-const EXCLUDE_PLACEHOLDERS_RENDER = [
-    new RegExp(/column-(\d{1})-\{\*\}/i),
-    new RegExp(/row-(\d{1})-\{\*\}/i),
-];
+const FEaaSWrapper_1 = require("./FEaaSWrapper");
+const BYOCComponent_1 = require("./BYOCComponent");
+const BYOCWrapper_1 = require("./BYOCWrapper");
 class PlaceholderCommon extends react_1.default.Component {
     constructor(props) {
         super(props);
@@ -44,8 +39,10 @@ class PlaceholderCommon extends react_1.default.Component {
         from backend side we get common name of placeholder is called 'nameOfContainer-{*}' where '{*}' marker for replacing **/
         if (rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) {
             Object.keys(rendering.placeholders).forEach((placeholder) => {
-                if (placeholder.indexOf('{*}') !== -1 &&
-                    !EXCLUDE_PLACEHOLDERS_RENDER.some((pattern) => name.search(pattern) !== -1)) {
+                const patternPlaceholder = placeholder.indexOf('{*}') !== -1
+                    ? new RegExp(`^${placeholder.replace(/\{\*\}+/i, '\\d+')}$`)
+                    : null;
+                if (patternPlaceholder && patternPlaceholder.test(name)) {
                     rendering.placeholders[name] = rendering.placeholders[placeholder];
                     delete rendering.placeholders[placeholder];
                 }
@@ -103,8 +100,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/components/RichText.js

@@ -41,7 +41,7 @@ exports.RichTextPropTypes = exports.RichText = void 0;
 const react_1 = __importStar(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 exports.RichText = (0, react_1.forwardRef)((_a, ref) => {
-    var { field, tag, editable } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
+    var { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
     if (!field || (!field.editable && !field.value)) {
         return null;
     }
@@ -59,8 +59,4 @@ exports.RichTextPropTypes = {
     editable: prop_types_1.default.bool,
 };
 exports.RichText.propTypes = exports.RichTextPropTypes;
-exports.RichText.defaultProps = {
-    tag: 'div',
-    editable: true,
-};
 exports.RichText.displayName = 'RichText';

package/dist/cjs/components/SitecoreContext.js

@@ -7,7 +7,7 @@ exports.SitecoreContext = exports.ComponentFactoryReactContext = exports.Sitecor
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
-const deep_equal_1 = __importDefault(require("deep-equal"));
+const react_2 = __importDefault(require("fast-deep-equal/es6/react"));
 exports.SitecoreContextReactContext = react_1.default.createContext({});
 exports.ComponentFactoryReactContext = react_1.default.createContext({});
 class SitecoreContext extends react_1.default.Component {
@@ -43,7 +43,7 @@ class SitecoreContext extends react_1.default.Component {
     componentDidUpdate(prevProps) {
         // In case if somebody will manage SitecoreContext state by passing fresh `layoutData` prop
         // instead of using `updateSitecoreContext`
-        if (!(0, deep_equal_1.default)(prevProps.layoutData, this.props.layoutData)) {
+        if (!(0, react_2.default)(prevProps.layoutData, this.props.layoutData)) {
             this.setContext(this.props.layoutData);
             return;
         }

package/dist/cjs/components/Text.js

@@ -18,7 +18,7 @@ exports.Text = void 0;
 const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const Text = (_a) => {
-    var { field, tag, editable, encode } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
+    var { field, tag, editable = true, encode = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "encode"]);
     if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
         return null;
     }
@@ -76,8 +76,4 @@ exports.Text.propTypes = {
     editable: prop_types_1.default.bool,
     encode: prop_types_1.default.bool,
 };
-exports.Text.defaultProps = {
-    editable: true,
-    encode: true,
-};
 exports.Text.displayName = 'Text';

package/dist/cjs/index.js

@@ -1,15 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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.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;
+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.mediaApi = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.getComponentLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.DefaultEditFrameButtons = exports.DefaultEditFrameButton = exports.resetEditorChromes = exports.isEditorActive = exports.ClientError = 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; } });
+Object.defineProperty(exports, "ClientError", { enumerable: true, get: function () { return sitecore_jss_1.ClientError; } });
 var utils_1 = require("@sitecore-jss/sitecore-jss/utils");
 Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_1.isEditorActive; } });
 Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_1.resetEditorChromes; } });
 Object.defineProperty(exports, "DefaultEditFrameButton", { enumerable: true, get: function () { return utils_1.DefaultEditFrameButton; } });
 Object.defineProperty(exports, "DefaultEditFrameButtons", { enumerable: true, get: function () { return utils_1.DefaultEditFrameButtons; } });
 var layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
+Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return layout_1.getComponentLibraryStylesheetLinks; } });
 Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return layout_1.LayoutServicePageState; } });
 Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return layout_1.GraphQLLayoutService; } });
 Object.defineProperty(exports, "RestLayoutService", { enumerable: true, get: function () { return layout_1.RestLayoutService; } });
@@ -20,10 +23,11 @@ Object.defineProperty(exports, "trackingApi", { enumerable: true, get: function
 var i18n_1 = require("@sitecore-jss/sitecore-jss/i18n");
 Object.defineProperty(exports, "GraphQLDictionaryService", { enumerable: true, get: function () { return i18n_1.GraphQLDictionaryService; } });
 Object.defineProperty(exports, "RestDictionaryService", { enumerable: true, get: function () { return i18n_1.RestDictionaryService; } });
+var graphql_1 = require("@sitecore-jss/sitecore-jss/graphql");
+Object.defineProperty(exports, "DefaultRetryStrategy", { enumerable: true, get: function () { return graphql_1.DefaultRetryStrategy; } });
+Object.defineProperty(exports, "GraphQLRequestClient", { enumerable: true, get: function () { return graphql_1.GraphQLRequestClient; } });
 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");
@@ -38,6 +42,14 @@ var Date_1 = require("./components/Date");
 Object.defineProperty(exports, "DateField", { enumerable: true, get: function () { return Date_1.DateField; } });
 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; } });
@@ -59,3 +71,5 @@ var withDatasourceCheck_1 = require("./enhancers/withDatasourceCheck");
 Object.defineProperty(exports, "withDatasourceCheck", { enumerable: true, get: function () { return withDatasourceCheck_1.withDatasourceCheck; } });
 var EditFrame_1 = require("./components/EditFrame");
 Object.defineProperty(exports, "EditFrame", { enumerable: true, get: function () { return EditFrame_1.EditFrame; } });
+var ComponentBuilder_1 = require("./ComponentBuilder");
+Object.defineProperty(exports, "ComponentBuilder", { enumerable: true, get: function () { return ComponentBuilder_1.ComponentBuilder; } });

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

@@ -0,0 +1,21 @@
+/**
+ * React implementation of component builder class for building components based on the configuration.
+ */
+export class ComponentBuilder {
+    constructor(config) {
+        this.config = config;
+        this.components = new Map([...config.components]);
+    }
+    /**
+     * Creates a new instance of component factory
+     * @returns {ComponentFactory} Component factory implementation
+     */
+    getComponentFactory() {
+        return (componentName) => {
+            const component = this.components.get(componentName);
+            if (!component)
+                return null;
+            return component;
+        };
+    }
+}