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

package/dist/esm/native-fetcher.js

@@ -0,0 +1,176 @@
+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());
+    });
+};
+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 debuggers from './debug';
+import TimeoutPromise from './utils/timeout-promise';
+export class NativeDataFetcher {
+    constructor(config = {}) {
+        this.config = config;
+    }
+    /**
+     * 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(url, options = {}) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            const _b = this.config, { debugger: debugOverride, fetch: fetchOverride } = _b, init = __rest(_b, ["debugger", "fetch"]);
+            const startTimestamp = Date.now();
+            const fetchImpl = fetchOverride || fetch;
+            const debug = debugOverride || debuggers.http;
+            // merge options from fetcher config and fetch call
+            const requestInit = this.getRequestInit(Object.assign(Object.assign({}, init), options));
+            const fetchWithOptionalTimeout = [fetchImpl(url, requestInit)];
+            if (init.timeout) {
+                this.abortTimeout = new TimeoutPromise(init.timeout);
+                fetchWithOptionalTimeout.push(this.abortTimeout.start);
+            }
+            // Note a goal here is to provide consistent debug logging and error handling
+            // as we do in GraphQLRequestClient
+            const { headers: reqHeaders } = requestInit, rest = __rest(requestInit, ["headers"]);
+            debug('request: %o', Object.assign({ url, headers: this.extractDebugHeaders(reqHeaders) }, rest));
+            const response = yield Promise.race(fetchWithOptionalTimeout)
+                .then((res) => {
+                var _a;
+                (_a = this.abortTimeout) === null || _a === void 0 ? void 0 : _a.clear();
+                return res;
+            })
+                .catch((error) => {
+                var _a;
+                (_a = this.abortTimeout) === null || _a === void 0 ? void 0 : _a.clear();
+                debug('request error: %o', error);
+                throw error;
+            });
+            // Note even an error status may send useful json data in response (which we want for logging)
+            let respData = undefined;
+            const isJson = (_a = response.headers.get('Content-Type')) === null || _a === void 0 ? void 0 : _a.includes('application/json');
+            if (isJson) {
+                respData = yield response.json().catch((error) => {
+                    debug('response.json() error: %o', error);
+                });
+            }
+            else {
+                // if not JSON, just read the response as text
+                respData = yield response.text().catch((error) => {
+                    debug('response.text() error: %o', error);
+                });
+            }
+            const debugResponse = {
+                status: response.status,
+                statusText: response.statusText,
+                headers: this.extractDebugHeaders(response.headers),
+                url: response.url,
+                redirected: response.redirected,
+                data: respData,
+            };
+            if (!response.ok) {
+                debug('response error: %o', debugResponse);
+                throw new Error(`HTTP ${response.status} ${response.statusText}`);
+            }
+            debug('response in %dms: %o', Date.now() - startTimestamp, debugResponse);
+            return Object.assign(Object.assign({}, response), { data: respData });
+        });
+    }
+    /**
+     * 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(url, options = {}) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.fetch(url, Object.assign({ method: 'GET' }, options));
+        });
+    }
+    /**
+     * 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(url, body, options = {}) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.fetch(url, Object.assign({ method: 'POST', body: JSON.stringify(body) }, options));
+        });
+    }
+    /**
+     * 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(url, options = {}) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.fetch(url, Object.assign({ method: 'DELETE' }, options));
+        });
+    }
+    /**
+     * 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(url, body, options = {}) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.fetch(url, Object.assign({ method: 'PUT', body: JSON.stringify(body) }, options));
+        });
+    }
+    /**
+     * 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(url, options = {}) {
+        return this.fetch(url, Object.assign({ method: 'HEAD' }, options));
+    }
+    /**
+     * Determines settings for the request
+     * @param {RequestInit} init Custom settings for request
+     * @returns {RequestInit} The final request settings
+     */
+    getRequestInit(init = {}) {
+        const headers = new Headers(init.headers);
+        if (!init.method) {
+            init.method = init.body ? 'POST' : 'GET';
+        }
+        headers.set('Content-Type', 'application/json');
+        init.headers = headers;
+        return init;
+    }
+    /**
+     * Safely extract all headers for debug logging
+     * @param {HeadersInit} incomingHeaders Incoming headers
+     * @returns Object with headers as key/value pairs
+     */
+    extractDebugHeaders(incomingHeaders = {}) {
+        const headers = {};
+        if (typeof (incomingHeaders === null || incomingHeaders === void 0 ? void 0 : incomingHeaders.forEach) !== 'string' && incomingHeaders.forEach) {
+            incomingHeaders === null || incomingHeaders === void 0 ? void 0 : incomingHeaders.forEach((value, key) => {
+                headers[key] = value;
+            });
+        }
+        return headers;
+    }
+}

package/dist/esm/personalize/graphql-personalize-service.js

@@ -0,0 +1,107 @@
+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 debug from '../debug';
+import { isTimeoutError } from '../utils';
+import { CdpHelper } from './utils';
+import { MemoryCacheClient } from '../cache-client';
+export class GraphQLPersonalizeService {
+    /**
+     * Fetch personalize data using the Sitecore GraphQL endpoint.
+     * @param {GraphQLPersonalizeServiceConfig} config
+     */
+    constructor(config) {
+        this.config = config;
+        this.config.timeout = config.timeout || 400;
+        this.graphQLClient = this.getGraphQLClient();
+        this.cache = this.getCacheClient();
+    }
+    get query() {
+        return /* GraphQL */ `
+      query($siteName: String!, $language: String!, $itemPath: String!) {
+        layout(site: $siteName, routePath: $itemPath, language: $language) {
+          item {
+            id
+            version
+            personalization {
+              variantIds
+            }
+          }
+        }
+      }
+    `;
+    }
+    /**
+     * 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, language, siteName) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            debug.personalize('fetching personalize info for %s %s %s', siteName, itemPath, language);
+            const cacheKey = this.getCacheKey(itemPath, language, siteName);
+            let data = this.cache.getCacheValue(cacheKey);
+            if (!data) {
+                try {
+                    data = yield this.graphQLClient.request(this.query, {
+                        siteName,
+                        itemPath,
+                        language,
+                    });
+                    this.cache.setCacheValue(cacheKey, data);
+                }
+                catch (error) {
+                    if (isTimeoutError(error)) {
+                        return undefined;
+                    }
+                    throw error;
+                }
+            }
+            return ((_a = data === null || data === void 0 ? void 0 : data.layout) === null || _a === void 0 ? void 0 : _a.item)
+                ? {
+                    // CDP expects content id format `embedded_[<scope>_]<id>_<lang>` (lowercase)
+                    contentId: CdpHelper.getContentId(data.layout.item.id, language, this.config.scope),
+                    variantIds: data.layout.item.personalization.variantIds,
+                }
+                : undefined;
+        });
+    }
+    /**
+     * Gets cache client implementation
+     * Override this method if custom cache needs to be used
+     * @returns CacheClient instance
+     */
+    getCacheClient() {
+        var _a, _b;
+        return new MemoryCacheClient({
+            cacheEnabled: (_a = this.config.cacheEnabled) !== null && _a !== void 0 ? _a : true,
+            cacheTimeout: (_b = this.config.cacheTimeout) !== null && _b !== void 0 ? _b : 10,
+        });
+    }
+    getCacheKey(itemPath, language, siteName) {
+        return `${siteName}-${itemPath}-${language}`;
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.config.clientFactory) {
+            throw new Error('You should provide a clientFactory.');
+        }
+        return this.config.clientFactory({
+            debugger: debug.personalize,
+            fetch: this.config.fetch,
+            timeout: this.config.timeout,
+        });
+    }
+}

package/dist/esm/personalize/index.js

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

package/dist/esm/personalize/layout-personalizer.js

@@ -0,0 +1,69 @@
+/**
+ * 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 function personalizeLayout(layout, variantId) {
+    var _a;
+    // Add variantId to Sitecore context so that it is accessible here
+    layout.sitecore.context.variantId = variantId;
+    const placeholders = (_a = layout.sitecore.route) === null || _a === void 0 ? void 0 : _a.placeholders;
+    if (Object.keys(placeholders !== null && placeholders !== void 0 ? placeholders : {}).length === 0) {
+        return;
+    }
+    if (placeholders) {
+        Object.keys(placeholders).forEach((placeholder) => {
+            placeholders[placeholder] = personalizePlaceholder(placeholders[placeholder], variantId);
+        });
+    }
+}
+/**
+
+ * @param {Array} components components within placeholder
+ * @param {string} variantId variant id
+ * @returns {Array<ComponentRendering | HtmlElementRendering>} components with personalization applied
+ */
+export function personalizePlaceholder(components, variantId) {
+    return components
+        .map((component) => {
+        const rendering = component;
+        if (rendering.experiences !== undefined) {
+            return personalizeComponent(rendering, variantId);
+        }
+        else if (rendering.placeholders) {
+            const placeholders = rendering.placeholders;
+            Object.keys(placeholders).forEach((placeholder) => {
+                placeholders[placeholder] = personalizePlaceholder(placeholders[placeholder], variantId);
+            });
+        }
+        return component;
+    })
+        .filter(Boolean);
+}
+/**
+ * @param {ComponentRenderingWithExperiences} component component with experiences
+ * @param {string} variantId variant id
+ * @returns {ComponentRendering | null} component with personalization applied or null if hidden
+ */
+export function personalizeComponent(component, variantId) {
+    const variant = component.experiences[variantId];
+    if (variant === undefined && component.componentName === undefined) {
+        // DEFAULT IS HIDDEN
+        return null;
+    }
+    else if (variant && variant.componentName === null && variant.dataSource === null) {
+        // HIDDEN
+        return null;
+    }
+    else if (variant) {
+        component = variant;
+    }
+    if (!component.placeholders)
+        return component;
+    Object.keys(component === null || component === void 0 ? void 0 : component.placeholders).forEach((placeholder) => {
+        if (component.placeholders) {
+            component.placeholders[placeholder] = personalizePlaceholder(component.placeholders[placeholder], variantId);
+        }
+    });
+    return component;
+}

package/dist/esm/personalize/utils.js

@@ -0,0 +1,85 @@
+export const DEFAULT_VARIANT = '_default';
+export const VARIANT_PREFIX = '_variantId_';
+/**
+ * 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 function getPersonalizedRewrite(pathname, data) {
+    const path = pathname.startsWith('/') ? pathname : '/' + pathname;
+    return `/${VARIANT_PREFIX}${data.variantId}${path}`;
+}
+/**
+ * Get personalize data from the rewrite path
+ * @param {string} pathname the pathname
+ * @returns {PersonalizedRewriteData} the personalize data from the rewrite
+ */
+export function getPersonalizedRewriteData(pathname) {
+    const data = {
+        variantId: DEFAULT_VARIANT,
+    };
+    const path = pathname.endsWith('/') ? pathname : pathname + '/';
+    const result = path.match(`${VARIANT_PREFIX}(.*?)\\/`);
+    if (result) {
+        data.variantId = result[1];
+    }
+    return data;
+}
+/**
+ * Normalize a personalized rewrite path (remove personalize data)
+ * @param {string} pathname the pathname
+ * @returns {string} the pathname with personalize data removed
+ */
+export function normalizePersonalizedRewrite(pathname) {
+    if (!pathname.includes(VARIANT_PREFIX)) {
+        return pathname;
+    }
+    const result = pathname.match(`${VARIANT_PREFIX}.*?(?:\\/|$)`);
+    return result === null ? pathname : pathname.replace(result[0], '');
+}
+/**
+ * Static utility class for Sitecore CDP
+ */
+export 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, language, variantId, scope) {
+        const formattedPageId = pageId.replace(/[{}-]/g, '');
+        const formattedLanguage = language.replace('-', '_');
+        const scopeId = scope ? `${this.normalizeScope(scope)}_` : '';
+        let formattedVariantId = variantId;
+        if (!variantId || variantId === DEFAULT_VARIANT) {
+            formattedVariantId = 'default';
+        }
+        return `${scopeId}${formattedPageId}_${formattedLanguage}_${formattedVariantId}`.toLowerCase();
+    }
+    /**
+     * 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, language, scope) {
+        const formattedPageId = pageId.replace(/[{}-]/g, '');
+        const formattedLanguage = language.replace('-', '_');
+        const scopeId = scope ? `${this.normalizeScope(scope)}_` : '';
+        return `embedded_${scopeId}${formattedPageId}_${formattedLanguage}`.toLowerCase();
+    }
+    /**
+     * 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) {
+        return (scope === null || scope === void 0 ? void 0 : scope.replace(/[^a-zA-Z0-9]+/g, '')) || '';
+    }
+}

package/dist/esm/site/graphql-error-pages-service.js

@@ -0,0 +1,79 @@
+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 { siteNameError } from '../constants';
+import debug from '../debug';
+// The default query for request error handling
+const defaultQuery = /* GraphQL */ `
+  query ErrorPagesQuery($siteName: String!, $language: String!) {
+    site {
+      siteInfo(site: $siteName) {
+        errorHandling(language: $language) {
+          notFoundPage {
+            rendered
+          }
+          notFoundPagePath
+          serverErrorPage {
+            rendered
+          }
+          serverErrorPagePath
+        }
+      }
+    }
+  }
+`;
+/**
+ * Service that fetch the error pages data using Sitecore's GraphQL API.
+ */
+export class GraphQLErrorPagesService {
+    /**
+     * Creates an instance of graphQL error pages service with the provided options
+     * @param {GraphQLErrorPagesServiceConfig} options instance
+     */
+    constructor(options) {
+        this.options = options;
+        this.graphQLClient = this.getGraphQLClient();
+    }
+    get query() {
+        return defaultQuery;
+    }
+    /**
+     * Fetch list of error pages for the site
+     * @returns {ErrorPages} list of url's error pages
+     * @throws {Error} if the siteName is empty.
+     */
+    fetchErrorPages() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const siteName = this.options.siteName;
+            const language = this.options.language;
+            if (!siteName) {
+                throw new Error(siteNameError);
+            }
+            return this.graphQLClient.request(this.query, {
+                siteName,
+                language,
+            })
+                .then((result) => result.site.siteInfo ? result.site.siteInfo.errorHandling : null)
+                .catch((e) => Promise.reject(e));
+        });
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.options.clientFactory) {
+            throw new Error('You should provide a clientFactory.');
+        }
+        return this.options.clientFactory({
+            debugger: debug.errorpages,
+            retries: this.options.retries,
+        });
+    }
+}

package/dist/esm/site/graphql-redirects-service.js

@@ -0,0 +1,96 @@
+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 { siteNameError } from '../constants';
+import debug from '../debug';
+import { MemoryCacheClient } from '../cache-client';
+export const REDIRECT_TYPE_301 = 'REDIRECT_301';
+export const REDIRECT_TYPE_302 = 'REDIRECT_302';
+export const REDIRECT_TYPE_SERVER_TRANSFER = 'SERVER_TRANSFER';
+// The default query for request redirects of site
+const defaultQuery = /* GraphQL */ `
+  query RedirectsQuery($siteName: String!) {
+    site {
+      siteInfo(site: $siteName) {
+        redirects {
+          pattern
+          target
+          redirectType
+          isQueryStringPreserved
+          locale
+        }
+      }
+    }
+  }
+`;
+/**
+ *  The GraphQLRedirectsService class is used to query the JSS redirects using Graphql endpoint
+ */
+export class GraphQLRedirectsService {
+    /**
+     * Creates an instance of graphQL redirects service with the provided options
+     * @param {GraphQLRedirectsServiceConfig} options instance
+     */
+    constructor(options) {
+        this.options = options;
+        this.graphQLClient = this.getGraphQLClient();
+        this.cache = this.getCacheClient();
+    }
+    get query() {
+        return defaultQuery;
+    }
+    /**
+     * Fetch an array of redirects from API
+     * @param {string} siteName site name
+     * @returns Promise<RedirectInfo[]>
+     * @throws {Error} if the siteName is empty.
+     */
+    fetchRedirects(siteName) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!siteName) {
+                throw new Error(siteNameError);
+            }
+            const cacheKey = `redirects-${siteName}`;
+            let data = this.cache.getCacheValue(cacheKey);
+            if (!data) {
+                data = yield this.graphQLClient.request(this.query, {
+                    siteName,
+                });
+                this.cache.setCacheValue(cacheKey, data);
+            }
+            return ((_b = (_a = data === null || data === void 0 ? void 0 : data.site) === null || _a === void 0 ? void 0 : _a.siteInfo) === null || _b === void 0 ? void 0 : _b.redirects) || [];
+        });
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.options.clientFactory) {
+            throw new Error('You should provide a clientFactory.');
+        }
+        return this.options.clientFactory({
+            debugger: debug.redirects,
+            fetch: this.options.fetch,
+        });
+    }
+    /**
+     * Gets cache client implementation
+     * Override this method if custom cache needs to be used
+     * @returns CacheClient instance
+     */
+    getCacheClient() {
+        var _a, _b;
+        return new MemoryCacheClient({
+            cacheEnabled: (_a = this.options.cacheEnabled) !== null && _a !== void 0 ? _a : true,
+            cacheTimeout: (_b = this.options.cacheTimeout) !== null && _b !== void 0 ? _b : 10,
+        });
+    }
+}