@sitecore-content-sdk/react 1.2.0-canary.44 → 1.2.0-canary.45

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

@@ -0,0 +1,28 @@
+"use strict";
+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.BYOCServerWrapper = void 0;
+const react_1 = __importDefault(require("react"));
+const feaas_utils_1 = require("./feaas-utils");
+const BYOCWrapper_1 = require("./BYOCWrapper");
+const models_1 = require("../Placeholder/models");
+const BYOCServerWrapper = (props) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const params = ((_a = props.rendering) === null || _a === void 0 ? void 0 : _a.params) || {};
+    // only pass serializable props to the client BYOC component
+    const serializableProps = Object.fromEntries(Object.entries(props).filter(([key]) => !models_1.nonSerializedPlaceholderProps.includes(key)));
+    const finalProps = Object.assign(Object.assign({}, (yield (0, feaas_utils_1.fetchBYOCComponentServerProps)(params))), serializableProps);
+    return react_1.default.createElement(BYOCWrapper_1.BYOCWrapper, Object.assign({}, finalProps));
+});
+exports.BYOCServerWrapper = BYOCServerWrapper;

package/dist/cjs/components/{BYOCComponent.js → FEaaS/BYOCWrapper.js}

@@ -33,26 +33,15 @@ var __importStar = (this && this.__importStar) || (function () {
         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.BYOCComponent = exports.BYOC_COMPONENT_RENDERING_NAME = void 0;
-exports.fetchBYOCComponentServerProps = fetchBYOCComponentServerProps;
+exports.BYOCWrapper = exports.BYOCComponent = void 0;
 const react_1 = __importDefault(require("react"));
-const utils_1 = require("../utils");
-const MissingComponent_1 = require("./MissingComponent");
 const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
-exports.BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';
+const utils_1 = require("../../utils");
+const MissingComponent_1 = require("../MissingComponent");
 const DefaultErrorComponent = (props) => {
     var _a;
     return (react_1.default.createElement("div", null,
@@ -60,11 +49,12 @@ const DefaultErrorComponent = (props) => {
         _a.message,
         "."));
 };
+// BYOCComponent remains for backward compatibility and testing purposes
 /**
  * BYOCComponent facilitate the rendering of external components. It manages potential errors,
  * missing components, and customization of error messages or alternative rendering components.
  * @param {ByocComponentProps} props component props
- * @returns dynamicly rendered component or Missing Component error frame
+ * @returns dynamically rendered component or Missing Component error frame
  */
 class BYOCComponent extends react_1.default.Component {
     constructor(props) {
@@ -117,17 +107,16 @@ class BYOCComponent extends react_1.default.Component {
 }
 exports.BYOCComponent = BYOCComponent;
 /**
- * Fetches server component props required for server rendering, based on rendering params.
- * @param {BYOCComponentParams} params component params
+ * SXA wrapper for BYOC components
+ * @param {BYOCComponentProps} props component props
+ * @returns wrapped BYOC component
  */
-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,
-        };
-    });
-}
+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_1.default.createElement("div", { className: styles ? styles : undefined, id: id ? id : undefined },
+        react_1.default.createElement("div", { className: "component-content" },
+            react_1.default.createElement(BYOCComponent, Object.assign({}, props)))));
+};
+exports.BYOCWrapper = BYOCWrapper;

package/dist/cjs/components/FEaaS/FEaaSSeverWrapper.js

@@ -0,0 +1,34 @@
+"use strict";
+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.FEaaSServerWrapper = void 0;
+const react_1 = __importDefault(require("react"));
+const feaas_utils_1 = require("./feaas-utils");
+const FEaaSWrapper_1 = require("./FEaaSWrapper");
+const models_1 = require("../Placeholder/models");
+/**
+ * Server component for FEaaS. Retrieves server props and renders client FEaaSWrapper.
+ * @param {FEaaSComponentProps} props incoming props
+ * @returns {Promise<JSX.Element>} rendered FEaaSWrapper component
+ */
+const FEaaSServerWrapper = (props) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const params = ((_a = props.rendering) === null || _a === void 0 ? void 0 : _a.params) || {};
+    const isPageStateNormal = (_b = props.page) === null || _b === void 0 ? void 0 : _b.mode.isNormal;
+    // only pass serializable props to the client FEaaS component
+    const serializableProps = Object.fromEntries(Object.entries(props).filter(([key]) => !models_1.nonSerializedPlaceholderProps.includes(key)));
+    const finalProps = Object.assign(Object.assign({}, (yield (0, feaas_utils_1.fetchFEaaSComponentServerProps)(params, isPageStateNormal))), serializableProps);
+    return react_1.default.createElement(FEaaSWrapper_1.FEaaSWrapper, Object.assign({}, finalProps));
+});
+exports.FEaaSServerWrapper = FEaaSServerWrapper;

package/dist/cjs/components/FEaaS/FEaaSWrapper.js

@@ -0,0 +1,78 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FEaaSWrapper = exports.FEaaSComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
+const utils_1 = require("../../utils");
+// FEaaSComponent remains for backward compatibility and testing purposes
+/**
+ * @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;
+    }
+    // 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 Content SDK 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 Content SDK 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;
+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(exports.FEaaSComponent, Object.assign({}, props)))));
+};
+exports.FEaaSWrapper = FEaaSWrapper;

package/dist/cjs/components/{FEaaSComponent.js → FEaaS/feaas-utils.js}

@@ -1,5 +1,4 @@
 "use strict";
-'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -42,52 +41,36 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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.composeComponentEndpoint = exports.FEaaSComponent = exports.FEAAS_COMPONENT_RENDERING_NAME = void 0;
+exports.composeComponentEndpoint = void 0;
+exports.fetchBYOCComponentServerProps = fetchBYOCComponentServerProps;
 exports.fetchFEaaSComponentServerProps = fetchFEaaSComponentServerProps;
-const react_1 = __importDefault(require("react"));
 const FEAAS = __importStar(require("@sitecore-feaas/clientside/react"));
-const layout_1 = require("@sitecore-content-sdk/core/layout");
-const utils_1 = require("../utils");
-exports.FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
 /**
- * @param {FEaaSComponentProps} props component props
+ * Fetches server component props required for server rendering, based on rendering params.
+ * @param {BYOCComponentParams} params component params
  */
-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;
-    }
-    // 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 Content SDK 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 Content SDK 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;
+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,
+        };
+    });
+}
 /**
  * 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 {boolean} [isPageStateNormal] whether page is in normal mode
  * @param {string} [endpointOverride] optional override for component endpoint
  */
-function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
+function fetchFEaaSComponentServerProps(params, isPageStateNormal, endpointOverride) {
     return __awaiter(this, void 0, void 0, function* () {
-        const revisionFallback = pageState && pageState !== layout_1.LayoutServicePageState.Normal ? 'staged' : 'published';
+        const revisionFallback = isPageStateNormal ? 'published' : 'staged';
         const src = endpointOverride || (0, exports.composeComponentEndpoint)(params, revisionFallback);
         let template = '';
         let fetchedData = {};

package/dist/cjs/components/FEaaS/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchBYOCComponentServerProps = exports.fetchFEaaSComponentServerProps = exports.BYOCServerWrapper = exports.FEaaSServerWrapper = exports.BYOC_WRAPPER_RENDERING_NAME = exports.FEAAS_WRAPPER_RENDERING_NAME = exports.BYOC_COMPONENT_RENDERING_NAME = exports.FEAAS_COMPONENT_RENDERING_NAME = exports.BYOCComponent = exports.BYOCWrapper = exports.FEaaSComponent = exports.FEaaSWrapper = void 0;
+var FEaaSWrapper_1 = require("./FEaaSWrapper");
+Object.defineProperty(exports, "FEaaSWrapper", { enumerable: true, get: function () { return FEaaSWrapper_1.FEaaSWrapper; } });
+Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: function () { return FEaaSWrapper_1.FEaaSComponent; } });
+var BYOCWrapper_1 = require("./BYOCWrapper");
+Object.defineProperty(exports, "BYOCWrapper", { enumerable: true, get: function () { return BYOCWrapper_1.BYOCWrapper; } });
+Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return BYOCWrapper_1.BYOCComponent; } });
+var models_1 = require("./models");
+Object.defineProperty(exports, "FEAAS_COMPONENT_RENDERING_NAME", { enumerable: true, get: function () { return models_1.FEAAS_COMPONENT_RENDERING_NAME; } });
+Object.defineProperty(exports, "BYOC_COMPONENT_RENDERING_NAME", { enumerable: true, get: function () { return models_1.BYOC_COMPONENT_RENDERING_NAME; } });
+Object.defineProperty(exports, "FEAAS_WRAPPER_RENDERING_NAME", { enumerable: true, get: function () { return models_1.FEAAS_WRAPPER_RENDERING_NAME; } });
+Object.defineProperty(exports, "BYOC_WRAPPER_RENDERING_NAME", { enumerable: true, get: function () { return models_1.BYOC_WRAPPER_RENDERING_NAME; } });
+var FEaaSSeverWrapper_1 = require("./FEaaSSeverWrapper");
+Object.defineProperty(exports, "FEaaSServerWrapper", { enumerable: true, get: function () { return FEaaSSeverWrapper_1.FEaaSServerWrapper; } });
+var BYOCServerWrapper_1 = require("./BYOCServerWrapper");
+Object.defineProperty(exports, "BYOCServerWrapper", { enumerable: true, get: function () { return BYOCServerWrapper_1.BYOCServerWrapper; } });
+var feaas_utils_1 = require("./feaas-utils");
+Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return feaas_utils_1.fetchFEaaSComponentServerProps; } });
+Object.defineProperty(exports, "fetchBYOCComponentServerProps", { enumerable: true, get: function () { return feaas_utils_1.fetchBYOCComponentServerProps; } });

package/dist/cjs/components/FEaaS/models.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BYOC_COMPONENT_RENDERING_NAME = exports.BYOC_WRAPPER_RENDERING_NAME = exports.FEAAS_COMPONENT_RENDERING_NAME = exports.FEAAS_WRAPPER_RENDERING_NAME = void 0;
+exports.FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
+exports.FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
+exports.BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
+exports.BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';

package/dist/cjs/components/Placeholder/models.js

@@ -15,5 +15,4 @@ exports.nonSerializedPlaceholderProps = [
     'page',
     'missingComponentComponent',
     'hiddenRenderingComponent',
-    'rendering',
 ];

package/dist/cjs/components/Placeholder/placeholder-utils.js

@@ -21,10 +21,7 @@ const sharedTypes_1 = require("../sharedTypes");
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const core_1 = require("@sitecore-content-sdk/core");
 const HiddenRendering_1 = require("../HiddenRendering");
-const FEaaSComponent_1 = require("../FEaaSComponent");
-const FEaaSWrapper_1 = require("../FEaaSWrapper");
-const BYOCComponent_1 = require("../BYOCComponent");
-const BYOCWrapper_1 = require("../BYOCWrapper");
+const FEaaS_1 = require("../FEaaS");
 /**
  * Get the renderings for the specified placeholder from the rendering data.
  * @param {ComponentRendering | RouteData } rendering rendering data
@@ -142,26 +139,26 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
     }
     if (!component) {
         // Fallback/defaults for Sitecore Component renderings (in case not defined in component map)
-        if (renderingDefinition.componentName === FEaaSComponent_1.FEAAS_COMPONENT_RENDERING_NAME) {
+        if (renderingDefinition.componentName === FEaaS_1.FEAAS_COMPONENT_RENDERING_NAME) {
             return {
-                component: FEaaSComponent_1.FEaaSComponent,
+                component: FEaaS_1.FEaaSComponent,
             };
         }
-        else if (renderingDefinition.componentName === FEaaSWrapper_1.FEAAS_WRAPPER_RENDERING_NAME) {
+        else if (renderingDefinition.componentName === FEaaS_1.FEAAS_WRAPPER_RENDERING_NAME) {
             return {
-                component: FEaaSWrapper_1.FEaaSWrapper,
+                component: FEaaS_1.FEaaSWrapper,
             };
         }
-        else if (renderingDefinition.componentName === BYOCComponent_1.BYOC_COMPONENT_RENDERING_NAME) {
+        else if (renderingDefinition.componentName === FEaaS_1.BYOC_COMPONENT_RENDERING_NAME) {
             return {
-                component: BYOCComponent_1.BYOCComponent,
+                component: FEaaS_1.BYOCComponent,
             };
         }
-        else if (renderingDefinition.componentName === BYOCWrapper_1.BYOC_WRAPPER_RENDERING_NAME) {
+        else if (renderingDefinition.componentName === FEaaS_1.BYOC_WRAPPER_RENDERING_NAME) {
             // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
             // that's why we need to mark BYOC wrapper dynamic
             return {
-                component: BYOCWrapper_1.BYOCWrapper,
+                component: FEaaS_1.BYOCWrapper,
                 dynamic: true,
             };
         }
@@ -177,10 +174,12 @@ const getComponentForRendering = (renderingDefinition, placeholderName, componen
         : component.default ||
             component.Default ||
             component;
+    const dynamic = !!((_b = renderedComponent.render) === null || _b === void 0 ? void 0 : _b.preload) ||
+        renderingDefinition.componentName === FEaaS_1.BYOC_WRAPPER_RENDERING_NAME;
     // all dynamic elements will have a separate render prop
     return {
         component: renderedComponent,
-        dynamic: !!((_b = renderedComponent.render) === null || _b === void 0 ? void 0 : _b.preload),
+        dynamic,
         componentType: component.componentType,
     };
 };

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SitePathService = exports.ClientEditingChromesUpdate = exports.DefaultEmptyFieldEditingComponentImage = exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecore = exports.withSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.DesignLibrary = exports.FEaaSWrapper = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.ServerPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.DefaultEmptyFieldEditingComponentText = exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecore = exports.withSitecore = exports.SitecoreProviderReactContext = exports.SitecoreProvider = exports.File = exports.Link = exports.DesignLibrary = exports.BYOCServerWrapper = exports.FEaaSServerWrapper = exports.FEaaSClientWrapper = exports.FEaaSWrapper = exports.BYOCClientWrapper = exports.BYOCWrapper = exports.fetchBYOCComponentServerProps = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = exports.FEaaSComponent = exports.DateField = exports.Text = exports.RichText = exports.Image = exports.ServerPlaceholder = exports.Placeholder = exports.Form = exports.mediaApi = exports.ErrorPage = exports.GraphQLRequestClient = exports.DefaultRetryStrategy = exports.DictionaryService = exports.EditMode = exports.getFieldValue = exports.getChildPlaceholder = exports.LayoutService = exports.LayoutServicePageState = exports.getDesignLibraryStylesheetLinks = exports.getContentStylesheetLink = exports.resetEditorChromes = exports.isEditorActive = exports.NativeDataFetcher = exports.MemoryCacheClient = exports.ClientError = exports.enableDebug = exports.constants = void 0;
+exports.SitePathService = exports.ClientEditingChromesUpdate = exports.DefaultEmptyFieldEditingComponentImage = void 0;
 var core_1 = require("@sitecore-content-sdk/core");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return core_1.constants; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return core_1.enableDebug; } });
@@ -39,18 +40,20 @@ var Text_1 = require("./components/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 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 FEaaS_1 = require("./components/FEaaS");
+Object.defineProperty(exports, "FEaaSComponent", { enumerable: true, get: function () { return FEaaS_1.FEaaSComponent; } });
+Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: true, get: function () { return FEaaS_1.fetchFEaaSComponentServerProps; } });
+Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return FEaaS_1.BYOCComponent; } });
+Object.defineProperty(exports, "fetchBYOCComponentServerProps", { enumerable: true, get: function () { return FEaaS_1.fetchBYOCComponentServerProps; } });
+// leaving original names for backward compatibility
+Object.defineProperty(exports, "BYOCWrapper", { enumerable: true, get: function () { return FEaaS_1.BYOCWrapper; } });
+Object.defineProperty(exports, "BYOCClientWrapper", { enumerable: true, get: function () { return FEaaS_1.BYOCWrapper; } });
+Object.defineProperty(exports, "FEaaSWrapper", { enumerable: true, get: function () { return FEaaS_1.FEaaSWrapper; } });
+Object.defineProperty(exports, "FEaaSClientWrapper", { enumerable: true, get: function () { return FEaaS_1.FEaaSWrapper; } });
+Object.defineProperty(exports, "FEaaSServerWrapper", { enumerable: true, get: function () { return FEaaS_1.FEaaSServerWrapper; } });
+Object.defineProperty(exports, "BYOCServerWrapper", { enumerable: true, get: function () { return FEaaS_1.BYOCServerWrapper; } });
 var DesignLibrary_1 = require("./components/DesignLibrary");
 Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
-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; } });
 var File_1 = require("./components/File");

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

@@ -0,0 +1,21 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { fetchBYOCComponentServerProps } from './feaas-utils';
+import { BYOCWrapper } from './BYOCWrapper';
+import { nonSerializedPlaceholderProps } from '../Placeholder/models';
+export const BYOCServerWrapper = (props) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
+    const params = ((_a = props.rendering) === null || _a === void 0 ? void 0 : _a.params) || {};
+    // only pass serializable props to the client BYOC component
+    const serializableProps = Object.fromEntries(Object.entries(props).filter(([key]) => !nonSerializedPlaceholderProps.includes(key)));
+    const finalProps = Object.assign(Object.assign({}, (yield fetchBYOCComponentServerProps(params))), serializableProps);
+    return React.createElement(BYOCWrapper, Object.assign({}, finalProps));
+});

package/dist/esm/components/{BYOCComponent.js → FEaaS/BYOCWrapper.js}

@@ -1,18 +1,8 @@
 'use client';
-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';
+import { getDataFromFields } from '../../utils';
+import { MissingComponent } from '../MissingComponent';
 const DefaultErrorComponent = (props) => {
     var _a;
     return (React.createElement("div", null,
@@ -20,11 +10,12 @@ const DefaultErrorComponent = (props) => {
         _a.message,
         "."));
 };
+// BYOCComponent remains for backward compatibility and testing purposes
 /**
  * BYOCComponent facilitate the rendering of external components. It manages potential errors,
  * missing components, and customization of error messages or alternative rendering components.
  * @param {ByocComponentProps} props component props
- * @returns dynamicly rendered component or Missing Component error frame
+ * @returns dynamically rendered component or Missing Component error frame
  */
 export class BYOCComponent extends React.Component {
     constructor(props) {
@@ -76,17 +67,15 @@ export class BYOCComponent extends React.Component {
     }
 }
 /**
- * Fetches server component props required for server rendering, based on rendering params.
- * @param {BYOCComponentParams} params component params
+ * SXA wrapper for BYOC components
+ * @param {BYOCComponentProps} props component props
+ * @returns wrapped BYOC component
  */
-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,
-        };
-    });
-}
+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/FEaaS/FEaaSSeverWrapper.js

@@ -0,0 +1,27 @@
+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 { fetchFEaaSComponentServerProps } from './feaas-utils';
+import { FEaaSWrapper } from './FEaaSWrapper';
+import { nonSerializedPlaceholderProps } from '../Placeholder/models';
+/**
+ * Server component for FEaaS. Retrieves server props and renders client FEaaSWrapper.
+ * @param {FEaaSComponentProps} props incoming props
+ * @returns {Promise<JSX.Element>} rendered FEaaSWrapper component
+ */
+export const FEaaSServerWrapper = (props) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    const params = ((_a = props.rendering) === null || _a === void 0 ? void 0 : _a.params) || {};
+    const isPageStateNormal = (_b = props.page) === null || _b === void 0 ? void 0 : _b.mode.isNormal;
+    // only pass serializable props to the client FEaaS component
+    const serializableProps = Object.fromEntries(Object.entries(props).filter(([key]) => !nonSerializedPlaceholderProps.includes(key)));
+    const finalProps = Object.assign(Object.assign({}, (yield fetchFEaaSComponentServerProps(params, isPageStateNormal))), serializableProps);
+    return React.createElement(FEaaSWrapper, Object.assign({}, finalProps));
+});

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

@@ -0,0 +1,37 @@
+'use client';
+import React from 'react';
+import * as FEAAS from '@sitecore-feaas/clientside/react';
+import { getDataFromFields } from '../../utils';
+// FEaaSComponent remains for backward compatibility and testing purposes
+/**
+ * @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;
+    }
+    // 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 Content SDK 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 Content SDK 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: [] }));
+};
+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)))));
+};