@enonic/nextjs-adapter 2.0.0-B3 → 3.0.0-B1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/nextjs-adapter",
-  "version": "2.0.0-B3",
+  "version": "3.0.0-B1",
   "license": "Apache-2.0",
   "main": "index.js",
   "publishConfig": {
@@ -8,27 +8,30 @@
   },
   "scripts": {
     "copy": "npx --yes cpy-cli package.json README.md dist",
-    "build": "tsc --build src/tsconfig.json && tsc --build server/tsconfig.json",
-    "lint": "eslint --quiet server && eslint --quiet src",
-    "lint:fix": "eslint --fix server && eslint --fix src"
+    "build": "tsc --build tsconfig.json",
+    "lint": "eslint --quiet src",
+    "lint:fix": "eslint --fix src"
   },
   "dependencies": {
-    "html-react-parser": "^4.2.1",
+    "@formatjs/intl-localematcher": "^0.5.2",
+    "html-react-parser": "^5.0.11",
     "lru-cache": "^10.0.1",
-    "next": "13.4.19",
+    "negotiator": "^0.6.3",
+    "next": "^14.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "unescape": "^1.0.1"
   },
   "devDependencies": {
     "@enonic/eslint-config": "^1.1.0",
-    "@types/node": "^20.5.1",
-    "@types/react": "18.2.20",
-    "@types/react-dom": "18.2.7",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "eslint": "^8.47.0",
+    "@types/negotiator": "^0.6.3",
+    "@types/node": "^20.10.7",
+    "@types/react": "18.2.47",
+    "@types/react-dom": "18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
+    "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
-    "typescript": "^5.1.6"
+    "typescript": "^5.2.2"
   }
 }

package/utils.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="node" />
-/// <reference types="node" />
 /** Import config values from .env, .env.development and .env.production */
-import { GetServerSidePropsContext } from 'next';
 import { ParsedUrlQuery } from 'node:querystring';
-import { IncomingHttpHeaders } from 'http';
+import { ReadonlyHeaders } from 'next/dist/server/web/spec-extension/adapters/headers';
 export declare const IS_DEV_MODE: boolean;
-export declare const PURGE_CACHE_URL = "/_/enonic/cache/purge";
 export declare enum ENV_VARS {
     PROJECTS = "ENONIC_PROJECTS",
     API = "ENONIC_API",
@@ -37,7 +34,7 @@ export declare const DEFAULT_LOCALE_HEADER = "default-locale";
  * - media
  * - paths with '/_' in them
  */
-export declare const GET_STATIC_PATHS_QUERY = "query ($count: Int) {\n  guillotine {\n    queryDsl(\n      first: $count,\n      sort: {\n        field: \"modifiedTime\",\n        direction: DESC     \n      }\n      query: {boolean: {mustNot: [\n        {in: {field: \"type\", stringValues: [\"base:folder\", \"base:shortcut\"]}}\n        {like: {field: \"type\", value: {string: \"media:*\"}}}\n        {like: {field: \"_path\", value: {string: \"*/_*\"}}}\n      ]}}\n    ) {\n      _name\n      _path\n      site {_name}\n    }\n  }\n}";
+export declare const GET_STATIC_PATHS_QUERY = "query ($count: Int) {\n  guillotine {\n    queryDsl(\n      first: $count,\n      sort: {\n        field: \"modifiedTime\",\n        direction: DESC     \n      }\n      query: {boolean: {mustNot: [\n        {in: {field: \"type\", stringValues: [\"base:folder\", \"base:shortcut\"]}}\n        {like: {field: \"type\", value: \"media:*\"}}\n        {like: {field: \"_path\", value: \"*/_*\"}}\n      ]}}\n    ) {\n      _name\n      _path\n      site {_name}\n    }\n  }\n}";
 export declare enum XP_REQUEST_TYPE {
     COMPONENT = "component",
     TYPE = "type",
@@ -67,40 +64,40 @@ export interface PreviewParams {
     headers: Record<string, string>;
     params: Record<string, string>;
 }
-export type Context = GetServerSidePropsContext<ServerSideParams, PreviewParams>;
-export type LocaleProjectConfig = {
+export type Context = {
+    headers?: ReadonlyHeaders | Headers;
+    locale?: string;
+    contentPath: string | string[];
+};
+export type ProjectLocaleConfig = {
+    default: boolean;
     project: string;
     site: string;
     locale: string;
 };
-export type LocaleProjectConfigs = {
-    default: LocaleProjectConfig;
-    [locale: string]: LocaleProjectConfig;
+export type ProjectLocalesConfig = {
+    [locale: string]: ProjectLocaleConfig;
 };
-export interface MinimalContext {
-    req?: {
-        headers: IncomingHttpHeaders;
-    };
-    locale?: string;
-    defaultLocale?: string;
-    locales?: string[];
-}
 export interface ContentPathItem {
-    params: {
-        contentPath: string[];
-    };
-    locale?: string;
+    contentPath: string[];
+    locale: string;
 }
-export declare const getRenderMode: (context?: MinimalContext) => RENDER_MODE;
-export declare function normalizeLocale(locale: string): string | undefined;
-export declare function getLocaleProjectConfig(context?: MinimalContext): LocaleProjectConfig;
-export declare function getLocaleProjectConfigById(projectId?: string, useDefault?: boolean): LocaleProjectConfig;
-export declare function getLocaleProjectConfigs(): LocaleProjectConfigs;
+export declare const getRenderMode: (context: Context) => RENDER_MODE;
+export declare function getRequestLocaleInfo(context: Context): {
+    locale: string;
+    locales: string[];
+    defaultLocale: string;
+};
+export declare function getProjectLocaleConfig(context: Context): ProjectLocaleConfig;
+export declare function getProjectLocales(): string[];
+export declare function getProjectLocaleConfigById(projectId?: string, useDefault?: boolean): ProjectLocaleConfig;
+export declare function getProjectLocaleConfigByLocale(locale?: string, useDefault?: boolean): ProjectLocaleConfig;
+export declare function getProjectLocaleConfigs(): ProjectLocalesConfig;
 export declare function fixDoubleSlashes(str: string): string;
-export declare function getContentApiUrl(context?: MinimalContext): string;
-export declare function addJsessionHeaders(headers?: Object, context?: MinimalContext): void;
-export declare function addLocaleHeaders(headers?: Object, context?: Context): void;
-export declare const getXpBaseUrl: (context?: MinimalContext) => string;
+export declare function getContentApiUrl(context: Context): string;
+export declare function addJsessionHeaders(target: Object, context: Context): void;
+export declare function addLocaleHeaders(target: Object, locale: string, locales: string[], defaultLocale: string): void;
+export declare const getXpBaseUrl: (context: Context) => string;
 export declare const commonChars: (s1?: string, s2?: string) => string;
 export declare const sanitizeGraphqlName: (text: string) => string;
 declare const adapterConstants: {

package/utils.js

@@ -1,6 +1,7 @@
+import Negotiator from 'negotiator';
+import { match as localeMatcher } from '@formatjs/intl-localematcher';
 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";
@@ -17,7 +18,7 @@ export const APP_NAME = (process.env.ENONIC_APP_NAME || process.env.NEXT_PUBLIC_
 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');
+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';
@@ -50,8 +51,8 @@ export const GET_STATIC_PATHS_QUERY = `query ($count: Int) {
       }
       query: {boolean: {mustNot: [
         {in: {field: "type", stringValues: ["base:folder", "base:shortcut"]}}
-        {like: {field: "type", value: {string: "media:*"}}}
-        {like: {field: "_path", value: {string: "*/_*"}}}
+        {like: {field: "type", value: "media:*"}}
+        {like: {field: "_path", value: "*/_*"}}
       ]}}
     ) {
       _name
@@ -87,56 +88,89 @@ export var XP_COMPONENT_TYPE;
 })(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 value = (_a = context.headers) === null || _a === void 0 ? void 0 : _a.get(RENDER_MODE_HEADER);
     const enumValue = RENDER_MODE[value === null || value === void 0 ? void 0 : value.toUpperCase()];
     return enumValue || RENDER_MODE[process.env.RENDER_MODE] || RENDER_MODE.NEXT;
 };
-export function normalizeLocale(locale) {
-    return locale !== 'default' ? locale : undefined;
+export function getRequestLocaleInfo(context) {
+    var _a, _b, _c;
+    let locale;
+    const configs = getProjectLocaleConfigs();
+    const locales = Object.keys(configs);
+    const defaultLocale = locales.find((locale) => configs[locale].default);
+    const projectId = (_a = context.headers) === null || _a === void 0 ? void 0 : _a.get(PROJECT_ID_HEADER);
+    if (projectId) {
+        locale = (_b = getProjectLocaleConfigById(projectId, false)) === null || _b === void 0 ? void 0 : _b.locale;
+    }
+    else {
+        locale = context.locale;
+        if (!locale) {
+            const acceptLang = ((_c = context.headers) === null || _c === void 0 ? void 0 : _c.get('accept-language')) || '';
+            const langs = new Negotiator({ headers: { 'accept-language': acceptLang } }).languages();
+            locale = localeMatcher(langs, locales, defaultLocale);
+        }
+    }
+    return { locale, locales, defaultLocale };
 }
-export function getLocaleProjectConfig(context) {
+export function getProjectLocaleConfig(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];
+    const projectId = (_a = context.headers) === null || _a === void 0 ? void 0 : _a.get(PROJECT_ID_HEADER);
+    let config;
     if (projectId) {
-        return getLocaleProjectConfigById(projectId);
+        // first use project id header
+        config = getProjectLocaleConfigById(projectId, false);
     }
-    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];
     if (!config) {
-        config = projectsConfig.default;
+        // next try to use locale from url
+        // it will fall back to default locale if not found
+        config = getProjectLocaleConfigByLocale(context.locale);
     }
-    if (!config) {
-        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 getProjectLocales() {
+    return Object.keys(getProjectLocaleConfigs());
+}
+export function getProjectLocaleConfigById(projectId, useDefault = true) {
+    const configs = getProjectLocaleConfigs();
+    let config;
+    if (projectId) {
+        config = Object.values(configs).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();
+        });
+    }
+    if (!config && useDefault) {
+        config = Object.values(configs).find(c => c.default);
     }
     return config;
 }
-export function getLocaleProjectConfigById(projectId, useDefault = true) {
-    const projects = 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 match || (useDefault ? projects.default : undefined);
+export function getProjectLocaleConfigByLocale(locale, useDefault = true) {
+    const configs = getProjectLocaleConfigs();
+    let config;
+    if (locale) {
+        config = configs[locale];
+    }
+    if (!config && useDefault) {
+        config = Object.values(configs).find(c => c.default);
+    }
+    return config;
 }
-export function getLocaleProjectConfigs() {
+export function getProjectLocaleConfigs() {
     const str = PROJECTS;
     const envVarName = ENV_VARS.PROJECTS;
     if (!(str === null || str === void 0 ? void 0 : str.length)) {
-        throw Error(`"${envVarName}" environmental variable is required.`);
+        throw new Error(`Did you forget to define "${ENV_VARS.PROJECTS}" environmental variable?
+        Format: <default-language>:<default-repository-name>/<default-site-path>,<language>:<repository-name>/<site-path>,...`);
     }
-    const result = str.split(',').reduce((config, prjStr) => {
+    return str.split(',').reduce((config, prjStr, index) => {
         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)) {
             return config;
         }
-        const [full, lang = 'default', project, site] = matches;
+        const [full, lang, project, site] = matches;
         if (project && site) {
             config[lang] = {
+                default: index === 0,
                 project,
                 site,
                 locale: lang,
@@ -144,56 +178,36 @@ export function getLocaleProjectConfigs() {
         }
         else {
             throw Error(`Wrong configuration in "${envVarName}": ${prjStr}.
-            Format: <default-repository-name>/<site-path>,<language>:<repository-name>/<site-path>,...`);
+            Format: <default-language>:<default-repository-name>/<default-site-path>,<language>:<repository-name>/<site-path>,...`);
         }
         return config;
-    }, {
-        default: {
-            project: '',
-            site: '',
-            locale: '',
-        },
-    });
-    if (!result.default.site || !result.default.project) {
-        throw Error(`"${envVarName}" environmental variable should contain default value.
-        Format: <default-repository-name>/<site-path>,<language>:<repository-name>/<site-path>,...`);
-    }
-    return result;
+    }, {});
 }
 export function fixDoubleSlashes(str) {
     return str.replace(/(^|[^:/])\/{2,}/g, '$1/');
 }
 export function getContentApiUrl(context) {
-    const project = getLocaleProjectConfig(context).project;
+    const project = getProjectLocaleConfig(context).project;
     const branch = getRenderMode(context) === RENDER_MODE.NEXT ? 'master' : 'draft';
     return fixDoubleSlashes(`${API_URL}/${project}/${branch}`);
 }
-export function addJsessionHeaders(headers = {}, context) {
+export function addJsessionHeaders(target = {}, 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];
+    const jsessionid = (_a = context.headers) === null || _a === void 0 ? void 0 : _a.get(JSESSIONID_HEADER);
     if (jsessionid) {
-        headers['Cookie'] = `${JSESSIONID_HEADER}=${jsessionid}`;
+        target['Cookie'] = `${JSESSIONID_HEADER}=${jsessionid}`;
     }
 }
-export function addLocaleHeaders(headers = {}, context) {
-    const locale = context === null || context === void 0 ? void 0 : context.locale;
-    if (locale) {
-        headers[LOCALE_HEADER] = locale;
-    }
-    const locales = context === null || context === void 0 ? void 0 : context.locales;
-    if (locales) {
-        headers[LOCALES_HEADER] = JSON.stringify(locales);
-    }
-    const defaultLocale = context === null || context === void 0 ? void 0 : context.defaultLocale;
-    if (defaultLocale) {
-        headers[DEFAULT_LOCALE_HEADER] = defaultLocale;
-    }
+export function addLocaleHeaders(target = {}, locale, locales, defaultLocale) {
+    target[LOCALE_HEADER] = locale;
+    target[LOCALES_HEADER] = JSON.stringify(locales);
+    target[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] || '');
+    const header = ((_a = context.headers) === null || _a === void 0 ? void 0 : _a.get(XP_BASE_URL_HEADER)) || '/';
     // TODO: workaround for XP pattern controller mapping not picked up in edit mode
-    return (header || '/').replace(/\/edit\//, '/inline/');
+    return header.replace(/\/edit\//, '/inline/');
 };
 export const commonChars = (s1, s2) => {
     let result = '';

package/views/BaseComponent.d.ts

@@ -5,7 +5,7 @@ export type BaseComponentProps = {
     meta: MetaData;
     common?: any;
 };
-declare const BaseComponent: ({ component, meta, common }: BaseComponentProps) => JSX.Element;
+declare const BaseComponent: ({ component, meta, common }: BaseComponentProps) => Promise<React.JSX.Element>;
 export default BaseComponent;
 export declare const MissingComponent: ({ descriptor, type }: {
     descriptor?: string;

package/views/BaseComponent.jsx

@@ -1,9 +1,17 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import React from 'react';
 import { IS_DEV_MODE, PORTAL_COMPONENT_ATTRIBUTE, RENDER_MODE, XP_COMPONENT_TYPE } from '../utils';
 import { ComponentRegistry } from '../ComponentRegistry';
 import Empty from './Empty';
-import * as ReactDOMServer from 'react-dom/server';
-const BaseComponent = ({ component, meta, common }) => {
+const BaseComponent = ({ component, meta, common }) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     const { type, error } = component;
     const cmpData = component[type];
@@ -28,8 +36,8 @@ const BaseComponent = ({ component, meta, common }) => {
     }
     // need to display a placeholder if descriptor is empty as component is not initialized yet
     if (descriptor && shouldShowPlaceholderView(meta)) {
-        const outputHTML = ReactDOMServer.renderToString(ComponentView);
-        if (!outputHTML || outputHTML.trim().length === 0) {
+        const outputHTML = yield renderComponent(ComponentView);
+        if (!(outputHTML === null || outputHTML === void 0 ? void 0 : outputHTML.trim().length)) {
             // render some placeholder in case of empty output
             ComponentView = <PlaceholderComponent type={type} descriptor={descriptor}/>;
         }
@@ -43,7 +51,7 @@ const BaseComponent = ({ component, meta, common }) => {
         // do not make component wrappers in live mode
         return ComponentView;
     }
-};
+});
 export default BaseComponent;
 /*
  *  Used for displaying components with missing implementations on the page, while rendering whole page
@@ -57,6 +65,12 @@ export const MissingComponent = ({ descriptor, type }) => {
             <p style={{ marginBottom: 0, color: 'grey' }}>{`Missing ${type} with descriptor: ${descriptor}`}</p>
         </div>);
 };
+// Have to import it dynamically because of this issue:
+// https://github.com/vercel/next.js/issues/43810
+const renderComponent = (component) => __awaiter(void 0, void 0, void 0, function* () {
+    const ReactDOMServer = (yield import('react-dom/server')).default;
+    return ReactDOMServer.renderToStaticMarkup(component);
+});
 export function shouldShowMissingView(meta) {
     return IS_DEV_MODE || meta.renderMode !== RENDER_MODE.NEXT;
 }

package/views/RichTextView.jsx

@@ -3,9 +3,11 @@ import { getUrl, UrlProcessor } from '../UrlProcessor';
 import HTMLReactParser from 'html-react-parser';
 import { ElementType } from 'domelementtype';
 import BaseMacro from './BaseMacro';
+import Link from 'next/link';
 export function createReplacer(allData, meta, renderMacroInEditMode = true, customReplacer) {
     // eslint-disable-next-line react/display-name
     return (domNode) => {
+        var _a;
         if (domNode.type !== ElementType.Tag) {
             return domNode;
         }
@@ -31,7 +33,8 @@ export function createReplacer(allData, meta, renderMacroInEditMode = true, cust
                 ref = el.attribs[UrlProcessor.LINK_ATTR];
                 const href = el.attribs['href'];
                 if (ref && href) {
-                    el.attribs['href'] = getUrl(href, meta);
+                    const textChild = (_a = el.children) === null || _a === void 0 ? void 0 : _a.find(c => c.type === ElementType.Text);
+                    return <Link href={getUrl(href, meta)}>{textChild === null || textChild === void 0 ? void 0 : textChild.data}</Link>;
                 }
                 break;
             case UrlProcessor.MACRO_TAG:

package/server/ClearableFileCache.d.ts

@@ -1,31 +0,0 @@
-import { CacheHandler, CacheHandlerContext, CacheHandlerValue } from 'next/dist/server/lib/incremental-cache';
-import { CacheFs } from 'next/dist/shared/lib/utils';
-type FileSystemCacheContext = Omit<CacheHandlerContext, 'fs' | 'serverDistDir'> & {
-    fs: CacheFs;
-    serverDistDir: string;
-};
-export default class FileSystemCache implements CacheHandler {
-    private fs;
-    private flushToDisk?;
-    private serverDistDir;
-    private appDir;
-    private tagsManifestPath?;
-    private revalidatedTags;
-    constructor(ctx: FileSystemCacheContext);
-    clear(): void;
-    delete(path: string): boolean | undefined;
-    private loadTagsManifest;
-    setTags(key: string, tags: string[]): Promise<void>;
-    revalidateTag(tag: string): Promise<void>;
-    get(key: string, fetchCache?: boolean): Promise<CacheHandlerValue | null>;
-    set(key: string, data: CacheHandlerValue['value']): Promise<void>;
-    getFsPath({ pathname, appDir, fetchCache, }: {
-        pathname: string;
-        appDir?: boolean;
-        fetchCache?: boolean;
-    }): Promise<{
-        filePath: string;
-        isAppPath: boolean;
-    }>;
-}
-export {};