@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.
80 lines (79 loc) • 3.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getStylesheetUrl = void 0;
exports.getDesignLibraryStylesheetLinks = getDesignLibraryStylesheetLinks;
const _1 = require(".");
const constants_1 = require("../constants");
/**
* Pattern for library ids
* @example -library--foo
*/
const STYLES_LIBRARY_ID_REGEX = /-library--([^\s]+)/;
/**
* Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Design Library Stylesheets that are used
* @param {LayoutServiceData} layoutData Layout service data
* @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
* @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
* @returns {HTMLLink[]} library stylesheet links
*/
function getDesignLibraryStylesheetLinks(layoutData, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) {
const ids = new Set();
if (!layoutData.sitecore.route)
return [];
traverseComponent(layoutData.sitecore.route, ids);
return [...ids].map((id) => ({
href: (0, exports.getStylesheetUrl)(id, sitecoreEdgeContextId, sitecoreEdgeUrl),
rel: 'stylesheet',
}));
}
const getStylesheetUrl = (id, sitecoreEdgeContextId, sitecoreEdgeUrl = constants_1.SITECORE_EDGE_URL_DEFAULT) => {
return `${sitecoreEdgeUrl}/v1/files/components/styles/${id}.css?sitecoreContextId=${sitecoreEdgeContextId}`;
};
exports.getStylesheetUrl = getStylesheetUrl;
/**
* Traverse placeholder and components to add library ids
* @param {Array<ComponentRendering | HtmlElementRendering>} components
* @param {Set<string>} ids library ids
*/
const traversePlaceholder = (components, ids) => {
components.map((component) => {
const rendering = component;
return traverseComponent(rendering, ids);
});
};
/**
* Traverse component and children to add library ids
* @param {RouteData | ComponentRendering | HtmlElementRendering} component component data
* @param {Set<string>} ids library ids
*/
const traverseComponent = (component, ids) => {
var _a, _b, _c, _d, _e, _f, _g;
let libraryId = undefined;
if ('params' in component && component.params) {
// LibraryID in css class name takes precedence over LibraryId attribute
libraryId =
((_b = (_a = component.params.CSSStyles) === null || _a === void 0 ? void 0 : _a.match(STYLES_LIBRARY_ID_REGEX)) === null || _b === void 0 ? void 0 : _b[1]) ||
((_d = (_c = component.params.Styles) === null || _c === void 0 ? void 0 : _c.match(STYLES_LIBRARY_ID_REGEX)) === null || _d === void 0 ? void 0 : _d[1]) ||
component.params.LibraryId ||
undefined;
}
// if params are empty we try to fall back to data source or attributes
if (!libraryId && 'fields' in component && component.fields) {
libraryId =
((_e = (0, _1.getFieldValue)(component.fields, 'CSSStyles', '').match(STYLES_LIBRARY_ID_REGEX)) === null || _e === void 0 ? void 0 : _e[1]) ||
((_f = (0, _1.getFieldValue)(component.fields, 'Styles', '').match(STYLES_LIBRARY_ID_REGEX)) === null || _f === void 0 ? void 0 : _f[1]) ||
(0, _1.getFieldValue)(component.fields, 'LibraryId', '') ||
undefined;
}
// HTMLRendering its class attribute
if (!libraryId && 'attributes' in component && typeof component.attributes.class === 'string') {
libraryId = (_g = component.attributes.class.match(STYLES_LIBRARY_ID_REGEX)) === null || _g === void 0 ? void 0 : _g[1];
}
if (libraryId) {
ids.add(libraryId);
}
const placeholders = component.placeholders || {};
Object.keys(placeholders).forEach((placeholder) => {
traversePlaceholder(placeholders[placeholder], ids);
});
};