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

package/dist/esm/debug.js

@@ -1,39 +1,41 @@
-var _a;
-/* eslint-disable import/no-anonymous-default-export */
-import debug from 'debug';
-import isServer from './utils/is-server';
-const rootNamespace = 'content-sdk';
-// On server/node side, allow switching from the built-in
-// `%o` (pretty-print single line) and `%O` (pretty-print multiple line)
-// with a `DEBUG_MULTILINE` environment variable.
-if (isServer() &&
-    ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.DEBUG_MULTILINE) === 'true' &&
-    debug.formatters.o &&
-    debug.formatters.O) {
-    debug.formatters.o = debug.formatters.O;
-}
-/**
- * Enable debug logging dynamically
- * @param {string} namespaces space-separated list of namespaces to enable
- */
-export const enableDebug = (namespaces) => debug.enable(namespaces);
-/**
- * Default Sitecore Content SDK 'debug' module debuggers. Uses namespace prefix 'content-sdk:'.
- * See {@link https://www.npmjs.com/package/debug} for details.
- */
-export default {
-    common: debug(`${rootNamespace}:common`),
-    form: debug(`${rootNamespace}:form`),
-    http: debug(`${rootNamespace}:http`),
-    layout: debug(`${rootNamespace}:layout`),
-    dictionary: debug(`${rootNamespace}:dictionary`),
-    editing: debug(`${rootNamespace}:editing`),
-    sitemap: debug(`${rootNamespace}:sitemap`),
-    multisite: debug(`${rootNamespace}:multisite`),
-    robots: debug(`${rootNamespace}:robots`),
-    redirects: debug(`${rootNamespace}:redirects`),
-    personalize: debug(`${rootNamespace}:personalize`),
-    locale: debug(`${rootNamespace}:locale`),
-    errorpages: debug(`${rootNamespace}:errorpages`),
-    proxy: debug(`${rootNamespace}:proxy`),
-};
+var _a;
+/* eslint-disable import/no-anonymous-default-export */
+import debug from 'debug';
+import isServer from './utils/is-server';
+const rootNamespace = 'content-sdk';
+// On server/node side, allow switching from the built-in
+// `%o` (pretty-print single line) and `%O` (pretty-print multiple line)
+// with a `DEBUG_MULTILINE` environment variable.
+if (isServer() &&
+    ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.DEBUG_MULTILINE) === 'true' &&
+    debug.formatters.o &&
+    debug.formatters.O) {
+    debug.formatters.o = debug.formatters.O;
+}
+/**
+ * Enable debug logging dynamically
+ * @param {string} namespaces space-separated list of namespaces to enable
+ * @public
+ */
+export const enableDebug = (namespaces) => debug.enable(namespaces);
+/**
+ * Default Sitecore Content SDK 'debug' module debuggers. Uses namespace prefix 'content-sdk:'.
+ * See {@link https://www.npmjs.com/package/debug} for details.
+ */
+export default {
+    search: debug(`${rootNamespace}:search`),
+    common: debug(`${rootNamespace}:common`),
+    form: debug(`${rootNamespace}:form`),
+    http: debug(`${rootNamespace}:http`),
+    layout: debug(`${rootNamespace}:layout`),
+    dictionary: debug(`${rootNamespace}:dictionary`),
+    editing: debug(`${rootNamespace}:editing`),
+    sitemap: debug(`${rootNamespace}:sitemap`),
+    multisite: debug(`${rootNamespace}:multisite`),
+    robots: debug(`${rootNamespace}:robots`),
+    redirects: debug(`${rootNamespace}:redirects`),
+    personalize: debug(`${rootNamespace}:personalize`),
+    locale: debug(`${rootNamespace}:locale`),
+    errorpages: debug(`${rootNamespace}:errorpages`),
+    proxy: debug(`${rootNamespace}:proxy`),
+};

package/dist/esm/editing/codegen/index.js

@@ -1 +1 @@
-export { addComponentPreviewHandler, getDesignLibraryComponentPreviewErrorEvent, getDesignLibraryComponentPropsEvent, getDesignLibraryImportMapEvent, DesignLibraryPreviewError, } from './preview';
+export { addComponentPreviewHandler, addServerComponentPreviewHandler, getDesignLibraryComponentPreviewErrorEvent, getDesignLibraryComponentPropsEvent, getDesignLibraryImportMapEvent, getImportMapInfo, addStyleElement, createComponentInstance, sendErrorEvent, DesignLibraryPreviewError, } from './preview';

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

@@ -1,185 +1,263 @@
-import { validateOrigin } from '../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.
- */
-export 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 || (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.
- */
-export 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
- */
-export 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 (!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;
-};
-/**
- * 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.
- */
-export 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.
- */
-export 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.
- */
-export 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,
-        },
-    };
-}
+import { validateEvent } from '../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
+ */
+export 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 || (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.
+ */
+export 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
+ */
+export const addComponentPreviewHandler = (importMap, callback) => {
+    if (!window)
+        return;
+    const handler = (e) => {
+        const eventArgs = e.data;
+        try {
+            if (!validateEvent(e, DESIGN_LIBRARY_COMPONENT_PREVIEW_EVENT_NAME)) {
+                return;
+            }
+            console.debug('Component Library: message received', eventArgs);
+            const Component = createComponentInstance(importMap, eventArgs);
+            addStyleElement(eventArgs.message.styles.content);
+            callback(null, Component);
+        }
+        catch (error) {
+            sendErrorEvent(eventArgs.message.uid, error, DesignLibraryPreviewError.RenderInit);
+            callback(error, null);
+        }
+    };
+    window.addEventListener('message', handler);
+    const unsubscribe = () => {
+        window.removeEventListener('message', handler);
+    };
+    return unsubscribe;
+};
+/**
+ * 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
+ */
+export const addServerComponentPreviewHandler = (callback) => {
+    const handler = (e) => {
+        if (!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;
+};
+/**
+ * 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
+ */
+export 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
+ */
+export 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;
+};
+/**
+ * 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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
+ */
+export 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, '*');
+    }
+};