@sitecore-jss/sitecore-jss-nextjs 22.1.0-canary.9 → 22.1.0

package/types/editing/editing-render-middleware.d.ts

@@ -1,16 +1,23 @@
 import { NextApiRequest, NextApiResponse } from 'next';
 import { AxiosDataFetcher } from '@sitecore-jss/sitecore-jss';
-import { EditingData } from './editing-data';
+import { EditMode, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
 import { EditingDataService } from './editing-data-service';
 import { RenderMiddlewareBase } from './render-middleware';
-export interface EditingRenderMiddlewareConfig {
+/**
+ * Configuration for the Editing Render Middleware.
+ */
+export type EditingRenderMiddlewareConfig = {
     /**
+     * -- Edit Mode Chromes --
+     *
      * The `AxiosDataFetcher` instance to use for API requests.
      * @default new AxiosDataFetcher()
      * @see AxiosDataFetcher
      */
     dataFetcher?: AxiosDataFetcher;
     /**
+     * -- Edit Mode Chromes --
+     *
      * The `EditingDataService` instance to use.
      * This would typically only be necessary if you've got a custom `EditingDataService` instance (e.g. using a custom API route).
      * By default, this is `editingDataService` (the `EditingDataService` default instance).
@@ -20,16 +27,25 @@ export interface EditingRenderMiddlewareConfig {
      */
     editingDataService?: EditingDataService;
     /**
+     * -- Edit Mode Chromes / Metadata --
+     *
      * Function used to determine route/page URL to render.
      * This may be necessary for certain custom Next.js routing configurations.
-     * @param {string} serverUrl The root server URL e.g. 'http://localhost:3000'
+     * @param {Object} args Arguments for resolving the page URL
+     * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'. Available in Chromes Edit Mode only.
      * @param {string} itemPath The Sitecore relative item path e.g. '/styleguide'
      * @returns {string} The URL to render
-     * @default `${serverUrl}${itemPath}`
+     * @default `${serverUrl}${itemPath}` In Edit Mode Chromes
+     * @default `${itemPath}` In XMCloud Pages for Edit Mode Metadata
      * @see resolveServerUrl
      */
-    resolvePageUrl?: (serverUrl: string, itemPath: string) => string;
+    resolvePageUrl?: (args: {
+        serverUrl?: string;
+        itemPath: string;
+    }) => string;
     /**
+     * -- Edit Mode Chromes --
+     *
      * Function used to determine the root server URL. This is used for the route/page and subsequent data API requests.
      * By default, the host header is used, with https protocol on Vercel (due to serverless function architecture) and http protocol elsewhere.
      * @param {NextApiRequest} req The current request.
@@ -37,30 +53,29 @@ export interface EditingRenderMiddlewareConfig {
      * @see resolvePageUrl
      */
     resolveServerUrl?: (req: NextApiRequest) => string;
-}
+};
 /**
- * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
- * which is required for Sitecore editing support.
+ * Configuration for the Editing Chromes Handler.
  */
-export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
+export type EditingRenderMiddlewareChromesConfig = EditingRenderMiddlewareConfig;
+/**
+ * Handler for the Editing Chromes POST requests.
+ * This handler is responsible for rendering the page and returning the HTML content that is provided via request.
+ */
+export declare class ChromesHandler extends RenderMiddlewareBase {
+    config?: EditingRenderMiddlewareConfig | undefined;
     private editingDataService;
     private dataFetcher;
     private resolvePageUrl;
     private resolveServerUrl;
-    /**
-     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
-     */
-    constructor(config?: EditingRenderMiddlewareConfig);
-    /**
-     * Gets the Next.js API route handler
-     * @returns route handler
-     */
-    getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
-    private handler;
+    constructor(config?: EditingRenderMiddlewareConfig | undefined);
+    render(req: NextApiRequest, res: NextApiResponse): Promise<void>;
     /**
      * Default page URL resolution.
-     * @param {string} serverUrl
-     * @param {string} itemPath
+     * @param {Object} args Arguments for resolving the page URL
+     * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'
+     * @param {string} args.itemPath The Sitecore relative item path e.g. '/styleguide'
+     * @returns {string} The URL to render
      */
     private defaultResolvePageUrl;
     /**
@@ -74,8 +89,81 @@ export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
      * @param {NextApiRequest} req
      */
     private defaultResolveServerUrl;
+    private extractEditingData;
+}
+/**
+ * Configuration for the Editing Metadata Handler.
+ */
+export type EditingRenderMiddlewareMetadataConfig = Pick<EditingRenderMiddlewareConfig, 'resolvePageUrl'>;
+/**
+ * Query parameters appended to the page route URL
+ * Appended when XMCloud Pages preview (editing) Metadata Edit Mode is used
+ */
+export type MetadataQueryParams = {
+    secret: string;
+    sc_lang: string;
+    sc_itemid: string;
+    sc_site: string;
+    route: string;
+    mode: Exclude<LayoutServicePageState, 'normal'>;
+    sc_variant?: string;
+    sc_version?: string;
+};
+/**
+ * Next.js API request with Metadata query parameters.
+ */
+type MetadataNextApiRequest = NextApiRequest & {
+    query: MetadataQueryParams;
+};
+/**
+ * Data for Next.js Preview (Editing) Metadata Edit Mode.
+ */
+export type EditingMetadataPreviewData = {
+    site: string;
+    itemId: string;
+    language: string;
+    editMode: EditMode.Metadata;
+    pageState: Exclude<LayoutServicePageState, 'Normal'>;
+    variantIds: string[];
+    version?: string;
+};
+/**
+ * Type guard for EditingMetadataPreviewData
+ * @param {Object} data preview data to check
+ * @returns true if the data is EditingMetadataPreviewData
+ * @see EditingMetadataPreviewData
+ */
+export declare const isEditingMetadataPreviewData: (data: unknown) => data is EditingMetadataPreviewData;
+/**
+ * Handler for the Editing Metadata GET requests.
+ * This handler is responsible for redirecting the request to the page route.
+ * The page fetches the layout, dictionary and renders the page.
+ */
+export declare class MetadataHandler {
+    config: EditingRenderMiddlewareMetadataConfig;
+    constructor(config: EditingRenderMiddlewareMetadataConfig);
+    render(req: MetadataNextApiRequest, res: NextApiResponse): void;
+    /**
+     * Gets the Content-Security-Policy header value
+     * @returns Content-Security-Policy header value
+     */
+    getSCPHeader(): string;
 }
 /**
- * @param {NextApiRequest} req
+ * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
+ * which is required for Sitecore editing support.
  */
-export declare function extractEditingData(req: NextApiRequest): EditingData;
+export declare class EditingRenderMiddleware extends RenderMiddlewareBase {
+    config?: EditingRenderMiddlewareConfig | undefined;
+    /**
+     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
+     */
+    constructor(config?: EditingRenderMiddlewareConfig | undefined);
+    /**
+     * Gets the Next.js API route handler
+     * @returns route handler
+     */
+    getHandler(): (req: NextApiRequest, res: NextApiResponse) => Promise<void>;
+    private handler;
+}
+export {};

package/types/editing/index.d.ts

@@ -1,7 +1,8 @@
+export { GraphQLEditingService } from '@sitecore-jss/sitecore-jss/editing';
 export { EditingData } from './editing-data';
 export { EditingDataCache, EditingDataDiskCache } from './editing-data-cache';
 export { EditingDataMiddleware, EditingDataMiddlewareConfig } from './editing-data-middleware';
-export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, } from './editing-render-middleware';
+export { EditingRenderMiddleware, EditingRenderMiddlewareConfig, EditingMetadataPreviewData, isEditingMetadataPreviewData, } from './editing-render-middleware';
 export { EditingPreviewData, EditingDataService, BasicEditingDataService, BasicEditingDataServiceConfig, ServerlessEditingDataService, ServerlessEditingDataServiceConfig, editingDataService, } from './editing-data-service';
 export { VercelEditingDataCache } from './vercel-editing-data-cache';
 export { FEAASRenderMiddleware, FEAASRenderMiddlewareConfig } from './feaas-render-middleware';

package/types/editing/render-middleware.d.ts

@@ -1,3 +1,4 @@
+import { IncomingHttpHeaders } from 'http';
 /**
  * Base class for middleware that handles pages and components rendering in Sitecore Editors.
  */
@@ -12,4 +13,12 @@ export declare abstract class RenderMiddlewareBase {
     }>) => {
         [key: string]: string;
     };
+    /**
+     * Get headers that should be passed along to subsequent requests
+     * @param {IncomingHttpHeaders} headers Incoming HTTP Headers
+     * @returns Object of approved headers
+     */
+    protected getHeadersForPropagation: (headers: IncomingHttpHeaders) => {
+        [key: string]: string | string[];
+    };
 }

package/types/index.d.ts

@@ -1,9 +1,9 @@
 export { constants, HttpDataFetcher, HttpResponse, AxiosResponse, AxiosDataFetcher, AxiosDataFetcherConfig, NativeDataFetcher, NativeDataFetcherConfig, HTMLLink, enableDebug, debug, } from '@sitecore-jss/sitecore-jss';
-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, getContentStylesheetLink, } from '@sitecore-jss/sitecore-jss/layout';
+export { LayoutService, LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, GraphQLLayoutService, GraphQLLayoutServiceConfig, RestLayoutService, RestLayoutServiceConfig, PlaceholderData, PlaceholdersData, RouteData, Field, Item, HtmlElementRendering, getChildPlaceholder, getFieldValue, ComponentRendering, ComponentFields, ComponentParams, getContentStylesheetLink, EditMode, } 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';
-export { personalizeLayout, getPersonalizedRewrite, getPersonalizedRewriteData, normalizePersonalizedRewrite, CdpHelper, } from '@sitecore-jss/sitecore-jss/personalize';
+export { personalizeLayout, getPersonalizedRewrite, getPersonalizedRewriteData, getGroomedVariantIds, normalizePersonalizedRewrite, CdpHelper, } from '@sitecore-jss/sitecore-jss/personalize';
 export { ComponentPropsCollection, ComponentPropsError, GetStaticComponentProps, GetServerSideComponentProps, } from './sharedTypes/component-props';
 export { ModuleFactory, Module } from './sharedTypes/module-factory';
 export { ComponentPropsService } from './services/component-props-service';
@@ -16,7 +16,6 @@ export { ComponentPropsReactContext, ComponentPropsContextProps, ComponentPropsC
 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';
 import * as FEaaSWrapper from './components/FEaaSWrapper';
 import * as BYOCWrapper from './components/BYOCWrapper';
@@ -24,4 +23,4 @@ export { FEaaSWrapper };
 export { BYOCWrapper };
 export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
 export { Context, ContextConfig, SDK } from './context';
-export { ComponentFactory, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, BYOCComponentParams, BYOCComponent, BYOCComponentProps, getComponentLibraryStylesheetLinks, File, FileField, RichTextField, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, ComponentConsumerProps, WithSitecoreContextOptions, WithSitecoreContextProps, } from '@sitecore-jss/sitecore-jss-react';
+export { ComponentFactory, Image, ImageField, ImageFieldValue, ImageProps, LinkField, LinkFieldValue, Text, TextField, DateField, EditFrame, FEaaSComponent, FEaaSComponentProps, FEaaSComponentParams, fetchFEaaSComponentServerProps, BYOCComponentParams, BYOCComponent, BYOCComponentProps, getComponentLibraryStylesheetLinks, File, FileField, RichTextField, DefaultEmptyFieldEditingComponentImage, DefaultEmptyFieldEditingComponentText, VisitorIdentification, PlaceholderComponentProps, SitecoreContext, SitecoreContextState, SitecoreContextValue, SitecoreContextReactContext, withSitecoreContext, useSitecoreContext, withEditorChromes, withPlaceholder, withDatasourceCheck, ImageSizeParameters, WithSitecoreContextOptions, WithSitecoreContextProps, WithSitecoreContextHocProps, withFieldMetadata, withEmptyFieldEditingComponent, EditingScripts, } from '@sitecore-jss/sitecore-jss-react';

package/types/middleware/middleware.d.ts

@@ -37,6 +37,12 @@ export declare abstract class MiddlewareBase {
      * @returns {boolean} is preview
      */
     protected isPreview(req: NextRequest): boolean;
+    /**
+     * Determines if the request is a Next.js (next/link) prefetch request
+     * @param {NextRequest} req request
+     * @returns {boolean} is prefetch
+     */
+    protected isPrefetch(req: NextRequest): boolean;
     protected excludeRoute(pathname: string): boolean | undefined;
     /**
      * Safely extract all headers for debug logging

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

@@ -33,6 +33,10 @@ export type PersonalizeMiddlewareConfig = MiddlewareBaseConfig & {
      * Configuration for your Sitecore CDP endpoint
      */
     cdpConfig: CdpServiceConfig;
+    /**
+     * Optional Sitecore Personalize scope identifier allowing you to isolate your personalization data between XM Cloud environments
+     */
+    scope?: string;
 };
 /**
  * Object model of Experience Context data
@@ -47,6 +51,13 @@ export type ExperienceParams = {
         content: string | undefined;
     };
 };
+/**
+ * Object model of personalize execution data
+ */
+type PersonalizeExecution = {
+    friendlyId: string;
+    variantIds: string[];
+};
 /**
  * Middleware / handler to support Sitecore Personalize
  */
@@ -68,15 +79,24 @@ export declare class PersonalizeMiddleware extends MiddlewareBase {
         request: NextRequest;
         response: NextResponse;
     }): Promise<void>;
-    protected personalize({ params, personalizeInfo, language, timeout, }: {
-        personalizeInfo: PersonalizeInfo;
+    protected personalize({ params, friendlyId, language, timeout, variantIds, }: {
         params: ExperienceParams;
+        friendlyId: string;
         language: string;
         timeout?: number;
+        variantIds?: string[];
     }, request: NextRequest): Promise<{
         variantId: string;
     }>;
     protected getExperienceParams(req: NextRequest): ExperienceParams;
     protected excludeRoute(pathname: string): boolean | undefined;
+    /**
+     * Aggregates personalize executions based on the provided route personalize information and language
+     * @param {PersonalizeInfo} personalizeInfo the route personalize information
+     * @param {string} language the language
+     * @returns An array of personalize executions
+     */
+    protected getPersonalizeExecutions(personalizeInfo: PersonalizeInfo, language: string): PersonalizeExecution[];
     private handler;
 }
+export {};

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

@@ -37,4 +37,12 @@ export declare class RedirectsMiddleware extends MiddlewareBase {
      * @private
      */
     private getExistsRedirect;
+    /**
+     * When a user clicks on a link generated by the Link component from next/link,
+     * Next.js adds special parameters in the route called path.
+     * This method removes these special parameters.
+     * @param {URL} url
+     * @returns {string} normalize url
+     */
+    private normalizeUrl;
 }

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

@@ -67,8 +67,9 @@ export type RouteListQueryResult = {
  */
 export interface BaseGraphQLSitemapServiceConfig extends Omit<SiteRouteQueryVariables, 'language' | 'siteName'> {
     /**
-     * A flag for whether to include personalized routes in service output - only works on XM Cloud
-     * turned off by default
+     * A flag for whether to include personalized routes in service output.
+     * Only works on XM Cloud for pages using Embedded Personalization (not Component A/B testing).
+     * Turned off by default.
      */
     includePersonalizedRoutes?: boolean;
     /**

package/types/utils/index.d.ts

@@ -1,2 +1,3 @@
 export { getPublicUrl, handleEditorFastRefresh } from './utils';
-export { tryParseEnvValue, isEditorActive, resetEditorChromes, resolveUrl, } from '@sitecore-jss/sitecore-jss/utils';
+export { tryParseEnvValue, resolveUrl } from '@sitecore-jss/sitecore-jss/utils';
+export { isEditorActive, resetEditorChromes } from '@sitecore-jss/sitecore-jss/editing';

package/dist/cjs/components/EditingComponentPlaceholder.js

@@ -1,12 +0,0 @@
-"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/esm/components/EditingComponentPlaceholder.js

@@ -1,5 +0,0 @@
-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/types/components/EditingComponentPlaceholder.d.ts

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