@sitecore-content-sdk/react 1.1.0-canary.9 → 1.2.0-canary.10

package/dist/cjs/components/BYOCComponent.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/cjs/components/BYOCWrapper.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/components/Date.js

@@ -20,7 +20,9 @@ const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
 const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
 const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
 const layout_1 = require("@sitecore-content-sdk/core/layout");
-exports.DateField = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((_a) => {
+exports.DateField = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(
+// eslint-disable-next-line no-unused-vars
+(_a) => {
     var { field, tag, editable = true, render } = _a, otherProps = __rest(_a, ["field", "tag", "editable", "render"]);
     if ((0, layout_1.isFieldValueEmpty)(field)) {
         return null;

package/dist/cjs/components/DesignLibrary.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,6 +33,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DesignLibrary = exports.VariantGeneration = exports.__mockDependencies = void 0;
 /* eslint-disable jsdoc/require-param */
@@ -61,10 +71,7 @@ const Preview = () => {
     // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
     let componentReady = false;
     // have an up-to-date layout state between re-renders (SSR re-render excluded)
-    const persistedRoot = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [
-        rootComponent,
-        rootUpdate,
-    ]);
+    const persistedRoot = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [rootComponent, rootUpdate]);
     route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
     (0, react_1.useEffect)(() => {
         // useEffect will fire when components are ready - and we inform the whole wide world of it too
@@ -90,6 +97,11 @@ const Preview = () => {
         react_1.default.createElement("main", null,
             react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID }, route && (react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 };
+const sendErrorEvent = (uid, error, type) => {
+    const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
+    console.error('Component Library: sending error event', errorEvent);
+    window.top.postMessage(errorEvent, '*');
+};
 class ErrorBoundary extends react_1.default.Component {
     constructor() {
         super(...arguments);
@@ -106,9 +118,7 @@ class ErrorBoundary extends react_1.default.Component {
         }
     }
     componentDidCatch(error) {
-        const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
-        console.debug('Component Library: sending error event', errorEvent);
-        window.top.postMessage(errorEvent, '*');
+        sendErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
     }
     render() {
         if (this.state.hasError) {
@@ -126,40 +136,75 @@ const VariantGeneration = (props) => {
     const { layout: { sitecore: { route }, }, } = page;
     const rendering = route === null || route === void 0 ? void 0 : route.placeholders[layout_1.EDITING_COMPONENT_PLACEHOLDER][0];
     const [renderKey, setRenderKey] = (0, react_1.useState)(0);
-    const [initError, setInitError] = (0, react_1.useState)(false);
     const [Component, setComponent] = (0, react_1.useState)(null);
-    if (!props.importMap) {
-        return react_1.default.createElement("div", null, "No import map found. Please check your import map.");
-    }
-    if (!rendering) {
-        return react_1.default.createElement("div", null, "No component found in layout data. Please check your layout data.");
-    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, react_1.useEffect)(() => {
-        const unsubscribe = addComponentPreviewHandler(props.importMap, (error, Component) => {
-            setRenderKey((key) => key + 1);
-            if (error) {
-                setInitError(true);
+        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 = undefined;
+        const init = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            let importMap = undefined;
+            if (!props.loadImportMap) {
+                const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
+                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+                return;
+            }
+            try {
+                const importMapImport = yield props.loadImportMap();
+                importMap = importMapImport.default;
+            }
+            catch (error) {
+                const errorMessage = `Error loading import map: ${error}`;
+                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
-            setInitError(false);
-            setComponent(() => Component);
+            // 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;
+                }
+                setRenderKey((key) => key + 1);
+                setComponent(() => Component);
+            });
+            const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
+            console.debug('Component Library: sending event', importMapEvent);
+            window.parent.postMessage(importMapEvent, '*');
+            const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
+            console.debug('Component Library: sending event', componentPropsEvent);
+            window.top.postMessage(componentPropsEvent, '*');
+            const readyEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.READY, rendering.uid);
+            console.debug('Component Library: sending event', readyEvent);
+            (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(readyEvent, '*');
         });
-        const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, props.importMap);
-        console.debug('Component Library: sending event', importMapEvent);
-        window.parent.postMessage(importMapEvent, '*');
-        const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
-        console.debug('Component Library: sending event', componentPropsEvent);
-        window.top.postMessage(componentPropsEvent, '*');
-        return unsubscribe;
+        init();
+        // return function that calls unsubsubribe - if the component was mounted correctly
+        return () => {
+            cancelled = true;
+            if (unsubscribe) {
+                unsubscribe();
+            }
+        };
     }, []);
-    if (initError) {
-        return react_1.default.createElement("div", { key: renderKey }, "Error during component initialization");
-    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0)
+            return undefined;
+        const renderedEvent = (0, editing_1.getDesignLibraryStatusEvent)(editing_1.DesignLibraryStatus.RENDERED, rendering.uid);
+        console.debug('Component Library: sending event', renderedEvent);
+        (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(renderedEvent, '*');
+    }, [renderKey, rendering === null || rendering === void 0 ? void 0 : rendering.uid]);
     return (react_1.default.createElement("main", null, Component ? (react_1.default.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
         react_1.default.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (react_1.default.createElement("div", null, "Loading preview..."))));
 };
 exports.VariantGeneration = VariantGeneration;
-const DesignLibrary = ({ importMap }) => {
+const DesignLibrary = ({ loadImportMap }) => {
     var _a;
     const { page } = (0, withSitecore_1.useSitecore)();
     const { isDesignLibrary } = page.mode;
@@ -168,7 +213,7 @@ const DesignLibrary = ({ importMap }) => {
         return null;
     }
     if (isVariantGeneration) {
-        return react_1.default.createElement(exports.VariantGeneration, { importMap: importMap });
+        return react_1.default.createElement(exports.VariantGeneration, { loadImportMap: loadImportMap });
     }
     return react_1.default.createElement(Preview, null);
 };

package/dist/cjs/components/EditingScripts.js

@@ -23,8 +23,14 @@ const EditingScripts = () => {
     }
     // In case of Design Library - render only the script for Design Library
     if (mode.isDesignLibrary) {
-        // Add cache buster to the script URL
-        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${Date.now()}`;
+        // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
+        const now = new Date();
+        const hour = String(now.getUTCHours()).padStart(2, '0');
+        const day = String(now.getUTCDate()).padStart(2, '0');
+        const month = String(now.getUTCMonth() + 1).padStart(2, '0');
+        const year = String(now.getUTCFullYear());
+        const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
+        const scriptUrl = `${(0, editing_2.getDesignLibraryScriptLink)((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
         return (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
     }

package/dist/cjs/components/FEaaSComponent.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -119,8 +120,7 @@ function fetchComponentTemplate(src, params, revisionFallback) {
             return template;
         }
         catch (error) {
-            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
-                revisionFallback}" is present`);
+            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision || revisionFallback}" is present`);
             throw error;
         }
     });

package/dist/cjs/components/FEaaSWrapper.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/components/File.js

@@ -24,9 +24,7 @@ const File = (_a) => {
         return null;
     }
     // handle link directly on field for forgetful devs
-    const file = (dynamicField.src
-        ? field
-        : dynamicField.value);
+    const file = (dynamicField.src ? field : dynamicField.value);
     if (!file) {
         return null;
     }

package/dist/cjs/components/Form.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/dist/cjs/components/Image.js

@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = void 0;
+/* eslint-disable no-unused-vars */
 const media_1 = require("@sitecore-content-sdk/core/media");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("../utils");

package/dist/cjs/components/Link.js

@@ -45,14 +45,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Link = void 0;
+/* eslint-disable no-unused-expressions, @typescript-eslint/no-unused-expressions */
 const react_1 = __importStar(require("react"));
 const layout_1 = require("@sitecore-content-sdk/core/layout");
 const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
 const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
 const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
-exports.Link = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(
-// eslint-disable-next-line react/display-name
-(0, react_1.forwardRef)((_a, ref) => {
+exports.Link = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((0, react_1.forwardRef)(
+// eslint-disable-next-line no-unused-vars
+(_a, ref) => {
     var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
     const children = otherProps.children;
     const dynamicField = field;

package/dist/cjs/components/RichText.js

@@ -50,10 +50,14 @@ const withFieldMetadata_1 = require("../enhancers/withFieldMetadata");
 const withEmptyFieldEditingComponent_1 = require("../enhancers/withEmptyFieldEditingComponent");
 const DefaultEmptyFieldEditingComponents_1 = require("./DefaultEmptyFieldEditingComponents");
 const layout_1 = require("@sitecore-content-sdk/core/layout");
-exports.RichText = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)(
-// eslint-disable-next-line react/display-name
-(0, react_1.forwardRef)((_a, ref) => {
-    var { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
+exports.RichText = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEditingComponent_1.withEmptyFieldEditingComponent)((0, react_1.forwardRef)((
+// eslint-disable-next-line no-unused-vars
+_a, ref) => {
+    var 
+    // eslint-disable-next-line no-unused-vars
+    { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, 
+    // eslint-disable-next-line no-unused-vars
+    ["field", "tag", "editable"]);
     if ((0, layout_1.isFieldValueEmpty)(field)) {
         return null;
     }

package/dist/cjs/components/SitecoreProvider.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/components/Text.js

@@ -27,7 +27,7 @@ exports.Text = (0, withFieldMetadata_1.withFieldMetadata)((0, withEmptyFieldEdit
     }
     // can't use editable value if we want to output unencoded
     if (!encode) {
-        // eslint-disable-next-line no-param-reassign
+        // eslint-disable-next-line no-param-reassign, no-unused-vars
         editable = false;
     }
     let output = field.value === undefined ? '' : field.value;

package/dist/cjs/enhancers/withComponentMap.js

@@ -19,8 +19,6 @@ function withComponentMap(Component) {
         const context = (0, react_2.useContext)(SitecoreProvider_1.ComponentMapReactContext);
         return react_1.default.createElement(Component, Object.assign({}, props, { componentMap: props.componentMap || context }));
     }
-    WithComponentMap.displayName = `withComponentMap(${Component.displayName ||
-        Component.name ||
-        'Anonymous'})`;
+    WithComponentMap.displayName = `withComponentMap(${Component.displayName || Component.name || 'Anonymous'})`;
     return WithComponentMap;
 }

package/dist/cjs/enhancers/withEmptyFieldEditingComponent.js

@@ -51,13 +51,11 @@ function withEmptyFieldEditingComponent(FieldComponent, options) {
         return null;
     };
     if (options.isForwardRef) {
-        // eslint-disable-next-line react/display-name
         return (0, react_1.forwardRef)((props, ref) => {
             const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
             return (react_1.default.createElement(react_1.default.Fragment, null, (EmptyFieldEditingComponent && react_1.default.createElement(EmptyFieldEditingComponent, null)) || (react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref })))));
         });
     }
-    // eslint-disable-next-line react/display-name
     return (props) => {
         const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
         return (react_1.default.createElement(react_1.default.Fragment, null, (EmptyFieldEditingComponent && react_1.default.createElement(EmptyFieldEditingComponent, null)) || (react_1.default.createElement(FieldComponent, Object.assign({}, props)))));

package/dist/cjs/enhancers/withFieldMetadata.js

@@ -43,7 +43,6 @@ const FieldMetadata_1 = require("../components/FieldMetadata");
  */
 function withFieldMetadata(FieldComponent, isForwardRef = false) {
     if (isForwardRef) {
-        // eslint-disable-next-line react/display-name
         return (0, react_1.forwardRef)((props, ref) => {
             var _a;
             const { editable = true } = props;
@@ -55,7 +54,6 @@ function withFieldMetadata(FieldComponent, isForwardRef = false) {
                 react_1.default.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
         });
     }
-    // eslint-disable-next-line react/display-name
     return (props) => {
         var _a;
         const { editable = true } = props;

package/dist/cjs/enhancers/withPlaceholder.js

@@ -50,7 +50,8 @@ function withPlaceholder(placeholders, options) {
                     else {
                         placeholderData = PlaceholderCommon_1.PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.page.mode.isEditing);
                         if (placeholderData) {
-                            childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
+                            childProps[placeholder] =
+                                this.getComponentsForRenderingData(placeholderData);
                         }
                     }
                 });

package/dist/cjs/enhancers/withSitecore.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/esm/components/BYOCComponent.js

@@ -1,3 +1,4 @@
+'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) {

package/dist/esm/components/BYOCWrapper.js

@@ -1,3 +1,4 @@
+'use client';
 import { BYOCComponent } from './BYOCComponent';
 import React from 'react';
 export const BYOC_WRAPPER_RENDERING_NAME = 'BYOCWrapper';

package/dist/esm/components/Date.js

@@ -14,7 +14,9 @@ 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((_a) => {
+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;

package/dist/esm/components/DesignLibrary.js

@@ -1,3 +1,13 @@
+'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, useMemo, useState } from 'react';
@@ -24,10 +34,7 @@ const Preview = () => {
     // useEffect may execute multiple times on single render (i.e. in dev) - but we only want to fire ready event once
     let componentReady = false;
     // have an up-to-date layout state between re-renders (SSR re-render excluded)
-    const persistedRoot = useMemo(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [
-        rootComponent,
-        rootUpdate,
-    ]);
+    const persistedRoot = useMemo(() => (Object.assign(Object.assign({}, (rootComponent || {})), rootUpdate)), [rootComponent, rootUpdate]);
     route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0] = persistedRoot;
     useEffect(() => {
         // useEffect will fire when components are ready - and we inform the whole wide world of it too
@@ -53,6 +60,11 @@ const Preview = () => {
         React.createElement("main", null,
             React.createElement("div", { id: EDITING_COMPONENT_ID }, route && (React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: route, key: renderKey }))))));
 };
+const sendErrorEvent = (uid, error, type) => {
+    const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(uid, error, type);
+    console.error('Component Library: sending error event', errorEvent);
+    window.top.postMessage(errorEvent, '*');
+};
 class ErrorBoundary extends React.Component {
     constructor() {
         super(...arguments);
@@ -69,9 +81,7 @@ class ErrorBoundary extends React.Component {
         }
     }
     componentDidCatch(error) {
-        const errorEvent = codegen.getDesignLibraryComponentPreviewErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
-        console.debug('Component Library: sending error event', errorEvent);
-        window.top.postMessage(errorEvent, '*');
+        sendErrorEvent(this.props.uid, error, codegen.DesignLibraryPreviewError.Render);
     }
     render() {
         if (this.state.hasError) {
@@ -89,39 +99,74 @@ export const VariantGeneration = (props) => {
     const { layout: { sitecore: { route }, }, } = page;
     const rendering = route === null || route === void 0 ? void 0 : route.placeholders[EDITING_COMPONENT_PLACEHOLDER][0];
     const [renderKey, setRenderKey] = useState(0);
-    const [initError, setInitError] = useState(false);
     const [Component, setComponent] = useState(null);
-    if (!props.importMap) {
-        return React.createElement("div", null, "No import map found. Please check your import map.");
-    }
-    if (!rendering) {
-        return React.createElement("div", null, "No component found in layout data. Please check your layout data.");
-    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     useEffect(() => {
-        const unsubscribe = addComponentPreviewHandler(props.importMap, (error, Component) => {
-            setRenderKey((key) => key + 1);
-            if (error) {
-                setInitError(true);
+        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 = undefined;
+        const init = () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            let importMap = undefined;
+            if (!props.loadImportMap) {
+                const errorMessage = 'No loadImportMap prop provided. Please provide a dynamic import map function for DesignLibrary.';
+                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
+                return;
+            }
+            try {
+                const importMapImport = yield props.loadImportMap();
+                importMap = importMapImport.default;
+            }
+            catch (error) {
+                const errorMessage = `Error loading import map: ${error}`;
+                sendErrorEvent(rendering.uid, errorMessage, codegen.DesignLibraryPreviewError.RenderInit);
                 return;
             }
-            setInitError(false);
-            setComponent(() => Component);
+            // 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;
+                }
+                setRenderKey((key) => key + 1);
+                setComponent(() => Component);
+            });
+            const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, importMap);
+            console.debug('Component Library: sending event', importMapEvent);
+            window.parent.postMessage(importMapEvent, '*');
+            const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
+            console.debug('Component Library: sending event', componentPropsEvent);
+            window.top.postMessage(componentPropsEvent, '*');
+            const readyEvent = getDesignLibraryStatusEvent(DesignLibraryStatus.READY, rendering.uid);
+            console.debug('Component Library: sending event', readyEvent);
+            (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(readyEvent, '*');
         });
-        const importMapEvent = getDesignLibraryImportMapEvent(rendering.uid, props.importMap);
-        console.debug('Component Library: sending event', importMapEvent);
-        window.parent.postMessage(importMapEvent, '*');
-        const componentPropsEvent = getDesignLibraryComponentPropsEvent(rendering.uid, rendering.fields, rendering.params);
-        console.debug('Component Library: sending event', componentPropsEvent);
-        window.top.postMessage(componentPropsEvent, '*');
-        return unsubscribe;
+        init();
+        // return function that calls unsubsubribe - if the component was mounted correctly
+        return () => {
+            cancelled = true;
+            if (unsubscribe) {
+                unsubscribe();
+            }
+        };
     }, []);
-    if (initError) {
-        return React.createElement("div", { key: renderKey }, "Error during component initialization");
-    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        var _a;
+        // Send a rendered event only as effect of a component update command
+        if (renderKey === 0)
+            return undefined;
+        const renderedEvent = getDesignLibraryStatusEvent(DesignLibraryStatus.RENDERED, rendering.uid);
+        console.debug('Component Library: sending event', renderedEvent);
+        (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage(renderedEvent, '*');
+    }, [renderKey, rendering === null || rendering === void 0 ? void 0 : rendering.uid]);
     return (React.createElement("main", null, Component ? (React.createElement(ErrorBoundary, { uid: rendering.uid, renderKey: renderKey },
         React.createElement(Component, { fields: rendering.fields, params: rendering.params, key: renderKey }))) : (React.createElement("div", null, "Loading preview..."))));
 };
-export const DesignLibrary = ({ importMap }) => {
+export const DesignLibrary = ({ loadImportMap }) => {
     var _a;
     const { page } = useSitecore();
     const { isDesignLibrary } = page.mode;
@@ -130,7 +175,7 @@ export const DesignLibrary = ({ importMap }) => {
         return null;
     }
     if (isVariantGeneration) {
-        return React.createElement(VariantGeneration, { importMap: importMap });
+        return React.createElement(VariantGeneration, { loadImportMap: loadImportMap });
     }
     return React.createElement(Preview, null);
 };

package/dist/esm/components/EditingScripts.js

@@ -17,8 +17,14 @@ export const EditingScripts = () => {
     }
     // In case of Design Library - render only the script for Design Library
     if (mode.isDesignLibrary) {
-        // Add cache buster to the script URL
-        const scriptUrl = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${Date.now()}`;
+        // Add cache buster to the script URL (format hh-dd-mm-yyyy, UTC)
+        const now = new Date();
+        const hour = String(now.getUTCHours()).padStart(2, '0');
+        const day = String(now.getUTCDate()).padStart(2, '0');
+        const month = String(now.getUTCMonth() + 1).padStart(2, '0');
+        const year = String(now.getUTCFullYear());
+        const cacheTimestamp = `${hour}-${day}-${month}-${year}`;
+        const scriptUrl = `${getDesignLibraryScriptLink((_a = api === null || api === void 0 ? void 0 : api.edge) === null || _a === void 0 ? void 0 : _a.edgeUrl)}?cb=${cacheTimestamp}`;
         return (React.createElement(React.Fragment, null,
             React.createElement("script", { src: scriptUrl, suppressHydrationWarning: true })));
     }

package/dist/esm/components/FEaaSComponent.js

@@ -1,3 +1,4 @@
+'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) {
@@ -78,8 +79,7 @@ function fetchComponentTemplate(src, params, revisionFallback) {
             return template;
         }
         catch (error) {
-            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision ||
-                revisionFallback}" is present`);
+            console.error(`Fetch FEAAS component from ${src} failed. Ensure the component revision "${params.ComponentRevision || revisionFallback}" is present`);
             throw error;
         }
     });

package/dist/esm/components/FEaaSWrapper.js

@@ -1,3 +1,4 @@
+'use client';
 import { FEaaSComponent } from './FEaaSComponent';
 import React from 'react';
 export const FEAAS_WRAPPER_RENDERING_NAME = 'FEaaSWrapper';

package/dist/esm/components/File.js

@@ -18,9 +18,7 @@ export const File = (_a) => {
         return null;
     }
     // handle link directly on field for forgetful devs
-    const file = (dynamicField.src
-        ? field
-        : dynamicField.value);
+    const file = (dynamicField.src ? field : dynamicField.value);
     if (!file) {
         return null;
     }

package/dist/esm/components/Form.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { useEffect, useRef, useState } from 'react';
 import { form } from '@sitecore-content-sdk/core';
 import { useSitecore } from '../enhancers/withSitecore';

package/dist/esm/components/Image.js

@@ -9,6 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/* eslint-disable no-unused-vars */
 import { mediaApi } from '@sitecore-content-sdk/core/media';
 import React from 'react';
 import { addClassName } from '../utils';

package/dist/esm/components/Link.js

@@ -9,14 +9,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/* eslint-disable no-unused-expressions, @typescript-eslint/no-unused-expressions */
 import React, { forwardRef } from 'react';
 import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
 import { withFieldMetadata } from '../enhancers/withFieldMetadata';
 import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
 import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
-export const Link = withFieldMetadata(withEmptyFieldEditingComponent(
-// eslint-disable-next-line react/display-name
-forwardRef((_a, ref) => {
+export const Link = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef(
+// eslint-disable-next-line no-unused-vars
+(_a, ref) => {
     var { field, editable = true, showLinkTextWithChildrenPresent } = _a, otherProps = __rest(_a, ["field", "editable", "showLinkTextWithChildrenPresent"]);
     const children = otherProps.children;
     const dynamicField = field;

package/dist/esm/components/RichText.js

@@ -14,10 +14,14 @@ import { withFieldMetadata } from '../enhancers/withFieldMetadata';
 import { withEmptyFieldEditingComponent } from '../enhancers/withEmptyFieldEditingComponent';
 import { DefaultEmptyFieldEditingComponentText } from './DefaultEmptyFieldEditingComponents';
 import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
-export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(
-// eslint-disable-next-line react/display-name
-forwardRef((_a, ref) => {
-    var { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, ["field", "tag", "editable"]);
+export const RichText = withFieldMetadata(withEmptyFieldEditingComponent(forwardRef((
+// eslint-disable-next-line no-unused-vars
+_a, ref) => {
+    var 
+    // eslint-disable-next-line no-unused-vars
+    { field, tag = 'div', editable = true } = _a, otherProps = __rest(_a, 
+    // eslint-disable-next-line no-unused-vars
+    ["field", "tag", "editable"]);
     if (isFieldValueEmpty(field)) {
         return null;
     }

package/dist/esm/components/SitecoreProvider.js

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import fastDeepEqual from 'fast-deep-equal/es6/react';
 import { constants } from '@sitecore-content-sdk/core';

package/dist/esm/components/Text.js

@@ -21,7 +21,7 @@ export const Text = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
     }
     // can't use editable value if we want to output unencoded
     if (!encode) {
-        // eslint-disable-next-line no-param-reassign
+        // eslint-disable-next-line no-param-reassign, no-unused-vars
         editable = false;
     }
     let output = field.value === undefined ? '' : field.value;

package/dist/esm/enhancers/withComponentMap.js

@@ -13,8 +13,6 @@ export function withComponentMap(Component) {
         const context = useContext(ComponentMapReactContext);
         return React.createElement(Component, Object.assign({}, props, { componentMap: props.componentMap || context }));
     }
-    WithComponentMap.displayName = `withComponentMap(${Component.displayName ||
-        Component.name ||
-        'Anonymous'})`;
+    WithComponentMap.displayName = `withComponentMap(${Component.displayName || Component.name || 'Anonymous'})`;
     return WithComponentMap;
 }

package/dist/esm/enhancers/withEmptyFieldEditingComponent.js

@@ -15,13 +15,11 @@ export function withEmptyFieldEditingComponent(FieldComponent, options) {
         return null;
     };
     if (options.isForwardRef) {
-        // eslint-disable-next-line react/display-name
         return forwardRef((props, ref) => {
             const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
             return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props, { ref: ref })))));
         });
     }
-    // eslint-disable-next-line react/display-name
     return (props) => {
         const EmptyFieldEditingComponent = getEmptyFieldEditingComponent(props);
         return (React.createElement(React.Fragment, null, (EmptyFieldEditingComponent && React.createElement(EmptyFieldEditingComponent, null)) || (React.createElement(FieldComponent, Object.assign({}, props)))));

package/dist/esm/enhancers/withFieldMetadata.js

@@ -7,7 +7,6 @@ import { FieldMetadata } from '../components/FieldMetadata';
  */
 export function withFieldMetadata(FieldComponent, isForwardRef = false) {
     if (isForwardRef) {
-        // eslint-disable-next-line react/display-name
         return forwardRef((props, ref) => {
             var _a;
             const { editable = true } = props;
@@ -19,7 +18,6 @@ export function withFieldMetadata(FieldComponent, isForwardRef = false) {
                 React.createElement(FieldComponent, Object.assign({}, props, { ref: ref }))));
         });
     }
-    // eslint-disable-next-line react/display-name
     return (props) => {
         var _a;
         const { editable = true } = props;

package/dist/esm/enhancers/withPlaceholder.js

@@ -44,7 +44,8 @@ export function withPlaceholder(placeholders, options) {
                     else {
                         placeholderData = PlaceholderCommon.getPlaceholderDataFromRenderingData(renderingData, placeholder, childProps.page.mode.isEditing);
                         if (placeholderData) {
-                            childProps[placeholder] = this.getComponentsForRenderingData(placeholderData);
+                            childProps[placeholder] =
+                                this.getComponentsForRenderingData(placeholderData);
                         }
                     }
                 });

package/dist/esm/enhancers/withSitecore.js

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 import { SitecoreProviderReactContext, } from '../components/SitecoreProvider';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-content-sdk/react",
-  "version": "1.1.0-canary.9",
+  "version": "1.2.0-canary.10",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@sitecore-feaas/clientside": "^0.6.0",
+    "@stylistic/eslint-plugin": "^5.2.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/chai": "^5.2.2",
@@ -41,14 +42,22 @@
     "@types/react-dom": "^19.1.3",
     "@types/sinon": "^17.0.4",
     "@types/sinon-chai": "^4.0.0",
+    "@typescript-eslint/eslint-plugin": "8.39.0",
+    "@typescript-eslint/parser": "8.39.0",
     "chai": "^4.3.7",
     "chai-string": "^1.6.0",
     "del-cli": "^6.0.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.37.5",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jsdoc": "52.0.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
     "jsdom": "^26.1.0",
     "mocha": "^11.2.2",
     "nyc": "^17.1.0",
+    "prettier": "^2.8.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sinon": "^20.0.0",
@@ -63,12 +72,12 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-content-sdk/core": "1.1.0-canary.9",
+    "@sitecore-content-sdk/core": "1.2.0-canary.10",
     "fast-deep-equal": "^3.1.3"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "54df7000124edba59ce0224618bbcd5aa7d48c55",
+  "gitHead": "c02a3a5233fb6864d1ff3d48ad676a5bb4722ae4",
   "files": [
     "dist",
     "types"

package/types/components/DesignLibrary.d.ts

@@ -1,11 +1,14 @@
 import { JSX } from 'react';
 import * as codegen from '@sitecore-content-sdk/core/codegen';
 export declare const __mockDependencies: (mocks: any) => void;
+export type ImportMapImport = {
+    default: codegen.ImportEntry[];
+};
 type VariantGenerationProps = {
     /**
      * The import map to be used in variant generation mode.
      */
-    importMap?: codegen.ImportEntry[];
+    loadImportMap?: () => Promise<ImportMapImport>;
 };
 /**
  * This component is used to render the component in variant generation mode.
@@ -14,10 +17,10 @@ type VariantGenerationProps = {
 export declare const VariantGeneration: (props: VariantGenerationProps) => JSX.Element;
 type DesignLibraryProps = {
     /**
-     * The import map to be used in variant generation mode.
+     * The dynamic import for import map to be used in variant generation mode.
      * Currently it's optional but it will be required in the next major version.
      */
-    importMap?: codegen.ImportEntry[];
+    loadImportMap?: () => Promise<ImportMapImport>;
 };
-export declare const DesignLibrary: ({ importMap }: DesignLibraryProps) => JSX.Element;
+export declare const DesignLibrary: ({ loadImportMap }: DesignLibraryProps) => JSX.Element;
 export {};