Merge pull request #73 from sitecorelabs/main

Update to JSS 22.2.0

headapps/nextjs-starter/.env

@@ -6,7 +6,7 @@
 # The public URL to use for absolute URLs, which are required when
 # the Next.js app is run within Sitecore editors.
 # This should match the `serverSideRenderingEngineApplicationUrl`
-# in your Sitecore configuration (see \sitecore\config\sxastarter.config).
+# in your Sitecore configuration (see \sitecore\config\nextjs-starter.config).
 # Be sure to update these values accordingly as your public endpoint changes.
 # See https://jss.sitecore.com/docs/fundamentals/services/view-engine
 # If undefined, http://localhost:3000 is used by default.
@@ -15,7 +15,7 @@
 
 # To secure the Sitecore editor endpoint exposed by your Next.js app
 # (`/api/editing/render` by default), a secret token is used. This (client-side)
-# value must match your server-side value (see \sitecore\config\sxastarter.config).
+# value must match your server-side value (see \sitecore\config\nextjs-starter.config).
 # We recommend an alphanumeric value of at least 16 characters.
 JSS_EDITING_SECRET=
 

headapps/nextjs-starter/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nextjs-starter",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "22.1.3",
+  "version": "22.2.0",
   "private": true,
   "config": {
     "appName": "nextjs-starter",
@@ -31,10 +31,11 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-cloudsdk/events": "^0.3.1",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/events": "^0.4.0",
     "@sitecore-feaas/clientside": "^0.5.17",
-    "@sitecore-jss/sitecore-jss-nextjs": "~22.1.3",
-    "@sitecore/components": "^1.1.10",
+    "@sitecore-jss/sitecore-jss-nextjs": "~22.2.0",
+    "@sitecore/components": "~2.0.0",
     "bootstrap": "^5.1.3",
     "font-awesome": "^4.7.0",
     "graphql": "~15.8.0",
@@ -56,8 +57,8 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-resolvers": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@sitecore-jss/sitecore-jss-cli": "~22.1.3",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.3",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.0",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0",
     "@types/node": "^20.14.2",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.5",

headapps/nextjs-starter/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;
 };

headapps/nextjs-starter/src/assets/sass/components/_component-image.scss

@@ -15,4 +15,4 @@
         font-size: $font-small;
         color: $image-caption-color;
     }
-}
+}

headapps/nextjs-starter/src/assets/sass/components/title/_component-title.scss

@@ -27,4 +27,4 @@
   }
 
   @import '@sass/variants/title';
-}
+}

headapps/nextjs-starter/src/byoc/index.ts → headapps/nextjs-starter/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;

headapps/nextjs-starter/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 <></>;