@sitecore-content-sdk/nextjs 2.0.0-canary.8 → 2.0.0

package/dist/cjs/services/component-props-service.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,18 +10,16 @@ const chalk_1 = __importDefault(require("chalk"));
  * @public
  */
 class ComponentPropsService {
-    fetchComponentProps(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            const { layoutData, context, components } = params;
-            const requests = yield this.collectRequests({
-                placeholders: (_a = layoutData.sitecore.route) === null || _a === void 0 ? void 0 : _a.placeholders,
-                components,
-                layoutData,
-                context,
-            });
-            return yield this.execRequests(requests);
+    async fetchComponentProps(params) {
+        var _a;
+        const { layoutData, context, components } = params;
+        const requests = await this.collectRequests({
+            placeholders: (_a = layoutData.sitecore.route) === null || _a === void 0 ? void 0 : _a.placeholders,
+            components,
+            layoutData,
+            context,
         });
+        return await this.execRequests(requests);
     }
     /**
      * Go through layout service data, check all renderings using displayName, which should make some side effects.
@@ -43,67 +32,63 @@ class ComponentPropsService {
      * @param {ComponentPropsRequest[]} params.requests
      * @returns {ComponentPropsRequest[]} array of requests
      */
-    collectRequests(params) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const { placeholders = {}, components, layoutData, context } = params;
-            // Will be called on first round
-            if (!params.requests) {
-                params.requests = [];
+    async collectRequests(params) {
+        const { placeholders = {}, components, layoutData, context } = params;
+        // Will be called on first round
+        if (!params.requests) {
+            params.requests = [];
+        }
+        const renderings = this.flatRenderings(placeholders);
+        const actions = renderings.map(async (r) => {
+            var _a;
+            const fetchFunc = (_a = (await this.getModule(components, r.componentName))) === null || _a === void 0 ? void 0 : _a.getComponentServerProps;
+            if (fetchFunc) {
+                params.requests &&
+                    params.requests.push({
+                        fetch: fetchFunc,
+                        rendering: r,
+                        layoutData: layoutData,
+                        context,
+                    });
+            }
+            // If placeholders exist in current rendering
+            if (r.placeholders) {
+                await this.collectRequests(Object.assign(Object.assign({}, params), { placeholders: r.placeholders }));
             }
-            const renderings = this.flatRenderings(placeholders);
-            const actions = renderings.map((r) => __awaiter(this, void 0, void 0, function* () {
-                var _a;
-                const fetchFunc = (_a = (yield this.getModule(components, r.componentName))) === null || _a === void 0 ? void 0 : _a.getComponentServerProps;
-                if (fetchFunc) {
-                    params.requests &&
-                        params.requests.push({
-                            fetch: fetchFunc,
-                            rendering: r,
-                            layoutData: layoutData,
-                            context,
-                        });
-                }
-                // If placeholders exist in current rendering
-                if (r.placeholders) {
-                    yield this.collectRequests(Object.assign(Object.assign({}, params), { placeholders: r.placeholders }));
-                }
-            }));
-            yield Promise.all(actions);
-            return params.requests;
         });
+        await Promise.all(actions);
+        return params.requests;
     }
     /**
      * Execute request for component props
      * @param {ComponentPropsRequest[]} requests requests
      * @returns {Promise<ComponentPropsCollection>} requests result
      */
-    execRequests(requests) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const componentProps = {};
-            const promises = requests.map((req) => {
-                const { uid } = req.rendering;
-                if (!uid) {
-                    console.log(`Component ${req.rendering.componentName} doesn't have uid, can't store data for this component`);
-                    return;
-                }
-                return req
-                    .fetch(req.rendering, req.layoutData, req.context)
-                    .then((result) => {
-                    // Set component specific data in componentProps store
-                    componentProps[uid] = result;
-                })
-                    .catch((error) => {
-                    const errLog = `Error during preload data for component ${req.rendering.componentName} (${uid}): ${error.message || error}`;
-                    console.error(chalk_1.default.red(errLog));
-                    componentProps[uid] = {
-                        error: error.message || errLog,
-                        componentName: req.rendering.componentName,
-                    };
-                });
+    async execRequests(requests) {
+        const componentProps = {};
+        const promises = requests.map((req) => {
+            const { uid } = req.rendering;
+            if (!uid) {
+                console.log(`Component ${req.rendering.componentName} doesn't have uid, can't store data for this component`);
+                return;
+            }
+            return req
+                .fetch(req.rendering, req.layoutData, req.context)
+                .then((result) => {
+                // Set component specific data in componentProps store
+                componentProps[uid] = result;
+            })
+                .catch((error) => {
+                const errLog = `Error during preload data for component ${req.rendering.componentName} (${uid}): ${error.message || error}`;
+                console.error(chalk_1.default.red(errLog));
+                componentProps[uid] = {
+                    error: error.message || errLog,
+                    componentName: req.rendering.componentName,
+                };
             });
-            yield Promise.all(promises);
-            return componentProps;
         });
+        await Promise.all(promises);
+        return componentProps;
     }
     /**
      * Take renderings from all placeholders and returns a flat array of renderings.
@@ -128,15 +113,13 @@ class ComponentPropsService {
         });
         return allComponentRenderings;
     }
-    getModule(components, componentName) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            const component = components.get(componentName);
-            if (!component)
-                return null;
-            const module = component.dynamicModule ? yield ((_a = component === null || component === void 0 ? void 0 : component.dynamicModule) === null || _a === void 0 ? void 0 : _a.call(component)) : component;
-            return module;
-        });
+    async getModule(components, componentName) {
+        var _a;
+        const component = components.get(componentName);
+        if (!component)
+            return null;
+        const module = component.dynamicModule ? await ((_a = component === null || component === void 0 ? void 0 : component.dynamicModule) === null || _a === void 0 ? void 0 : _a.call(component)) : component;
+        return module;
     }
 }
 exports.ComponentPropsService = ComponentPropsService;

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

@@ -0,0 +1,25 @@
+import { cache } from '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 = 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
+ */
+export const getCachedPageParams = () => cacheImpl();
+/**
+ * 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
+ */
+export function setCachedPageParams(pageParams) {
+    cacheImpl().locale = pageParams.locale;
+    cacheImpl().site = pageParams.site;
+}

package/dist/esm/client/sitecore-nextjs-client.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { SitecoreClient, } from '@sitecore-content-sdk/content/client';
 import { ComponentPropsService } from '../services/component-props-service';
 import { getSiteRewriteData, normalizeSiteRewrite } from '@sitecore-content-sdk/content/site';
@@ -41,23 +32,17 @@ export class SitecoreNextjsClient extends SitecoreClient {
         const basePath = super.parsePath(path);
         return normalizeSiteRewrite(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 || 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 || 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
@@ -65,26 +50,16 @@ export class SitecoreNextjsClient extends 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.
@@ -100,25 +75,20 @@ export class SitecoreNextjsClient extends 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 = 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 = 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.
@@ -127,21 +97,16 @@ export class SitecoreNextjsClient extends 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 = 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 = normalizeSiteRewrite(path.params.path.join('/')).split('/');
+            });
+        }
+        return staticPaths;
     }
     /**
      * Parses components from nextjs component map and layoutData, executes getServerProps/getStaticProps methods
@@ -151,30 +116,28 @@ export class SitecoreNextjsClient extends 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 ComponentPropsService();

package/dist/esm/components/BYOCWrapper.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { BYOCWrapper, fetchBYOCComponentServerProps, } from '@sitecore-content-sdk/react';
 /**
  * Will be called during SSG or SSR
@@ -14,9 +5,9 @@ import { BYOCWrapper, fetchBYOCComponentServerProps, } from '@sitecore-content-s
  * @returns {GetStaticPropsContext | GetStaticPropsContext} context with type depending on SSR or SSG mode
  * @internal
  */
-export const getComponentServerProps = (rendering) => __awaiter(void 0, void 0, void 0, function* () {
+export const getComponentServerProps = async (rendering) => {
     const params = rendering.params || {};
-    const result = yield fetchBYOCComponentServerProps(params);
+    const result = await fetchBYOCComponentServerProps(params);
     return result;
-});
+};
 export default BYOCWrapper;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { EDITING_COMPONENT_PLACEHOLDER } from '@sitecore-content-sdk/content/layout';
+import { DesignLibraryServer } from './DesignLibraryServer';
+import { DesignLibrary } from '@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
+ */
+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,100 @@
+'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 '@sitecore-content-sdk/react';
+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(component, (rendering, eventArgs) => {
+            _previewComponentAction({
+                uid: component.uid,
+                args: eventArgs,
+            }, rendering, 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.createElement(React.Fragment, null);
+};