@sitecore-content-sdk/react 1.3.0-canary.20 → 1.3.0-canary.21

package/dist/cjs/components/{DesignLibrary.js → DesignLibrary/DesignLibrary.js}

@@ -33,76 +33,23 @@ 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());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DesignLibrary = exports.__mockDependencies = void 0;
 /* eslint-disable jsdoc/require-param */
 /* eslint-disable prefer-const */
 const react_1 = __importStar(require("react"));
-const Placeholder_1 = require("./Placeholder");
 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 withSitecore_1 = require("../../enhancers/withSitecore");
+const Placeholder_1 = require("../Placeholder");
+const DesignLibraryErrorBoundary_1 = require("./DesignLibraryErrorBoundary");
+const withLoadImportMap_1 = require("../../enhancers/withLoadImportMap");
+let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, sendErrorEvent, } = codegen;
 const __mockDependencies = (mocks) => {
     addComponentPreviewHandler = mocks.addComponentPreviewHandler;
 };
 exports.__mockDependencies = __mockDependencies;
-const sendErrorEvent = (uid, error, type) => {
-    const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
-    console.error('Component Library: sending error event', 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() {
-        super(...arguments);
-        this.state = {
-            hasError: false,
-        };
-    }
-    static getDerivedStateFromError() {
-        return { hasError: true };
-    }
-    componentDidUpdate(prevProps) {
-        if (prevProps.renderKey !== this.props.renderKey) {
-            this.setState({ hasError: false });
-        }
-    }
-    componentDidCatch(error) {
-        sendErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
-    }
-    render() {
-        if (this.state.hasError) {
-            return react_1.default.createElement("div", null, "Error during component rendering");
-        }
-        return this.props.children;
-    }
-}
 /**
  * Design Library component.
  *
@@ -115,7 +62,7 @@ class ErrorBoundary extends react_1.default.Component {
  * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
  * @public
  */
-const DesignLibrary = ({ loadImportMap }) => {
+exports.DesignLibrary = (0, withLoadImportMap_1.withLoadImportMap)(({ loadImportMap }) => {
     var _a, _b;
     const { page } = (0, withSitecore_1.useSitecore)();
     const route = page.layout.sitecore.route;
@@ -133,7 +80,7 @@ const DesignLibrary = ({ loadImportMap }) => {
         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));
+        (0, editing_1.postToDesignLibrary)((0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid));
         if (!isVariantGeneration) {
             requestAnimationFrame(() => {
                 setRenderKey((k) => (k === 0 ? k + 1 : k));
@@ -151,7 +98,7 @@ const DesignLibrary = ({ loadImportMap }) => {
         // 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));
+        (0, editing_1.postToDesignLibrary)((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)(() => {
@@ -161,14 +108,14 @@ const DesignLibrary = ({ loadImportMap }) => {
         // 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;
-        (() => __awaiter(void 0, void 0, void 0, function* () {
+        (async () => {
             if (!loadImportMap) {
                 sendErrorEvent(rendering.uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
             let importMap;
             try {
-                const mod = yield loadImportMap();
+                const mod = await loadImportMap();
                 importMap = mod.default;
             }
             catch (e) {
@@ -186,18 +133,17 @@ const DesignLibrary = ({ loadImportMap }) => {
                 setRenderKey((k) => k + 1);
             });
             const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
-            postToDL(importMapEvent);
+            (0, editing_1.postToDesignLibrary)(importMapEvent);
             const propsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, propsState.fields, propsState.params);
-            postToDL(propsEvent);
-        }))();
+            (0, editing_1.postToDesignLibrary)(propsEvent);
+        })();
         // return function that calls unsubscribe - if the component was mounted correctly
         return () => {
             cancelled = true;
             unsubscribe && unsubscribe();
         };
     }, [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 },
+    return (react_1.default.createElement("main", null, isGeneratedComponentActive ? (react_1.default.createElement(DesignLibraryErrorBoundary_1.DesignLibraryErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
+        react_1.default.createElement(Placeholder_1.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/DesignLibrary/DesignLibraryApp.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignLibraryApp = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const DesignLibraryServer_1 = require("./DesignLibraryServer");
+const DesignLibrary_1 = require("./DesignLibrary");
+/**
+ * Design Library component intended to be used by the NextJs app router application
+ * This component serves as a router between client and server component rendering modes for the Design Library.
+ * It inspects the component type from the component map and
+ * delegates to the appropriate rendering implementation:
+ * - Client components are rendered using the `DesignLibrary` component
+ * - Server components are rendered using the `DesignLibraryServer` component
+ * @param {DesingLibraryAppProps} props - The properties for the Design Library App.
+ * @public
+ */
+const DesignLibraryApp = ({ page, componentMap, loadServerImportMap, }) => {
+    var _a;
+    const { route } = page.layout.sitecore;
+    if (!route)
+        return null;
+    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 component = componentMap.get((rendering === null || rendering === void 0 ? void 0 : rendering.componentName) || '');
+    const isClient = component && component.componentType === 'client';
+    return (react_1.default.createElement(react_1.default.Fragment, null, isClient ? (react_1.default.createElement(DesignLibrary_1.DesignLibrary, null)) : (react_1.default.createElement(DesignLibraryServer_1.DesignLibraryServer, { page: page, componentMap: componentMap, loadServerImportMap: loadServerImportMap, rendering: route }))));
+};
+exports.DesignLibraryApp = DesignLibraryApp;

package/dist/cjs/components/DesignLibrary/DesignLibraryClientEvents.js

@@ -0,0 +1,118 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignLibraryVariantGenerationEvents = exports.DesignLibraryPreviewEvents = exports.__mockDependencies = void 0;
+const react_1 = __importStar(require("react"));
+const dlHelpers = __importStar(require("@sitecore-content-sdk/core/editing"));
+const codegen = __importStar(require("@sitecore-content-sdk/core/codegen"));
+const update_server_component_action_1 = require("../../server-actions/update-server-component-action");
+let { getDesignLibraryComponentPropsEvent, addServerComponentPreviewHandler, getDesignLibraryImportMapEvent, addStyleElement, sendErrorEvent, } = codegen;
+let { getDesignLibraryStatusEvent, addComponentUpdateHandler, postToDesignLibrary } = dlHelpers;
+let _updateServerComponentAction = update_server_component_action_1.updateServerComponentAction;
+const __mockDependencies = (mocks) => {
+    postToDesignLibrary = mocks.postToDesignLibrary;
+    addComponentUpdateHandler = mocks.addComponentUpdateHandler;
+    _updateServerComponentAction = mocks.updateServerComponentAction;
+    addServerComponentPreviewHandler = mocks.addServerComponentPreviewHandler;
+    getDesignLibraryImportMapEvent = mocks.getDesignLibraryImportMapEvent;
+    getDesignLibraryComponentPropsEvent = mocks.getDesignLibraryComponentPropsEvent;
+    addStyleElement = mocks.addStyleElement;
+    sendErrorEvent = mocks.sendErrorEvent;
+};
+exports.__mockDependencies = __mockDependencies;
+/**
+ * Design Library component for rendering server components in app router application.
+ * DesignLibraryPreviewEvents component serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side.
+ * It posts messages to Design Library Studio and sets up handlers to receive updates and previews which are then passed to the server component via server function updateServerComponentAction.
+ * @param {DesignLibraryPreviewEventsProps} props The props. {@link DesignLibraryPreviewEventsProps}
+ * @returns {JSX.Element} empty JSX element.
+ */
+const DesignLibraryPreviewEvents = ({ designLibraryStatus, component, }) => {
+    (0, react_1.useEffect)(() => {
+        postToDesignLibrary(getDesignLibraryStatusEvent(designLibraryStatus, component.uid));
+        const unsubUpdate = addComponentUpdateHandler(component, (updated) => {
+            _updateServerComponentAction({ uid: updated.uid, updatedComponent: updated });
+        });
+        return () => {
+            unsubUpdate && unsubUpdate();
+        };
+    }, [component, designLibraryStatus]);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.DesignLibraryPreviewEvents = DesignLibraryPreviewEvents;
+/**
+ * Design Library component for rendering server components in app router application.
+ * DesignLibraryVariantGenerationEvents component serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side in variant generation mode.
+ * It posts messages to Design Library Studio and sets up handlers to receive updates and previews which are then passed to the server component via server function updateServerComponentAction.
+ * @param {DesignLibraryVariantGenerationEventsProps} props The props. {@link DesignLibraryVariantGenerationEventsProps}
+ * @returns {JSX.Element} empty JSX element.
+ */
+const DesignLibraryVariantGenerationEvents = ({ designLibraryStatus, component, importMap, importMapError, previewComponentData, }) => {
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        postToDesignLibrary(getDesignLibraryStatusEvent(designLibraryStatus, component.uid));
+        const unsubUpdate = addComponentUpdateHandler(component, (updated) => {
+            _updateServerComponentAction({
+                uid: updated.uid,
+                updatedComponent: updated,
+                previewComponent: previewComponentData,
+            });
+        });
+        const unsubPreview = addServerComponentPreviewHandler((eventArgs) => {
+            _updateServerComponentAction({ uid: component.uid, previewComponent: eventArgs });
+        });
+        if (importMapError) {
+            // an import map error occurred on the server side in DesignLibraryServer, post error event to Design Studio
+            sendErrorEvent(component.uid, importMapError, codegen.DesignLibraryPreviewError.RenderInit);
+        }
+        else {
+            const importMapEvent = getDesignLibraryImportMapEvent(component.uid, importMap);
+            postToDesignLibrary(importMapEvent);
+            const propsEvent = getDesignLibraryComponentPropsEvent(component.uid, component.fields, component.params);
+            postToDesignLibrary(propsEvent);
+            if ((_b = (_a = previewComponentData === null || previewComponentData === void 0 ? void 0 : previewComponentData.message) === null || _a === void 0 ? void 0 : _a.styles) === null || _b === void 0 ? void 0 : _b.content) {
+                // the generated component has custom styles, so add the css in style element and add it to document head
+                addStyleElement(previewComponentData.message.styles.content);
+            }
+        }
+        return () => {
+            unsubUpdate && unsubUpdate();
+            unsubPreview && unsubPreview();
+        };
+    }, [component, designLibraryStatus, importMap, importMapError, previewComponentData]);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.DesignLibraryVariantGenerationEvents = DesignLibraryVariantGenerationEvents;

package/dist/cjs/components/DesignLibrary/DesignLibraryErrorBoundary.js

@@ -0,0 +1,65 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignLibraryErrorBoundary = void 0;
+const react_1 = __importStar(require("react"));
+const codegen_1 = require("@sitecore-content-sdk/core/codegen");
+class DesignLibraryErrorBoundary extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hasError: false,
+        };
+    }
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.renderKey !== this.props.renderKey) {
+            this.setState({ hasError: false });
+        }
+    }
+    componentDidCatch(error) {
+        (0, codegen_1.sendErrorEvent)(this.props.uid, error, codegen_1.DesignLibraryPreviewError.Render);
+    }
+    render() {
+        if (this.state.hasError) {
+            return react_1.default.createElement("div", null, "Error during component rendering");
+        }
+        return react_1.default.createElement(react_1.Suspense, null, this.props.children);
+    }
+}
+exports.DesignLibraryErrorBoundary = DesignLibraryErrorBoundary;

package/dist/cjs/components/DesignLibrary/DesignLibraryServer.js

@@ -0,0 +1,176 @@
+"use strict";
+'use server';
+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.DesignLibraryServerPreview = exports.DesignLibraryServerVariantGeneration = exports.DesignLibraryServer = exports.__mockDependencies = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-content-sdk/core/layout");
+const DesignLibraryClientEvents_1 = require("./DesignLibraryClientEvents");
+const globalCache = __importStar(require("@sitecore-content-sdk/core/utils"));
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+const codegen = __importStar(require("@sitecore-content-sdk/core/codegen"));
+const Placeholder_1 = require("../Placeholder");
+const DesignLibraryErrorBoundary_1 = require("./DesignLibraryErrorBoundary");
+let { getCacheAndClean, hasCache } = globalCache;
+let { createComponentInstance } = codegen;
+const __mockDependencies = async (mocks) => {
+    getCacheAndClean = mocks.getCacheAndClean;
+    hasCache = mocks.hasCache;
+    createComponentInstance = mocks.createComponentInstance;
+};
+exports.__mockDependencies = __mockDependencies;
+/**
+ * Design Library component for rendering server components in app router application.
+ *
+ * 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 (Design Library) can send
+ * generated code to preview and iterate on.
+ * Also renders the DesignLibraryClientEvents component which serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side.
+ * @param {DesignLibraryServerProps} props The props. {@link DesignLibraryServerProps}
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
+ */
+const DesignLibraryServer = async ({ page, componentMap, rendering, loadServerImportMap, }) => {
+    var _a;
+    if (!page.mode.isDesignLibrary) {
+        return null;
+    }
+    const isVariantGeneration = (_a = page.mode.designLibrary) === null || _a === void 0 ? void 0 : _a.isVariantGeneration;
+    if (isVariantGeneration) {
+        return (react_1.default.createElement(exports.DesignLibraryServerVariantGeneration, { page: page, rendering: rendering, loadServerImportMap: loadServerImportMap, componentMap: componentMap }));
+    }
+    return (react_1.default.createElement(exports.DesignLibraryServerPreview, { page: page, rendering: rendering, componentMap: componentMap }));
+};
+exports.DesignLibraryServer = DesignLibraryServer;
+/**
+ * Design Library component for rendering server components in app router application in variant generation mode.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes on first render and,
+ * wires the **variant generation** handshake so the parent (Design Library) can send
+ * generated code to preview and iterate on.
+ * Also renders the DesignLibraryVariantGenerationEvents component which serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side.
+ * @param {DesignLibraryServerVariantGenerationProps} props The props. {@link DesignLibraryServerVariantGenerationProps}
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
+ */
+const DesignLibraryServerVariantGeneration = async ({ page, rendering, loadServerImportMap, componentMap, }) => {
+    var _a;
+    let designLibraryStatus = editing_1.DesignLibraryStatus.READY;
+    let importMap;
+    let importMapInfo;
+    let Component;
+    let importMapError;
+    let previewComponentData;
+    // load importmap and importmap payload to pass to FE
+    // if not provided, or errors during load set error to pass to FE
+    if (!loadServerImportMap) {
+        importMapError = 'No loadImportMap provided';
+    }
+    else {
+        try {
+            const mod = await loadServerImportMap();
+            importMap = mod.default;
+            importMapInfo = codegen.getImportMapInfo(importMap);
+        }
+        catch (e) {
+            importMapError = `Error loading import map: ${e}`;
+        }
+    }
+    let componentToUpdate = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
+    const componentUpdateKey = `${editing_1.COMPONENT_UPDATE_CACHE_KEY_PREFIX}${componentToUpdate.uid}`;
+    // check if we have an update for this component in the global cache
+    if (hasCache(componentUpdateKey)) {
+        // we have an update, get it and clean the cache
+        designLibraryStatus = editing_1.DesignLibraryStatus.RENDERED;
+        const updateData = getCacheAndClean(componentUpdateKey);
+        // apply the updates to the component rendering
+        if (updateData.updatedComponent) {
+            (0, editing_1.updateComponent)(componentToUpdate, updateData.updatedComponent.fields, updateData.updatedComponent.params);
+        }
+        if (updateData.previewComponent && !importMapError) {
+            previewComponentData = updateData.previewComponent;
+            try {
+                // use provided code and import map to create the component instance
+                Component = createComponentInstance(importMap, updateData.previewComponent);
+            }
+            catch (error) {
+                // error during component initialization - send error to client
+                importMapError = error.toString();
+            }
+        }
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        Component ? (react_1.default.createElement(DesignLibraryErrorBoundary_1.DesignLibraryErrorBoundary, { uid: componentToUpdate.uid },
+            react_1.default.createElement(Placeholder_1.PlaceholderMetadata, { rendering: componentToUpdate },
+                react_1.default.createElement(Component, { fields: componentToUpdate.fields, params: componentToUpdate.params })))) : (react_1.default.createElement(Placeholder_1.AppPlaceholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap })),
+        react_1.default.createElement(DesignLibraryClientEvents_1.DesignLibraryVariantGenerationEvents, { designLibraryStatus: designLibraryStatus, importMap: importMapInfo, 
+            // pass a new object since we have mutated the original which leads to old reference passed to the client
+            component: Object.assign({}, componentToUpdate), importMapError: importMapError, previewComponentData: previewComponentData })));
+};
+exports.DesignLibraryServerVariantGeneration = DesignLibraryServerVariantGeneration;
+/**
+ * Design Library component for rendering server components in app router application when variant generation is not enabled.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * wires the **component update** handshake so the parent (Design Library) can send
+ * updated component props.
+ * Also renders the DesignLibraryPreviewEvents component which serves as a communication bridge between DesignLibraryServer and the Design Studio on the client side.
+ * @param {DesignLibraryServerPreviewProps} props The props. {@link DesignLibraryServerPreviewProps}
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
+ */
+const DesignLibraryServerPreview = async ({ page, rendering, componentMap, }) => {
+    var _a;
+    let designLibraryStatus = editing_1.DesignLibraryStatus.READY;
+    let componentToUpdate = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
+    const componentUpdateKey = `${editing_1.COMPONENT_UPDATE_CACHE_KEY_PREFIX}${componentToUpdate.uid}`;
+    // check if we have an update for this component in the global cache
+    if (hasCache(componentUpdateKey)) {
+        // we have an update, get it and clean the cache
+        designLibraryStatus = editing_1.DesignLibraryStatus.RENDERED;
+        const updateData = getCacheAndClean(componentUpdateKey);
+        // apply the updates to the component rendering
+        if (updateData.updatedComponent) {
+            (0, editing_1.updateComponent)(componentToUpdate, updateData.updatedComponent.fields, updateData.updatedComponent.params);
+        }
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Placeholder_1.AppPlaceholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap }),
+        react_1.default.createElement(DesignLibraryClientEvents_1.DesignLibraryPreviewEvents, { designLibraryStatus: designLibraryStatus, 
+            // pass a new object since we have mutated the original which leads to old reference passed to the client
+            component: Object.assign({}, componentToUpdate) })));
+};
+exports.DesignLibraryServerPreview = DesignLibraryServerPreview;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignLibraryApp = exports.DesignLibrary = void 0;
+var DesignLibrary_1 = require("./DesignLibrary");
+Object.defineProperty(exports, "DesignLibrary", { enumerable: true, get: function () { return DesignLibrary_1.DesignLibrary; } });
+var DesignLibraryApp_1 = require("./DesignLibraryApp");
+Object.defineProperty(exports, "DesignLibraryApp", { enumerable: true, get: function () { return DesignLibraryApp_1.DesignLibraryApp; } });

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,13 +1,4 @@
 "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 };
 };
@@ -23,12 +14,12 @@ const models_1 = require("../Placeholder/models");
  * @returns rendered BYOCWrapper component
  * @public
  */
-const BYOCServerWrapper = (props) => __awaiter(void 0, void 0, void 0, function* () {
+const BYOCServerWrapper = async (props) => {
     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);
+    const finalProps = Object.assign(Object.assign({}, (await (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/FEaaS/FEaaSSeverWrapper.js

@@ -1,13 +1,4 @@
 "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 };
 };
@@ -23,13 +14,13 @@ const models_1 = require("../Placeholder/models");
  * @returns rendered FEaaSWrapper component
  * @public
  */
-const FEaaSServerWrapper = (props) => __awaiter(void 0, void 0, void 0, function* () {
+const FEaaSServerWrapper = async (props) => {
     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);
+    const finalProps = Object.assign(Object.assign({}, (await (0, feaas_utils_1.fetchFEaaSComponentServerProps)(params, isPageStateNormal))), serializableProps);
     return react_1.default.createElement(FEaaSWrapper_1.FEaaSWrapper, Object.assign({}, finalProps));
-});
+};
 exports.FEaaSServerWrapper = FEaaSServerWrapper;