From cda5dcd4f9f71702fb3e9f204f2be18baac9ccc6 Mon Sep 17 00:00:00 2001 From: art-alexeyenko Date: Thu, 21 Dec 2023 17:49:48 -0500 Subject: [PATCH 1/3] [sitecore-jss-nextjs] Add page state into shared context --- .../nextjs-xmcloud/src/Bootstrap.tsx | 5 +++- .../src/context/context.test.ts | 20 ++++++++++++++++ .../src/context/context.ts | 23 +++++++++++++++++++ 3 files changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx index cc4fda8de5..e7343b9bc3 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx @@ -12,7 +12,10 @@ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { * This function is the entry point for setting up the application's context and any SDKs that are required for its proper functioning. * It prepares the resources needed to interact with various services and features within the application. */ - context.init({ siteName: props.site?.name || config.sitecoreSiteName }); + context.init({ + siteName: props.site?.name || config.sitecoreSiteName, + pageState: props.layoutData?.sitecore?.context?.pageState, + }); return null; }; diff --git a/packages/sitecore-jss-nextjs/src/context/context.test.ts b/packages/sitecore-jss-nextjs/src/context/context.test.ts index 29122ee4f6..3d5fe62d9e 100644 --- a/packages/sitecore-jss-nextjs/src/context/context.test.ts +++ b/packages/sitecore-jss-nextjs/src/context/context.test.ts @@ -3,6 +3,8 @@ import sinon from 'sinon'; import { expect } from 'chai'; import { Context } from './'; +import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-react'; +import { PageStateType } from './context'; describe('Context', () => { const sdks = { @@ -97,6 +99,15 @@ describe('Context', () => { }); }); + it('should use normal pageMode when context is initialized with empty props', () => { + const context = new Context(props); + + context.init(); + + expect(context.isInitialized).to.be.true; + expect(context.pageState).to.equal(LayoutServicePageState.Normal); + }); + it('should initialize the context with a different site name', (done) => { const context = new Context(props); @@ -129,6 +140,15 @@ describe('Context', () => { }); }); + it('should initialize the context with a different page mode', () => { + const context = new Context(props); + + context.init({ pageState: PageStateType.Edit }); + + expect(context.isInitialized).to.be.true; + expect(context.pageState).to.equal(PageStateType.Edit); + }); + it('should not initialize the context if it is already initialized', () => { const context = new Context(props); diff --git a/packages/sitecore-jss-nextjs/src/context/context.ts b/packages/sitecore-jss-nextjs/src/context/context.ts index db489d5080..abee5527c2 100644 --- a/packages/sitecore-jss-nextjs/src/context/context.ts +++ b/packages/sitecore-jss-nextjs/src/context/context.ts @@ -1,3 +1,13 @@ +/** + * Page state enum + * Duplicates LayoutServicePageState to simplify future context migration into CloudSDK + */ +export enum PageStateType { + Preview = 'preview', + Edit = 'edit', + Normal = 'normal', +} + /** * Software Development Kit (SDK) instance */ @@ -25,6 +35,10 @@ export interface ContextInitProps { * Your Sitecore site name */ siteName?: string; + /** + * Sitecore page state (normal, preview, edit) + */ + pageState?: PageStateType; } /** @@ -74,6 +88,10 @@ export class Context { * The Sitecore site name */ public siteName: string; + /** + * Sitecore page state (normal, preview, edit) + */ + public pageState: PageStateType; /** * Software Development Kits (SDKs) to be initialized */ @@ -87,6 +105,7 @@ export class Context { this.sitecoreEdgeUrl = props.sitecoreEdgeUrl; this.sitecoreEdgeContextId = props.sitecoreEdgeContextId; this.siteName = props.siteName; + this.pageState = PageStateType.Normal; } public init(props: ContextInitProps = {}) { @@ -99,6 +118,10 @@ export class Context { this.siteName = props.siteName; } + if (props.pageState) { + this.pageState = props.pageState; + } + // iterate over the SDKs and initialize them for (const sdkName of Object.keys(this.props.sdks) as (keyof SDKModules)[]) { this.initSDK(sdkName); From 5116cdbefd2c57ec0f5cfdbc98fdb708d44e0131 Mon Sep 17 00:00:00 2001 From: art-alexeyenko Date: Tue, 2 Jan 2024 16:01:36 -0500 Subject: [PATCH 2/3] import PageState type from react package --- .../src/context/context.test.ts | 5 ++--- .../sitecore-jss-nextjs/src/context/context.ts | 16 ++++------------ 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/context/context.test.ts b/packages/sitecore-jss-nextjs/src/context/context.test.ts index 3d5fe62d9e..912dd48323 100644 --- a/packages/sitecore-jss-nextjs/src/context/context.test.ts +++ b/packages/sitecore-jss-nextjs/src/context/context.test.ts @@ -4,7 +4,6 @@ import sinon from 'sinon'; import { expect } from 'chai'; import { Context } from './'; import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-react'; -import { PageStateType } from './context'; describe('Context', () => { const sdks = { @@ -143,10 +142,10 @@ describe('Context', () => { it('should initialize the context with a different page mode', () => { const context = new Context(props); - context.init({ pageState: PageStateType.Edit }); + context.init({ pageState: LayoutServicePageState.Edit }); expect(context.isInitialized).to.be.true; - expect(context.pageState).to.equal(PageStateType.Edit); + expect(context.pageState).to.equal(LayoutServicePageState.Edit); }); it('should not initialize the context if it is already initialized', () => { diff --git a/packages/sitecore-jss-nextjs/src/context/context.ts b/packages/sitecore-jss-nextjs/src/context/context.ts index abee5527c2..61cc0f46d2 100644 --- a/packages/sitecore-jss-nextjs/src/context/context.ts +++ b/packages/sitecore-jss-nextjs/src/context/context.ts @@ -1,12 +1,4 @@ -/** - * Page state enum - * Duplicates LayoutServicePageState to simplify future context migration into CloudSDK - */ -export enum PageStateType { - Preview = 'preview', - Edit = 'edit', - Normal = 'normal', -} +import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-react'; /** * Software Development Kit (SDK) instance @@ -38,7 +30,7 @@ export interface ContextInitProps { /** * Sitecore page state (normal, preview, edit) */ - pageState?: PageStateType; + pageState?: LayoutServicePageState; } /** @@ -91,7 +83,7 @@ export class Context { /** * Sitecore page state (normal, preview, edit) */ - public pageState: PageStateType; + public pageState: LayoutServicePageState; /** * Software Development Kits (SDKs) to be initialized */ @@ -105,7 +97,7 @@ export class Context { this.sitecoreEdgeUrl = props.sitecoreEdgeUrl; this.sitecoreEdgeContextId = props.sitecoreEdgeContextId; this.siteName = props.siteName; - this.pageState = PageStateType.Normal; + this.pageState = LayoutServicePageState.Normal; } public init(props: ContextInitProps = {}) { From 428e7b3d1335f61359933c6c33e54c93b6f2b739 Mon Sep 17 00:00:00 2001 From: art-alexeyenko Date: Wed, 3 Jan 2024 11:14:00 -0500 Subject: [PATCH 3/3] Changelog entry [skip ci] --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b65b28a95..d0ecfd38bc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ Our versioning strategy is as follows: * `[nextjs/template]` `[sitecore-jss-nextjs]` On-demand ISR [#1674](https://github.com/Sitecore/jss/pull/1672)) * `[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)) +* `[sitecore-jss-nextjs]` `[templates/nextjs-xmcloud]` Page state (preview, edit, normal) is available through shared context. This allows access to the state for integrations such as CloudSDK and FEAAS. ([#1703](https://github.com/Sitecore/jss/pull/1703)) ### 🧹 Chores