@sitecore-jss/sitecore-jss-nextjs 22.1.0-canary.9 → 22.1.0

package/dist/esm/middleware/personalize-middleware.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { NextResponse } from 'next/server';
-import { GraphQLPersonalizeService, getPersonalizedRewrite, } from '@sitecore-jss/sitecore-jss/personalize';
+import { GraphQLPersonalizeService, getPersonalizedRewrite, CdpHelper, DEFAULT_VARIANT, } from '@sitecore-jss/sitecore-jss/personalize';
 import { debug } from '@sitecore-jss/sitecore-jss';
 import { MiddlewareBase } from './middleware';
 import { init, personalize } from '@sitecore-cloudsdk/personalize/server';
@@ -58,6 +58,15 @@ export class PersonalizeMiddleware extends MiddlewareBase {
                 debug.personalize('skipped (no personalization configured)');
                 return response;
             }
+            if (this.isPrefetch(req)) {
+                debug.personalize('skipped (prefetch)');
+                // Personalized, but this is a prefetch request.
+                // In this case, don't execute a personalize request; otherwise, the metrics for component A/B experiments would be inaccurate.
+                // Disable preflight caching to force revalidation on client-side navigation (personalization WILL be influenced).
+                // Note the reason we don't move this any earlier in the middleware is that we would then be sacrificing performance for non-personalized pages.
+                response.headers.set('x-middleware-cache', 'no-cache');
+                return response;
+            }
             yield this.initPersonalizeServer({
                 hostname,
                 siteName: site.name,
@@ -65,32 +74,36 @@ export class PersonalizeMiddleware extends MiddlewareBase {
                 response,
             });
             const params = this.getExperienceParams(req);
-            debug.personalize('executing experience for %s %o', personalizeInfo.contentId, params);
-            let variantId;
-            // Execute targeted experience in Personalize SDK
-            // eslint-disable-next-line no-useless-catch
-            try {
-                const personalization = yield this.personalize({ personalizeInfo, params, language, timeout }, req);
-                variantId = personalization.variantId;
-            }
-            catch (error) {
-                throw error;
-            }
-            if (!variantId) {
-                debug.personalize('skipped (no variant identified)');
-                return response;
-            }
-            if (!personalizeInfo.variantIds.includes(variantId)) {
-                debug.personalize('skipped (invalid variant)');
+            const executions = this.getPersonalizeExecutions(personalizeInfo, language);
+            const identifiedVariantIds = [];
+            yield Promise.all(executions.map((execution) => this.personalize({
+                friendlyId: execution.friendlyId,
+                variantIds: execution.variantIds,
+                params,
+                language,
+                timeout,
+            }, req).then((personalization) => {
+                const variantId = personalization.variantId;
+                if (variantId) {
+                    if (!execution.variantIds.includes(variantId)) {
+                        debug.personalize('invalid variant %s', variantId);
+                    }
+                    else {
+                        identifiedVariantIds.push(variantId);
+                    }
+                }
+            })));
+            if (identifiedVariantIds.length === 0) {
+                debug.personalize('skipped (no variant(s) identified)');
                 return response;
             }
             // Path can be rewritten by previously executed middleware
             const basePath = (res === null || res === void 0 ? void 0 : res.headers.get('x-sc-rewrite')) || pathname;
             // Rewrite to persononalized path
-            const rewritePath = getPersonalizedRewrite(basePath, { variantId });
+            const rewritePath = getPersonalizedRewrite(basePath, identifiedVariantIds);
             response = this.rewrite(rewritePath, req, response);
-            // Disable preflight caching to force revalidation on client-side navigation (personalization may be influenced)
-            // See https://github.com/vercel/next.js/issues/32727
+            // Disable preflight caching to force revalidation on client-side navigation (personalization MAY be influenced).
+            // See https://github.com/vercel/next.js/pull/32767
             response.headers.set('x-middleware-cache', 'no-cache');
             debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
@@ -129,17 +142,18 @@ export class PersonalizeMiddleware extends MiddlewareBase {
             });
         });
     }
-    personalize({ params, personalizeInfo, language, timeout, }, request) {
+    personalize({ params, friendlyId, language, timeout, variantIds, }, request) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const personalizationData = {
+            debug.personalize('executing experience for %s %o', friendlyId, params);
+            return (yield personalize(request, {
                 channel: this.config.cdpConfig.channel || 'WEB',
                 currency: (_a = this.config.cdpConfig.currency) !== null && _a !== void 0 ? _a : 'USD',
-                friendlyId: personalizeInfo.contentId,
+                friendlyId,
                 params,
                 language,
-            };
-            return (yield personalize(request, personalizationData, { timeout }));
+                pageVariantIds: variantIds,
+            }, { timeout }));
         });
     }
     getExperienceParams(req) {
@@ -161,4 +175,50 @@ export class PersonalizeMiddleware extends MiddlewareBase {
         // ignore files
         return pathname.includes('.') || super.excludeRoute(pathname);
     }
+    /**
+     * Aggregates personalize executions based on the provided route personalize information and language
+     * @param {PersonalizeInfo} personalizeInfo the route personalize information
+     * @param {string} language the language
+     * @returns An array of personalize executions
+     */
+    getPersonalizeExecutions(personalizeInfo, language) {
+        if (personalizeInfo.variantIds.length === 0) {
+            return [];
+        }
+        const results = [];
+        return personalizeInfo.variantIds.reduce((results, variantId) => {
+            if (variantId.includes('_')) {
+                // Component-level personalization in format "<ComponentID>_<VariantID>"
+                const componentId = variantId.split('_')[0];
+                const friendlyId = CdpHelper.getComponentFriendlyId(personalizeInfo.pageId, componentId, language, this.config.scope || this.config.edgeConfig.scope);
+                const execution = results.find((x) => x.friendlyId === friendlyId);
+                if (execution) {
+                    execution.variantIds.push(variantId);
+                }
+                else {
+                    // The default/control variant (format "<ComponentID>_default") is also a valid value returned by the execution
+                    const defaultVariant = `${componentId}${DEFAULT_VARIANT}`;
+                    results.push({
+                        friendlyId,
+                        variantIds: [defaultVariant, variantId],
+                    });
+                }
+            }
+            else {
+                // Embedded (page-level) personalization in format "<VariantID>"
+                const friendlyId = CdpHelper.getPageFriendlyId(personalizeInfo.pageId, language, this.config.scope || this.config.edgeConfig.scope);
+                const execution = results.find((x) => x.friendlyId === friendlyId);
+                if (execution) {
+                    execution.variantIds.push(variantId);
+                }
+                else {
+                    results.push({
+                        friendlyId,
+                        variantIds: [variantId],
+                    });
+                }
+            }
+            return results;
+        }, results);
+    }
 }

package/dist/esm/middleware/redirects-middleware.js

@@ -37,6 +37,7 @@ export class RedirectsMiddleware extends MiddlewareBase {
                 hostname,
             });
             const createResponse = () => __awaiter(this, void 0, void 0, function* () {
+                var _a;
                 if (this.config.disabled && this.config.disabled(req, res || NextResponse.next())) {
                     debug.redirects('skipped (redirects middleware is disabled)');
                     return res || NextResponse.next();
@@ -58,47 +59,44 @@ export class RedirectsMiddleware extends MiddlewareBase {
                         existsRedirect.target.includes(hostname))) {
                     existsRedirect.target = existsRedirect.target.replace(REGEXP_CONTEXT_SITE_LANG, site.language);
                 }
-                const url = req.nextUrl.clone();
+                const url = this.normalizeUrl(req.nextUrl.clone());
                 if (REGEXP_ABSOLUTE_URL.test(existsRedirect.target)) {
                     url.href = existsRedirect.target;
                 }
                 else {
-                    const source = `${url.pathname}${url.search}`;
-                    url.search = existsRedirect.isQueryStringPreserved ? url.search : '';
+                    const source = `${url.pathname.replace(/\/*$/gi, '')}${url.search}`;
                     const urlFirstPart = existsRedirect.target.split('/')[1];
                     if (this.locales.includes(urlFirstPart)) {
-                        url.locale = urlFirstPart;
+                        req.nextUrl.locale = urlFirstPart;
                         existsRedirect.target = existsRedirect.target.replace(`/${urlFirstPart}`, '');
                     }
                     const target = source
                         .replace(regexParser(existsRedirect.pattern), existsRedirect.target)
                         .replace(/^\/\//, '/')
                         .split('?');
-                    url.pathname = target[0];
-                    if (target[1]) {
-                        const newParams = new URLSearchParams(target[1]);
-                        for (const [key, val] of newParams.entries()) {
-                            url.searchParams.append(key, val);
-                        }
+                    if (url.search && existsRedirect.isQueryStringPreserved) {
+                        const targetQueryString = (_a = target[1]) !== null && _a !== void 0 ? _a : '';
+                        url.search = '?' + new URLSearchParams(`${url.search}&${targetQueryString}`).toString();
                     }
+                    else if (target[1]) {
+                        url.search = '?' + target[1];
+                    }
+                    else {
+                        url.search = '';
+                    }
+                    const prepareNewURL = new URL(`${target[0]}${url.search}`, url.origin);
+                    url.href = prepareNewURL.href;
                 }
                 const redirectUrl = decodeURIComponent(url.href);
                 /** return Response redirect with http code of redirect type **/
                 switch (existsRedirect.redirectType) {
                     case REDIRECT_TYPE_301:
-                        return NextResponse.redirect(redirectUrl, {
-                            status: 301,
-                            statusText: 'Moved Permanently',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
+                        return NextResponse.redirect(redirectUrl, Object.assign(Object.assign({}, res), { status: 301, statusText: 'Moved Permanently', headers: res === null || res === void 0 ? void 0 : res.headers }));
                     case REDIRECT_TYPE_302:
-                        return NextResponse.redirect(redirectUrl, {
-                            status: 302,
-                            statusText: 'Found',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
-                    case REDIRECT_TYPE_SERVER_TRANSFER:
-                        return NextResponse.rewrite(redirectUrl, res);
+                        return NextResponse.redirect(redirectUrl, Object.assign(Object.assign({}, res), { status: 302, statusText: 'Found', headers: res === null || res === void 0 ? void 0 : res.headers }));
+                    case REDIRECT_TYPE_SERVER_TRANSFER: {
+                        return this.rewrite(redirectUrl, req, res || NextResponse.next());
+                    }
                     default:
                         return res || NextResponse.next();
                 }
@@ -143,8 +141,9 @@ export class RedirectsMiddleware extends MiddlewareBase {
     getExistsRedirect(req, siteName) {
         return __awaiter(this, void 0, void 0, function* () {
             const redirects = yield this.redirectsService.fetchRedirects(siteName);
-            const tragetURL = req.nextUrl.pathname;
-            const targetQS = req.nextUrl.search || '';
+            const normalizedUrl = this.normalizeUrl(req.nextUrl.clone());
+            const tragetURL = normalizedUrl.pathname;
+            const targetQS = normalizedUrl.search || '';
             const language = this.getLanguage(req);
             const modifyRedirects = structuredClone(redirects);
             return modifyRedirects.length
@@ -157,7 +156,7 @@ export class RedirectsMiddleware extends MiddlewareBase {
                         .replace(/(?<!\\)\?/g, '\\?')
                         .replace(/\$\/gi$/g, '')}[\/]?$/gi`;
                     return ((regexParser(redirect.pattern).test(tragetURL) ||
-                        regexParser(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
+                        regexParser(redirect.pattern).test(`${tragetURL.replace(/\/*$/gi, '')}${targetQS}`) ||
                         regexParser(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
                         regexParser(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
                         (redirect.locale
@@ -167,4 +166,43 @@ export class RedirectsMiddleware extends MiddlewareBase {
                 : undefined;
         });
     }
+    /**
+     * When a user clicks on a link generated by the Link component from next/link,
+     * Next.js adds special parameters in the route called path.
+     * This method removes these special parameters.
+     * @param {URL} url
+     * @returns {string} normalize url
+     */
+    normalizeUrl(url) {
+        if (!url.search) {
+            return url;
+        }
+        /**
+         * Prepare special parameters for exclusion.
+         */
+        const splittedPathname = url.pathname
+            .split('/')
+            .filter((route) => route)
+            .map((route) => `path=${route}`);
+        /**
+         * Remove special parameters(Next.JS)
+         * Example: /about/contact/us
+         * When a user clicks on this link, Next.js should generate a link for the middleware, formatted like this:
+         * http://host/about/contact/us?path=about&path=contact&path=us
+         */
+        const newQueryString = url.search
+            .replace(/^\?/, '')
+            .split('&')
+            .filter((param) => {
+            if (!splittedPathname.includes(param)) {
+                return param;
+            }
+            return false;
+        })
+            .join('&');
+        if (newQueryString) {
+            return new URL(`${url.pathname}?${newQueryString}`, url.origin);
+        }
+        return new URL(`${url.pathname}`, url.origin);
+    }
 }

package/dist/esm/services/base-graphql-sitemap-service.js

@@ -144,13 +144,14 @@ export class BaseGraphQLSitemapService {
             const formatPath = (path) => formatStaticPath(path.replace(/^\/|\/$/g, '').split('/'), language);
             const aggregatedPaths = [];
             sitePaths.forEach((item) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c;
                 if (!item)
                     return;
                 aggregatedPaths.push(formatPath(item.path));
-                // check for type safety's sake - personalize may be empty depending on query type
-                if ((_b = (_a = item.route) === null || _a === void 0 ? void 0 : _a.personalization) === null || _b === void 0 ? void 0 : _b.variantIds.length) {
-                    aggregatedPaths.push(...(((_d = (_c = item.route) === null || _c === void 0 ? void 0 : _c.personalization) === null || _d === void 0 ? void 0 : _d.variantIds.map((varId) => formatPath(getPersonalizedRewrite(item.path, { variantId: varId })))) || {}));
+                const variantIds = (_c = (_b = (_a = item.route) === null || _a === void 0 ? void 0 : _a.personalization) === null || _b === void 0 ? void 0 : _b.variantIds) === null || _c === void 0 ? void 0 : _c.filter((variantId) => !variantId.includes('_') // exclude component A/B test variants
+                );
+                if (variantIds === null || variantIds === void 0 ? void 0 : variantIds.length) {
+                    aggregatedPaths.push(...variantIds.map((varId) => formatPath(getPersonalizedRewrite(item.path, [varId]))));
                 }
             });
             return aggregatedPaths;

package/dist/esm/utils/index.js

@@ -1,2 +1,3 @@
 export { getPublicUrl, handleEditorFastRefresh } from './utils';
-export { tryParseEnvValue, isEditorActive, resetEditorChromes, resolveUrl, } from '@sitecore-jss/sitecore-jss/utils';
+export { tryParseEnvValue, resolveUrl } from '@sitecore-jss/sitecore-jss/utils';
+export { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';

package/dist/esm/utils/utils.js

@@ -1,4 +1,4 @@
-import { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/utils';
+import { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';
 /**
  * Get the publicUrl.
  * This is used primarily to enable compatibility with Sitecore editors.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "22.1.0-canary.9",
+  "version": "22.1.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -14,7 +14,7 @@
     "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-nextjs --entryPoints src/index.ts --entryPoints src/monitoring/index.ts --entryPoints src/editing/index.ts --entryPoints src/middleware/index.ts --entryPoints src/context/index.ts --entryPoints src/utils/index.ts --entryPoints src/site/index.ts --entryPoints src/graphql/index.ts --githubPages false"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "author": {
     "name": "Sitecore Corporation",
@@ -29,13 +29,13 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@sitecore-cloudsdk/personalize": "^0.3.0",
+    "@sitecore-cloudsdk/personalize": "^0.3.1",
     "@types/chai": "^4.3.4",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-string": "^1.4.2",
     "@types/enzyme": "^3.10.12",
     "@types/mocha": "^10.0.1",
-    "@types/node": "~18.11.18",
+    "@types/node": "~20.14.2",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.10",
@@ -65,25 +65,24 @@
     "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "@sitecore-cloudsdk/events": "^0.3.0",
-    "@sitecore-cloudsdk/personalize": "^0.3.0",
+    "@sitecore-cloudsdk/events": "^0.3.1",
+    "@sitecore-cloudsdk/personalize": "^0.3.1",
     "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.9",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^22.1.0-canary.9",
-    "@sitecore-jss/sitecore-jss-react": "^22.1.0-canary.9",
+    "@sitecore-jss/sitecore-jss": "22.1.0",
+    "@sitecore-jss/sitecore-jss-dev-tools": "22.1.0",
+    "@sitecore-jss/sitecore-jss-react": "22.1.0",
     "@vercel/kv": "^0.2.1",
-    "node-html-parser": "^6.1.4",
     "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
     "sync-disk-cache": "^2.1.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "9b249f8d03fb9d74e74f74f3040fc2668137bdcc",
+  "gitHead": "8f6fa5709f6b306bf40fb2b0775ae6c5ac4182e7",
   "files": [
     "dist",
     "types",

package/types/ComponentBuilder.d.ts

@@ -1,18 +1,16 @@
-/// <reference types="@types/react" />
-import { ComponentFactory } from '@sitecore-jss/sitecore-jss-react';
+import { ComponentFactory, JssComponentType } from '@sitecore-jss/sitecore-jss-react';
 import { Module, ModuleFactory } from './sharedTypes/module-factory';
-import { ComponentType } from 'react';
 /**
  * Represents a component that can be imported dynamically
  */
 export type LazyModule = {
     module: () => Promise<Module>;
-    element: (isEditing?: boolean) => ComponentType;
+    element: (isEditing?: boolean) => JssComponentType;
 };
 /**
  * Component is a module or a lazy module
  */
-type Component = Module | LazyModule | ComponentType;
+type Component = Module | LazyModule | JssComponentType;
 /**
  * Configuration for ComponentBuilder
  */

package/types/components/Placeholder.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="@types/react" />
 import React from 'react';
-import { PlaceholderComponentProps } from '@sitecore-jss/sitecore-jss-react';
-export declare const Placeholder: (props: PlaceholderComponentProps) => React.JSX.Element;
+import { PlaceholderComponentProps, WithSitecoreContextProps, EnhancedOmit } from '@sitecore-jss/sitecore-jss-react';
+/**
+ * React Placeholder component wrapped by withSitecoreContext, so these properties shouldn't be passed to the Next.js Placeholder.
+ */
+type PlaceholderProps = EnhancedOmit<PlaceholderComponentProps, keyof WithSitecoreContextProps>;
+export declare const Placeholder: (props: PlaceholderProps) => React.JSX.Element;
+export {};

package/types/components/RichText.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="@types/react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { RichTextProps as ReactRichTextProps } from '@sitecore-jss/sitecore-jss-react';
 export type RichTextProps = ReactRichTextProps & {
@@ -19,9 +21,13 @@ export declare const RichText: {
         field: PropTypes.Requireable<PropTypes.InferProps<{
             value: PropTypes.Requireable<string>;
             editable: PropTypes.Requireable<string>;
+            metadata: PropTypes.Requireable<{
+                [x: string]: any;
+            }>;
         }>>;
         tag: PropTypes.Requireable<string>;
         editable: PropTypes.Requireable<boolean>;
+        emptyFieldEditingComponent: PropTypes.Requireable<NonNullable<React.ComponentClass<unknown, any> | React.FC<unknown>>>;
         internalLinksSelector: PropTypes.Requireable<string>;
     };
     displayName: string;

package/types/editing/constants.d.ts

@@ -1,3 +1,12 @@
 export declare const QUERY_PARAM_EDITING_SECRET = "secret";
-export declare const QUERY_PARAM_PROTECTION_BYPASS_SITECORE = "x-sitecore-protection-bypass";
-export declare const QUERY_PARAM_PROTECTION_BYPASS_VERCEL = "x-vercel-protection-bypass";
+export declare const QUERY_PARAM_VERCEL_PROTECTION_BYPASS = "x-vercel-protection-bypass";
+export declare const QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE = "x-vercel-set-bypass-cookie";
+/**
+ * Headers that should be passed along to (Editing Chromes handler) SSR request.
+ * Note these are in lowercase format to match expected `IncomingHttpHeaders`.
+ */
+export declare const EDITING_PASS_THROUGH_HEADERS: string[];
+/**
+ * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
+ */
+export declare const EDITING_ALLOWED_ORIGINS: string[];

package/types/editing/editing-config-middleware.d.ts

@@ -1,4 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
+import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
 import { Metadata } from '@sitecore-jss/sitecore-jss-dev-tools';
 export type EditingConfigMiddlewareConfig = {
     /**
@@ -9,6 +10,12 @@ export type EditingConfigMiddlewareConfig = {
      * Application metadata
      */
     metadata: Metadata;
+    /**
+     * Determines which editing mode should be used by Pages.
+     * Can be either 'chromes' or 'metadata'.
+     * By default its 'metadata'
+     */
+    pagesEditMode?: EditMode;
 };
 /**
  * Middleware / handler used in the editing config API route in xmcloud add on (e.g. '/api/editing/config')

package/types/editing/editing-data-service.d.ts

@@ -4,6 +4,7 @@ import { EditingDataCache } from './editing-data-cache';
 import { PreviewData } from 'next';
 /**
  * Data for Next.js Preview (Editing) mode
+ * Used in Chromes Edit Mode only
  */
 export interface EditingPreviewData {
     key: string;