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

package/dist/esm/components/BYOCComponent.js

@@ -0,0 +1,91 @@
+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, _c;
+        const props = this.props;
+        if (this.state.error) {
+            return this.props.errorComponent ? (React.createElement(this.props.errorComponent, { error: this.state.error })) : (React.createElement(DefaultErrorComponent, { error: this.state.error }));
+        }
+        const { ComponentName: componentName } = props.params || {};
+        if (!componentName) {
+            const noNameProps = {
+                errorOverride: 'BYOC: The ComponentName for this rendering is missing',
+            };
+            return props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, noNameProps))) : (React.createElement(MissingComponent, Object.assign({}, noNameProps)));
+        }
+        const unRegisteredComponentProps = {
+            rendering: {
+                componentName: componentName,
+            },
+            errorOverride: 'BYOC: This component was not registered.',
+        };
+        const fallbackComponent = this.props.missingComponentComponent ? (React.createElement(this.props.missingComponentComponent, Object.assign({}, unRegisteredComponentProps))) : (React.createElement(MissingComponent, Object.assign({}, unRegisteredComponentProps)));
+        const ErrorComponent = this.props.errorComponent;
+        let componentProps = {};
+        if ((_a = props.params) === null || _a === void 0 ? void 0 : _a.ComponentProps) {
+            try {
+                componentProps = (_b = JSON.parse(props.params.ComponentProps)) !== null && _b !== void 0 ? _b : {};
+            }
+            catch (e) {
+                console.error(`Parsing props for ${componentName} component from rendering params failed. Error: ${e}`);
+                return ErrorComponent ? (React.createElement(ErrorComponent, { error: e })) : (React.createElement(DefaultErrorComponent, { error: e }));
+            }
+        }
+        // apply props from item datasource
+        const dataSourcesData = Object.assign(Object.assign({}, props.fetchedData), { _: getDataFromFields((_c = props.fields) !== null && _c !== void 0 ? _c : {}) });
+        // we render fallback on client to avoid problems with client-only components
+        return (React.createElement(FEAAS.ExternalComponent, Object.assign({ componentName: componentName, clientFallback: fallbackComponent, datasources: dataSourcesData }, 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.ComponentDataOverride
+            ? JSON.parse(params.ComponentDataOverride)
+            : {};
+        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/Date.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import PropTypes from 'prop-types';
 export const DateField = (_a) => {
-    var { field, tag, editable, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
+    var { field, tag, editable = true, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
     if (!field || (!field.editable && !field.value)) {
         return null;
     }
@@ -45,7 +45,4 @@ DateField.propTypes = {
     editable: PropTypes.bool,
     render: PropTypes.func,
 };
-DateField.defaultProps = {
-    editable: true,
-};
 DateField.displayName = 'Date';

package/dist/esm/components/FEaaSComponent.js

@@ -1,66 +1,120 @@
-/* eslint-disable react/prop-types */
-import React, { useEffect } from 'react';
-import { getFieldValue } from '@sitecore-jss/sitecore-jss/layout';
-export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
-export const 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] = getFieldValue(fields, key);
-        return acc;
-    }, data);
-    return data;
+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());
+    });
 };
-export const FEaaSComponent = ({ params, fields }) => {
-    if (!params ||
-        !params.LibraryId ||
-        !params.ComponentId ||
-        !params.ComponentVersion ||
-        !params.ComponentRevision ||
-        !params.ComponentHostName) {
+import React from 'react';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+import { getDataFromFields } from '../utils';
+export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
+/**
+ * @param {FEaaSComponentProps} props component props
+ */
+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.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
-    useEffect(() => {
-        var _a;
-        (_a = window.FEAASLoading) !== null && _a !== void 0 ? _a : (window.FEAASLoading = new Promise((resolve) => {
-            const script = document.createElement('script');
-            script.src = 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.createElement(React.Fragment, null,
-        React.createElement("link", { rel: "preload", as: "style", href: `${reqProps.cdn}/styles/${reqProps.library}/published.css` }),
-        React.createElement("link", { rel: "preload", as: "fetch", href: `${reqProps.cdn}/components/${reqProps.library}/${reqProps.component}/${reqProps.version}/${reqProps.revision}.html` }),
-        React.createElement("link", { rel: "preload", as: "script", href: FEAAS_MODULE_SRC }),
-        React.createElement("feaas-stylesheet", { library: reqProps.library, cdn: reqProps.cdn }),
-        React.createElement("feaas-component", Object.assign({}, reqProps, optProps))));
+    // combine fetchedData from server with datasource data (if present)
+    const data = Object.assign(Object.assign({}, props.fetchedData), { _: 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.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: [] }));
+};
+/**
+ * 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
+ */
+export function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
+    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 = {};
+        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,
+        };
+    });
+}
+/**
+ * @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
+ */
+export 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}`;
 };

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)))));
+};

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,18 +55,14 @@ 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);
 };
 export 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;
     }
@@ -76,7 +72,7 @@ export 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;
@@ -110,7 +106,4 @@ Image.propTypes = {
     mediaUrlPrefix: PropTypes.instanceOf(RegExp),
     imageParams: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired),
 };
-Image.defaultProps = {
-    editable: true,
-};
 Image.displayName = 'Image';

package/dist/esm/components/Link.js

@@ -11,9 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import parse from 'html-react-parser';
 export const Link = 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 ||
@@ -30,13 +29,13 @@ export const Link = 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 = parse(markup, {
-            htmlparser2: {
-                lowerCaseTags: false,
-            },
-        });
-        resultTags.push(React.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.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) {
@@ -81,7 +80,4 @@ export const LinkPropTypes = {
     showLinkTextWithChildrenPresent: PropTypes.bool,
 };
 Link.propTypes = LinkPropTypes;
-Link.defaultProps = {
-    editable: true,
-};
 Link.displayName = 'Link';

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/components/PlaceholderCommon.js

@@ -15,14 +15,9 @@ import { MissingComponent } from './MissingComponent';
 import { convertAttributesToReactProps } from '../utils';
 import { HiddenRendering, HIDDEN_RENDERING_NAME } from './HiddenRendering';
 import { FEaaSComponent, FEAAS_COMPONENT_RENDERING_NAME } from './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),
-];
+import { FEaaSWrapper, FEAAS_WRAPPER_RENDERING_NAME } from './FEaaSWrapper';
+import { BYOCComponent, BYOC_COMPONENT_RENDERING_NAME } from './BYOCComponent';
+import { BYOCWrapper, BYOC_WRAPPER_RENDERING_NAME } from './BYOCWrapper';
 export class PlaceholderCommon extends React.Component {
     constructor(props) {
         super(props);
@@ -38,8 +33,10 @@ export class PlaceholderCommon extends React.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];
                 }
@@ -97,8 +94,20 @@ export class PlaceholderCommon extends React.Component {
             else {
                 component = this.getComponentForRendering(componentRendering);
             }
-            if (componentRendering.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
-                component = FEaaSComponent;
+            // Fallback/defaults for Sitecore Component renderings (in case not defined in component factory)
+            if (!component) {
+                if (componentRendering.componentName === FEAAS_COMPONENT_RENDERING_NAME) {
+                    component = FEaaSComponent;
+                }
+                else if (componentRendering.componentName === FEAAS_WRAPPER_RENDERING_NAME) {
+                    component = FEaaSWrapper;
+                }
+                else if (componentRendering.componentName === BYOC_COMPONENT_RENDERING_NAME) {
+                    component = BYOCComponent;
+                }
+                else if (componentRendering.componentName === BYOC_WRAPPER_RENDERING_NAME) {
+                    component = 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/esm/components/RichText.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 export const RichText = 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;
     }
@@ -30,8 +30,4 @@ export const RichTextPropTypes = {
     editable: PropTypes.bool,
 };
 RichText.propTypes = RichTextPropTypes;
-RichText.defaultProps = {
-    tag: 'div',
-    editable: true,
-};
 RichText.displayName = 'RichText';

package/dist/esm/components/SitecoreContext.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import PropTypes from 'prop-types';
-import deepEqual from 'deep-equal';
+import fastDeepEqual from 'fast-deep-equal/es6/react';
 export const SitecoreContextReactContext = React.createContext({});
 export const ComponentFactoryReactContext = React.createContext({});
 export class SitecoreContext extends React.Component {
@@ -37,7 +37,7 @@ export class SitecoreContext extends React.Component {
     componentDidUpdate(prevProps) {
         // In case if somebody will manage SitecoreContext state by passing fresh `layoutData` prop
         // instead of using `updateSitecoreContext`
-        if (!deepEqual(prevProps.layoutData, this.props.layoutData)) {
+        if (!fastDeepEqual(prevProps.layoutData, this.props.layoutData)) {
             this.setContext(this.props.layoutData);
             return;
         }

package/dist/esm/components/Text.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import PropTypes from 'prop-types';
 export 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;
     }
@@ -69,8 +69,4 @@ Text.propTypes = {
     editable: PropTypes.bool,
     encode: PropTypes.bool,
 };
-Text.defaultProps = {
-    editable: true,
-    encode: true,
-};
 Text.displayName = 'Text';

package/dist/esm/index.js

@@ -1,16 +1,19 @@
-export { constants, enableDebug } from '@sitecore-jss/sitecore-jss';
+export { constants, enableDebug, ClientError } from '@sitecore-jss/sitecore-jss';
 export { isEditorActive, resetEditorChromes, DefaultEditFrameButton, DefaultEditFrameButtons, } from '@sitecore-jss/sitecore-jss/utils';
-export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
+export { getContentStylesheetLink, getComponentLibraryStylesheetLinks, LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
+export { DefaultRetryStrategy, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql';
 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 } from './components/FEaaSComponent';
+export { FEaaSComponent, fetchFEaaSComponentServerProps, } from './components/FEaaSComponent';
+export { FEaaSWrapper } from './components/FEaaSWrapper';
+export { BYOCComponent, fetchBYOCComponentServerProps, } from './components/BYOCComponent';
+export { BYOCWrapper } from './components/BYOCWrapper';
 export { Link, LinkPropTypes } from './components/Link';
 export { File } from './components/File';
 export { VisitorIdentification } from './components/VisitorIdentification';
@@ -20,3 +23,4 @@ export { withEditorChromes } from './enhancers/withEditorChromes';
 export { withPlaceholder } from './enhancers/withPlaceholder';
 export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
 export { EditFrame } from './components/EditFrame';
+export { ComponentBuilder } from './ComponentBuilder';