@sitecore-jss/sitecore-jss-nextjs 22.1.0-canary.58 → 22.1.0-canary.59

package/dist/cjs/middleware/middleware.js

@@ -18,6 +18,18 @@ class MiddlewareBase {
         var _a, _b;
         return !!(((_a = req.cookies.get('__prerender_bypass')) === null || _a === void 0 ? void 0 : _a.value) || ((_b = req.cookies.get('__next_preview_data')) === null || _b === void 0 ? void 0 : _b.value));
     }
+    /**
+     * Determines if the request is a Next.js (next/link) prefetch request
+     * @param {NextRequest} req request
+     * @returns {boolean} is prefetch
+     */
+    isPrefetch(req) {
+        return (
+        // eslint-disable-next-line prettier/prettier
+        req.headers.get('purpose') === 'prefetch' || // Pages Router
+            req.headers.get('Next-Router-Prefetch') === '1' // App Router
+        );
+    }
     excludeRoute(pathname) {
         var _a, _b;
         return (pathname.startsWith('/api/') || // Ignore Next.js API calls

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

@@ -61,6 +61,15 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
                 sitecore_jss_1.debug.personalize('skipped (no personalization configured)');
                 return response;
             }
+            if (this.isPrefetch(req)) {
+                sitecore_jss_1.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,
@@ -68,32 +77,36 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
                 response,
             });
             const params = this.getExperienceParams(req);
-            sitecore_jss_1.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) {
-                sitecore_jss_1.debug.personalize('skipped (no variant identified)');
-                return response;
-            }
-            if (!personalizeInfo.variantIds.includes(variantId)) {
-                sitecore_jss_1.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)) {
+                        sitecore_jss_1.debug.personalize('invalid variant %s', variantId);
+                    }
+                    else {
+                        identifiedVariantIds.push(variantId);
+                    }
+                }
+            })));
+            if (identifiedVariantIds.length === 0) {
+                sitecore_jss_1.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 = (0, personalize_1.getPersonalizedRewrite)(basePath, { variantId });
+            const rewritePath = (0, personalize_1.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');
             sitecore_jss_1.debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
@@ -132,17 +145,18 @@ class PersonalizeMiddleware extends middleware_1.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 = {
+            sitecore_jss_1.debug.personalize('executing experience for %s %o', friendlyId, params);
+            return (yield (0, server_2.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 (0, server_2.personalize)(request, personalizationData, { timeout }));
+                pageVariantIds: variantIds,
+            }, { timeout }));
         });
     }
     getExperienceParams(req) {
@@ -164,5 +178,51 @@ class PersonalizeMiddleware extends middleware_1.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 = personalize_1.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}${personalize_1.DEFAULT_VARIANT}`;
+                    results.push({
+                        friendlyId,
+                        variantIds: [defaultVariant, variantId],
+                    });
+                }
+            }
+            else {
+                // Embedded (page-level) personalization in format "<VariantID>"
+                const friendlyId = personalize_1.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);
+    }
 }
 exports.PersonalizeMiddleware = PersonalizeMiddleware;

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

@@ -148,13 +148,14 @@ 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((0, personalize_1.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((0, personalize_1.getPersonalizedRewrite)(item.path, [varId]))));
                 }
             });
             return aggregatedPaths;

package/dist/esm/middleware/middleware.js

@@ -15,6 +15,18 @@ export class MiddlewareBase {
         var _a, _b;
         return !!(((_a = req.cookies.get('__prerender_bypass')) === null || _a === void 0 ? void 0 : _a.value) || ((_b = req.cookies.get('__next_preview_data')) === null || _b === void 0 ? void 0 : _b.value));
     }
+    /**
+     * Determines if the request is a Next.js (next/link) prefetch request
+     * @param {NextRequest} req request
+     * @returns {boolean} is prefetch
+     */
+    isPrefetch(req) {
+        return (
+        // eslint-disable-next-line prettier/prettier
+        req.headers.get('purpose') === 'prefetch' || // Pages Router
+            req.headers.get('Next-Router-Prefetch') === '1' // App Router
+        );
+    }
     excludeRoute(pathname) {
         var _a, _b;
         return (pathname.startsWith('/api/') || // Ignore Next.js API calls

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "22.1.0-canary.58",
+  "version": "22.1.0-canary.59",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -29,7 +29,7 @@
     "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",
@@ -65,16 +65,16 @@
     "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.58",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^22.1.0-canary.58",
-    "@sitecore-jss/sitecore-jss-react": "^22.1.0-canary.58",
+    "@sitecore-jss/sitecore-jss": "^22.1.0-canary.59",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^22.1.0-canary.59",
+    "@sitecore-jss/sitecore-jss-react": "^22.1.0-canary.59",
     "@vercel/kv": "^0.2.1",
     "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
@@ -82,7 +82,7 @@
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "855f04c4ed8ac931b3ee4b67bdfd76e80fc277c5",
+  "gitHead": "61064aa0da07225a2929d7894ca05cd3b58a508b",
   "files": [
     "dist",
     "types",

package/types/middleware/middleware.d.ts

@@ -37,6 +37,12 @@ export declare abstract class MiddlewareBase {
      * @returns {boolean} is preview
      */
     protected isPreview(req: NextRequest): boolean;
+    /**
+     * Determines if the request is a Next.js (next/link) prefetch request
+     * @param {NextRequest} req request
+     * @returns {boolean} is prefetch
+     */
+    protected isPrefetch(req: NextRequest): boolean;
     protected excludeRoute(pathname: string): boolean | undefined;
     /**
      * Safely extract all headers for debug logging

package/types/middleware/personalize-middleware.d.ts

@@ -33,6 +33,10 @@ export type PersonalizeMiddlewareConfig = MiddlewareBaseConfig & {
      * Configuration for your Sitecore CDP endpoint
      */
     cdpConfig: CdpServiceConfig;
+    /**
+     * Optional Sitecore Personalize scope identifier allowing you to isolate your personalization data between XM Cloud environments
+     */
+    scope?: string;
 };
 /**
  * Object model of Experience Context data
@@ -47,6 +51,13 @@ export type ExperienceParams = {
         content: string | undefined;
     };
 };
+/**
+ * Object model of personalize execution data
+ */
+type PersonalizeExecution = {
+    friendlyId: string;
+    variantIds: string[];
+};
 /**
  * Middleware / handler to support Sitecore Personalize
  */
@@ -68,15 +79,24 @@ export declare class PersonalizeMiddleware extends MiddlewareBase {
         request: NextRequest;
         response: NextResponse;
     }): Promise<void>;
-    protected personalize({ params, personalizeInfo, language, timeout, }: {
-        personalizeInfo: PersonalizeInfo;
+    protected personalize({ params, friendlyId, language, timeout, variantIds, }: {
         params: ExperienceParams;
+        friendlyId: string;
         language: string;
         timeout?: number;
+        variantIds?: string[];
     }, request: NextRequest): Promise<{
         variantId: string;
     }>;
     protected getExperienceParams(req: NextRequest): ExperienceParams;
     protected excludeRoute(pathname: string): boolean | undefined;
+    /**
+     * 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
+     */
+    protected getPersonalizeExecutions(personalizeInfo: PersonalizeInfo, language: string): PersonalizeExecution[];
     private handler;
 }
+export {};

package/types/services/base-graphql-sitemap-service.d.ts

@@ -67,8 +67,9 @@ export type RouteListQueryResult = {
  */
 export interface BaseGraphQLSitemapServiceConfig extends Omit<SiteRouteQueryVariables, 'language' | 'siteName'> {
     /**
-     * A flag for whether to include personalized routes in service output - only works on XM Cloud
-     * turned off by default
+     * A flag for whether to include personalized routes in service output.
+     * Only works on XM Cloud for pages using Embedded Personalization (not Component A/B testing).
+     * Turned off by default.
      */
     includePersonalizedRoutes?: boolean;
     /**