@enonic/nextjs-adapter 3.2.2 → 3.3.0-B2

package/src/common/ComponentRegistry.ts

@@ -1,162 +0,0 @@
-import type {
-    ComponentDefinition,
-    ComponentDefinitionParams,
-    ComponentDictionary,
-    PageComponent,
-    SelectedQueryMaybeVariablesFunc,
-    SelectorName,
-} from '../types';
-
-
-import {
-    CATCH_ALL,
-    XP_COMPONENT_TYPE,
-} from './constants';
-
-
-function toSelectorName(type: XP_COMPONENT_TYPE): SelectorName | undefined {
-    switch (type) {
-    case XP_COMPONENT_TYPE.PAGE:
-        return 'page';
-    case XP_COMPONENT_TYPE.LAYOUT:
-        return 'layout';
-    case XP_COMPONENT_TYPE.PART:
-        return 'part';
-    }
-}
-
-
-export class ComponentRegistry {
-
-    private static contentTypes: ComponentDictionary = {};
-    private static pages: ComponentDictionary = {};
-    private static components: ComponentDictionary = {};
-    private static parts: ComponentDictionary = {};
-    private static layouts: ComponentDictionary = {};
-    private static macros: ComponentDictionary = {};
-    private static commonQuery: SelectedQueryMaybeVariablesFunc;
-
-    public static addComponent(name: string, obj: ComponentDefinitionParams): void {
-        return ComponentRegistry.addType('component', name, obj);
-    }
-
-    public static addContentType(name: string, obj: ComponentDefinitionParams): void {
-        return ComponentRegistry.addType('contentType', name, obj);
-    }
-
-    public static addMacro(name: string, obj: ComponentDefinitionParams): void {
-        return ComponentRegistry.addType('macro', name, obj);
-    }
-
-    public static addLayout(name: string, obj: ComponentDefinitionParams): void {
-        return ComponentRegistry.addType('layout', name, obj);
-    }
-
-    public static addPage(name: string, obj: ComponentDefinitionParams): void {
-        return ComponentRegistry.addType('page', name, obj);
-    }
-
-    public static addPart(name: string, obj: ComponentDefinitionParams): void {
-        return ComponentRegistry.addType('part', name, obj);
-    }
-
-    private static addType(selectorName: SelectorName, name: string, obj: ComponentDefinitionParams): void {
-        const selector = ComponentRegistry.getSelector(selectorName);
-        const curr = selector[name];
-        selector[name] = curr ? Object.assign(curr, obj) : obj;
-    }
-
-    private static getSelector(name: SelectorName): ComponentDictionary {
-        switch (name) {
-        case 'contentType':
-            return this.contentTypes;
-        case 'page':
-            return this.pages;
-        case 'component':
-            return this.components;
-        case 'layout':
-            return this.layouts;
-        case 'part':
-            return this.parts;
-        case 'macro':
-            return this.macros;
-        }
-    }
-
-    private static getType(selectorName: SelectorName, typeName: string, useCatchAll = true): ComponentDefinition | undefined {
-        const selector = ComponentRegistry.getSelector(selectorName);
-        let type: ComponentDefinition|undefined = selector[typeName];
-        if (type) {
-            type.catchAll = typeName === CATCH_ALL;
-        } else if (!type && useCatchAll) {
-            type = selector[CATCH_ALL];
-            if (type) {
-                type.catchAll = true;
-            }
-        }
-        return type;
-    }
-
-    public static getByComponent(component: PageComponent): ComponentDefinition | undefined {
-        const selName = toSelectorName(component.type);
-        const cmpData = component[component.type];
-        const desc = cmpData && 'descriptor' in cmpData ? cmpData.descriptor : component.path;
-        return selName && desc ? this.getType(selName, desc) : undefined;
-    }
-
-    public static setCommonQuery(query: SelectedQueryMaybeVariablesFunc): void {
-        this.commonQuery = query;
-    }
-
-    public static getCommonQuery(): SelectedQueryMaybeVariablesFunc {
-        return this.commonQuery;
-    }
-
-    public static getMacro(name: string): ComponentDefinition | undefined {
-        return ComponentRegistry.getType('macro', name);
-    }
-
-    public static getMacros(): [string, ComponentDefinition][] {
-        return Object.entries(this.macros);
-    }
-
-    public static getParts(): [string, ComponentDefinition][] {
-        return Object.entries(this.parts);
-    }
-
-    public static getLayouts(): [string, ComponentDefinition][] {
-        return Object.entries(this.layouts);
-    }
-
-    public static getPages(): [string, ComponentDefinition][] {
-        return Object.entries(this.pages);
-    }
-
-    public static getContentTypes(): [string, ComponentDefinition][] {
-        return Object.entries(this.contentTypes);
-    }
-
-    public static getComponents(): [string, ComponentDefinition][] {
-        return Object.entries(this.components);
-    }
-
-    public static getContentType(name: string): ComponentDefinition | undefined {
-        return ComponentRegistry.getType('contentType', name);
-    }
-
-    public static getPage(name: string): ComponentDefinition | undefined {
-        return ComponentRegistry.getType('page', name);
-    }
-
-    public static getPart(name: string): ComponentDefinition | undefined {
-        return ComponentRegistry.getType('part', name);
-    }
-
-    public static getLayout(name: string): ComponentDefinition | undefined {
-        return ComponentRegistry.getType('layout', name);
-    }
-
-    public static getComponent(name: string): ComponentDefinition | undefined {
-        return ComponentRegistry.getType('component', name);
-    }
-}

package/src/common/UrlProcessor.ts

@@ -1,172 +0,0 @@
-import type {ImageData, LinkData, MetaData} from '../types';
-
-
-import {RENDER_MODE} from './constants';
-import {fixDoubleSlashes} from '../utils/fixDoubleSlashes';
-import {addBasePath} from 'next/dist/client/add-base-path';
-import {parseUrl} from 'next/dist/shared/lib/router/utils/parse-url';
-import {getLocaleMappingByLocale} from '../utils/getLocaleMappingByLocale';
-
-
-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/;
-
-    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)) {
-            const mapping = getLocaleMappingByLocale(meta.locale);
-            if (mapping.site?.length) {
-                // see if url starts with site name and remove it
-                const normalSite = mapping.site.replace(this.startSlashPattern, '').replace(this.endSlashPattern, '');
-                normalUrl = url.replace(new RegExp(`^/?${normalSite}(?=/|$)`), '');
-            } else {
-                normalUrl = url;
-            }
-        } else {
-            // url is absolute, try to make it relative by striping apiUrl
-            // NB: will fail to do so if content api is not on the same domain as enonic xp
-            const apiUrl = this.getApiUrl(meta);
-            normalUrl = this.stripApiUrl(url, apiUrl);
-
-            // if url is still absolute, return it as is
-            if (!this.isRelative(normalUrl)) {
-                return normalUrl;
-            }
-        }
-
-        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);
-    }
-
-    /*
-    * Deprecated
-    * */
-    public static setSiteKey(key: string): void {
-        // TODO: remove in next major release
-    }
-
-    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 = parseUrl(url.replace(this.localhostPattern, '127.0.0.1'));
-        const normalApiUrl = parseUrl(apiUrl.replace(this.localhostPattern, '127.0.0.1'));
-
-        // WARNING! disregarding the protocol (http/https)
-
-        if (normalUrl.hostname !== normalApiUrl.hostname
-            || normalUrl.port !== normalApiUrl.port) {
-            // can't strip apiUrl if hostnames or ports are different
-            return url;
-        }
-
-        const urlPathCrumbs = normalUrl.pathname.split('/');
-        const apiUrlPathCrumbs = normalApiUrl.pathname.split('/');
-        for (let i = 0; i < Math.min(apiUrlPathCrumbs.length, urlPathCrumbs.length);) {
-            const urlPathCrumb = urlPathCrumbs[i];
-            const apiUrlPathCrumb = apiUrlPathCrumbs[i];
-            if (urlPathCrumb === apiUrlPathCrumb) {
-                urlPathCrumbs.shift();
-                apiUrlPathCrumbs.shift();
-            } else {
-                i++;
-            }
-        }
-
-        return `/${urlPathCrumbs.join('/')}` + normalUrl.search + normalUrl.hash;
-    }
-
-    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, '') || '';
-        const mapping = getLocaleMappingByLocale(meta.locale);
-        if (mapping.site?.length) {
-            combinedUrl += '/' + mapping.site.replace(this.startSlashPattern, '');
-        }
-        return combinedUrl;
-    }
-}
-
-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

@@ -1,92 +0,0 @@
-export const CATCH_ALL = '*';
-
-export enum ENV_VARS {
-    MAPPINGS = 'ENONIC_MAPPINGS',
-    API_URL = 'ENONIC_API',
-    APP_NAME = 'ENONIC_APP_NAME',
-    LOG = 'ENONIC_LOGGING',
-}
-
-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 ($pathRegex: String!, $count: Int) {
-    guillotine {
-        queryDsl(
-            first: $count,
-            sort: {
-                field: "modifiedTime",
-                direction: DESC
-            }
-            query: {
-                boolean: {
-                    mustNot: [
-                        {in: {field: "type", stringValues: ["base:shortcut", "portal:fragment", "portal:template-folder", "portal:page-template"]}}
-                        {like: {field: "type", value: "media:*"}}
-                    ]
-                    must: [
-                        {like: {field:"_path", value: $pathRegex}}
-                    ]
-                }
-            }
-        ) {
-            _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

@@ -1,41 +0,0 @@
-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');
-
-export const LOGGING = isServer ? process.env[ENV_VARS.LOG] : process.env['NEXT_PUBLIC_ENONIC_LOGGING'];
-
-/** Locales and Enonic XP projects correspondence list */
-export const MAPPINGS = isServer ? process.env[ENV_VARS.MAPPINGS] : process.env['NEXT_PUBLIC_ENONIC_MAPPINGS'];
-
-const requiredConstants = {
-    [ENV_VARS.APP_NAME]: APP_NAME,
-    [ENV_VARS.API_URL]: API_URL,
-    [ENV_VARS.MAPPINGS]: MAPPINGS,
-};
-
-// 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

@@ -1,38 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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, contentId?: string): (code ?: string, message ?: string) => FetchContentResult {
-
-    return function (code = '500', message = 'Unknown error') {
-        return {
-            error: {
-                code,
-                message,
-            },
-            page: null,
-            common: null,
-            data: null,
-            meta: {
-                id: contentId || '',
-                type: '',
-                requestType: requestType,
-                renderMode: renderMode,
-                path: contentPath || '',
-                canRender: false,
-                catchAll: false,
-                apiUrl,
-                baseUrl,
-                locale,
-                defaultLocale,
-            },
-        };
-    };
-}

package/src/guillotine/buildPage.ts

@@ -1,15 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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;
-}