@sitecore-content-sdk/react 2.0.0-canary.9 → 2.0.1

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

@@ -1,212 +0,0 @@
-"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 Placeholder_1 = require("../Placeholder");
-const DesignLibraryErrorBoundary_1 = require("./DesignLibraryErrorBoundary");
-const ErrorBoundary_1 = require("../ErrorBoundary");
-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;
-    // 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 = 'No loadImportMap provided';
-    }
-    else {
-        try {
-            const mod = await loadServerImportMap();
-            importMap = mod.default;
-            importMapInfo = getImportMapInfo(importMap);
-        }
-        catch (e) {
-            componentInitError = `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(ErrorBoundary_1.ErrorComponent, { message: "Rendering data is missing" });
-    if (!componentToUpdate.uid)
-        return react_1.default.createElement(ErrorBoundary_1.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 = error.toString();
-            }
-        }
-    }
-    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);
-        componentInitError = previewData === null || previewData === void 0 ? void 0 : 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 = 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, key: Date.now() })))) : (react_1.default.createElement(Placeholder_1.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(ErrorBoundary_1.ErrorComponent, { message: "Rendering data is missing" });
-    if (!componentToUpdate.uid)
-        return react_1.default.createElement(ErrorBoundary_1.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(Placeholder_1.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/server-actions/update-server-component-action.js

@@ -1,51 +0,0 @@
-"use strict";
-'use server';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateComponentAction = updateComponentAction;
-exports.previewComponentAction = previewComponentAction;
-const content_1 = require("@sitecore-content-sdk/content");
-const codegen_1 = require("@sitecore-content-sdk/content/codegen");
-const tools_1 = require("@sitecore-content-sdk/core/tools");
-const editing_1 = require("@sitecore-content-sdk/content/editing");
-/**
- * Server action to update global cache with the provided component updates received from Design Library.
- * Stores the given {@link ComponentUpdateModel} in the global cache using a key based on the component UID.
- * This enables rendering dynamic updates of server components inside Design Library
- * @param {ComponentUpdateModel} updatedComponent - The component update model containing the UID and optional updated or preview component data.
- * @returns A Promise that resolves when the cache has been updated.
- */
-async function updateComponentAction(updatedComponent) {
-    content_1.debug.editing(`Updating server component cache for Update Component: ${updatedComponent.uid}`);
-    (0, tools_1.setCache)(`${editing_1.COMPONENT_UPDATE_CACHE_KEY_PREFIX}${updatedComponent.uid}`, updatedComponent);
-}
-/**
- * Server action to update global cache with the generated component data in variant generation mode
- * The generated component data is retrieved from a secured cache endpoint via the provided event arguments.
- * This enables rendering dynamic updates of server components inside Design Library
- * @param {PreviewEventModel} previewEvent - The preview event model containing the UID and the preview event arguments with cache information to fetch the generated component data.
- * @param {string} [edgeUrl] - Optional Edge URL to fetch the generated component data.
- * @returns A Promise that resolves when the cache has been updated.
- */
-async function previewComponentAction(previewEvent, edgeUrl) {
-    content_1.debug.editing(`Updating server component cache for Preview Component: ${previewEvent.uid}`);
-    const updatedComponent = {
-        uid: previewEvent.uid,
-        generatedComponentData: undefined,
-        error: undefined,
-    };
-    if (previewEvent.args) {
-        // we've received a component preview event from the Design Library, so we need to fetch the generated component data from secured endpoint
-        try {
-            updatedComponent.generatedComponentData = await (0, codegen_1.fetchGeneratedComponentFromCache)(previewEvent.args.message.cache.id, previewEvent.args.message.cache.token, edgeUrl);
-        }
-        catch (error) {
-            content_1.debug.editing(`Error fetching generated component data from cache for Component: ${previewEvent.uid}`, error);
-            updatedComponent.error = error instanceof Error ? error.message : String(error);
-        }
-    }
-    else {
-        content_1.debug.editing(`No preview event arguments provided for Component: ${previewEvent.uid}`);
-        updatedComponent.error = 'No preview event arguments provided';
-    }
-    (0, tools_1.setCache)(`${editing_1.COMPONENT_PREVIEW_CACHE_KEY_PREFIX}${updatedComponent.uid}`, updatedComponent);
-}

package/dist/esm/components/DesignLibrary/DesignLibraryApp.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { EDITING_COMPONENT_PLACEHOLDER } from '@sitecore-content-sdk/content/layout';
-import { DesignLibraryServer } from './DesignLibraryServer';
-import { DesignLibrary } from './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
- */
-export 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[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.createElement(React.Fragment, null, isClient ? (React.createElement(DesignLibrary, null)) : (React.createElement(DesignLibraryServer, { page: page, componentMap: componentMap, loadServerImportMap: loadServerImportMap, rendering: route }))));
-};

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

@@ -1,100 +0,0 @@
-'use client';
-import React, { useEffect } from 'react';
-import * as dlHelpers from '@sitecore-content-sdk/content/editing';
-import * as codegen from '@sitecore-content-sdk/content/codegen';
-import { updateComponentAction, previewComponentAction, } from '../../server-actions/update-server-component-action';
-import { useSitecore } from '../SitecoreProvider';
-let { getDesignLibraryComponentPropsEvent, addServerComponentPreviewHandler, getDesignLibraryImportMapEvent, addStyleElement, sendErrorEvent, } = codegen;
-let { getDesignLibraryStatusEvent, addComponentUpdateHandler, postToDesignLibrary } = dlHelpers;
-let _updateComponentAction = updateComponentAction;
-let _previewComponentAction = previewComponentAction;
-export 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;
-};
-/**
- * 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.
- */
-export const DesignLibraryPreviewEvents = ({ designLibraryStatus, component, }) => {
-    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.createElement(React.Fragment, null);
-};
-/**
- * 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.
- */
-export const DesignLibraryVariantGenerationEvents = ({ designLibraryStatus, component, importMap, componentInitError, generatedComponentData, }) => {
-    var _a;
-    const { api } = useSitecore();
-    const edgeUrl = (_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl;
-    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, codegen.DesignLibraryPreviewError.RenderInit);
-        }
-        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.createElement(React.Fragment, null);
-};

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

@@ -1,169 +0,0 @@
-'use server';
-import React from 'react';
-import { EDITING_COMPONENT_PLACEHOLDER } from '@sitecore-content-sdk/content/layout';
-import { DesignLibraryPreviewEvents, DesignLibraryVariantGenerationEvents, } from './DesignLibraryClientEvents';
-import * as globalCache from '@sitecore-content-sdk/core/tools';
-import { DesignLibraryStatus, COMPONENT_UPDATE_CACHE_KEY_PREFIX, COMPONENT_PREVIEW_CACHE_KEY_PREFIX, updateComponent as updateComponentOriginal, } from '@sitecore-content-sdk/content/editing';
-import * as codegen from '@sitecore-content-sdk/content/codegen';
-import { AppPlaceholder, PlaceholderMetadata } from '../Placeholder';
-import { DesignLibraryErrorBoundary } from './DesignLibraryErrorBoundary';
-import { ErrorComponent } from '../ErrorBoundary';
-let { getCacheAndClean, hasCache } = globalCache;
-let { createComponentInstance, getImportMapInfo } = codegen;
-let updateComponent = updateComponentOriginal;
-export 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;
-    }
-};
-/**
- * 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.
- */
-export 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.createElement(DesignLibraryServerVariantGeneration, { page: page, rendering: rendering, loadServerImportMap: loadServerImportMap, componentMap: componentMap }));
-    }
-    return (React.createElement(DesignLibraryServerPreview, { page: page, rendering: rendering, componentMap: componentMap }));
-};
-/**
- * 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.
- */
-export const DesignLibraryServerVariantGeneration = async ({ page, rendering, loadServerImportMap, componentMap, }) => {
-    var _a, _b;
-    let designLibraryStatus = DesignLibraryStatus.READY;
-    let importMap;
-    let importMapInfo;
-    let Component;
-    let componentInitError;
-    let generatedComponentData;
-    // 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 = 'No loadImportMap provided';
-    }
-    else {
-        try {
-            const mod = await loadServerImportMap();
-            importMap = mod.default;
-            importMapInfo = getImportMapInfo(importMap);
-        }
-        catch (e) {
-            componentInitError = `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[EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
-    if (!componentToUpdate)
-        return React.createElement(ErrorComponent, { message: "Rendering data is missing" });
-    if (!componentToUpdate.uid)
-        return React.createElement(ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
-    const uid = componentToUpdate.uid;
-    const componentUpdateKey = `${COMPONENT_UPDATE_CACHE_KEY_PREFIX}${uid}`;
-    const componentPreviewKey = `${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 = 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 = error.toString();
-            }
-        }
-    }
-    else if (hasCache(componentPreviewKey) && !componentInitError && importMap) {
-        // we have a preview update, get it and clean the cache
-        designLibraryStatus = DesignLibraryStatus.RENDERED;
-        const previewData = getCacheAndClean(componentPreviewKey);
-        componentInitError = previewData === null || previewData === void 0 ? void 0 : 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 = error.toString();
-            }
-        }
-    }
-    return (React.createElement(React.Fragment, null,
-        Component ? (React.createElement(DesignLibraryErrorBoundary, { uid: componentToUpdate.uid },
-            React.createElement(PlaceholderMetadata, { rendering: componentToUpdate },
-                React.createElement(Component, { fields: componentToUpdate.fields, params: componentToUpdate.params, key: Date.now() })))) : (React.createElement(AppPlaceholder, { name: EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap, key: Date.now() })),
-        React.createElement(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 })));
-};
-/**
- * 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.
- */
-export const DesignLibraryServerPreview = async ({ page, rendering, componentMap, }) => {
-    var _a, _b;
-    let designLibraryStatus = DesignLibraryStatus.READY;
-    let componentToUpdate = (_b = (_a = rendering === null || rendering === void 0 ? void 0 : rendering.placeholders) === null || _a === void 0 ? void 0 : _a[EDITING_COMPONENT_PLACEHOLDER]) === null || _b === void 0 ? void 0 : _b[0];
-    if (!componentToUpdate)
-        return React.createElement(ErrorComponent, { message: "Rendering data is missing" });
-    if (!componentToUpdate.uid)
-        return React.createElement(ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
-    const componentUpdateKey = `${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 = 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.createElement(React.Fragment, null,
-        React.createElement(AppPlaceholder, { name: EDITING_COMPONENT_PLACEHOLDER, page: page, rendering: rendering, componentMap: componentMap, key: Date.now() }),
-        React.createElement(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) })));
-};

package/dist/esm/server-actions/update-server-component-action.js

@@ -1,47 +0,0 @@
-'use server';
-import { debug } from '@sitecore-content-sdk/content';
-import { fetchGeneratedComponentFromCache, } from '@sitecore-content-sdk/content/codegen';
-import { setCache } from '@sitecore-content-sdk/core/tools';
-import { COMPONENT_UPDATE_CACHE_KEY_PREFIX, COMPONENT_PREVIEW_CACHE_KEY_PREFIX, } from '@sitecore-content-sdk/content/editing';
-/**
- * Server action to update global cache with the provided component updates received from Design Library.
- * Stores the given {@link ComponentUpdateModel} in the global cache using a key based on the component UID.
- * This enables rendering dynamic updates of server components inside Design Library
- * @param {ComponentUpdateModel} updatedComponent - The component update model containing the UID and optional updated or preview component data.
- * @returns A Promise that resolves when the cache has been updated.
- */
-export async function updateComponentAction(updatedComponent) {
-    debug.editing(`Updating server component cache for Update Component: ${updatedComponent.uid}`);
-    setCache(`${COMPONENT_UPDATE_CACHE_KEY_PREFIX}${updatedComponent.uid}`, updatedComponent);
-}
-/**
- * Server action to update global cache with the generated component data in variant generation mode
- * The generated component data is retrieved from a secured cache endpoint via the provided event arguments.
- * This enables rendering dynamic updates of server components inside Design Library
- * @param {PreviewEventModel} previewEvent - The preview event model containing the UID and the preview event arguments with cache information to fetch the generated component data.
- * @param {string} [edgeUrl] - Optional Edge URL to fetch the generated component data.
- * @returns A Promise that resolves when the cache has been updated.
- */
-export async function previewComponentAction(previewEvent, edgeUrl) {
-    debug.editing(`Updating server component cache for Preview Component: ${previewEvent.uid}`);
-    const updatedComponent = {
-        uid: previewEvent.uid,
-        generatedComponentData: undefined,
-        error: undefined,
-    };
-    if (previewEvent.args) {
-        // we've received a component preview event from the Design Library, so we need to fetch the generated component data from secured endpoint
-        try {
-            updatedComponent.generatedComponentData = await fetchGeneratedComponentFromCache(previewEvent.args.message.cache.id, previewEvent.args.message.cache.token, edgeUrl);
-        }
-        catch (error) {
-            debug.editing(`Error fetching generated component data from cache for Component: ${previewEvent.uid}`, error);
-            updatedComponent.error = error instanceof Error ? error.message : String(error);
-        }
-    }
-    else {
-        debug.editing(`No preview event arguments provided for Component: ${previewEvent.uid}`);
-        updatedComponent.error = 'No preview event arguments provided';
-    }
-    setCache(`${COMPONENT_PREVIEW_CACHE_KEY_PREFIX}${updatedComponent.uid}`, updatedComponent);
-}

package/types/components/DesignLibrary/DesignLibraryApp.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { DesingLibraryAppProps } from './models';
-/**
- * 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
- */
-export declare const DesignLibraryApp: ({ page, componentMap, loadServerImportMap, }: DesingLibraryAppProps) => React.JSX.Element | null;
-//# sourceMappingURL=DesignLibraryApp.d.ts.map

package/types/components/DesignLibrary/DesignLibraryApp.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DesignLibraryApp.d.ts","sourceRoot":"","sources":["../../../src/components/DesignLibrary/DesignLibraryApp.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAIjD;;;;;;;;;GASG;AACH,eAAO,MAAM,gBAAgB,GAAI,8CAI9B,qBAAqB,6BAsBvB,CAAC"}

package/types/components/DesignLibrary/DesignLibraryClientEvents.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import { DesignLibraryPreviewEventsProps, DesignLibraryVariantGenerationEventsProps } from './models';
-export declare const __mockDependencies: (mocks: any) => void;
-/**
- * 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.
- */
-export declare const DesignLibraryPreviewEvents: ({ designLibraryStatus, component, }: DesignLibraryPreviewEventsProps) => React.JSX.Element;
-/**
- * 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.
- */
-export declare const DesignLibraryVariantGenerationEvents: ({ designLibraryStatus, component, importMap, componentInitError, generatedComponentData, }: DesignLibraryVariantGenerationEventsProps) => React.JSX.Element;
-//# sourceMappingURL=DesignLibraryClientEvents.d.ts.map