@sitecore-jss/sitecore-jss-nextjs 22.9.0-canary.2 → 22.9.0-canary.4

package/dist/cjs/editing/editing-render-middleware.js

@@ -285,9 +285,10 @@ class MetadataHandler {
             });
             res.setHeader('Set-Cookie', modifiedCookies);
         }
+        const encodedRoute = encodeURI(query.route);
         const route = ((_c = (_b = this.config).resolvePageUrl) === null || _c === void 0 ? void 0 : _c.call(_b, {
-            itemPath: query.route,
-        })) || query.route;
+            itemPath: encodedRoute,
+        })) || encodedRoute;
         sitecore_jss_1.debug.editing('editing render middleware end in %dms: redirect %o', Date.now() - startTimestamp, {
             status: 307,
             route,

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

@@ -54,6 +54,9 @@ query ${usesPersonalize ? 'PersonalizeSitemapQuery' : 'DefaultSitemapQuery'}(
         }
         results {
           path: routePath
+          route {
+            displayName
+          }
           ${usesPersonalize
     ? `
               route {
@@ -80,8 +83,10 @@ class BaseGraphQLSitemapService {
      * @param {GraphQLSitemapServiceConfig} options instance
      */
     constructor(options) {
+        var _a;
         this.options = options;
         this._graphQLClient = this.getGraphQLClient();
+        this._enableDisplayNameRouting = (_a = options.enableDisplayNameRouting) !== null && _a !== void 0 ? _a : false;
     }
     /**
      * GraphQL client accessible by descendant classes when needed
@@ -145,19 +150,90 @@ class BaseGraphQLSitemapService {
     }
     transformLanguageSitePaths(sitePaths, formatStaticPath, language) {
         return __awaiter(this, void 0, void 0, function* () {
-            const formatPath = (path) => formatStaticPath(path.replace(/^\/|\/$/g, '').split('/'), language);
+            var _a, _b, _c, _d;
             const aggregatedPaths = [];
-            sitePaths.forEach((item) => {
-                var _a, _b, _c;
-                if (!item)
-                    return;
-                aggregatedPaths.push(formatPath(item.path));
-                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
-                );
+            /**
+             * Build a map of the last segment of each path to its encoded display name.
+             * This is used later to substitute the final segment with a display name if available.
+             */
+            const displayNameMap = new Map();
+            if (this._enableDisplayNameRouting) {
+                for (const item of sitePaths) {
+                    if (!item || typeof item.path !== 'string')
+                        continue;
+                    const segments = item.path.replace(/^\/|\/$/g, '').split('/');
+                    const lastSegment = segments[segments.length - 1];
+                    const displayName = (_a = item.route) === null || _a === void 0 ? void 0 : _a.displayName;
+                    if (displayName) {
+                        displayNameMap.set(lastSegment, encodeURIComponent(displayName));
+                    }
+                }
+            }
+            /**
+             * Recursively generate all path combinations using either:
+             * - The item name segment (default)
+             * - Or the display name (if available in the map)
+             *
+             * For example: if path is ['about', 'team'] and displayName for 'team' is 'Team-Page',
+             * it will generate:
+             * - ['about', 'team']
+             * - ['about', 'Team-Page']
+             * @param {string[]} segments
+             */
+            const generateCombinations = (segments) => {
+                if (!this._enableDisplayNameRouting) {
+                    return [segments];
+                }
+                const results = [];
+                const helper = (index, current) => {
+                    if (index === segments.length) {
+                        results.push([...current]);
+                        return;
+                    }
+                    const segment = segments[index];
+                    const display = displayNameMap.get(segment);
+                    // Item name segment
+                    current.push(segment);
+                    helper(index + 1, current);
+                    current.pop();
+                    // Display name segment (if available and different)
+                    if (display && display !== segment) {
+                        current.push(display);
+                        helper(index + 1, current);
+                        current.pop();
+                    }
+                };
+                helper(0, []);
+                return results;
+            };
+            /**
+             * Process each route in the result set to:
+             * - Add itemName-based and displayName-based paths
+             * - Add personalized variants (if applicable) for each of those paths
+             */
+            for (const item of sitePaths) {
+                if (!item || typeof item.path !== 'string')
+                    continue;
+                const itemPath = item.path.replace(/^\/|\/$/g, '');
+                const segments = itemPath ? itemPath.split('/') : [];
+                // Generate all display/item name path combinations
+                const allCombinations = generateCombinations(segments);
+                // Add plain paths to the aggregated paths list
+                for (const combo of allCombinations) {
+                    aggregatedPaths.push(formatStaticPath(combo, language));
+                }
+                // Check for personalization variants
+                const variantIds = (_d = (_c = (_b = item.route) === null || _b === void 0 ? void 0 : _b.personalization) === null || _c === void 0 ? void 0 : _c.variantIds) === null || _d === void 0 ? void 0 : _d.filter((variantId) => !variantId.includes('_'));
                 if (variantIds === null || variantIds === void 0 ? void 0 : variantIds.length) {
-                    aggregatedPaths.push(...variantIds.map((varId) => formatPath((0, personalize_1.getPersonalizedRewrite)(item.path, [varId]))));
+                    for (const variantId of variantIds) {
+                        for (const combo of allCombinations) {
+                            const rewritePath = (0, personalize_1.getPersonalizedRewrite)('/' + combo.join('/'), [variantId]);
+                            const variantSegments = rewritePath.replace(/^\/|\/$/g, '').split('/');
+                            aggregatedPaths.push(formatStaticPath(variantSegments, language));
+                        }
+                    }
                 }
-            });
+            }
             return aggregatedPaths;
         });
     }

package/dist/esm/editing/editing-render-middleware.js

@@ -279,9 +279,10 @@ export class MetadataHandler {
             });
             res.setHeader('Set-Cookie', modifiedCookies);
         }
+        const encodedRoute = encodeURI(query.route);
         const route = ((_c = (_b = this.config).resolvePageUrl) === null || _c === void 0 ? void 0 : _c.call(_b, {
-            itemPath: query.route,
-        })) || query.route;
+            itemPath: encodedRoute,
+        })) || encodedRoute;
         debug.editing('editing render middleware end in %dms: redirect %o', Date.now() - startTimestamp, {
             status: 307,
             route,

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

@@ -50,6 +50,9 @@ query ${usesPersonalize ? 'PersonalizeSitemapQuery' : 'DefaultSitemapQuery'}(
         }
         results {
           path: routePath
+          route {
+            displayName
+          }
           ${usesPersonalize
     ? `
               route {
@@ -76,8 +79,10 @@ export class BaseGraphQLSitemapService {
      * @param {GraphQLSitemapServiceConfig} options instance
      */
     constructor(options) {
+        var _a;
         this.options = options;
         this._graphQLClient = this.getGraphQLClient();
+        this._enableDisplayNameRouting = (_a = options.enableDisplayNameRouting) !== null && _a !== void 0 ? _a : false;
     }
     /**
      * GraphQL client accessible by descendant classes when needed
@@ -141,19 +146,90 @@ export class BaseGraphQLSitemapService {
     }
     transformLanguageSitePaths(sitePaths, formatStaticPath, language) {
         return __awaiter(this, void 0, void 0, function* () {
-            const formatPath = (path) => formatStaticPath(path.replace(/^\/|\/$/g, '').split('/'), language);
+            var _a, _b, _c, _d;
             const aggregatedPaths = [];
-            sitePaths.forEach((item) => {
-                var _a, _b, _c;
-                if (!item)
-                    return;
-                aggregatedPaths.push(formatPath(item.path));
-                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
-                );
+            /**
+             * Build a map of the last segment of each path to its encoded display name.
+             * This is used later to substitute the final segment with a display name if available.
+             */
+            const displayNameMap = new Map();
+            if (this._enableDisplayNameRouting) {
+                for (const item of sitePaths) {
+                    if (!item || typeof item.path !== 'string')
+                        continue;
+                    const segments = item.path.replace(/^\/|\/$/g, '').split('/');
+                    const lastSegment = segments[segments.length - 1];
+                    const displayName = (_a = item.route) === null || _a === void 0 ? void 0 : _a.displayName;
+                    if (displayName) {
+                        displayNameMap.set(lastSegment, encodeURIComponent(displayName));
+                    }
+                }
+            }
+            /**
+             * Recursively generate all path combinations using either:
+             * - The item name segment (default)
+             * - Or the display name (if available in the map)
+             *
+             * For example: if path is ['about', 'team'] and displayName for 'team' is 'Team-Page',
+             * it will generate:
+             * - ['about', 'team']
+             * - ['about', 'Team-Page']
+             * @param {string[]} segments
+             */
+            const generateCombinations = (segments) => {
+                if (!this._enableDisplayNameRouting) {
+                    return [segments];
+                }
+                const results = [];
+                const helper = (index, current) => {
+                    if (index === segments.length) {
+                        results.push([...current]);
+                        return;
+                    }
+                    const segment = segments[index];
+                    const display = displayNameMap.get(segment);
+                    // Item name segment
+                    current.push(segment);
+                    helper(index + 1, current);
+                    current.pop();
+                    // Display name segment (if available and different)
+                    if (display && display !== segment) {
+                        current.push(display);
+                        helper(index + 1, current);
+                        current.pop();
+                    }
+                };
+                helper(0, []);
+                return results;
+            };
+            /**
+             * Process each route in the result set to:
+             * - Add itemName-based and displayName-based paths
+             * - Add personalized variants (if applicable) for each of those paths
+             */
+            for (const item of sitePaths) {
+                if (!item || typeof item.path !== 'string')
+                    continue;
+                const itemPath = item.path.replace(/^\/|\/$/g, '');
+                const segments = itemPath ? itemPath.split('/') : [];
+                // Generate all display/item name path combinations
+                const allCombinations = generateCombinations(segments);
+                // Add plain paths to the aggregated paths list
+                for (const combo of allCombinations) {
+                    aggregatedPaths.push(formatStaticPath(combo, language));
+                }
+                // Check for personalization variants
+                const variantIds = (_d = (_c = (_b = item.route) === null || _b === void 0 ? void 0 : _b.personalization) === null || _c === void 0 ? void 0 : _c.variantIds) === null || _d === void 0 ? void 0 : _d.filter((variantId) => !variantId.includes('_'));
                 if (variantIds === null || variantIds === void 0 ? void 0 : variantIds.length) {
-                    aggregatedPaths.push(...variantIds.map((varId) => formatPath(getPersonalizedRewrite(item.path, [varId]))));
+                    for (const variantId of variantIds) {
+                        for (const combo of allCombinations) {
+                            const rewritePath = getPersonalizedRewrite('/' + combo.join('/'), [variantId]);
+                            const variantSegments = rewritePath.replace(/^\/|\/$/g, '').split('/');
+                            aggregatedPaths.push(formatStaticPath(variantSegments, language));
+                        }
+                    }
                 }
-            });
+            }
             return aggregatedPaths;
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "22.9.0-canary.2",
+  "version": "22.9.0-canary.4",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -72,16 +72,16 @@
     "react-dom": "^19.1.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "22.9.0-canary.2",
-    "@sitecore-jss/sitecore-jss-dev-tools": "22.9.0-canary.2",
-    "@sitecore-jss/sitecore-jss-react": "22.9.0-canary.2",
+    "@sitecore-jss/sitecore-jss": "22.9.0-canary.4",
+    "@sitecore-jss/sitecore-jss-dev-tools": "22.9.0-canary.4",
+    "@sitecore-jss/sitecore-jss-react": "22.9.0-canary.4",
     "@vercel/kv": "^0.2.1",
     "regex-parser": "^2.2.11",
     "sync-disk-cache": "^2.1.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "a6bb7442ce39fe6b3be987e0d53ff03bfd21d19f",
+  "gitHead": "842b72c250905314e45b8b1387407fd1efe1b241",
   "files": [
     "dist",
     "types",

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

@@ -58,6 +58,7 @@ export interface SiteRouteQueryResult<T> {
 export type RouteListQueryResult = {
     path: string;
     route?: {
+        displayName: string;
         personalization?: {
             variantIds: string[];
         };
@@ -73,6 +74,10 @@ export interface BaseGraphQLSitemapServiceConfig extends Omit<SiteRouteQueryVari
      * Turned off by default.
      */
     includePersonalizedRoutes?: boolean;
+    /**
+     * Gets a flag indicating whether display name routing is enabled.
+     */
+    enableDisplayNameRouting?: boolean;
     /**
      * A GraphQL Request Client Factory is a function that accepts configuration and returns an instance of a GraphQLRequestClient.
      * This factory function is used to create and configure GraphQL clients for making GraphQL API requests.
@@ -97,6 +102,7 @@ export type StaticPath = {
 export declare abstract class BaseGraphQLSitemapService {
     options: BaseGraphQLSitemapServiceConfig;
     private _graphQLClient;
+    private _enableDisplayNameRouting;
     /**
      * Creates an instance of graphQL sitemap service with the provided options
      * @param {GraphQLSitemapServiceConfig} options instance