@sitecore-jss/sitecore-jss 0.1.0-beta.2

package/types/layout/content-styles.d.ts

@@ -0,0 +1,18 @@
+import { ComponentRendering, Field, HtmlElementRendering, Item, LayoutServiceData, RouteData } from './index';
+import { HTMLLink } from '../models';
+declare type Config = {
+    loadStyles: boolean;
+};
+/**
+ * Get the content styles link to be loaded from the Sitecore Edge Platform
+ * @param {LayoutServiceData} layoutData Layout service data
+ * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
+ * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
+ * @returns {HTMLLink | null} content styles link, null if no styles are used in layout
+ */
+export declare const getContentStylesheetLink: (layoutData: LayoutServiceData, sitecoreEdgeContextId: string, sitecoreEdgeUrl?: string) => HTMLLink | null;
+export declare const getContentStylesheetUrl: (sitecoreEdgeContextId: string, sitecoreEdgeUrl?: string) => string;
+export declare const traversePlaceholder: (components: Array<ComponentRendering | HtmlElementRendering>, config: Config) => void;
+export declare const traverseField: (field: Field | Item | Item[] | undefined, config: Config) => void;
+export declare const traverseComponent: (component: RouteData | ComponentRendering | HtmlElementRendering, config: Config) => void;
+export {};

package/types/layout/graphql-layout-service.d.ts

@@ -0,0 +1,59 @@
+import { LayoutServiceBase } from './layout-service';
+import { LayoutServiceData } from './models';
+import { GraphQLClient, GraphQLRequestClientFactory, GraphQLRequestClientConfig } from '../graphql-request-client';
+export interface GraphQLLayoutServiceConfig extends Pick<GraphQLRequestClientConfig, 'retries'> {
+    /**
+     * The JSS application name
+     */
+    siteName: string;
+    /**
+     * A GraphQL Request Client Factory is a function that accepts configuration and returns an instance of a GraphQLRequestClient.
+     * This factory function is used to create and configure GraphQL clients for making GraphQL API requests.
+     */
+    clientFactory: GraphQLRequestClientFactory;
+    /**
+     * Override default layout query
+     * @param {string} siteName
+     * @param {string} itemPath
+     * @param {string} [locale]
+     * @returns {string} custom layout query
+     *
+     * @default
+     * Layout query
+     * layout(site:"${siteName}", routePath:"${itemPath}", language:"${language}")
+     */
+    formatLayoutQuery?: (siteName: string, itemPath: string, locale?: string) => string;
+}
+/**
+ * Service that fetch layout data using Sitecore's GraphQL API.
+ * @augments LayoutServiceBase
+ * @mixes GraphQLRequestClient
+ */
+export declare class GraphQLLayoutService extends LayoutServiceBase {
+    serviceConfig: GraphQLLayoutServiceConfig;
+    private graphQLClient;
+    /**
+     * Fetch layout data using the Sitecore GraphQL endpoint.
+     * @param {GraphQLLayoutServiceConfig} serviceConfig configuration
+     */
+    constructor(serviceConfig: GraphQLLayoutServiceConfig);
+    /**
+     * Fetch layout data for an item.
+     * @param {string} itemPath item path to fetch layout data for.
+     * @param {string} [language] the language to fetch layout data for.
+     * @returns {Promise<LayoutServiceData>} layout service data
+     */
+    fetchLayoutData(itemPath: string, language?: string): Promise<LayoutServiceData>;
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    protected getGraphQLClient(): GraphQLClient;
+    /**
+     * Returns GraphQL Layout query
+     * @param {string} itemPath page route
+     * @param {string} [language] language
+     * @returns {string} GraphQL query
+     */
+    protected getLayoutQuery(itemPath: string, language?: string): string;
+}

package/types/layout/index.d.ts

@@ -0,0 +1,6 @@
+export { LayoutServiceData, LayoutServicePageState, LayoutServiceContext, LayoutServiceContextData, RouteData, PlaceholderData, ComponentRendering, HtmlElementRendering, Field, Item, PlaceholdersData, ComponentFields, ComponentParams, RenderingType, EDITING_COMPONENT_PLACEHOLDER, EDITING_COMPONENT_ID, } from './models';
+export { getFieldValue, getChildPlaceholder } from './utils';
+export { getContentStylesheetLink } from './content-styles';
+export { LayoutService } from './layout-service';
+export { GraphQLLayoutService, GraphQLLayoutServiceConfig } from './graphql-layout-service';
+export { getComponentLibraryStylesheetLinks } from './themes';

package/types/layout/layout-service.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="node" />
+import * as models from './models';
+import { IncomingMessage, ServerResponse } from 'http';
+export interface LayoutService {
+    /**
+     * Fetch layout data for an item.
+     * @param {string} itemPath
+     * @param {string} [language]
+     * @param {IncomingMessage} [req] Request instance
+     * @param {ServerResponse} [res] Response instance
+     * @returns {Promise<LayoutServiceData>} layout data
+     */
+    fetchLayoutData(itemPath: string, language?: string, req?: IncomingMessage, res?: ServerResponse): Promise<models.LayoutServiceData>;
+}
+/**
+ * Base abstraction to implement custom layout service
+ */
+export declare abstract class LayoutServiceBase implements LayoutService {
+    abstract fetchLayoutData(itemPath: string, language?: string, req?: IncomingMessage, res?: ServerResponse): Promise<models.LayoutServiceData>;
+}

package/types/layout/models.d.ts

@@ -0,0 +1,140 @@
+/**
+ * Static placeholder name used for component rendering
+ */
+export declare const EDITING_COMPONENT_PLACEHOLDER = "editing-componentmode-placeholder";
+/**
+ * Id of wrapper for component rendering
+ */
+export declare const EDITING_COMPONENT_ID = "editing-component";
+/**
+ * A reply from the Sitecore Layout Service
+ */
+export interface LayoutServiceData {
+    sitecore: LayoutServiceContextData & {
+        route: RouteData | null;
+    };
+}
+/**
+ * Layout Service page state enum
+ */
+export declare enum LayoutServicePageState {
+    Preview = "preview",
+    Edit = "edit",
+    Normal = "normal"
+}
+/**
+ * Editing rendering type
+ */
+export declare enum RenderingType {
+    Component = "component"
+}
+/**
+ * Shape of context data from the Sitecore Layout Service
+ */
+export interface LayoutServiceContext {
+    [key: string]: unknown;
+    renderingType?: RenderingType;
+    pageEditing?: boolean;
+    language?: string;
+    pageState?: LayoutServicePageState;
+    visitorIdentificationTimestamp?: number;
+    site?: {
+        name?: string;
+    };
+}
+/**
+ * Context information from the Sitecore Layout Service
+ */
+export interface LayoutServiceContextData {
+    context: LayoutServiceContext;
+}
+/**
+ * Shape of route data returned from Sitecore Layout Service
+ */
+export interface RouteData<Fields = Record<string, Field | Item | Item[]>> {
+    name: string;
+    displayName?: string;
+    fields?: Fields;
+    databaseName?: string;
+    deviceId?: string;
+    itemLanguage?: string;
+    itemVersion?: number;
+    layoutId?: string;
+    templateId?: string;
+    templateName?: string;
+    placeholders: PlaceholdersData;
+    itemId?: string;
+}
+/**
+ * Placeholder contents data (name: placeholder name, then array of components within that placeholder name)
+ * Note: HtmlElementRendering is used by Sitecore Experience Editor
+ */
+export declare type PlaceholdersData<TYPEDNAME extends string = string> = {
+    [P in TYPEDNAME]: Array<ComponentRendering | HtmlElementRendering>;
+};
+/**
+ * Content field data passed to a component
+ */
+export interface ComponentFields {
+    [name: string]: Field | Item | Item[];
+}
+/**
+ * Component params
+ */
+export interface ComponentParams {
+    [name: string]: string;
+}
+/**
+ * Definition of a component instance within a placeholder on a route
+ */
+export interface ComponentRendering {
+    componentName: string;
+    dataSource?: string;
+    uid?: string;
+    placeholders?: PlaceholdersData;
+    fields?: ComponentFields;
+    params?: ComponentParams;
+}
+/**
+ * HTML content used to support Sitecore Experience Editor
+ */
+export interface HtmlElementRendering {
+    name: string;
+    type?: string;
+    contents: string | null;
+    attributes: {
+        [name: string]: string | undefined;
+    };
+}
+/**
+ * Field value data on a component
+ */
+export declare type GenericFieldValue = string | boolean | number | {
+    [key: string]: unknown;
+} | Array<{
+    [key: string]: unknown;
+}>;
+export interface Field<T = GenericFieldValue> {
+    value: T;
+    editable?: string;
+}
+/**
+ * Content data returned from Content Service
+ */
+export interface Item {
+    name: string;
+    displayName?: string;
+    id?: string;
+    url?: string;
+    fields: {
+        [name: string]: Field | Item | Item[] | undefined;
+    };
+}
+/**
+ * Contents of a single placeholder returned from placeholder service
+ */
+export interface PlaceholderData {
+    name: string;
+    path: string;
+    elements: Array<HtmlElementRendering | ComponentRendering>;
+}

package/types/layout/themes.d.ts

@@ -0,0 +1,11 @@
+import { LayoutServiceData } from '.';
+import { HTMLLink } from '../models';
+/**
+ * Walks through rendering tree and returns list of links of all FEAAS, BYOC or SXA Component Library Stylesheets that are used
+ * @param {LayoutServiceData} layoutData Layout service data
+ * @param {string} sitecoreEdgeContextId Sitecore Edge Context ID
+ * @param {string} [sitecoreEdgeUrl] Sitecore Edge Platform URL. Default is https://edge-platform.sitecorecloud.io
+ * @returns {HTMLLink[]} library stylesheet links
+ */
+export declare function getComponentLibraryStylesheetLinks(layoutData: LayoutServiceData, sitecoreEdgeContextId: string, sitecoreEdgeUrl?: string): HTMLLink[];
+export declare const getStylesheetUrl: (id: string, sitecoreEdgeContextId: string, sitecoreEdgeUrl?: string) => string;

package/types/layout/utils.d.ts

@@ -0,0 +1,17 @@
+import { ComponentRendering, ComponentFields, HtmlElementRendering } from './models';
+/**
+ * Safely extracts a field value from a rendering or fields object.
+ * Null will be returned if the field is not defined.
+ * @param {ComponentRendering | Fields} renderingOrFields the rendering or fields object to extract the field from
+ * @param {string} fieldName the name of the field to extract
+ * @returns {T | undefined} the field value or null if the field is not defined
+ */
+export declare function getFieldValue<T>(renderingOrFields: ComponentRendering | ComponentFields, fieldName: string): T | undefined;
+export declare function getFieldValue<T>(renderingOrFields: ComponentRendering | ComponentFields, fieldName: string, defaultValue: T): T;
+/**
+ * Gets rendering definitions in a given child placeholder under a current rendering.
+ * @param {ComponentRendering} rendering
+ * @param {string} placeholderName
+ * @returns {Array<ComponentRendering | HtmlElementRendering>} child placeholder
+ */
+export declare function getChildPlaceholder(rendering: ComponentRendering, placeholderName: string): Array<ComponentRendering | HtmlElementRendering>;

package/types/media/index.d.ts

@@ -0,0 +1,2 @@
+import * as mediaApi from './media-api';
+export { mediaApi };

package/types/media/media-api.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Makes a request to Sitecore Content Service for the specified item path.
+ * @param {string} editorMarkup the markup to parse
+ * @returns {Object | null} found image tag; null in case if not found
+ */
+export declare const findEditorImageTag: (editorMarkup: string) => {
+    imgTag: string;
+    attrs: {
+        [key: string]: string;
+    };
+} | null;
+/**
+ * Get required query string params which should be merged with user params
+ * @param {object} qs layout service parsed query string
+ * @returns {object} requiredParams
+ */
+export declare const getRequiredParams: (qs: {
+    [key: string]: string | undefined;
+}) => {
+    rev: string | undefined;
+    db: string | undefined;
+    la: string | undefined;
+    vs: string | undefined;
+    ts: string | undefined;
+};
+/**
+ * Replace `/~/media` or `/-/media` with `/~/jssmedia` or `/-/jssmedia`, respectively.
+ * Can use `mediaUrlPrefix` in order to use a custom prefix.
+ * @param {string} url The URL to replace the media URL prefix in
+ * @param {RegExp} [mediaUrlPrefix=mediaUrlPrefixRegex] The regex to match the media URL prefix
+ * @returns {string} The URL with the media URL prefix replaced
+ */
+export declare const replaceMediaUrlPrefix: (url: string, mediaUrlPrefix?: RegExp) => string;
+/**
+ * Prepares a Sitecore media URL with `params` for use by the JSS media handler.
+ * This is done by replacing `/~/media` or `/-/media` with `/~/jssmedia` or `/-/jssmedia`, respectively.
+ * Provided `params` are used as the querystring parameters for the media URL.
+ * Can use `mediaUrlPrefix` in order to use a custom prefix.
+ * If no `params` are sent, the original media URL is returned.
+ * @param {string} url The URL to prepare
+ * @param {Object} [params] The querystring parameters to use
+ * @param {RegExp} [mediaUrlPrefix=mediaUrlPrefixRegex] The regex to match the media URL prefix
+ * @returns {string} The prepared URL
+ */
+export declare const updateImageUrl: (url: string, params?: {
+    [key: string]: string | number | undefined;
+} | null | undefined, mediaUrlPrefix?: RegExp) => string;
+/**
+ * Receives an array of `srcSet` parameters that are iterated and used as parameters to generate
+ * a corresponding set of updated Sitecore media URLs via @see updateImageUrl. The result is a comma-delimited
+ * list of media URLs with respective dimension parameters.
+ *
+ * @example
+ * // returns '/ipsum.jpg?h=1000&w=1000 1000w, /ipsum.jpg?mh=250&mw=250 250w'
+ * getSrcSet('/ipsum.jpg', [{ h: 1000, w: 1000 }, { mh: 250, mw: 250 } ])
+ *
+ * More information about `srcSet`: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img}
+ *
+ * @param {string} url The URL to prepare
+ * @param {Array} srcSet The array of parameters to use
+ * @param {Object} [imageParams] The querystring parameters to use
+ * @param {RegExp} [mediaUrlPrefix] The regex to match the media URL prefix
+ * @returns {string} The prepared URL
+ */
+export declare const getSrcSet: (url: string, srcSet: {
+    [key: string]: string | number | undefined;
+}[], imageParams?: {
+    [key: string]: string | number | undefined;
+} | undefined, mediaUrlPrefix?: RegExp | undefined) => string;

package/types/models.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Html <link> tag data model
+ */
+export declare type HTMLLink = {
+    [key: string]: unknown;
+} & Pick<HTMLLinkElement, 'rel' | 'href'>;

package/types/native-fetcher.d.ts

@@ -0,0 +1,92 @@
+import { Debugger } from './debug';
+declare type NativeDataFetcherOptions = {
+    /**
+     * Override debugger for logging. Uses 'sitecore-jss:http' by default.
+     */
+    debugger?: Debugger;
+    /**
+     * Override fetch method. Uses native (or polyfilled) fetch by default.
+     */
+    fetch?: typeof fetch;
+    /**
+     * Optional request timeout.
+     */
+    timeout?: number;
+};
+/**
+ * Response data for an HTTP request sent to an API
+ * @template T the type of data model requested
+ */
+export interface NativeDataFetcherResponse<T> {
+    /** HTTP status code of the response (i.e. 200, 404) */
+    status: number;
+    /** HTTP status text of the response (i.e. 'OK', 'Bad Request') */
+    statusText: string;
+    /** Response content */
+    data: T;
+}
+export declare type NativeDataFetcherConfig = NativeDataFetcherOptions & RequestInit;
+export declare class NativeDataFetcher {
+    protected config: NativeDataFetcherConfig;
+    private abortTimeout?;
+    constructor(config?: NativeDataFetcherConfig);
+    /**
+     * Implements a data fetcher.
+     * @param {string} url The URL to request (may include query string)
+     * @param {RequestInit} [options] Optional fetch options
+     * @returns {Promise<NativeDataFetcherResponse<T>>} response
+     */
+    fetch<T>(url: string, options?: RequestInit): Promise<NativeDataFetcherResponse<T>>;
+    /**
+     * Perform a GET request
+     * @param {string} url The URL to request (may include query string)
+     * @param {RequestInit} [options] Fetch options
+     * @returns {Promise<NativeDataFetcherResponse<T>>} response
+     */
+    get<T>(url: string, options?: RequestInit): Promise<NativeDataFetcherResponse<T>>;
+    /**
+     * Perform a POST request
+     * @param {string} url The URL to request (may include query string)
+     * @param {unknown} body The data to send with the request
+     * @param {RequestInit} [options] Fetch options
+     * @returns {Promise<NativeDataFetcherResponse<T>>} response
+     */
+    post<T>(url: string, body: unknown, options?: RequestInit): Promise<NativeDataFetcherResponse<T>>;
+    /**
+     * Perform a DELETE request
+     * @param {string} url The URL to request (may include query string)
+     * @param {RequestInit} [options] Fetch options
+     * @returns {Promise<NativeDataFetcherResponse<T>>} response
+     */
+    delete<T>(url: string, options?: RequestInit): Promise<NativeDataFetcherResponse<T>>;
+    /**
+     * Perform a PUT request
+     * @param {string} url The URL to request (may include query string)
+     * @param {unknown} body The data to send with the request
+     * @param {RequestInit} [options] Fetch options
+     * @returns {Promise<NativeDataFetcherResponse<T>>} response
+     */
+    put<T>(url: string, body: unknown, options?: RequestInit): Promise<NativeDataFetcherResponse<T>>;
+    /**
+     * Perform a HEAD request
+     * @param {string} url The URL to request (may include query string)
+     * @param {RequestInit} [options] Fetch options
+     * @returns {Promise<NativeDataFetcherResponse<T>>} response
+     */
+    head<T>(url: string, options?: RequestInit): Promise<NativeDataFetcherResponse<T>>;
+    /**
+     * Determines settings for the request
+     * @param {RequestInit} init Custom settings for request
+     * @returns {RequestInit} The final request settings
+     */
+    protected getRequestInit(init?: RequestInit): RequestInit;
+    /**
+     * Safely extract all headers for debug logging
+     * @param {HeadersInit} incomingHeaders Incoming headers
+     * @returns Object with headers as key/value pairs
+     */
+    protected extractDebugHeaders(incomingHeaders?: HeadersInit): {
+        [key: string]: string | string[];
+    };
+}
+export {};

package/types/personalize/graphql-personalize-service.d.ts

@@ -0,0 +1,77 @@
+import { GraphQLClient, GraphQLRequestClientFactory } from '../graphql-request-client';
+import { CacheClient, CacheOptions } from '../cache-client';
+export declare type GraphQLPersonalizeServiceConfig = CacheOptions & {
+    /**
+     * Timeout (ms) for the Personalize request. Default is 400.
+     */
+    timeout?: number;
+    /**
+     * Optional Sitecore Personalize scope identifier allowing you to isolate your personalization data between XM Cloud environments
+     */
+    scope?: string;
+    /**
+     * Override fetch method. Uses 'GraphQLRequestClient' default otherwise.
+     */
+    fetch?: typeof fetch;
+    /**
+     * A GraphQL Request Client Factory is a function that accepts configuration and returns an instance of a GraphQLRequestClient.
+     * This factory function is used to create and configure GraphQL clients for making GraphQL API requests.
+     */
+    clientFactory: GraphQLRequestClientFactory;
+};
+/**
+ * Object model of personlize info
+ */
+export declare type PersonalizeInfo = {
+    /**
+     * The (CDP-friendly) content id
+     */
+    contentId: string;
+    /**
+     * The configured variant ids
+     */
+    variantIds: string[];
+};
+declare type PersonalizeQueryResult = {
+    layout: {
+        item: {
+            id: string;
+            version: string;
+            personalization: {
+                variantIds: string[];
+            };
+        };
+    };
+};
+export declare class GraphQLPersonalizeService {
+    protected config: GraphQLPersonalizeServiceConfig;
+    private graphQLClient;
+    private cache;
+    protected get query(): string;
+    /**
+     * Fetch personalize data using the Sitecore GraphQL endpoint.
+     * @param {GraphQLPersonalizeServiceConfig} config
+     */
+    constructor(config: GraphQLPersonalizeServiceConfig);
+    /**
+     * Get personalize information for a route
+     * @param {string} itemPath page route
+     * @param {string} language language
+     * @param {string} siteName site name
+     * @returns {Promise<PersonalizeInfo | undefined>} the personalize information or undefined (if itemPath / language not found)
+     */
+    getPersonalizeInfo(itemPath: string, language: string, siteName: string): Promise<PersonalizeInfo | undefined>;
+    /**
+     * Gets cache client implementation
+     * Override this method if custom cache needs to be used
+     * @returns CacheClient instance
+     */
+    protected getCacheClient(): CacheClient<PersonalizeQueryResult>;
+    protected getCacheKey(itemPath: string, language: string, siteName: string): string;
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    protected getGraphQLClient(): GraphQLClient;
+}
+export {};

package/types/personalize/index.d.ts

@@ -0,0 +1,3 @@
+export { personalizeLayout } from './layout-personalizer';
+export { PersonalizeInfo, GraphQLPersonalizeService, GraphQLPersonalizeServiceConfig, } from './graphql-personalize-service';
+export { getPersonalizedRewrite, getPersonalizedRewriteData, normalizePersonalizedRewrite, PersonalizedRewriteData, CdpHelper, } from './utils';

package/types/personalize/layout-personalizer.d.ts

@@ -0,0 +1,25 @@
+import { LayoutServiceData, ComponentRendering, HtmlElementRendering } from './../layout/models';
+export declare type ComponentRenderingWithExperiences = ComponentRendering & {
+    experiences: {
+        [name: string]: ComponentRenderingWithExperiences;
+    };
+};
+/**
+ * Apply personalization to layout data. This will recursively go through all placeholders/components, check experiences nodes and replace default with object from specific experience.
+ * @param {LayoutServiceData} layout Layout data
+ * @param {string} variantId variant id
+ */
+export declare function personalizeLayout(layout: LayoutServiceData, variantId: string): void;
+/**
+
+ * @param {Array} components components within placeholder
+ * @param {string} variantId variant id
+ * @returns {Array<ComponentRendering | HtmlElementRendering>} components with personalization applied
+ */
+export declare function personalizePlaceholder(components: Array<ComponentRendering | HtmlElementRendering>, variantId: string): Array<ComponentRendering | HtmlElementRendering>;
+/**
+ * @param {ComponentRenderingWithExperiences} component component with experiences
+ * @param {string} variantId variant id
+ * @returns {ComponentRendering | null} component with personalization applied or null if hidden
+ */
+export declare function personalizeComponent(component: ComponentRenderingWithExperiences, variantId: string): ComponentRendering | null;

package/types/personalize/utils.d.ts

@@ -0,0 +1,53 @@
+export declare const DEFAULT_VARIANT = "_default";
+export declare const VARIANT_PREFIX = "_variantId_";
+export declare type PersonalizedRewriteData = {
+    variantId: string;
+};
+/**
+ * Get a personalized rewrite path for given pathname
+ * @param {string} pathname the pathname
+ * @param {PersonalizedRewriteData} data the personalize data to include in the rewrite
+ * @returns {string} the rewrite path
+ */
+export declare function getPersonalizedRewrite(pathname: string, data: PersonalizedRewriteData): string;
+/**
+ * Get personalize data from the rewrite path
+ * @param {string} pathname the pathname
+ * @returns {PersonalizedRewriteData} the personalize data from the rewrite
+ */
+export declare function getPersonalizedRewriteData(pathname: string): PersonalizedRewriteData;
+/**
+ * Normalize a personalized rewrite path (remove personalize data)
+ * @param {string} pathname the pathname
+ * @returns {string} the pathname with personalize data removed
+ */
+export declare function normalizePersonalizedRewrite(pathname: string): string;
+/**
+ * Static utility class for Sitecore CDP
+ */
+export declare class CdpHelper {
+    /**
+     * Gets the page variant id for CDP in the required format
+     * @param {string} pageId the page id
+     * @param {string} language the language
+     * @param {string} variantId the variant id
+     * @param {string} [scope] the scope value
+     * @returns {string} the formatted page variant id
+     */
+    static getPageVariantId(pageId: string, language: string, variantId: string, scope?: string): string;
+    /**
+     * Gets the content id for CDP in the required format `embedded_[<scope>_]<id>_<lang>`
+     * @param {string} pageId the page id
+     * @param {string} language the language
+     * @param {string} [scope] the scope value
+     * @returns {string} the content id
+     */
+    static getContentId(pageId: string, language: string, scope?: string): string;
+    /**
+     * Normalizes the scope from the given string value
+     * Removes all non-alphanumeric characters
+     * @param {string} [scope] the scope value
+     * @returns {string} normalized scope value
+     */
+    static normalizeScope(scope?: string): string;
+}

package/types/site/graphql-error-pages-service.d.ts

@@ -0,0 +1,55 @@
+import { GraphQLClient, GraphQLRequestClientConfig } from '../graphql';
+import { LayoutServiceData } from '../layout';
+import { GraphQLRequestClientFactory } from '../graphql-request-client';
+export interface GraphQLErrorPagesServiceConfig extends Pick<GraphQLRequestClientConfig, 'retries'> {
+    /**
+     * The JSS application name
+     */
+    siteName: string;
+    /**
+     * The language
+     */
+    language: string;
+    /**
+     * A GraphQL Request Client Factory is a function that accepts configuration and returns an instance of a GraphQLRequestClient.
+     * This factory function is used to create and configure GraphQL clients for making GraphQL API requests.
+     */
+    clientFactory: GraphQLRequestClientFactory;
+}
+/**
+ * Object model of Error Pages result
+ */
+export declare type ErrorPages = {
+    notFoundPage: {
+        rendered: LayoutServiceData;
+    };
+    notFoundPagePath: string;
+    serverErrorPage: {
+        rendered: LayoutServiceData;
+    };
+    serverErrorPagePath: string;
+};
+/**
+ * Service that fetch the error pages data using Sitecore's GraphQL API.
+ */
+export declare class GraphQLErrorPagesService {
+    options: GraphQLErrorPagesServiceConfig;
+    private graphQLClient;
+    protected get query(): string;
+    /**
+     * Creates an instance of graphQL error pages service with the provided options
+     * @param {GraphQLErrorPagesServiceConfig} options instance
+     */
+    constructor(options: GraphQLErrorPagesServiceConfig);
+    /**
+     * Fetch list of error pages for the site
+     * @returns {ErrorPages} list of url's error pages
+     * @throws {Error} if the siteName is empty.
+     */
+    fetchErrorPages(): Promise<ErrorPages | null>;
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    protected getGraphQLClient(): GraphQLClient;
+}