From bef29b3453badda4f17ad67f3548b9f13080c529 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Fri, 20 Sep 2024 17:08:49 -0400 Subject: [PATCH 01/19] [nexjts] Upgrade cloudsdk to 0.4.0 --- .../src/templates/nextjs-xmcloud/package.json | 3 ++- .../nextjs-xmcloud/src/lib/context/sdk/events.ts | 7 +++++-- packages/sitecore-jss-nextjs/package.json | 7 ++++--- .../src/middleware/personalize-middleware.ts | 9 ++++++--- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json index c2d7a5e3aa..2df3d6d985 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json @@ -1,7 +1,8 @@ { "dependencies": { "@sitecore/components": "^1.1.10", - "@sitecore-cloudsdk/events": "^0.3.1", + "@sitecore-cloudsdk/core": "^0.4.0-rc.0", + "@sitecore-cloudsdk/events": "^0.4.0-rc.0", "@sitecore-feaas/clientside": "^0.5.17" } } diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts index a9faf3d12a..ab3afc3bf6 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts @@ -1,3 +1,4 @@ +import { CloudSDK } from "@sitecore-cloudsdk/core/browser"; import * as Events from '@sitecore-cloudsdk/events/browser'; import { SDK } from '@sitecore-jss/sitecore-jss-nextjs/context'; @@ -11,7 +12,7 @@ const sdkModule: SDK = { if (process.env.NODE_ENV === 'development') throw 'Browser Events SDK is not initialized in development environment'; - await Events.init({ + await CloudSDK({ siteName: props.siteName, sitecoreEdgeUrl: props.sitecoreEdgeUrl, sitecoreEdgeContextId: props.sitecoreEdgeContextId, @@ -19,7 +20,9 @@ const sdkModule: SDK = { cookieDomain: window.location.hostname.replace(/^www\./, ''), // Cookie may be created in personalize middleware (server), but if not we should create it here enableBrowserCookie: true, - }); + }) + .addEvents() + .initialize(); }, }; diff --git a/packages/sitecore-jss-nextjs/package.json b/packages/sitecore-jss-nextjs/package.json index e78dc71ed6..b86902bce9 100644 --- a/packages/sitecore-jss-nextjs/package.json +++ b/packages/sitecore-jss-nextjs/package.json @@ -29,7 +29,8 @@ "url": "https://github.com/sitecore/jss/issues" }, "devDependencies": { - "@sitecore-cloudsdk/personalize": "^0.3.1", + "@sitecore-cloudsdk/core": "^0.4.0-rc.0", + "@sitecore-cloudsdk/personalize": "^0.4.0-rc.0", "@types/chai": "^4.3.4", "@types/chai-as-promised": "^7.1.5", "@types/chai-string": "^1.4.2", @@ -65,8 +66,8 @@ "typescript": "~4.9.4" }, "peerDependencies": { - "@sitecore-cloudsdk/events": "^0.3.1", - "@sitecore-cloudsdk/personalize": "^0.3.1", + "@sitecore-cloudsdk/events": "^0.4.0-rc.0", + "@sitecore-cloudsdk/personalize": "^0.4.0-rc.0", "next": "^14.2.7", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts b/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts index c6977d43e7..7b638c8407 100644 --- a/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts +++ b/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts @@ -9,7 +9,8 @@ import { } from '@sitecore-jss/sitecore-jss/personalize'; import { debug } from '@sitecore-jss/sitecore-jss'; import { MiddlewareBase, MiddlewareBaseConfig } from './middleware'; -import { init, personalize } from '@sitecore-cloudsdk/personalize/server'; +import { CloudSDK } from '@sitecore-cloudsdk/core/server'; +import { personalize } from '@sitecore-cloudsdk/personalize/server'; export type CdpServiceConfig = { /** @@ -119,13 +120,15 @@ export class PersonalizeMiddleware extends MiddlewareBase { request: NextRequest; response: NextResponse; }): Promise { - await init(request, response, { + await CloudSDK(request, response, { sitecoreEdgeUrl: this.config.cdpConfig.sitecoreEdgeUrl, sitecoreEdgeContextId: this.config.cdpConfig.sitecoreEdgeContextId, siteName, cookieDomain: hostname, enableServerCookie: true, - }); + }) + .addPersonalize() + .initialize(); } protected async personalize( From 63b958072a6f6786cf6ca5c8a5c86c5c79712b59 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Sun, 22 Sep 2024 19:49:15 -0400 Subject: [PATCH 02/19] lint --- .../src/middleware/personalize-middleware.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts b/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts index 7b638c8407..3748eb7169 100644 --- a/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts +++ b/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts @@ -127,8 +127,8 @@ export class PersonalizeMiddleware extends MiddlewareBase { cookieDomain: hostname, enableServerCookie: true, }) - .addPersonalize() - .initialize(); + .addPersonalize() + .initialize(); } protected async personalize( From 822ff4419285034f5f4844cde01fc712d41544c5 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 23 Oct 2024 15:52:54 -0400 Subject: [PATCH 03/19] Remove context logic --- .../nextjs-xmcloud/src/byoc/index.ts | 26 -- .../nextjs-xmcloud/src/lib/context/index.ts | 22 -- .../src/lib/context/sdk/events.ts | 29 -- packages/sitecore-jss-nextjs/context.d.ts | 1 - packages/sitecore-jss-nextjs/context.js | 1 - .../src/context/context.test.ts | 248 ------------------ .../src/context/context.ts | 164 ------------ .../sitecore-jss-nextjs/src/context/index.ts | 1 - packages/sitecore-jss-nextjs/src/index.ts | 2 - 9 files changed, 494 deletions(-) delete mode 100644 packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts delete mode 100644 packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts delete mode 100644 packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts delete mode 100644 packages/sitecore-jss-nextjs/context.d.ts delete mode 100644 packages/sitecore-jss-nextjs/context.js delete mode 100644 packages/sitecore-jss-nextjs/src/context/context.test.ts delete mode 100644 packages/sitecore-jss-nextjs/src/context/context.ts delete mode 100644 packages/sitecore-jss-nextjs/src/context/index.ts diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts deleted file mode 100644 index 3339b869b2..0000000000 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as FEAAS from '@sitecore-feaas/clientside/react'; -import '@sitecore/components/context'; -import dynamic from 'next/dynamic'; -import { context } from 'lib/context'; -/** - * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) - * It enables registering components in client-only or SSR/hybrid contexts - * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead - */ - -// Set context properties to be available within BYOC components -FEAAS.setContextProperties(context); - -// Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side -const ClientBundle = dynamic(() => import('./index.client'), { - ssr: false, -}); - -// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts -import './index.hybrid'; - -// As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available -// The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout -FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); - -export default FEAAS.ExternalComponentBundle; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts deleted file mode 100644 index 4323c5ff53..0000000000 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Context } from '@sitecore-jss/sitecore-jss-nextjs/context'; -import config from 'temp/config'; - -import Events from './sdk/events'; - -/** - * List of SDKs to be initialized. - * Each SDK is defined as a module with the @type {SDK} type. - */ -const sdks = { - Events, -}; - -/** - * Context instance that is used to initialize the application Context and associated Software Development Kits (SDKs). - */ -export const context = new Context({ - sitecoreEdgeUrl: config.sitecoreEdgeUrl, - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: config.sitecoreSiteName, - sdks, -}); diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts deleted file mode 100644 index ab3afc3bf6..0000000000 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { CloudSDK } from "@sitecore-cloudsdk/core/browser"; -import * as Events from '@sitecore-cloudsdk/events/browser'; -import { SDK } from '@sitecore-jss/sitecore-jss-nextjs/context'; - -const sdkModule: SDK = { - sdk: Events, - init: async (props) => { - // Events module can't be initialized on the server side - // We also don't want to initialize it in development mode - if (typeof window === 'undefined') - throw 'Browser Events SDK is not initialized in server context'; - if (process.env.NODE_ENV === 'development') - throw 'Browser Events SDK is not initialized in development environment'; - - await CloudSDK({ - siteName: props.siteName, - sitecoreEdgeUrl: props.sitecoreEdgeUrl, - sitecoreEdgeContextId: props.sitecoreEdgeContextId, - // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com" - cookieDomain: window.location.hostname.replace(/^www\./, ''), - // Cookie may be created in personalize middleware (server), but if not we should create it here - enableBrowserCookie: true, - }) - .addEvents() - .initialize(); - }, -}; - -export default sdkModule; diff --git a/packages/sitecore-jss-nextjs/context.d.ts b/packages/sitecore-jss-nextjs/context.d.ts deleted file mode 100644 index 72e501678d..0000000000 --- a/packages/sitecore-jss-nextjs/context.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './types/context/index'; diff --git a/packages/sitecore-jss-nextjs/context.js b/packages/sitecore-jss-nextjs/context.js deleted file mode 100644 index e9529d5720..0000000000 --- a/packages/sitecore-jss-nextjs/context.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/cjs/context/index'); diff --git a/packages/sitecore-jss-nextjs/src/context/context.test.ts b/packages/sitecore-jss-nextjs/src/context/context.test.ts deleted file mode 100644 index dcade0ff67..0000000000 --- a/packages/sitecore-jss-nextjs/src/context/context.test.ts +++ /dev/null @@ -1,248 +0,0 @@ -/* eslint-disable no-unused-expressions */ -/* eslint-disable dot-notation */ -import sinon from 'sinon'; -import { expect } from 'chai'; -import { Context } from './'; -import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-react'; - -describe('Context', () => { - const sdks = { - Foo: { - sdk: { foo: true }, - init: () => - new Promise((resolve) => { - setTimeout(() => { - resolve(); - }, 300); - }), - }, - Bar: { - sdk: { bar: true }, - init: () => { - return new Promise((resolve) => { - setTimeout(() => { - resolve(); - }, 500); - }); - }, - }, - }; - - const errorSdk = { - Error: { - sdk: { error: 'yes' }, - init: () => { - return new Promise((_, reject) => { - reject('Cannot init Error'); - }); - }, - }, - }; - - const fooInitSpy = sinon.spy(sdks.Foo, 'init'); - const barInitSpy = sinon.spy(sdks.Bar, 'init'); - - const props = { - sitecoreEdgeUrl: 'https://edgeurl', - sitecoreEdgeContextId: 'contextid', - siteName: '', - sdks, - }; - - afterEach(() => { - fooInitSpy.resetHistory(); - barInitSpy.resetHistory(); - }); - - describe('constructor', () => { - it('should create a new context', () => { - const context = new Context(props); - - expect(context.sitecoreEdgeUrl).to.equal(props.sitecoreEdgeUrl); - expect(context.sitecoreEdgeContextId).to.equal(props.sitecoreEdgeContextId); - expect(context.siteName).to.equal(props.siteName); - }); - - it('should provide all the properties when context instance is merged as an object', () => { - const context = new Context(props); - - const merged = { ...context }; - - expect(merged.sitecoreEdgeUrl).to.equal(props.sitecoreEdgeUrl); - expect(merged.sitecoreEdgeContextId).to.equal(props.sitecoreEdgeContextId); - expect(merged.siteName).to.equal(props.siteName); - expect(merged.getSDK).to.equal(context.getSDK); - expect(merged.isInitialized).to.equal(context.isInitialized); - }); - }); - - describe('init', () => { - it('should initialize the context', (done) => { - const context = new Context(props); - - context.init(); - - expect(context.isInitialized).to.be.true; - expect(context.siteName).to.equal(props.siteName); - - expect(context.sdks.Bar).to.equal(undefined); - expect(context.sdks.Foo).to.equal(undefined); - - Promise.all([ - context.getSDK('Foo').then((sdk) => { - expect(fooInitSpy.calledOnce).to.be.true; - expect(sdk).to.deep.equal(sdks.Foo.sdk); - - return; - }), - context.getSDK('Bar').then((sdk) => { - expect(barInitSpy.calledOnce).to.be.true; - expect(sdk).to.deep.equal(sdks.Bar.sdk); - - return; - }), - ]).then(() => { - expect(context.sdks.Foo).to.deep.equal(sdks.Foo.sdk); - expect(context.sdks.Bar).to.deep.equal(sdks.Bar.sdk); - - done(); - }); - }); - - 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); - - context.init({ siteName: 'website' }); - - expect(context.isInitialized).to.be.true; - expect(context.siteName).to.equal('website'); - - expect(context.sdks.Bar).to.equal(undefined); - expect(context.sdks.Foo).to.equal(undefined); - - Promise.all([ - context.getSDK('Foo').then((sdk) => { - expect(fooInitSpy.calledOnce).to.be.true; - expect(sdk).to.deep.equal(sdks.Foo.sdk); - - return; - }), - context.getSDK('Bar').then((sdk) => { - expect(barInitSpy.calledOnce).to.be.true; - expect(sdk).to.deep.equal(sdks.Bar.sdk); - - return; - }), - ]).then(() => { - expect(context.sdks.Foo).to.deep.equal(sdks.Foo.sdk); - expect(context.sdks.Bar).to.deep.equal(sdks.Bar.sdk); - - done(); - }); - }); - - it('should initialize the context with a different page mode', () => { - const context = new Context(props); - - context.init({ pageState: LayoutServicePageState.Edit }); - - expect(context.isInitialized).to.be.true; - expect(context.pageState).to.equal(LayoutServicePageState.Edit); - }); - - it('should not initialize the context if it is already initialized', () => { - const context = new Context(props); - - context.init({ siteName: 'website-1' }); - - expect(context.isInitialized).to.be.true; - - context.init({ siteName: 'website-2' }); - - expect(context.siteName).to.equal('website-1'); - }); - - it('should not fail context init when an SDK init throws', (done) => { - const localProps = { ...props, sdks: errorSdk }; - const context = new Context(localProps); - try { - context.init(); - } catch (e) { - done(e); - } finally { - done(); - } - }); - - it('should reject when getting SDK that rejected initialization', (done) => { - const localProps = { ...props, sdks: errorSdk }; - const context = new Context(localProps); - context.init(); - context - .getSDK('Error') - .then(() => { - done('should not resolve'); - }) - .catch((e) => { - expect(e).to.be.equal('Cannot init Error'); - done(); - }); - }); - }); - - describe('getSDK', () => { - it('should return the SDKs', (done) => { - const context = new Context(props); - - context.init(); - - expect(context.sdks.Bar).to.equal(undefined); - expect(context.sdks.Foo).to.equal(undefined); - - Promise.all([ - context.getSDK('Foo').then((sdk) => { - expect(fooInitSpy.calledOnce).to.be.true; - expect(sdk).to.deep.equal(sdks.Foo.sdk); - - return; - }), - context.getSDK('Bar').then((sdk) => { - expect(barInitSpy.calledOnce).to.be.true; - expect(sdk).to.deep.equal(sdks.Bar.sdk); - - return; - }), - ]).then(() => { - expect(context.sdks.Foo).to.deep.equal(sdks.Foo.sdk); - expect(context.sdks.Bar).to.deep.equal(sdks.Bar.sdk); - - done(); - }); - }); - - it('should reject unknown SDK', async () => { - const context = new Context(props); - const sdk = 'Baz'; - - context.init(); - - return context - .getSDK(sdk) - .then(() => { - throw new Error('should not resolve'); - }) - .catch((e) => { - expect(e).to.equal(`Unknown SDK '${sdk}'`); - }); - }); - }); -}); diff --git a/packages/sitecore-jss-nextjs/src/context/context.ts b/packages/sitecore-jss-nextjs/src/context/context.ts deleted file mode 100644 index 3e020395d2..0000000000 --- a/packages/sitecore-jss-nextjs/src/context/context.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-react'; - -/** - * Software Development Kit (SDK) instance - */ -export type SDK = { - /** - * The Software Development Kit (SDK) library instance - */ - sdk: SDKType; - /** - * Initializes the Software Development Kit (SDK) - */ - init: (props: InitSDKProps) => Promise; -}; - -/** - * Software Development Kits (SDKs) to be initialized - */ -type SDKModulesType = Record; - -/** - * Properties that are passed to the Context. - */ -export interface ContextInitProps { - /** - * Your Sitecore site name - */ - siteName?: string; - /** - * Sitecore page state (normal, preview, edit) - */ - pageState?: LayoutServicePageState; -} - -/** - * Configuration that is passed to the Context. - */ -export interface ContextConfig { - /** - * Your Sitecore Edge URL - */ - sitecoreEdgeUrl: string; - /** - * Your Sitecore Edge Context ID - */ - sitecoreEdgeContextId: string; - /** - * Your Sitecore site name - */ - siteName: string; - /** - * Software Development Kits (SDKs) to be initialized - */ - sdks: { [module in keyof SDKModules]: SDKModules[module] }; -} - -/** - * Properties that are passed to the Software Development Kit (SDK) initialization function. - */ -type InitSDKProps = Omit, 'sdks'>; - -/** - * Context instance that is used to initialize the application Context and associated Software Development Kits (SDKs). - */ -export class Context { - /** - * Indicates whether the Context and SDK(s) have been initialized - */ - public isInitialized = false; - /** - * The Sitecore Edge URL - */ - public readonly sitecoreEdgeUrl: string; - /** - * The Sitecore Edge Context ID - */ - public readonly sitecoreEdgeContextId: string; - /** - * The Sitecore site name - */ - public siteName: string; - /** - * Sitecore page state (normal, preview, edit) - */ - public pageState: LayoutServicePageState; - /** - * Software Development Kits (SDKs) to be initialized - */ - public readonly sdks: { [module in keyof SDKModules]?: SDKModules[module]['sdk'] } = {}; - /** - * Promises for the SDKs - */ - protected sdkPromises: { [module in keyof SDKModules]?: Promise } = {}; - - protected sdkErrors: { [module in keyof SDKModules]?: string } = {}; - - constructor(protected props: ContextConfig) { - this.sitecoreEdgeUrl = props.sitecoreEdgeUrl; - this.sitecoreEdgeContextId = props.sitecoreEdgeContextId; - this.siteName = props.siteName; - this.pageState = LayoutServicePageState.Normal; - } - - public init(props: ContextInitProps = {}) { - // Context and SDKs are initialized only once - if (this.isInitialized) return; - - this.isInitialized = true; - - if (props.siteName) { - 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); - } - } - - /** - * Retrieves the Software Development Kit (SDK) instance, ensuring it is initialized before returning - * - * @param {string} name SDK name - * @returns initialized SDK - */ - public getSDK = (name: T): Promise => { - if (!this.sdkPromises[name]) { - return Promise.reject(`Unknown SDK '${String(name)}'`); - } else { - return this.sdkPromises[name]!.then((result) => { - return ( - (this.sdkErrors[name] && Promise.reject(this.sdkErrors[name])) || Promise.resolve(result) - ); - }); - } - }; - - /** - * Initializes the Software Development Kit (SDK) - * - * @param {T} name SDK name - * @returns {void} - */ - protected initSDK(name: T): void { - this.sdkPromises[name] = new Promise((resolve) => { - this.props.sdks[name] - .init(this) - .then(() => { - this.sdks[name] = this.props.sdks[name].sdk; - resolve(this.sdks[name]); - }) - .catch((e) => { - // if init rejects, we mark SDK as failed - so getSDK call would reject with a reason - this.sdkErrors[name] = e; - resolve(undefined); - }); - }); - } -} diff --git a/packages/sitecore-jss-nextjs/src/context/index.ts b/packages/sitecore-jss-nextjs/src/context/index.ts deleted file mode 100644 index b7719c3c1b..0000000000 --- a/packages/sitecore-jss-nextjs/src/context/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Context, ContextConfig, SDK } from './context'; diff --git a/packages/sitecore-jss-nextjs/src/index.ts b/packages/sitecore-jss-nextjs/src/index.ts index bff971f82c..e386b7aac5 100644 --- a/packages/sitecore-jss-nextjs/src/index.ts +++ b/packages/sitecore-jss-nextjs/src/index.ts @@ -125,8 +125,6 @@ export { BYOCWrapper }; export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder'; -export { Context, ContextConfig, SDK } from './context'; - export { ComponentFactory, Image, From b516d62e1f16260d797f4d27d62d62d3637f492b Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 23 Oct 2024 15:53:27 -0400 Subject: [PATCH 04/19] use CloudSDK 0.4 on client --- .../src/templates/nextjs-xmcloud/package.json | 4 +-- .../src/components/CdpPageView.tsx | 25 +++++++++---------- packages/sitecore-jss-nextjs/package.json | 8 +++--- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json index 2df3d6d985..3d91eec58d 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json @@ -1,8 +1,8 @@ { "dependencies": { "@sitecore/components": "^1.1.10", - "@sitecore-cloudsdk/core": "^0.4.0-rc.0", - "@sitecore-cloudsdk/events": "^0.4.0-rc.0", + "@sitecore-cloudsdk/core": "^0.4.0", + "@sitecore-cloudsdk/events": "^0.4.0", "@sitecore-feaas/clientside": "^0.5.17" } } diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx index c02f64d33b..9326d1ba7e 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx @@ -4,8 +4,8 @@ import { useSitecoreContext, } from '@sitecore-jss/sitecore-jss-nextjs'; import { useEffect } from 'react'; +import { pageView } from '@sitecore-cloudsdk/events'; import config from 'temp/config'; -import { context } from 'lib/context'; /** * This is the CDP page view component. @@ -47,18 +47,17 @@ const CdpPageView = (): JSX.Element => { scope ); // there are cases where Events SDK will be absent which are expected to reject - context - .getSDK('Events') - .then((Events) => - Events.pageView({ - channel: 'WEB', - currency: 'USD', - page: route.name, - pageVariantId, - language, - }) - ) - .catch((e) => console.debug(e)); + try { + pageView({ + channel: 'WEB', + currency: 'USD', + page: route.name, + pageVariantId, + language, + }); + } catch (e) { + console.debug(e); + } }, [pageState, route, variantId, site]); return <>; diff --git a/packages/sitecore-jss-nextjs/package.json b/packages/sitecore-jss-nextjs/package.json index b86902bce9..9ab98bff5a 100644 --- a/packages/sitecore-jss-nextjs/package.json +++ b/packages/sitecore-jss-nextjs/package.json @@ -29,8 +29,8 @@ "url": "https://github.com/sitecore/jss/issues" }, "devDependencies": { - "@sitecore-cloudsdk/core": "^0.4.0-rc.0", - "@sitecore-cloudsdk/personalize": "^0.4.0-rc.0", + "@sitecore-cloudsdk/core": "^0.4.0", + "@sitecore-cloudsdk/personalize": "^0.4.0", "@types/chai": "^4.3.4", "@types/chai-as-promised": "^7.1.5", "@types/chai-string": "^1.4.2", @@ -66,8 +66,8 @@ "typescript": "~4.9.4" }, "peerDependencies": { - "@sitecore-cloudsdk/events": "^0.4.0-rc.0", - "@sitecore-cloudsdk/personalize": "^0.4.0-rc.0", + "@sitecore-cloudsdk/events": "^0.4.0", + "@sitecore-cloudsdk/personalize": "^0.4.0", "next": "^14.2.7", "react": "^18.2.0", "react-dom": "^18.2.0" From 518fbc25c38ae23f59d78cf496540a6e9d750e78 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 23 Oct 2024 15:54:09 -0400 Subject: [PATCH 05/19] alt approach to FEAAS context --- .../nextjs-xmcloud/src/byoc/index.tsx | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx new file mode 100644 index 0000000000..552bc532f5 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx @@ -0,0 +1,40 @@ +import * as FEAAS from '@sitecore-feaas/clientside/react'; +import '@sitecore/components/context'; +import dynamic from 'next/dynamic'; +import config from 'temp/config'; +import { SitecorePageProps } from 'lib/page-props'; +/** + * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) + * It enables registering components in client-only or SSR/hybrid contexts + * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead + */ + +/* FEAAS.setContextProperties({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: config.sitecoreSiteName, +}); */ + +// Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side +const ClientBundle = dynamic(() => import('./index.client'), { + ssr: false, +}); + +// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts +import './index.hybrid'; + +// As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available +// The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout +FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); + +const BYOCInit = (props: SitecorePageProps): JSX.Element => { + // Set context properties to be available within BYOC components + FEAAS.setContextProperties({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: props.site.name || config.sitecoreSiteName, + }); + return FEAAS.ExternalComponentBundle; +}; + +export default BYOCInit; From e09c7cd20d5c888d6c5de08a17798e6e3325c22d Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 23 Oct 2024 16:05:20 -0400 Subject: [PATCH 06/19] missing CloudSDK init --- .../nextjs-xmcloud/src/Bootstrap.tsx | 20 +++++++++---------- .../src/components/CdpPageView.tsx | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) 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 e7343b9bc3..e0679c6daf 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 @@ -1,5 +1,6 @@ import { SitecorePageProps } from 'lib/page-props'; -import { context } from 'src/lib/context'; +import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; +import '@sitecore-cloudsdk/events/browser'; import config from 'temp/config'; /** @@ -7,15 +8,14 @@ import config from 'temp/config'; * that needs to happen early in the application's lifecycle. */ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { - /** - * Initializes the application Context and associated Software Development Kits (SDKs). - * 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, - pageState: props.layoutData?.sitecore?.context?.pageState, - }); + // Browser ClientSDK init allows for page view events to be tracked + CloudSDK({ + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: props.site.name || config.sitecoreSiteName, + enableBrowserCookie: true, + }) + .addEvents() + .initialize(); return null; }; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx index 9326d1ba7e..63483afdfa 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx @@ -4,7 +4,7 @@ import { useSitecoreContext, } from '@sitecore-jss/sitecore-jss-nextjs'; import { useEffect } from 'react'; -import { pageView } from '@sitecore-cloudsdk/events'; +import { pageView } from '@sitecore-cloudsdk/events/browser'; import config from 'temp/config'; /** From da42eaf1854c5df7007f4fb8ea9a5793b82fb2e0 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 23 Oct 2024 16:33:40 -0400 Subject: [PATCH 07/19] transitionary context-free BYOC adjustment --- .../nextjs-xmcloud/src/Bootstrap.tsx | 17 +++++----- .../nextjs-xmcloud/src/byoc/index.tsx | 31 ++++++++++--------- 2 files changed, 27 insertions(+), 21 deletions(-) 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 e0679c6daf..b16628ecb4 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 @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import { SitecorePageProps } from 'lib/page-props'; import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; import '@sitecore-cloudsdk/events/browser'; @@ -9,13 +10,15 @@ import config from 'temp/config'; */ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { // Browser ClientSDK init allows for page view events to be tracked - CloudSDK({ - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: props.site.name || config.sitecoreSiteName, - enableBrowserCookie: true, - }) - .addEvents() - .initialize(); + useEffect(() => { + CloudSDK({ + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: props.site.name || config.sitecoreSiteName, + enableBrowserCookie: true, + }) + .addEvents() + .initialize(); + }, [props.site]); return null; }; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx index 552bc532f5..11cbd3e1d9 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx @@ -2,7 +2,6 @@ import * as FEAAS from '@sitecore-feaas/clientside/react'; import '@sitecore/components/context'; import dynamic from 'next/dynamic'; import config from 'temp/config'; -import { SitecorePageProps } from 'lib/page-props'; /** * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) * It enables registering components in client-only or SSR/hybrid contexts @@ -15,26 +14,30 @@ import { SitecorePageProps } from 'lib/page-props'; siteName: config.sitecoreSiteName, }); */ -// Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side -const ClientBundle = dynamic(() => import('./index.client'), { - ssr: false, -}); - // Import your hybrid (server rendering with client hydration) components via index.hybrid.ts import './index.hybrid'; -// As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available -// The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout -FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); - -const BYOCInit = (props: SitecorePageProps): JSX.Element => { +const BYOCInit = (): JSX.Element => { + // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side + const ClientBundle = dynamic(() => import('./index.client'), { + ssr: false, + }); + // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available + // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout + FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); // Set context properties to be available within BYOC components FEAAS.setContextProperties({ sitecoreEdgeUrl: config.sitecoreEdgeUrl, sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: props.site.name || config.sitecoreSiteName, + siteName: config.sitecoreSiteName, + sdks: {}, + sdkPromises: {}, + sdkErrors: {}, + getSDK: (): Promise => { + return Promise.reject(`Unknown SDK '${String(name)}'`); + }, }); - return FEAAS.ExternalComponentBundle; + return ; }; -export default BYOCInit; +export default BYOCInit; \ No newline at end of file From e179bfa3e1577789f2e73b616c5e701895395db3 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 28 Oct 2024 11:28:23 -0400 Subject: [PATCH 08/19] better byoc handling --- .../nextjs-xmcloud/src/Bootstrap.tsx | 2 +- .../nextjs-xmcloud/src/byoc/index.ts | 31 +++++++++++++ .../nextjs-xmcloud/src/byoc/index.tsx | 43 ------------------- 3 files changed, 32 insertions(+), 44 deletions(-) create mode 100644 packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts delete mode 100644 packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx 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 b16628ecb4..53fc87f356 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 @@ -13,7 +13,7 @@ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { useEffect(() => { CloudSDK({ sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: props.site.name || config.sitecoreSiteName, + siteName: props.site?.name || config.sitecoreSiteName, enableBrowserCookie: true, }) .addEvents() diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts new file mode 100644 index 0000000000..3afad77cd8 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts @@ -0,0 +1,31 @@ +import * as FEAAS from '@sitecore-feaas/clientside/react'; +import * as Events from '@sitecore-cloudsdk/events/browser'; +import '@sitecore/components/context'; +import dynamic from 'next/dynamic'; +import config from 'temp/config'; +/** + * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) + * It enables registering components in client-only or SSR/hybrid contexts + * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead + */ + +// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts +import './index.hybrid'; + +// Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side +const ClientBundle = dynamic(() => import('./index.client'), { + ssr: false, +}); + +// As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available +// The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout +FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); +// Set context properties to be available within BYOC components +FEAAS.setContextProperties({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: config.sitecoreSiteName, + eventsSDK: Events, +}); + +export default FEAAS.ExternalComponentBundle; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx deleted file mode 100644 index 11cbd3e1d9..0000000000 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as FEAAS from '@sitecore-feaas/clientside/react'; -import '@sitecore/components/context'; -import dynamic from 'next/dynamic'; -import config from 'temp/config'; -/** - * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) - * It enables registering components in client-only or SSR/hybrid contexts - * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead - */ - -/* FEAAS.setContextProperties({ - sitecoreEdgeUrl: config.sitecoreEdgeUrl, - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: config.sitecoreSiteName, -}); */ - -// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts -import './index.hybrid'; - -const BYOCInit = (): JSX.Element => { - // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side - const ClientBundle = dynamic(() => import('./index.client'), { - ssr: false, - }); - // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available - // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout - FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); - // Set context properties to be available within BYOC components - FEAAS.setContextProperties({ - sitecoreEdgeUrl: config.sitecoreEdgeUrl, - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: config.sitecoreSiteName, - sdks: {}, - sdkPromises: {}, - sdkErrors: {}, - getSDK: (): Promise => { - return Promise.reject(`Unknown SDK '${String(name)}'`); - }, - }); - return ; -}; - -export default BYOCInit; \ No newline at end of file From 10e59c8ca6dbdc1bb1a823ec12c24b68d0c24a1b Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 28 Oct 2024 11:28:40 -0400 Subject: [PATCH 09/19] update components, remaining deps --- .../templates/angular-xmcloud/package.json | 4 +- .../src/templates/nextjs-xmcloud/package.json | 2 +- yarn.lock | 48 ++++++++++++------- 3 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json index c7ffff1bba..81d9a1d5c4 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json @@ -8,8 +8,8 @@ "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts" }, "dependencies": { - "@sitecore-cloudsdk/core": "^0.4.0-rc.0", - "@sitecore-cloudsdk/events": "^0.4.0-rc.0", + "@sitecore-cloudsdk/core": "^0.4.0", + "@sitecore-cloudsdk/events": "^0.4.0", "font-awesome": "^4.7.0", "sass": "^1.52.3", "sass-alias": "^1.0.5" diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json index 3d91eec58d..a2952f9d48 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "@sitecore/components": "^1.1.10", + "@sitecore/components": "~2.0.0", "@sitecore-cloudsdk/core": "^0.4.0", "@sitecore-cloudsdk/events": "^0.4.0", "@sitecore-feaas/clientside": "^0.5.17" diff --git a/yarn.lock b/yarn.lock index 1e17f4aa9c..44d4dd9d8d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5997,30 +5997,41 @@ __metadata: languageName: node linkType: hard -"@sitecore-cloudsdk/core@npm:^0.3.1": - version: 0.3.1 - resolution: "@sitecore-cloudsdk/core@npm:0.3.1" +"@sitecore-cloudsdk/core@npm:^0.4.0": + version: 0.4.0 + resolution: "@sitecore-cloudsdk/core@npm:0.4.0" dependencies: - "@sitecore-cloudsdk/utils": ^0.3.1 + "@sitecore-cloudsdk/utils": ^0.4.0 debug: ^4.3.4 - checksum: c19d750b1c194f7575d20b3d46739d7b41545087a9fb794ba44ab9b2d812f2b2035caf19c4f4ba51e6ff628c99f2e4a18b0a7a2578b413c7adb04f3d77f392a3 + checksum: 0640147f4767c6d84f90bbefe011fcc76d2fb47adc078f5017f7c2d686c7eff53a661cd77c4b70315c06b2be0b071c8d279a0db3502bcf5e6e288d1a36dd8896 languageName: node linkType: hard -"@sitecore-cloudsdk/personalize@npm:^0.3.1": - version: 0.3.1 - resolution: "@sitecore-cloudsdk/personalize@npm:0.3.1" +"@sitecore-cloudsdk/events@npm:^0.4.0": + version: 0.4.0 + resolution: "@sitecore-cloudsdk/events@npm:0.4.0" dependencies: - "@sitecore-cloudsdk/core": ^0.3.1 - "@sitecore-cloudsdk/utils": ^0.3.1 - checksum: e48b1429f67be22069bfd8cc6349660ed346877fef5537def5f36c962fd2264969ff02fb2e16333dabc683c4dd0373ae12ce56b97a6850910ab618957b9586d9 + "@sitecore-cloudsdk/core": ^0.4.0 + "@sitecore-cloudsdk/utils": ^0.4.0 + checksum: 0e36c44b4bfd23e71b46f20d9ef852e8a948da3ff9f037e37b8a68f4c36220f48d44c2a032979855a5945ed0b100272f7a477ea1f7fdc6b77eab4a32a1d22657 languageName: node linkType: hard -"@sitecore-cloudsdk/utils@npm:^0.3.1": - version: 0.3.1 - resolution: "@sitecore-cloudsdk/utils@npm:0.3.1" - checksum: c6578ec04823a77aaf7cb6f9cdb842c227698507c38b722db0b9fe1c6b21ee169443cc6b9b8ca77f86c9a4dfc835e1c3b85369079c70ef88e555c8243275d9a6 +"@sitecore-cloudsdk/personalize@npm:^0.4.0": + version: 0.4.0 + resolution: "@sitecore-cloudsdk/personalize@npm:0.4.0" + dependencies: + "@sitecore-cloudsdk/core": ^0.4.0 + "@sitecore-cloudsdk/events": ^0.4.0 + "@sitecore-cloudsdk/utils": ^0.4.0 + checksum: 62668f95a111c1b25668c20fc7cf0bf1958b3aefaf2b9c6cdb79179de4e508b7b466e25654f8efcaefdbffd86a715f210e76f2fda964650f601b0fc9e0579893 + languageName: node + linkType: hard + +"@sitecore-cloudsdk/utils@npm:^0.4.0": + version: 0.4.0 + resolution: "@sitecore-cloudsdk/utils@npm:0.4.0" + checksum: ec5a0611ad4d6ae4b3c2a7542c2021f0b956d2c78e08cab1ff8bd5e6300c3059d5fff6022d0ed2462cd0b4f127d02b5bfabf34e890cddbb51876aebaca3033dc languageName: node linkType: hard @@ -6213,7 +6224,8 @@ __metadata: version: 0.0.0-use.local resolution: "@sitecore-jss/sitecore-jss-nextjs@workspace:packages/sitecore-jss-nextjs" dependencies: - "@sitecore-cloudsdk/personalize": ^0.3.1 + "@sitecore-cloudsdk/core": ^0.4.0 + "@sitecore-cloudsdk/personalize": ^0.4.0 "@sitecore-jss/sitecore-jss": 22.2.0-canary.77 "@sitecore-jss/sitecore-jss-dev-tools": 22.2.0-canary.77 "@sitecore-jss/sitecore-jss-react": 22.2.0-canary.77 @@ -6255,8 +6267,8 @@ __metadata: ts-node: ^10.9.1 typescript: ~4.9.4 peerDependencies: - "@sitecore-cloudsdk/events": ^0.3.1 - "@sitecore-cloudsdk/personalize": ^0.3.1 + "@sitecore-cloudsdk/events": ^0.4.0 + "@sitecore-cloudsdk/personalize": ^0.4.0 next: ^14.2.7 react: ^18.2.0 react-dom: ^18.2.0 From 5f394317281165d2d6b0fb162e6afee65e0444c9 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 28 Oct 2024 13:22:13 -0400 Subject: [PATCH 10/19] Final cleanup, changelog, upgrade guide --- CHANGELOG.md | 7 ++ docs/upgrades/unreleased.md | 64 +++++++++++++++++++ .../templates/angular-xmcloud/package.json | 4 +- .../nextjs-xmcloud/src/byoc/index.ts | 19 +++--- packages/sitecore-jss-nextjs/package.json | 4 +- 5 files changed, 84 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa5b7db9ef..43856d090a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -87,6 +87,13 @@ Our versioning strategy is as follows: * `[templates/angular]``[templates/node-xmcloud-proxy]``[templates/node-headless-ssr-proxy]``[templates/node-headless-ssr-experience-edge]` Adjust out of box .gitignore rules +## 22.2.0 + +### 🛠 Breaking Change + +* `[templates/nextjs-xmcloud]` CloudSDK dependencies have been updated to 0.4.0 ([#1933](https://github.com/Sitecore/jss/pull/1933)) +* `[templates/nextjs-xmcloud]` `@sitecore/components` dependency has been updated to 2.0.0 ([#1933](https://github.com/Sitecore/jss/pull/1933)) + ## 22.1.4 ### 🐛 Bug Fixes diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index ee86877c1d..53951e3945 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -320,3 +320,67 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s * `express` dependency is marked as a peer dependency, so you need to match the required version "^4.19.2". * Copy the `.gitignore` file from fresh latest version proxy app into your existing proxy app, if not already present. + +# Nextjs - XMCloud + +* Update the `@sitecore/components` dependency to `~2.0.0` +* Update the `@sitecore-cloudsdk/events` dependency to `^0.4.0` +* Add the dependency on `@sitecore-cloudsdk/core` with version `^0.4.0`. You should now have the below dependencies present: +``` + "@sitecore/components": "~2.0.0", + "@sitecore-cloudsdk/core": "^0.4.0", + "@sitecore-cloudsdk/events": "^0.4.0", +``` +* Remove the `src/lib/context` folder + +* Update `src/Bootstrap.tsx`: + * Remove the context import: + ``` + import { context } from 'src/lib/context'; + ``` + * Add imports for CloudSDK: + ``` + import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; + import '@sitecore-cloudsdk/events/browser'; + ``` + * Remove the context.init() call: + ``` + context.init({ + siteName: props.site?.name || config.sitecoreSiteName, + pageState: props.layoutData?.sitecore?.context?.pageState, + }); + ``` + * Replace it with CloudSDK initialization, making sure it is performed within `useEffect()`: + ``` + useEffect(() => { + CloudSDK({ + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: props.site?.name || config.sitecoreSiteName, + enableBrowserCookie: true, + }) + .addEvents() + .initialize(); + }, [props.site]); + ``` + +* Update src/byoc/index.ts to make sure Forms are functioning post-upgrade: + * Remove the context import: + ``` + import { context } from 'lib/context'; + ``` + * Add imports for config and CloudSDK: + ``` + import * as Events from '@sitecore-cloudsdk/events/browser'; + import config from 'temp/config'; + ``` + * Replace the existing `FEAAS.setContextProperties()` call with: + ``` + FEAAS.setContextProperties({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: config.sitecoreSiteName, + eventsSDK: Events, + }); + ``` + +* If you have any other instances of using CloudSDK in your app, follow the CloudSDK 0.4.0 upgrade guide. \ No newline at end of file diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json index 81d9a1d5c4..c7ffff1bba 100644 --- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json +++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/package.json @@ -8,8 +8,8 @@ "prepare:proxy-build": "ts-node --project src/tsconfig.webpack-server.json ./scripts/proxy-build.ts" }, "dependencies": { - "@sitecore-cloudsdk/core": "^0.4.0", - "@sitecore-cloudsdk/events": "^0.4.0", + "@sitecore-cloudsdk/core": "^0.4.0-rc.0", + "@sitecore-cloudsdk/events": "^0.4.0-rc.0", "font-awesome": "^4.7.0", "sass": "^1.52.3", "sass-alias": "^1.0.5" diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts index 3afad77cd8..4ce2b5bac7 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts @@ -9,23 +9,24 @@ import config from 'temp/config'; * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead */ -// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts -import './index.hybrid'; +// Set context properties to be available within BYOC components +FEAAS.setContextProperties({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: config.sitecoreSiteName, + eventsSDK: Events, +}); // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side const ClientBundle = dynamic(() => import('./index.client'), { ssr: false, }); +// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts +import './index.hybrid'; + // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); -// Set context properties to be available within BYOC components -FEAAS.setContextProperties({ - sitecoreEdgeUrl: config.sitecoreEdgeUrl, - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: config.sitecoreSiteName, - eventsSDK: Events, -}); export default FEAAS.ExternalComponentBundle; diff --git a/packages/sitecore-jss-nextjs/package.json b/packages/sitecore-jss-nextjs/package.json index 1476524ae6..51b7832218 100644 --- a/packages/sitecore-jss-nextjs/package.json +++ b/packages/sitecore-jss-nextjs/package.json @@ -29,8 +29,6 @@ "url": "https://github.com/sitecore/jss/issues" }, "devDependencies": { - "@sitecore-cloudsdk/core": "^0.4.0", - "@sitecore-cloudsdk/personalize": "^0.4.0", "@types/chai": "^4.3.4", "@types/chai-as-promised": "^7.1.5", "@types/chai-string": "^1.4.2", @@ -66,8 +64,8 @@ "typescript": "~4.9.4" }, "peerDependencies": { - "@sitecore-cloudsdk/events": "^0.4.0", "@sitecore-cloudsdk/personalize": "^0.4.0", + "@sitecore-cloudsdk/core": "^0.4.0", "next": "^14.2.7", "react": "^18.2.0", "react-dom": "^18.2.0" From 5a0f462872ab76f7c7cbb90f2043d4f0bfcbff77 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Tue, 29 Oct 2024 12:16:22 -0400 Subject: [PATCH 11/19] devDeps for backup --- packages/sitecore-jss-nextjs/package.json | 2 ++ yarn.lock | 40 +++++++++++++++++++++++ 2 files changed, 42 insertions(+) diff --git a/packages/sitecore-jss-nextjs/package.json b/packages/sitecore-jss-nextjs/package.json index d9f4768705..bc78cd1cf8 100644 --- a/packages/sitecore-jss-nextjs/package.json +++ b/packages/sitecore-jss-nextjs/package.json @@ -29,6 +29,8 @@ "url": "https://github.com/sitecore/jss/issues" }, "devDependencies": { + "@sitecore-cloudsdk/core": "^0.4.0", + "@sitecore-cloudsdk/personalize": "^0.4.0", "@types/chai": "^4.3.4", "@types/chai-as-promised": "^7.1.5", "@types/chai-string": "^1.4.2", diff --git a/yarn.lock b/yarn.lock index 1e5ddc0a11..18f009bfe8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5997,6 +5997,44 @@ __metadata: languageName: node linkType: hard +"@sitecore-cloudsdk/core@npm:^0.4.0": + version: 0.4.0 + resolution: "@sitecore-cloudsdk/core@npm:0.4.0" + dependencies: + "@sitecore-cloudsdk/utils": ^0.4.0 + debug: ^4.3.4 + checksum: 0640147f4767c6d84f90bbefe011fcc76d2fb47adc078f5017f7c2d686c7eff53a661cd77c4b70315c06b2be0b071c8d279a0db3502bcf5e6e288d1a36dd8896 + languageName: node + linkType: hard + +"@sitecore-cloudsdk/events@npm:^0.4.0": + version: 0.4.0 + resolution: "@sitecore-cloudsdk/events@npm:0.4.0" + dependencies: + "@sitecore-cloudsdk/core": ^0.4.0 + "@sitecore-cloudsdk/utils": ^0.4.0 + checksum: 0e36c44b4bfd23e71b46f20d9ef852e8a948da3ff9f037e37b8a68f4c36220f48d44c2a032979855a5945ed0b100272f7a477ea1f7fdc6b77eab4a32a1d22657 + languageName: node + linkType: hard + +"@sitecore-cloudsdk/personalize@npm:^0.4.0": + version: 0.4.0 + resolution: "@sitecore-cloudsdk/personalize@npm:0.4.0" + dependencies: + "@sitecore-cloudsdk/core": ^0.4.0 + "@sitecore-cloudsdk/events": ^0.4.0 + "@sitecore-cloudsdk/utils": ^0.4.0 + checksum: 62668f95a111c1b25668c20fc7cf0bf1958b3aefaf2b9c6cdb79179de4e508b7b466e25654f8efcaefdbffd86a715f210e76f2fda964650f601b0fc9e0579893 + languageName: node + linkType: hard + +"@sitecore-cloudsdk/utils@npm:^0.4.0": + version: 0.4.0 + resolution: "@sitecore-cloudsdk/utils@npm:0.4.0" + checksum: ec5a0611ad4d6ae4b3c2a7542c2021f0b956d2c78e08cab1ff8bd5e6300c3059d5fff6022d0ed2462cd0b4f127d02b5bfabf34e890cddbb51876aebaca3033dc + languageName: node + linkType: hard + "@sitecore-feaas/clientside@npm:^0.5.6": version: 0.5.9 resolution: "@sitecore-feaas/clientside@npm:0.5.9" @@ -6186,6 +6224,8 @@ __metadata: version: 0.0.0-use.local resolution: "@sitecore-jss/sitecore-jss-nextjs@workspace:packages/sitecore-jss-nextjs" dependencies: + "@sitecore-cloudsdk/core": ^0.4.0 + "@sitecore-cloudsdk/personalize": ^0.4.0 "@sitecore-jss/sitecore-jss": 22.2.0-canary.79 "@sitecore-jss/sitecore-jss-dev-tools": 22.2.0-canary.79 "@sitecore-jss/sitecore-jss-react": 22.2.0-canary.79 From 6347cc0393d6520199d6238376509378e57f2fb8 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Tue, 29 Oct 2024 16:35:03 -0400 Subject: [PATCH 12/19] PR comments --- docs/upgrades/unreleased.md | 35 +++++++++++++++++++ .../src/components/CdpPageView.tsx | 20 +++++------ 2 files changed, 43 insertions(+), 12 deletions(-) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index f6929130be..d439acc955 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -425,6 +425,41 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s }, [props.site]); ``` +* Update `src/components/CDPPageView.tsx`: + * Remove the context import: + ``` + import { context } from 'lib/context'; + ``` + * Add import for CloudSDK: + ``` + import { pageView } from '@sitecore-cloudsdk/events/browser'; + ``` + * Replace the context promise code + ``` + context + .getSDK('Events') + .then((Events) => + Events.pageView({ + channel: 'WEB', + currency: 'USD', + page: route.name, + pageVariantId, + language, + }) + ) + .catch((e) => console.debug(e)); + ``` + with a simplified `pageView` direct call: + ``` + pageView({ + channel: 'WEB', + currency: 'USD', + page: route.name, + pageVariantId, + language, + }).catch((e) => console.debug(e)); + ``` + * Update src/byoc/index.ts to make sure Forms are functioning post-upgrade: * Remove the context import: ``` diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx index 63483afdfa..5ae9ac0f9d 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx @@ -46,18 +46,14 @@ const CdpPageView = (): JSX.Element => { variantId as string, scope ); - // there are cases where Events SDK will be absent which are expected to reject - try { - pageView({ - channel: 'WEB', - currency: 'USD', - page: route.name, - pageVariantId, - language, - }); - } catch (e) { - console.debug(e); - } + // there can be cases where Events are not initialized which are expected to reject + pageView({ + channel: 'WEB', + currency: 'USD', + page: route.name, + pageVariantId, + language, + }).catch((e) => console.debug(e)); }, [pageState, route, variantId, site]); return <>; From 54e554262fef0c425837472de1d686f214920d0a Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 30 Oct 2024 10:21:31 -0400 Subject: [PATCH 13/19] extended boostrap init --- docs/upgrades/unreleased.md | 27 ++++++++++++------- .../nextjs-xmcloud/src/Bootstrap.tsx | 23 ++++++++++------ 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index d439acc955..5864806f18 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -400,10 +400,11 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s ``` import { context } from 'src/lib/context'; ``` - * Add imports for CloudSDK: + * Add imports required for CloudSDK setup: ``` import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; import '@sitecore-cloudsdk/events/browser'; + import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs'; ``` * Remove the context.init() call: ``` @@ -412,17 +413,23 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s pageState: props.layoutData?.sitecore?.context?.pageState, }); ``` - * Replace it with CloudSDK initialization, making sure it is performed within `useEffect()`: + * Replace it with CloudSDK initialization, making sure it is performed within `useEffect()` and only in normal, non-dev mode: ``` useEffect(() => { - CloudSDK({ - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: props.site?.name || config.sitecoreSiteName, - enableBrowserCookie: true, - }) - .addEvents() - .initialize(); - }, [props.site]); + const pageState = props.layoutData?.sitecore?.context.pageState; + if (process.env.NODE_ENV === 'development') + console.debug('Browser Events SDK is not initialized in development environment'); + else if (pageState !== LayoutServicePageState.Normal) + console.debug('Browser Events SDK is not initialized in edit and preview modes'); + else + CloudSDK({ + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: props.site?.name || config.sitecoreSiteName, + enableBrowserCookie: true, + }) + .addEvents() + .initialize(); + }, [props.site, props.layoutData.sitecore.context.pageState]); ``` * Update `src/components/CDPPageView.tsx`: 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 53fc87f356..9896c398c4 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 @@ -3,6 +3,7 @@ import { SitecorePageProps } from 'lib/page-props'; import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; import '@sitecore-cloudsdk/events/browser'; import config from 'temp/config'; +import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs'; /** * The Bootstrap component is the entry point for performing any initialization logic @@ -11,14 +12,20 @@ import config from 'temp/config'; const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { // Browser ClientSDK init allows for page view events to be tracked useEffect(() => { - CloudSDK({ - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: props.site?.name || config.sitecoreSiteName, - enableBrowserCookie: true, - }) - .addEvents() - .initialize(); - }, [props.site]); + const pageState = props.layoutData?.sitecore?.context.pageState; + if (process.env.NODE_ENV === 'development') + console.debug('Browser Events SDK is not initialized in development environment'); + else if (pageState !== LayoutServicePageState.Normal) + console.debug('Browser Events SDK is not initialized in edit and preview modes'); + else + CloudSDK({ + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: props.site?.name || config.sitecoreSiteName, + enableBrowserCookie: true, + }) + .addEvents() + .initialize(); + }, []); return null; }; From 4c0777551ffd3c3c3df406a23f232a60f57a03db Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 30 Oct 2024 16:04:11 -0400 Subject: [PATCH 14/19] only init CSDK once --- .../src/templates/nextjs-xmcloud/src/Bootstrap.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) 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 9896c398c4..fcce528ff7 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 @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { SitecorePageProps } from 'lib/page-props'; import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; import '@sitecore-cloudsdk/events/browser'; @@ -11,13 +11,14 @@ import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs'; */ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { // Browser ClientSDK init allows for page view events to be tracked + const [eventsInitDone, setEventsInitDone] = useState(false); useEffect(() => { const pageState = props.layoutData?.sitecore?.context.pageState; if (process.env.NODE_ENV === 'development') console.debug('Browser Events SDK is not initialized in development environment'); else if (pageState !== LayoutServicePageState.Normal) console.debug('Browser Events SDK is not initialized in edit and preview modes'); - else + else if (!eventsInitDone) { CloudSDK({ sitecoreEdgeContextId: config.sitecoreEdgeContextId, siteName: props.site?.name || config.sitecoreSiteName, @@ -25,7 +26,9 @@ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { }) .addEvents() .initialize(); - }, []); + setEventsInitDone(true); + } + }, [props.site?.name]); return null; }; From edba8969d01523b9096937c6a5f6934d89c5e519 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Wed, 30 Oct 2024 16:10:55 -0400 Subject: [PATCH 15/19] remaining changelog, upgrade --- CHANGELOG.md | 1 + docs/upgrades/22.x/22.2.md | 110 ++++++++++++++++++++++++++++++++++++ docs/upgrades/unreleased.md | 106 ---------------------------------- 3 files changed, 111 insertions(+), 106 deletions(-) create mode 100644 docs/upgrades/22.x/22.2.md diff --git a/CHANGELOG.md b/CHANGELOG.md index ba15a134fe..74f10ea65a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -95,6 +95,7 @@ Our versioning strategy is as follows: * `[templates/nextjs-xmcloud]` CloudSDK dependencies have been updated to 0.4.0 ([#1933](https://github.com/Sitecore/jss/pull/1933)) * `[templates/nextjs-xmcloud]` `@sitecore/components` dependency has been updated to 2.0.0 ([#1933](https://github.com/Sitecore/jss/pull/1933)) +* `[templates/nextjs-xmcloud]` `lib/context` import has been removed. Values from `temp/config` can be used instead. ([#1933](https://github.com/Sitecore/jss/pull/1933)) ## 22.1.4 diff --git a/docs/upgrades/22.x/22.2.md b/docs/upgrades/22.x/22.2.md new file mode 100644 index 0000000000..45838e5830 --- /dev/null +++ b/docs/upgrades/22.x/22.2.md @@ -0,0 +1,110 @@ +# Nextjs - XMCloud + +* Update the `@sitecore/components` dependency to `~2.0.0` +* Update the `@sitecore-cloudsdk/events` dependency to `^0.4.0` +* Add the dependency on `@sitecore-cloudsdk/core` with version `^0.4.0`. You should now have the below dependencies present: +``` + "@sitecore/components": "~2.0.0", + "@sitecore-cloudsdk/core": "^0.4.0", + "@sitecore-cloudsdk/events": "^0.4.0", +``` +* Remove the `src/lib/context` folder + +* Update `src/Bootstrap.tsx`: + * Remove the context import: + ``` + import { context } from 'src/lib/context'; + ``` + * Add imports required for CloudSDK setup: + ``` + import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; + import '@sitecore-cloudsdk/events/browser'; + import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs'; + ``` + * Remove the context.init() call: + ``` + context.init({ + siteName: props.site?.name || config.sitecoreSiteName, + pageState: props.layoutData?.sitecore?.context?.pageState, + }); + ``` + * Replace it with CloudSDK initialization, making sure it is performed within `useEffect()` and only in normal, non-dev mode: + ``` + const [eventsInitDone, setEventsInitDone] = useState(false); + useEffect(() => { + const pageState = props.layoutData?.sitecore?.context.pageState; + if (process.env.NODE_ENV === 'development') + console.debug('Browser Events SDK is not initialized in development environment'); + else if (pageState !== LayoutServicePageState.Normal) + console.debug('Browser Events SDK is not initialized in edit and preview modes'); + else if (!eventsInitDone) { + CloudSDK({ + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: props.site?.name || config.sitecoreSiteName, + enableBrowserCookie: true, + }) + .addEvents() + .initialize(); + setEventsInitDone(true); + } + }, [props.site?.name]); + ``` + +* Update `src/components/CDPPageView.tsx`: + * Remove the context import: + ``` + import { context } from 'lib/context'; + ``` + * Add import for CloudSDK: + ``` + import { pageView } from '@sitecore-cloudsdk/events/browser'; + ``` + * Replace the context promise code + ``` + context + .getSDK('Events') + .then((Events) => + Events.pageView({ + channel: 'WEB', + currency: 'USD', + page: route.name, + pageVariantId, + language, + }) + ) + .catch((e) => console.debug(e)); + ``` + with a simplified `pageView` direct call: + ``` + pageView({ + channel: 'WEB', + currency: 'USD', + page: route.name, + pageVariantId, + language, + }).catch((e) => console.debug(e)); + ``` + +* Update src/byoc/index.ts to make sure Forms are functioning post-upgrade: + * Remove the context import: + ``` + import { context } from 'lib/context'; + ``` + * Add imports for config and CloudSDK: + ``` + import * as Events from '@sitecore-cloudsdk/events/browser'; + import config from 'temp/config'; + ``` + * Replace the existing `FEAAS.setContextProperties()` call with: + ``` + FEAAS.setContextProperties({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + siteName: config.sitecoreSiteName, + eventsSDK: Events, + }); + ``` + +* If you have any other instances of using CloudSDK in your app, follow the CloudSDK 0.4.0 upgrade guide. + +* Remove any other `lib/context` import, if present. If you used `context.getSDK()` method, you can now use CloudSDK method calls directly. If `context` was used to retrieve other values, consider using `temp/config` instead. \ No newline at end of file diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md index 5864806f18..1ba6496bf1 100644 --- a/docs/upgrades/unreleased.md +++ b/docs/upgrades/unreleased.md @@ -382,109 +382,3 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s * `express` dependency is marked as a peer dependency, so you need to match the required version "^4.19.2". * Copy the `.gitignore` file from fresh latest version proxy app into your existing proxy app, if not already present. - -# Nextjs - XMCloud - -* Update the `@sitecore/components` dependency to `~2.0.0` -* Update the `@sitecore-cloudsdk/events` dependency to `^0.4.0` -* Add the dependency on `@sitecore-cloudsdk/core` with version `^0.4.0`. You should now have the below dependencies present: -``` - "@sitecore/components": "~2.0.0", - "@sitecore-cloudsdk/core": "^0.4.0", - "@sitecore-cloudsdk/events": "^0.4.0", -``` -* Remove the `src/lib/context` folder - -* Update `src/Bootstrap.tsx`: - * Remove the context import: - ``` - import { context } from 'src/lib/context'; - ``` - * Add imports required for CloudSDK setup: - ``` - import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; - import '@sitecore-cloudsdk/events/browser'; - import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs'; - ``` - * Remove the context.init() call: - ``` - context.init({ - siteName: props.site?.name || config.sitecoreSiteName, - pageState: props.layoutData?.sitecore?.context?.pageState, - }); - ``` - * Replace it with CloudSDK initialization, making sure it is performed within `useEffect()` and only in normal, non-dev mode: - ``` - useEffect(() => { - const pageState = props.layoutData?.sitecore?.context.pageState; - if (process.env.NODE_ENV === 'development') - console.debug('Browser Events SDK is not initialized in development environment'); - else if (pageState !== LayoutServicePageState.Normal) - console.debug('Browser Events SDK is not initialized in edit and preview modes'); - else - CloudSDK({ - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: props.site?.name || config.sitecoreSiteName, - enableBrowserCookie: true, - }) - .addEvents() - .initialize(); - }, [props.site, props.layoutData.sitecore.context.pageState]); - ``` - -* Update `src/components/CDPPageView.tsx`: - * Remove the context import: - ``` - import { context } from 'lib/context'; - ``` - * Add import for CloudSDK: - ``` - import { pageView } from '@sitecore-cloudsdk/events/browser'; - ``` - * Replace the context promise code - ``` - context - .getSDK('Events') - .then((Events) => - Events.pageView({ - channel: 'WEB', - currency: 'USD', - page: route.name, - pageVariantId, - language, - }) - ) - .catch((e) => console.debug(e)); - ``` - with a simplified `pageView` direct call: - ``` - pageView({ - channel: 'WEB', - currency: 'USD', - page: route.name, - pageVariantId, - language, - }).catch((e) => console.debug(e)); - ``` - -* Update src/byoc/index.ts to make sure Forms are functioning post-upgrade: - * Remove the context import: - ``` - import { context } from 'lib/context'; - ``` - * Add imports for config and CloudSDK: - ``` - import * as Events from '@sitecore-cloudsdk/events/browser'; - import config from 'temp/config'; - ``` - * Replace the existing `FEAAS.setContextProperties()` call with: - ``` - FEAAS.setContextProperties({ - sitecoreEdgeUrl: config.sitecoreEdgeUrl, - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: config.sitecoreSiteName, - eventsSDK: Events, - }); - ``` - -* If you have any other instances of using CloudSDK in your app, follow the CloudSDK 0.4.0 upgrade guide. \ No newline at end of file From aaad4dacb69c1d4c8e959424fb31a00df0d372ae Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Thu, 31 Oct 2024 10:44:55 -0400 Subject: [PATCH 16/19] remove event init state --- .../src/templates/nextjs-xmcloud/src/Bootstrap.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 fcce528ff7..947cda6527 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 @@ -11,23 +11,23 @@ import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs'; */ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { // Browser ClientSDK init allows for page view events to be tracked - const [eventsInitDone, setEventsInitDone] = useState(false); useEffect(() => { const pageState = props.layoutData?.sitecore?.context.pageState; if (process.env.NODE_ENV === 'development') console.debug('Browser Events SDK is not initialized in development environment'); else if (pageState !== LayoutServicePageState.Normal) console.debug('Browser Events SDK is not initialized in edit and preview modes'); - else if (!eventsInitDone) { + else { CloudSDK({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, sitecoreEdgeContextId: config.sitecoreEdgeContextId, siteName: props.site?.name || config.sitecoreSiteName, enableBrowserCookie: true, }) .addEvents() .initialize(); - setEventsInitDone(true); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [props.site?.name]); return null; From 4526b9427a2d6e2452d95d57c750077534e200fa Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Thu, 31 Oct 2024 12:09:50 -0400 Subject: [PATCH 17/19] new approach for BYOC --- CHANGELOG.md | 2 + docs/upgrades/22.x/22.2.md | 39 +++++++++++++---- .../nextjs-xmcloud/src/Bootstrap.tsx | 4 +- .../nextjs-xmcloud/src/byoc/index.ts | 32 -------------- .../nextjs-xmcloud/src/byoc/index.tsx | 42 +++++++++++++++++++ 5 files changed, 77 insertions(+), 42 deletions(-) delete mode 100644 packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts create mode 100644 packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 74f10ea65a..93ba61a91b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -96,6 +96,8 @@ Our versioning strategy is as follows: * `[templates/nextjs-xmcloud]` CloudSDK dependencies have been updated to 0.4.0 ([#1933](https://github.com/Sitecore/jss/pull/1933)) * `[templates/nextjs-xmcloud]` `@sitecore/components` dependency has been updated to 2.0.0 ([#1933](https://github.com/Sitecore/jss/pull/1933)) * `[templates/nextjs-xmcloud]` `lib/context` import has been removed. Values from `temp/config` can be used instead. ([#1933](https://github.com/Sitecore/jss/pull/1933)) +* `[sitecore-jss-nextjs]` `Context` import and `@sitecore-jss/sitecore-jss-nextjs/context` submodule have been removed. ([#1933](https://github.com/Sitecore/jss/pull/1933)) + ## 22.1.4 diff --git a/docs/upgrades/22.x/22.2.md b/docs/upgrades/22.x/22.2.md index 45838e5830..fa3cdfe025 100644 --- a/docs/upgrades/22.x/22.2.md +++ b/docs/upgrades/22.x/22.2.md @@ -85,25 +85,46 @@ }).catch((e) => console.debug(e)); ``` -* Update src/byoc/index.ts to make sure Forms are functioning post-upgrade: +* Update `src/byoc/index.ts` to make sure Forms are functioning post-upgrade: + * Rename the file to `index.tsx` * Remove the context import: ``` import { context } from 'lib/context'; ``` * Add imports for config and CloudSDK: ``` + import React from 'react'; import * as Events from '@sitecore-cloudsdk/events/browser'; import config from 'temp/config'; + import { + LayoutServicePageState, + SitecoreContextReactContext, + } from '@sitecore-jss/sitecore-jss-nextjs'; + ``` + * Remove the existing `FEAAS.setContextProperties()` and `FEAAS.enableNextClientsideComponents` calls + * Add the component defintion that will hold the updated logic: + ``` + const BYOCInit = (): JSX.Element | null => { + const sitecoreContext = React.useContext(SitecoreContextReactContext).context; + // Set context properties to be available within BYOC components + FEAAS.setContextProperties({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + pageState: sitecoreContext?.pageState || LayoutServicePageState.Normal, + siteName: sitecoreContext?.site?.name || config.sitecoreSiteName, + eventsSDK: Events, + }); + + // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available + // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout + FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); + return ; + }; ``` - * Replace the existing `FEAAS.setContextProperties()` call with: + * Replace the default import at the end of the file with + ``` + export default BYOCInit; ``` - FEAAS.setContextProperties({ - sitecoreEdgeUrl: config.sitecoreEdgeUrl, - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: config.sitecoreSiteName, - eventsSDK: Events, - }); - ``` * If you have any other instances of using CloudSDK in your app, follow the CloudSDK 0.4.0 upgrade guide. 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 947cda6527..c69834458b 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 @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useEffect } from 'react'; import { SitecorePageProps } from 'lib/page-props'; import { CloudSDK } from '@sitecore-cloudsdk/core/browser'; import '@sitecore-cloudsdk/events/browser'; @@ -23,6 +23,8 @@ const Bootstrap = (props: SitecorePageProps): JSX.Element | null => { sitecoreEdgeContextId: config.sitecoreEdgeContextId, siteName: props.site?.name || config.sitecoreSiteName, enableBrowserCookie: true, + // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com" + cookieDomain: window.location.hostname.replace(/^www\./, ''), }) .addEvents() .initialize(); diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts deleted file mode 100644 index 4ce2b5bac7..0000000000 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as FEAAS from '@sitecore-feaas/clientside/react'; -import * as Events from '@sitecore-cloudsdk/events/browser'; -import '@sitecore/components/context'; -import dynamic from 'next/dynamic'; -import config from 'temp/config'; -/** - * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) - * It enables registering components in client-only or SSR/hybrid contexts - * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead - */ - -// Set context properties to be available within BYOC components -FEAAS.setContextProperties({ - sitecoreEdgeUrl: config.sitecoreEdgeUrl, - sitecoreEdgeContextId: config.sitecoreEdgeContextId, - siteName: config.sitecoreSiteName, - eventsSDK: Events, -}); - -// Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side -const ClientBundle = dynamic(() => import('./index.client'), { - ssr: false, -}); - -// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts -import './index.hybrid'; - -// As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available -// The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout -FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); - -export default FEAAS.ExternalComponentBundle; diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx new file mode 100644 index 0000000000..b8e8e00d40 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import * as FEAAS from '@sitecore-feaas/clientside/react'; +import * as Events from '@sitecore-cloudsdk/events/browser'; +import '@sitecore/components/context'; +import dynamic from 'next/dynamic'; +import config from 'temp/config'; +import { + LayoutServicePageState, + SitecoreContextReactContext, +} from '@sitecore-jss/sitecore-jss-nextjs'; +/** + * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) + * It enables registering components in client-only or SSR/hybrid contexts + * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead + */ + +// Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side +const ClientBundle = dynamic(() => import('./index.client'), { + ssr: false, +}); + +// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts +import './index.hybrid'; + +const BYOCInit = (): JSX.Element | null => { + const sitecoreContext = React.useContext(SitecoreContextReactContext).context; + // Set context properties to be available within BYOC components + FEAAS.setContextProperties({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, + sitecoreEdgeContextId: config.sitecoreEdgeContextId, + pageState: sitecoreContext?.pageState || LayoutServicePageState.Normal, + siteName: sitecoreContext?.site?.name || config.sitecoreSiteName, + eventsSDK: Events, + }); + + // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available + // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout + FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); + return ; +}; + +export default BYOCInit; From 830c92415d3de630754313e93f55049ac05eda26 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Thu, 31 Oct 2024 13:45:23 -0400 Subject: [PATCH 18/19] adjust byoc once more --- docs/upgrades/22.x/22.2.md | 9 ++------- .../src/templates/nextjs-xmcloud/src/byoc/index.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/docs/upgrades/22.x/22.2.md b/docs/upgrades/22.x/22.2.md index fa3cdfe025..2b6dc46183 100644 --- a/docs/upgrades/22.x/22.2.md +++ b/docs/upgrades/22.x/22.2.md @@ -30,14 +30,13 @@ ``` * Replace it with CloudSDK initialization, making sure it is performed within `useEffect()` and only in normal, non-dev mode: ``` - const [eventsInitDone, setEventsInitDone] = useState(false); useEffect(() => { const pageState = props.layoutData?.sitecore?.context.pageState; if (process.env.NODE_ENV === 'development') console.debug('Browser Events SDK is not initialized in development environment'); else if (pageState !== LayoutServicePageState.Normal) console.debug('Browser Events SDK is not initialized in edit and preview modes'); - else if (!eventsInitDone) { + else { CloudSDK({ sitecoreEdgeContextId: config.sitecoreEdgeContextId, siteName: props.site?.name || config.sitecoreSiteName, @@ -45,7 +44,6 @@ }) .addEvents() .initialize(); - setEventsInitDone(true); } }, [props.site?.name]); ``` @@ -101,7 +99,7 @@ SitecoreContextReactContext, } from '@sitecore-jss/sitecore-jss-nextjs'; ``` - * Remove the existing `FEAAS.setContextProperties()` and `FEAAS.enableNextClientsideComponents` calls + * Remove the existing `FEAAS.setContextProperties()` call * Add the component defintion that will hold the updated logic: ``` const BYOCInit = (): JSX.Element | null => { @@ -115,9 +113,6 @@ eventsSDK: Events, }); - // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available - // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout - FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); return ; }; ``` diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx index b8e8e00d40..311324be4f 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx @@ -19,6 +19,10 @@ const ClientBundle = dynamic(() => import('./index.client'), { ssr: false, }); +// As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available +// The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout +FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); + // Import your hybrid (server rendering with client hydration) components via index.hybrid.ts import './index.hybrid'; @@ -33,9 +37,6 @@ const BYOCInit = (): JSX.Element | null => { eventsSDK: Events, }); - // As long as component bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available - // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout - FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); return ; }; From 2a2710f8b3337f995e51fd3680a2b76ebb4220c1 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Thu, 31 Oct 2024 13:52:16 -0400 Subject: [PATCH 19/19] more upgrade instructions --- docs/upgrades/22.x/22.2.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/upgrades/22.x/22.2.md b/docs/upgrades/22.x/22.2.md index 2b6dc46183..c135874e7c 100644 --- a/docs/upgrades/22.x/22.2.md +++ b/docs/upgrades/22.x/22.2.md @@ -38,9 +38,12 @@ console.debug('Browser Events SDK is not initialized in edit and preview modes'); else { CloudSDK({ + sitecoreEdgeUrl: config.sitecoreEdgeUrl, sitecoreEdgeContextId: config.sitecoreEdgeContextId, siteName: props.site?.name || config.sitecoreSiteName, enableBrowserCookie: true, + // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com" + cookieDomain: window.location.hostname.replace(/^www\./, ''), }) .addEvents() .initialize();