Merge branch 'dev' into feature/JSS-100

Sitecore · Apr 26, 2024 · 181237a · 181237a
2 parents 855df13 + e4f06f6
commit 181237a
Show file tree

Hide file tree

Showing 399 changed files with 4,480 additions and 5,355 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,13 +11,36 @@ Our versioning strategy is as follows:
 
 ## Unreleased
 
+## 22.0.0
+
 ### 🛠 Breaking Changes
 
-[sitecore-jss] Switch to edge site query for XP and gets config sites + sxa sites (ignoring website)
+* `[sitecore-jss]` Switch to edge site query for XP and gets config sites + sxa sites (ignoring website) ([#1772](https://github.com/Sitecore/jss/pull/1772))
   * Previously introduced Boolean `useSiteQuery` switch for XMCloud users has been removed.
   * Search query usage has been removed.
   * If you have any non-nextjs sites they should filter them out in multisite config plugin
 
+* `[sitecore-jss-nextjs]` `[templates/nextjs-xmcloud]` CloudSDK dependencies are updated to version ^0.3.0 ([#1779](https://github.com/Sitecore/jss/pull/1779))
+  * Please ensure `@sitecore-cloudsdk/events` dependency is updated
+
+* `[sitecore-jss-nextjs]` Deprecated exports have been removed ([#1780](https://github.com/Sitecore/jss/pull/1780)):
+  * `sitecore-jss-nextjs` no longer exports `isEditorActive`, `resetEditorChormes`, `resolveUrl`, `handleEditorFastRefresh`, `getPublicUrl` functions. Use `sitecore-jss-nextjs/utils` instead.
+  * `getFEAASLibraryStylesheetLinks` function has been removed in favor of `getComponentLibraryStylesheetLinks`
+
+* `[sitecore-jss-react]` `[templates/react]` Deprecated `media` prop is removed from Image component. Use `field` prop instead ([#1780](https://github.com/Sitecore/jss/pull/1780))([#1785](https://github.com/Sitecore/jss/pull/1785)).
+
+* `[templates/react]` `[templates/angular]` `[templates/vue]` `[templates/node-headless-ssr-experience-edge]` `[sitecore-jss-react]` `[sitecore-jss-nextjs]` ([#1783](https://github.com/Sitecore/jss/pull/1783)):
+  * GraphQL-based services can now only be initialized with clientFactory parameter. Previously deprecated option of providing endpoint and apiKey has been removed
+  * Removed deprecated _defaultProps_ react component property
+
+* `[templates/nextjs]` GraphQL-based services can now only be initialized with clientFactory parameter. Previously deprecated option of providing endpoint and apiKey has been removed ([#1780](https://github.com/Sitecore/jss/pull/1780)).
+
+* `[templates/nextjs]` `[templates/react]` `[templates/vue]` `[templates/angular]` Deprecated JSS_APP_NAME environment variable has been removed ([#1780](https://github.com/Sitecore/jss/pull/1780)).
+
+### 🧹 Chores
+
+* Security vulnerabilities audit ([1778](https://github.com/Sitecore/jss/pull/1778))
+
 ## 21.7.1
 
 ### 🐛 Bug Fixes
@@ -71,6 +94,11 @@ Our versioning strategy is as follows:
 
 ## 21.6.4
 
+### 🎉 New Features & Improvements
+* `[templates/nextjs]` Add support for `.env.*` files during bootstrap process, matching what Next.js supports OOTB for build/runtime. ([#1741](https://github.com/Sitecore/jss/pull/1741))
+* `[sitecore-jss]` Export `ClientError`. ([#1738](https://github.com/Sitecore/jss/pull/1738))
+* `[sitecore-jss]` Enable the Layout, dictionary and ErrorPages service to use custom `retryStrategy`. ([#1749](https://github.com/Sitecore/jss/pull/1749)) ([#1751](https://github.com/Sitecore/jss/pull/1751))
+
 ### 🐛 Bug Fixes
 
 * `[templates/nextjs]` Exclude ComponentProps functions from the client bundle ([#1753](https://github.com/Sitecore/jss/pull/1753))

diff --git a/docs/upgrades/unreleased.md b/docs/upgrades/unreleased.md
@@ -1,24 +1 @@
 ## Unreleased
-
-### nextjs
-
-### nextjs-xmcloud
-
-### nextjs-sxa
-
-### nextjs-multisite
-
-* **Update** packages\create-sitecore-jss\src\templates\nextjs-multisite\scripts\config\plugins\multisite.ts
-
-```
-//Remove
-useSiteQuery: true,
-```
-
-### nextjs-styleguide
-
-### react
-
-### angular
-
-### vue
diff --git a/lerna.json b/lerna.json
@@ -1,7 +1,7 @@
 {
   "lerna": "3.22.1",
   "packages": ["packages/*", "samples/*"],
-  "version": "21.8.0-canary.5",
+  "version": "22.1.0-canary.5",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/packages/create-sitecore-jss/README.md b/packages/create-sitecore-jss/README.md
@@ -5,6 +5,6 @@ This module is provided as a part of Sitecore JavaScript Rendering SDK (JSS). It
 <!---
 @TODO: Update to next version docs before release
 -->
-[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdks--jss-.html)
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/sitecore-javascript-rendering-sdks--jss-.html)
 
 [Documentation (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdks--jss-.html)
diff --git a/packages/create-sitecore-jss/package.json b/packages/create-sitecore-jss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "21.8.0-canary.5",
+  "version": "22.1.0-canary.5",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {

diff --git a/packages/create-sitecore-jss/src/templates/angular/README.md b/packages/create-sitecore-jss/src/templates/angular/README.md
@@ -3,7 +3,7 @@
 <!---
 @TODO: Update to next version docs before release
 -->
-[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-angular.html)
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-angular.html)
 
 
 ## App setup

diff --git a/packages/create-sitecore-jss/src/templates/angular/package.json b/packages/create-sitecore-jss/src/templates/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "21.8.0-canary",
+  "version": "22.1.0-canary",
   "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
   "config": {
     "appName": "<%- appName %>",
@@ -60,7 +60,7 @@
     "@apollo/client": "^3.3.12",
     "@ngx-translate/core": "~14.0.0",
     "@ngx-translate/http-loader": "~7.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "~21.8.0-canary",
+    "@sitecore-jss/sitecore-jss-angular": "~22.1.0-canary",
     "apollo-angular": "~5.0.2",
     "bootstrap": "^5.3.1",
     "core-js": "~3.32.1",
@@ -82,9 +82,9 @@
     "@angular/cli": "~16.2.10",
     "@angular/compiler-cli": "~16.2.10",
     "@angular/language-service": "~16.2.10",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "~21.8.0-canary",
-    "@sitecore-jss/sitecore-jss-cli": "~21.8.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.8.0-canary",
+    "@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",
     "@types/isomorphic-fetch": "0.0.35",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",

diff --git a/packages/create-sitecore-jss/src/templates/angular/scripts/generate-config.ts b/packages/create-sitecore-jss/src/templates/angular/scripts/generate-config.ts
@@ -10,13 +10,12 @@ const packageConfig = require('../package.json');
  * settings as variables into the JSS app.
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
-// JSS_APP_NAME env variable has been deprecated since v.21.6, SITECORE_SITE_NAME should be used instead
 export function generateConfig(configOverrides?: { [key: string]: unknown }, outputPath?: string) {
   const defaultConfig = {
     production: false,
     sitecoreApiHost: '',
     sitecoreApiKey: 'no-api-key-set',
-    sitecoreSiteName: process.env.SITECORE_SITE_NAME || process.env.JSS_APP_NAME,
+    sitecoreSiteName: process.env.SITECORE_SITE_NAME,
     sitecoreLayoutServiceConfig: 'jss',
     defaultLanguage: 'en',
     defaultServerRoute: '/',

diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/client-factory.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/client-factory.ts
@@ -0,0 +1,28 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  GraphQLRequestClient,
+} from '@sitecore-jss/sitecore-jss-angular';
+import { environment as env } from '../../environments/environment';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  if (env.graphQLEndpoint && env.sitecoreApiKey) {
+    clientConfig = {
+      endpoint: env.graphQLEndpoint,
+      apiKey: env.sitecoreApiKey,
+    };
+  } else {
+    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export const clientFactory = createGraphQLClientFactory();
diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts
@@ -5,13 +5,13 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
+import { clientFactory } from './client-factory';
 
 export class DictionaryServiceFactory {
   create(): DictionaryService {
     return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLDictionaryService({
-          endpoint: env.graphQLEndpoint,
-          apiKey: env.sitecoreApiKey,
+          clientFactory,
           siteName: env.sitecoreSiteName,
           /*
             The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current

diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts
@@ -5,13 +5,13 @@ import {
   constants,
 } from '@sitecore-jss/sitecore-jss-angular';
 import { environment } from '../../environments/environment';
+import { clientFactory } from './client-factory';
 
 export class LayoutServiceFactory {
   create(): LayoutService {
     return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL
       ? new GraphQLLayoutService({
-          endpoint: environment.graphQLEndpoint,
-          apiKey: environment.sitecoreApiKey,
+          clientFactory,
           siteName: environment.sitecoreSiteName,
         })
       : new RestLayoutService({

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json b/packages/create-sitecore-jss/src/templates/nextjs-styleguide/package.json
@@ -4,7 +4,7 @@
     "nprogress": "~0.2.0"
   },
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.8.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
     "@types/nprogress": "^0.2.0"
   },
   "scripts": {

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/api/robots.ts b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/api/robots.ts
@@ -1,7 +1,7 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { GraphQLRobotsService } from '@sitecore-jss/sitecore-jss-nextjs';
 import { siteResolver } from 'lib/site-resolver';
-import config from 'temp/config';
+import clientFactory from 'lib/graphql-client-factory';
 
 const robotsApi = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   res.setHeader('Content-Type', 'text/plain');
@@ -12,8 +12,7 @@ const robotsApi = async (req: NextApiRequest, res: NextApiResponse): Promise<voi
 
   // create robots graphql service
   const robotsService = new GraphQLRobotsService({
-    endpoint: config.graphQLEndpoint,
-    apiKey: config.sitecoreApiKey,
+    clientFactory,
     siteName: site.name,
   });
 

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/api/sitemap.ts b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/api/sitemap.ts
@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import { AxiosDataFetcher, GraphQLSitemapXmlService, AxiosResponse } from '@sitecore-jss/sitecore-jss-nextjs';
 import { siteResolver } from 'lib/site-resolver';
 import config from 'temp/config';
+import clientFactory from 'lib/graphql-client-factory';
 
 const ABSOLUTE_URL_REGEXP = '^(?:[a-z]+:)?//';
 
@@ -19,8 +20,7 @@ const sitemapApi = async (
 
   // create sitemap graphql service
   const sitemapXmlService = new GraphQLSitemapXmlService({
-    endpoint: config.graphQLEndpoint,
-    apiKey: config.sitecoreApiKey,
+    clientFactory,
     siteName: site.name,
   });
 

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json
@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@sitecore/components": "^1.1.10",
-    "@sitecore-cloudsdk/events": "^0.2.4",
+    "@sitecore-cloudsdk/events": "^0.3.0",
     "@sitecore-feaas/clientside": "^0.5.17"
   }
 }
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/README.md b/packages/create-sitecore-jss/src/templates/nextjs/README.md
@@ -3,6 +3,6 @@
 <!---
 @TODO: Update to next version docs before release
 -->
-[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
+[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 (XM Cloud)](https://doc.sitecore.com/xmc/en/developers/xm-cloud/sitecore-javascript-rendering-sdk--jss--for-next-js.html)
diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "21.8.0-canary",
+  "version": "22.1.0-canary",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -25,7 +25,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "~21.8.0-canary",
+    "@sitecore-jss/sitecore-jss-nextjs": "~22.1.0-canary",
     "graphql": "~15.8.0",
     "graphql-tag": "^2.12.6",
     "next": "^14.1.0",
@@ -42,8 +42,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": "~21.8.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~21.8.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.1.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.1.0-canary",
     "@types/node": "^18.11.18",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.5",

diff --git a/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts b/packages/create-sitecore-jss/src/templates/nextjs/scripts/generate-config.ts
@@ -9,13 +9,11 @@ import { jssConfigFactory } from './config';
   Generates the /src/temp/config.js file which contains runtime configuration
   that the app can import and use.
 */
-// JSS_APP_NAME env variable has been deprecated since v.21.6, SITECORE_SITE_NAME should be used instead
 const defaultConfig: JssConfig = {
   sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
   sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
   sitecoreSiteName:
-    process.env[`${constantCase('sitecoreSiteName')}`] ||
-    process.env[`${constantCase('jssAppName')}`],
+    process.env[`${constantCase('sitecoreSiteName')}`],
   graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
   defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
   graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],

diff --git a/...s/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/README.md b/...s/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/README.md
@@ -6,7 +6,7 @@ Sitecore JSS for SSR using Experience Edge is considered experimental.
 @TODO: Update to next version docs before release
 -->
 
-[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/21/sitecore-headless-development/server-side-render-jss-apps-headlessly-using-a-sitecore-experience-edge-endpoint.html)
+[Documentation (Experience Platform)](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/server-side-render-jss-apps-headlessly-using-a-sitecore-experience-edge-endpoint.html)
 
 > This is a sample setup that is not officially supported by Sitecore.
 

diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/package.json b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "node-headless-ssr-experience-edge-sample",
-  "version": "21.8.0-canary",
+  "version": "22.1.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": "~21.8.0-canary",
+    "@sitecore-jss/sitecore-jss": "~22.1.0-canary",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3"

diff --git a/...create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/client-factory.ts b/...create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/client-factory.ts
@@ -0,0 +1,28 @@
+import {
+  GraphQLRequestClientFactoryConfig,
+  GraphQLRequestClient,
+} from '@sitecore-jss/sitecore-jss';
+import { config } from './config';
+
+// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
+
+/**
+ * Creates a new GraphQLRequestClientFactory instance
+ * @returns GraphQLRequestClientFactory instance
+ */
+export const createGraphQLClientFactory = () => {
+  let clientConfig: GraphQLRequestClientFactoryConfig;
+
+  if (config.endpoint && config.apiKey) {
+    clientConfig = {
+      endpoint: config.endpoint,
+      apiKey: config.apiKey,
+    };
+  } else {
+    throw new Error('Please configure your endpoint and apiKey.');
+  }
+
+  return GraphQLRequestClient.createClientFactory(clientConfig);
+};
+
+export const clientFactory = createGraphQLClientFactory();
diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts
@@ -4,18 +4,17 @@ import 'dotenv/config';
 import { GraphQLLayoutService } from '@sitecore-jss/sitecore-jss/layout';
 import { GraphQLDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { config } from './config';
+import { clientFactory } from './client-factory';
 
 const server = express();
 
 const layoutService = new GraphQLLayoutService({
-  endpoint: config.endpoint,
-  apiKey: config.apiKey,
+  clientFactory,
   siteName: config.siteName,
 });
 
 const dictionaryService = new GraphQLDictionaryService({
-  endpoint: config.endpoint,
-  apiKey: config.apiKey,
+  clientFactory,
   siteName: config.siteName,
   /*
     The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current