[nextjs] Update Cloudsdk to v0.4

CHANGELOG.md

@@ -89,6 +89,16 @@ 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)) 
+* `[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
 
 ### 🐛 Bug Fixes

docs/upgrades/22.x/22.2.md

@@ -0,0 +1,129 @@
+# 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({
+                    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();
+            }
+        }, [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:
+    * 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()` call
+    * 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,
+            });
+
+            return <FEAAS.ExternalComponentBundle />;
+        };
+    ```
+    * Replace the default import at the end of the file with
+    ```
+        export default BYOCInit;
+    ```
+
+* 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.

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/components": "~2.0.0",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/events": "^0.4.0",
     "@sitecore-feaas/clientside": "^0.5.17"
   }
 }

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx

@@ -1,21 +1,36 @@
+import { useEffect } from 'react';
 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';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs';
 
 /**
  * The Bootstrap component is the entry point for performing any initialization logic
  * 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
+  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({
+        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();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.site?.name]);
 
   return null;
 };

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts → packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.tsx

@@ -1,26 +1,43 @@
+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 { context } from 'lib/context';
+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
  */
 
-// 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;
+// 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,
+  });
+
+  return <FEAAS.ExternalComponentBundle />;
+};
+
+export default BYOCInit;

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/browser';
 import config from 'temp/config';
-import { context } from 'lib/context';
 
 /**
  * This is the CDP page view component.
@@ -46,19 +46,14 @@ const CdpPageView = (): JSX.Element => {
       variantId as string,
       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));
+    // 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 <></>;

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",
+    "@sitecore-cloudsdk/personalize": "^0.4.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/core": "^0.4.0",
+    "@sitecore-cloudsdk/personalize": "^0.4.0",
     "next": "^14.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"