@sitecore-jss/sitecore-jss-nextjs 22.2.0-canary.3 → 22.2.0-canary.30

package/dist/cjs/components/NextImage.js

@@ -24,7 +24,9 @@ const sitecore_jss_react_2 = require("@sitecore-jss/sitecore-jss-react");
 const sitecore_jss_react_3 = require("@sitecore-jss/sitecore-jss-react");
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((0, sitecore_jss_react_2.withEmptyFieldEditingComponent)((_a) => {
+    var _b;
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
+    const sitecoreContext = react_1.default.useContext(sitecore_jss_react_1.SitecoreContextReactContext);
     // next handles src and we use a custom loader,
     // throw error if these are present
     if (otherProps.src) {
@@ -46,8 +48,11 @@ exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((0, sitecore_jss
     if (!img) {
         return null;
     }
+    // disable image optimization for Edit and Preview, but preserve original value if true
+    const unoptimized = otherProps.unoptimized ||
+        ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.pageState) !== layout_1.LayoutServicePageState.Normal;
     const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
-        priority, src: media_1.mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix) });
+        priority, src: media_1.mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
     const imageProps = Object.assign(Object.assign({}, attrs), { 
         // force replace /media with /jssmedia in src since we _know_ we will be adding a 'mw' query string parameter
         // this is required for Sitecore media API resizing to work properly

package/dist/cjs/editing/constants.js

@@ -12,4 +12,4 @@ exports.EDITING_PASS_THROUGH_HEADERS = ['authorization', 'cookie'];
 /**
  * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
  */
-exports.EDITING_ALLOWED_ORIGINS = ['https://pages*.cloud', 'https://pages.sitecorecloud.io'];
+exports.EDITING_ALLOWED_ORIGINS = ['https://pages.sitecorecloud.io'];

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

@@ -224,7 +224,6 @@ class MetadataHandler {
         }, 
         // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
         {
-            path: query.route,
             maxAge: 3,
         });
         // Cookies with the SameSite=Lax policy set by Next.js setPreviewData function causes CORS issue

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

@@ -43,6 +43,7 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                 hostname,
             });
             const createResponse = () => __awaiter(this, void 0, void 0, function* () {
+                var _a;
                 if (this.config.disabled && this.config.disabled(req, res || server_1.NextResponse.next())) {
                     sitecore_jss_1.debug.redirects('skipped (redirects middleware is disabled)');
                     return res || server_1.NextResponse.next();
@@ -64,47 +65,44 @@ class RedirectsMiddleware extends middleware_1.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((0, regex_parser_1.default)(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 site_1.REDIRECT_TYPE_301:
-                        return server_1.NextResponse.redirect(redirectUrl, {
-                            status: 301,
-                            statusText: 'Moved Permanently',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
+                        return server_1.NextResponse.redirect(redirectUrl, Object.assign(Object.assign({}, res), { status: 301, statusText: 'Moved Permanently', headers: res === null || res === void 0 ? void 0 : res.headers }));
                     case site_1.REDIRECT_TYPE_302:
-                        return server_1.NextResponse.redirect(redirectUrl, {
-                            status: 302,
-                            statusText: 'Found',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
-                    case site_1.REDIRECT_TYPE_SERVER_TRANSFER:
-                        return server_1.NextResponse.rewrite(redirectUrl, res);
+                        return server_1.NextResponse.redirect(redirectUrl, Object.assign(Object.assign({}, res), { status: 302, statusText: 'Found', headers: res === null || res === void 0 ? void 0 : res.headers }));
+                    case site_1.REDIRECT_TYPE_SERVER_TRANSFER: {
+                        return this.rewrite(redirectUrl, req, res || server_1.NextResponse.next());
+                    }
                     default:
                         return res || server_1.NextResponse.next();
                 }
@@ -149,8 +147,9 @@ class RedirectsMiddleware extends middleware_1.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
@@ -163,7 +162,7 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                         .replace(/(?<!\\)\?/g, '\\?')
                         .replace(/\$\/gi$/g, '')}[\/]?$/gi`;
                     return (((0, regex_parser_1.default)(redirect.pattern).test(tragetURL) ||
-                        (0, regex_parser_1.default)(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
+                        (0, regex_parser_1.default)(redirect.pattern).test(`${tragetURL.replace(/\/*$/gi, '')}${targetQS}`) ||
                         (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
                         (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
                         (redirect.locale
@@ -173,5 +172,44 @@ class RedirectsMiddleware extends middleware_1.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);
+    }
 }
 exports.RedirectsMiddleware = RedirectsMiddleware;

package/dist/esm/components/NextImage.js

@@ -12,13 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { getEEMarkup, withFieldMetadata, } from '@sitecore-jss/sitecore-jss-react';
+import { getEEMarkup, withFieldMetadata, SitecoreContextReactContext, } from '@sitecore-jss/sitecore-jss-react';
 import Image from 'next/image';
 import { withEmptyFieldEditingComponent } from '@sitecore-jss/sitecore-jss-react';
 import { DefaultEmptyFieldEditingComponentImage } from '@sitecore-jss/sitecore-jss-react';
-import { isFieldValueEmpty } from '@sitecore-jss/sitecore-jss/layout';
+import { isFieldValueEmpty, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+    var _b;
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
+    const sitecoreContext = React.useContext(SitecoreContextReactContext);
     // next handles src and we use a custom loader,
     // throw error if these are present
     if (otherProps.src) {
@@ -40,8 +42,11 @@ export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) =
     if (!img) {
         return null;
     }
+    // disable image optimization for Edit and Preview, but preserve original value if true
+    const unoptimized = otherProps.unoptimized ||
+        ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.pageState) !== LayoutServicePageState.Normal;
     const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
-        priority, src: mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix) });
+        priority, src: mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
     const imageProps = Object.assign(Object.assign({}, attrs), { 
         // force replace /media with /jssmedia in src since we _know_ we will be adding a 'mw' query string parameter
         // this is required for Sitecore media API resizing to work properly

package/dist/esm/editing/constants.js

@@ -9,4 +9,4 @@ export const EDITING_PASS_THROUGH_HEADERS = ['authorization', 'cookie'];
 /**
  * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
  */
-export const EDITING_ALLOWED_ORIGINS = ['https://pages*.cloud', 'https://pages.sitecorecloud.io'];
+export const EDITING_ALLOWED_ORIGINS = ['https://pages.sitecorecloud.io'];

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

@@ -219,7 +219,6 @@ export class MetadataHandler {
         }, 
         // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
         {
-            path: query.route,
             maxAge: 3,
         });
         // Cookies with the SameSite=Lax policy set by Next.js setPreviewData function causes CORS issue

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

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "22.2.0-canary.3",
+  "version": "22.2.0-canary.30",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -72,9 +72,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^22.2.0-canary.3",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^22.2.0-canary.3",
-    "@sitecore-jss/sitecore-jss-react": "^22.2.0-canary.3",
+    "@sitecore-jss/sitecore-jss": "^22.2.0-canary.30",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^22.2.0-canary.30",
+    "@sitecore-jss/sitecore-jss-react": "^22.2.0-canary.30",
     "@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": "04f6c9e59f3ca0b31f4f575c9cf3ee93d6b88f61",
+  "gitHead": "d08b137fb78470b40970e3d7210806f1c954d0e7",
   "files": [
     "dist",
     "types",

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

@@ -37,4 +37,12 @@ export declare class RedirectsMiddleware extends MiddlewareBase {
      * @private
      */
     private getExistsRedirect;
+    /**
+     * 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
+     */
+    private normalizeUrl;
 }