From 0d1e8295a8efa3f6bae034a379bb5e70bbe6b4a1 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 23 Jan 2024 20:31:32 +0200 Subject: [PATCH 01/12] introduce getComponentLibraryStylesheetLinks function plus unit tests --- .../sitecore-jss/src/layout/styles/index.ts | 1 + .../src/layout/styles/themes.test.ts | 478 ++++++++++++++++++ .../sitecore-jss/src/layout/styles/themes.ts | 104 ++++ 3 files changed, 583 insertions(+) create mode 100644 packages/sitecore-jss/src/layout/styles/index.ts create mode 100644 packages/sitecore-jss/src/layout/styles/themes.test.ts create mode 100644 packages/sitecore-jss/src/layout/styles/themes.ts diff --git a/packages/sitecore-jss/src/layout/styles/index.ts b/packages/sitecore-jss/src/layout/styles/index.ts new file mode 100644 index 0000000000..bfb6044ea5 --- /dev/null +++ b/packages/sitecore-jss/src/layout/styles/index.ts @@ -0,0 +1 @@ +export { getComponentLibraryStylesheetLinks } from './themes'; diff --git a/packages/sitecore-jss/src/layout/styles/themes.test.ts b/packages/sitecore-jss/src/layout/styles/themes.test.ts new file mode 100644 index 0000000000..d45c329dbb --- /dev/null +++ b/packages/sitecore-jss/src/layout/styles/themes.test.ts @@ -0,0 +1,478 @@ +import { expect } from 'chai'; +import { getComponentLibraryStylesheetLinks, getStylesheetUrl } from './themes'; +import { SITECORE_EDGE_URL_DEFAULT } from '../../constants'; +import { ComponentRendering, HtmlElementRendering } from '..'; + +describe('themes', () => { + const sitecoreEdgeContextId = 'test'; + + describe('getComponentLibraryStylesheetLinks', () => { + const setBasicLayoutData = (component: ComponentRendering | HtmlElementRendering) => { + return { + sitecore: { + context: {}, + route: { + name: 'home', + placeholders: { + main: [component], + }, + }, + }, + }; + }; + + it('should return empty array route data is not provided', () => { + expect( + getComponentLibraryStylesheetLinks( + { + sitecore: { + context: {}, + route: null, + }, + }, + sitecoreEdgeContextId + ) + ).to.deep.equal([]); + }); + + it('should return links using CSSStyles field', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'test', + fields: { + CSSStyles: { + value: '-library--foo', + }, + LibraryId: { + value: 'bar', + }, + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('foo', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should return links using Styles field', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'test', + fields: { + Styles: { + value: '-library--foo', + }, + LibraryId: { + value: 'bar', + }, + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('foo', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should return links using LibraryId field', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'test', + fields: { + LibraryId: { + value: 'bar', + }, + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('bar', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should return links using CSSStyles param', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'styled', + params: { + CSSStyles: '-library--foo', + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('foo', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should return links using Styles param', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'styled', + params: { + Styles: '-library--foo', + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('foo', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should return links using LibraryId param', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'styled', + params: { + LibraryId: 'bar', + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('bar', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should return prefer params over fields', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'styled', + params: { + CSSStyles: '-library--foo', + }, + fields: { + CSSStyles: { + value: '-library--not-foo', + }, + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('foo', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'styled', + params: { + LibraryId: 'bar', + }, + fields: { + LibraryId: { + value: 'not-bar', + }, + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('bar', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should read LibraryId from class when matching param or field is not found', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'styled', + params: { + NotCSSStyles: '-library--not-foo', + NotStyles: '-library--not-foo', + NotLibraryId: 'not-foo', + }, + fields: { + NotCSSStyles: { + value: '-library--not-foo', + }, + NotStyles: { + value: '-library--not-foo', + }, + NotLibraryId: { + value: 'not-foo', + }, + }, + attributes: { + class: '-library--foo', + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('foo', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should return links using non-prod edge url', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'test', + fields: { + LibraryId: { + value: 'bar', + }, + }, + }), + sitecoreEdgeContextId, + 'https://edge-platform-dev.sitecorecloud.io' + ) + ).to.deep.equal([ + { + href: getStylesheetUrl( + 'bar', + sitecoreEdgeContextId, + 'https://edge-platform-dev.sitecorecloud.io' + ), + rel: 'stylesheet', + }, + ]); + }); + + it('should return empty links array when required fields are not provided', () => { + expect( + getComponentLibraryStylesheetLinks( + { + sitecore: { + context: {}, + route: { + name: 'home', + fields: {}, + placeholders: {}, + }, + }, + }, + sitecoreEdgeContextId + ) + ).to.deep.equal([]); + }); + + it('should return empty links array when required params are not provided', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + componentName: 'styled', + params: {}, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([]); + }); + + it('should traverse nested nodes and return only unique links', () => { + expect( + getComponentLibraryStylesheetLinks( + { + sitecore: { + context: {}, + route: { + name: 'home', + fields: { + CSSStyles: { + value: '-library--foo', + }, + LibraryId: { + value: 'bar', + }, + }, + placeholders: { + x: [ + { + componentName: 'x1-component', + fields: { + LibraryId: { + value: 'foo', + }, + }, + placeholders: { + x1: [ + { + componentName: 'x11-component', + fields: { + CSSStyles: { + value: '-library--x11', + }, + }, + }, + { + componentName: 'x12-component', + fields: { + CSSStyles: { + value: '-library--x12', + }, + LibraryId: { + value: 'x12-id', + }, + }, + }, + ], + x2: [ + { + componentName: 'x21-component', + fields: { + LibraryId: { + value: 'x21', + }, + }, + }, + ], + }, + }, + ], + y: [ + { + componentName: 'y1-component', + fields: { + LibraryId: { + value: 'y1', + }, + }, + }, + { + componentName: 'y2-component', + fields: { + CSSStyles: { + value: 'custom-style', + }, + LibraryId: { + value: 'y2', + }, + }, + }, + ], + z: [ + { + componentName: 'z1-component', + fields: { + CSSStyles: { + value: '-library--z1', + }, + }, + placeholders: { + z1: [ + { + componentName: 'z11-component', + fields: { + CSSStyles: { + value: '-library--z11', + }, + }, + }, + ], + z2: [ + { + componentName: 'z21-component', + fields: { + LibraryId: { + value: 'z21', + }, + }, + }, + ], + }, + }, + ], + zx: [ + { + componentName: 'zx1-component', + fields: { + Styles: { + value: 'foo', + }, + }, + placeholders: { + zx1: [ + { + componentName: 'zx11-component', + fields: { + LibraryId: { + value: 'zx11', + }, + }, + }, + ], + zx2: [ + { + componentName: 'zx21-component', + params: { + Styles: '-library--zx21' + }, + }, + ], + }, + }, + ], + }, + }, + }, + }, + sitecoreEdgeContextId + ) + ).to.deep.equal( + ['foo', 'x11', 'x12', 'x21', 'y1', 'y2', 'z1', 'z11', 'z21', 'zx11', 'zx21'].map((id) => ({ + href: getStylesheetUrl(id, sitecoreEdgeContextId), + rel: 'stylesheet', + })) + ); + }); + + it('should return links using class attribute', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + name: 'foo-component', + contents: null, + attributes: { + class: '-library--bar', + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([ + { href: getStylesheetUrl('bar', sitecoreEdgeContextId), rel: 'stylesheet' }, + ]); + }); + + it('should not return id when class does not match pattern', () => { + expect( + getComponentLibraryStylesheetLinks( + setBasicLayoutData({ + name: 'foo-component', + contents: null, + attributes: { + class: 'bar', + }, + }), + sitecoreEdgeContextId + ) + ).to.deep.equal([]); + }); + }); + + describe('getStylesheetUrl', () => { + it('should use prod edge url by default', () => { + expect(getStylesheetUrl('foo', sitecoreEdgeContextId)).to.equal( + `${SITECORE_EDGE_URL_DEFAULT}/v1/files/components/styles/foo.css?sitecoreContextId=${sitecoreEdgeContextId}` + ); + }); + + it('should use non-prod edge url', () => { + const nonProdUrl = 'https://edge-platform-pre-production.sitecorecloud.io'; + expect(getStylesheetUrl('foo', sitecoreEdgeContextId, nonProdUrl)).to.equal( + `${nonProdUrl}/v1/files/components/styles/foo.css?sitecoreContextId=${sitecoreEdgeContextId}` + ); + }); + }); +}); diff --git a/packages/sitecore-jss/src/layout/styles/themes.ts b/packages/sitecore-jss/src/layout/styles/themes.ts new file mode 100644 index 0000000000..f8b6fcf7e0 --- /dev/null +++ b/packages/sitecore-jss/src/layout/styles/themes.ts @@ -0,0 +1,104 @@ +import { + ComponentRendering, + HtmlElementRendering, + LayoutServiceData, + RouteData, + getFieldValue, +} from '..'; +import { HTMLLink } from '../../models'; +import { SITECORE_EDGE_URL_DEFAULT } from '../../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 Component 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 + */ +export function getComponentLibraryStylesheetLinks( + layoutData: LayoutServiceData, + sitecoreEdgeContextId: string, + sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT +): HTMLLink[] { + const ids = new Set(); + + if (!layoutData.sitecore.route) return []; + + traverseComponent(layoutData.sitecore.route, ids); + + return [...ids].map((id) => ({ + href: getStylesheetUrl(id, sitecoreEdgeContextId, sitecoreEdgeUrl), + rel: 'stylesheet', + })); +} + +export const getStylesheetUrl = ( + id: string, + sitecoreEdgeContextId: string, + sitecoreEdgeUrl = SITECORE_EDGE_URL_DEFAULT +) => { + return `${sitecoreEdgeUrl}/v1/files/components/styles/${id}.css?sitecoreContextId=${sitecoreEdgeContextId}`; +}; + +/** + * Traverse placeholder and components to add library ids + * @param {Array} components + * @param {Set} ids library ids + */ +const traversePlaceholder = ( + components: Array, + ids: Set +) => { + components.map((component) => { + const rendering = component as ComponentRendering; + + return traverseComponent(rendering, ids); + }); +}; + +/** + * Traverse component and children to add library ids + * @param {RouteData | ComponentRendering | HtmlElementRendering} component component data + * @param {Set} ids library ids + */ +const traverseComponent = ( + component: RouteData | ComponentRendering | HtmlElementRendering, + ids: Set +) => { + let libraryId: string | undefined = undefined; + if ('params' in component && component.params) { + // LibraryID in css class name takes precedence over LibraryId attribute + libraryId = + component.params.CSSStyles?.match(STYLES_LIBRARY_ID_REGEX)?.[1] || + component.params.Styles?.match(STYLES_LIBRARY_ID_REGEX)?.[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 = + getFieldValue(component.fields, 'CSSStyles', '').match(STYLES_LIBRARY_ID_REGEX)?.[1] || + getFieldValue(component.fields, 'Styles', '').match(STYLES_LIBRARY_ID_REGEX)?.[1] || + getFieldValue(component.fields, 'LibraryId', '') || + undefined; + } + // HTMLRendering its class attribute + if (!libraryId && 'attributes' in component && typeof component.attributes.class === 'string') { + libraryId = component.attributes.class.match(STYLES_LIBRARY_ID_REGEX)?.[1]; + } + if (libraryId) { + ids.add(libraryId); + } + + const placeholders = (component as ComponentRendering).placeholders || {}; + + Object.keys(placeholders).forEach((placeholder) => { + traversePlaceholder(placeholders[placeholder], ids); + }); +}; From 6a29e626de8c28f31d55c7bbebcf127f47228b42 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 23 Jan 2024 20:33:05 +0200 Subject: [PATCH 02/12] use getComponentLibraryStylesheetLinks function in load component themes plugin --- .../plugins/{feaas-themes.ts => component-themes.ts} | 10 +++++----- packages/sitecore-jss-nextjs/src/index.ts | 1 + packages/sitecore-jss-react/src/index.ts | 1 + packages/sitecore-jss/src/layout/index.ts | 2 ++ packages/sitecore-jss/styles.d.ts | 1 + packages/sitecore-jss/styles.js | 1 + packages/sitecore-jss/tsconfig.json | 1 + 7 files changed, 12 insertions(+), 5 deletions(-) rename packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/{feaas-themes.ts => component-themes.ts} (52%) create mode 100644 packages/sitecore-jss/styles.d.ts create mode 100644 packages/sitecore-jss/styles.js diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/feaas-themes.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts similarity index 52% rename from packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/feaas-themes.ts rename to packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts index 8f90e1a72b..ecc5456ff7 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/feaas-themes.ts +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/component-themes.ts @@ -1,15 +1,15 @@ import { SitecorePageProps } from 'lib/page-props'; -import { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs'; +import { getComponentLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs'; import { Plugin } from '..'; import config from 'temp/config'; -class FEeaSThemesPlugin implements Plugin { +class ComponentThemesPlugin implements Plugin { order = 2; async exec(props: SitecorePageProps) { - // Collect FEAAS themes + // Collect FEAAS, BYOC, SXA component themes props.headLinks.push( - ...getFEAASLibraryStylesheetLinks( + ...getComponentLibraryStylesheetLinks( props.layoutData, config.sitecoreEdgeContextId, config.sitecoreEdgeUrl @@ -19,4 +19,4 @@ class FEeaSThemesPlugin implements Plugin { } } -export const feaasThemesPlugin = new FEeaSThemesPlugin(); +export const componentThemesPlugin = new ComponentThemesPlugin(); diff --git a/packages/sitecore-jss-nextjs/src/index.ts b/packages/sitecore-jss-nextjs/src/index.ts index 2ab768dd26..8ecd6c04fb 100644 --- a/packages/sitecore-jss-nextjs/src/index.ts +++ b/packages/sitecore-jss-nextjs/src/index.ts @@ -188,6 +188,7 @@ export { BYOCComponent, BYOCComponentProps, getFEAASLibraryStylesheetLinks, + getComponentLibraryStylesheetLinks, File, FileField, RichTextField, diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts index 7ac24039cf..aa6d9e03cc 100644 --- a/packages/sitecore-jss-react/src/index.ts +++ b/packages/sitecore-jss-react/src/index.ts @@ -45,6 +45,7 @@ export { } from '@sitecore-jss/sitecore-jss/i18n'; export { mediaApi } from '@sitecore-jss/sitecore-jss/media'; export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas'; +export { getComponentLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/layout' export { ComponentFactory } from './components/sharedTypes'; export { Placeholder, PlaceholderComponentProps } from './components/Placeholder'; export { diff --git a/packages/sitecore-jss/src/layout/index.ts b/packages/sitecore-jss/src/layout/index.ts index 6a22058a27..0af526e45c 100644 --- a/packages/sitecore-jss/src/layout/index.ts +++ b/packages/sitecore-jss/src/layout/index.ts @@ -31,3 +31,5 @@ export { } from './rest-layout-service'; export { GraphQLLayoutService, GraphQLLayoutServiceConfig } from './graphql-layout-service'; + +export { getComponentLibraryStylesheetLinks } from './styles/themes' diff --git a/packages/sitecore-jss/styles.d.ts b/packages/sitecore-jss/styles.d.ts new file mode 100644 index 0000000000..7108718390 --- /dev/null +++ b/packages/sitecore-jss/styles.d.ts @@ -0,0 +1 @@ +export * from './types/layout/styles/index'; diff --git a/packages/sitecore-jss/styles.js b/packages/sitecore-jss/styles.js new file mode 100644 index 0000000000..7eb53f6fe4 --- /dev/null +++ b/packages/sitecore-jss/styles.js @@ -0,0 +1 @@ +module.exports = require('./dist/cjs/layout/styles/index'); diff --git a/packages/sitecore-jss/tsconfig.json b/packages/sitecore-jss/tsconfig.json index 697d50adbb..a3aa39c840 100644 --- a/packages/sitecore-jss/tsconfig.json +++ b/packages/sitecore-jss/tsconfig.json @@ -20,6 +20,7 @@ "site.d.ts", "personalize.d.ts", "feaas.d.ts", + "styles.d.ts", "src/**/*.test.ts", "src/test-data/*" ] From cf5c626b644f632a33a1929121a79c74b6ce18b9 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 23 Jan 2024 20:33:21 +0200 Subject: [PATCH 03/12] deprecate getFEAASLibraryStylesheetLinks --- packages/sitecore-jss/src/feaas/themes.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/sitecore-jss/src/feaas/themes.ts b/packages/sitecore-jss/src/feaas/themes.ts index 37440d10bf..71a346641e 100644 --- a/packages/sitecore-jss/src/feaas/themes.ts +++ b/packages/sitecore-jss/src/feaas/themes.ts @@ -21,6 +21,7 @@ const FEAAS_LIBRARY_ID_REGEX = /-library--([^\s]+)/; * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io * @returns {HTMLLink[]} library stylesheet links */ +/** @deprecated use getComponentLibraryStylesheetLinks instead */ export function getFEAASLibraryStylesheetLinks( layoutData: LayoutServiceData, sitecoreEdgeContextId: string, From f340a5dde2e6830edfdac9aa17d4cd14c345647a Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 24 Jan 2024 10:52:34 +0200 Subject: [PATCH 04/12] fix linting errors --- packages/sitecore-jss/src/feaas/themes.ts | 2 +- packages/sitecore-jss/src/layout/index.ts | 2 +- packages/sitecore-jss/src/layout/styles/themes.test.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/sitecore-jss/src/feaas/themes.ts b/packages/sitecore-jss/src/feaas/themes.ts index 71a346641e..289d76fe32 100644 --- a/packages/sitecore-jss/src/feaas/themes.ts +++ b/packages/sitecore-jss/src/feaas/themes.ts @@ -20,8 +20,8 @@ const FEAAS_LIBRARY_ID_REGEX = /-library--([^\s]+)/; * @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 + * @deprecated use getComponentLibraryStylesheetLinks instead */ -/** @deprecated use getComponentLibraryStylesheetLinks instead */ export function getFEAASLibraryStylesheetLinks( layoutData: LayoutServiceData, sitecoreEdgeContextId: string, diff --git a/packages/sitecore-jss/src/layout/index.ts b/packages/sitecore-jss/src/layout/index.ts index 0af526e45c..c4845416c4 100644 --- a/packages/sitecore-jss/src/layout/index.ts +++ b/packages/sitecore-jss/src/layout/index.ts @@ -32,4 +32,4 @@ export { export { GraphQLLayoutService, GraphQLLayoutServiceConfig } from './graphql-layout-service'; -export { getComponentLibraryStylesheetLinks } from './styles/themes' +export { getComponentLibraryStylesheetLinks } from './styles/themes'; diff --git a/packages/sitecore-jss/src/layout/styles/themes.test.ts b/packages/sitecore-jss/src/layout/styles/themes.test.ts index d45c329dbb..3c3c6372df 100644 --- a/packages/sitecore-jss/src/layout/styles/themes.test.ts +++ b/packages/sitecore-jss/src/layout/styles/themes.test.ts @@ -407,7 +407,7 @@ describe('themes', () => { { componentName: 'zx21-component', params: { - Styles: '-library--zx21' + Styles: '-library--zx21', }, }, ], From 1aa415d5c6501541864f0bf22bccff490ad8718d Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 24 Jan 2024 11:00:45 +0200 Subject: [PATCH 05/12] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f45e2ab813..6d30a43651 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ Our versioning strategy is as follows: * `[nextjs/template]` `[sitecore-jss-nextjs]` On-demand ISR [#1674](https://github.com/Sitecore/jss/pull/1674)) * `[sitecore-jss]` `[templates/nextjs-xmcloud]` Load the content styles for the RichText component ([#1670](https://github.com/Sitecore/jss/pull/1670))([#1683](https://github.com/Sitecore/jss/pull/1683)) ([#1684](https://github.com/Sitecore/jss/pull/1684)) ([#1693](https://github.com/Sitecore/jss/pull/1693)) * `[templates/react]` `[sitecore-jss-react]` Replace package 'deep-equal' with 'fast-deep-equal'. No functionality change only performance improvement ([#1719](https://github.com/Sitecore/jss/pull/1719)) ([#1665](https://github.com/Sitecore/jss/pull/1665)) +* `[templates/nextjs]` `[sitecore-jss]` `[sitecore-jss-nextjs]` `[sitecore-react]` Add support for loading appropriate stylesheets whenever a theme is applied to BYOC and SXA components by introducing new function getComponentLibraryStylesheetLinks, which replaces getFEAASLibraryStylesheetLinks (which has been marked as deprecated) ([#1722](https://github.com/Sitecore/jss/pull/1722)) ### 🐛 Bug Fixes From 74603397419638aec2a0c1c68a2564b47666a5d8 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 24 Jan 2024 11:04:13 +0200 Subject: [PATCH 06/12] fix changelog update --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6d30a43651..fec20416ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ Our versioning strategy is as follows: * `[nextjs/template]` `[sitecore-jss-nextjs]` On-demand ISR [#1674](https://github.com/Sitecore/jss/pull/1674)) * `[sitecore-jss]` `[templates/nextjs-xmcloud]` Load the content styles for the RichText component ([#1670](https://github.com/Sitecore/jss/pull/1670))([#1683](https://github.com/Sitecore/jss/pull/1683)) ([#1684](https://github.com/Sitecore/jss/pull/1684)) ([#1693](https://github.com/Sitecore/jss/pull/1693)) * `[templates/react]` `[sitecore-jss-react]` Replace package 'deep-equal' with 'fast-deep-equal'. No functionality change only performance improvement ([#1719](https://github.com/Sitecore/jss/pull/1719)) ([#1665](https://github.com/Sitecore/jss/pull/1665)) -* `[templates/nextjs]` `[sitecore-jss]` `[sitecore-jss-nextjs]` `[sitecore-react]` Add support for loading appropriate stylesheets whenever a theme is applied to BYOC and SXA components by introducing new function getComponentLibraryStylesheetLinks, which replaces getFEAASLibraryStylesheetLinks (which has been marked as deprecated) ([#1722](https://github.com/Sitecore/jss/pull/1722)) +* `[templates/nextjs-xmcloud]` `[sitecore-jss]` `[sitecore-jss-nextjs]` `[sitecore-react]` Add support for loading appropriate stylesheets whenever a theme is applied to BYOC and SXA components by introducing new function getComponentLibraryStylesheetLinks, which replaces getFEAASLibraryStylesheetLinks (which has been marked as deprecated) ([#1722](https://github.com/Sitecore/jss/pull/1722)) ### 🐛 Bug Fixes From 35470b7d462bccdf8f06c70e297dc85e866ab5bd Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 24 Jan 2024 11:15:14 +0200 Subject: [PATCH 07/12] fix lint error --- packages/sitecore-jss-react/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts index aa6d9e03cc..c90854a1f6 100644 --- a/packages/sitecore-jss-react/src/index.ts +++ b/packages/sitecore-jss-react/src/index.ts @@ -45,7 +45,7 @@ export { } from '@sitecore-jss/sitecore-jss/i18n'; export { mediaApi } from '@sitecore-jss/sitecore-jss/media'; export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas'; -export { getComponentLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/layout' +export { getComponentLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/layout'; export { ComponentFactory } from './components/sharedTypes'; export { Placeholder, PlaceholderComponentProps } from './components/Placeholder'; export { From f290e2422fc3e332b3ee2e354bf941c013818f92 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 24 Jan 2024 16:05:56 +0200 Subject: [PATCH 08/12] update deprecated message for getFEAASLibraryStylesheetLinks function --- packages/sitecore-jss/src/feaas/themes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sitecore-jss/src/feaas/themes.ts b/packages/sitecore-jss/src/feaas/themes.ts index 289d76fe32..fb0262e9a1 100644 --- a/packages/sitecore-jss/src/feaas/themes.ts +++ b/packages/sitecore-jss/src/feaas/themes.ts @@ -20,7 +20,7 @@ const FEAAS_LIBRARY_ID_REGEX = /-library--([^\s]+)/; * @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 - * @deprecated use getComponentLibraryStylesheetLinks instead + * @deprecated use getComponentLibraryStylesheetLinks instead; getFEAASLibraryStylesheetLinks will be removed in v22.0 */ export function getFEAASLibraryStylesheetLinks( layoutData: LayoutServiceData, From 317b0f6045db8ea9e1ca5e2a1789d5325b5f9a67 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Wed, 24 Jan 2024 17:45:57 +0200 Subject: [PATCH 09/12] export getComponentLibraryStylesheetLinks directly from layout submodule --- packages/sitecore-jss/src/layout/index.ts | 2 +- packages/sitecore-jss/src/layout/styles/index.ts | 1 - .../sitecore-jss/src/layout/{styles => }/themes.test.ts | 4 ++-- packages/sitecore-jss/src/layout/{styles => }/themes.ts | 6 +++--- 4 files changed, 6 insertions(+), 7 deletions(-) delete mode 100644 packages/sitecore-jss/src/layout/styles/index.ts rename packages/sitecore-jss/src/layout/{styles => }/themes.test.ts (99%) rename packages/sitecore-jss/src/layout/{styles => }/themes.ts (96%) diff --git a/packages/sitecore-jss/src/layout/index.ts b/packages/sitecore-jss/src/layout/index.ts index c4845416c4..8262ececf2 100644 --- a/packages/sitecore-jss/src/layout/index.ts +++ b/packages/sitecore-jss/src/layout/index.ts @@ -32,4 +32,4 @@ export { export { GraphQLLayoutService, GraphQLLayoutServiceConfig } from './graphql-layout-service'; -export { getComponentLibraryStylesheetLinks } from './styles/themes'; +export { getComponentLibraryStylesheetLinks } from './themes'; diff --git a/packages/sitecore-jss/src/layout/styles/index.ts b/packages/sitecore-jss/src/layout/styles/index.ts deleted file mode 100644 index bfb6044ea5..0000000000 --- a/packages/sitecore-jss/src/layout/styles/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { getComponentLibraryStylesheetLinks } from './themes'; diff --git a/packages/sitecore-jss/src/layout/styles/themes.test.ts b/packages/sitecore-jss/src/layout/themes.test.ts similarity index 99% rename from packages/sitecore-jss/src/layout/styles/themes.test.ts rename to packages/sitecore-jss/src/layout/themes.test.ts index 3c3c6372df..0e315cda18 100644 --- a/packages/sitecore-jss/src/layout/styles/themes.test.ts +++ b/packages/sitecore-jss/src/layout/themes.test.ts @@ -1,7 +1,7 @@ import { expect } from 'chai'; import { getComponentLibraryStylesheetLinks, getStylesheetUrl } from './themes'; -import { SITECORE_EDGE_URL_DEFAULT } from '../../constants'; -import { ComponentRendering, HtmlElementRendering } from '..'; +import { SITECORE_EDGE_URL_DEFAULT } from '../constants'; +import { ComponentRendering, HtmlElementRendering } from '.'; describe('themes', () => { const sitecoreEdgeContextId = 'test'; diff --git a/packages/sitecore-jss/src/layout/styles/themes.ts b/packages/sitecore-jss/src/layout/themes.ts similarity index 96% rename from packages/sitecore-jss/src/layout/styles/themes.ts rename to packages/sitecore-jss/src/layout/themes.ts index f8b6fcf7e0..324daa4b25 100644 --- a/packages/sitecore-jss/src/layout/styles/themes.ts +++ b/packages/sitecore-jss/src/layout/themes.ts @@ -4,9 +4,9 @@ import { LayoutServiceData, RouteData, getFieldValue, -} from '..'; -import { HTMLLink } from '../../models'; -import { SITECORE_EDGE_URL_DEFAULT } from '../../constants'; +} from '.'; +import { HTMLLink } from '../models'; +import { SITECORE_EDGE_URL_DEFAULT } from '../constants'; /** * Pattern for library ids From 739170643f7d22cc83edb487bd434150f2157deb Mon Sep 17 00:00:00 2001 From: yavorsk Date: Thu, 25 Jan 2024 18:14:14 +0200 Subject: [PATCH 10/12] remove things around removed styles submodule --- packages/sitecore-jss/styles.d.ts | 1 - packages/sitecore-jss/styles.js | 1 - packages/sitecore-jss/tsconfig.json | 1 - 3 files changed, 3 deletions(-) delete mode 100644 packages/sitecore-jss/styles.d.ts delete mode 100644 packages/sitecore-jss/styles.js diff --git a/packages/sitecore-jss/styles.d.ts b/packages/sitecore-jss/styles.d.ts deleted file mode 100644 index 7108718390..0000000000 --- a/packages/sitecore-jss/styles.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './types/layout/styles/index'; diff --git a/packages/sitecore-jss/styles.js b/packages/sitecore-jss/styles.js deleted file mode 100644 index 7eb53f6fe4..0000000000 --- a/packages/sitecore-jss/styles.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/cjs/layout/styles/index'); diff --git a/packages/sitecore-jss/tsconfig.json b/packages/sitecore-jss/tsconfig.json index a3aa39c840..697d50adbb 100644 --- a/packages/sitecore-jss/tsconfig.json +++ b/packages/sitecore-jss/tsconfig.json @@ -20,7 +20,6 @@ "site.d.ts", "personalize.d.ts", "feaas.d.ts", - "styles.d.ts", "src/**/*.test.ts", "src/test-data/*" ] From a3c5f0307e8efbc3330289878e4ed21c881847c7 Mon Sep 17 00:00:00 2001 From: Yavor Krastev <4502045+yavorsk@users.noreply.github.com> Date: Fri, 26 Jan 2024 14:16:09 +0200 Subject: [PATCH 11/12] Update CHANGELOG.md Co-authored-by: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fec20416ae..8dc140c9c1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,7 @@ Our versioning strategy is as follows: * `[nextjs/template]` `[sitecore-jss-nextjs]` On-demand ISR [#1674](https://github.com/Sitecore/jss/pull/1674)) * `[sitecore-jss]` `[templates/nextjs-xmcloud]` Load the content styles for the RichText component ([#1670](https://github.com/Sitecore/jss/pull/1670))([#1683](https://github.com/Sitecore/jss/pull/1683)) ([#1684](https://github.com/Sitecore/jss/pull/1684)) ([#1693](https://github.com/Sitecore/jss/pull/1693)) * `[templates/react]` `[sitecore-jss-react]` Replace package 'deep-equal' with 'fast-deep-equal'. No functionality change only performance improvement ([#1719](https://github.com/Sitecore/jss/pull/1719)) ([#1665](https://github.com/Sitecore/jss/pull/1665)) -* `[templates/nextjs-xmcloud]` `[sitecore-jss]` `[sitecore-jss-nextjs]` `[sitecore-react]` Add support for loading appropriate stylesheets whenever a theme is applied to BYOC and SXA components by introducing new function getComponentLibraryStylesheetLinks, which replaces getFEAASLibraryStylesheetLinks (which has been marked as deprecated) ([#1722](https://github.com/Sitecore/jss/pull/1722)) +* `[templates/nextjs-xmcloud]` `[sitecore-jss]` `[sitecore-jss-nextjs]` `[sitecore-jss-react]` Add support for loading appropriate stylesheets whenever a theme is applied to BYOC and SXA components by introducing new function getComponentLibraryStylesheetLinks, which replaces getFEAASLibraryStylesheetLinks (which has been marked as deprecated) ([#1722](https://github.com/Sitecore/jss/pull/1722)) ### 🐛 Bug Fixes From df0930a5913f4c807c506be80622ffb2abfa92fe Mon Sep 17 00:00:00 2001 From: yavorsk Date: Fri, 26 Jan 2024 14:20:35 +0200 Subject: [PATCH 12/12] minor update in exports in sitecore-jss-react --- packages/sitecore-jss-react/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts index c90854a1f6..f48049b761 100644 --- a/packages/sitecore-jss-react/src/index.ts +++ b/packages/sitecore-jss-react/src/index.ts @@ -11,6 +11,7 @@ export { } from '@sitecore-jss/sitecore-jss/utils'; export { getContentStylesheetLink, + getComponentLibraryStylesheetLinks, LayoutService, LayoutServiceData, LayoutServicePageState, @@ -45,7 +46,6 @@ export { } from '@sitecore-jss/sitecore-jss/i18n'; export { mediaApi } from '@sitecore-jss/sitecore-jss/media'; export { getFEAASLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/feaas'; -export { getComponentLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss/layout'; export { ComponentFactory } from './components/sharedTypes'; export { Placeholder, PlaceholderComponentProps } from './components/Placeholder'; export {