Upgrade to JSS 22.1 (sitecorelabs#175)

davidatfishtank · Aug 21, 2024 · 765cfd9 · 765cfd9
1 parent e560726
commit 765cfd9
Show file tree

Hide file tree

Showing 20 changed files with 1,621 additions and 1,169 deletions.
diff --git a/src/sxastarter/README.md b/src/sxastarter/README.md
@@ -1,5 +1,5 @@
 # Sitecore JSS Next.js Sample Application
 
-[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/221/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
 
 [Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
diff --git a/src/sxastarter/next.config.js b/src/sxastarter/next.config.js
@@ -40,6 +40,11 @@ const nextConfig = {
         hostname: 'edge*.**',
         port: '',
       },
+      {
+        protocol: 'https',
+        hostname: 'xmc-*.**',
+        port: '',
+      },
       {
         protocol: 'https',
         hostname: 'feaas*.blob.core.windows.net',

diff --git a/src/sxastarter/package-lock.json b/src/sxastarter/package-lock.json
diff --git a/src/sxastarter/package.json b/src/sxastarter/package.json
@@ -1,7 +1,7 @@
 {
   "name": "sxastarter",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "22.0.0",
+  "version": "22.1.0",
   "private": true,
   "config": {
     "appName": "sxastarter",
@@ -31,9 +31,9 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-cloudsdk/events": "^0.3.0",
+    "@sitecore-cloudsdk/events": "^0.3.1",
     "@sitecore-feaas/clientside": "^0.5.17",
-    "@sitecore-jss/sitecore-jss-nextjs": "~22.0.0",
+    "@sitecore-jss/sitecore-jss-nextjs": "~22.1.0",
     "@sitecore/components": "^1.1.10",
     "bootstrap": "^5.1.3",
     "font-awesome": "^4.7.0",
@@ -44,7 +44,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.52.3",
-    "sass-alias": "^1.0.5"
+    "sass-alias": "^1.0.5",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.0",
@@ -55,9 +56,9 @@
     "@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.0.0",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.0.0",
-    "@types/node": "^18.11.18",
+    "@sitecore-jss/sitecore-jss-cli": "~22.1.0",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0",
+    "@types/node": "^20.14.2",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.49.0",

diff --git a/src/sxastarter/scripts/generate-config.ts b/src/sxastarter/scripts/generate-config.ts
@@ -52,7 +52,9 @@ const config = {};\n`;
 
   // Set configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || '${config[prop]}',\n`;
+    configText += `config.${prop} = process.env.${constantCase(prop)} || '${config[
+      prop
+    ]?.trim()}';\n`;
   });
 
   configText += `module.exports = config;`;

diff --git a/src/sxastarter/src/Scripts.tsx b/src/sxastarter/src/Scripts.tsx
@@ -1,3 +1,4 @@
+import { EditingScripts } from '@sitecore-jss/sitecore-jss-nextjs';
 // The BYOC bundle imports external (BYOC) components into the app and makes sure they are ready to be used
 import BYOC from 'src/byoc';
 import CdpPageView from 'components/CdpPageView';
@@ -9,6 +10,7 @@ const Scripts = (): JSX.Element => {
       <BYOC />
       <CdpPageView />
       <FEAASScripts />
+      <EditingScripts />
     </>
   );
 };

diff --git a/src/sxastarter/src/assets/sass/components/_component-image.scss b/src/sxastarter/src/assets/sass/components/_component-image.scss
@@ -9,7 +9,7 @@
         display: inline-block;
         max-width: 100%;
     }
-    .image-caption {
+    span {
         display: block;
         font-style: italic;
         font-size: $font-small;

diff --git a/src/sxastarter/src/assets/sass/components/title/_component-title.scss b/src/sxastarter/src/assets/sass/components/title/_component-title.scss
@@ -3,22 +3,28 @@
 
 .title {
   background: $title-bg;
+
   h1,
   .field-title {
-    >a, >span {
-      @include border-basic(bottom, $border-basic-color);
-      font-size: $font-extrabig;
-      margin-bottom: $small-margin;
-      color: $title-color;
-      line-height: normal;
-      padding-bottom: 10px;
-      display: block;
+    @include border-basic(bottom, $border-basic-color);
+    font-size: $font-extrabig;
+    margin-bottom: $small-margin;
+    color: $title-color;
+    line-height: normal;
+    padding-bottom: 10px;
+    display: block;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      color: $title-color-active;
+    }
+
+    > a,
+    > span {
       text-decoration: none;
-      cursor: pointer;
-      &:hover {
-        color: $title-color-active;
-      }
+    }
   }
-}
+
   @import '@sass/variants/title';
 }
diff --git a/src/sxastarter/src/components/Container.tsx b/src/sxastarter/src/components/Container.tsx
@@ -1,34 +1,29 @@
-import React from 'react';
 import {
   ComponentParams,
   ComponentRendering,
   Placeholder,
-  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
-
-const BACKGROUND_REG_EXP = new RegExp(
-  /[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/gi
-);
+import React from 'react';
 
 interface ComponentProps {
   rendering: ComponentRendering & { params: ComponentParams };
   params: ComponentParams;
 }
 
 const DefaultContainer = (props: ComponentProps): JSX.Element => {
-  const { sitecoreContext } = useSitecoreContext();
   const containerStyles = props.params && props.params.Styles ? props.params.Styles : '';
   const styles = `${props.params.GridParameters} ${containerStyles}`.trimEnd();
   const phKey = `container-${props.params.DynamicPlaceholderId}`;
   const id = props.params.RenderingIdentifier;
-  let backgroundImage = props.params.BackgroundImage as string;
+  const mediaUrlPattern = new RegExp(/mediaurl=\"([^"]*)\"/, 'i');
+  const backgroundImage = props.params.BackgroundImage as string;
   let backgroundStyle: { [key: string]: string } = {};
 
-  if (backgroundImage) {
-    const prefix = `${sitecoreContext.pageState !== 'normal' ? '/sitecore/shell' : ''}/-/media/`;
-    backgroundImage = `${backgroundImage?.match(BACKGROUND_REG_EXP)?.pop()?.replace(/-/gi, '')}`;
+  if (backgroundImage && backgroundImage.match(mediaUrlPattern)) {
+    const mediaUrl = backgroundImage.match(mediaUrlPattern)?.[1] || '';
+
     backgroundStyle = {
-      backgroundImage: `url('${prefix}${backgroundImage}')`,
+      backgroundImage: `url('${mediaUrl}')`,
     };
   }
 

diff --git a/src/sxastarter/src/components/Image.tsx b/src/sxastarter/src/components/Image.tsx
@@ -1,16 +1,17 @@
-import React, { CSSProperties } from 'react';
 import {
-  Image as JssImage,
-  Link as JssLink,
-  ImageField,
+  EditMode,
   Field,
+  ImageField,
+  NextImage as JssImage,
+  Link as JssLink,
   LinkField,
   Text,
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import React, { CSSProperties } from 'react';
 
 interface Fields {
-  Image: ImageField;
+  Image: ImageField & { metadata?: { [key: string]: unknown } };
   ImageCaption: Field<string>;
   TargetUrl: LinkField;
 }
@@ -29,22 +30,31 @@ const ImageDefault = (props: ImageProps): JSX.Element => (
 );
 
 export const Banner = (props: ImageProps): JSX.Element => {
+  const id = props.params.RenderingIdentifier;
   const { sitecoreContext } = useSitecoreContext();
   const isPageEditing = sitecoreContext.pageEditing;
+  const isMetadataMode = sitecoreContext?.editMode === EditMode.Metadata;
   const classHeroBannerEmpty =
     isPageEditing && props.fields?.Image?.value?.class === 'scEmptyImage'
       ? 'hero-banner-empty'
       : '';
   const backgroundStyle = (props?.fields?.Image?.value?.src && {
     backgroundImage: `url('${props.fields.Image.value.src}')`,
   }) as CSSProperties;
-  const modifyImageProps = {
-    ...props.fields.Image,
-    editable: props?.fields?.Image?.editable
-      ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
-      .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
-  };
-  const id = props.params.RenderingIdentifier;
+  const modifyImageProps = !isMetadataMode
+    ? {
+        ...props.fields.Image,
+        editable: props?.fields?.Image?.editable
+          ?.replace(`width="${props?.fields?.Image?.value?.width}"`, 'width="100%"')
+          .replace(`height="${props?.fields?.Image?.value?.height}"`, 'height="100%"'),
+      }
+    : {
+        ...props.fields.Image,
+        value: {
+          ...props.fields.Image.value,
+          style: { width: '100%', height: '100%' },
+        },
+      };
 
   return (
     <div

diff --git a/src/sxastarter/src/components/Promo.tsx b/src/sxastarter/src/components/Promo.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Image as JssImage,
+  NextImage as JssImage,
   Link as JssLink,
   RichText as JssRichText,
   ImageField,

diff --git a/src/sxastarter/src/components/Title.tsx b/src/sxastarter/src/components/Title.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import {
   Link,
-  Text,
-  useSitecoreContext,
   LinkField,
+  Text,
   TextField,
+  useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
+import React from 'react';
 
 interface Fields {
   data: {
@@ -17,7 +17,8 @@ interface Fields {
       field: {
         jsonValue: {
           value: string;
-          editable: string;
+          editable?: string;
+          metadata?: { [key: string]: unknown };
         };
       };
     };
@@ -29,7 +30,8 @@ interface Fields {
       field: {
         jsonValue: {
           value: string;
-          editable: string;
+          editable?: string;
+          metadata?: { [key: string]: unknown };
         };
       };
     };
@@ -61,21 +63,16 @@ const ComponentContent = (props: ComponentContentProps) => {
 export const Default = (props: TitleProps): JSX.Element => {
   const datasource = props.fields?.data?.datasource || props.fields?.data?.contextItem;
   const { sitecoreContext } = useSitecoreContext();
-
-  const text: TextField = {
-    value: datasource?.field?.jsonValue?.value,
-    editable: datasource?.field?.jsonValue?.editable,
-  };
+  const text: TextField = datasource?.field?.jsonValue || {};
   const link: LinkField = {
     value: {
       href: datasource?.url?.path,
       title: datasource?.field?.jsonValue?.value,
-      editable: true,
     },
   };
   if (sitecoreContext.pageState !== 'normal') {
     link.value.querystring = `sc_site=${datasource?.url?.siteName}`;
-    if (!text.value) {
+    if (!text?.value) {
       text.value = 'Title field';
       link.value.href = '#';
     }
@@ -84,7 +81,7 @@ export const Default = (props: TitleProps): JSX.Element => {
   return (
     <ComponentContent styles={props.params.styles} id={props.params.RenderingIdentifier}>
       <>
-        {sitecoreContext.pageState === 'edit' ? (
+        {sitecoreContext.pageEditing ? (
           <Text field={text} />
         ) : (
           <Link field={link}>

diff --git a/src/sxastarter/src/lib/dictionary-service-factory.ts b/src/sxastarter/src/lib/dictionary-service-factory.ts
@@ -20,13 +20,6 @@ export class DictionaryServiceFactory {
       ? new GraphQLDictionaryService({
           siteName,
           clientFactory,
-          /*
-            The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current app. 
-            When not provided, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
-            For SXA site(s) and multisite setup there's no need to specify it - it will be autoresolved.
-            Otherwise, if your Sitecore instance only has 1 JSS App (i.e. in a Sitecore XP setup), you can specify the root item ID here.
-            rootItemId: '{GUID}'
-          */
           /*
             GraphQL endpoint may reach its rate limit with the amount of requests it receives and throw a rate limit error.
             GraphQL Dictionary and Layout Services can handle rate limit errors from server and attempt a retry on requests.
@@ -39,6 +32,7 @@ export class DictionaryServiceFactory {
           */
           retries: (process.env.GRAPH_QL_SERVICE_RETRIES &&
             parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) as number,
+          useSiteQuery: true,
         })
       : new RestDictionaryService({
           apiHost: config.sitecoreApiHost,

diff --git a/src/sxastarter/src/lib/graphql-editing-service.ts b/src/sxastarter/src/lib/graphql-editing-service.ts
@@ -0,0 +1,9 @@
+import { GraphQLEditingService } from '@sitecore-jss/sitecore-jss-nextjs/editing';
+import clientFactory from 'lib/graphql-client-factory';
+
+/**
+ * GraphQL Editing Service instance. Used to fetch editing data in Pages preview (editing) Metadata Edit Mode.
+ */
+export const graphQLEditingService = new GraphQLEditingService({
+  clientFactory,
+});
diff --git a/src/sxastarter/src/lib/middleware/plugins/personalize.ts b/src/sxastarter/src/lib/middleware/plugins/personalize.ts
@@ -7,12 +7,12 @@ import { siteResolver } from 'lib/site-resolver';
 
 /**
  * This is the personalize middleware plugin for Next.js.
- * It is used to enable Sitecore personalization of pages in Next.js.
+ * It is used to enable Sitecore personalization and A/B testing of pages in Next.js.
  *
  * The `PersonalizeMiddleware` will
- *  1. Make a call to the Sitecore Experience Edge to get the personalization information about the page.
- *  2. Based on the response, make a call to the Sitecore CDP (with request/user context) to determine the page variant.
- *  3. Rewrite the response to the specific page variant.
+ *  1. Call Sitecore Experience Edge to get the personalization information about the page.
+ *  2. Based on the response, call Sitecore Personalize (with request/user context) to determine the page / component variant(s).
+ *  3. Rewrite the response to the specific page / component variant(s).
  */
 class PersonalizePlugin implements MiddlewarePlugin {
   private personalizeMiddleware: PersonalizeMiddleware;
@@ -29,7 +29,6 @@ class PersonalizePlugin implements MiddlewarePlugin {
           (process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT &&
             parseInt(process.env.PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT)) ||
           400,
-        scope: process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE,
       },
       // Configuration for your Sitecore CDP endpoint
       cdpConfig: {
@@ -40,6 +39,8 @@ class PersonalizePlugin implements MiddlewarePlugin {
             parseInt(process.env.PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT)) ||
           400,
       },
+      // Optional Sitecore Personalize scope identifier.
+      scope: process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE,
       // This function determines if the middleware should be turned off.
       // IMPORTANT: You should implement based on your cookie consent management solution of choice.
       // You may wish to keep it disabled while in development mode.

diff --git a/src/sxastarter/src/lib/next-config/plugins/cors-header.js b/src/sxastarter/src/lib/next-config/plugins/cors-header.js
@@ -22,15 +22,6 @@ const corsHeaderPlugin = (nextConfig = {}) => {
             },
           ],
         },
-        {
-          source: '/api/:path*',
-          headers: [
-            {
-              key: 'Access-Control-Allow-Origin',
-              value: config.sitecoreApiHost.replace(/\/$/, ''),
-            },
-          ],
-        },
       ];
     },
   });