@sitecore-jss/sitecore-jss-nextjs 22.3.1 → 22.4.0-canary.10

package/dist/cjs/index.js

@@ -23,11 +23,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = exports.Image = exports.ComponentBuilder = exports.BYOCWrapper = exports.FEaaSWrapper = exports.NextImage = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getGroomedVariantIds = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EditMode = exports.getContentStylesheetLink = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.MemoryCacheClient = exports.debug = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
-exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.DefaultEmptyFieldEditingComponentText = exports.DefaultEmptyFieldEditingComponentImage = exports.File = exports.getComponentLibraryStylesheetLinks = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = void 0;
+exports.FEaaSComponent = exports.EditFrame = exports.DateField = exports.Text = exports.Image = exports.ComponentBuilder = exports.BYOCWrapper = exports.FEaaSWrapper = exports.NextImage = exports.Placeholder = exports.RichText = exports.Link = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.normalizeSiteRewrite = exports.getSiteRewriteData = exports.getSiteRewrite = exports.GraphQLSiteInfoService = exports.SiteResolver = exports.GraphQLRobotsService = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.MultisiteGraphQLSitemapService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getGroomedVariantIds = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.RestComponentLayoutService = exports.EditMode = exports.getContentStylesheetLink = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.MemoryCacheClient = exports.debug = exports.enableDebug = exports.NativeDataFetcher = exports.constants = void 0;
+exports.EditingScripts = exports.withEmptyFieldEditingComponent = exports.withFieldMetadata = exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.DefaultEmptyFieldEditingComponentText = exports.DefaultEmptyFieldEditingComponentImage = exports.ComponentLibraryLayout = exports.File = exports.getComponentLibraryStylesheetLinks = exports.BYOCComponent = exports.fetchFEaaSComponentServerProps = void 0;
 var sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 Object.defineProperty(exports, "constants", { enumerable: true, get: function () { return sitecore_jss_1.constants; } });
-Object.defineProperty(exports, "AxiosDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.AxiosDataFetcher; } });
 Object.defineProperty(exports, "NativeDataFetcher", { enumerable: true, get: function () { return sitecore_jss_1.NativeDataFetcher; } });
 Object.defineProperty(exports, "enableDebug", { enumerable: true, get: function () { return sitecore_jss_1.enableDebug; } });
 Object.defineProperty(exports, "debug", { enumerable: true, get: function () { return sitecore_jss_1.debug; } });
@@ -40,6 +39,8 @@ Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: f
 Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return layout_1.getFieldValue; } });
 Object.defineProperty(exports, "getContentStylesheetLink", { enumerable: true, get: function () { return layout_1.getContentStylesheetLink; } });
 Object.defineProperty(exports, "EditMode", { enumerable: true, get: function () { return layout_1.EditMode; } });
+var editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+Object.defineProperty(exports, "RestComponentLayoutService", { enumerable: true, get: function () { return editing_1.RestComponentLayoutService; } });
 var media_1 = require("@sitecore-jss/sitecore-jss/media");
 Object.defineProperty(exports, "mediaApi", { enumerable: true, get: function () { return media_1.mediaApi; } });
 var tracking_1 = require("@sitecore-jss/sitecore-jss/tracking");
@@ -99,6 +100,7 @@ Object.defineProperty(exports, "fetchFEaaSComponentServerProps", { enumerable: t
 Object.defineProperty(exports, "BYOCComponent", { enumerable: true, get: function () { return sitecore_jss_react_1.BYOCComponent; } });
 Object.defineProperty(exports, "getComponentLibraryStylesheetLinks", { enumerable: true, get: function () { return sitecore_jss_react_1.getComponentLibraryStylesheetLinks; } });
 Object.defineProperty(exports, "File", { enumerable: true, get: function () { return sitecore_jss_react_1.File; } });
+Object.defineProperty(exports, "ComponentLibraryLayout", { enumerable: true, get: function () { return sitecore_jss_react_1.ComponentLibraryLayout; } });
 Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentImage", { enumerable: true, get: function () { return sitecore_jss_react_1.DefaultEmptyFieldEditingComponentImage; } });
 Object.defineProperty(exports, "DefaultEmptyFieldEditingComponentText", { enumerable: true, get: function () { return sitecore_jss_react_1.DefaultEmptyFieldEditingComponentText; } });
 Object.defineProperty(exports, "VisitorIdentification", { enumerable: true, get: function () { return sitecore_jss_react_1.VisitorIdentification; } });

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

@@ -45,20 +45,28 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
             });
             const createResponse = () => __awaiter(this, void 0, void 0, function* () {
                 var _a;
+                const response = res || server_1.NextResponse.next();
                 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();
+                    return response;
                 }
                 if (this.isPreview(req) || this.excludeRoute(pathname)) {
                     sitecore_jss_1.debug.redirects('skipped (%s)', this.isPreview(req) ? 'preview' : 'route excluded');
-                    return res || server_1.NextResponse.next();
+                    return response;
+                }
+                // Skip prefetch requests from Next.js, which are not original client requests
+                // as they load unnecessary requests that burden the redirects middleware with meaningless traffic
+                if (this.isPrefetch(req)) {
+                    sitecore_jss_1.debug.redirects('skipped (prefetch)');
+                    response.headers.set('x-middleware-cache', 'no-cache');
+                    return response;
                 }
                 site = this.getSite(req, res);
                 // Find the redirect from result of RedirectService
                 const existsRedirect = yield this.getExistsRedirect(req, site.name);
                 if (!existsRedirect) {
                     sitecore_jss_1.debug.redirects('skipped (redirect does not exist)');
-                    return res || server_1.NextResponse.next();
+                    return response;
                 }
                 // Find context site language and replace token
                 if (REGEXP_CONTEXT_SITE_LANG.test(existsRedirect.target) &&
@@ -72,27 +80,26 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                     url.href = existsRedirect.target;
                 }
                 else {
-                    const source = `${url.pathname.replace(/\/*$/gi, '')}${existsRedirect.matchedQueryString}`;
-                    const urlFirstPart = existsRedirect.target.split('/')[1];
+                    const isUrl = (0, utils_1.isRegexOrUrl)(existsRedirect.pattern) === 'url';
+                    const targetParts = existsRedirect.target.split('/');
+                    const urlFirstPart = targetParts[1];
                     if (this.locales.includes(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('?');
-                    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);
+                    const targetSegments = isUrl
+                        ? existsRedirect.target.split('?')
+                        : url.pathname.replace(/\/*$/gi, '') + existsRedirect.matchedQueryString;
+                    const [targetPath, targetQueryString] = isUrl
+                        ? targetSegments
+                        : targetSegments
+                            .replace((0, regex_parser_1.default)(existsRedirect.pattern), existsRedirect.target)
+                            .replace(/^\/\//, '/')
+                            .split('?');
+                    const mergedQueryString = existsRedirect.isQueryStringPreserved
+                        ? (0, utils_1.mergeURLSearchParams)(new URLSearchParams((_a = url.search) !== null && _a !== void 0 ? _a : ''), new URLSearchParams(targetQueryString || ''))
+                        : targetQueryString || '';
+                    const prepareNewURL = new URL(`${targetPath}${mergedQueryString ? '?' + mergedQueryString : ''}`, url.origin);
                     url.href = prepareNewURL.href;
                     url.pathname = prepareNewURL.pathname;
                     url.search = prepareNewURL.search;
@@ -101,16 +108,16 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                 /** return Response redirect with http code of redirect type */
                 switch (existsRedirect.redirectType) {
                     case site_1.REDIRECT_TYPE_301: {
-                        return this.createRedirectResponse(url, res, 301, 'Moved Permanently');
+                        return this.createRedirectResponse(url, response, 301, 'Moved Permanently');
                     }
                     case site_1.REDIRECT_TYPE_302: {
-                        return this.createRedirectResponse(url, res, 302, 'Found');
+                        return this.createRedirectResponse(url, response, 302, 'Found');
                     }
                     case site_1.REDIRECT_TYPE_SERVER_TRANSFER: {
-                        return this.rewrite(url.href, req, res || server_1.NextResponse.next());
+                        return this.rewrite(url.href, req, response);
                     }
                     default:
-                        return res || server_1.NextResponse.next();
+                        return response;
                 }
             });
             const response = yield createResponse();
@@ -152,59 +159,43 @@ 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 { pathname: targetURL, search: targetQS = '', locale } = this.normalizeUrl(req.nextUrl.clone());
+            const normalizedPath = targetURL.replace(/\/*$/gi, '');
+            const redirects = yield this.redirectsService.fetchRedirects(siteName);
             const language = this.getLanguage(req);
             const modifyRedirects = structuredClone(redirects);
+            let matchedQueryString;
             return modifyRedirects.length
                 ? modifyRedirects.find((redirect) => {
+                    var _a;
+                    if ((0, utils_1.isRegexOrUrl)(redirect.pattern) === 'url') {
+                        const parseUrlPattern = redirect.pattern.endsWith('/')
+                            ? redirect.pattern.slice(0, -1).split('?')
+                            : redirect.pattern.split('?');
+                        return ((parseUrlPattern[0] === normalizedPath ||
+                            parseUrlPattern[0] === `/${locale}${normalizedPath}`) &&
+                            (0, utils_1.areURLSearchParamsEqual)(new URLSearchParams((_a = parseUrlPattern[1]) !== null && _a !== void 0 ? _a : ''), new URLSearchParams(targetQS)));
+                    }
                     // Modify the redirect pattern to ignore the language prefix in the path
-                    redirect.pattern = redirect.pattern.replace(RegExp(`^[^]?/${language}/`, 'gi'), '');
+                    // And escapes non-special "?" characters in a string or regex.
+                    redirect.pattern = (0, utils_1.escapeNonSpecialQuestionMarks)(redirect.pattern.replace(new RegExp(`^[^]?/${language}/`, 'gi'), ''));
                     // Prepare the redirect pattern as a regular expression, making it more flexible for matching URLs
                     redirect.pattern = `/^\/${redirect.pattern
                         .replace(/^\/|\/$/g, '') // Removes leading and trailing slashes
                         .replace(/^\^\/|\/\$$/g, '') // Removes unnecessary start (^) and end ($) anchors
                         .replace(/^\^|\$$/g, '') // Further cleans up anchors
-                        .replace(/(?<!\\)\?/g, '\\?') // Escapes question marks in the pattern
                         .replace(/\$\/gi$/g, '')}[\/]?$/i`; // Ensures the pattern allows an optional trailing slash
-                    /**
-                     * This line checks whether the current URL query string (and all its possible permutations)
-                     * matches the redirect pattern.
-                     *
-                     * Query parameters in URLs can come in different orders, but logically they represent the
-                     * same information (e.g., "key1=value1&key2=value2" is the same as "key2=value2&key1=value1").
-                     * To account for this, the method `isPermutedQueryMatch` generates all possible permutations
-                     * of the query parameters and checks if any of those permutations match the regex pattern for the redirect.
-                     *
-                     * NOTE: This fix is specifically implemented for Netlify, where query parameters are sometimes
-                     * automatically sorted, which can cause issues with matching redirects if the order of query
-                     * parameters is important. By checking every possible permutation, we ensure that redirects
-                     * work correctly on Netlify despite this behavior.
-                     *
-                     * It passes several pieces of information to the function:
-                     * 1. `pathname`: The normalized URL path without query parameters (e.g., '/about').
-                     * 2. `queryString`: The current query string from the URL, which will be permuted and matched (e.g., '?key1=value1&key2=value2').
-                     * 3. `pattern`: The regex pattern for the redirect that we are trying to match against the URL (e.g., '/about?key1=value1').
-                     * 4. `locale`: The locale part of the URL (if any), which helps support multilingual URLs.
-                     *
-                     * If one of the permutations of the query string matches the redirect pattern, the function
-                     * returns the matched query string, which is stored in `matchedQueryString`. If no match is found,
-                     * it returns `undefined`. The `matchedQueryString` is later used to indicate whether the query
-                     * string contributed to a successful redirect match.
-                     */
-                    const matchedQueryString = this.isPermutedQueryMatch({
-                        pathname: targetURL,
-                        queryString: targetQS,
-                        pattern: redirect.pattern,
-                        locale,
-                    });
+                    matchedQueryString = [
+                        (0, regex_parser_1.default)(redirect.pattern).test(`${normalizedPath}${targetQS}`),
+                        (0, regex_parser_1.default)(redirect.pattern).test(`/${locale}${normalizedPath}${targetQS}`),
+                    ].some(Boolean)
+                        ? targetQS
+                        : undefined;
                     // Save the matched query string (if found) into the redirect object
                     redirect.matchedQueryString = matchedQueryString || '';
-                    // Return the redirect if the URL path or any query string permutation matches the pattern
-                    return (((0, regex_parser_1.default)(redirect.pattern).test(targetURL) ||
+                    return (!!((0, regex_parser_1.default)(redirect.pattern).test(targetURL) ||
                         (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${targetURL}`) ||
-                        matchedQueryString) &&
-                        (redirect.locale ? redirect.locale.toLowerCase() === locale.toLowerCase() : true));
+                        matchedQueryString) && (redirect.locale ? redirect.locale.toLowerCase() === locale.toLowerCase() : true));
                 })
                 : undefined;
         });
@@ -269,24 +260,5 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
         }
         return redirect;
     }
-    /**
-     * Checks if the current URL query matches the provided pattern, considering all permutations of query parameters.
-     * It constructs all possible query parameter permutations and tests them against the pattern.
-     * @param {object} params - The parameters for the URL match.
-     * @param {string} params.pathname - The current URL pathname.
-     * @param {string} params.queryString - The current URL query string.
-     * @param {string} params.pattern - The regex pattern to test the constructed URLs against.
-     * @param {string} [params.locale] - The locale prefix to include in the URL if present.
-     * @returns {string | undefined} - return query string if any of the query permutations match the provided pattern, undefined otherwise.
-     */
-    isPermutedQueryMatch({ pathname, queryString, pattern, locale, }) {
-        const paramsArray = Array.from(new URLSearchParams(queryString).entries());
-        const listOfPermuted = (0, utils_1.getPermutations)(paramsArray).map((permutation) => '?' + permutation.map(([key, value]) => `${key}=${value}`).join('&'));
-        const normalizedPath = pathname.replace(/\/*$/gi, '');
-        return listOfPermuted.find((query) => [
-            (0, regex_parser_1.default)(pattern).test(`${normalizedPath}${query}`),
-            (0, regex_parser_1.default)(pattern).test(`/${locale}${normalizedPath}${query}`),
-        ].some(Boolean));
-    }
 }
 exports.RedirectsMiddleware = RedirectsMiddleware;

package/dist/esm/editing/editing-data-service.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { QUERY_PARAM_EDITING_SECRET } from '@sitecore-jss/sitecore-jss/editing';
-import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
+import { NativeDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
 import { editingDataDiskCache } from './editing-data-cache';
 import { getJssEditingSecret } from '../utils/utils';
 /**
@@ -85,7 +85,7 @@ export class ServerlessEditingDataService {
         if (!this.apiRoute.includes('[key]')) {
             throw new Error(`The specified apiRoute '${this.apiRoute}' is missing '[key]'.`);
         }
-        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new AxiosDataFetcher({ debugger: debug.editing });
+        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new NativeDataFetcher({ debugger: debug.editing });
     }
     /**
      * Stores Sitecore editor payload data for later retrieval by key

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

@@ -8,8 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { STATIC_PROPS_ID, SERVER_PROPS_ID } from 'next/constants';
-import { AxiosDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
-import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
+import { NativeDataFetcher, debug } from '@sitecore-jss/sitecore-jss';
+import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 import { QUERY_PARAM_EDITING_SECRET, EDITING_ALLOWED_ORIGINS, } from '@sitecore-jss/sitecore-jss/editing';
 import { editingDataService } from './editing-data-service';
 import { getJssEditingSecret } from '../utils/utils';
@@ -49,7 +49,7 @@ export class ChromesHandler extends RenderMiddlewareBase {
             return `${process.env.VERCEL ? 'https' : 'http'}://${req.headers.host}`;
         };
         this.editingDataService = (_a = config === null || config === void 0 ? void 0 : config.editingDataService) !== null && _a !== void 0 ? _a : editingDataService;
-        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new AxiosDataFetcher({ debugger: debug.editing });
+        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new NativeDataFetcher({ debugger: debug.editing });
         this.resolvePageUrl = (_c = config === null || config === void 0 ? void 0 : config.resolvePageUrl) !== null && _c !== void 0 ? _c : this.defaultResolvePageUrl;
         this.resolveServerUrl = (_d = config === null || config === void 0 ? void 0 : config.resolveServerUrl) !== null && _d !== void 0 ? _d : this.defaultResolveServerUrl;
     }
@@ -76,7 +76,7 @@ export class ChromesHandler extends RenderMiddlewareBase {
                 const cookies = res.getHeader('Set-Cookie');
                 headers.cookie = `${headers.cookie ? headers.cookie + ';' : ''}${cookies.join(';')}`;
                 // Make actual render request for page route, passing on preview cookies as well as any approved query string parameters.
-                // Note timestamp effectively disables caching the request in Axios (no amount of cache headers seemed to do it)
+                // Note timestamp effectively disables caching the request (no amount of cache headers seemed to do it)
                 debug.editing('fetching page route for %s', editingData.path);
                 const requestUrl = new URL(this.resolvePageUrl({ serverUrl, itemPath: editingData.path }));
                 for (const key in params) {
@@ -122,8 +122,7 @@ export class ChromesHandler extends RenderMiddlewareBase {
             catch (err) {
                 const error = err;
                 console.error(error);
-                if (error.response || error.request) {
-                    // Axios error, which could mean the server or page URL isn't quite right, so provide a more helpful hint
+                if (error.response) {
                     console.info(
                     // eslint-disable-next-line quotes
                     "Hint: for non-standard server or Next.js route configurations, you may need to override the 'resolveServerUrl' or 'resolvePageUrl' available on the 'EditingRenderMiddleware' config.");
@@ -179,6 +178,18 @@ export const isEditingMetadataPreviewData = (data) => {
         'editMode' in data &&
         data.editMode === EditMode.Metadata);
 };
+/**
+ * Type guard for Component Library mode
+ * @param {object} data preview data to check
+ * @returns true if the data is EditingMetadataPreviewData
+ * @see EditingMetadataPreviewData
+ */
+export const isComponentLibraryPreviewData = (data) => {
+    return (typeof data === 'object' &&
+        data !== null &&
+        'mode' in data &&
+        data.mode === 'library');
+};
 /**
  * Handler for the Editing Metadata GET requests.
  * This handler is responsible for redirecting the request to the page route.
@@ -192,13 +203,17 @@ export class MetadataHandler {
         var _a, _b, _c;
         const { query } = req;
         const startTimestamp = Date.now();
-        const requiredQueryParams = [
+        const mode = query.mode;
+        const metadataDefaultRequiredParams = ['sc_site', 'sc_itemid', 'sc_lang', 'route', 'mode'];
+        const metadataComponentRequiredParams = [
             'sc_site',
             'sc_itemid',
+            'sc_renderingId',
+            'sc_uid',
             'sc_lang',
-            'route',
             'mode',
         ];
+        const requiredQueryParams = mode === 'library' ? metadataComponentRequiredParams : metadataDefaultRequiredParams;
         const missingQueryParams = requiredQueryParams.filter((param) => !query[param]);
         // Validate query parameters
         if (missingQueryParams.length) {
@@ -207,21 +222,40 @@ export class MetadataHandler {
                 html: `<html><body>Missing required query parameters: ${missingQueryParams.join(', ')}</body></html>`,
             });
         }
-        res.setPreviewData({
-            site: query.sc_site,
-            itemId: query.sc_itemid,
-            language: query.sc_lang,
-            // for sc_variantId we may employ multiple variants (page-layout + component level)
-            variantIds: ((_a = query.sc_variant) === null || _a === void 0 ? void 0 : _a.split(',')) || [DEFAULT_VARIANT],
-            version: query.sc_version,
-            editMode: EditMode.Metadata,
-            pageState: query.mode,
-            layoutKind: query.sc_layoutKind,
-        }, 
-        // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
-        {
-            maxAge: 3,
-        });
+        if (mode === 'library') {
+            // dedicated route and layout to SSR component library
+            query.route = '/component-library/render';
+            res.setPreviewData({
+                itemId: query.sc_itemid,
+                componentUid: query.sc_uid,
+                renderingId: query.sc_renderingId,
+                language: query.sc_lang,
+                site: query.sc_site,
+                pageState: LayoutServicePageState.Normal,
+                mode: 'library',
+                dataSourceId: query.sc_datasourceId,
+                version: query.sc_version,
+            }, {
+                maxAge: 3,
+            });
+        }
+        else {
+            res.setPreviewData({
+                site: query.sc_site,
+                itemId: query.sc_itemid,
+                language: query.sc_lang,
+                // for sc_variantId we may employ multiple variants (page-layout + component level)
+                variantIds: ((_a = query.sc_variant) === null || _a === void 0 ? void 0 : _a.split(',')) || [DEFAULT_VARIANT],
+                version: query.sc_version,
+                editMode: EditMode.Metadata,
+                pageState: query.mode,
+                layoutKind: query.sc_layoutKind,
+            }, 
+            // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
+            {
+                maxAge: 3,
+            });
+        }
         // Cookies with the SameSite=Lax policy set by Next.js setPreviewData function causes CORS issue
         // when Next.js preview mode is activated, resulting the page to render in normal mode instead.
         // By replacing it with "SameSite=None; Secure", we ensure cookies are correctly sent with

package/dist/esm/editing/index.js

@@ -1,8 +1,9 @@
 export { GraphQLEditingService } from '@sitecore-jss/sitecore-jss/editing';
 export { EditingDataDiskCache } from './editing-data-cache';
 export { EditingDataMiddleware } from './editing-data-middleware';
-export { EditingRenderMiddleware, isEditingMetadataPreviewData, } from './editing-render-middleware';
+export { EditingRenderMiddleware, isEditingMetadataPreviewData, isComponentLibraryPreviewData, } from './editing-render-middleware';
 export { BasicEditingDataService, ServerlessEditingDataService, editingDataService, } from './editing-data-service';
 export { VercelEditingDataCache } from './vercel-editing-data-cache';
 export { FEAASRenderMiddleware } from './feaas-render-middleware';
 export { EditingConfigMiddleware, } from './editing-config-middleware';
+export { RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from '@sitecore-jss/sitecore-jss/layout';

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

@@ -25,13 +25,15 @@ export class RenderMiddlewareBase {
          * @returns Object of approved headers
          */
         this.getHeadersForPropagation = (headers) => {
-            const result = {};
-            EDITING_PASS_THROUGH_HEADERS.forEach((header) => {
-                if (headers[header]) {
-                    result[header] = headers[header];
+            // Filter and normalize headers
+            const filteredHeaders = EDITING_PASS_THROUGH_HEADERS.reduce((acc, header) => {
+                const value = headers[header];
+                if (value) {
+                    acc[header] = Array.isArray(value) ? value.join(', ') : value;
                 }
-            });
-            return result;
+                return acc;
+            }, {});
+            return filteredHeaders;
         };
     }
 }

package/dist/esm/index.js

@@ -1,5 +1,6 @@
-export { constants, AxiosDataFetcher, NativeDataFetcher, enableDebug, debug, MemoryCacheClient, } from '@sitecore-jss/sitecore-jss';
+export { constants, NativeDataFetcher, enableDebug, debug, MemoryCacheClient, } from '@sitecore-jss/sitecore-jss';
 export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, getContentStylesheetLink, EditMode, } from '@sitecore-jss/sitecore-jss/layout';
+export { RestComponentLayoutService } from '@sitecore-jss/sitecore-jss/editing';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { trackingApi, } from '@sitecore-jss/sitecore-jss/tracking';
 export { GraphQLDictionaryService, RestDictionaryService, } from '@sitecore-jss/sitecore-jss/i18n';
@@ -19,4 +20,4 @@ import * as BYOCWrapper from './components/BYOCWrapper';
 export { FEaaSWrapper };
 export { BYOCWrapper };
 export { ComponentBuilder } from './ComponentBuilder';
-export { Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, BYOCComponent, getComponentLibraryStylesheetLinks, File, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';
+export { Image, Text, DateField, EditFrame, FEaaSComponent, fetchFEaaSComponentServerProps, BYOCComponent, getComponentLibraryStylesheetLinks, File, ComponentLibraryLayout, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';