create-sitecore-jss 22.1.0-canary.9 → 22.2.0-canary.1

package/dist/templates/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
   "config": {
     "appName": "<%- appName %>",
@@ -48,50 +48,50 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@angular/animations": "~16.2.10",
-    "@angular/common": "~16.2.10",
-    "@angular/compiler": "~16.2.10",
-    "@angular/core": "~16.2.10",
-    "@angular/forms": "~16.2.10",
-    "@angular/platform-browser": "~16.2.10",
-    "@angular/platform-browser-dynamic": "~16.2.10",
-    "@angular/platform-server": "~16.2.10",
-    "@angular/router": "~16.2.10",
+    "@angular/animations": "~17.3.11",
+    "@angular/common": "~17.3.11",
+    "@angular/compiler": "~17.3.11",
+    "@angular/core": "~17.3.11",
+    "@angular/forms": "~17.3.11",
+    "@angular/platform-browser": "~17.3.11",
+    "@angular/platform-browser-dynamic": "~17.3.11",
+    "@angular/platform-server": "~17.3.11",
+    "@angular/router": "~17.3.11",
     "@apollo/client": "^3.3.12",
-    "@ngx-translate/core": "~14.0.0",
-    "@ngx-translate/http-loader": "~7.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "~22.1.0-canary",
-    "apollo-angular": "~5.0.2",
-    "bootstrap": "^5.3.1",
-    "core-js": "~3.32.1",
+    "@ngx-translate/core": "~15.0.0",
+    "@ngx-translate/http-loader": "~8.0.0",
+    "@sitecore-jss/sitecore-jss-angular": "~22.2.0-canary",
+    "apollo-angular": "~6.0.0",
+    "bootstrap": "^5.3.3",
+    "core-js": "~3.37.1",
     "graphql": "15.5.0",
     "graphql-tag": "~2.11.0",
     "lodash": "^4.17.21",
     "rxjs": "~7.8.1",
-    "tslib": "^2.1.0",
-    "zone.js": "~0.13.1"
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^16.0.1",
-    "@angular-devkit/build-angular": "^16.2.10",
-    "@angular-eslint/builder": "^16.3.1",
-    "@angular-eslint/eslint-plugin": "^16.3.1",
-    "@angular-eslint/eslint-plugin-template": "^16.3.1",
-    "@angular-eslint/schematics": "^16.3.1",
-    "@angular-eslint/template-parser": "^16.3.1",
-    "@angular/cli": "~16.2.10",
-    "@angular/compiler-cli": "~16.2.10",
-    "@angular/language-service": "~16.2.10",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-cli": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
+    "@angular-builders/custom-webpack": "^17.0.2",
+    "@angular-devkit/build-angular": "^17.3.8",
+    "@angular-eslint/builder": "^17.5.2",
+    "@angular-eslint/eslint-plugin": "^17.5.2",
+    "@angular-eslint/eslint-plugin-template": "^17.5.2",
+    "@angular-eslint/schematics": "^17.5.2",
+    "@angular-eslint/template-parser": "^17.5.2",
+    "@angular/cli": "~17.3.8",
+    "@angular/compiler-cli": "~17.3.11",
+    "@angular/language-service": "~17.3.11",
+    "@sitecore-jss/sitecore-jss-angular-schematics": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
     "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "~12.7.9",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
-    "body-parser": "~1.19.0",
+    "@types/node": "~20.14.10",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "body-parser": "~1.20.2",
     "chalk": "~4.1.0",
     "chokidar": "^3.5.2",
     "codelyzer": "~6.0.1",
@@ -102,9 +102,9 @@
     "dotenv": "^16.0.0",
     "dotenv-webpack": "^7.1.0",
     "enhanced-resolve": "5.7.0",
-    "eslint": "^7.22.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsdoc": "32.3.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "express": "~4.17.1",
     "fs-extra": "~9.1.0",
@@ -120,8 +120,8 @@
     "move-cli": "^2.0.0",
     "npm-run-all": "~4.1.5",
     "protractor": "^7.0.0",
-    "ts-node": "~10.9.0",
-    "typescript": "~4.9.5",
+    "ts-node": "~10.9.2",
+    "typescript": "~5.2.2",
     "yaml-lint": "^1.2.4"
   }
 }

package/dist/templates/angular/server.bundle.ts

@@ -2,7 +2,7 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
 import 'reflect-metadata';
-import 'zone.js/dist/zone-node';
+import 'zone.js';
 import { JssRouteBuilderService } from './src/app/routing/jss-route-builder.service';
 import { environment } from './src/environments/environment';
 import { AppServerModule, renderModule } from './src/main.server';

package/dist/templates/angular/src/polyfills.ts

@@ -47,16 +47,12 @@ import 'core-js/es/reflect';
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /** Polyfill for node.js process **/
-(window as any).process = { env: { DEBUG: undefined }, };
-
-
+(window as any).process = { env: { DEBUG: undefined } };
 
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS

package/dist/templates/angular/src/test.ts

@@ -1,11 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

package/dist/templates/nextjs/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',

package/dist/templates/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -25,13 +25,14 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-nextjs": "~22.2.0-canary",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
     "next": "^14.1.0",
     "next-localization": "^0.12.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^5.0.0",
@@ -42,9 +43,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.1.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
-    "@types/node": "^18.11.18",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@types/node": "^20.14.2",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.49.0",

package/dist/templates/nextjs/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(/\/$/, ''),
-            },
-          ],
-        },
       ];
     },
   });

package/dist/templates/nextjs/src/pages/[[...path]].tsx

@@ -7,10 +7,8 @@ import { GetServerSideProps } from 'next';
 import NotFound from 'src/NotFound';
 import Layout from 'src/Layout';
 import {
-  RenderingType,
   SitecoreContext,
   ComponentPropsContext,
-  EditingComponentPlaceholder,
   <% if (prerender === 'SSG') { -%>
   StaticPath,
   <% } -%>
@@ -36,8 +34,6 @@ const SitecorePage = ({ notFound, componentProps, layoutData, headLinks }: Sitec
   }
 
   const isEditing = layoutData.sitecore.context.pageEditing;
-  const isComponentRendering =
-    layoutData.sitecore.context.renderingType === RenderingType.Component;
 
   return (
     <ComponentPropsContext value={componentProps}>
@@ -45,15 +41,7 @@ const SitecorePage = ({ notFound, componentProps, layoutData, headLinks }: Sitec
         componentFactory={componentBuilder.getComponentFactory({ isEditing })}
         layoutData={layoutData}
       >
-        {/*
-          Sitecore Pages supports component rendering to avoid refreshing the entire page during component editing.
-          If you are using Experience Editor only, this logic can be removed, Layout can be left.
-        */}
-        {isComponentRendering ? (
-          <EditingComponentPlaceholder rendering={layoutData.sitecore.route} />
-        ) : (
-          <Layout layoutData={layoutData} headLinks={headLinks} />
-        )}
+        <Layout layoutData={layoutData} headLinks={headLinks} />
       </SitecoreContext>
     </ComponentPropsContext>
   );

package/dist/templates/nextjs-styleguide/package.json

@@ -4,7 +4,7 @@
     "nprogress": "~0.2.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
     "@types/nprogress": "^0.2.0"
   },
   "scripts": {

package/dist/templates/nextjs-sxa/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';
 }

package/dist/templates/nextjs-sxa/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,8 +30,10 @@ 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'
@@ -38,13 +41,20 @@ export const Banner = (props: ImageProps): JSX.Element => {
   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

package/dist/templates/nextjs-sxa/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,

package/dist/templates/nextjs-sxa/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}>

package/dist/templates/nextjs-xmcloud/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@sitecore/components": "^1.1.10",
-    "@sitecore-cloudsdk/events": "^0.3.0",
+    "@sitecore-cloudsdk/events": "^0.3.1",
     "@sitecore-feaas/clientside": "^0.5.17"
   }
 }

package/dist/templates/nextjs-xmcloud/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 />
     </>
   );
 };

package/dist/templates/nextjs-xmcloud/src/lib/dictionary-service-factory.ts

@@ -0,0 +1,46 @@
+import {
+  DictionaryService,
+  RestDictionaryService,
+  GraphQLDictionaryService,
+  constants,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import config from 'temp/config';
+import clientFactory from 'lib/graphql-client-factory';
+
+/**
+ * Factory responsible for creating a DictionaryService instance
+ */
+export class DictionaryServiceFactory {
+  /**
+   * @param {string} siteName site name
+   * @returns {DictionaryService} service instance
+   */
+  create(siteName: string): DictionaryService {
+    return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
+      ? new GraphQLDictionaryService({
+          siteName,
+          clientFactory,
+          /*
+            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.
+            For this, specify the number of 'retries' the GraphQL client will attempt.
+            By default it is set to 3. You can disable it by configuring it to 0 for this service.
+
+            Additionally, you have the flexibility to customize the retry strategy by passing a 'retryStrategy'.
+            By default it uses the `DefaultRetryStrategy` with exponential back-off factor of 2 and handles error codes 429,
+            502, 503, 504, 520, 521, 522, 523, 524, 'ECONNRESET', 'ETIMEDOUT' and 'EPROTO' . You can use this class or your own implementation of `RetryStrategy`.
+          */
+          retries: (process.env.GRAPH_QL_SERVICE_RETRIES &&
+            parseInt(process.env.GRAPH_QL_SERVICE_RETRIES, 10)) as number,
+          useSiteQuery: true,
+        })
+      : new RestDictionaryService({
+          apiHost: config.sitecoreApiHost,
+          apiKey: config.sitecoreApiKey,
+          siteName,
+        });
+  }
+}
+
+/** DictionaryServiceFactory singleton */
+export const dictionaryServiceFactory = new DictionaryServiceFactory();

package/dist/templates/nextjs-xmcloud/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,
+});

package/dist/templates/nextjs-xmcloud/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;
@@ -30,7 +30,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: {
@@ -41,6 +40,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.

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/personalize.ts

@@ -16,12 +16,16 @@ class PersonalizePlugin implements Plugin {
         ? context.params.path.join('/')
         : context.params.path ?? '/';
 
-    // Get variant for personalization (from path)
+    // Get variant(s) for personalization (from path)
     const personalizeData = getPersonalizedRewriteData(path);
 
-    // Modify layoutData to use specific variant instead of default
+    // Modify layoutData to use specific variant(s) instead of default
     // This will also set the variantId on the Sitecore context so that it is accessible here
-    personalizeLayout(props.layoutData, personalizeData.variantId);
+    personalizeLayout(
+      props.layoutData,
+      personalizeData.variantId,
+      personalizeData.componentVariantIds
+    );
 
     return props;
   }

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts

@@ -0,0 +1,72 @@
+import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
+import {
+  SiteInfo,
+  personalizeLayout,
+  getGroomedVariantIds,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  editingDataService,
+  isEditingMetadataPreviewData,
+} from '@sitecore-jss/sitecore-jss-nextjs/editing';
+import { SitecorePageProps } from 'lib/page-props';
+import { graphQLEditingService } from 'lib/graphql-editing-service';
+import { Plugin } from '..';
+
+class PreviewModePlugin implements Plugin {
+  order = 1;
+
+  async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
+    if (!context.preview) return props;
+
+    // If we're in Pages preview (editing) Metadata Edit Mode, prefetch the editing data
+    if (isEditingMetadataPreviewData(context.previewData)) {
+      const { site, itemId, language, version, variantIds } = context.previewData;
+
+      const data = await graphQLEditingService.fetchEditingData({
+        siteName: site,
+        itemId,
+        language,
+        version,
+      });
+
+      if (!data) {
+        throw new Error(
+          `Unable to fetch editing data for preview ${JSON.stringify(context.previewData)}`
+        );
+      }
+
+      props.site = data.layoutData.sitecore.context.site as SiteInfo;
+      props.locale = context.previewData.language;
+      props.layoutData = data.layoutData;
+      props.dictionary = data.dictionary;
+      props.headLinks = [];
+      const personalizeData = getGroomedVariantIds(variantIds);
+      personalizeLayout(
+        props.layoutData,
+        personalizeData.variantId,
+        personalizeData.componentVariantIds
+      );
+
+      return props;
+    }
+
+    // If we're in preview (editing) Chromes Edit Mode, use data already sent along with the editing request
+    // This mode is used by the Experience Editor.
+    // In Pages it's treated as a legacy mode but still supported for backward compatibility.
+    const data = await editingDataService.getEditingData(context.previewData);
+    if (!data) {
+      throw new Error(
+        `Unable to get editing data for preview ${JSON.stringify(context.previewData)}`
+      );
+    }
+    props.site = data.layoutData.sitecore.context.site as SiteInfo;
+    props.locale = data.language;
+    props.layoutData = data.layoutData;
+    props.dictionary = data.dictionary;
+    props.headLinks = [];
+
+    return props;
+  }
+}
+
+export const previewModePlugin = new PreviewModePlugin();

package/dist/templates/nextjs-xmcloud/src/pages/api/editing/render.ts

@@ -0,0 +1,46 @@
+import { EditingRenderMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/editing';
+
+/**
+ * This Next.js API route is used to handle GET and POST requests from Sitecore editors.
+ * GET requests are used with Metadata editing mode while POST ones are used with Chromes(legacy) mode.
+ * This route should match the `serverSideRenderingEngineEndpointUrl` in your Sitecore configuration,
+ * which is set to "http://<rendering_host>/api/editing/render" by default (see the settings item under /sitecore/content/<your/site/path>/Settings/Site Grouping).
+ *
+ * For Metadata mode, the `EditingRenderMiddleware` will
+ *  1. Extract data about the route we need to rendr from the Sitecore editor GET request
+ *  2. Enable Next.js Preview Mode, passing the route data as preview data
+ *  3. Redirect the request to the route, passing along the Preview Mode cookies.
+ *     This allows retrieval of the editing data in preview context (via an `EditingDataService`) - see `SitecorePagePropsFactory`
+ *  4. The redirected request will render the page with editing markup in place
+ * 
+ * For Chromes(legacy) mode, the `EditingRenderMiddleware` will
+ *  1. Extract editing data from the Sitecore editor POST request
+ *  2. Stash this data (for later use in the page render request) via an `EditingDataService`, which returns a key for retrieval
+ *  3. Enable Next.js Preview Mode, passing our stashed editing data key as preview data
+ *  4. Invoke the actual page render request, passing along the Preview Mode cookies.
+ *     This allows retrieval of the editing data in preview context (via an `EditingDataService`) - see `SitecorePagePropsFactory`
+ *  5. Return the rendered page HTML to the Sitecore editor
+ * 
+ */
+
+/**
+ * [Chromes mode only] For Vercel deployments: 
+ * if you experience crashes in editing, you may need to use VercelEditingDataCache or a custom Redis data cache implementation with EditingRenderMiddleware
+ * Please refer to documentation for a detailed guide.
+ */
+
+// [Chromes mode only] Bump body size limit (1mb by default) and disable response limit for Sitecore editor payloads
+// See https://nextjs.org/docs/api-routes/request-helpers#custom-config
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '2mb',
+    },
+    responseLimit: false,
+  },
+};
+
+// Wire up the EditingRenderMiddleware handler
+const handler = new EditingRenderMiddleware().getHandler();
+
+export default handler;

package/dist/templates/node-headless-ssr-experience-edge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-experience-edge-sample",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "description": "Node server-side-rendering sample for running JSS apps under Node hosting using Experience Edge",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -19,7 +19,7 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3"

package/dist/templates/node-headless-ssr-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-proxy-sample",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "description": "Node server-side-rendering proxy sample for running JSS apps under Node hosting",
   "scripts": {
     "start": "ts-node ./src/index.ts"
@@ -19,8 +19,8 @@
   "homepage": "https://jss.sitecore.com",
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-proxy": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-proxy": "~22.2.0-canary",
     "agentkeepalive": "^4.2.1",
     "compression": "~1.7.4",
     "express": "~4.19.2",
@@ -31,7 +31,7 @@
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.17",
     "@types/memory-cache": "^0.2.2",
-    "@types/node": "^18.14.0",
+    "@types/node": "^20.14.2",
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },

package/dist/templates/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -28,7 +28,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@sitecore-jss/sitecore-jss-react": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-react": "~22.2.0-canary",
     "axios": "^1.2.0",
     "bootstrap": "^5.2.3",
     "cross-fetch": "^3.1.5",
@@ -53,9 +53,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "~7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-rendering-host": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-rendering-host": "~22.2.0-canary",
     "babel-loader": "~9.1.0",
     "babel-preset-react-app": "~10.0.1",
     "chalk": "~4.1.2",

package/dist/templates/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "description": "A basic React Native app utilizing Sitecore JavaScript Services",
   "config": {
     "appName": "<%- appName %>",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
-    "@sitecore-jss/sitecore-jss-react-native": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-react-native": "~22.2.0-canary",
     "prop-types": "^15.6.0",
     "react": "16.13.1",
     "react-native": "^0.63.4",
@@ -37,8 +37,8 @@
   },
   "private": true,
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-cli": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
     "babel-plugin-inline-replace-variables": "^1.3.1",

package/dist/templates/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.1.0-canary",
+  "version": "22.2.0-canary",
   "description": "Application utilizing Sitecore JavaScript Services and Vue (vue-cli).",
   "private": true,
   "config": {
@@ -45,7 +45,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.4",
     "@panter/vue-i18next": "~0.15.2",
-    "@sitecore-jss/sitecore-jss-vue": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-vue": "~22.2.0-canary",
     "@vue/apollo-composable": "4.0.0-beta.2",
     "@vue/apollo-option": "^4.0.0-alpha.20",
     "@vue/apollo-ssr": "^4.0.0-alpha.18",
@@ -64,8 +64,8 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@babel/register": "7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~22.1.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.1.0-canary.9",
+  "version": "22.2.0-canary.1",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -12,7 +12,7 @@
     "coverage": "nyc npm test"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "repository": {
     "type": "git",
@@ -49,7 +49,7 @@
     "@types/inquirer": "^9.0.3",
     "@types/minimist": "^1.2.2",
     "@types/mocha": "^10.0.1",
-    "@types/node": "^18.11.18",
+    "@types/node": "^20.14.2",
     "@types/sinon": "10.0.6",
     "@types/sinon-chai": "^3.2.9",
     "chai": "^4.3.7",
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "9b249f8d03fb9d74e74f74f3040fc2668137bdcc"
+  "gitHead": "7dd64ce5a019e4579596beae31315db262a4700f"
 }