@enonic/nextjs-adapter 2.0.0 → 2.0.1

package/src/guillotine/getMetaData.ts

@@ -0,0 +1,246 @@
+import {RENDER_MODE, sanitizeGraphqlName, XP_COMPONENT_TYPE, XP_REQUEST_TYPE} from '../utils';
+import {ComponentDefinition, ComponentRegistry} from '../ComponentRegistry';
+
+const macroConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getMacros(), false, false);
+};
+
+const partConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getParts());
+};
+
+const layoutConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getLayouts());
+};
+
+const pageConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getPages());
+};
+
+const configQuery = (list: [string, ComponentDefinition][], includeAppName = true, canUseConfigAsJson = true): string => {
+    const hasQueryList = list?.filter(([key, def]) => def.configQuery) || [];
+    if (hasQueryList.length === 0) {
+        return canUseConfigAsJson ? 'configAsJson' : '';
+    }
+
+    const configsByApp: { [app: string]: string[] } = {};
+    hasQueryList
+        .forEach((entry) => {
+            const nameParts = entry[0].split(':');
+            if (nameParts.length === 2) {
+                const sanitizedAppName = sanitizeGraphqlName(nameParts[0]);
+                let existingConfigs = configsByApp[sanitizedAppName];
+                if (!existingConfigs) {
+                    existingConfigs = [];
+                    configsByApp[sanitizedAppName] = existingConfigs;
+                }
+                existingConfigs.push(`${sanitizeGraphqlName(nameParts[1])}${entry[1].configQuery}`);
+            }
+        });
+
+    // Still query for configAsJson if at least one item has no configQuery defined
+    const configAsJsonQuery = canUseConfigAsJson && hasQueryList.length < list.length ? 'configAsJson' : '';
+
+    if (!includeAppName) {
+        return `${configAsJsonQuery}
+                config {
+                    ${Object.values(configsByApp).reduce((arr, curr) => arr.concat(curr), []).join('\n')}
+                }`;
+    } else {
+        return `${configAsJsonQuery}
+                config {
+                    ${Object.entries(configsByApp).map(entry => entry[0] + '{\n' + entry[1].join('\n') + '\n}')}
+                }`;
+    }
+};
+
+/*
+    IMPORTANT: make sure to transform your queries into functions too when using this function inside them !!!
+ */
+export const richTextQuery = (fieldName: string) => {
+    return `${fieldName}(processHtml:{type:absolute, imageWidths:[400, 800, 1200], imageSizes:"(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"}) {
+                processedHtml
+                macros {
+                    ref
+                    name
+                    descriptor
+                    ${macroConfigQuery()}
+                }
+                links {
+                    ref
+                    media {
+                        content {
+                            _id
+                        }
+                    }
+                }
+                images {
+                    ref
+                    image {
+                        _id
+                    }
+                }
+            }`;
+};
+
+const componentsQuery = () => `
+        type
+        path
+        page {
+          descriptor
+          ${pageConfigQuery()}
+          template {
+            _path
+          }
+        }
+        layout {
+          descriptor
+          ${layoutConfigQuery()}
+        }
+        text {
+            ${richTextQuery('value')}
+        }
+        part {
+          descriptor
+          ${partConfigQuery()}
+        }
+        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 {
+              ${componentsQuery()}
+            }
+          }
+        }
+        ${componentsQuery()}
+      }`;
+
+export function getMetaQuery(pageFragment?: string): string {
+    return `query($path:ID!){
+              guillotine {
+                get(key:$path) {
+                  _path
+                  type
+                  ${pageFragment || ''}
+                }
+              }
+            }`;
+}
+
+export interface PageComponent {
+    [key: string]: any; // keeps ts happy when accessing component data field by XP_COMPONENT_TYPE type
+    type: XP_COMPONENT_TYPE;
+    path: string;
+    page?: PageData;
+    part?: PartData;
+    layout?: LayoutData;
+    fragment?: FragmentData;
+    text?: TextData;
+    image?: any;
+    regions?: RegionTree;
+    data?: any;
+    error?: any;
+}
+
+export interface TextData {
+    value: RichTextData;
+}
+
+export interface RichTextData {
+    processedHtml: string,
+    links: LinkData[],
+    macros: MacroData[],
+    images: ImageData[],
+}
+
+export interface LinkData {
+    ref: string,
+    media: {
+        content: {
+            id: string,
+        }
+    } | null,
+}
+
+export interface MacroData {
+    ref: string;
+    name: string;
+    descriptor: string;
+    config: {
+        [name: string]: MacroConfig;
+    };
+}
+
+export interface ImageData {
+    ref: string;
+    image: {
+        id: string,
+    } | null,
+}
+
+export interface MacroConfig {
+    [key: string]: any;
+}
+
+
+export interface RegionTree {
+    [key: string]: PageRegion;
+}
+
+export interface PageRegion {
+    name: string;
+    components: PageComponent[];
+}
+
+export interface PartData {
+    descriptor: string;
+    config: any;
+
+    [customKeysFromQuery: string]: any;
+}
+
+export interface LayoutData {
+    descriptor: string;
+    config?: any;
+
+    [customKeysFromQuery: string]: any;
+}
+
+export interface PageData {
+    descriptor: string;
+    config?: any;
+    template?: string | null;
+    regions?: RegionTree;
+}
+
+export interface FragmentData {
+    id: string;
+    fragment: {
+        components: PageComponent[];
+    }
+}
+
+export interface MetaData {
+    type: string,
+    path: string,
+    requestType: XP_REQUEST_TYPE,
+    renderMode: RENDER_MODE,
+    requestedComponent?: PageComponent,
+    canRender: boolean,
+    catchAll: boolean,
+    apiUrl: string,
+    baseUrl: string,
+    locale: string,
+    defaultLocale: string,
+}

package/{index.d.ts → src/index.ts}

@@ -2,4 +2,4 @@ export * from './utils';
 export * from './guillotine/fetchContent';
 export * from './guillotine/getMetaData';
 export * from './ComponentRegistry';
-export * from './UrlProcessor';
+export * from './UrlProcessor';

package/src/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "outDir": "../dist",
+    "declaration": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": []
+}

package/{utils.js → src/utils.ts}

@@ -1,39 +1,60 @@
+/** Import config values from .env, .env.development and .env.production */
+import {GetServerSidePropsContext} from 'next';
+import {ParsedUrlQuery} from 'node:querystring';
+import {IncomingHttpHeaders} from 'http';
+
 const mode = process.env.MODE || process.env.NEXT_PUBLIC_MODE;
 export const IS_DEV_MODE = (mode === 'development');
+
 export const PURGE_CACHE_URL = '/_/enonic/cache/purge';
-export var ENV_VARS;
-(function (ENV_VARS) {
-    ENV_VARS["PROJECTS"] = "ENONIC_PROJECTS";
-    ENV_VARS["API"] = "ENONIC_API";
-    ENV_VARS["API_TOKEN"] = "ENONIC_API_TOKEN";
-})(ENV_VARS || (ENV_VARS = {}));
+
+export enum ENV_VARS {
+    PROJECTS = 'ENONIC_PROJECTS',
+    API = 'ENONIC_API',
+    API_TOKEN = 'ENONIC_API_TOKEN',
+}
+
 /** URL to the guillotine API */
 const API_URL = (process.env.ENONIC_API || process.env.NEXT_PUBLIC_ENONIC_API);
+
 /** Locales and Enonic XP projects correspondence list */
 const PROJECTS = (process.env.ENONIC_PROJECTS || process.env.NEXT_PUBLIC_ENONIC_PROJECTS);
+
 /** 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 = (process.env.ENONIC_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 PROJECT_CONFIG_REGEXP = new RegExp('^(?:([\\w-]+):)?([^\\/\\s]+)(\\/[\\w-.]+)?$', 'i');
+
+
 // ////////////////////////////////////////////////////////////////////////  Hardcode-able constants
+
 // 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';
 export const RENDER_MODE_HEADER = 'content-studio-mode';
 export const PROJECT_ID_HEADER = 'content-studio-project';
 export const JSESSIONID_HEADER = 'jsessionid';
+
 export const PORTAL_COMPONENT_ATTRIBUTE = 'data-portal-component-type';
 export const PORTAL_REGION_ATTRIBUTE = 'data-portal-region';
+
 export const FRAGMENT_CONTENTTYPE_NAME = 'portal:fragment';
 export const FRAGMENT_DEFAULT_REGION_NAME = 'fragment';
+
 export const PAGE_TEMPLATE_CONTENTTYPE_NAME = 'portal:page-template';
 export const PAGE_TEMPLATE_FOLDER = 'portal:template-folder';
+
 export const SITE_CONTENTTYPE_NAME = 'portal:site';
+
 export const LOCALE_HEADER = 'locale';
 export const LOCALES_HEADER = 'locales';
 export const DEFAULT_LOCALE_HEADER = 'default-locale';
+
 /** excluded contents:
  * - folder
  * - shortcuts (redirect can't be used in prerender)
@@ -60,49 +81,93 @@ export const GET_STATIC_PATHS_QUERY = `query ($count: Int) {
     }
   }
 }`;
+
+
 // ------------------------------- Exports and auxillary functions derived from values above ------------------------------------
-export var XP_REQUEST_TYPE;
-(function (XP_REQUEST_TYPE) {
-    XP_REQUEST_TYPE["COMPONENT"] = "component";
-    XP_REQUEST_TYPE["TYPE"] = "type";
-    XP_REQUEST_TYPE["PAGE"] = "page";
-})(XP_REQUEST_TYPE || (XP_REQUEST_TYPE = {}));
-export var RENDER_MODE;
-(function (RENDER_MODE) {
-    RENDER_MODE["INLINE"] = "inline";
-    RENDER_MODE["EDIT"] = "edit";
-    RENDER_MODE["PREVIEW"] = "preview";
-    RENDER_MODE["LIVE"] = "live";
-    RENDER_MODE["ADMIN"] = "admin";
-    RENDER_MODE["NEXT"] = "next"; // Fallback: not using XP proxy but rendering directly with next.js
-})(RENDER_MODE || (RENDER_MODE = {}));
+
+export enum XP_REQUEST_TYPE {
+    COMPONENT = 'component',
+    TYPE = 'type',
+    PAGE = 'page',
+}
+
+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
+}
+
 // TODO: Use these instead of hardcoded strings everywhere
-export var XP_COMPONENT_TYPE;
-(function (XP_COMPONENT_TYPE) {
-    XP_COMPONENT_TYPE["PART"] = "part";
-    XP_COMPONENT_TYPE["LAYOUT"] = "layout";
-    XP_COMPONENT_TYPE["TEXT"] = "text";
-    XP_COMPONENT_TYPE["FRAGMENT"] = "fragment";
-    XP_COMPONENT_TYPE["PAGE"] = "page";
-})(XP_COMPONENT_TYPE || (XP_COMPONENT_TYPE = {}));
-export const getRenderMode = (context) => {
-    var _a;
-    const value = (((_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers) || {})[RENDER_MODE_HEADER];
-    const enumValue = RENDER_MODE[value === null || value === void 0 ? void 0 : value.toUpperCase()];
+export enum XP_COMPONENT_TYPE {
+    PART = 'part',
+    LAYOUT = 'layout',
+    TEXT = 'text',
+    FRAGMENT = 'fragment',
+    PAGE = 'page',
+}
+
+export interface ServerSideParams
+    extends ParsedUrlQuery {
+    // String array catching a sub-path assumed to match the site-relative path of an XP content.
+    contentPath?: string[];
+    mode?: string;
+}
+
+export interface PreviewParams {
+    contentPath: string[];
+    headers: Record<string, string>;
+    params: Record<string, string>;
+}
+
+export type Context = GetServerSidePropsContext<ServerSideParams, PreviewParams>;
+
+export type LocaleProjectConfig = {
+    project: string;
+    site: string;
+    locale: string;
+};
+
+export type LocaleProjectConfigs = {
+    default: LocaleProjectConfig;
+    [locale: string]: LocaleProjectConfig;
+};
+
+export interface MinimalContext {
+    req?: {
+        headers: IncomingHttpHeaders;
+    }
+    locale?: string;
+    defaultLocale?: string;
+    locales?: string[];
+}
+
+export interface ContentPathItem {
+    params: { contentPath: string[] },
+    locale?: string,
+}
+
+export const getRenderMode = (context?: MinimalContext): RENDER_MODE => {
+    const value = (context?.req?.headers || {})[RENDER_MODE_HEADER] as string | undefined;
+    const enumValue = RENDER_MODE[<keyof typeof RENDER_MODE>value?.toUpperCase()];
     return enumValue || RENDER_MODE[process.env.RENDER_MODE] || RENDER_MODE.NEXT;
 };
-export function normalizeLocale(locale) {
+
+export function normalizeLocale(locale: string): string | undefined {
     return locale !== 'default' ? locale : undefined;
 }
-export function getLocaleProjectConfig(context) {
-    var _a;
-    const projectId = (((_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers) || {})[PROJECT_ID_HEADER];
+
+export function getLocaleProjectConfig(context?: MinimalContext): LocaleProjectConfig {
+    const projectId = (context?.req?.headers || {})[PROJECT_ID_HEADER] as string | undefined;
     if (projectId) {
         return getLocaleProjectConfigById(projectId);
     }
+
     const projectsConfig = getLocaleProjectConfigs();
-    const locale = (context === null || context === void 0 ? void 0 : context.locale) || (context === null || context === void 0 ? void 0 : context.defaultLocale);
-    let config = projectsConfig[locale];
+    const locale = context?.locale || context?.defaultLocale;
+    let config: LocaleProjectConfig = projectsConfig[locale];
     if (!config) {
         config = projectsConfig.default;
     }
@@ -110,28 +175,32 @@ export function getLocaleProjectConfig(context) {
         throw new Error(`No config for locale "${locale}" found in "${ENV_VARS.PROJECTS}" environmental variable.
         Format: <default-repository-name>/<site-path>,<language>:<repository-name>/<site-path>,...`);
     }
+
     return config;
 }
-export function getLocaleProjectConfigById(projectId, useDefault = true) {
-    const projects = getLocaleProjectConfigs();
+
+export function getLocaleProjectConfigById(projectId?: string, useDefault = true): LocaleProjectConfig {
+    const projects: LocaleProjectConfigs = getLocaleProjectConfigs();
     if (!projectId) {
         return useDefault ? projects.default : undefined;
     }
+
     const match = Object.values(projects).find(p => {
-        var _a;
-        return ((_a = p === null || p === void 0 ? void 0 : p.project) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === projectId.toLowerCase();
+        return p?.project?.toLowerCase() === projectId.toLowerCase();
     });
+
     return match || (useDefault ? projects.default : undefined);
 }
-export function getLocaleProjectConfigs() {
+
+export function getLocaleProjectConfigs(): LocaleProjectConfigs {
     const str = PROJECTS;
     const envVarName = ENV_VARS.PROJECTS;
-    if (!(str === null || str === void 0 ? void 0 : str.length)) {
+    if (!str?.length) {
         throw Error(`"${envVarName}" environmental variable is required.`);
     }
-    const result = str.split(',').reduce((config, prjStr) => {
-        const matches = PROJECT_CONFIG_REGEXP.exec(prjStr === null || prjStr === void 0 ? void 0 : prjStr.trim());
-        if (!(matches === null || matches === void 0 ? void 0 : matches.length)) {
+    const result: LocaleProjectConfigs = str.split(',').reduce((config, prjStr) => {
+        const matches: RegExpExecArray = PROJECT_CONFIG_REGEXP.exec(prjStr?.trim());
+        if (!matches?.length) {
             return config;
         }
         const [full, lang = 'default', project, site] = matches;
@@ -141,8 +210,7 @@ export function getLocaleProjectConfigs() {
                 site,
                 locale: lang,
             };
-        }
-        else {
+        } else {
             throw Error(`Wrong configuration in "${envVarName}": ${prjStr}.
             Format: <default-repository-name>/<site-path>,<language>:<repository-name>/<site-path>,...`);
         }
@@ -160,59 +228,77 @@ export function getLocaleProjectConfigs() {
     }
     return result;
 }
-export function fixDoubleSlashes(str) {
+
+export function fixDoubleSlashes(str: string) {
     return str.replace(/(^|[^:/])\/{2,}/g, '$1/');
 }
-export function getContentApiUrl(context) {
+
+export function getContentApiUrl(context?: MinimalContext): string {
     const project = getLocaleProjectConfig(context).project;
     const branch = getRenderMode(context) === RENDER_MODE.NEXT ? 'master' : 'draft';
+
     return fixDoubleSlashes(`${API_URL}/${project}/${branch}`);
 }
-export function addJsessionHeaders(headers = {}, context) {
-    var _a;
-    const jsessionid = (_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers[JSESSIONID_HEADER];
+
+export function addJsessionHeaders(headers: Object = {}, context?: MinimalContext): void {
+    const jsessionid = context?.req?.headers[JSESSIONID_HEADER];
     if (jsessionid) {
         headers['Cookie'] = `${JSESSIONID_HEADER}=${jsessionid}`;
     }
 }
-export function addLocaleHeaders(headers = {}, context) {
-    const locale = context === null || context === void 0 ? void 0 : context.locale;
+
+export function addLocaleHeaders(headers: Object = {}, context?: Context): void {
+    const locale = context?.locale;
     if (locale) {
         headers[LOCALE_HEADER] = locale;
     }
-    const locales = context === null || context === void 0 ? void 0 : context.locales;
+    const locales = context?.locales;
     if (locales) {
         headers[LOCALES_HEADER] = JSON.stringify(locales);
     }
-    const defaultLocale = context === null || context === void 0 ? void 0 : context.defaultLocale;
+    const defaultLocale = context?.defaultLocale;
     if (defaultLocale) {
         headers[DEFAULT_LOCALE_HEADER] = defaultLocale;
     }
 }
-export const getXpBaseUrl = (context) => {
-    var _a;
-    const header = ((((_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers) || {})[XP_BASE_URL_HEADER] || '');
+
+export const getXpBaseUrl = (context?: MinimalContext): string => {
+    const header = ((context?.req?.headers || {})[XP_BASE_URL_HEADER] || '') as string;
+
     // TODO: workaround for XP pattern controller mapping not picked up in edit mode
     return (header || '/').replace(/\/edit\//, '/inline/');
 };
-export const commonChars = (s1, s2) => {
+
+
+export const commonChars = (s1?: string, s2?: string, wordSeparators?: string) => {
     let result = '';
     if (!s1 || s1.length === 0 || !s2 || s2.length === 0) {
         return result;
     }
+    let lastSeparatorIndex = -1;
+    let lastCommonIndex = -1;
     for (let i = 0; i < s1.length; i++) {
-        const s1Element = s1[i];
-        if (s2[i] === s1Element) {
-            result += s1Element;
+        const s1El = s1[i];
+        if (wordSeparators?.indexOf(s1El) >= 0) {
+            lastSeparatorIndex = i;
         }
-        else {
+        if (s2[i] === s1El) {
+            lastCommonIndex = i;
+        } else {
             break;
         }
     }
+
+    if (lastSeparatorIndex > 0 || lastCommonIndex === lastSeparatorIndex) {
+        result = s1.substring(0, lastSeparatorIndex);
+    } else if (lastCommonIndex > -1) {
+        result = s1.substring(0, lastCommonIndex + 1);
+    }
+
     return result;
 };
 // sanitizes text according to graphql naming spec http://spec.graphql.org/October2021/#sec-Names
-export const sanitizeGraphqlName = (text) => {
+export const sanitizeGraphqlName = (text: string) => {
     if (!text || text.trim().length === 0) {
         return '';
     }
@@ -222,7 +308,9 @@ export const sanitizeGraphqlName = (text) => {
     }
     return result;
 };
+
 // ---------------------------------------------------------------------------------------------------------------- Export
+
 const adapterConstants = {
     IS_DEV_MODE,
     APP_NAME,
@@ -231,6 +319,7 @@ const adapterConstants = {
     PORTAL_COMPONENT_ATTRIBUTE,
     PORTAL_REGION_ATTRIBUTE,
 };
+
 // Verify required values
 const NOT_REQUIRED = ['IS_DEV_MODE'];
 Object.keys(adapterConstants).forEach(key => {
@@ -238,4 +327,5 @@ Object.keys(adapterConstants).forEach(key => {
         throw Error(`constants.ts: Config value '${key}' is missing (from .env?)`);
     }
 });
+
 export default adapterConstants;