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

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

@@ -1,55 +1,56 @@
-import { NativeDataFetcher } from '../native-fetcher';
-import debug from '../debug';
-import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
-import { resolveUrl } from '../utils';
-import { DesignLibraryMode } from './models';
-/**
- * REST service that enables Design Library functionality.
- * Returns layout data for a single rendered component.
- */
-export class ComponentLayoutService {
-    constructor(config) {
-        this.config = config;
-    }
-    fetchComponentData(params, fetchOptions) {
-        const fetcher = new NativeDataFetcher({ debugger: debug.layout });
-        debug.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 === 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) {
+import { NativeDataFetcher } from '../native-fetcher';
+import debug from '../debug';
+import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
+import { resolveUrl } from '../utils';
+import { DesignLibraryMode } from './models';
+/**
+ * REST service that enables Design Library functionality.
+ * Returns layout data for a single rendered component.
+ * @public
+ */
+export class ComponentLayoutService {
+    constructor(config) {
+        this.config = config;
+    }
+    fetchComponentData(params, fetchOptions) {
+        const fetcher = new NativeDataFetcher({ debugger: debug.layout });
+        debug.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 === 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 resolveUrl(`${this.config.edgeUrl || SITECORE_EDGE_URL_DEFAULT}/layout/component`, this.getComponentFetchParams(params));
-    }
-}
+         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 resolveUrl(`${this.config.edgeUrl || SITECORE_EDGE_URL_DEFAULT}/layout/component`, this.getComponentFetchParams(params));
+    }
+}

package/dist/esm/editing/design-library.js

@@ -1,117 +1,171 @@
-import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
-import { normalizeUrl } from '../utils/normalize-url';
-import { DesignLibraryMode } from './models';
-/**
- * Event to be sent when report status to design library
- */
-const DESIGN_LIBRARY_STATUS_EVENT_NAME = 'component:status';
-/**
- * Enumeration of statuses for the design library.
- */
-export var DesignLibraryStatus;
-(function (DesignLibraryStatus) {
-    DesignLibraryStatus["READY"] = "ready";
-    DesignLibraryStatus["RENDERED"] = "rendered";
-})(DesignLibraryStatus || (DesignLibraryStatus = {}));
-/**
- * Adds the browser-side event handler for 'component:update' message used in Design Library
- * The event should update a component on page by uid, with fields and params from event args
- * @param {ComponentRendering} rootComponent root component displayed for Design Library page
- * @param {Function} successCallback  callback to be called after successful component update
- */
-export const addComponentUpdateHandler = (rootComponent, successCallback) => {
-    if (!window)
-        return;
-    const handler = (e) => updateComponentHandler(e, rootComponent, successCallback);
-    window.addEventListener('message', handler);
-    // the power to remove handler outside of this function, if needed
-    const unsubscribe = () => {
-        window.removeEventListener('message', handler);
-    };
-    return unsubscribe;
-};
-export const validateOrigin = (event) => {
-    // TODO: use `EDITING_ALLOWED_ORIGINS.concat(getAllowedOriginsFromEnv())` later
-    // nextjs's JSS_ALLOWED_ORIGINS is not available on the client, need to use NEXT_PUBLIC_ variable, but it's a breaking change for Deploy
-    const allowedOrigins = ['*'];
-    return allowedOrigins.some((origin) => origin === event.origin ||
-        new RegExp('^' + origin.replace('.', '\\.').replace(/\*/g, '.*') + '$').test(event.origin));
-};
-export const updateComponentHandler = (e, rootComponent, successCallback) => {
-    var _a;
-    const eventArgs = e.data;
-    if (!e.origin || !eventArgs || eventArgs.name !== 'component:update') {
-        // avoid extra noise in logs
-        if (!validateOrigin(e)) {
-            console.debug('Component Library: event skipped: message %s from origin %s', eventArgs.name, e.origin);
-        }
-        return;
-    }
-    if (!((_a = eventArgs.details) === null || _a === void 0 ? void 0 : _a.uid)) {
-        console.debug('Received component:update event without uid, aborting event handler...');
-        return;
-    }
-    const findComponent = (root) => {
-        var _a, _b;
-        if (((_a = root.uid) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = eventArgs.details) === null || _b === void 0 ? void 0 : _b.uid.toLowerCase()))
-            return root;
-        if (root.placeholders) {
-            for (const plhName of Object.keys(root.placeholders)) {
-                for (const rendering of root.placeholders[plhName]) {
-                    const result = findComponent(rendering);
-                    if (result)
-                        return result;
-                }
-            }
-        }
-        return null;
-    };
-    const updateComponent = findComponent(rootComponent);
-    if (updateComponent) {
-        console.debug('Found component with uid %s to update. Update fields: %o. Update params: %o.', eventArgs.details.uid, eventArgs.details.fields, eventArgs.details.params);
-        if (eventArgs.details.fields) {
-            updateComponent.fields = Object.assign(Object.assign({}, updateComponent.fields), eventArgs.details.fields);
-        }
-        if (eventArgs.details.params) {
-            updateComponent.params = Object.assign(Object.assign({}, updateComponent.params), eventArgs.details.params);
-        }
-        if (successCallback)
-            successCallback(rootComponent);
-    }
-    else {
-        console.debug('Rendering with uid %s not found', eventArgs.details.uid);
-    }
-    // strictly for testing
-    return rootComponent;
-};
-/**
- * Generates a DesignLibraryStatusEvent with the given status and uid.
- * @param {DesignLibraryStatus} status - The status of rendering.
- * @param {string} uid - The unique identifier for the event.
- * @returns An object representing the DesignLibraryStatusEvent.
- */
-export function getDesignLibraryStatusEvent(status, uid) {
-    return {
-        name: DESIGN_LIBRARY_STATUS_EVENT_NAME,
-        message: {
-            status,
-            uid,
-        },
-    };
-}
-/**
- * Generates the URL for the design library script link.
- * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
- * @returns The full URL to the design library script.
- */
-export function getDesignLibraryScriptLink(sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT) {
-    return `${normalizeUrl(sitecoreEdgeUrl)}/v1/files/designlibrary/lib/rh-lib-script.js`;
-}
-/**
- * Checks if the given mode is a Design Library mode.
- * @param {unknown} mode - The mode to check.
- * @returns {boolean} True if the mode is a Design Library mode, false otherwise.
- */
-export function isDesignLibraryMode(mode) {
-    return mode === DesignLibraryMode.Normal || mode === DesignLibraryMode.Metadata;
-}
+import { SITECORE_EDGE_URL_DEFAULT } from '../constants';
+import { normalizeUrl } from '../utils/normalize-url';
+import { DesignLibraryMode } from './models';
+/**
+ * Event to be sent when report status to design library
+ */
+const DESIGN_LIBRARY_STATUS_EVENT_NAME = 'component:status';
+/**
+ * Prefix for component update cache keys
+ * @internal
+ */
+export const COMPONENT_UPDATE_CACHE_KEY_PREFIX = 'component-update-';
+/**
+ * Enumeration of statuses for the design library.
+ * @internal
+ */
+export var DesignLibraryStatus;
+(function (DesignLibraryStatus) {
+    DesignLibraryStatus["READY"] = "ready";
+    DesignLibraryStatus["RENDERED"] = "rendered";
+})(DesignLibraryStatus || (DesignLibraryStatus = {}));
+/**
+ * Adds the browser-side event handler for 'component:update' message used in Design Library
+ * The event should update a component on page by uid, with fields and params from event args
+ * @param {ComponentRendering} rootComponent root component displayed for Design Library page
+ * @param {Function} successCallback  callback to be called after successful component update
+ * @internal
+ */
+export const addComponentUpdateHandler = (rootComponent, successCallback) => {
+    if (!window)
+        return;
+    const handler = (e) => updateComponentHandler(e, rootComponent, successCallback);
+    window.addEventListener('message', handler);
+    // the power to remove handler outside of this function, if needed
+    const unsubscribe = () => {
+        window.removeEventListener('message', handler);
+    };
+    return unsubscribe;
+};
+export const validateOrigin = (event) => {
+    // TODO: use `EDITING_ALLOWED_ORIGINS.concat(getAllowedOriginsFromEnv())` later
+    // nextjs's JSS_ALLOWED_ORIGINS is not available on the client, need to use NEXT_PUBLIC_ variable, but it's a breaking change for Deploy
+    const allowedOrigins = ['*'];
+    return allowedOrigins.some((origin) => origin === event.origin ||
+        new RegExp('^' + origin.replace('.', '\\.').replace(/\*/g, '.*') + '$').test(event.origin));
+};
+/**
+ * Validates that a MessageEvent has the expected event name and required data.
+ * Logs debug information when validation fails due to invalid origin.
+ * @param {MessageEvent} e - The message event to validate.
+ * @param {string} eventName - The expected event name to match against e.data.name.
+ * @returns {boolean} True if the event has a valid origin, data object, and matching event name; otherwise false.
+ */
+export const validateEvent = (e, eventName) => {
+    if (!e.origin || !e.data || e.data.name !== eventName) {
+        // avoid extra noise in logs
+        if (!validateOrigin(e)) {
+            console.debug('Component Library: event skipped - invalid origin: message %s from origin %s', e.data.name, e.origin);
+        }
+        return false;
+    }
+    return true;
+};
+export const updateComponentHandler = (e, rootComponent, successCallback) => {
+    var _a;
+    const eventArgs = e.data;
+    if (!e.origin || !eventArgs || eventArgs.name !== 'component:update') {
+        // avoid extra noise in logs
+        if (!validateOrigin(e)) {
+            console.debug('Component Library: event skipped: message %s from origin %s', eventArgs.name, e.origin);
+        }
+        return;
+    }
+    if (!((_a = eventArgs.details) === null || _a === void 0 ? void 0 : _a.uid)) {
+        console.debug('Received component:update event without uid, aborting event handler...');
+        return;
+    }
+    const findComponent = (root) => {
+        var _a, _b;
+        if (((_a = root.uid) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = eventArgs.details) === null || _b === void 0 ? void 0 : _b.uid.toLowerCase()))
+            return root;
+        if (root.placeholders) {
+            for (const plhName of Object.keys(root.placeholders)) {
+                for (const rendering of root.placeholders[plhName]) {
+                    const result = findComponent(rendering);
+                    if (result)
+                        return result;
+                }
+            }
+        }
+        return null;
+    };
+    const componentToUpdate = findComponent(rootComponent);
+    if (componentToUpdate) {
+        console.debug('Found component with uid %s to update. Update fields: %o. Update params: %o.', eventArgs.details.uid, eventArgs.details.fields, eventArgs.details.params);
+        updateComponent(componentToUpdate, eventArgs.details.fields, eventArgs.details.params);
+        if (successCallback)
+            successCallback(rootComponent);
+    }
+    else {
+        console.debug('Rendering with uid %s not found', eventArgs.details.uid);
+    }
+    // strictly for testing
+    return rootComponent;
+};
+/**
+ * Updates a component's fields and params with the provided values.
+ * @param {ComponentRendering<ComponentFields>} component - The component to update.
+ * @param {ComponentFields | undefined} fields - The fields to merge into the component.
+ * @param {ComponentParams | undefined} params - The params to merge into the component.
+ * @internal
+ */
+export const updateComponent = (component, fields, params) => {
+    if (fields) {
+        component.fields = Object.assign(Object.assign({}, component.fields), fields);
+    }
+    if (params) {
+        component.params = Object.assign(Object.assign({}, component.params), params);
+    }
+};
+/**
+ * Generates a DesignLibraryStatusEvent with the given status and uid.
+ * @param {DesignLibraryStatus} status - The status of rendering.
+ * @param {string} uid - The unique identifier for the event.
+ * @returns An object representing the DesignLibraryStatusEvent.
+ * @internal
+ */
+export function getDesignLibraryStatusEvent(status, uid) {
+    return {
+        name: DESIGN_LIBRARY_STATUS_EVENT_NAME,
+        message: {
+            status,
+            uid,
+        },
+    };
+}
+/**
+ * Generates the URL for the design library script link.
+ * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
+ * @returns The full URL to the design library script.
+ * @internal
+ */
+export function getDesignLibraryScriptLink(sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT) {
+    return `${normalizeUrl(sitecoreEdgeUrl)}/v1/files/designlibrary/lib/rh-lib-script.js`;
+}
+/**
+ * Checks if the given mode is a Design Library mode.
+ * @param {unknown} mode - The mode to check.
+ * @returns {boolean} True if the mode is a Design Library mode, false otherwise.
+ * @internal
+ */
+export function isDesignLibraryMode(mode) {
+    return mode === DesignLibraryMode.Normal || mode === DesignLibraryMode.Metadata;
+}
+/**
+ * Sends an event to the Design Library
+ * @param {DesignLibraryEvent} evt - The event object to send.
+ * @internal
+ */
+export const postToDesignLibrary = (evt) => {
+    if (typeof window === 'undefined')
+        return;
+    const target = window.parent && window.parent !== window ? window.parent : window;
+    try {
+        console.log('Component Library: sending event', evt.name, evt);
+        target.postMessage(evt, '*');
+    }
+    catch (err) {
+        console.error('Component Library: postMessage failed', err, evt);
+    }
+};

package/dist/esm/editing/editing-service.js

@@ -1,73 +1,74 @@
-import debug from '../debug';
-import { LayoutKind } from './models';
-/**
- * GraphQL query for fetching editing data.
- */
+import debug from '../debug';
+import { LayoutKind } from './models';
+/**
+ * GraphQL query for fetching editing data.
+ */
 export const query = /* GraphQL */ `
   query EditingQuery($itemId: String!, $language: String!, $version: String) {
     item(path: $itemId, language: $language, version: $version) {
       rendered
     }
   }
-`;
-/**
- * Service for fetching editing data from Sitecore using the Sitecore's GraphQL API.
- * Expected to be used in XMCloud Pages preview (editing) Metadata Edit Mode.
- */
-export class EditingService {
-    /**
-     * Fetch layout data using the Sitecore GraphQL endpoint.
-     * @param {EditingServiceConfig} serviceConfig configuration
-     */
-    constructor(serviceConfig) {
-        this.serviceConfig = serviceConfig;
-        this.graphQLClient = this.getGraphQLClient();
-    }
-    /**
-     * Fetches editing data. Provides the layout data and dictionary phrases
-     * @param {object} variables - The parameters for fetching editing data.
-     * @param {string} variables.itemId - The item id (path) to fetch layout data for.
-     * @param {string} variables.language - The language to fetch layout data for.
-     * @param {string} variables.mode - The editing mode to fetch layout data for.
-     * @param {string} [variables.version] - The version of the item (optional).
-     * @param {LayoutKind} [variables.layoutKind] - The final or shared layout variant.
-     * @param {FetchOptions} [fetchOptions] Options to override graphQL client details like retries and fetch implementation
-     * @returns {Promise} The layout data and dictionary phrases.
-     */
-    async fetchEditingData({ itemId, language, version, layoutKind = LayoutKind.Final, mode }, fetchOptions) {
-        var _a;
-        debug.editing('fetching editing data for %s %s %s %s', itemId, language, version, layoutKind);
-        if (!language) {
-            throw new RangeError('The language must be a non-empty string');
-        }
-        const editModeHeader = mode === 'edit' ? 'true' : 'false';
-        const editingData = await this.graphQLClient.request(query, {
-            itemId,
-            version,
-            language,
-        }, Object.assign(Object.assign({}, fetchOptions), { headers: {
-                sc_layoutKind: layoutKind,
-                sc_editMode: editModeHeader,
-            } }));
-        return {
-            layoutData: ((_a = editingData === null || editingData === void 0 ? void 0 : editingData.item) === null || _a === void 0 ? void 0 : _a.rendered) || {
-                sitecore: {
-                    context: { pageEditing: true, language },
-                    route: null,
-                },
-            },
-        };
-    }
-    /**
-     * Gets a GraphQL client that can make requests to the API.
-     * @returns {GraphQLClient} implementation
-     */
-    getGraphQLClient() {
-        if (!this.serviceConfig.clientFactory) {
-            throw new Error('clientFactory needs to be provided when initializing GraphQL client.');
-        }
-        return this.serviceConfig.clientFactory({
-            debugger: debug.editing,
-        });
-    }
-}
+`;
+/**
+ * Service for fetching editing data from Sitecore using the Sitecore's GraphQL API.
+ * Expected to be used in XMCloud Pages preview (editing) Metadata Edit Mode.
+ * @public
+ */
+export class EditingService {
+    /**
+     * Fetch layout data using the Sitecore GraphQL endpoint.
+     * @param {EditingServiceConfig} serviceConfig configuration
+     */
+    constructor(serviceConfig) {
+        this.serviceConfig = serviceConfig;
+        this.graphQLClient = this.getGraphQLClient();
+    }
+    /**
+     * Fetches editing data. Provides the layout data and dictionary phrases
+     * @param {object} variables - The parameters for fetching editing data.
+     * @param {string} variables.itemId - The item id (path) to fetch layout data for.
+     * @param {string} variables.language - The language to fetch layout data for.
+     * @param {string} variables.mode - The editing mode to fetch layout data for.
+     * @param {string} [variables.version] - The version of the item (optional).
+     * @param {LayoutKind} [variables.layoutKind] - The final or shared layout variant.
+     * @param {FetchOptions} [fetchOptions] Options to override graphQL client details like retries and fetch implementation
+     * @returns {Promise} The layout data and dictionary phrases.
+     */
+    async fetchEditingData({ itemId, language, version, layoutKind = LayoutKind.Final, mode }, fetchOptions) {
+        var _a;
+        debug.editing('fetching editing data for %s %s %s %s', itemId, language, version, layoutKind);
+        if (!language) {
+            throw new RangeError('The language must be a non-empty string');
+        }
+        const editModeHeader = mode === 'edit' ? 'true' : 'false';
+        const editingData = await this.graphQLClient.request(query, {
+            itemId,
+            version,
+            language,
+        }, Object.assign(Object.assign({}, fetchOptions), { headers: {
+                sc_layoutKind: layoutKind,
+                sc_editMode: editModeHeader,
+            } }));
+        return {
+            layoutData: ((_a = editingData === null || editingData === void 0 ? void 0 : editingData.item) === null || _a === void 0 ? void 0 : _a.rendered) || {
+                sitecore: {
+                    context: { pageEditing: true, language },
+                    route: null,
+                },
+            },
+        };
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.serviceConfig.clientFactory) {
+            throw new Error('clientFactory needs to be provided when initializing GraphQL client.');
+        }
+        return this.serviceConfig.clientFactory({
+            debugger: debug.editing,
+        });
+    }
+}

package/dist/esm/editing/index.js

@@ -1,5 +1,6 @@
-export { EditingService } from './editing-service';
-export { DEFAULT_PLACEHOLDER_UID, PagesEditor, isEditorActive, resetEditorChromes, getContentSdkPagesClientData, EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET, PAGES_EDITING_MARKER, PREVIEW_KEY, } from './utils';
-export { ComponentLayoutService } from './component-layout-service';
-export { LayoutKind, MetadataKind, DesignLibraryMode, } from './models';
-export { addComponentUpdateHandler, DesignLibraryStatus, getDesignLibraryStatusEvent, getDesignLibraryScriptLink, isDesignLibraryMode, } from './design-library';
+export { EditingService } from './editing-service';
+export { DEFAULT_PLACEHOLDER_UID, PagesEditor, isEditorActive, resetEditorChromes, getContentSdkPagesClientData, EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET, INVALID_SECRET_HTML_MESSAGE, PAGES_EDITING_MARKER, PREVIEW_KEY, } from './utils';
+export { ComponentLayoutService, } from './component-layout-service';
+export { DesignLibraryVariantGeneration, } from './models';
+export { LayoutKind, MetadataKind, DesignLibraryMode, } from './models';
+export { addComponentUpdateHandler, DesignLibraryStatus, getDesignLibraryStatusEvent, getDesignLibraryScriptLink, isDesignLibraryMode, postToDesignLibrary, COMPONENT_UPDATE_CACHE_KEY_PREFIX, updateComponent, } from './design-library';