@sitecore-content-sdk/nextjs 2.0.0-canary.14 → 2.0.0-canary.16

package/dist/cjs/cache/page-params.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCachedPageParams = void 0;
+exports.setCachedPageParams = setCachedPageParams;
+const react_1 = require("react");
+/**
+ * Internal cache implementation for storing page params.
+ *
+ * This cache is used to store the locale and site information for the current page.
+ *
+ * It helps avoid the usage of functions that disable SSG such as `headers()`.
+ * @internal
+ */
+const cacheImpl = (0, react_1.cache)(() => ({ locale: '', site: '' }));
+/**
+ * Gets the cached page params, including locale and site.
+ * @returns An object containing the locale and site information for the current page.
+ * @public
+ */
+const getCachedPageParams = () => cacheImpl();
+exports.getCachedPageParams = getCachedPageParams;
+/**
+ * Sets the cached page params, including locale and site.
+ * @param {CachedPageParams} pageParams An object containing the locale and site information to be set for the current page cache.
+ * @public
+ */
+function setCachedPageParams(pageParams) {
+    cacheImpl().locale = pageParams.locale;
+    cacheImpl().site = pageParams.site;
+}

package/dist/cjs/client/sitecore-nextjs-client.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());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SitecoreNextjsClient = void 0;
 const client_1 = require("@sitecore-content-sdk/content/client");
@@ -44,23 +35,17 @@ class SitecoreNextjsClient extends client_1.SitecoreClient {
         const basePath = super.parsePath(path);
         return (0, site_1.normalizeSiteRewrite)((0, personalize_1.normalizePersonalizedRewrite)(basePath));
     }
-    getPage(path, pageOptions, options) {
-        const _super = Object.create(null, {
-            parsePath: { get: () => super.parsePath },
-            getPage: { get: () => super.getPage }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            const resolvedPath = this.parsePath(path);
-            // Get variant(s) for personalization (from path), must ensure path is of type string
-            const personalizeData = pageOptions.personalize || (0, personalize_1.getPersonalizedRewriteData)(_super.parsePath.call(this, path));
-            const site = pageOptions.site || this.getSiteNameFromPath(path);
-            const page = yield _super.getPage.call(this, resolvedPath, {
-                locale: pageOptions.locale,
-                site,
-                personalize: personalizeData,
-            }, options);
-            return page;
-        });
+    async getPage(path, pageOptions, options) {
+        const resolvedPath = this.parsePath(path);
+        // Get variant(s) for personalization (from path), must ensure path is of type string
+        const personalizeData = pageOptions.personalize || (0, personalize_1.getPersonalizedRewriteData)(super.parsePath(path));
+        const site = pageOptions.site || this.getSiteNameFromPath(path);
+        const page = await super.getPage(resolvedPath, {
+            locale: pageOptions.locale,
+            site,
+            personalize: personalizeData,
+        }, options);
+        return page;
     }
     /**
      * Get design library page details for Design Library mode of your app
@@ -68,26 +53,16 @@ class SitecoreNextjsClient extends client_1.SitecoreClient {
      * @param {FetchOptions} [fetchOptions] Additional fetch fetch options to override GraphQL requests
      * @returns {Page} preview page for Design Library
      */
-    getDesignLibraryData(designLibData, fetchOptions) {
-        const _super = Object.create(null, {
-            getDesignLibraryData: { get: () => super.getDesignLibraryData }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            return _super.getDesignLibraryData.call(this, designLibData, fetchOptions);
-        });
+    async getDesignLibraryData(designLibData, fetchOptions) {
+        return super.getDesignLibraryData(designLibData, fetchOptions);
     }
     /**
      * Retrieves preview page and layout details
      * @param {PreviewData} previewData - The editing preview data for metadata mode.
      * @param {FetchOptions} [fetchOptions] Additional fetch fetch options to override GraphQL requests (like retries and fetch)
      */
-    getPreview(previewData, fetchOptions) {
-        const _super = Object.create(null, {
-            getPreview: { get: () => super.getPreview }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            return _super.getPreview.call(this, previewData, fetchOptions);
-        });
+    async getPreview(previewData, fetchOptions) {
+        return super.getPreview(previewData, fetchOptions);
     }
     /**
      * Generates static params for the Next.js App Router from Sitecore routes.
@@ -103,25 +78,20 @@ class SitecoreNextjsClient extends client_1.SitecoreClient {
      * @param {FetchOptions} [fetchOptions] - Additional fetch options.
      * @returns {Promise<StaticParams[]>} Array of `{ site, locale, path }` entries for `generateStaticParams`.
      */
-    getAppRouterStaticParams(sites, languages, fetchOptions) {
-        const _super = Object.create(null, {
-            getPagePaths: { get: () => super.getPagePaths }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            const staticPaths = yield _super.getPagePaths.call(this, sites, languages, fetchOptions);
-            const params = new Array();
-            staticPaths.map((path) => {
-                var _a;
-                // remove _site_ segments
-                const normalizedPath = (0, site_1.normalizeSiteRewrite)(path.params.path.join('/')).split('/');
-                params.push({
-                    locale: (_a = path.locale) !== null && _a !== void 0 ? _a : this.initOptions.defaultLanguage,
-                    site: this.getSiteNameFromPath(path.params.path),
-                    path: normalizedPath,
-                });
+    async getAppRouterStaticParams(sites, languages, fetchOptions) {
+        const staticPaths = await super.getPagePaths(sites, languages, fetchOptions);
+        const params = new Array();
+        staticPaths.map((path) => {
+            var _a;
+            // remove _site_ segments
+            const normalizedPath = (0, site_1.normalizeSiteRewrite)(path.params.path.join('/')).split('/');
+            params.push({
+                locale: (_a = path.locale) !== null && _a !== void 0 ? _a : this.initOptions.defaultLanguage,
+                site: this.getSiteNameFromPath(path.params.path),
+                path: normalizedPath,
             });
-            return params;
         });
+        return params;
     }
     /**
      * Retrieves the static paths for pages based on the given languages.
@@ -130,21 +100,16 @@ class SitecoreNextjsClient extends client_1.SitecoreClient {
      * @param {FetchOptions} [fetchOptions] - Additional fetch options.
      * @returns {Promise<StaticPath[]>} A promise that resolves to an array of static paths.
      */
-    getPagePaths(sites, languages, fetchOptions) {
-        const _super = Object.create(null, {
-            getPagePaths: { get: () => super.getPagePaths }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            const staticPaths = yield _super.getPagePaths.call(this, sites, languages, fetchOptions);
-            if (!((_a = this.initOptions.multisite) === null || _a === void 0 ? void 0 : _a.enabled)) {
-                // remove _site_ segments when multisite is disabled
-                staticPaths.map((path) => {
-                    path.params.path = (0, site_1.normalizeSiteRewrite)(path.params.path.join('/')).split('/');
-                });
-            }
-            return staticPaths;
-        });
+    async getPagePaths(sites, languages, fetchOptions) {
+        var _a;
+        const staticPaths = await super.getPagePaths(sites, languages, fetchOptions);
+        if (!((_a = this.initOptions.multisite) === null || _a === void 0 ? void 0 : _a.enabled)) {
+            // remove _site_ segments when multisite is disabled
+            staticPaths.map((path) => {
+                path.params.path = (0, site_1.normalizeSiteRewrite)(path.params.path.join('/')).split('/');
+            });
+        }
+        return staticPaths;
     }
     /**
      * Parses components from nextjs component map and layoutData, executes getServerProps/getStaticProps methods
@@ -154,30 +119,28 @@ class SitecoreNextjsClient extends client_1.SitecoreClient {
      * @param {ComponentMap<NextjsContentSdkComponent>} components component map to get props for
      * @returns {ComponentPropsCollection} component props
      */
-    getComponentData(layoutData, context, components) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let componentProps = {};
-            if (!layoutData.sitecore.route)
-                return componentProps;
-            // Retrieve component props using side-effects defined on components level
-            componentProps = yield this.componentPropsService.fetchComponentProps({
-                layoutData: layoutData,
-                context,
-                components,
-            });
-            const errors = Object.keys(componentProps)
-                .map((id) => {
-                const component = componentProps[id];
-                return component.error
-                    ? `\nUnable to get component props for ${component.componentName} (${id}): ${component.error}`
-                    : '';
-            })
-                .join('');
-            if (errors.length) {
-                throw new Error(errors);
-            }
+    async getComponentData(layoutData, context, components) {
+        let componentProps = {};
+        if (!layoutData.sitecore.route)
             return componentProps;
+        // Retrieve component props using side-effects defined on components level
+        componentProps = await this.componentPropsService.fetchComponentProps({
+            layoutData: layoutData,
+            context,
+            components,
         });
+        const errors = Object.keys(componentProps)
+            .map((id) => {
+            const component = componentProps[id];
+            return component.error
+                ? `\nUnable to get component props for ${component.componentName} (${id}): ${component.error}`
+                : '';
+        })
+            .join('');
+        if (errors.length) {
+            throw new Error(errors);
+        }
+        return componentProps;
     }
     getComponentPropsService() {
         return new component_props_service_1.ComponentPropsService();

package/dist/cjs/components/BYOCWrapper.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());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getComponentServerProps = void 0;
 const react_1 = require("@sitecore-content-sdk/react");
@@ -17,10 +8,10 @@ const react_1 = require("@sitecore-content-sdk/react");
  * @returns {GetStaticPropsContext | GetStaticPropsContext} context with type depending on SSR or SSG mode
  * @internal
  */
-const getComponentServerProps = (rendering) => __awaiter(void 0, void 0, void 0, function* () {
+const getComponentServerProps = async (rendering) => {
     const params = rendering.params || {};
-    const result = yield (0, react_1.fetchBYOCComponentServerProps)(params);
+    const result = await (0, react_1.fetchBYOCComponentServerProps)(params);
     return result;
-});
+};
 exports.getComponentServerProps = getComponentServerProps;
 exports.default = react_1.BYOCWrapper;

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/content/layout");
+const DesignLibraryServer_1 = require("./DesignLibraryServer");
+const react_2 = require("@sitecore-content-sdk/react");
+/**
+ * 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(react_2.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,139 @@
+"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/content/editing"));
+const codegen = __importStar(require("@sitecore-content-sdk/content/codegen"));
+const update_server_component_action_1 = require("../../server-actions/update-server-component-action");
+const react_2 = require("@sitecore-content-sdk/react");
+let { getDesignLibraryComponentPropsEvent, addServerComponentPreviewHandler, getDesignLibraryImportMapEvent, addStyleElement, sendErrorEvent, } = codegen;
+let { getDesignLibraryStatusEvent, addComponentUpdateHandler, postToDesignLibrary } = dlHelpers;
+let _updateComponentAction = update_server_component_action_1.updateComponentAction;
+let _previewComponentAction = update_server_component_action_1.previewComponentAction;
+const __mockDependencies = (mocks) => {
+    postToDesignLibrary = mocks.postToDesignLibrary;
+    addComponentUpdateHandler = mocks.addComponentUpdateHandler;
+    _updateComponentAction = mocks.updateComponentAction;
+    _previewComponentAction = mocks.previewComponentAction;
+    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)(() => {
+        if (!(component === null || component === void 0 ? void 0 : component.uid))
+            return;
+        postToDesignLibrary(getDesignLibraryStatusEvent(designLibraryStatus, component.uid, true));
+        const unsubUpdate = addComponentUpdateHandler(component, (rendering) => {
+            _updateComponentAction({ uid: rendering.uid, rendering });
+        });
+        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.
+ * If the import map is not present then the import map error will be sent to Design Studio.
+ * @param {DesignLibraryVariantGenerationEventsProps} props The props. {@link DesignLibraryVariantGenerationEventsProps}
+ * @returns {JSX.Element} empty JSX element.
+ */
+const DesignLibraryVariantGenerationEvents = ({ designLibraryStatus, component, importMap, componentInitError, generatedComponentData, }) => {
+    var _a;
+    const { api } = (0, react_2.useSitecore)();
+    const edgeUrl = (_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!(component === null || component === void 0 ? void 0 : component.uid))
+            return;
+        postToDesignLibrary(getDesignLibraryStatusEvent(designLibraryStatus, component.uid, true));
+        const unsubUpdate = addComponentUpdateHandler(component, (rendering) => {
+            _updateComponentAction({
+                uid: rendering.uid,
+                rendering,
+                generatedComponentData,
+            });
+        });
+        const unsubPreview = addServerComponentPreviewHandler((eventArgs) => {
+            _previewComponentAction({
+                uid: component.uid,
+                args: eventArgs,
+            }, edgeUrl);
+        });
+        if (componentInitError) {
+            // an error occurred during initialization of the component on the server side
+            sendErrorEvent(component.uid, componentInitError.message, componentInitError.type);
+        }
+        else {
+            const importMapEvent = getDesignLibraryImportMapEvent(component.uid, importMap);
+            postToDesignLibrary(importMapEvent);
+            const propsEvent = getDesignLibraryComponentPropsEvent(component.uid, component.fields, component.params);
+            postToDesignLibrary(propsEvent);
+            if ((_a = generatedComponentData === null || generatedComponentData === void 0 ? void 0 : generatedComponentData.styles) === null || _a === void 0 ? void 0 : _a.content) {
+                // the generated component has custom styles, so add the css in style element and add it to document head
+                addStyleElement(generatedComponentData.styles.content);
+            }
+        }
+        return () => {
+            unsubUpdate && unsubUpdate();
+            unsubPreview && unsubPreview();
+        };
+    }, [
+        component,
+        designLibraryStatus,
+        importMap,
+        componentInitError,
+        generatedComponentData,
+        edgeUrl,
+    ]);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.DesignLibraryVariantGenerationEvents = DesignLibraryVariantGenerationEvents;

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

@@ -0,0 +1,217 @@
+"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/content/layout");
+const DesignLibraryClientEvents_1 = require("./DesignLibraryClientEvents");
+const globalCache = __importStar(require("@sitecore-content-sdk/core/tools"));
+const editing_1 = require("@sitecore-content-sdk/content/editing");
+const codegen = __importStar(require("@sitecore-content-sdk/content/codegen"));
+const react_2 = require("@sitecore-content-sdk/react");
+const react_3 = require("@sitecore-content-sdk/react");
+let { getCacheAndClean, hasCache } = globalCache;
+let { createComponentInstance, getImportMapInfo } = codegen;
+let updateComponent = editing_1.updateComponent;
+const __mockDependencies = async (mocks) => {
+    getCacheAndClean = mocks.getCacheAndClean;
+    hasCache = mocks.hasCache;
+    createComponentInstance = mocks.createComponentInstance;
+    if (mocks.updateComponent) {
+        updateComponent = mocks.updateComponent;
+    }
+    if (mocks.getImportMapInfo) {
+        getImportMapInfo = mocks.getImportMapInfo;
+    }
+};
+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, _b;
+    let designLibraryStatus = editing_1.DesignLibraryStatus.READY;
+    let importMap;
+    let importMapInfo;
+    let Component;
+    let componentInitError;
+    let generatedComponentData;
+    const getComponentInitError = (type, error) => ({
+        type,
+        message: error instanceof Error ? error.message : String(error),
+    });
+    // load importmap and importmap payload to pass to FE
+    // if not provided, or errors during load set error to pass to FE
+    if (!loadServerImportMap) {
+        componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.ImportMapMissing, 'No loadImportMap provided');
+    }
+    else {
+        try {
+            const mod = await loadServerImportMap();
+            importMap = mod.default;
+            importMapInfo = getImportMapInfo(importMap);
+        }
+        catch (e) {
+            componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.ImportMapLoad, `Error loading import map: ${e}`);
+        }
+    }
+    let componentToUpdate = (_b = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) === null || _a === void 0 ? void 0 : _a[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
+    if (!componentToUpdate)
+        return react_1.default.createElement(react_3.ErrorComponent, { message: "Rendering data is missing" });
+    if (!componentToUpdate.uid)
+        return react_1.default.createElement(react_3.ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
+    const uid = componentToUpdate.uid;
+    const componentUpdateKey = `${editing_1.COMPONENT_UPDATE_CACHE_KEY_PREFIX}${uid}`;
+    const componentPreviewKey = `${editing_1.COMPONENT_PREVIEW_CACHE_KEY_PREFIX}${uid}`;
+    // check if we have an update for this component in the global cache
+    if (hasCache(componentUpdateKey)) {
+        // we have fields/params 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 === null || updateData === void 0 ? void 0 : updateData.rendering) {
+            updateComponent(componentToUpdate, updateData.rendering.fields, updateData.rendering.params);
+        }
+        // generate the component instance if we are dealing with an AI-generated component
+        if ((updateData === null || updateData === void 0 ? void 0 : updateData.generatedComponentData) && !componentInitError && importMap) {
+            generatedComponentData = updateData.generatedComponentData;
+            try {
+                // use provided code and import map to create the component instance
+                Component = createComponentInstance(importMap, updateData.generatedComponentData);
+            }
+            catch (error) {
+                // error during component initialization - send error to client
+                componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.RenderInit, error);
+            }
+        }
+    }
+    else if (hasCache(componentPreviewKey) && !componentInitError && importMap) {
+        // we have a preview update, get it and clean the cache
+        designLibraryStatus = editing_1.DesignLibraryStatus.RENDERED;
+        const previewData = getCacheAndClean(componentPreviewKey);
+        if (previewData === null || previewData === void 0 ? void 0 : previewData.error) {
+            componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.GeneratedComponentFetch, previewData.error);
+        }
+        if (previewData === null || previewData === void 0 ? void 0 : previewData.generatedComponentData) {
+            generatedComponentData = previewData.generatedComponentData;
+            try {
+                // use provided code and import map to create the component instance
+                Component = createComponentInstance(importMap, previewData.generatedComponentData);
+            }
+            catch (error) {
+                // error during component initialization - send error to client
+                componentInitError = getComponentInitError(codegen.DesignLibraryPreviewError.RenderInit, error);
+            }
+        }
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        Component ? (react_1.default.createElement(react_3.DesignLibraryErrorBoundary, { uid: componentToUpdate.uid },
+            react_1.default.createElement(react_2.PlaceholderMetadata, { rendering: componentToUpdate },
+                react_1.default.createElement(Component, { fields: componentToUpdate.fields, params: componentToUpdate.params, key: Date.now() })))) : (react_1.default.createElement(react_2.AppPlaceholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap, key: Date.now() })),
+        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), componentInitError: componentInitError, generatedComponentData: generatedComponentData })));
+};
+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, _b;
+    let designLibraryStatus = editing_1.DesignLibraryStatus.READY;
+    let componentToUpdate = (_b = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) === null || _a === void 0 ? void 0 : _a[layout_1.EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
+    if (!componentToUpdate)
+        return react_1.default.createElement(react_3.ErrorComponent, { message: "Rendering data is missing" });
+    if (!componentToUpdate.uid)
+        return react_1.default.createElement(react_3.ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
+    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 === null || updateData === void 0 ? void 0 : updateData.rendering) {
+            updateComponent(componentToUpdate, updateData.rendering.fields, updateData.rendering.params);
+        }
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.AppPlaceholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap, key: Date.now() }),
+        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,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesignLibraryApp = void 0;
+var DesignLibraryApp_1 = require("./DesignLibraryApp");
+Object.defineProperty(exports, "DesignLibraryApp", { enumerable: true, get: function () { return DesignLibraryApp_1.DesignLibraryApp; } });