@sitecore-content-sdk/nextjs 0.1.0-beta.1

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

@@ -0,0 +1,64 @@
+"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.GraphQLSitemapService = exports.siteError = exports.languageError = void 0;
+exports.getSiteEmptyError = getSiteEmptyError;
+const base_graphql_sitemap_service_1 = require("./base-graphql-sitemap-service");
+/** @private */
+exports.languageError = 'The list of languages cannot be empty';
+exports.siteError = 'The service needs a site name';
+/**
+ * @param {string} siteName to inject into error text
+ * @private
+ */
+function getSiteEmptyError(siteName) {
+    return `Site "${siteName}" does not exist or site item tree is missing`;
+}
+/**
+ * Service that fetches the list of site pages using Sitecore's GraphQL API.
+ * Used to handle a single site
+ * This list is used for SSG and Export functionality.
+ * @mixes SearchQueryService<PageListQueryResult>
+ */
+class GraphQLSitemapService extends base_graphql_sitemap_service_1.BaseGraphQLSitemapService {
+    /**
+     * Creates an instance of graphQL sitemap service with the provided options
+     * @param {GraphQLSitemapServiceConfig} options instance
+     */
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    /**
+     * Fetch a flat list of all pages that belong to the specificed site and have a
+     * version in the specified language(s).
+     * @param {string[]} languages Fetch pages that have versions in this language(s).
+     * @param {Function} formatStaticPath Function for transforming the raw search results into (@see StaticPath) types.
+     * @returns list of pages
+     * @throws {RangeError} if the list of languages is empty.
+     * @throws {RangeError} if the any of the languages is an empty string.
+     */
+    fetchSitemap(languages, formatStaticPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const paths = new Array();
+            if (!languages.length) {
+                throw new RangeError(exports.languageError);
+            }
+            const siteName = this.options.siteName;
+            if (!siteName) {
+                throw new RangeError(exports.siteError);
+            }
+            paths.push(...(yield this.getTranformedPaths(siteName, languages, formatStaticPath)));
+            return [].concat(...paths);
+        });
+    }
+}
+exports.GraphQLSitemapService = GraphQLSitemapService;

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

@@ -0,0 +1,81 @@
+"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.MultisiteGraphQLSitemapService = exports.sitesError = void 0;
+const site_1 = require("@sitecore-content-sdk/core/site");
+const base_graphql_sitemap_service_1 = require("./base-graphql-sitemap-service");
+exports.sitesError = 'The list of sites cannot be empty';
+/**
+ * Service that fetches the list of site pages using Sitecore's GraphQL API.
+ * Used to handle multiple sites
+ * This list is used for SSG and Export functionality.
+ * @mixes SearchQueryService<PageListQueryResult>
+ */
+class MultisiteGraphQLSitemapService extends base_graphql_sitemap_service_1.BaseGraphQLSitemapService {
+    /**
+     * Creates an instance of graphQL sitemap service with the provided options
+     * @param {MultisiteGraphQLSitemapServiceConfig} options instance
+     */
+    constructor(options) {
+        super(options);
+        this.options = options;
+    }
+    /**
+     * Fetch a flat list of all pages that belong to all the requested sites and have a
+     * version in the specified language(s).
+     * @param {string[]} languages Fetch pages that have versions in this language(s).
+     * @param {Function} formatStaticPath Function for transforming the raw search results into (@see StaticPath) types.
+     * @returns list of pages
+     * @throws {RangeError} if the list of languages is empty.
+     * @throws {RangeError} if the any of the languages is an empty string.
+     */
+    fetchSitemap(languages, formatStaticPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const paths = new Array();
+            if (!languages.length) {
+                throw new RangeError(base_graphql_sitemap_service_1.languageError);
+            }
+            // Get all sites
+            const sites = this.options.sites;
+            if (!sites || !sites.length) {
+                throw new RangeError(exports.sitesError);
+            }
+            // Fetch paths for each site
+            for (let i = 0; i < sites.length; i++) {
+                const siteName = sites[i];
+                // Fetch paths using all locales
+                paths.push(...(yield this.getTranformedPaths(siteName, languages, formatStaticPath)));
+            }
+            return [].concat(...paths);
+        });
+    }
+    /**
+     * Fetch and return site paths for multisite implementation, with prefixes included
+     * @param {string} language path language
+     * @param {string} siteName site name
+     * @returns modified paths
+     */
+    fetchLanguageSitePaths(language, siteName) {
+        const _super = Object.create(null, {
+            fetchLanguageSitePaths: { get: () => super.fetchLanguageSitePaths }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            const results = yield _super.fetchLanguageSitePaths.call(this, language, siteName);
+            results.forEach((item) => {
+                if (item) {
+                    item.path = (0, site_1.getSiteRewrite)(item.path, { siteName: siteName });
+                }
+            });
+            return results;
+        });
+    }
+}
+exports.MultisiteGraphQLSitemapService = MultisiteGraphQLSitemapService;

package/dist/cjs/sharedTypes/component-props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/sharedTypes/module-factory.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/site/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SiteResolver = void 0;
+var site_1 = require("@sitecore-content-sdk/core/site");
+Object.defineProperty(exports, "SiteResolver", { enumerable: true, get: function () { return site_1.SiteResolver; } });

package/dist/cjs/utils/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetEditorChromes = exports.isEditorActive = exports.resolveUrl = exports.tryParseEnvValue = exports.handleEditorFastRefresh = void 0;
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "handleEditorFastRefresh", { enumerable: true, get: function () { return utils_1.handleEditorFastRefresh; } });
+var utils_2 = require("@sitecore-content-sdk/core/utils");
+Object.defineProperty(exports, "tryParseEnvValue", { enumerable: true, get: function () { return utils_2.tryParseEnvValue; } });
+Object.defineProperty(exports, "resolveUrl", { enumerable: true, get: function () { return utils_2.resolveUrl; } });
+var editing_1 = require("@sitecore-content-sdk/core/editing");
+Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return editing_1.isEditorActive; } });
+Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return editing_1.resetEditorChromes; } });

package/dist/cjs/utils/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getJssEditingSecret = exports.handleEditorFastRefresh = void 0;
+const editing_1 = require("@sitecore-content-sdk/core/editing");
+/**
+ * Since Sitecore editors do not support Fast Refresh:
+ * 1. Subscribe on events provided by webpack.
+ * 2. Reset editor chromes when build is finished
+ * @param {boolean} [forceReload] force page reload instead of reset chromes
+ */
+const handleEditorFastRefresh = (forceReload = false) => {
+    if (process.env.NODE_ENV !== 'development' || !(0, editing_1.isEditorActive)()) {
+        // Only run if development mode and editor is active
+        return;
+    }
+    const eventSource = new window.EventSource('/_next/webpack-hmr');
+    window.addEventListener('beforeunload', () => eventSource.close());
+    eventSource.onopen = () => console.log('[Sitecore Editor Fast Refresh Listener] Online');
+    eventSource.onmessage = (event) => {
+        if (event.data.indexOf('{') === -1)
+            return; // heartbeat
+        const payload = JSON.parse(event.data);
+        console.debug(`[Sitecore Editor Fast Refresh Listener] Saw event: ${JSON.stringify(payload)}`);
+        if (payload.action !== 'built')
+            return;
+        if (forceReload)
+            return window.location.reload();
+        setTimeout(() => {
+            console.log('[Sitecore Editor HMR Listener] Sitecore editor does not support Fast Refresh, reloading chromes...');
+            (0, editing_1.resetEditorChromes)();
+        }, 500);
+    };
+};
+exports.handleEditorFastRefresh = handleEditorFastRefresh;
+const getJssEditingSecret = () => {
+    const secret = process.env.JSS_EDITING_SECRET;
+    if (!secret || secret.length === 0) {
+        throw new Error('The JSS_EDITING_SECRET environment variable is missing or invalid.');
+    }
+    return secret;
+};
+exports.getJssEditingSecret = getJssEditingSecret;

package/dist/esm/ComponentBuilder.js

@@ -0,0 +1,59 @@
+/**
+ * Nextjs implementation of component builder class for building components based on the configuration.
+ */
+export class ComponentBuilder {
+    constructor(config) {
+        this.config = config;
+        /**
+         * SXA uses custom default export name
+         */
+        this.DEFAULT_EXPORT_NAME = 'Default';
+        this.components = new Map([...config.components]);
+    }
+    /**
+     * Creates a new instance of module factory
+     * Module factory provides a module (file) including all exports.
+     * Module can be imported dynamically or statically.
+     * @returns {ModuleFactory} Module factory implementation
+     */
+    getModuleFactory() {
+        return (componentName) => {
+            const component = this.components.get(componentName);
+            if (!component)
+                return null;
+            // check if module should be imported dynamically
+            if (component.module) {
+                return component.module();
+            }
+            return component;
+        };
+    }
+    /**
+     * Creates a new instance of component factory
+     * Component can be imported dynamically or statically.
+     * @param {object} [config] Component factory configuration
+     * @param {boolean} [config.isEditing] Indicates if component factory is used in editing mode
+     * @returns {ComponentFactory} Component factory implementation
+     */
+    getComponentFactory({ isEditing } = {}) {
+        return (componentName, exportName) => {
+            const component = this.components.get(componentName);
+            if (!component)
+                return null;
+            // check if component should be imported dynamically
+            if (component.element) {
+                // Editing mode doesn't work well with dynamic components in nextjs: dynamic components are not displayed without refresh after a rendering is added.
+                // This happens beacuse Sitecore editors simply insert updated HTML generated on server side. This conflicts with nextjs dynamic logic as no HTML gets rendered for dynamic component
+                // So we use require() to obtain dynamic components in editing mode while preserving dynamic logic for non-editing scenarios
+                // As we need to be able to seamlessly work with dynamic components in both editing and normal modes, different componentFactory functions will be passed to app
+                return component.element(isEditing);
+            }
+            if (exportName && exportName !== this.DEFAULT_EXPORT_NAME) {
+                return component[exportName];
+            }
+            return (component.Default ||
+                component.default ||
+                component);
+        };
+    }
+}

package/dist/esm/components/BYOCWrapper.js

@@ -0,0 +1,36 @@
+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());
+    });
+};
+import { BYOCWrapper, fetchBYOCComponentServerProps, } from '@sitecore-content-sdk/react';
+/**
+ * TODO: remove when framework agnostic forms implemented
+ * This is a repackaged version of the React BYOCWrapper component with support for
+ * server rendering in Next.js (using component-level data-fetching feature of JSS).
+ */
+/**
+ * Will be called during SSG
+ * @param {ComponentRendering} rendering
+ * @returns {GetStaticPropsContext} context
+ */
+export const getStaticProps = (rendering) => __awaiter(void 0, void 0, void 0, function* () {
+    const params = rendering.params || {};
+    const result = yield fetchBYOCComponentServerProps(params);
+    return result;
+});
+/**
+ * Will be called during SSR
+ * @param {ComponentRendering} rendering
+ * @returns {GetStaticPropsContext} context
+ */
+export const getServerSideProps = (rendering) => __awaiter(void 0, void 0, void 0, function* () {
+    const params = rendering.params || {};
+    const result = yield fetchBYOCComponentServerProps(params);
+    return result;
+});
+export default BYOCWrapper;

package/dist/esm/components/ComponentPropsContext.js

@@ -0,0 +1,19 @@
+import React, { createContext, useContext } from 'react';
+/**
+ * Component props context which we are using in order to store data fetched on components level (getStaticProps/getServerSideProps)
+ */
+export const ComponentPropsReactContext = createContext({});
+/**
+ * Hook in order to get access to props related to specific component. Data comes from ComponentPropsContext.
+ * @see ComponentPropsContext
+ * @param {string | undefined} componentUid component uId
+ * @returns {ComponentData | undefined} component props
+ */
+export function useComponentProps(componentUid) {
+    if (!componentUid) {
+        return undefined;
+    }
+    const data = useContext(ComponentPropsReactContext);
+    return data[componentUid];
+}
+export const ComponentPropsContext = ({ children, value, }) => (React.createElement(ComponentPropsReactContext.Provider, { value: value }, children));

package/dist/esm/components/FEaaSWrapper.js

@@ -0,0 +1,38 @@
+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());
+    });
+};
+import { FEaaSWrapper, fetchFEaaSComponentServerProps, } from '@sitecore-content-sdk/react';
+/**
+ * TODO: remove when framework agnostic forms implemented
+ * This is a repackaged version of the React FEaaSWrapper component with support for
+ * server rendering in Next.js (using component-level data-fetching feature of JSS).
+ */
+/**
+ * Will be called during SSG
+ * @param {ComponentRendering} rendering
+ * @param {LayoutServiceData} layoutData
+ * @returns {GetStaticPropsContext} context
+ */
+export const getStaticProps = (rendering, layoutData) => __awaiter(void 0, void 0, void 0, function* () {
+    const params = rendering.params || {};
+    const result = yield fetchFEaaSComponentServerProps(params, layoutData.sitecore.context.pageState);
+    return result;
+});
+/**
+ * Will be called during SSR
+ * @param {ComponentRendering} rendering
+ * @param {LayoutServiceData} layoutData
+ * @returns {GetStaticPropsContext} context
+ */
+export const getServerSideProps = (rendering, layoutData) => __awaiter(void 0, void 0, void 0, function* () {
+    const params = rendering.params || {};
+    const result = yield fetchFEaaSComponentServerProps(params, layoutData.sitecore.context.pageState);
+    return result;
+});
+export default FEaaSWrapper;

package/dist/esm/components/Link.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import NextLink from 'next/link';
+import { Link as ReactLink, LinkPropTypes, } from '@sitecore-content-sdk/react';
+/**
+ * Matches relative URLs that end with a file extension.
+ */
+const FILE_EXTENSION_MATCHER = /^\/.*\.\w+$/;
+export const Link = forwardRef((props, ref) => {
+    const { field, editable = true, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent } = props, htmlLinkProps = __rest(props, ["field", "editable", "children", "internalLinkMatcher", "showLinkTextWithChildrenPresent"]);
+    if (!field || (!field.value && !field.href && !field.metadata)) {
+        return null;
+    }
+    const value = (field.href
+        ? field
+        : field.value);
+    // fallback to {} if value is undefined; could happen if field is LinkFieldValue, href is empty in metadata mode
+    const { href, querystring, anchor } = value || {};
+    const isEditing = editable && field.metadata;
+    if (href && !isEditing) {
+        const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
+        const isMatching = internalLinkMatcher.test(href);
+        const isFileUrl = FILE_EXTENSION_MATCHER.test(href);
+        // determine if a link is a route or not. File extensions are not routes and should not be pre-fetched.
+        if (isMatching && !isFileUrl) {
+            return (React.createElement(NextLink, Object.assign({ href: { pathname: href, query: querystring, hash: anchor }, key: "link", locale: false, title: value.title, target: value.target, className: value.class }, htmlLinkProps, { ref: ref }, (process.env.TEST ? { 'data-nextjs-link': true } : {})),
+                text,
+                children));
+        }
+    }
+    // prevent passing internalLinkMatcher as it is an invalid DOM element prop
+    const reactLinkProps = Object.assign({}, props);
+    delete reactLinkProps.internalLinkMatcher;
+    return (React.createElement(ReactLink, Object.assign({}, reactLinkProps, { ref: ref }, (process.env.TEST ? { 'data-react-link': true } : {}))));
+});
+Link.displayName = 'NextLink';
+Link.propTypes = Object.assign({ internalLinkMatcher: PropTypes.instanceOf(RegExp) }, LinkPropTypes);

package/dist/esm/components/NextImage.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { mediaApi } from '@sitecore-content-sdk/core/media';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withFieldMetadata, SitecoreContextReactContext, } from '@sitecore-content-sdk/react';
+import Image from 'next/image';
+import { withEmptyFieldEditingComponent } from '@sitecore-content-sdk/react';
+import { DefaultEmptyFieldEditingComponentImage } from '@sitecore-content-sdk/react';
+import { isFieldValueEmpty, LayoutServicePageState } from '@sitecore-content-sdk/core/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) {
+        throw new Error('Detected src prop. If you wish to use src, use next/image directly.');
+    }
+    const dynamicMedia = field;
+    if (isFieldValueEmpty(dynamicMedia)) {
+        return null;
+    }
+    // some wise-guy/gal is passing in a 'raw' image object value
+    const img = dynamicMedia.src
+        ? field
+        : dynamicMedia.value;
+    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), 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
+        src: mediaApi.replaceMediaUrlPrefix(attrs.src, mediaUrlPrefix) });
+    // Exclude `width`, `height` in case image is responsive, `fill` is used
+    if (imageProps.fill) {
+        delete imageProps.width;
+        delete imageProps.height;
+    }
+    if (attrs) {
+        return (React.createElement(Image, Object.assign({ alt: "" }, imageProps, (process.env.TEST ? { 'data-unoptimized': unoptimized } : {}))));
+    }
+    return null; // we can't handle the truth
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
+NextImage.propTypes = {
+    field: PropTypes.oneOfType([
+        PropTypes.shape({
+            src: PropTypes.string.isRequired,
+        }),
+        PropTypes.shape({
+            value: PropTypes.object,
+        }),
+    ]),
+    editable: PropTypes.bool,
+    mediaUrlPrefix: PropTypes.instanceOf(RegExp),
+    imageParams: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
+};
+NextImage.displayName = 'NextImage';

package/dist/esm/components/Placeholder.js

@@ -0,0 +1,12 @@
+import React, { useContext } from 'react';
+import { Placeholder as ReactPlaceholder, } from '@sitecore-content-sdk/react';
+import { ComponentPropsReactContext } from './ComponentPropsContext';
+export const Placeholder = (props) => {
+    const componentPropsContext = useContext(ComponentPropsReactContext);
+    return (React.createElement(ReactPlaceholder, Object.assign({}, props, { modifyComponentProps: (initialProps) => {
+            if (!initialProps.rendering.uid)
+                return initialProps;
+            const data = componentPropsContext[initialProps.rendering.uid];
+            return Object.assign(Object.assign({}, initialProps), data);
+        } })));
+};

package/dist/esm/components/RichText.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { RichText as ReactRichText, RichTextPropTypes, } from '@sitecore-content-sdk/react';
+const prefetched = {};
+export const RichText = (props) => {
+    const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, editable = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks", "editable"]);
+    const hasText = props.field && props.field.value;
+    const isEditing = editable && props.field && props.field.metadata;
+    const router = useRouter();
+    const richTextRef = useRef(null);
+    useEffect(() => {
+        // NOT IN EDIT MODE
+        if (hasText && !isEditing) {
+            initializeLinks();
+        }
+    }, [hasText]);
+    const routeHandler = (ev) => {
+        if (!ev.currentTarget)
+            return;
+        ev.preventDefault();
+        const pathname = ev.currentTarget.href;
+        router.push(pathname, pathname, { locale: false });
+    };
+    const initializeLinks = () => {
+        const node = richTextRef.current;
+        // selects all links that start with '/'
+        const internalLinks = node && node.querySelectorAll(internalLinksSelector);
+        if (!internalLinks || !internalLinks.length)
+            return;
+        internalLinks.forEach((link) => {
+            if (link.target === '_blank')
+                return;
+            if (prefetchLinks && !prefetched[link.pathname]) {
+                router.prefetch(link.pathname, undefined, { locale: false });
+                prefetched[link.pathname] = true;
+            }
+            link.addEventListener('click', routeHandler, false);
+        });
+    };
+    return React.createElement(ReactRichText, Object.assign({ ref: richTextRef, editable: editable }, rest));
+};
+RichText.propTypes = Object.assign({ internalLinksSelector: PropTypes.string }, RichTextPropTypes);
+RichText.displayName = 'NextRichText';

package/dist/esm/editing/constants.js

@@ -0,0 +1,7 @@
+export const QUERY_PARAM_VERCEL_PROTECTION_BYPASS = 'x-vercel-protection-bypass';
+export const QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE = 'x-vercel-set-bypass-cookie';
+/**
+ * Headers that should be passed along to (Editing Chromes handler) SSR request.
+ * Note these are in lowercase format to match expected `IncomingHttpHeaders`.
+ */
+export const EDITING_PASS_THROUGH_HEADERS = ['authorization', 'cookie'];

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

@@ -0,0 +1,58 @@
+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());
+    });
+};
+import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET, } from '@sitecore-content-sdk/core/editing';
+import { debug } from '@sitecore-content-sdk/core';
+import { enforceCors } from '@sitecore-content-sdk/core/utils';
+import { EditMode } from '@sitecore-content-sdk/core/layout';
+import { getJssEditingSecret } from '../utils/utils';
+/**
+ * Middleware / handler used in the editing config API route in xmcloud add on (e.g. '/api/editing/config')
+ * provides configuration information to determine feature compatibility on Pages side.
+ */
+export class EditingConfigMiddleware {
+    /**
+     * @param {EditingConfigMiddlewareConfig} [config] Editing configuration middleware config
+     */
+    constructor(config) {
+        this.config = config;
+        this.handler = (_req, res) => __awaiter(this, void 0, void 0, function* () {
+            const secret = _req.query[QUERY_PARAM_EDITING_SECRET];
+            if (!enforceCors(_req, res, EDITING_ALLOWED_ORIGINS)) {
+                debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res.status(401).json({ message: 'Invalid origin' });
+            }
+            if (secret !== getJssEditingSecret()) {
+                debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, getJssEditingSecret());
+                return res.status(401).json({ message: 'Missing or invalid editing secret' });
+            }
+            // Handle preflight request
+            if (_req.method === 'OPTIONS') {
+                debug.editing('preflight request');
+                // CORS headers are set by enforceCors
+                return res.status(204).send(null);
+            }
+            const components = Array.isArray(this.config.components)
+                ? this.config.components
+                : Array.from(this.config.components.keys());
+            return res.status(200).json({
+                components,
+                packages: this.config.metadata.packages,
+                editMode: EditMode.Metadata,
+            });
+        });
+    }
+    /**
+     * Gets the Next.js API route handler
+     * @returns middleware handler
+     */
+    getHandler() {
+        return this.handler;
+    }
+}