@enonic/nextjs-adapter 3.0.0-B3 → 3.0.0-B4

package/src/guillotine/buildErrorResponse.ts

@@ -0,0 +1,39 @@
+import type {
+    FetchContentResult,
+} from '../types';
+
+
+import {
+    RENDER_MODE,
+    XP_REQUEST_TYPE,
+} from '../common/constants';
+
+
+export function buildErrorResponse(requestType: XP_REQUEST_TYPE, renderMode: RENDER_MODE,
+    apiUrl: string, baseUrl: string, locale: string, defaultLocale: string,
+    contentPath ? : string): (code ? : string, message ? : string) => FetchContentResult {
+
+    return function (code = '500', message = 'Unknown error') {
+        return {
+            error: {
+                code,
+                message,
+            },
+            page: null,
+            common: null,
+            data: null,
+            meta: {
+                type: '',
+                requestType: requestType,
+                renderMode: renderMode,
+                path: contentPath || '',
+                canRender: false,
+                catchAll: false,
+                apiUrl,
+                baseUrl,
+                locale,
+                defaultLocale,
+            },
+        };
+    };
+}

package/src/guillotine/buildPage.ts

@@ -0,0 +1,15 @@
+import type {PageComponent} from '../types';
+
+
+import {XP_COMPONENT_TYPE} from '../common/constants';
+import {buildComponentTree} from './buildComponentTree';
+
+
+export function buildPage(contentType: string, comps: PageComponent[] = []): PageComponent {
+    const page: PageComponent = {
+        type: XP_COMPONENT_TYPE.PAGE,
+        path: '/',
+    };
+
+    return buildComponentTree(comps, page, contentType);
+}

package/src/guillotine/collectComponentDescriptors.ts

@@ -0,0 +1,63 @@
+import type {
+    ComponentDescriptor,
+    Context,
+    PageComponent,
+} from '../types';
+
+
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import {XP_COMPONENT_TYPE} from '../common/constants';
+import {
+    APP_NAME,
+    APP_NAME_DASHED,
+} from '../common/env';
+import {processComponentConfig} from './processComponentConfig';
+import {getComponentConfig} from './getComponentConfig';
+import {getQueryAndVariables} from './getQueryAndVariables';
+
+
+export function collectComponentDescriptors({
+    components,
+    xpContentPath,
+    context,
+}: {
+    components: PageComponent[]
+    xpContentPath: string
+    context: Context
+}): ComponentDescriptor[] {
+
+    const descriptors: ComponentDescriptor[] = [];
+
+    for (const cmp of (components || [])) {
+        processComponentConfig(APP_NAME, APP_NAME_DASHED, cmp);
+        // only look for parts
+        // look for single part if it is a single component request
+        if (XP_COMPONENT_TYPE.FRAGMENT !== cmp.type) {
+            const cmpDef = ComponentRegistry.getByComponent(cmp);
+            if (cmpDef) {
+                // const partPath = `${xpContentPath}/_component${cmp.path}`;
+                const config = getComponentConfig(cmp);
+                const queryAndVariables = getQueryAndVariables(cmp.type, xpContentPath, context, cmpDef.query, config);
+                if (queryAndVariables) {
+                    descriptors.push({
+                        component: cmp,
+                        type: cmpDef,
+                        queryAndVariables: queryAndVariables,
+                    });
+                }
+            }
+        } else {
+            // look for parts inside fragments
+            const fragPartDescs = collectComponentDescriptors({
+                components: cmp.fragment?.fragment?.components,
+                xpContentPath,
+                context,
+            });
+            if (fragPartDescs.length) {
+                descriptors.push(...fragPartDescs);
+            }
+        }
+    }
+
+    return descriptors;
+}

package/src/guillotine/combineMultipleQueries.ts

@@ -0,0 +1,75 @@
+import type {
+    ComponentDescriptor,
+    QueryAndVariables,
+} from '../types';
+
+
+const ALIAS_PREFIX = 'request';
+
+const GRAPHQL_FRAGMENTS_REGEXP = /fragment\s+.+\s+on\s+.+\s*{[\s\w{}().,:"'`]+}/;
+
+const GUILLOTINE_QUERY_REGEXP = /^\s*query\s*(?:\((.*)*\))?\s*{\s*guillotine\s*{((?:.|\s)+)}\s*}\s*$/;
+
+
+export function combineMultipleQueries(queriesWithVars: ComponentDescriptor[]): QueryAndVariables {
+    const queries: string[] = [];
+    const fragments: string[] = [];
+    const superVars: Record<string,any> = {};
+    const superParams: string[] = [];
+
+    queriesWithVars.forEach((componentDescriptor: ComponentDescriptor, index: number) => {
+        const queryAndVars = componentDescriptor.queryAndVariables;
+        if (!queryAndVars) {
+            return;
+        }
+
+        // Extract fragments first if exist
+        let q = queryAndVars.query;
+        let match = q.match(GRAPHQL_FRAGMENTS_REGEXP);
+        if (match?.length === 1) {
+            // extract a fragment to put it at root level
+            fragments.push(match[0]);
+            // remove it from query because queries are going to get wrapped
+            q = q.replace(match[0], '');
+        }
+
+        // Extract graphql query and its params and add prefixes to exclude collisions with other queries
+        match = q.match(GUILLOTINE_QUERY_REGEXP) || ['']; // Fall back to empty string if no match
+        const args = match[1];
+        let query = match[2];
+
+        if (args) {
+            args.split(',').forEach(originalParamString => {
+                const [originalKey, originalVal] = originalParamString.trim().split(':');
+                const [prefixedKey, prefixedVal] = [`$${ALIAS_PREFIX}${index}_${originalKey.substr(1)}`, originalVal];
+                superParams.push(`${prefixedKey}:${prefixedVal}`);
+                // also update param references in query itself !
+                // query = query.replaceAll(originalKey, prefixedKey);
+                // replaceAll is not supported in older nodejs versions
+                const origKeyPattern = new RegExp(originalKey.replace(/\$/g, '\\$'), 'g');
+                query = query.replace(origKeyPattern, prefixedKey);
+            });
+        }
+
+        if (query?.length) {
+            queries.push(`${ALIAS_PREFIX}${index}:guillotine {${query}}`);
+        }
+
+        // Update variables with the same prefixes
+        Object.entries(queryAndVars.variables || {}).forEach(entry => {
+            superVars[`${ALIAS_PREFIX}${index}_${entry[0]}`] = entry[1];
+        });
+    });
+
+    // Compose the super query
+    const superQuery = `query ${superParams.length ? `(${superParams.join(', ')})` : ''} {
+        ${queries.join('\n')}
+    }
+    ${fragments.join('\n')}
+    `;
+
+    return {
+        query: superQuery,
+        variables: superVars,
+    };
+}

package/src/guillotine/createMetaData.ts

@@ -0,0 +1,73 @@
+import type {
+    ComponentDefinition,
+    MetaData,
+    PageComponent,
+} from '../types';
+
+
+import {RENDER_MODE, XP_REQUEST_TYPE} from '../common/constants';
+import {ComponentRegistry} from '../common/ComponentRegistry';
+
+
+export function createMetaData({
+    apiUrl,
+    baseUrl,
+    components = [], // Optional NOTE: Doesn't handle null
+    contentPath,
+    contentType,
+    defaultLocale,
+    locale,
+    pageCmp, // Optional
+    renderMode,
+    requestedComponentPath,
+    requestType,
+}: {
+    apiUrl: string
+    baseUrl: string
+    components?: PageComponent[]
+    contentPath: string
+    contentType: string
+    defaultLocale: string
+    locale: string
+    pageCmp?: PageComponent
+    renderMode: RENDER_MODE
+    requestedComponentPath: string | undefined
+    requestType: XP_REQUEST_TYPE
+}): MetaData {
+    // .meta will be visible in final rendered inline props.
+    // Only adding some .meta attributes here on certain conditions
+    // (instead of always adding them and letting them be visible as false/undefined etc)
+    const meta: MetaData = {
+        apiUrl,
+        baseUrl,
+        canRender: false,
+        catchAll: false, // catchAll only refers to content type catch-all
+        defaultLocale,
+        locale,
+        path: contentPath,
+        renderMode: renderMode,
+        requestType: requestType,
+        type: contentType,
+    };
+
+    if (requestedComponentPath) {
+        meta.requestedComponent = components.find(cmp => cmp.path === requestedComponentPath);
+    }
+
+    const pageDesc = pageCmp?.page?.descriptor;
+    const typeDef = ComponentRegistry.getContentType(contentType);
+    if (typeDef?.view && !typeDef.catchAll) {
+        meta.canRender = true;
+    } else if (requestType === XP_REQUEST_TYPE.COMPONENT) {
+        // always render a single component (show missing if not implemented)
+        meta.canRender = true;
+    } else if (pageDesc) {
+        // always render a page if there is a descriptor (show missing if not implemented)
+        meta.canRender = true;
+    } else if (typeDef?.view) {
+        meta.canRender = true;
+        meta.catchAll = true;
+    }
+
+    return meta;
+}

package/src/guillotine/fetchContent.ts

@@ -0,0 +1,250 @@
+import type {ComponentDescriptor, Context, FetchContentResult} from '../types';
+
+
+import {headers} from 'next/headers';
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import {UrlProcessor} from '../common/UrlProcessor';
+import {
+    FRAGMENT_CONTENTTYPE_NAME,
+    PAGE_TEMPLATE_CONTENTTYPE_NAME,
+    PAGE_TEMPLATE_FOLDER,
+    RENDER_MODE,
+    XP_COMPONENT_TYPE,
+    XP_REQUEST_TYPE,
+} from '../common/constants';
+import {APP_NAME, APP_NAME_DASHED, IS_DEV_MODE} from '../common/env';
+import {getContentApiUrl} from '../utils/getContentApiUrl';
+import {getProjectLocaleConfig} from '../utils/getProjectLocaleConfig';
+import {getRenderMode} from '../utils/getRenderMode';
+import {getXpBaseUrl} from '../utils/getXpBaseUrl';
+import {getRequestLocaleInfo} from '../utils/getRequestLocaleInfo';
+import {buildGuillotineRequestHeaders} from '../utils/buildGuillotineRequestHeaders';
+
+import {buildPage} from './buildPage';
+import {fetchMetaData} from './fetchMetaData';
+import {getCleanContentPathArrayOrThrow400} from './getCleanContentPathArrayOrThrow400';
+import {buildErrorResponse} from './buildErrorResponse';
+import {getContentAndComponentPaths} from './getContentAndComponentPaths';
+import {restrictComponentsToPath} from './restrictComponentsToPath';
+import {processComponentConfig} from './processComponentConfig';
+import {getQueryAndVariables} from './getQueryAndVariables';
+import {collectComponentDescriptors} from './collectComponentDescriptors';
+import {combineMultipleQueries} from './combineMultipleQueries';
+import {fetchContentData} from './fetchContentData';
+import {applyProcessors} from './applyProcessors';
+import {createMetaData} from './createMetaData';
+
+
+/**
+ * Default fetchContent function, built with params from imports.
+ * It runs custom content-type-specific guillotine calls against an XP guillotine endpoint, returns content data, error and some meta data
+ * Sends one query to the guillotine API and asks for content type, then uses the type to select a second query and variables, which is sent to the API and fetches content data.
+ * @param context object from Next, contains .query info
+ * @returns FetchContentResult object: {data?: T, error?: {code, message}}
+ */
+export async function fetchContent(context: Context): Promise<FetchContentResult> {
+    const {locale, locales, defaultLocale} = getRequestLocaleInfo(context);
+
+    // ideally we only want to set headers in draft mode,
+    // but draft mode token is not passed in non-static mode
+    // so try to add them whenever they are absent
+    if (!context.headers) {
+        // TODO does this break routing or dynamic server-side rendering?
+        // I guess hydration will fix it anyway?
+        const allHeaders = headers();
+
+        context.headers = new Headers();
+        allHeaders.forEach((value, key) => {
+            context.headers.set(key, value);
+        });
+    }
+
+    const outHeaders = buildGuillotineRequestHeaders({
+        context,
+        defaultLocale,
+        locale,
+        locales,
+    });
+    const xpBaseUrl = getXpBaseUrl(context);
+    const contentApiUrl = getContentApiUrl(context);
+    const projectConfig = getProjectLocaleConfig(context);
+    const renderMode = getRenderMode(context);
+    let requestType = XP_REQUEST_TYPE.TYPE;
+    const requestContentPath = getCleanContentPathArrayOrThrow400(context.contentPath);
+    const errorResponse = buildErrorResponse(requestType, renderMode, contentApiUrl, xpBaseUrl, locale, defaultLocale, requestContentPath);
+
+    UrlProcessor.setSiteKey(projectConfig.site);
+
+    try {
+        const [siteRelativeContentPath, componentPath] = getContentAndComponentPaths(requestContentPath);
+        if (componentPath) {
+            // set component request type because url contains component path
+            requestType = XP_REQUEST_TYPE.COMPONENT;
+        }
+
+        // /////////////  FIRST GUILLOTINE CALL FOR METADATA     /////////////////
+        const metaResult = await fetchMetaData(contentApiUrl, '${site}/' + siteRelativeContentPath, projectConfig, outHeaders);
+        // ///////////////////////////////////////////////////////////////////////
+
+        const {_path, type} = metaResult.meta || {};
+        const contentPath = _path || siteRelativeContentPath;
+
+        if (metaResult.error) {
+            console.error(metaResult.error);
+            return errorResponse(metaResult.error.code, metaResult.error.message);
+        }
+
+        if (!metaResult.meta) {
+            return errorResponse('404', 'No meta data found for content, most likely content does not exist');
+        } else if (!type) {
+            return errorResponse('500', "Server responded with incomplete meta data: missing content 'type' attribute.");
+
+        } else if (
+            renderMode === RENDER_MODE.NEXT
+            && !IS_DEV_MODE
+            && (
+                type === FRAGMENT_CONTENTTYPE_NAME ||
+                type === PAGE_TEMPLATE_CONTENTTYPE_NAME ||
+                type === PAGE_TEMPLATE_FOLDER
+        )) {
+            return errorResponse('404', `Content type [${type}] is not accessible in ${renderMode} mode`);
+        }
+
+        const components = restrictComponentsToPath(type, metaResult.meta.components, componentPath);
+        if (componentPath && !components.length) {
+            // component was not found
+            return errorResponse('404', `Component ${componentPath} was not found`);
+        }
+
+        if (requestType !== XP_REQUEST_TYPE.COMPONENT && components.length > 0) {
+            requestType = XP_REQUEST_TYPE.PAGE;
+        }
+
+        // //////////////////////////////////////////////////  Content type established. Proceed to data call:
+
+        const allDescriptors: ComponentDescriptor[] = [];
+
+        // Add the content type query at all cases
+        const contentTypeDef = ComponentRegistry.getContentType(type);
+        const pageCmp = (components || []).find(cmp => cmp.type === XP_COMPONENT_TYPE.PAGE);
+        if (pageCmp) {
+            processComponentConfig(APP_NAME, APP_NAME_DASHED, pageCmp);
+        }
+
+        const contentQueryAndVars = getQueryAndVariables(type, contentPath, context, contentTypeDef?.query, pageCmp?.page?.config);
+        if (contentQueryAndVars) {
+            allDescriptors.push({
+                type: contentTypeDef,
+                queryAndVariables: contentQueryAndVars,
+            });
+        }
+
+        const commonQueryAndVars = getQueryAndVariables(type, contentPath, context, ComponentRegistry.getCommonQuery(),
+            pageCmp?.page?.config);
+        if (commonQueryAndVars) {
+            allDescriptors.push({
+                type: contentTypeDef,
+                queryAndVariables: commonQueryAndVars,
+            });
+        }
+
+        if (components?.length && ComponentRegistry) {
+            for (const cmp of (components || [])) {
+                processComponentConfig(APP_NAME, APP_NAME_DASHED, cmp);
+            }
+            // Collect component queries if defined
+            const componentDescriptors = collectComponentDescriptors({
+                components,
+                xpContentPath: contentPath,
+                context,
+            });
+            if (componentDescriptors.length) {
+                allDescriptors.push(...componentDescriptors);
+            }
+        }
+
+        const {query, variables} = combineMultipleQueries(allDescriptors);
+        if (!query.trim()) {
+            return errorResponse('400', `Missing or empty query override for content type ${type}`);
+        }
+
+        // ///////////////    SECOND GUILLOTINE CALL FOR DATA   //////////////////////
+        const contentResults = await fetchContentData(contentApiUrl, contentPath, projectConfig, query, variables, outHeaders);
+        // ///////////////////////////////////////////////////////////////////////////
+
+        if (contentResults.error) {
+            console.error(contentResults.error);
+            return errorResponse(contentResults.error.code, contentResults.error.message);
+        }
+
+        // Apply processors to every component
+        const datas = await applyProcessors(allDescriptors, contentResults, context);
+
+        //  Unwind the data back to components
+
+        let contentData = null, common = null;
+        let startFrom = 0;
+        if (contentQueryAndVars) {
+            const item = datas[startFrom];
+            contentData = item.status === 'fulfilled' ? item.value : item.reason;
+            startFrom++;
+        }
+        if (commonQueryAndVars) {
+            const item = datas[startFrom];
+            common = item.status === 'fulfilled' ? item.value : item.reason;
+            startFrom++;
+        }
+
+        for (let i = startFrom; i < datas.length; i++) {
+            // component descriptors hold references to components
+            // that will later be used for creating page regions
+            const datum = datas[i];
+            if (datum.status === 'rejected') {
+                let reason = datum.reason;
+                if (reason instanceof Error) {
+                    reason = reason.message;
+                } else if (typeof reason !== 'string') {
+                    reason = String(reason);
+                }
+                allDescriptors[i].component.error = reason;
+            } else {
+                allDescriptors[i].component.data = datum.value;
+            }
+        }
+
+        const page = buildPage(type, components);
+        const meta = createMetaData({
+            apiUrl: contentApiUrl,
+            baseUrl: xpBaseUrl,
+            components,
+            contentPath: siteRelativeContentPath,
+            contentType: type,
+            defaultLocale,
+            locale,
+            pageCmp: page,
+            renderMode,
+            requestedComponentPath: componentPath,
+            requestType,
+        });
+
+        return {
+            data: contentData,
+            common,
+            meta,
+            page,
+        };
+    } catch (e: any) {
+        console.error(e);
+
+        let error;
+        try {
+            error = JSON.parse(e.message);
+        } catch (e2) {
+            error = {
+                code: 'Local',
+                message: e.message,
+            };
+        }
+        return errorResponse(error.code, error.message);
+    }
+}

package/src/guillotine/fetchContentData.ts

@@ -0,0 +1,33 @@
+import type {
+    ContentApiBaseBody,
+    ContentResult,
+    ProjectLocaleConfig,
+} from '../types';
+
+
+import {fetchGuillotine} from './fetchGuillotine';
+
+
+export const fetchContentData = async <Content = Record<string, unknown>>(
+    contentApiUrl: string,
+    xpContentPath: string,
+    projectConfig: ProjectLocaleConfig,
+    query: string,
+    variables?: {},
+    headers?: {},
+): Promise<ContentResult> => {
+    const body: ContentApiBaseBody = {query};
+    if (variables && Object.keys(variables).length > 0) {
+        body.variables = variables;
+    }
+    const contentResults = await fetchGuillotine<ContentResult<Content>>(contentApiUrl, body, projectConfig, headers);
+
+    if (contentResults.error) {
+        return contentResults;
+    } else {
+        return {
+            // omit the aliases and return values
+            contents: Object.values(contentResults),
+        };
+    }
+};

package/src/guillotine/fetchContentPathsForAllLocales.ts

@@ -0,0 +1,21 @@
+import type {ContentPathItem} from '../types';
+
+import {GET_STATIC_PATHS_QUERY} from '../common/constants';
+import {getProjectLocaleConfigs} from '../utils/getProjectLocaleConfigs';
+import {fetchContentPathsForLocale} from './fetchContentPathsForLocale';
+
+
+export async function fetchContentPathsForAllLocales(
+    path: string,
+    query: string = GET_STATIC_PATHS_QUERY,
+    countPerLocale = 999,
+): Promise<ContentPathItem[]> {
+    const promises = Object.values(getProjectLocaleConfigs()).map(
+        config => fetchContentPathsForLocale(
+            path, config, query, countPerLocale,
+        ),
+    );
+    return Promise.all(promises).then(results => {
+        return results.reduce((all, localePaths) => all.concat(localePaths), []);
+    });
+}

package/src/guillotine/fetchContentPathsForLocale.ts

@@ -0,0 +1,42 @@
+import type {ContentApiBaseBody, ContentPathItem, GuillotineResult, ProjectLocaleConfig} from '../types';
+
+
+import {GET_STATIC_PATHS_QUERY} from '../common/constants';
+import {getContentApiUrl} from '../utils/getContentApiUrl';
+import {fetchGuillotine} from './fetchGuillotine';
+
+
+export async function fetchContentPathsForLocale(
+    path: string,
+    config: ProjectLocaleConfig,
+    query: string = GET_STATIC_PATHS_QUERY,
+    count = 999,
+): Promise<ContentPathItem[]> {
+    const contentApiUrl = getContentApiUrl({
+        contentPath: path,
+        locale: config.locale,
+    });
+    const body: ContentApiBaseBody = {
+        query,
+        variables: {
+            path,
+            count,
+        },
+    };
+    return fetchGuillotine<ContentPathItem[]>(contentApiUrl, body, config).then((
+        results: GuillotineResult,
+    ) => {
+        return results.guillotine.queryDsl.reduce((
+            prev: ContentPathItem[],
+            child: any,
+        ) => {
+            const regexp = new RegExp(`^/${child.site?._name ? `${child.site._name}/?` : ''}`);
+            const contentPath = child._path.replace(regexp, '');
+            prev.push({
+                contentPath: contentPath.split('/'),
+                locale: config.locale,
+            });
+            return prev;
+        }, []);
+    });
+}

package/src/guillotine/fetchFromApi.ts

@@ -0,0 +1,69 @@
+import type {ContentApiBaseBody, GuillotineResponse, GuillotineResponseJson, ProjectLocaleConfig} from '../types';
+
+
+/** Generic fetch */
+export async function fetchFromApi<Data = Record<string, unknown>>(
+    apiUrl: string,
+    body: ContentApiBaseBody,
+    projectConfig: ProjectLocaleConfig,
+    headers?: {},
+    method = 'POST',
+) {
+    const options = {
+        method,
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json',
+            'X-Guillotine-SiteKey': projectConfig.site,
+        },
+        body: JSON.stringify(body),
+    };
+
+    if (headers) {
+        Object.assign(options.headers, headers);
+    }
+
+    let res: GuillotineResponse<Data>;
+    try {
+        res = await fetch(apiUrl, options);
+    } catch (e: any) {
+        console.warn(apiUrl, e);
+        throw new Error(JSON.stringify({
+            code: 'API',
+            message: e.message,
+        }));
+    }
+
+    if (!res.ok) {
+        throw new Error(JSON.stringify({
+            code: res.status,
+            message: `Data fetching failed (message: '${await res.text()}')`,
+        }));
+    }
+
+    let json: GuillotineResponseJson<Data>;
+    try {
+        json = await res.json();
+    } catch (e) {
+        throw new Error(JSON.stringify({
+            code: 500,
+            message: `API call completed but with non-JSON data: ${JSON.stringify(await res.text())}`,
+        }));
+    }
+
+    if (!json) {
+        throw new Error(JSON.stringify({
+            code: 500,
+            message: `API call completed but with unexpectedly empty data: ${JSON.stringify(await res.text())}`,
+        }));
+    }
+
+    if (Array.isArray(json)) {
+        throw new Error(JSON.stringify({
+            code: 500,
+            message: `API call completed but with unexpected array data: ${JSON.stringify(json)}`,
+        }));
+    }
+
+    return json;
+}