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

package/dist/esm/services/base-graphql-sitemap-service.js

@@ -0,0 +1,201 @@
+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 '@sitecore-content-sdk/core';
+import { getPersonalizedRewrite } from '@sitecore-content-sdk/core/personalize';
+/** @private */
+export const languageError = 'The list of languages cannot be empty';
+export const siteError = 'The service needs a site name';
+/**
+ * @param {string} siteName to inject into error text
+ * @private
+ */
+export function getSiteEmptyError(siteName) {
+    return `Site "${siteName}" does not exist or site item tree is missing`;
+}
+const languageEmptyError = 'The language must be a non-empty string';
+/**
+ * GQL query made dynamic based whether personalization is enabled or not
+ * @param {boolean} usesPersonalize flag to detrmine which variation of a query to run
+ * @returns GraphQL query to fetch site paths with
+ */
+const defaultQuery = (usesPersonalize) => /* GraphQL */ `
+query ${usesPersonalize ? 'PersonalizeSitemapQuery' : 'DefaultSitemapQuery'}(
+  $siteName: String!
+  $language: String!
+  $includedPaths: [String]
+  $excludedPaths: [String]
+  $pageSize: Int = 100
+  $after: String
+) {
+  site {
+    siteInfo(site: $siteName) {
+      routes(
+        language: $language
+        includedPaths: $includedPaths
+        excludedPaths: $excludedPaths
+        first: $pageSize
+        after: $after
+      ){
+        total
+        pageInfo {
+          endCursor
+          hasNext
+        }
+        results {
+          path: routePath
+          ${usesPersonalize
+    ? `
+              route {
+                personalization {
+                  variantIds
+                }
+              }`
+    : ''}
+        }
+      }
+    }
+  }
+}
+`;
+/**
+ * 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>
+ */
+export class BaseGraphQLSitemapService {
+    /**
+     * Creates an instance of graphQL sitemap service with the provided options
+     * @param {GraphQLSitemapServiceConfig} options instance
+     */
+    constructor(options) {
+        this.options = options;
+        this._graphQLClient = this.getGraphQLClient();
+    }
+    /**
+     * GraphQL client accessible by descendant classes when needed
+     */
+    get graphQLClient() {
+        return this._graphQLClient;
+    }
+    /**
+     * Gets the default query used for fetching the list of site pages
+     */
+    get query() {
+        return defaultQuery(this.options.includePersonalizedRoutes);
+    }
+    /**
+     * Fetch sitemap which could be used for generation of static pages during `next export`.
+     * The `locale` parameter will be used in the item query, but since i18n is not supported,
+     * the output paths will not include a `language` property.
+     * @param {string} locale which application supports
+     * @returns an array of @see StaticPath objects
+     */
+    fetchExportSitemap(locale) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const formatPath = (path) => ({
+                params: {
+                    path,
+                },
+            });
+            return this.fetchSitemap([locale], formatPath);
+        });
+    }
+    /**
+     * Fetch sitemap which could be used for generation of static pages using SSG mode
+     * @param {string[]} locales locales which application supports
+     * @returns an array of @see StaticPath objects
+     */
+    fetchSSGSitemap(locales) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const formatPath = (path, locale) => ({
+                params: {
+                    path,
+                },
+                locale,
+            });
+            return this.fetchSitemap(locales, formatPath);
+        });
+    }
+    getTranformedPaths(siteName, languages, formatStaticPath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const paths = new Array();
+            for (const language of languages) {
+                if (language === '') {
+                    throw new RangeError(languageEmptyError);
+                }
+                debug.sitemap('fetching sitemap data for %s %s', language, siteName);
+                const results = yield this.fetchLanguageSitePaths(language, siteName);
+                const transformedPaths = yield this.transformLanguageSitePaths(results, formatStaticPath, language);
+                paths.push(...transformedPaths);
+            }
+            return paths;
+        });
+    }
+    transformLanguageSitePaths(sitePaths, formatStaticPath, language) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const formatPath = (path) => formatStaticPath(path.replace(/^\/|\/$/g, '').split('/'), language);
+            const aggregatedPaths = [];
+            sitePaths.forEach((item) => {
+                var _a, _b, _c;
+                if (!item)
+                    return;
+                aggregatedPaths.push(formatPath(item.path));
+                const variantIds = (_c = (_b = (_a = item.route) === null || _a === void 0 ? void 0 : _a.personalization) === null || _b === void 0 ? void 0 : _b.variantIds) === null || _c === void 0 ? void 0 : _c.filter((variantId) => !variantId.includes('_') // exclude component A/B test variants
+                );
+                if (variantIds === null || variantIds === void 0 ? void 0 : variantIds.length) {
+                    aggregatedPaths.push(...variantIds.map((varId) => formatPath(getPersonalizedRewrite(item.path, [varId]))));
+                }
+            });
+            return aggregatedPaths;
+        });
+    }
+    fetchLanguageSitePaths(language, siteName) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            const args = {
+                siteName: siteName,
+                language: language,
+                pageSize: this.options.pageSize,
+                includedPaths: this.options.includedPaths,
+                excludedPaths: this.options.excludedPaths,
+            };
+            let results = [];
+            let hasNext = true;
+            let after = '';
+            while (hasNext) {
+                const fetchResponse = yield this.graphQLClient.request(this.query, Object.assign(Object.assign({}, args), { after }));
+                if (!((_a = fetchResponse === null || fetchResponse === void 0 ? void 0 : fetchResponse.site) === null || _a === void 0 ? void 0 : _a.siteInfo)) {
+                    throw new RangeError(getSiteEmptyError(siteName));
+                }
+                else {
+                    results = results.concat((_b = fetchResponse.site.siteInfo.routes) === null || _b === void 0 ? void 0 : _b.results);
+                    hasNext = (_c = fetchResponse.site.siteInfo.routes) === null || _c === void 0 ? void 0 : _c.pageInfo.hasNext;
+                    after = (_d = fetchResponse.site.siteInfo.routes) === null || _d === void 0 ? void 0 : _d.pageInfo.endCursor;
+                }
+            }
+            return results;
+        });
+    }
+    /**
+     * Gets a GraphQL client that can make requests to the API. Uses graphql-request as the default
+     * library for fetching graphql data (@see GraphQLRequestClient). Override this method if you
+     * want to use something else.
+     * @returns {GraphQLClient} implementation
+     */
+    getGraphQLClient() {
+        if (!this.options.clientFactory) {
+            throw new Error('clientFactory needs to be provided when initializing GraphQL client.');
+        }
+        return this.options.clientFactory({
+            debugger: debug.sitemap,
+        });
+    }
+}

package/dist/esm/services/component-props-service.js

@@ -0,0 +1,160 @@
+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 chalk from 'chalk';
+export class ComponentPropsService {
+    /**
+     * SSR mode
+     * Fetch component props using getServerSideProps function
+     * @param {FetchComponentPropsArguments<GetServerSidePropsContext>} params fetch params
+     * @returns {Promise<ComponentPropsCollection>} props
+     */
+    fetchServerSideComponentProps(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { moduleFactory, layoutData, context } = params;
+            const fetchFunctionFactory = (componentName) => __awaiter(this, void 0, void 0, function* () {
+                const module = yield moduleFactory(componentName);
+                return module === null || module === void 0 ? void 0 : module.getServerSideProps;
+            });
+            return this.fetchComponentProps(fetchFunctionFactory, layoutData, context);
+        });
+    }
+    /**
+     * SSG mode
+     * Fetch component props using getStaticProps function
+     * @param {FetchComponentPropsArguments<GetStaticPropsContext>} params fetch arguments
+     * @returns {Promise<ComponentPropsCollection>} props
+     */
+    fetchStaticComponentProps(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { moduleFactory, layoutData, context } = params;
+            const fetchFunctionFactory = (componentName) => __awaiter(this, void 0, void 0, function* () {
+                const module = yield moduleFactory(componentName);
+                return module === null || module === void 0 ? void 0 : module.getStaticProps;
+            });
+            return this.fetchComponentProps(fetchFunctionFactory, layoutData, context);
+        });
+    }
+    /**
+     * Traverse Layout Service data tree and call side effects on component level.
+     * Side effect function can be: getStaticProps (SSG) or getServerSideProps (SSR)
+     * @param {FetchFunctionFactory<NextContext>} fetchFunctionFactory fetch function factory
+     * @param {LayoutServiceData} layoutData layout data
+     * @param {NextContext} context next context
+     * @returns {Promise<ComponentPropsCollection>} component props
+     */
+    fetchComponentProps(fetchFunctionFactory, layoutData, context) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            // Array of side effect functions
+            const requests = yield this.collectRequests({
+                placeholders: (_a = layoutData.sitecore.route) === null || _a === void 0 ? void 0 : _a.placeholders,
+                fetchFunctionFactory,
+                layoutData,
+                context,
+            });
+            return yield this.execRequests(requests);
+        });
+    }
+    /**
+     * Go through layout service data, check all renderings using displayName, which should make some side effects.
+     * Write result in requests variable
+     * @param {object} params params
+     * @param {PlaceholdersData} [params.placeholders]
+     * @param {FetchFunctionFactory<NextContext>} params.fetchFunctionFactory
+     * @param {LayoutServiceData} params.layoutData
+     * @param {NextContext} params.context
+     * @param {ComponentPropsRequest<NextContext>[]} params.requests
+     * @returns {ComponentPropsRequest<NextContext>[]} array of requests
+     */
+    collectRequests(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { placeholders = {}, fetchFunctionFactory, layoutData, context } = params;
+            // Will be called on first round
+            if (!params.requests) {
+                params.requests = [];
+            }
+            const renderings = this.flatRenderings(placeholders);
+            const actions = renderings.map((r) => __awaiter(this, void 0, void 0, function* () {
+                const fetchFunc = yield fetchFunctionFactory(r.componentName);
+                if (fetchFunc) {
+                    params.requests &&
+                        params.requests.push({
+                            fetch: fetchFunc,
+                            rendering: r,
+                            layoutData: layoutData,
+                            context,
+                        });
+                }
+                // If placeholders exist in current rendering
+                if (r.placeholders) {
+                    yield this.collectRequests(Object.assign(Object.assign({}, params), { placeholders: r.placeholders }));
+                }
+            }));
+            yield Promise.all(actions);
+            return params.requests;
+        });
+    }
+    /**
+     * Execute request for component props
+     * @param {ComponentPropsRequest<NextContext>[]} requests requests
+     * @returns {Promise<ComponentPropsCollection>} requests result
+     */
+    execRequests(requests) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const componentProps = {};
+            const promises = requests.map((req) => {
+                const { uid } = req.rendering;
+                if (!uid) {
+                    console.log(`Component ${req.rendering.componentName} doesn't have uid, can't store data for this component`);
+                    return;
+                }
+                return req
+                    .fetch(req.rendering, req.layoutData, req.context)
+                    .then((result) => {
+                    // Set component specific data in componentProps store
+                    componentProps[uid] = result;
+                })
+                    .catch((error) => {
+                    const errLog = `Error during preload data for component ${req.rendering.componentName} (${uid}): ${error.message || error}`;
+                    console.error(chalk.red(errLog));
+                    componentProps[uid] = {
+                        error: error.message || errLog,
+                        componentName: req.rendering.componentName,
+                    };
+                });
+            });
+            yield Promise.all(promises);
+            return componentProps;
+        });
+    }
+    /**
+     * Take renderings from all placeholders and returns a flat array of renderings.
+     * @example
+     * const placeholders = {
+     *    x1: [{ uid: 1 }, { uid: 2 }],
+     *    x2: [{ uid: 11 }, { uid: 22 }]
+     * }
+     *
+     * flatRenderings(placeholders);
+     *
+     * RESULT: [{ uid: 1 }, { uid: 2 }, { uid: 11 }, { uid: 22 }]
+     * @param {PlaceholdersData} placeholders placeholders
+     * @returns {ComponentRendering[]} renderings
+     */
+    flatRenderings(placeholders) {
+        const allComponentRenderings = [];
+        const placeholdersArr = Object.values(placeholders);
+        placeholdersArr.forEach((pl) => {
+            const renderings = pl;
+            allComponentRenderings.push(...renderings);
+        });
+        return allComponentRenderings;
+    }
+}

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

@@ -0,0 +1,59 @@
+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 { BaseGraphQLSitemapService, } from './base-graphql-sitemap-service';
+/** @private */
+export const languageError = 'The list of languages cannot be empty';
+export const siteError = 'The service needs a site name';
+/**
+ * @param {string} siteName to inject into error text
+ * @private
+ */
+export 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>
+ */
+export class GraphQLSitemapService extends 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(languageError);
+            }
+            const siteName = this.options.siteName;
+            if (!siteName) {
+                throw new RangeError(siteError);
+            }
+            paths.push(...(yield this.getTranformedPaths(siteName, languages, formatStaticPath)));
+            return [].concat(...paths);
+        });
+    }
+}

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

@@ -0,0 +1,77 @@
+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 { getSiteRewrite } from '@sitecore-content-sdk/core/site';
+import { BaseGraphQLSitemapService, languageError, } from './base-graphql-sitemap-service';
+export const 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>
+ */
+export class MultisiteGraphQLSitemapService extends 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(languageError);
+            }
+            // Get all sites
+            const sites = this.options.sites;
+            if (!sites || !sites.length) {
+                throw new RangeError(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 = getSiteRewrite(item.path, { siteName: siteName });
+                }
+            });
+            return results;
+        });
+    }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/site/index.js

@@ -0,0 +1 @@
+export { SiteResolver } from '@sitecore-content-sdk/core/site';

package/dist/esm/utils/index.js

@@ -0,0 +1,3 @@
+export { handleEditorFastRefresh } from './utils';
+export { tryParseEnvValue, resolveUrl } from '@sitecore-content-sdk/core/utils';
+export { isEditorActive, resetEditorChromes } from '@sitecore-content-sdk/core/editing';

package/dist/esm/utils/utils.js

@@ -0,0 +1,37 @@
+import { isEditorActive, resetEditorChromes } from '@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
+ */
+export const handleEditorFastRefresh = (forceReload = false) => {
+    if (process.env.NODE_ENV !== 'development' || !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...');
+            resetEditorChromes();
+        }, 500);
+    };
+};
+export 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;
+};

package/editing.d.ts

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

package/editing.js

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

package/global.d.ts

@@ -0,0 +1,21 @@
+declare module 'sync-disk-cache' {
+  export default import('sync-disk-cache').default;
+
+  export interface CacheInstance {
+    root: string;
+    set(key: string, editingData: string): string;
+    get(key: string): { value: string; isCached?: boolean };
+    remove(key: string): void;
+  }
+}
+
+declare namespace NodeJS {
+  export interface Global {
+    [key: string]: unknown;
+    requestAnimationFrame: (callback: () => void) => void;
+    window: Window;
+    document: Document;
+    navigator: Navigator;
+    HTMLElement: HTMLElement;
+  }
+}

package/graphql.d.ts

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

package/graphql.js

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

package/middleware.d.ts

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

package/middleware.js

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

package/monitoring.d.ts

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

package/monitoring.js

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