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

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;
+}

package/src/guillotine/fetchGuillotine.ts

@@ -0,0 +1,61 @@
+import type {ContentApiBaseBody, GuillotineResult, ProjectLocaleConfig} from '../types';
+
+
+import {fetchFromApi} from './fetchFromApi';
+
+
+/** Guillotine-specialized fetch, using the generic fetch above */
+export async function fetchGuillotine<Data = Record<string, unknown>>(
+    contentApiUrl: string,
+    body: ContentApiBaseBody,
+    projectConfig: ProjectLocaleConfig,
+    headers?: {},
+): Promise<GuillotineResult> {
+    if (typeof body.query !== 'string' || !body.query.trim()) {
+        return {
+            error: {
+                code: '400',
+                message: `Invalid or missing query. JSON.stringify(query) = ${JSON.stringify(body.query)}`,
+            },
+        };
+    }
+    const path = body.variables?.path;
+    const pathMessage = path ? JSON.stringify(path) : '';
+    return await fetchFromApi<Data>(
+        contentApiUrl,
+        body,
+        projectConfig,
+        headers,
+    )
+        .then(json => {
+            let errors: any[] = json.errors; // fetchFromApi ensures json is an object
+
+            if (errors) {
+                if (!Array.isArray(errors)) {
+                    errors = [errors];
+                }
+                console.error(`${errors.length} error(s) when fetching data from: ${contentApiUrl}`);
+                console.error(`headers: ${JSON.stringify(headers, null, 2)} \nvariables: ${JSON.stringify(body.variables, null, 2)}`);
+                errors.forEach(error => {
+                    console.error(error);
+                });
+
+                return {
+                    error: {
+                        code: '500',
+                        message: `Server responded with ${errors.length} error(s), probably from guillotine - see log.`,
+                    },
+                };
+            }
+
+            return json.data;
+        })
+        .catch((err) => {
+            console.warn(`Client-side error when trying to fetch data ${pathMessage}`, err);
+            try {
+                return {error: JSON.parse(err.message)};
+            } catch (e2) {
+                return {error: {code: 'Client-side error', message: err.message}};
+            }
+        });
+}

package/src/guillotine/fetchMetaData.ts

@@ -0,0 +1,32 @@
+import type {
+    ContentApiBaseBody,
+    MetaResult,
+    ProjectLocaleConfig,
+} from '../types';
+
+
+import {getMetaQuery, pageFragmentQuery} from './getMetaData';
+import {fetchGuillotine} from './fetchGuillotine';
+
+
+export const fetchMetaData = async (
+    contentApiUrl: string,
+    xpContentPath: string,
+    projectConfig: ProjectLocaleConfig,
+    headers?: {},
+): Promise<MetaResult> => {
+    const body: ContentApiBaseBody = {
+        query: getMetaQuery(pageFragmentQuery()),
+        variables: {
+            path: xpContentPath,
+        },
+    };
+    const metaResult = await fetchGuillotine<MetaResult>(contentApiUrl, body, projectConfig, headers);
+    if (metaResult.error) {
+        return metaResult;
+    } else {
+        return {
+            meta: metaResult?.guillotine?.get,
+        };
+    }
+};

package/src/guillotine/getCleanContentPathArrayOrThrow400.ts

@@ -0,0 +1,22 @@
+/** Checks a site-relative contentPath as a slash-delimited string or a string array, and returns a pure site-relative path string (no double slashes, starts with a slash, does not end with one). */
+export const getCleanContentPathArrayOrThrow400 = (contentPath: string | string[] | undefined): string => {
+    if (contentPath === undefined) {
+        return '';
+    }
+    const isArray = Array.isArray(contentPath);
+
+    if (!isArray) {
+        if (typeof contentPath !== 'string') {
+            throw Error(JSON.stringify({
+                code: 400,
+                message: `Unexpected target content _path: contentPath must be a string or pure string array (contentPath=${JSON.stringify(
+                    contentPath)})`,
+            }));
+        }
+
+        return contentPath;
+
+    } else {
+        return (contentPath).join('/');
+    }
+};

package/src/guillotine/getComponentConfig.ts

@@ -0,0 +1,7 @@
+import type {PageComponent} from '../types';
+
+
+export function getComponentConfig(cmp?: PageComponent) {
+    const cmpData = cmp && cmp[cmp.type];
+    return cmpData && 'config' in cmpData ? cmpData.config : undefined;
+}

package/src/guillotine/getContentAndComponentPaths.ts

@@ -0,0 +1,11 @@
+const COMPONENT_PATH_KEY = /\/?_\/component/;   // first slash is optional for root components
+
+export const getContentAndComponentPaths = (requestPath: string): string[] => {
+    let contentPath, componentPath;
+    if (COMPONENT_PATH_KEY.test(requestPath)) {
+        [contentPath, componentPath] = requestPath.split(COMPONENT_PATH_KEY);
+    } else {
+        contentPath = requestPath;
+    }
+    return [contentPath, componentPath];
+};

package/src/guillotine/getMetaData.ts

@@ -0,0 +1,73 @@
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import {configQuery} from './metadata/configQuery';
+import {richTextQuery} from './metadata/richTextQuery';
+import {indent} from '../utils/indent';
+
+
+const partConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getParts());
+};
+
+const layoutConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getLayouts());
+};
+
+const pageConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getPages());
+};
+
+
+/*
+    IMPORTANT: make sure to transform your queries into functions too when using this function inside them !!!
+ */
+const componentsQuery = () => `type
+path
+page {
+    descriptor
+${indent(pageConfigQuery(), 4)}
+    template {
+      _path
+    }
+}
+layout {
+    descriptor
+${indent(layoutConfigQuery(), 4)}
+}
+text {
+${indent(richTextQuery('value'), 4)}
+}
+part {
+    descriptor
+${indent(partConfigQuery(), 4)}
+}
+image {
+    caption
+    image {
+      imageUrl (type:absolute, scale: "width-768")
+    }
+}`;
+
+// THIS QUERY DOES NOT SUPPORT NESTED FRAGMENTS
+export const pageFragmentQuery = () => `components(resolveFragment: false, resolveTemplate: true) {
+    fragment {
+        id
+        fragment {
+            components {
+${indent(componentsQuery(),16)}
+            }
+        }
+    }
+${indent(componentsQuery(),4)}
+}`;
+
+export function getMetaQuery(pageFragment?: string): string {
+    return `query($path:ID!) {
+    guillotine {
+        get(key:$path) {
+            _path
+            type
+${indent(pageFragment || '', 12)}
+        }
+    }
+}`;
+}

package/src/guillotine/getParentRegion.ts

@@ -0,0 +1,59 @@
+import type {
+    PageComponent,
+    PageRegion,
+    PathFragment,
+    RegionTree,
+} from '../types';
+
+
+import {XP_COMPONENT_TYPE} from '../common/constants';
+import {prefixLayoutPath} from './prefixLayoutPath';
+
+
+export function getParentRegion(
+    source: RegionTree,
+    contentType: string,
+    cmpPath: PathFragment[],
+    components: PageComponent[] = [],
+    createMissing ? : boolean,
+): PageRegion | undefined {
+    let currentTree: RegionTree = source;
+    let currentRegion: PageRegion | undefined;
+    let parentPath = '';
+
+    for (let i = 0; i < cmpPath.length; i++) {
+        const pathFragment = cmpPath[i];
+        const regionName = pathFragment.region;
+        parentPath += `/${pathFragment.region}/${pathFragment.index}`;
+        currentRegion = currentTree[regionName];
+
+        if (!currentRegion) {
+            if (createMissing) {
+                currentRegion = {
+                    name: regionName,
+                    components: [],
+                };
+                currentTree[regionName] = currentRegion;
+            } else {
+                throw `Region [${regionName}] was not found`;
+            }
+        }
+
+        if (i < cmpPath.length - 1) {
+            // look for layouts inside if this is not the last path fragment
+
+            const layout = components.find((cmp: PageComponent) => {
+                return cmp.type === XP_COMPONENT_TYPE.LAYOUT && prefixLayoutPath(contentType, cmp.path) === parentPath;
+            });
+            if (!layout) {
+                throw `Layout [${parentPath}] not found among components, but needed for component [${JSON.stringify(cmpPath, null, 2)}]`;
+            }
+            if (!layout.regions) {
+                layout.regions = {};
+            }
+            currentTree = layout.regions;
+        }
+    } // for
+
+    return currentRegion;
+}