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

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/node-xmcloud-proxy/.env

@@ -0,0 +1,8 @@
+# Your proxy port (default: 3001)
+PROXY_PORT=
+
+# Your proxy server bundle path
+PROXY_BUNDLE_PATH=
+
+# Set the DEBUG environment variable to 'sitecore-jss:*,sitecore-jss:proxy,http-proxy-middleware*' to see all logs:
+#DEBUG=sitecore-jss:*,http-proxy-middleware*

package/dist/templates/node-xmcloud-proxy/README.md

@@ -0,0 +1,36 @@
+# Node XM Cloud Proxy
+
+> Sitecore JSS Proxy for XM Cloud is considered experimental.
+
+[Documentation](<TODO>)
+
+This is a sample setup showing one of how you can configure XM Cloud rendering server.
+
+## Pre-requisites
+
+1. SPA sample supports XM Cloud out of the box.
+
+1. Build your SPA app bundle with `jss build`. The build output should be placed in the `dist` folder.
+
+## Setup
+
+Open `config.js` and specify your application settings.
+
+### Environment Variables
+
+The following environment variables can be set to configure the Proxy sample instead of modifying `config.js`. You can use the `.env` file located in the root of the app or set these directly in the environment (for example, in containers).
+
+| Parameter                              | Description                                                                                                                                |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| `PROXY_BUNDLE_PATH`                        | Path to the JSS SPA app's `server.bundle.js`. Default can be seen in [config.js](./config.js) file.                                                                                                                    |
+| `PROXY_PORT`                              | Optional. Port which will be used when start sample. Default can be seen in [config.js](./config.js) file.                                                             |
+| `DEBUG`                  | Optional. Debug level for the proxy. Set the DEBUG environment variable to 'sitecore-jss:*,proxy*,http-proxy-middleware*' to see all logs.                                                                                                                  |
+
+## Build & run
+
+1. Run `npm install`
+
+1. Run `npm run start`
+
+You should be able to see the following message:
+`server listening on port 3001!`.

package/dist/templates/node-xmcloud-proxy/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "node-xmcloud-sample",
+  "version": "22.1.0-canary",
+  "description": "Node XM Cloud Proxy sample for running XM Cloud JSS SPA apps",
+  "author": {
+    "name": "Sitecore Corporation",
+    "url": "https://jss.sitecore.com"
+  },
+  "scripts": {
+    "start": "ts-node ./src/index.ts"
+  },
+  "dependencies": {
+    "compression": "^1.7.4",
+    "express": "^4.18.2",
+    "dotenv": "^16.0.3",
+    "http-proxy-middleware": "^3.0.0"
+  },
+  "devDependencies": {
+    "@sitecore-jss/sitecore-jss": "~22.1.0-canary",
+    "@types/compression": "^1.7.2",
+    "@types/express": "^4.17.17",
+    "ts-node": "^10.9.1",
+    "typescript": "~4.9.5"
+  }
+}

package/dist/templates/node-xmcloud-proxy/src/config.ts

@@ -0,0 +1,19 @@
+import { Config, ServerBundle } from './types';
+
+/**
+ * The server.bundle.js file from your pre-built SPA app.
+ */
+const bundlePath = process.env.PROXY_BUNDLE_PATH || `../dist/server.bundle`;
+
+const serverBundle: ServerBundle = require(bundlePath);
+
+export const config: Config = {
+  /**
+   * The require'd server.bundle.js file from your pre-built SPA app.
+   */
+  serverBundle,
+  /**
+   * Port which will be used when start the proxy
+   */
+  port: process.env.PROXY_PORT || 3001,
+};

package/dist/templates/node-xmcloud-proxy/src/index.ts

@@ -0,0 +1,161 @@
+import 'dotenv/config';
+import express, { Response } from 'express';
+import compression from 'compression';
+import { createProxyMiddleware } from 'http-proxy-middleware';
+import { debug } from '@sitecore-jss/sitecore-jss';
+import { config } from './config';
+
+const server = express();
+
+const {
+  renderView,
+  parseRouteUrl,
+  dictionaryServiceFactory,
+  layoutServiceFactory,
+} = config.serverBundle;
+
+/**
+ * Required server bundle properties
+ */
+const requiredProperties = [
+  'renderView',
+  'parseRouteUrl',
+  'clientFactory',
+  'siteName',
+  'defaultLanguage',
+  'layoutServiceFactory',
+  'dictionaryServiceFactory',
+  'graphQLEndpointPath',
+  'graphQLEndpoint',
+];
+
+const missingProperties = requiredProperties.filter((property) => !config.serverBundle[property]);
+
+if (missingProperties.length > 0) {
+  throw new Error(
+    `ERROR: The serverBundle should export the following properties: ${missingProperties.join(
+      ', '
+    )}. Please check your server bundle.`
+  );
+}
+
+const layoutService = layoutServiceFactory.create();
+
+const dictionaryService = dictionaryServiceFactory.create();
+
+/**
+ * Parse requested url in order to detect current route and language
+ * @param {string} reqRoute requested route
+ */
+const getRouteParams = (reqRoute: string) => {
+  const routeParams = parseRouteUrl(reqRoute);
+  let lang;
+  let route;
+
+  if (routeParams) {
+    route = routeParams.sitecoreRoute || '/';
+
+    if (!route.startsWith('/')) {
+      route = `/${route}`;
+    }
+
+    lang = routeParams.lang || '';
+  }
+
+  return { route, lang };
+};
+
+/**
+ * Handle unexpected error
+ * @param {Response} res server response
+ * @param {Error} err error
+ */
+const handleError = (res: Response, err: unknown) => {
+  debug.proxy('response error %o', err);
+
+  res.status(500).send('Internal Server Error');
+};
+
+// enable gzip compression for appropriate file types
+server.use(compression());
+
+// turn off x-powered-by http header
+server.settings['x-powered-by'] = false;
+
+// Serve static app assets from local /dist folder
+server.use(
+  '/dist',
+  express.static('dist', {
+    fallthrough: false, // force 404 for unknown assets under /dist
+  })
+);
+
+/**
+ * Proxy browser GraphQL requests to the Sitecore GraphQL endpoint
+ */
+server.use(
+  config.serverBundle.graphQLEndpointPath,
+  createProxyMiddleware({
+    target: config.serverBundle.graphQLEndpoint,
+    changeOrigin: true,
+  })
+);
+
+server.use(async (req, res) => {
+  debug.proxy(`performing SSR for ${req.originalUrl}`);
+
+  try {
+    const { route, lang } = getRouteParams(req.originalUrl);
+
+    if (!route) {
+      debug.proxy('no route detected, returning 404');
+
+      res.sendStatus(404);
+
+      return;
+    }
+
+    // Language is required. In case it's not specified in the requested URL, fallback to the default language from the app configuration.
+    const layoutData = await layoutService.fetchLayoutData(
+      route,
+      lang || config.serverBundle.defaultLanguage
+    );
+
+    const viewBag = { dictionary: {} };
+
+    viewBag.dictionary = await dictionaryService.fetchDictionaryData(
+      layoutData.sitecore.context.language || config.serverBundle.defaultLanguage
+    );
+
+    renderView(
+      (err, result) => {
+        if (err) {
+          handleError(res, err);
+          return;
+        }
+
+        if (!result) {
+          debug.proxy('no result returned from renderView, returning 204');
+
+          res.status(204).send();
+          return;
+        }
+
+        const statusCode = layoutData.sitecore.route ? 200 : 404;
+
+        debug.proxy('sending response with status %s', statusCode);
+
+        res.status(statusCode).send(result.html);
+      },
+      route,
+      layoutData,
+      viewBag
+    );
+  } catch (err) {
+    handleError(res, err);
+  }
+});
+
+server.listen(config.port, () => {
+  console.log(`server listening on port ${config.port}!`);
+});

package/dist/templates/node-xmcloud-proxy/src/types.ts

@@ -0,0 +1,59 @@
+import { GraphQLRequestClientFactory } from '@sitecore-jss/sitecore-jss';
+import { DictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
+import { LayoutService, LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
+
+interface ServerResponse {
+  /**
+   * The rendered HTML to return to the client
+   */
+  html: string;
+  /**
+   * Set the HTTP status code. If not set, the status code returned from Layout Service is returned.
+   */
+  status?: number;
+  /**
+   * Sets a redirect URL, causing the reply to send a HTTP redirect instead of the HTML content.
+   * Note: when using this you must set the status code to 301 or 302.
+   */
+  redirect?: string;
+}
+
+declare type AppRenderer = (
+  callback: (error: Error | null, result: ServerResponse | null) => void,
+  path: string,
+  /**
+   * Data returned by Layout Service. If the route does not exist, null.
+   */
+  layoutData: LayoutServiceData,
+  viewBag: {
+    [key: string]: unknown;
+    dictionary: { [key: string]: string };
+  }
+) => void;
+
+declare type RouteUrlParser = (
+  url: string
+) => {
+  sitecoreRoute?: string;
+  lang?: string;
+  qsParams?: string;
+};
+
+export interface ServerBundle {
+  [key: string]: unknown;
+  renderView: AppRenderer;
+  parseRouteUrl: RouteUrlParser;
+  clientFactory: GraphQLRequestClientFactory;
+  siteName: string;
+  defaultLanguage: string;
+  layoutServiceFactory: { create: () => LayoutService };
+  dictionaryServiceFactory: { create: () => DictionaryService };
+  graphQLEndpointPath: string;
+  graphQLEndpoint: string;
+}
+
+export interface Config {
+  [key: string]: unknown;
+  port: string | number;
+  serverBundle: ServerBundle;
+}

package/dist/templates/node-xmcloud-proxy/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "newLine": "LF",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noFallthroughCasesInSwitch": true,
+    "rootDir": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "strictFunctionTypes": false,
+    "downlevelIteration": true,
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["node_modules", "dist"]
+}

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",