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

package/dist/cjs/rsc-utils/no-rsc.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rsc = void 0;
+// Always false constant to import in the non-RSC contexts using conditional imports
+exports.rsc = false;

package/dist/cjs/rsc-utils/rsc.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rsc = void 0;
+// Always true constant to import in the RSC environment using conditional imports
+exports.rsc = true;

package/dist/esm/components/ClientEditingChromesUpdate.js

@@ -0,0 +1,15 @@
+'use client';
+import { isEditorActive, resetEditorChromes } from '@sitecore-content-sdk/core/editing';
+import React, { useEffect } from 'react';
+/**
+ * Updates editing chromes in app router / RSC context.
+ * This ensures all the relevant Pages editing markup is applied once all client components are loaded.
+ */
+export const ClientEditingChromesUpdate = () => {
+    useEffect(() => {
+        if (isEditorActive()) {
+            resetEditorChromes();
+        }
+    }, []);
+    return React.createElement(React.Fragment, null);
+};

package/dist/esm/components/DefaultEmptyFieldEditingComponents.js

@@ -1,8 +1,8 @@
 import React from 'react';
-export const DefaultEmptyFieldEditingComponentText = () => {
-    return React.createElement("span", null, "[No text in field]");
+export const DefaultEmptyFieldEditingComponentText = (props) => {
+    return React.createElement(props.tag || 'span', props, '[No text in field]');
 };
-export const DefaultEmptyFieldEditingComponentImage = () => {
+export const DefaultEmptyFieldEditingComponentImage = (props) => {
     const inlineStyles = {
         minWidth: '48px',
         minHeight: '48px',
@@ -10,5 +10,5 @@ export const DefaultEmptyFieldEditingComponentImage = () => {
         maxHeight: '400px',
         cursor: 'pointer',
     };
-    return (React.createElement("img", { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: "scEmptyImage", style: inlineStyles }));
+    return (React.createElement("img", Object.assign({}, props, { alt: "", src: 'data:image/svg+xml,%3Csvg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"%3E%3Cstyle type="text/css"%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23969696;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.75;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Crect class="st0" width="240" height="240"/%3E%3Cg%3E%3Cg%3E%3Crect x="20" y="20" class="st1" width="200" height="200"/%3E%3C/g%3E%3Cg%3E%3Ccircle class="st2" cx="174" cy="67" r="14"/%3E%3Cpath class="st2" d="M174,54c7.17,0,13,5.83,13,13s-5.83,13-13,13s-13-5.83-13-13S166.83,54,174,54 M174,52 c-8.28,0-15,6.72-15,15s6.72,15,15,15s15-6.72,15-15S182.28,52,174,52L174,52z"/%3E%3C/g%3E%3Cpolyline class="st3" points="29.5,179.25 81.32,122.25 95.41,137.75 137.23,91.75 209.5,179.75 "/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', className: `scEmptyImage ${props.className || ''}`, style: inlineStyles })));
 };

package/dist/esm/components/DesignLibrary.js

@@ -10,60 +10,36 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 /* eslint-disable jsdoc/require-param */
 /* eslint-disable prefer-const */
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Placeholder } from './Placeholder';
 import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-content-sdk/core/layout';
 import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
 import * as codegen from '@sitecore-content-sdk/core/codegen';
 import { useSitecore } from '../enhancers/withSitecore';
+import { PlaceholderMetadata } from './Placeholder';
 let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
 export const __mockDependencies = (mocks) => {
     addComponentPreviewHandler = mocks.addComponentPreviewHandler;
 };
-/**
- * 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 } = useSitecore();
-    const { layout: { sitecore: { route }, }, } = page;
-    const [renderKey, setRenderKey] = useState(0);
-    const [rootUpdate, setRootUpdate] = useState(null);
-    const rootComponent = route === null || route === void 0 ? void 0 : route.placeholders[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 = useMemo(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [rootComponent, rootUpdate]);
-    route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
-    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(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rootComponent.uid), '*');
-        }
-        const unsubscribe = addComponentUpdateHandler(persistedRoot, (updatedRoot) => {
-            setRootUpdate(Object.assign({}, updatedRoot));
-            setRenderKey((key) => key + 1);
-        });
-        // useEffect will cleanup event handler on re-render
-        return unsubscribe;
-    }, []);
-    useEffect(() => {
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0) {
-            return;
-        }
-        window.top.postMessage(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rootComponent.uid), '*');
-    }, [renderKey, rootComponent.uid]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("main", null,
-            React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: 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.Component {
     constructor() {
@@ -91,36 +67,74 @@ class ErrorBoundary extends React.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.
  */
-export const VariantGeneration = (props) => {
+export const DesignLibrary = ({ loadImportMap }) => {
+    var _a, _b;
     const { page } = useSitecore();
-    const { layout: { sitecore: { route }, }, } = page;
-    const rendering = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
+    const route = page.layout.sitecore.route;
+    const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[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] = useState({
+        fields: rendering === null || rendering === void 0 ? void 0 : rendering.fields,
+        params: rendering === null || rendering === void 0 ? void 0 : rendering.params,
+    });
     const [renderKey, setRenderKey] = useState(0);
     const [Component, setComponent] = useState(null);
+    const isGeneratedComponentActive = !!Component;
+    if (!isDesignLibrary)
+        return null;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
+        postToDL(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rendering.uid));
+        if (!isVariantGeneration) {
+            requestAnimationFrame(() => {
+                setRenderKey((k) => (k === 0 ? k + 1 : k));
+            });
+        }
+        const unsubUpdate = 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
+    useEffect(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0)
+            return;
+        postToDL(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rendering.uid));
+    }, [renderKey, rendering]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    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
@@ -128,54 +142,23 @@ export 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 = getDesignLibraryStatusEvent(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
-    useEffect(() => {
-        var _a;
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0)
-            return undefined;
-        const renderedEvent = getDesignLibraryStatusEvent(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.createElement("main", null, Component ? (React.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
-        React.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (React.createElement("div", null, "Loading preview..."))));
-};
-export const DesignLibrary = ({ loadImportMap }) => {
-    var _a;
-    const { page } = 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.createElement(VariantGeneration, { loadImportMap: loadImportMap });
-    }
-    return React.createElement(Preview, null);
+    }, [isVariantGeneration, rendering]);
+    return (React.createElement("main", null, isGeneratedComponentActive ? (React.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
+        React.createElement(PlaceholderMetadata, { rendering: rendering },
+            React.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 };

package/dist/esm/components/EditingScripts.js

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { useSitecore } from '../enhancers/withSitecore';
 import { getContentSdkPagesClientData } from '@sitecore-content-sdk/core/editing';

package/dist/esm/components/ErrorBoundary.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { Suspense } from 'react';
 import { withSitecore } from '../enhancers/withSitecore';
 class ErrorBoundary extends React.Component {

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

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

@@ -1,4 +1,3 @@
-'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) {
@@ -8,45 +7,32 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
 import * as FEAAS from '@sitecore-feaas/clientside/react';
-import { LayoutServicePageState } from '@sitecore-content-sdk/core/layout';
-import { getDataFromFields } from '../utils';
-export const 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
  */
-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 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
  */
-export function fetchFEaaSComponentServerProps(params, pageState, endpointOverride) {
+export function fetchFEaaSComponentServerProps(params, isPageStateNormal, endpointOverride) {
     return __awaiter(this, void 0, void 0, function* () {
-        const revisionFallback = pageState && pageState !== LayoutServicePageState.Normal ? 'staged' : 'published';
+        const revisionFallback = isPageStateNormal ? 'published' : 'staged';
         const src = endpointOverride || composeComponentEndpoint(params, revisionFallback);
         let template = '';
         let fetchedData = {};

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

@@ -0,0 +1,6 @@
+export { FEaaSWrapper, FEaaSComponent } from './FEaaSWrapper';
+export { BYOCWrapper, BYOCComponent } from './BYOCWrapper';
+export { FEAAS_COMPONENT_RENDERING_NAME, BYOC_COMPONENT_RENDERING_NAME, FEAAS_WRAPPER_RENDERING_NAME, BYOC_WRAPPER_RENDERING_NAME, } from './models';
+export { FEaaSServerWrapper } from './FEaaSSeverWrapper';
+export { BYOCServerWrapper } from './BYOCServerWrapper';
+export { fetchFEaaSComponentServerProps, fetchBYOCComponentServerProps } from './feaas-utils';

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

@@ -0,0 +1,4 @@
+export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';
+export const FEAAS_COMPONENT_RENDERING_NAME = 'FEaaSComponent';
+export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';
+export const BYOC_COMPONENT_RENDERING_NAME = 'BYOCComponent';

package/dist/esm/components/Link.js

@@ -1,3 +1,4 @@
+'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -9,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/* eslint-disable no-unused-expressions, @typescript-eslint/no-unused-expressions */
 import React, { forwardRef } from 'react';
 import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
 import { withFieldMetadata } from '../enhancers/withFieldMetadata';

package/dist/esm/components/Placeholder/AppPlaceholder.js

@@ -0,0 +1,69 @@
+import { getAppComponentProps, getComponentForRendering, getPlaceholderRenderings, renderEmptyPlaceholder, } from './placeholder-utils';
+import React from 'react';
+import { PlaceholderMetadata } from './PlaceholderMetadata';
+import ErrorBoundary from '../ErrorBoundary';
+import { ClientComponentWrapper } from './ClientComponentWrapper';
+import { rsc } from '#rsc-env';
+/**
+ * The implemention of placeholder compatible with React Server Components.
+ * Renders components from the layout data for the given placeholder name, with consideration for page edit mode.
+ * Pulls components from the provided component map.
+ * @param {AppPlaceholderProps} props Placeholder props
+ * @returns {React.ReactNode | React.ReactElement[]} rendered component(s)
+ */
+export const AppPlaceholder = (props) => {
+    const { rendering: parentRendering, componentMap, page } = props;
+    const placeholderRenderings = getPlaceholderRenderings(parentRendering, props.name, page.mode.isEditing);
+    const components = placeholderRenderings
+        .map((rendering, index) => {
+        const { component: Component, isEmpty, componentType, dynamic, } = getComponentForRendering(rendering, props.name, componentMap, props.hiddenRenderingComponent, props.missingComponentComponent);
+        const isClient = componentType === 'client';
+        const key = rendering.uid || `component-${index}`;
+        const renderedProps = getAppComponentProps(props, rendering);
+        const finalRenderedProps = props.modifyComponentProps
+            ? props.modifyComponentProps(renderedProps)
+            : renderedProps;
+        // Client wrapper is required only when component crosses boundary from server to client.
+        // It happens when component is marker as client and rendered in RSC context.
+        // Also, it is not required when component is hidden or empty, as it will be rendered whthout boundary crossing.
+        const useClientWrapper = isClient && rsc && !isEmpty;
+        let rendered = useClientWrapper ? (React.createElement(ClientComponentWrapper, { rendering: rendering, componentProps: finalRenderedProps, placeholderName: props.name, key: key })) : (React.createElement(Component, Object.assign({ key: key }, finalRenderedProps, { rendering: rendering, page: page, componentMap: componentMap })));
+        if (!isEmpty) {
+            const errorBoundaryKey = rendered.type + '-' + index;
+            const disableSuspense = props.disableSuspense || false;
+            rendered = (React.createElement(ErrorBoundary, { "data-testid": "error-boundary", key: errorBoundaryKey, errorComponent: props.errorComponent, componentLoadingMessage: props.componentLoadingMessage, isDynamic: dynamic, disableSuspense: disableSuspense, rendering: rendered.props.rendering }, rendered));
+        }
+        // if in edit mode then emit shallow chromes for hydration in Pages
+        if (page.mode.isEditing) {
+            const key = rendering.uid || `component-${index}`;
+            return (React.createElement(PlaceholderMetadata, { key: key, rendering: rendering }, rendered));
+        }
+        return rendered;
+    })
+        .filter((element) => element);
+    const finalRendering = page.mode.isEditing
+        ? [
+            React.createElement(PlaceholderMetadata, { key: parentRendering.uid, placeholderName: props.name, rendering: parentRendering }, components),
+        ]
+        : components;
+    const placeholderEmpty = !placeholderRenderings.length;
+    if (placeholderEmpty) {
+        const rendered = props.renderEmpty ? props.renderEmpty(finalRendering) : finalRendering;
+        return page.mode.isEditing ? renderEmptyPlaceholder(rendered) : rendered;
+    }
+    if (props.render) {
+        return props.render(components, placeholderRenderings, props);
+    }
+    else if (props.renderEach) {
+        const renderEach = props.renderEach;
+        return finalRendering.map((component, index) => {
+            if (component && component.props && component.props.type === 'text/sitecore') {
+                return component;
+            }
+            return renderEach(component, index);
+        });
+    }
+    else {
+        return finalRendering;
+    }
+};