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

package/dist/cjs/editing/codegen/preview.js

@@ -1,193 +1,277 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.addComponentPreviewHandler = exports.DesignLibraryPreviewError = void 0;
-exports.buildComponentDependencies = buildComponentDependencies;
-exports.getDesignLibraryComponentPreviewErrorEvent = getDesignLibraryComponentPreviewErrorEvent;
-exports.getDesignLibraryComponentPropsEvent = getDesignLibraryComponentPropsEvent;
-exports.getDesignLibraryImportMapEvent = getDesignLibraryImportMapEvent;
-const design_library_1 = require("../design-library");
-/**
- * Event to send import map to design library
- */
-const DESIGN_LIBRARY_IMPORT_MAP_EVENT_NAME = 'component:generation:import-map';
-/**
- * Event to send component props to design library
- */
-const DESIGN_LIBRARY_COMPONENT_PROPS_EVENT_NAME = 'component:generation:component-props';
-/**
- * Event to receive component data from design library
- */
-const DESIGN_LIBRARY_COMPONENT_PREVIEW_EVENT_NAME = 'component:generation:component-preview';
-/**
- * Event to send component error to design library
- */
-const DESIGN_LIBRARY_COMPONENT_PREVIEW_ERROR_EVENT_NAME = 'component:generation:component-preview-error';
-/**
- * Enumeration of error types for the design library preview.
- */
-var DesignLibraryPreviewError;
-(function (DesignLibraryPreviewError) {
-    /**
-     * Error occurred during component rendering.
-     */
-    DesignLibraryPreviewError["Render"] = "render";
-    /**
-     * Error occurred during component and event handlers initialization.
-     */
-    DesignLibraryPreviewError["RenderInit"] = "render-init";
-})(DesignLibraryPreviewError || (exports.DesignLibraryPreviewError = DesignLibraryPreviewError = {}));
-/**
- * Builds the component dependencies from the component imports and the import map.
- * @param {ComponentImport[]} componentImports - The component imports.
- * @param {ImportEntry[]} importMap - The import map to be used for the component.
- * @returns {Array<{ name: string; value: unknown }>} The component dependencies.
- */
-function buildComponentDependencies(componentImports, importMap) {
-    const successful = [];
-    const missing = {
-        modules: [],
-        exports: [],
-    };
-    componentImports.forEach((componentImport) => {
-        const moduleEntry = importMap.find((entry) => entry.module === componentImport.module);
-        if (!moduleEntry) {
-            missing.modules.push({
-                module: componentImport.module,
-                alias: componentImport.alias,
-            });
-            return;
-        }
-        const exportEntry = moduleEntry.exports.find((exp) => exp.name === componentImport.export);
-        if (!exportEntry) {
-            missing.exports.push({
-                alias: componentImport.alias,
-                export: componentImport.export,
-                module: componentImport.module,
-            });
-            return;
-        }
-        return successful.push({
-            name: componentImport.alias,
-            value: exportEntry.value,
-        });
-    });
-    return {
-        successful,
-        missing,
-    };
-}
-/**
- * Adds the browser-side event handler for 'component:generation:component-preview' message used in Design Library
- * The event should contain the component code, styles and imports.
- * @param {ImportEntry[]} importMap - The import map to be used for the component.
- * @param {Function} callback callback to be called after component is received
- */
-const addComponentPreviewHandler = (importMap, callback) => {
-    if (!window)
-        return;
-    const handler = (e) => {
-        const eventArgs = e.data;
-        try {
-            if (!e.origin || !eventArgs || eventArgs.name !== 'component:generation:component-preview') {
-                // avoid extra noise in logs
-                if (!(0, design_library_1.validateOrigin)(e)) {
-                    console.debug('Component Library: event skipped - invalid origin: message %s from origin %s', eventArgs.name, e.origin);
-                }
-                return;
-            }
-            console.debug('Component Library: message received', eventArgs);
-            const { message } = eventArgs;
-            const dependencies = buildComponentDependencies(message.imports, importMap);
-            if (dependencies.missing.modules.length > 0 || dependencies.missing.exports.length > 0) {
-                let errorMessage = '';
-                dependencies.missing.modules.forEach((mod) => {
-                    errorMessage += `Missing module: '${mod.module}' with alias: '${mod.alias}'\n`;
-                });
-                dependencies.missing.exports.forEach((exp) => {
-                    const alias = exp.export !== exp.alias ? ` with alias: '${exp.alias}'` : '';
-                    errorMessage += `Missing export: '${exp.export}' from module: '${exp.module}'${alias}\n`;
-                });
-                throw errorMessage;
-            }
-            const importNames = dependencies.successful.map((entry) => entry.name);
-            const importInstances = dependencies.successful.map((entry) => entry.value);
-            const styleId = 'content-sdk-style-preview';
-            const styleElement = document.getElementById(styleId);
-            // remove existing style element if it exists to avoid duplicates
-            if (styleElement) {
-                styleElement.remove();
-            }
-            // create new style element and attach it to DOM
-            const style = document.createElement('style');
-            style.setAttribute('id', styleId);
-            style.innerHTML = message.styles.content;
-            document.head.appendChild(style);
-            const exports = { Component: null };
-            const componentFn = new Function('exports', message.styles.styleImport.name, ...importNames, message.code.content);
-            // Function will set exports.Component
-            componentFn(exports, message.styles.styleImport.content, ...importInstances);
-            callback(null, exports.Component);
-        }
-        catch (error) {
-            const errorEvent = getDesignLibraryComponentPreviewErrorEvent(eventArgs.message.uid, error, DesignLibraryPreviewError.RenderInit);
-            console.error('Component Library: sending error event', errorEvent);
-            callback(error, null);
-            window.parent.postMessage(errorEvent, '*');
-        }
-    };
-    window.addEventListener('message', handler);
-    const unsubscribe = () => {
-        window.removeEventListener('message', handler);
-    };
-    return unsubscribe;
-};
-exports.addComponentPreviewHandler = addComponentPreviewHandler;
-/**
- * Generates a DesignLibraryComponentPreviewErrorEvent with the given uid and error.
- * @param {string} uid - The unique identifier for the event.
- * @param {unknown} error - The error to be sent.
- * @param {DesignLibraryPreviewError} type - The type of error.
- * @returns An object representing the DesignLibraryComponentPreviewErrorEvent.
- */
-function getDesignLibraryComponentPreviewErrorEvent(uid, error, type) {
-    return {
-        name: DESIGN_LIBRARY_COMPONENT_PREVIEW_ERROR_EVENT_NAME,
-        message: { uid, error, type },
-    };
-}
-/**
- * Generates a DesignLibraryComponentPropsEvent with the given uid, fields and parameters.
- * @param {string} uid - The unique identifier for the event.
- * @param {ComponentFields} fields - The fields of the component.
- * @param {ComponentParams} parameters - The parameters of the component.
- * @returns An object representing the DesignLibraryComponentPropsEvent.
- */
-function getDesignLibraryComponentPropsEvent(uid, fields, parameters) {
-    return {
-        name: DESIGN_LIBRARY_COMPONENT_PROPS_EVENT_NAME,
-        message: {
-            uid,
-            fields,
-            parameters,
-        },
-    };
-}
-/**
- * Generates a DesignLibraryImportMapEvent with the given uid and importMap.
- * @param {string} uid - The unique identifier for the event.
- * @param {ImportEntry[]} importMap - The imports map to be sent.
- * @returns An object representing the DesignLibraryImportMapEvent.
- */
-function getDesignLibraryImportMapEvent(uid, importMap) {
-    const importMapPayload = importMap.map((entry) => ({
-        module: entry.module,
-        exports: entry.exports.map((exp) => exp.name),
-    }));
-    return {
-        name: DESIGN_LIBRARY_IMPORT_MAP_EVENT_NAME,
-        message: {
-            uid,
-            importMap: importMapPayload,
-        },
-    };
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendErrorEvent = exports.createComponentInstance = exports.addServerComponentPreviewHandler = exports.addComponentPreviewHandler = exports.DesignLibraryPreviewError = void 0;
+exports.buildComponentDependencies = buildComponentDependencies;
+exports.addStyleElement = addStyleElement;
+exports.getDesignLibraryComponentPreviewErrorEvent = getDesignLibraryComponentPreviewErrorEvent;
+exports.getDesignLibraryComponentPropsEvent = getDesignLibraryComponentPropsEvent;
+exports.getDesignLibraryImportMapEvent = getDesignLibraryImportMapEvent;
+exports.getImportMapInfo = getImportMapInfo;
+exports.isImportEntryInfoArray = isImportEntryInfoArray;
+const design_library_1 = require("../design-library");
+/**
+ * Event to send import map to design library
+ */
+const DESIGN_LIBRARY_IMPORT_MAP_EVENT_NAME = 'component:generation:import-map';
+/**
+ * Event to send component props to design library
+ */
+const DESIGN_LIBRARY_COMPONENT_PROPS_EVENT_NAME = 'component:generation:component-props';
+/**
+ * Event to receive component data from design library
+ */
+const DESIGN_LIBRARY_COMPONENT_PREVIEW_EVENT_NAME = 'component:generation:component-preview';
+/**
+ * Event to send component error to design library
+ */
+const DESIGN_LIBRARY_COMPONENT_PREVIEW_ERROR_EVENT_NAME = 'component:generation:component-preview-error';
+/**
+ * Enumeration of error types for the design library preview.
+ * @internal
+ */
+var DesignLibraryPreviewError;
+(function (DesignLibraryPreviewError) {
+    /**
+     * Error occurred during component rendering.
+     */
+    DesignLibraryPreviewError["Render"] = "render";
+    /**
+     * Error occurred during component and event handlers initialization.
+     */
+    DesignLibraryPreviewError["RenderInit"] = "render-init";
+})(DesignLibraryPreviewError || (exports.DesignLibraryPreviewError = DesignLibraryPreviewError = {}));
+/**
+ * Builds the component dependencies from the component imports and the import map.
+ * @param {ComponentImport[]} componentImports - The component imports.
+ * @param {ImportEntry[]} importMap - The import map to be used for the component.
+ * @returns {Array<{ name: string; value: unknown }>} The component dependencies.
+ */
+function buildComponentDependencies(componentImports, importMap) {
+    const successful = [];
+    const missing = {
+        modules: [],
+        exports: [],
+    };
+    componentImports.forEach((componentImport) => {
+        const moduleEntry = importMap.find((entry) => entry.module === componentImport.module);
+        if (!moduleEntry) {
+            missing.modules.push({
+                module: componentImport.module,
+                alias: componentImport.alias,
+            });
+            return;
+        }
+        const exportEntry = moduleEntry.exports.find((exp) => exp.name === componentImport.export);
+        if (!exportEntry) {
+            missing.exports.push({
+                alias: componentImport.alias,
+                export: componentImport.export,
+                module: componentImport.module,
+            });
+            return;
+        }
+        return successful.push({
+            name: componentImport.alias,
+            value: exportEntry.value,
+        });
+    });
+    return {
+        successful,
+        missing,
+    };
+}
+/**
+ * Adds the browser-side event handler for 'component:generation:component-preview' message used in Design Library
+ * The event should contain the component code, styles and imports.
+ * @param {ImportEntry[]} importMap - The import map to be used for the component.
+ * @param {Function} callback callback to be called after component is received
+ * @internal
+ */
+const addComponentPreviewHandler = (importMap, callback) => {
+    if (!window)
+        return;
+    const handler = (e) => {
+        const eventArgs = e.data;
+        try {
+            if (!(0, design_library_1.validateEvent)(e, DESIGN_LIBRARY_COMPONENT_PREVIEW_EVENT_NAME)) {
+                return;
+            }
+            console.debug('Component Library: message received', eventArgs);
+            const Component = (0, exports.createComponentInstance)(importMap, eventArgs);
+            addStyleElement(eventArgs.message.styles.content);
+            callback(null, Component);
+        }
+        catch (error) {
+            (0, exports.sendErrorEvent)(eventArgs.message.uid, error, DesignLibraryPreviewError.RenderInit);
+            callback(error, null);
+        }
+    };
+    window.addEventListener('message', handler);
+    const unsubscribe = () => {
+        window.removeEventListener('message', handler);
+    };
+    return unsubscribe;
+};
+exports.addComponentPreviewHandler = addComponentPreviewHandler;
+/**
+ * Adds the browser-side event handler for 'component:generation:component-preview' message used in Design Library for server components
+ * The event should contain the component code, styles and imports.
+ * @param {Function} callback callback to be called after component is received
+ * @internal
+ */
+const addServerComponentPreviewHandler = (callback) => {
+    const handler = (e) => {
+        if (!(0, design_library_1.validateEvent)(e, DESIGN_LIBRARY_COMPONENT_PREVIEW_EVENT_NAME)) {
+            return;
+        }
+        console.debug('Component Library: message received', e.data);
+        callback(e.data);
+    };
+    window.addEventListener('message', handler);
+    const unsubscribe = () => {
+        window.removeEventListener('message', handler);
+    };
+    return unsubscribe;
+};
+exports.addServerComponentPreviewHandler = addServerComponentPreviewHandler;
+/**
+ * Adds <style> element in the document head with the provided CSS.
+ * If an existing style element with the id "content-sdk-style-preview" is found, it is removed
+ * to prevent duplicates
+ * @param {string} stylesContent - The raw CSS text to inject into the style element.
+ * @internal
+ */
+function addStyleElement(stylesContent) {
+    const styleId = 'content-sdk-style-preview';
+    const styleElement = document.getElementById(styleId);
+    // remove existing style element if it exists to avoid duplicates
+    if (styleElement) {
+        styleElement.remove();
+    }
+    // create new style element and attach it to DOM
+    const style = document.createElement('style');
+    style.setAttribute('id', styleId);
+    style.innerHTML = stylesContent;
+    document.head.appendChild(style);
+}
+/**
+ * Dynamically creates a React component instance from provided importMap and from code, styles, and dependencies provided in the preview event.
+ * @param {ImportEntry[]} importMap - The import map containing module and export references that might be injected as dependencies in the provided code.
+ * @param {ComponentPreviewEventArgs} previewEventArgs - The event arguments containing the component code, styles, and import definitions.
+ * @returns The dynamically created React component instance.
+ * @throws If any required modules or exports are missing from the import map, an error is thrown describing the missing dependencies.
+ * @internal
+ */
+const createComponentInstance = (importMap, previewEventArgs) => {
+    const { message } = previewEventArgs;
+    const dependencies = buildComponentDependencies(message.imports, importMap);
+    if (dependencies.missing.modules.length > 0 || dependencies.missing.exports.length > 0) {
+        let errorMessage = '';
+        dependencies.missing.modules.forEach((mod) => {
+            errorMessage += `Missing module: '${mod.module}' with alias: '${mod.alias}'\n`;
+        });
+        dependencies.missing.exports.forEach((exp) => {
+            const alias = exp.export !== exp.alias ? ` with alias: '${exp.alias}'` : '';
+            errorMessage += `Missing export: '${exp.export}' from module: '${exp.module}'${alias}\n`;
+        });
+        throw errorMessage;
+    }
+    const importNames = dependencies.successful.map((entry) => entry.name);
+    const importInstances = dependencies.successful.map((entry) => entry.value);
+    const exports = { Component: null };
+    const componentFn = new Function('exports', message.styles.styleImport.name, ...importNames, message.code.content);
+    // Function will set exports.Component
+    componentFn(exports, message.styles.styleImport.content, ...importInstances);
+    return exports.Component;
+};
+exports.createComponentInstance = createComponentInstance;
+/**
+ * Generates a DesignLibraryComponentPreviewErrorEvent with the given uid and error.
+ * @param {string} uid - The unique identifier for the event.
+ * @param {unknown} error - The error to be sent.
+ * @param {DesignLibraryPreviewError} type - The type of error.
+ * @returns An object representing the DesignLibraryComponentPreviewErrorEvent.
+ * @internal
+ */
+function getDesignLibraryComponentPreviewErrorEvent(uid, error, type) {
+    return {
+        name: DESIGN_LIBRARY_COMPONENT_PREVIEW_ERROR_EVENT_NAME,
+        message: { uid, error, type },
+    };
+}
+/**
+ * Generates a DesignLibraryComponentPropsEvent with the given uid, fields and parameters.
+ * @param {string} uid - The unique identifier for the event.
+ * @param {ComponentFields} fields - The fields of the component.
+ * @param {ComponentParams} parameters - The parameters of the component.
+ * @returns An object representing the DesignLibraryComponentPropsEvent.
+ * @internal
+ */
+function getDesignLibraryComponentPropsEvent(uid, fields = {}, parameters = {}) {
+    return {
+        name: DESIGN_LIBRARY_COMPONENT_PROPS_EVENT_NAME,
+        message: {
+            uid,
+            fields,
+            parameters,
+        },
+    };
+}
+/**
+ * Generates a DesignLibraryImportMapEvent with the given uid and importMap.
+ * @param {string} uid - The unique identifier for the event.
+ * @param {ImportEntry[]} importMap - The imports map to be sent.
+ * @returns An object representing the DesignLibraryImportMapEvent.
+ * @internal
+ */
+function getDesignLibraryImportMapEvent(uid, importMap) {
+    const importMapPayload = isImportEntryInfoArray(importMap)
+        ? importMap
+        : getImportMapInfo(importMap);
+    return {
+        name: DESIGN_LIBRARY_IMPORT_MAP_EVENT_NAME,
+        message: {
+            uid,
+            importMap: importMapPayload,
+        },
+    };
+}
+/**
+ * Generates the payload for the import map to be sent to design library.
+ * @param {ImportEntry[]} importMap - The imports map to be sent.
+ * @internal
+ */
+function getImportMapInfo(importMap) {
+    return importMap.map((entry) => ({
+        module: entry.module,
+        exports: entry.exports.map((exp) => exp.name),
+    }));
+}
+/**
+ * Type guard for ImportEntryInfo[]
+ * @param {unknown} data import entry data to check
+ * @returns true if the data is ImportEntryInfo array
+ */
+function isImportEntryInfoArray(data) {
+    return (Array.isArray(data) &&
+        data.length > 0 &&
+        typeof data[0].module === 'string' &&
+        Array.isArray(data[0].exports) &&
+        typeof data[0].exports[0] === 'string');
+}
+/**
+ * Sends a component preview error event to the design library
+ * @param {string} uid - The unique identifier of the component that's being edited.
+ * @param {unknown} error - The error object or message to be sent.
+ * @param {DesignLibraryPreviewError} type - The type of error, as defined in DesignLibraryPreviewError.
+ * @internal
+ */
+const sendErrorEvent = (uid, error, type) => {
+    const errorEvent = 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, '*');
+    }
+};
+exports.sendErrorEvent = sendErrorEvent;

package/dist/cjs/editing/component-layout-service.js

@@ -1,62 +1,63 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ComponentLayoutService = void 0;
-const native_fetcher_1 = require("../native-fetcher");
-const debug_1 = __importDefault(require("../debug"));
-const constants_1 = require("../constants");
-const utils_1 = require("../utils");
-const models_1 = require("./models");
-/**
- * REST service that enables Design Library functionality.
- * Returns layout data for a single rendered component.
- */
-class ComponentLayoutService {
-    constructor(config) {
-        this.config = config;
-    }
-    fetchComponentData(params, fetchOptions) {
-        const fetcher = new native_fetcher_1.NativeDataFetcher({ debugger: debug_1.default.layout });
-        debug_1.default.layout('fetching component with uid %s for %s %s %s %s', params.componentUid, params.itemId, params.language, params.siteName, params.dataSourceId);
-        return fetcher
-            .get(this.getFetchUrl(params), Object.assign(Object.assign({}, fetchOptions), { headers: Object.assign(Object.assign({}, fetchOptions === null || fetchOptions === void 0 ? void 0 : fetchOptions.headers), { sc_editMode: `${params.mode === models_1.DesignLibraryMode.Metadata}` }) }))
-            .then((response) => response.data)
-            .catch((error) => {
-            var _a;
-            if (((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 404) {
-                return error.response.data;
-            }
-            throw error;
-        });
-    }
-    getComponentFetchParams(params) {
-        // Choose the correct Edge ID per environment
-        const sitecoreContextId = this.config.contextId || this.config.clientContextId;
-        if (!sitecoreContextId) {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentLayoutService = void 0;
+const native_fetcher_1 = require("../native-fetcher");
+const debug_1 = __importDefault(require("../debug"));
+const constants_1 = require("../constants");
+const utils_1 = require("../utils");
+const models_1 = require("./models");
+/**
+ * REST service that enables Design Library functionality.
+ * Returns layout data for a single rendered component.
+ * @public
+ */
+class ComponentLayoutService {
+    constructor(config) {
+        this.config = config;
+    }
+    fetchComponentData(params, fetchOptions) {
+        const fetcher = new native_fetcher_1.NativeDataFetcher({ debugger: debug_1.default.layout });
+        debug_1.default.layout('fetching component with uid %s for %s %s %s %s', params.componentUid, params.itemId, params.language, params.siteName, params.dataSourceId);
+        return fetcher
+            .get(this.getFetchUrl(params), Object.assign(Object.assign({}, fetchOptions), { headers: Object.assign(Object.assign({}, fetchOptions === null || fetchOptions === void 0 ? void 0 : fetchOptions.headers), { sc_editMode: `${params.mode === models_1.DesignLibraryMode.Metadata}` }) }))
+            .then((response) => response.data)
+            .catch((error) => {
+            var _a;
+            if (((_a = error.response) === null || _a === void 0 ? void 0 : _a.status) === 404) {
+                return error.response.data;
+            }
+            throw error;
+        });
+    }
+    getComponentFetchParams(params) {
+        // Choose the correct Edge ID per environment
+        const sitecoreContextId = this.config.contextId || this.config.clientContextId;
+        if (!sitecoreContextId) {
             throw new Error(`ComponentLayoutService misconfigured: contextId is missing.
-         Provide contextId on the server, and clientContextId in the browser if you need to full client-side functionality.`);
-        }
-        // strip undefined fields
-        return JSON.parse(JSON.stringify({
-            sitecoreContextId,
-            item: params.itemId,
-            uid: params.componentUid,
-            dataSourceId: params.dataSourceId,
-            renderingItemId: params.renderingId,
-            version: params.version,
-            sc_site: params.siteName,
-            sc_lang: params.language || 'en',
-        }));
-    }
-    /**
-     * Get the fetch URL for the partial layout data endpoint
-     * @param {ComponentLayoutRequestParams} params - The parameters for the request
-     * @returns {string} The fetch URL for the component data
-     */
-    getFetchUrl(params) {
-        return (0, utils_1.resolveUrl)(`${this.config.edgeUrl || constants_1.SITECORE_EDGE_URL_DEFAULT}/layout/component`, this.getComponentFetchParams(params));
-    }
-}
-exports.ComponentLayoutService = ComponentLayoutService;
+         Provide contextId on the server, and clientContextId in the browser if you need to full client-side functionality.`);
+        }
+        // strip undefined fields
+        return JSON.parse(JSON.stringify({
+            sitecoreContextId,
+            item: params.itemId,
+            uid: params.componentUid,
+            dataSourceId: params.dataSourceId,
+            renderingItemId: params.renderingId,
+            version: params.version,
+            sc_site: params.siteName,
+            sc_lang: params.language || 'en',
+        }));
+    }
+    /**
+     * Get the fetch URL for the partial layout data endpoint
+     * @param {ComponentLayoutRequestParams} params - The parameters for the request
+     * @returns {string} The fetch URL for the component data
+     */
+    getFetchUrl(params) {
+        return (0, utils_1.resolveUrl)(`${this.config.edgeUrl || constants_1.SITECORE_EDGE_URL_DEFAULT}/layout/component`, this.getComponentFetchParams(params));
+    }
+}
+exports.ComponentLayoutService = ComponentLayoutService;