@sitecore-jss/sitecore-jss
Version:
This module is provided as a part of Sitecore JavaScript Rendering SDK. It contains the core JSS APIs (layout service) and utilities.
125 lines (124 loc) • 5.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.updateComponentHandler = exports.addComponentUpdateHandler = exports.DesignLibraryStatus = exports.DESIGN_LIBRARY_STATUS_EVENT_NAME = void 0;
exports.getDesignLibraryStatusEvent = getDesignLibraryStatusEvent;
exports.getDesignLibraryScriptLink = getDesignLibraryScriptLink;
exports.isDesignLibraryMode = isDesignLibraryMode;
const constants_1 = require("../constants");
const models_1 = require("./models");
/**
* Event to be sent when report status to design library
*/
exports.DESIGN_LIBRARY_STATUS_EVENT_NAME = 'component:status';
/**
* Enumeration of statuses for the Design Library.
*/
var DesignLibraryStatus;
(function (DesignLibraryStatus) {
DesignLibraryStatus["READY"] = "ready";
DesignLibraryStatus["RENDERED"] = "rendered";
})(DesignLibraryStatus || (exports.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
*/
const addComponentUpdateHandler = (rootComponent, successCallback) => {
if (!window)
return;
const handler = (e) => (0, exports.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;
};
exports.addComponentUpdateHandler = addComponentUpdateHandler;
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));
};
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('Design 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;
};
exports.updateComponentHandler = updateComponentHandler;
/**
* 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.
*/
function getDesignLibraryStatusEvent(status, uid) {
return {
name: exports.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.
*/
function getDesignLibraryScriptLink(sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) {
return `${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.
*/
function isDesignLibraryMode(mode) {
return mode === models_1.DesignLibraryMode.Normal || mode === models_1.DesignLibraryMode.Metadata;
}