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

package/src/common/UrlProcessor.ts

@@ -0,0 +1,142 @@
+import type {ImageData, LinkData, MetaData} from '../types';
+
+
+import {RENDER_MODE} from './constants';
+import {fixDoubleSlashes} from '../utils/fixDoubleSlashes';
+import {getProjectLocaleConfigById} from '../utils/getProjectLocaleConfigById';
+import {commonChars} from '../utils/commonChars';
+import {addBasePath} from 'next/dist/client/add-base-path';
+
+
+export class UrlProcessor {
+
+    public static IMG_TAG = 'img';
+    public static LINK_TAG = 'a';
+    public static MACRO_TAG = 'editor-macro';
+
+    public static IMG_ATTR = 'data-image-ref';
+    public static LINK_ATTR = 'data-link-ref';
+    public static MACRO_ATTR = 'data-macro-ref';
+
+    private static IMG_ATMT_REGEXP = /_\/image\/|_\/attachment\//;
+    private static endSlashPattern = /\/+$/;
+    private static startSlashPattern = /^\/+/;
+    private static localhostPattern = /localhost/;
+
+    private static siteKey: string;
+
+    public static process(url: string, meta: MetaData, serverSide = false, isResource = false): string {
+        if (this.startsWithHash(url) || !meta || (this.isAttachmentUrl(url)) && meta.renderMode === RENDER_MODE.NEXT) {
+            // do not process if:
+            // - url starts with #
+            // - meta is absent
+            // - attachment urls in NEXT mode
+            return url;
+        }
+
+        let normalUrl: string;
+        if (this.isRelative(url)) {
+            normalUrl = url;
+        } else {
+            // url is absolute, try to make it relative by striping apiUrl
+            // NB: will fail if content api is not on the same domain as enonic xp
+            const apiUrl = this.getApiUrl(meta);
+            normalUrl = this.stripApiUrl(url, apiUrl);
+        }
+        
+        const baseUrl = meta?.baseUrl && meta?.baseUrl !== '/' ? meta.baseUrl : '';
+        
+        let result: string;
+        if (meta.renderMode === RENDER_MODE.NEXT) {
+            // only add basePath and locale in next mode
+            result = `/${normalUrl}`;
+            if (!isResource && meta.locale !== meta.defaultLocale) {
+                // append locale if it's not the default one
+                // to avoid additional middleware redirection
+                // NB: don't add locale to resource urls
+                result = `/${meta.locale}${result}`;
+            }
+            if (!serverSide) {
+                // no need for baseurl and basepath on server
+                result = addBasePath(`${baseUrl}${result}`);
+            }
+        } else {
+            result = `${baseUrl}/${normalUrl}`;
+        }
+
+        return fixDoubleSlashes(result);
+    }
+
+    public static setSiteKey(key: string): void {
+        this.siteKey = key;
+    }
+
+    public static isMediaLink(ref: string, linkData: LinkData[]): boolean {
+        // Assuming linkData can't contain more than one entry with the same ref
+        return Array.isArray(linkData) && !!linkData.find(data => data?.ref === ref)?.media;
+    }
+
+    public static isContentImage(ref: string, imageData: ImageData[]): boolean {
+        // Assuming imageData can't contain more than one entry with the same ref
+        return Array.isArray(imageData) && !!imageData.find(data => data.ref === ref)?.image;
+    }
+
+    public static processSrcSet(srcset: string, meta: MetaData): string {
+        return srcset.split(/, */g).map(src => {
+            const srcParts = src.trim().split(' ');
+            switch (srcParts.length) {
+                case 1: // src only
+                    return this.process(src, meta);
+                case 2: // width descriptor
+                    return `${this.process(srcParts[0], meta)} ${srcParts[1]}`;
+                case 3: // pixel density descriptor
+                    return `${this.process(srcParts[0], meta)} ${srcParts[1]} ${srcParts[2]}`;
+                default:
+                    console.warn('Can not process image srcset: ' + src);
+                    return src;
+            }
+        }).join(', ');
+    }
+
+    private static stripApiUrl(url: string, apiUrl: string): string {
+        // normalise localhost-127.0.0.1 if present in urls
+        const normalUrl = url.replace(this.localhostPattern, '127.0.0.1');
+        const normalApiUrl = apiUrl.replace(this.localhostPattern, '127.0.0.1');
+        const common = commonChars(normalUrl, normalApiUrl);
+        const remaining = common.length > 0 ? normalUrl.substring(common.length) : normalUrl;
+        return (remaining.length > 0 && remaining.charAt(0) === '/') ? remaining.substring(1) : remaining;
+    }
+
+    private static isAttachmentUrl(url: string): boolean {
+        return this.IMG_ATMT_REGEXP.test(url);
+    }
+
+    private static startsWithHash(url: string): boolean {
+        return url?.charAt(0) == '#';
+    }
+
+    private static isRelative(url: string): boolean {
+        return !/^(?:ht|f)tps?:\/\/[^ :\r\n\t]+/.test(url);
+    }
+
+    private static getApiUrl(meta: MetaData) {
+        let combinedUrl = meta.apiUrl?.replace(this.endSlashPattern, '') || '';
+        if (this.siteKey?.length) {
+            combinedUrl += '/' + this.siteKey.replace(this.startSlashPattern, '');
+        }
+        return combinedUrl;
+    }
+}
+
+// Actual site is going to be set in fetchContent method, but set a default fallback here too
+const defaultConfig = getProjectLocaleConfigById();
+UrlProcessor.setSiteKey(defaultConfig.site);
+
+export function getUrl(url: string, meta: MetaData): string {
+    return UrlProcessor.process(url, meta, false, false);
+}
+
+export function getAsset(url: string, meta: MetaData): string {
+    return UrlProcessor.process(url, meta, false, true);
+}
+

package/src/common/constants.ts

@@ -0,0 +1,85 @@
+export const CATCH_ALL = '*';
+
+export enum ENV_VARS {
+    PROJECTS = 'ENONIC_PROJECTS',
+    API_URL = 'ENONIC_API',
+    APP_NAME = 'ENONIC_APP_NAME',
+}
+
+export const FRAGMENT_CONTENTTYPE_NAME = 'portal:fragment';
+export const FRAGMENT_DEFAULT_REGION_NAME = 'fragment';
+
+/** excluded contents:
+ * - folder
+ * - shortcuts (redirect can't be used in prerender)
+ * - media
+ * - paths with '/_' in them
+ */
+export const GET_STATIC_PATHS_QUERY = `query ($count: Int) {
+    guillotine {
+        queryDsl(
+            first: $count,
+            sort: {
+                field: "modifiedTime",
+                direction: DESC
+            }
+            query: {boolean: {mustNot: [
+                {in: {field: "type", stringValues: ["base:folder", "base:shortcut"]}}
+                {like: {field: "type", value: "media:*"}}
+                {like: {field: "_path", value: "*/_*"}}
+            ]}}
+        ) {
+            _name
+            _path
+            site {_name}
+        }
+    }
+}`;
+
+// Seems like NodeJS.fetch lowercases all headers, so we need to lowercase the
+// header names here.
+export enum GUILLOTINE_REQUEST_HEADERS {
+    COOKIE = 'Cookie',
+    LOCALE = 'locale',
+    LOCALES = 'locales',
+    DEFAULT_LOCALE = 'default-locale',
+}
+
+export const JSESSIONID_HEADER = 'jsessionid';
+
+export const PAGE_TEMPLATE_CONTENTTYPE_NAME = 'portal:page-template';
+export const PAGE_TEMPLATE_FOLDER = 'portal:template-folder';
+export const PORTAL_COMPONENT_ATTRIBUTE = 'data-portal-component-type';
+export const PORTAL_REGION_ATTRIBUTE = 'data-portal-region';
+export const PROJECT_ID_HEADER = 'content-studio-project';
+
+export enum RENDER_MODE {
+    INLINE = 'inline',
+    EDIT = 'edit',
+    PREVIEW = 'preview',
+    LIVE = 'live',
+    ADMIN = 'admin',
+    NEXT = 'next'       // Fallback: not using XP proxy but rendering directly with next.js
+}
+
+export const RENDER_MODE_HEADER = 'content-studio-mode';
+
+export const SITE_CONTENTTYPE_NAME = 'portal:site';
+
+// URI parameter marking that a request is for a preview for CS. MUST MATCH THE VALUE OF 'FROM_XP_PARAM' on XP side.
+export const XP_BASE_URL_HEADER = 'xpbaseurl';
+
+// TODO: Use these instead of hardcoded strings everywhere
+export enum XP_COMPONENT_TYPE {
+    PART = 'part',
+    LAYOUT = 'layout',
+    TEXT = 'text',
+    FRAGMENT = 'fragment',
+    PAGE = 'page',
+}
+
+export enum XP_REQUEST_TYPE {
+    COMPONENT = 'component',
+    TYPE = 'type',
+    PAGE = 'page',
+}

package/src/common/env.ts

@@ -0,0 +1,39 @@
+import {ENV_VARS} from './constants';
+
+const isServer = typeof window === 'undefined';
+
+// IMPORTANT:
+// NEXT_PUBLIC_ vars should be explicitly referenced to be made available on the client side (substituted with constants) !!!
+/** URL to the guillotine API */
+export const API_URL = isServer ? process.env[ENV_VARS.API_URL] : process.env['NEXT_PUBLIC_ENONIC_API'];
+
+/** Optional utility value - defining in one place the name of the target app (the app that defines the content types, the app name is therefore part of the content type strings used both in typeselector and in query introspections) */
+export const APP_NAME = isServer ? process.env[ENV_VARS.APP_NAME] : process.env['NEXT_PUBLIC_ENONIC_APP_NAME'];
+
+/** Optional utility value - derived from APP_NAME, only with underscores instead of dots */
+export const APP_NAME_UNDERSCORED = (APP_NAME || '').replace(/\./g, '_');
+
+/** Optional utility value - derived from APP_NAME, only with dashes instead of dots */
+export const APP_NAME_DASHED = (APP_NAME || '').replace(/\./g, '-');
+
+const mode = isServer ? process.env.MODE : process.env.NEXT_PUBLIC_MODE;
+
+export const IS_DEV_MODE = (mode === 'development');
+
+/** Locales and Enonic XP projects correspondence list */
+export const PROJECTS = isServer ? process.env[ENV_VARS.PROJECTS] : process.env['NEXT_PUBLIC_ENONIC_PROJECTS'];
+
+const requiredConstants = {
+    [ENV_VARS.APP_NAME]: APP_NAME,
+    [ENV_VARS.API_URL]: API_URL,
+    [ENV_VARS.PROJECTS]: PROJECTS,
+};
+
+// Verify required values on server-side only
+Object.keys(requiredConstants).forEach((key: string) => {
+    const val = requiredConstants[key];
+    if (!val) {
+        throw new Error(`Environment variable '${isServer ? '' : 'NEXT_PUBLIC_'}${key}' is missing (from .env?)`);
+    }
+});
+

package/src/guillotine/applyProcessors.ts

@@ -0,0 +1,38 @@
+import type {
+    ComponentDescriptor,
+    ContentResult,
+    Context,
+} from '../types';
+
+
+import {getComponentConfig} from './getComponentConfig';
+
+
+const NO_PROPS_PROCESSOR = async (props: any) => await props ?? {};
+
+
+export async function applyProcessors(
+    componentDescriptors: ComponentDescriptor[],
+    contentResults: ContentResult,
+    context: Context,
+): Promise < PromiseSettledResult < any > [] > {
+
+    let dataCounter = 0;
+    const processorPromises = componentDescriptors.map(async (desc: ComponentDescriptor) => {
+        // we're iterating component descriptors here
+        // some of them might not have provided graphql requests
+        // but we still need to run props processor for them
+        // in case they want to fetch their data from elsewhere
+        const propsProcessor = desc.type?.processor || NO_PROPS_PROCESSOR;
+        let data;
+        if (desc.queryAndVariables) {
+            // if there is a query then there must be a result for it
+            data = contentResults.contents[dataCounter++];
+        }
+
+        const config = getComponentConfig(desc.component);
+        return await propsProcessor(data, context, config);
+    });
+
+    return Promise.allSettled(processorPromises);
+}

package/src/guillotine/buildComponentTree.ts

@@ -0,0 +1,63 @@
+import type {
+    PageComponent,
+    RegionTree,
+} from '../types';
+
+
+import {
+    FRAGMENT_CONTENTTYPE_NAME,
+    XP_COMPONENT_TYPE,
+} from '../common/constants';
+import {parseComponentPath} from './parseComponentPath';
+import {getParentRegion} from './getParentRegion';
+
+
+export function buildComponentTree(
+    comps: PageComponent[],
+    rootComp: PageComponent,
+    contentType?: string,
+): PageComponent {
+    const rootTree: RegionTree = {};
+    const isFragmentType = contentType === FRAGMENT_CONTENTTYPE_NAME;
+
+    if (isFragmentType) {
+        rootComp.regions = rootTree;
+    }
+
+    (comps || []).forEach(cmp => {
+        const cmpPath = parseComponentPath(contentType, cmp.path);
+
+        if (cmp.path === '/') {
+            if (cmp.type === XP_COMPONENT_TYPE.PAGE && rootComp.type === XP_COMPONENT_TYPE.PAGE) {
+                // add page values to page object
+                rootComp = Object.assign(rootComp, cmp);
+                rootComp.page.regions = rootTree;
+                return;
+            } else if (cmp.type === XP_COMPONENT_TYPE.LAYOUT && rootComp.type === XP_COMPONENT_TYPE.FRAGMENT) {
+                // when rendering fragment as part of the page with layout at root path
+                // remove other children from list as they will be included in layout
+                rootComp.fragment.fragment.components = [cmp];
+                cmp.regions = rootTree;
+            }
+        }
+
+        if (cmp.type === XP_COMPONENT_TYPE.FRAGMENT) {
+            // build component subtree for fragment
+            cmp = buildComponentTree(cmp.fragment?.fragment?.components, cmp, contentType);
+        }
+
+        const region = getParentRegion(rootTree, contentType, cmpPath, comps, true);
+
+        if (region) {
+            // getting the index of component from string like '/main/0/left/11'
+            const cmpIndex = cmpPath[cmpPath.length - 1]?.index;
+            if (cmpIndex >= 0) {
+                region.components.splice(cmpIndex, 0, cmp);
+            } else {
+                throw Error(`Could not find [${cmp.type}] component index at ${JSON.stringify(cmpPath, null, 2)}, rendering not possible.`);
+            }
+        }
+    });
+
+    return rootComp;
+}

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