@sitecore-jss/sitecore-jss-nextjs 21.1.0-canary.6 → 21.1.0-canary.61

package/dist/cjs/components/EditingComponentPlaceholder.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditingComponentPlaceholder = void 0;
+const react_1 = __importDefault(require("react"));
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const Placeholder_1 = require("./Placeholder");
+const EditingComponentPlaceholder = ({ rendering, }) => (react_1.default.createElement("div", { id: layout_1.EDITING_COMPONENT_ID },
+    react_1.default.createElement(Placeholder_1.Placeholder, { name: layout_1.EDITING_COMPONENT_PLACEHOLDER, rendering: rendering })));
+exports.EditingComponentPlaceholder = EditingComponentPlaceholder;

package/dist/cjs/components/Link.js

@@ -43,13 +43,13 @@ exports.Link = react_1.forwardRef((props, ref) => {
     const value = (field.href
         ? field
         : field.value);
-    const { href, querystring } = value;
+    const { href, querystring, anchor } = value;
     const isEditing = editable && field.editable;
     if (href && !isEditing) {
         const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
         // determine if a link is a route or not.
         if (internalLinkMatcher.test(href)) {
-            return (react_1.default.createElement(link_1.default, { href: { pathname: href, query: querystring }, key: "link", locale: false },
+            return (react_1.default.createElement(link_1.default, { href: { pathname: href, query: querystring, hash: anchor }, key: "link", locale: false },
                 react_1.default.createElement("a", Object.assign({ title: value.title, target: value.target, className: value.class }, htmlLinkProps, { ref: ref }),
                     text,
                     children)));

package/dist/cjs/editing/editing-data-cache.js

@@ -22,19 +22,24 @@ class EditingDataDiskCache {
     }
     set(key, editingData) {
         const filePath = this.cache.set(key, JSON.stringify(editingData));
-        if (!filePath || filePath.length === 0) {
-            throw new Error(`Editing data cache not set for key ${key} at ${this.cache.root}`);
-        }
+        return new Promise((resolve, reject) => {
+            if (!filePath || filePath.length === 0) {
+                reject(new Error(`Editing data cache not set for key ${key} at ${this.cache.root}`));
+            }
+            resolve();
+        });
     }
     get(key) {
         const entry = this.cache.get(key);
-        if (!entry.isCached) {
-            console.warn(`Editing data cache miss for key ${key} at ${this.cache.root}`);
-            return undefined;
-        }
-        // Remove to preserve disk-space (as a macrotask so as not to block current execution)
-        setTimeout(() => this.cache.remove(key));
-        return JSON.parse(entry.value);
+        return new Promise((resolve) => {
+            if (!entry.isCached) {
+                console.warn(`Editing data cache miss for key ${key} at ${this.cache.root}`);
+                resolve(undefined);
+            }
+            // Remove to preserve disk-space (as a macrotask so as not to block current execution)
+            setTimeout(() => this.cache.remove(key));
+            resolve(JSON.parse(entry.value));
+        });
     }
 }
 exports.EditingDataDiskCache = EditingDataDiskCache;

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

@@ -36,7 +36,7 @@ class EditingDataMiddleware {
             switch (method) {
                 case 'GET': {
                     // Get cache value
-                    const data = this.editingDataCache.get(key);
+                    const data = yield this.editingDataCache.get(key);
                     res.status(200).json(data);
                     break;
                 }
@@ -46,7 +46,7 @@ class EditingDataMiddleware {
                     }
                     else {
                         // Set cache value
-                        this.editingDataCache.set(key, body);
+                        yield this.editingDataCache.set(key, body);
                         res.status(200).end();
                     }
                     break;

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

@@ -56,7 +56,7 @@ class BasicEditingDataService {
                 key,
             };
             sitecore_jss_1.debug.editing('storing editing data for %o: %o', previewData, data);
-            this.editingDataCache.set(key, data);
+            yield this.editingDataCache.set(key, data);
             return { key };
         });
     }
@@ -69,7 +69,7 @@ class BasicEditingDataService {
         return __awaiter(this, void 0, void 0, function* () {
             const editingPreviewData = previewData;
             sitecore_jss_1.debug.editing('retrieving editing data for %o', previewData);
-            return this.editingDataCache.get(editingPreviewData.key);
+            return yield this.editingDataCache.get(editingPreviewData.key);
         });
     }
 }

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

@@ -12,6 +12,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractEditingData = exports.EditingRenderMiddleware = void 0;
 const constants_1 = require("next/constants");
 const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const node_html_parser_1 = require("node-html-parser");
 const editing_data_service_1 = require("./editing-data-service");
 const utils_1 = require("../utils");
 /**
@@ -25,7 +27,7 @@ class EditingRenderMiddleware {
     constructor(config) {
         var _a, _b, _c, _d;
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
-            var _e;
+            var _e, _f;
             const { method, query, body, headers } = req;
             sitecore_jss_1.debug.editing('editing render middleware start: %o', {
                 method,
@@ -94,6 +96,12 @@ class EditingRenderMiddleware {
                 // certain route configurations (e.g. multiple catch-all routes).
                 // The following line will trick it into thinking we're SSR, thus avoiding any router.replace.
                 html = html.replace(constants_1.STATIC_PROPS_ID, constants_1.SERVER_PROPS_ID);
+                if (editingData.layoutData.sitecore.context.renderingType === layout_1.RenderingType.Component) {
+                    // Handle component rendering. Extract component markup only
+                    html = (_f = node_html_parser_1.parse(html).getElementById(layout_1.EDITING_COMPONENT_ID)) === null || _f === void 0 ? void 0 : _f.innerHTML;
+                    if (!html)
+                        throw new Error(`Failed to render component for ${requestUrl}`);
+                }
                 const body = { html };
                 // Return expected JSON result
                 sitecore_jss_1.debug.editing('editing render middleware end: %o', { status: 200, body });

package/dist/cjs/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.DateField = exports.Text = exports.Image = exports.NextImage = exports.Placeholder = exports.RichText = exports.Link = exports.getPublicUrl = exports.handleEditorFastRefresh = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.GraphQLRequestClient = exports.GraphQLRobotsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.EnvHelper = exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
+exports.useSitecoreContext = exports.withSitecoreContext = exports.SitecoreContextReactContext = exports.SitecoreContext = exports.VisitorIdentification = exports.File = exports.DateField = exports.Text = exports.Image = exports.NextImage = exports.EditingComponentPlaceholder = exports.Placeholder = exports.RichText = exports.Link = exports.getPublicUrl = exports.handleEditorFastRefresh = exports.useComponentProps = exports.ComponentPropsContext = exports.ComponentPropsReactContext = exports.GraphQLErrorPagesService = exports.GraphQLSitemapXmlService = exports.GraphQLSitemapService = exports.DisconnectedSitemapService = exports.ComponentPropsService = exports.GraphQLRequestClient = exports.GraphQLRobotsService = exports.CdpHelper = exports.normalizePersonalizedRewrite = exports.getPersonalizedRewriteData = exports.getPersonalizedRewrite = exports.personalizeLayout = exports.RestDictionaryService = exports.GraphQLDictionaryService = exports.trackingApi = exports.mediaApi = exports.EDITING_COMPONENT_ID = exports.EDITING_COMPONENT_PLACEHOLDER = exports.RenderingType = exports.getFieldValue = exports.getChildPlaceholder = exports.RestLayoutService = exports.GraphQLLayoutService = exports.LayoutServicePageState = exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.enableDebug = exports.NativeDataFetcher = exports.AxiosDataFetcher = exports.constants = void 0;
+exports.withDatasourceCheck = exports.withPlaceholder = exports.withEditorChromes = 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; } });
@@ -10,13 +11,15 @@ var utils_1 = require("@sitecore-jss/sitecore-jss/utils");
 Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_1.isEditorActive; } });
 Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_1.resetEditorChromes; } });
 Object.defineProperty(exports, "resolveUrl", { enumerable: true, get: function () { return utils_1.resolveUrl; } });
-Object.defineProperty(exports, "EnvHelper", { enumerable: true, get: function () { return utils_1.EnvHelper; } });
 var layout_1 = require("@sitecore-jss/sitecore-jss/layout");
 Object.defineProperty(exports, "LayoutServicePageState", { enumerable: true, get: function () { return layout_1.LayoutServicePageState; } });
 Object.defineProperty(exports, "GraphQLLayoutService", { enumerable: true, get: function () { return layout_1.GraphQLLayoutService; } });
 Object.defineProperty(exports, "RestLayoutService", { enumerable: true, get: function () { return layout_1.RestLayoutService; } });
 Object.defineProperty(exports, "getChildPlaceholder", { enumerable: true, get: function () { return layout_1.getChildPlaceholder; } });
 Object.defineProperty(exports, "getFieldValue", { enumerable: true, get: function () { return layout_1.getFieldValue; } });
+Object.defineProperty(exports, "RenderingType", { enumerable: true, get: function () { return layout_1.RenderingType; } });
+Object.defineProperty(exports, "EDITING_COMPONENT_PLACEHOLDER", { enumerable: true, get: function () { return layout_1.EDITING_COMPONENT_PLACEHOLDER; } });
+Object.defineProperty(exports, "EDITING_COMPONENT_ID", { enumerable: true, get: function () { return layout_1.EDITING_COMPONENT_ID; } });
 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");
@@ -56,6 +59,8 @@ var RichText_1 = require("./components/RichText");
 Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
 var Placeholder_1 = require("./components/Placeholder");
 Object.defineProperty(exports, "Placeholder", { enumerable: true, get: function () { return Placeholder_1.Placeholder; } });
+var EditingComponentPlaceholder_1 = require("./components/EditingComponentPlaceholder");
+Object.defineProperty(exports, "EditingComponentPlaceholder", { enumerable: true, get: function () { return EditingComponentPlaceholder_1.EditingComponentPlaceholder; } });
 var NextImage_1 = require("./components/NextImage");
 Object.defineProperty(exports, "NextImage", { enumerable: true, get: function () { return NextImage_1.NextImage; } });
 var sitecore_jss_react_1 = require("@sitecore-jss/sitecore-jss-react");

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

@@ -38,7 +38,8 @@ class PersonalizeMiddleware {
             }
             if (response.redirected || // Don't attempt to personalize a redirect
                 this.isPreview(req) || // No need to personalize for preview (layout data is already prepared for preview)
-                (this.config.excludeRoute || this.excludeRoute)(pathname)) {
+                this.excludeRoute(pathname) ||
+                (this.config.excludeRoute && this.config.excludeRoute(pathname))) {
                 sitecore_jss_1.debug.personalize('skipped (%s)', response.redirected ? 'redirected' : this.isPreview(req) ? 'preview' : 'route excluded');
                 return response;
             }
@@ -95,10 +96,11 @@ class PersonalizeMiddleware {
         // (underlying default 'cross-fetch' is not currently compatible: https://github.com/lquixada/cross-fetch/issues/78)
         this.personalizeService = new personalize_1.GraphQLPersonalizeService(Object.assign(Object.assign({}, config.edgeConfig), { fetch: fetch }));
         // NOTE: same here, we provide NativeDataFetcher for compatibility on Next.js Edge Runtime
-        this.cdpService = new personalize_1.CdpService(Object.assign(Object.assign({}, config.cdpConfig), { dataFetcherResolver: ({ timeout }) => {
+        this.cdpService = new personalize_1.CdpService(Object.assign(Object.assign({}, config.cdpConfig), { dataFetcherResolver: ({ timeout, headers, }) => {
                 const fetcher = new sitecore_jss_1.NativeDataFetcher({
                     debugger: sitecore_jss_1.debug.personalize,
                     timeout,
+                    headers,
                 });
                 return (url, data) => fetcher.fetch(url, data);
             } }));

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

@@ -25,7 +25,13 @@ class RedirectsMiddleware {
      * @param {RedirectsMiddlewareConfig} [config] redirects middleware config
      */
     constructor(config) {
+        this.config = config;
         this.handler = (req) => __awaiter(this, void 0, void 0, function* () {
+            if ((this.config.disabled && this.config.disabled(req, server_1.NextResponse.next())) ||
+                this.excludeRoute(req.nextUrl.pathname) ||
+                (this.config.excludeRoute && this.config.excludeRoute(req.nextUrl.pathname))) {
+                return server_1.NextResponse.next();
+            }
             // Find the redirect from result of RedirectService
             const existsRedirect = yield this.getExistsRedirect(req);
             if (!existsRedirect) {
@@ -73,6 +79,16 @@ class RedirectsMiddleware {
     getHandler() {
         return this.handler;
     }
+    excludeRoute(pathname) {
+        if (pathname.includes('.') || // Ignore files
+            pathname.startsWith('/api/') || // Ignore Next.js API calls
+            pathname.startsWith('/sitecore/') || // Ignore Sitecore API calls
+            pathname.startsWith('/_next') // Ignore next service calls
+        ) {
+            return true;
+        }
+        return false;
+    }
     /**
      * Method returns RedirectInfo when matches
      * @param {NextRequest} req
@@ -82,13 +98,15 @@ class RedirectsMiddleware {
     getExistsRedirect(req) {
         return __awaiter(this, void 0, void 0, function* () {
             const redirects = yield this.redirectsService.fetchRedirects();
-            return redirects.find((redirect) => {
-                return ((regex_parser_1.default(redirect.pattern.toLowerCase()).test(req.nextUrl.pathname.toLowerCase()) ||
-                    regex_parser_1.default(redirect.pattern.toLowerCase()).test(`/${req.nextUrl.locale}${req.nextUrl.pathname}`.toLowerCase())) &&
-                    (redirect.locale
-                        ? redirect.locale.toLowerCase() === req.nextUrl.locale.toLowerCase()
-                        : true));
-            });
+            return redirects.length
+                ? redirects.find((redirect) => {
+                    return ((regex_parser_1.default(redirect.pattern.toLowerCase()).test(req.nextUrl.pathname.toLowerCase()) ||
+                        regex_parser_1.default(redirect.pattern.toLowerCase()).test(`/${req.nextUrl.locale}${req.nextUrl.pathname}`.toLowerCase())) &&
+                        (redirect.locale
+                            ? redirect.locale.toLowerCase() === req.nextUrl.locale.toLowerCase()
+                            : true));
+                })
+                : undefined;
         });
     }
 }

package/dist/cjs/monitoring/healthcheck-middleware.js

@@ -0,0 +1,30 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HealthcheckMiddleware = void 0;
+/**
+ * Middleware / handler for use in healthcheck Next.js API route (e.g. '/api/healthz').
+ */
+class HealthcheckMiddleware {
+    constructor() {
+        this.handler = (_req, res) => __awaiter(this, void 0, void 0, function* () {
+            res.status(200).send('Healthy');
+        });
+    }
+    /**
+     * Gets the Next.js API route handler
+     * @returns route handler
+     */
+    getHandler() {
+        return this.handler;
+    }
+}
+exports.HealthcheckMiddleware = HealthcheckMiddleware;

package/dist/cjs/monitoring/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HealthcheckMiddleware = void 0;
+var healthcheck_middleware_1 = require("./healthcheck-middleware");
+Object.defineProperty(exports, "HealthcheckMiddleware", { enumerable: true, get: function () { return healthcheck_middleware_1.HealthcheckMiddleware; } });

package/dist/esm/components/EditingComponentPlaceholder.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { EDITING_COMPONENT_ID, EDITING_COMPONENT_PLACEHOLDER, } from '@sitecore-jss/sitecore-jss/layout';
+import { Placeholder } from './Placeholder';
+export const EditingComponentPlaceholder = ({ rendering, }) => (React.createElement("div", { id: EDITING_COMPONENT_ID },
+    React.createElement(Placeholder, { name: EDITING_COMPONENT_PLACEHOLDER, rendering: rendering })));

package/dist/esm/components/Link.js

@@ -18,13 +18,13 @@ export const Link = forwardRef((props, ref) => {
     const value = (field.href
         ? field
         : field.value);
-    const { href, querystring } = value;
+    const { href, querystring, anchor } = value;
     const isEditing = editable && field.editable;
     if (href && !isEditing) {
         const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
         // determine if a link is a route or not.
         if (internalLinkMatcher.test(href)) {
-            return (React.createElement(NextLink, { href: { pathname: href, query: querystring }, key: "link", locale: false },
+            return (React.createElement(NextLink, { href: { pathname: href, query: querystring, hash: anchor }, key: "link", locale: false },
                 React.createElement("a", Object.assign({ title: value.title, target: value.target, className: value.class }, htmlLinkProps, { ref: ref }),
                     text,
                     children)));

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

@@ -16,19 +16,24 @@ export class EditingDataDiskCache {
     }
     set(key, editingData) {
         const filePath = this.cache.set(key, JSON.stringify(editingData));
-        if (!filePath || filePath.length === 0) {
-            throw new Error(`Editing data cache not set for key ${key} at ${this.cache.root}`);
-        }
+        return new Promise((resolve, reject) => {
+            if (!filePath || filePath.length === 0) {
+                reject(new Error(`Editing data cache not set for key ${key} at ${this.cache.root}`));
+            }
+            resolve();
+        });
     }
     get(key) {
         const entry = this.cache.get(key);
-        if (!entry.isCached) {
-            console.warn(`Editing data cache miss for key ${key} at ${this.cache.root}`);
-            return undefined;
-        }
-        // Remove to preserve disk-space (as a macrotask so as not to block current execution)
-        setTimeout(() => this.cache.remove(key));
-        return JSON.parse(entry.value);
+        return new Promise((resolve) => {
+            if (!entry.isCached) {
+                console.warn(`Editing data cache miss for key ${key} at ${this.cache.root}`);
+                resolve(undefined);
+            }
+            // Remove to preserve disk-space (as a macrotask so as not to block current execution)
+            setTimeout(() => this.cache.remove(key));
+            resolve(JSON.parse(entry.value));
+        });
     }
 }
 /** EditingDataDiskCache singleton */

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

@@ -33,7 +33,7 @@ export class EditingDataMiddleware {
             switch (method) {
                 case 'GET': {
                     // Get cache value
-                    const data = this.editingDataCache.get(key);
+                    const data = yield this.editingDataCache.get(key);
                     res.status(200).json(data);
                     break;
                 }
@@ -43,7 +43,7 @@ export class EditingDataMiddleware {
                     }
                     else {
                         // Set cache value
-                        this.editingDataCache.set(key, body);
+                        yield this.editingDataCache.set(key, body);
                         res.status(200).end();
                     }
                     break;

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

@@ -52,7 +52,7 @@ export class BasicEditingDataService {
                 key,
             };
             debug.editing('storing editing data for %o: %o', previewData, data);
-            this.editingDataCache.set(key, data);
+            yield this.editingDataCache.set(key, data);
             return { key };
         });
     }
@@ -65,7 +65,7 @@ export class BasicEditingDataService {
         return __awaiter(this, void 0, void 0, function* () {
             const editingPreviewData = previewData;
             debug.editing('retrieving editing data for %o', previewData);
-            return this.editingDataCache.get(editingPreviewData.key);
+            return yield this.editingDataCache.get(editingPreviewData.key);
         });
     }
 }

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

@@ -9,6 +9,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 { EDITING_COMPONENT_ID, RenderingType } from '@sitecore-jss/sitecore-jss/layout';
+import { parse } from 'node-html-parser';
 import { editingDataService, QUERY_PARAM_EDITING_SECRET, } from './editing-data-service';
 import { getJssEditingSecret } from '../utils';
 /**
@@ -22,7 +24,7 @@ export class EditingRenderMiddleware {
     constructor(config) {
         var _a, _b, _c, _d;
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
-            var _e;
+            var _e, _f;
             const { method, query, body, headers } = req;
             debug.editing('editing render middleware start: %o', {
                 method,
@@ -91,6 +93,12 @@ export class EditingRenderMiddleware {
                 // certain route configurations (e.g. multiple catch-all routes).
                 // The following line will trick it into thinking we're SSR, thus avoiding any router.replace.
                 html = html.replace(STATIC_PROPS_ID, SERVER_PROPS_ID);
+                if (editingData.layoutData.sitecore.context.renderingType === RenderingType.Component) {
+                    // Handle component rendering. Extract component markup only
+                    html = (_f = parse(html).getElementById(EDITING_COMPONENT_ID)) === null || _f === void 0 ? void 0 : _f.innerHTML;
+                    if (!html)
+                        throw new Error(`Failed to render component for ${requestUrl}`);
+                }
                 const body = { html };
                 // Return expected JSON result
                 debug.editing('editing render middleware end: %o', { status: 200, body });

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export { constants, AxiosDataFetcher, NativeDataFetcher, enableDebug, } from '@sitecore-jss/sitecore-jss';
-export { isEditorActive, resetEditorChromes, resolveUrl, EnvHelper, } from '@sitecore-jss/sitecore-jss/utils';
-export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, } from '@sitecore-jss/sitecore-jss/layout';
+export { isEditorActive, resetEditorChromes, resolveUrl } from '@sitecore-jss/sitecore-jss/utils';
+export { LayoutServicePageState, GraphQLLayoutService, RestLayoutService, getChildPlaceholder, getFieldValue, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from '@sitecore-jss/sitecore-jss/layout';
 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';
@@ -16,5 +16,6 @@ export { handleEditorFastRefresh, getPublicUrl } from './utils';
 export { Link } from './components/Link';
 export { RichText } from './components/RichText';
 export { Placeholder } from './components/Placeholder';
+export { EditingComponentPlaceholder } from './components/EditingComponentPlaceholder';
 export { NextImage } from './components/NextImage';
 export { Image, Text, DateField, File, VisitorIdentification, SitecoreContext, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, } from '@sitecore-jss/sitecore-jss-react';

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

@@ -35,7 +35,8 @@ export class PersonalizeMiddleware {
             }
             if (response.redirected || // Don't attempt to personalize a redirect
                 this.isPreview(req) || // No need to personalize for preview (layout data is already prepared for preview)
-                (this.config.excludeRoute || this.excludeRoute)(pathname)) {
+                this.excludeRoute(pathname) ||
+                (this.config.excludeRoute && this.config.excludeRoute(pathname))) {
                 debug.personalize('skipped (%s)', response.redirected ? 'redirected' : this.isPreview(req) ? 'preview' : 'route excluded');
                 return response;
             }
@@ -92,10 +93,11 @@ export class PersonalizeMiddleware {
         // (underlying default 'cross-fetch' is not currently compatible: https://github.com/lquixada/cross-fetch/issues/78)
         this.personalizeService = new GraphQLPersonalizeService(Object.assign(Object.assign({}, config.edgeConfig), { fetch: fetch }));
         // NOTE: same here, we provide NativeDataFetcher for compatibility on Next.js Edge Runtime
-        this.cdpService = new CdpService(Object.assign(Object.assign({}, config.cdpConfig), { dataFetcherResolver: ({ timeout }) => {
+        this.cdpService = new CdpService(Object.assign(Object.assign({}, config.cdpConfig), { dataFetcherResolver: ({ timeout, headers, }) => {
                 const fetcher = new NativeDataFetcher({
                     debugger: debug.personalize,
                     timeout,
+                    headers,
                 });
                 return (url, data) => fetcher.fetch(url, data);
             } }));

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

@@ -19,7 +19,13 @@ export class RedirectsMiddleware {
      * @param {RedirectsMiddlewareConfig} [config] redirects middleware config
      */
     constructor(config) {
+        this.config = config;
         this.handler = (req) => __awaiter(this, void 0, void 0, function* () {
+            if ((this.config.disabled && this.config.disabled(req, NextResponse.next())) ||
+                this.excludeRoute(req.nextUrl.pathname) ||
+                (this.config.excludeRoute && this.config.excludeRoute(req.nextUrl.pathname))) {
+                return NextResponse.next();
+            }
             // Find the redirect from result of RedirectService
             const existsRedirect = yield this.getExistsRedirect(req);
             if (!existsRedirect) {
@@ -67,6 +73,16 @@ export class RedirectsMiddleware {
     getHandler() {
         return this.handler;
     }
+    excludeRoute(pathname) {
+        if (pathname.includes('.') || // Ignore files
+            pathname.startsWith('/api/') || // Ignore Next.js API calls
+            pathname.startsWith('/sitecore/') || // Ignore Sitecore API calls
+            pathname.startsWith('/_next') // Ignore next service calls
+        ) {
+            return true;
+        }
+        return false;
+    }
     /**
      * Method returns RedirectInfo when matches
      * @param {NextRequest} req
@@ -76,13 +92,15 @@ export class RedirectsMiddleware {
     getExistsRedirect(req) {
         return __awaiter(this, void 0, void 0, function* () {
             const redirects = yield this.redirectsService.fetchRedirects();
-            return redirects.find((redirect) => {
-                return ((regexParser(redirect.pattern.toLowerCase()).test(req.nextUrl.pathname.toLowerCase()) ||
-                    regexParser(redirect.pattern.toLowerCase()).test(`/${req.nextUrl.locale}${req.nextUrl.pathname}`.toLowerCase())) &&
-                    (redirect.locale
-                        ? redirect.locale.toLowerCase() === req.nextUrl.locale.toLowerCase()
-                        : true));
-            });
+            return redirects.length
+                ? redirects.find((redirect) => {
+                    return ((regexParser(redirect.pattern.toLowerCase()).test(req.nextUrl.pathname.toLowerCase()) ||
+                        regexParser(redirect.pattern.toLowerCase()).test(`/${req.nextUrl.locale}${req.nextUrl.pathname}`.toLowerCase())) &&
+                        (redirect.locale
+                            ? redirect.locale.toLowerCase() === req.nextUrl.locale.toLowerCase()
+                            : true));
+                })
+                : undefined;
         });
     }
 }

package/dist/esm/monitoring/healthcheck-middleware.js

@@ -0,0 +1,26 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/**
+ * Middleware / handler for use in healthcheck Next.js API route (e.g. '/api/healthz').
+ */
+export class HealthcheckMiddleware {
+    constructor() {
+        this.handler = (_req, res) => __awaiter(this, void 0, void 0, function* () {
+            res.status(200).send('Healthy');
+        });
+    }
+    /**
+     * Gets the Next.js API route handler
+     * @returns route handler
+     */
+    getHandler() {
+        return this.handler;
+    }
+}

package/dist/esm/monitoring/index.js

@@ -0,0 +1 @@
+export { HealthcheckMiddleware } from './healthcheck-middleware';

package/monitoring.d.ts

@@ -0,0 +1 @@
+export * from './types/monitoring/index';

package/monitoring.js

@@ -0,0 +1 @@
+module.exports = require('./dist/cjs/monitoring/index');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sitecore-jss/sitecore-jss-nextjs",
-  "version": "21.1.0-canary.6",
+  "version": "21.1.0-canary.61",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -11,7 +11,7 @@
     "test": "mocha --require ./test/setup.js \"./src/**/*.test.ts\" \"./src/**/*.test.tsx\" --exit",
     "prepublishOnly": "npm run build",
     "coverage": "nyc npm test",
-    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-nextjs --entryPoints src/index.ts --entryPoints src/editing/index.ts --entryPoints src/middleware/index.ts --githubPages false"
+    "generate-docs": "npx typedoc --plugin typedoc-plugin-markdown --readme none --out ../../ref-docs/sitecore-jss-nextjs --entryPoints src/index.ts --entryPoints src/monitoring/index.ts --entryPoints src/editing/index.ts --entryPoints src/middleware/index.ts --githubPages false"
   },
   "engines": {
     "node": ">=12",
@@ -36,8 +36,8 @@
     "@types/enzyme": "^3.10.12",
     "@types/mocha": "^9.0.0",
     "@types/node": "17.0.40",
-    "@types/prop-types": "^15.7.4",
-    "@types/react": "^18.0.12",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.5",
     "@types/sinon": "^7.5.0",
     "@types/sinon-chai": "^3.2.5",
@@ -54,32 +54,33 @@
     "eslint-plugin-react": "^7.21.5",
     "jsdom": "^15.1.1",
     "mocha": "^9.1.3",
-    "next": "^12.2.5",
+    "next": "^12.3.1",
     "nock": "^13.0.5",
     "nyc": "^15.1.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "sinon": "^7.5.0",
     "sinon-chai": "^3.7.0",
     "ts-node": "^9.0.0",
     "typescript": "~4.3.5"
   },
   "peerDependencies": {
-    "next": "^12.2.5",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "next": "^12.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@sitecore-jss/sitecore-jss": "^21.1.0-canary.6",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^21.1.0-canary.6",
-    "@sitecore-jss/sitecore-jss-react": "^21.1.0-canary.6",
-    "prop-types": "^15.7.2",
+    "@sitecore-jss/sitecore-jss": "^21.1.0-canary.61",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^21.1.0-canary.61",
+    "@sitecore-jss/sitecore-jss-react": "^21.1.0-canary.61",
+    "node-html-parser": "^6.0.0",
+    "prop-types": "^15.8.1",
     "regex-parser": "^2.2.11",
     "sync-disk-cache": "^2.1.0"
   },
   "description": "",
   "types": "types/index.d.ts",
-  "gitHead": "36fcb1e328e4506ae24bde331f3527f450317431",
+  "gitHead": "5d17f3fe1f96ba0e633ce5079b70588c8d0d8141",
   "files": [
     "dist",
     "types",

package/types/components/EditingComponentPlaceholder.d.ts

@@ -0,0 +1,4 @@
+import { RouteData } from '@sitecore-jss/sitecore-jss/layout';
+export declare const EditingComponentPlaceholder: ({ rendering, }: {
+    rendering: RouteData;
+}) => JSX.Element;

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

@@ -3,8 +3,8 @@ import { EditingData } from './editing-data';
  * Defines an editing data cache implementation
  */
 export interface EditingDataCache {
-    set(key: string, editingData: EditingData): void;
-    get(key: string): EditingData | undefined;
+    set(key: string, editingData: EditingData): Promise<void>;
+    get(key: string): Promise<EditingData | undefined>;
 }
 /**
  * A disk-based editing data cache implementation (required for hosting on Vercel via Serverless Functions)
@@ -16,8 +16,8 @@ export declare class EditingDataDiskCache implements EditingDataCache {
      * @param {string} [tmpDir] Temp directory to use. Default is the OS temp directory (os.tmpdir()).
      */
     constructor(tmpDir?: string);
-    set(key: string, editingData: EditingData): void;
-    get(key: string): EditingData | undefined;
+    set(key: string, editingData: EditingData): Promise<void>;
+    get(key: string): Promise<EditingData | undefined>;
 }
 /** EditingDataDiskCache singleton */
 export declare const editingDataDiskCache: EditingDataDiskCache;

package/types/index.d.ts

@@ -1,6 +1,6 @@
 export { constants, HttpDataFetcher, HttpResponse, AxiosDataFetcher, AxiosDataFetcherConfig, NativeDataFetcher, NativeDataFetcherConfig, enableDebug, } from '@sitecore-jss/sitecore-jss';
-export { isEditorActive, resetEditorChromes, resolveUrl, EnvHelper, } from '@sitecore-jss/sitecore-jss/utils';
-export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, GraphQLLayoutServiceConfig, RestLayoutService, RestLayoutServiceConfig, PlaceholderData, PlaceholdersData, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, } from '@sitecore-jss/sitecore-jss/layout';
+export { isEditorActive, resetEditorChromes, resolveUrl } from '@sitecore-jss/sitecore-jss/utils';
+export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, GraphQLLayoutServiceConfig, RestLayoutService, RestLayoutServiceConfig, PlaceholderData, PlaceholdersData, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from '@sitecore-jss/sitecore-jss/layout';
 export { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 export { trackingApi, TrackingRequestOptions, CampaignInstance, GoalInstance, OutcomeInstance, EventInstance, PageViewInstance, } from '@sitecore-jss/sitecore-jss/tracking';
 export { DictionaryPhrases, DictionaryService, GraphQLDictionaryService, GraphQLDictionaryServiceConfig, RestDictionaryService, RestDictionaryServiceConfig, } from '@sitecore-jss/sitecore-jss/i18n';
@@ -19,5 +19,6 @@ export { handleEditorFastRefresh, getPublicUrl } from './utils';
 export { Link, LinkProps } from './components/Link';
 export { RichText, RichTextProps } from './components/RichText';
 export { Placeholder } from './components/Placeholder';
+export { EditingComponentPlaceholder } from './components/EditingComponentPlaceholder';
 export { NextImage } from './components/NextImage';
 export { ComponentFactory, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, File, FileField, RichTextField, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, ComponentConsumerProps, WithSitecoreContextOptions, WithSitecoreContextProps, } from '@sitecore-jss/sitecore-jss-react';

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

@@ -5,12 +5,28 @@ import { GraphQLRedirectsServiceConfig } from '@sitecore-jss/sitecore-jss/site';
  */
 export declare type RedirectsMiddlewareConfig = Omit<GraphQLRedirectsServiceConfig, 'fetch'> & {
     locales: string[];
+    /**
+     * Function used to determine if route should be excluded from RedirectsMiddleware.
+     * By default, files (pathname.includes('.')), Next.js API routes (pathname.startsWith('/api/')), and Sitecore API routes (pathname.startsWith('/sitecore/')) are ignored.
+     * This is an important performance consideration since Next.js Edge middleware runs on every request.
+     * @param {string} pathname The pathname
+     * @returns {boolean} Whether to exclude the route from RedirectsMiddleware
+     */
+    excludeRoute?: (pathname: string) => boolean;
+    /**
+     * function, determines if middleware should be turned off, based on cookie, header, or other considerations
+     *  @param {NextRequest} [req] optional: request object from middleware handler
+     *  @param {NextResponse} [res] optional: response object from middleware handler
+     * @returns {boolean} false by default
+     */
+    disabled?: (req?: NextRequest, res?: NextResponse) => boolean;
 };
 /**
  * Middleware / handler fetches all redirects from Sitecore instance by grapqhl service
  * compares with current url and redirects to target url
  */
 export declare class RedirectsMiddleware {
+    protected config: RedirectsMiddlewareConfig;
     private redirectsService;
     private locales;
     /**
@@ -22,6 +38,7 @@ export declare class RedirectsMiddleware {
      * @returns route handler
      */
     getHandler(): (req: NextRequest) => Promise<NextResponse>;
+    protected excludeRoute(pathname: string): boolean;
     private handler;
     /**
      * Method returns RedirectInfo when matches

package/types/monitoring/healthcheck-middleware.d.ts

@@ -0,0 +1,12 @@
+import { NextApiResponse, NextApiRequest } from 'next';
+/**
+ * Middleware / handler for use in healthcheck Next.js API route (e.g. '/api/healthz').
+ */
+export declare class HealthcheckMiddleware {
+    /**
+     * Gets the Next.js API route handler
+     * @returns route handler
+     */
+    getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
+    private handler;
+}

package/types/monitoring/index.d.ts

@@ -0,0 +1 @@
+export { HealthcheckMiddleware } from './healthcheck-middleware';