@sitecore-content-sdk/react 1.3.0-canary.9 → 1.4.0-canary.2

package/dist/esm/components/Date.js

@@ -1,39 +1,43 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { withFieldMetadata } from '../enhancers/withFieldMetadata';
-import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
-import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
-import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
-export const DateField = withFieldMetadata(withEmptyFieldEditingComponent(
-// eslint-disable-next-line no-unused-vars
-(_a) => {
-    var { field, tag, editable = true, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
-    if (isFieldValueEmpty(field)) {
-        return null;
-    }
-    let children;
-    const htmlProps = Object.assign({}, otherProps);
-    if (render) {
-        children = render(field.value ? new Date(field.value) : null);
-    }
-    else {
-        children = field.value;
-    }
-    if (tag) {
-        return React.createElement(tag || 'span', htmlProps, children);
-    }
-    else {
-        return React.createElement(React.Fragment, null, children);
-    }
-}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
-DateField.displayName = 'Date';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { withFieldMetadata } from '../enhancers/withFieldMetadata';
+import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
+import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+/**
+ * The DateField component.
+ * @public
+ */
+export const DateField = withFieldMetadata(withEmptyFieldEditingComponent(
+// eslint-disable-next-line no-unused-vars
+(_a) => {
+    var { field, tag, editable = true, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
+    if (isFieldValueEmpty(field)) {
+        return null;
+    }
+    let children;
+    const htmlProps = Object.assign({}, otherProps);
+    if (render) {
+        children = render(field.value ? new Date(field.value) : null);
+    }
+    else {
+        children = field.value;
+    }
+    if (tag) {
+        return React.createElement(tag || 'span', htmlProps, children);
+    }
+    else {
+        return React.createElement(React.Fragment, null, children);
+    }
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentText }));
+DateField.displayName = 'Date';

package/dist/esm/components/DefaultEmptyFieldEditingComponents.js

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

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

@@ -1,164 +1,124 @@
-'use client';
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/* eslint-disable jsdoc/require-param */
-/* eslint-disable prefer-const */
-import React, { useEffect, useState } from 'react';
-import { Placeholder } from './Placeholder';
-import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-content-sdk/core/layout';
-import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
-import * as codegen from '@sitecore-content-sdk/core/codegen';
-import { useSitecore } from '../enhancers/withSitecore';
-import { PlaceholderMetadata } from './Placeholder';
-let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, } = codegen;
-export const __mockDependencies = (mocks) => {
-    addComponentPreviewHandler = mocks.addComponentPreviewHandler;
-};
-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.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.createElement("div", null, "Error during component rendering");
-        }
-        return this.props.children;
-    }
-}
-/**
- * Design Library component.
- *
- * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
- * when generation is enabled (`page.mode.designLibrary.isVariantGeneration === true`),
- * wires the **variant generation** handshake so the parent (DL Studio) can send
- * generated code to preview and iterate on.
- * @param {DesignLibraryProps} props
- * @param {() => Promise<{ default: import('../codegen').ImportEntry[] }>} [props.loadImportMap] Optional async loader that resolves to the import-map used to resolve the generated component’s imports. Required when `isVariantGeneration` is true.
- * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
- */
-export const DesignLibrary = ({ loadImportMap }) => {
-    var _a, _b;
-    const { page } = useSitecore();
-    const route = page.layout.sitecore.route;
-    const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
-    const { isDesignLibrary } = page.mode;
-    const isVariantGeneration = (_b = page.mode.designLibrary) === null || _b === void 0 ? void 0 : _b.isVariantGeneration;
-    const [propsState, setPropsState] = useState({
-        fields: rendering === null || rendering === void 0 ? void 0 : rendering.fields,
-        params: rendering === null || rendering === void 0 ? void 0 : rendering.params,
-    });
-    const [renderKey, setRenderKey] = useState(0);
-    const [Component, setComponent] = useState(null);
-    const isGeneratedComponentActive = !!Component;
-    if (!isDesignLibrary)
-        return null;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        postToDL(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rendering.uid));
-        if (!isVariantGeneration) {
-            requestAnimationFrame(() => {
-                setRenderKey((k) => (k === 0 ? k + 1 : k));
-            });
-        }
-        const unsubUpdate = addComponentUpdateHandler(rendering, (updated) => {
-            setPropsState({ fields: updated.fields, params: updated.params });
-            setRenderKey((k) => k + 1);
-        });
-        // useEffect will cleanup event handler on re-render
-        return () => unsubUpdate && unsubUpdate();
-    }, [isVariantGeneration, rendering]);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        // Send a rendered event only as effect of a component update command
-        if (renderKey === 0)
-            return;
-        postToDL(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rendering.uid));
-    }, [renderKey, rendering]);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        if (!isDesignLibrary || !isVariantGeneration)
-            return undefined;
-        let cancelled = false;
-        // since import map is loaded lazily, we only need to add preview event handler once the import map is loaded
-        // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
-        let unsubscribe;
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            if (!loadImportMap) {
-                sendErrorEvent(rendering.uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
-                return;
-            }
-            let importMap;
-            try {
-                const mod = yield loadImportMap();
-                importMap = mod.default;
-            }
-            catch (e) {
-                sendErrorEvent(rendering.uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
-                return;
-            }
-            // account for component being unmounted while resolving async import map
-            if (cancelled)
-                return;
-            unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
-                // Error event is already sent in the addComponentPreviewHandler
-                if (error)
-                    return;
-                setComponent(() => Component);
-                setRenderKey((k) => k + 1);
-            });
-            const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
-            postToDL(importMapEvent);
-            const propsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, propsState.fields, propsState.params);
-            postToDL(propsEvent);
-        }))();
-        // return function that calls unsubscribe - if the component was mounted correctly
-        return () => {
-            cancelled = true;
-            unsubscribe && unsubscribe();
-        };
-    }, [isVariantGeneration, rendering]);
-    return (React.createElement("main", null, isGeneratedComponentActive ? (React.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
-        React.createElement(PlaceholderMetadata, { rendering: rendering },
-            React.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
-};
+'use client';
+/* eslint-disable jsdoc/require-param */
+/* eslint-disable prefer-const */
+import React, { useEffect, useState } from 'react';
+import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-content-sdk/core/layout';
+import { DesignLibraryStatus, getDesignLibraryStatusEvent, addComponentUpdateHandler, } from '@sitecore-content-sdk/core/editing';
+import * as codegen from '@sitecore-content-sdk/core/codegen';
+import * as editing from '@sitecore-content-sdk/core/editing';
+import { useSitecore } from '../../enhancers/withSitecore';
+import { Placeholder, PlaceholderMetadata } from '../Placeholder';
+import { DesignLibraryErrorBoundary } from './DesignLibraryErrorBoundary';
+import { withLoadImportMap } from '../../enhancers/withLoadImportMap';
+import { ErrorComponent } from '../ErrorBoundary';
+let { getDesignLibraryImportMapEvent, getDesignLibraryComponentPropsEvent, addComponentPreviewHandler, sendErrorEvent, } = codegen;
+let { postToDesignLibrary } = editing;
+export const __mockDependencies = (mocks) => {
+    addComponentPreviewHandler = mocks.addComponentPreviewHandler;
+    if (mocks.postToDesignLibrary) {
+        postToDesignLibrary = mocks.postToDesignLibrary;
+    }
+    if (mocks.sendErrorEvent) {
+        sendErrorEvent = mocks.sendErrorEvent;
+    }
+};
+/**
+ * Design Library component.
+ *
+ * Renders the **real** Sitecore component for `library` / `library-metadata` modes and,
+ * when generation is enabled (`page.mode.designLibrary.isVariantGeneration === true`),
+ * wires the **variant generation** handshake so the parent (DL Studio) can send
+ * generated code to preview and iterate on.
+ * @param {DesignLibraryProps} props
+ * @param {() => Promise} [props.loadImportMap] Optional async loader that resolves to the import-map used to resolve the generated component’s imports. Required when `isVariantGeneration` is true.
+ * @returns {JSX.Element} The preview surface, or `null` when not in Design Library mode.
+ * @public
+ */
+export const DesignLibrary = withLoadImportMap(({ loadImportMap }) => {
+    var _a, _b;
+    const { page } = useSitecore();
+    const route = page.layout.sitecore.route;
+    const rendering = (_a = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER]) === null || _a === void 0 ? void 0 : _a[0];
+    const uid = rendering === null || rendering === void 0 ? void 0 : rendering.uid;
+    const { isDesignLibrary } = page.mode;
+    const isVariantGeneration = (_b = page.mode.designLibrary) === null || _b === void 0 ? void 0 : _b.isVariantGeneration;
+    const [propsState, setPropsState] = useState({
+        fields: rendering === null || rendering === void 0 ? void 0 : rendering.fields,
+        params: rendering === null || rendering === void 0 ? void 0 : rendering.params,
+    });
+    const [renderKey, setRenderKey] = useState(0);
+    const [Component, setComponent] = useState(null);
+    const isGeneratedComponentActive = !!Component;
+    if (!isDesignLibrary)
+        return null;
+    if (!uid)
+        return React.createElement(ErrorComponent, { message: "Rendering UID is missing in the rendering data" });
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.READY, uid));
+        if (!isVariantGeneration) {
+            requestAnimationFrame(() => {
+                setRenderKey((k) => (k === 0 ? k + 1 : k));
+            });
+        }
+        const unsubUpdate = addComponentUpdateHandler(rendering, (updated) => {
+            setPropsState({ fields: updated.fields, params: updated.params });
+            setRenderKey((k) => k + 1);
+        });
+        // useEffect will cleanup event handler on re-render
+        return () => unsubUpdate && unsubUpdate();
+    }, [isVariantGeneration, rendering, uid]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0)
+            return;
+        postToDesignLibrary(getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, uid));
+    }, [renderKey, uid]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        if (!isDesignLibrary || !isVariantGeneration)
+            return;
+        let cancelled = false;
+        // since import map is loaded lazily, we only need to add preview event handler once the import map is loaded
+        // unsubscribe function for useEffect cleanup will also be returned once importMap promise has been resolved or rejected
+        let unsubscribe;
+        (async () => {
+            if (!loadImportMap) {
+                sendErrorEvent(uid, 'No loadImportMap provided', codegen.DesignLibraryPreviewError.RenderInit);
+                return;
+            }
+            let importMap;
+            try {
+                const mod = await loadImportMap();
+                importMap = mod.default;
+            }
+            catch (e) {
+                sendErrorEvent(uid, `Error loading import map: ${e}`, codegen.DesignLibraryPreviewError.RenderInit);
+                return;
+            }
+            // account for component being unmounted while resolving async import map
+            if (cancelled)
+                return;
+            unsubscribe = addComponentPreviewHandler(importMap, (error, Component) => {
+                // Error event is already sent in the addComponentPreviewHandler
+                if (error)
+                    return;
+                setComponent(() => Component);
+                setRenderKey((k) => k + 1);
+            });
+            const importMapEvent = getDesignLibraryImportMapEvent(uid, importMap);
+            postToDesignLibrary(importMapEvent);
+            const propsEvent = getDesignLibraryComponentPropsEvent(uid, propsState.fields, propsState.params);
+            postToDesignLibrary(propsEvent);
+        })();
+        // return function that calls unsubscribe - if the component was mounted correctly
+        return () => {
+            cancelled = true;
+            unsubscribe && unsubscribe();
+        };
+    }, [isVariantGeneration, uid]);
+    return (React.createElement("main", null, isGeneratedComponentActive ? (React.createElement(DesignLibraryErrorBoundary, { uid: uid, renderKey: renderKey },
+        React.createElement(PlaceholderMetadata, { rendering: rendering },
+            React.createElement(Component, { fields: propsState.fields, params: propsState.params, key: renderKey })))) : (React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { EDITING_COMPONENT_PLACEHOLDER } from '@sitecore-content-sdk/core/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

@@ -0,0 +1,84 @@
+'use client';
+import React, { useEffect } from 'react';
+import * as dlHelpers from '@sitecore-content-sdk/core/editing';
+import * as codegen from '@sitecore-content-sdk/core/codegen';
+import { updateServerComponentAction } from '../../server-actions/update-server-component-action';
+let { getDesignLibraryComponentPropsEvent, addServerComponentPreviewHandler, getDesignLibraryImportMapEvent, addStyleElement, sendErrorEvent, } = codegen;
+let { getDesignLibraryStatusEvent, addComponentUpdateHandler, postToDesignLibrary } = dlHelpers;
+let _updateServerComponentAction = updateServerComponentAction;
+export 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;
+};
+/**
+ * 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));
+        const unsubUpdate = addComponentUpdateHandler(component, (updated) => {
+            _updateServerComponentAction({ uid: updated.uid, updatedComponent: updated });
+        });
+        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, importMapError, previewComponentData, }) => {
+    useEffect(() => {
+        var _a, _b;
+        if (!(component === null || component === void 0 ? void 0 : component.uid))
+            return;
+        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.createElement(React.Fragment, null);
+};

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

@@ -0,0 +1,28 @@
+'use client';
+import React, { Suspense } from 'react';
+import { DesignLibraryPreviewError, sendErrorEvent } from '@sitecore-content-sdk/core/codegen';
+export class DesignLibraryErrorBoundary extends React.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, DesignLibraryPreviewError.Render);
+    }
+    render() {
+        if (this.state.hasError) {
+            return React.createElement("div", null, "Error during component rendering");
+        }
+        return React.createElement(Suspense, null, this.props.children);
+    }
+}