@sitecore-content-sdk/react 1.2.0-canary.8 → 1.2.0

package/dist/cjs/components/DesignLibrary.js

@@ -43,7 +43,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesignLibrary = exports.VariantGeneration = exports.__mockDependencies = void 0;
+exports.DesignLibrary = exports.__mockDependencies = void 0;
 /* eslint-disable jsdoc/require-param */
 /* eslint-disable prefer-const */
 const react_1 = __importStar(require("react"));
@@ -52,55 +52,31 @@ const layout_1 = require("@sitecore-content-sdk/core/layout");
 const editing_1 = require("@sitecore-content-sdk/core/editing");
 const codegen = __importStar(require("@sitecore-content-sdk/core/codegen"));
 const withSitecore_1 = require("../enhancers/withSitecore");
+const Placeholder_2 = require("./Placeholder");
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
 const __mockDependencies = (mocks) => {
     addComponentPreviewHandler = mocks.addComponentPreviewHandler;
 };
 exports.__mockDependencies = __mockDependencies;
-/**
- * This component is used to render the component in preview mode.
- * It is used to send the rendered event to the parent window and render the component.
- * Reacts on the update event from the parent window and re-renders the component.
- */
-const Preview = () => {
-    const { page } = (0, withSitecore_1.useSitecore)();
-    const { layout: { sitecore: { route }, }, } = page;
-    const [renderKey, setRenderKey] = (0, react_1.useState)(0);
-    const [rootUpdate, setRootUpdate] = (0, react_1.useState)(null);
-    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
-    // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
-    let componentReady = false;
-    // have an up-to-date layout state between re-renders (SSR re-render excluded)
-    const persistedRoot = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [rootComponent, rootUpdate]);
-    route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
-    (0, react_1.useEffect)(() => {
-        // useEffect will fire when components are ready - and we inform the whole wide world of it too
-        if (!componentReady) {
-            componentReady = true;
-            window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rootComponent.uid), '*');
-        }
-        const unsubscribe = (0, editing_1.addComponentUpdateHandler)(persistedRoot, (updatedRoot) => {
-            setRootUpdate(Object.assign({}, updatedRoot));
-            setRenderKey((key) => key + 1);
-        });
-        // useEffect will cleanup event handler on re-render
-        return unsubscribe;
-    }, []);
-    (0, react_1.useEffect)(() => {
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0) {
-            return;
-        }
-        window.top.postMessage((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
-    }, [renderKey, rootComponent.uid]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("main", null,
-            react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
-};
 const sendErrorEvent = (uid, error, type) => {
     const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
     console.error('Component Library: sending error event', errorEvent);
-    window.top.postMessage(errorEvent, '*');
+    if (typeof window !== 'undefined') {
+        const target = window.parent && window.parent !== window ? window.parent : window;
+        target.postMessage(errorEvent, '*');
+    }
+};
+const postToDL = (evt) => {
+    if (typeof window === 'undefined')
+        return;
+    const target = window.parent && window.parent !== window ? window.parent : window;
+    try {
+        console.log('Component Library: sending event', evt === null || evt === void 0 ? void 0 : evt.name, evt);
+        target.postMessage(evt, '*');
+    }
+    catch (err) {
+        console.error('Component Library: postMessage failed', err, evt);
+    }
 };
 class ErrorBoundary extends react_1.default.Component {
     constructor() {
@@ -128,36 +104,74 @@ class ErrorBoundary extends react_1.default.Component {
     }
 }
 /**
- * This component is used to render the component in variant generation mode.
- * It is used to send the import-map and component-props events to the parent window and render the dynamic component.
+ * Design Library component.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * when generation is enabled (`page.mode.designLibrary.isVariantGeneration === true`),
+ * wires the **variant generation** handshake so the parent (DL Studio) can send
+ * generated code to preview and iterate on.
+ * @param {DesignLibraryProps} props
+ * @param {() => Promise<{ default: import('../codegen').ImportEntry[] }>} [props.loadImportMap] Optional async loader that resolves to the import-map used to resolve the generated component’s imports. Required when `isVariantGeneration` is true.
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
  */
-const VariantGeneration = (props) => {
+const DesignLibrary = ({ loadImportMap }) => {
+    var _a, _b;
     const { page } = (0, withSitecore_1.useSitecore)();
-    const { layout: { sitecore: { route }, }, } = page;
-    const rendering = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
+    const route = page.layout.sitecore.route;
+    const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
+    const { isDesignLibrary } = page.mode;
+    const isVariantGeneration = (_b = page.mode.designLibrary) === null || _b === void 0 ? void 0 : _b.isVariantGeneration;
+    const [propsState, setPropsState] = (0, react_1.useState)({
+        fields: rendering === null || rendering === void 0 ? void 0 : rendering.fields,
+        params: rendering === null || rendering === void 0 ? void 0 : rendering.params,
+    });
     const [renderKey, setRenderKey] = (0, react_1.useState)(0);
     const [Component, setComponent] = (0, react_1.useState)(null);
+    const isGeneratedComponentActive = !!Component;
+    if (!isDesignLibrary)
+        return null;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, react_1.useEffect)(() => {
+        postToDL((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid));
+        if (!isVariantGeneration) {
+            requestAnimationFrame(() => {
+                setRenderKey((k) => (k === 0 ? k + 1 : k));
+            });
+        }
+        const unsubUpdate = (0, editing_1.addComponentUpdateHandler)(rendering, (updated) => {
+            setPropsState({ fields: updated.fields, params: updated.params });
+            setRenderKey((k) => k + 1);
+        });
+        // useEffect will cleanup event handler on re-render
+        return () => unsubUpdate && unsubUpdate();
+    }, [isVariantGeneration, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, react_1.useEffect)(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0)
+            return;
+        postToDL((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid));
+    }, [renderKey, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, react_1.useEffect)(() => {
+        if (!isDesignLibrary || !isVariantGeneration)
+            return undefined;
         let cancelled = false;
         // since import map is loaded lazily, we only need to add preview event handler once the import map is loaded
         // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
-        let unsubscribe = undefined;
-        const init = () => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            let importMap = undefined;
-            if (!props.loadImportMap) {
-                const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
-                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+        let unsubscribe;
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            if (!loadImportMap) {
+                sendErrorEvent(rendering.uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
+            let importMap;
             try {
-                const importMapImport = yield props.loadImportMap();
-                importMap = importMapImport.default;
+                const mod = yield loadImportMap();
+                importMap = mod.default;
             }
-            catch (error) {
-                const errorMessage = `Error loading import map: ${error}`;
-                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+            catch (e) {
+                sendErrorEvent(rendering.uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             // account for component being unmounted while resolving async import map
@@ -165,56 +179,24 @@ const VariantGeneration = (props) => {
                 return;
             unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
                 // Error event is already sent in the addComponentPreviewHandler
-                if (error) {
+                if (error)
                     return;
-                }
-                setRenderKey((key) => key + 1);
                 setComponent(() => Component);
+                setRenderKey((k) => k + 1);
             });
             const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
-            console.debug('Component Library: sending event', importMapEvent);
-            window.parent.postMessage(importMapEvent, '*');
-            const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
-            console.debug('Component Library: sending event', componentPropsEvent);
-            window.top.postMessage(componentPropsEvent, '*');
-            const readyEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid);
-            console.debug('Component Library: sending event', readyEvent);
-            (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(readyEvent, '*');
-        });
-        init();
-        // return function that calls unsubsubribe - if the component was mounted correctly
+            postToDL(importMapEvent);
+            const propsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, propsState.fields, propsState.params);
+            postToDL(propsEvent);
+        }))();
+        // return function that calls unsubscribe - if the component was mounted correctly
         return () => {
             cancelled = true;
-            if (unsubscribe) {
-                unsubscribe();
-            }
+            unsubscribe && unsubscribe();
         };
-    }, []);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, react_1.useEffect)(() => {
-        var _a;
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0)
-            return undefined;
-        const renderedEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid);
-        console.debug('Component Library: sending event', renderedEvent);
-        (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(renderedEvent, '*');
-    }, [renderKey, rendering === null || rendering === void 0 ? void 0 : rendering.uid]);
-    return (react_1.default.createElement("main", null, Component ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
-        react_1.default.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (react_1.default.createElement("div", null, "Loading preview..."))));
-};
-exports.VariantGeneration = VariantGeneration;
-const DesignLibrary = ({ loadImportMap }) => {
-    var _a;
-    const { page } = (0, withSitecore_1.useSitecore)();
-    const { isDesignLibrary } = page.mode;
-    const isVariantGeneration = (_a = page.mode.designLibrary) === null || _a === void 0 ? void 0 : _a.isVariantGeneration;
-    if (!isDesignLibrary) {
-        return null;
-    }
-    if (isVariantGeneration) {
-        return react_1.default.createElement(exports.VariantGeneration, { loadImportMap: loadImportMap });
-    }
-    return react_1.default.createElement(Preview, null);
+    }, [isVariantGeneration, rendering]);
+    return (react_1.default.createElement("main", null, isGeneratedComponentActive ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
+        react_1.default.createElement(Placeholder_2.PlaceholderMetadata, { rendering: rendering },
+            react_1.default.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 };
 exports.DesignLibrary = DesignLibrary;

package/dist/cjs/components/EditingScripts.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/components/ErrorBoundary.js

@@ -1,4 +1,5 @@
 "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);

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

@@ -1,4 +1,5 @@
 "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);
@@ -45,7 +46,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
-/* eslint-disable no-unused-expressions, @typescript-eslint/no-unused-expressions */
 const react_1 = __importStar(require("react"));
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");