@enonic/nextjs-adapter 0.10.1 → 0.12.0

package/ComponentRegistry.d.ts

@@ -14,14 +14,14 @@ export interface ComponentDefinition {
     processor?: DataProcessor;
     view?: React.FunctionComponent<any>;
 }
-export declare type DataProcessor = (data: any, context?: Context) => Promise<Record<string, any>>;
-export declare type VariablesGetter = (path: string, context?: Context, config?: any) => VariablesGetterResult;
-export declare type QueryGetter = (config?: any) => string;
-export declare type VariablesGetterResult = {
+export type DataProcessor = (data: any, context?: Context) => Promise<Record<string, any>>;
+export type VariablesGetter = (path: string, context?: Context, config?: any) => VariablesGetterResult;
+export type QueryGetter = (config?: any) => string;
+export type VariablesGetterResult = {
     [variables: string]: any;
     path: string;
 };
-export declare type SelectedQueryMaybeVariablesFunc = string | QueryGetter | {
+export type SelectedQueryMaybeVariablesFunc = string | QueryGetter | {
     query: string | QueryGetter;
     variables: VariablesGetter;
 } | [

package/UrlProcessor.d.ts

@@ -9,6 +9,7 @@ export declare class UrlProcessor {
     private static IMG_ATMT_REGEXP;
     private static endSlashPattern;
     private static startSlashPattern;
+    private static localhostPattern;
     private static siteKey;
     static process(url: string, meta: MetaData): string;
     static setSiteKey(key: string): void;

package/UrlProcessor.js

@@ -25,8 +25,11 @@ export class UrlProcessor {
         return ((_a = linkData.find(data => data.ref === ref)) === null || _a === void 0 ? void 0 : _a.image) !== null;
     }
     static stripApiUrl(url, apiUrl) {
-        const common = commonChars(url, apiUrl);
-        const remaining = common.length > 0 ? url.substring(common.length) : url;
+        // 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;
     }
     static isPageUrl(url) {
@@ -50,5 +53,6 @@ UrlProcessor.MACRO_ATTR = 'data-macro-ref';
 UrlProcessor.IMG_ATMT_REGEXP = /_\/image\/|_\/attachment\//;
 UrlProcessor.endSlashPattern = /\/+$/;
 UrlProcessor.startSlashPattern = /^\/+/;
+UrlProcessor.localhostPattern = /localhost/;
 UrlProcessor.setSiteKey(SITE_KEY);
 export const getUrl = UrlProcessor.process.bind(UrlProcessor);

package/guillotine/fetchContent.d.ts

@@ -7,7 +7,7 @@ import { ParsedUrlQuery } from 'node:querystring';
 import { type GetServerSidePropsContext } from 'next';
 import { IncomingMessage } from 'http';
 import { type NextApiRequestCookies } from 'next/dist/server/api-utils';
-export declare type AdapterConstants = {
+export type AdapterConstants = {
     APP_NAME: string;
     APP_NAME_DASHED: string;
     SITE_KEY: string;
@@ -15,22 +15,22 @@ export declare type AdapterConstants = {
     getRenderMode: (context?: Context) => RENDER_MODE;
     getSingleComponentPath: (context?: Context) => string | undefined;
 };
-declare type Result = {
+type Result = {
     error?: {
         code: string;
         message: string;
     } | null;
 };
-declare type GuillotineResult = Result & {
+type GuillotineResult = Result & {
     [dataKey: string]: any;
 };
-export declare type FetchContentResult = Result & {
+export type FetchContentResult = Result & {
     data: Record<string, any> | null;
     common: Record<string, any> | null;
     meta: MetaData;
     page: PageComponent | null;
 };
-declare type FetcherConfig<T extends AdapterConstants> = T & {
+type FetcherConfig<T extends AdapterConstants> = T & {
     componentRegistry: typeof ComponentRegistry;
 };
 export interface ServerSideParams extends ParsedUrlQuery {
@@ -41,7 +41,7 @@ export interface PreviewParams {
     contentPath: string[];
     headers: Record<string, string>;
 }
-export declare type Context = GetServerSidePropsContext<ServerSideParams, PreviewParams>;
+export type Context = GetServerSidePropsContext<ServerSideParams, PreviewParams>;
 export interface MinimalContext {
     req: IncomingMessage & {
         cookies: NextApiRequestCookies;
@@ -52,17 +52,17 @@ export interface MinimalContext {
  * @param contentPath string or string array: pre-split or slash-delimited _path to a content available on the API
  * @returns FetchContentResult object: {data?: T, error?: {code, message}}
  */
-export declare type ContentFetcher = (contentPath: string | string[], context: Context) => Promise<FetchContentResult>;
-export declare type ContentApiBaseBody = {
+export type ContentFetcher = (contentPath: string | string[], context: Context) => Promise<FetchContentResult>;
+export type ContentApiBaseBody = {
     query?: string;
     variables?: {
         path?: string;
     };
 };
 /** Generic fetch */
-export declare const fetchFromApi: (apiUrl: string, body: {}, method?: string) => Promise<any>;
+export declare const fetchFromApi: (apiUrl: string, body: ContentApiBaseBody, headers?: {}, method?: string) => Promise<any>;
 /** Guillotine-specialized fetch, using the generic fetch above */
-export declare const fetchGuillotine: (contentApiUrl: string, body: ContentApiBaseBody, xpContentPath: string) => Promise<GuillotineResult>;
+export declare const fetchGuillotine: (contentApiUrl: string, body: ContentApiBaseBody, xpContentPath: string, headers?: {}) => Promise<GuillotineResult>;
 /**
  * Configures, builds and returns a general fetchContent function.
  * @param adapterConstants Object containing attributes imported from enonic-connecion-config.js: constants and function concerned with connection to the XP backend. Easiest: caller imports enonic-connection-config and just passes that entire object here as adapterConstants.

package/guillotine/fetchContent.js

@@ -8,14 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { getMetaQuery, pageFragmentQuery } from './getMetaData';
-import adapterConstants, { APP_NAME, APP_NAME_DASHED, FRAGMENT_CONTENTTYPE_NAME, FRAGMENT_DEFAULT_REGION_NAME, getContentApiUrl, getXpBaseUrl, IS_DEV_MODE, PAGE_TEMPLATE_CONTENTTYPE_NAME, PAGE_TEMPLATE_FOLDER, RENDER_MODE, sanitizeGraphqlName, SITE_KEY, XP_COMPONENT_TYPE, XP_REQUEST_TYPE, } from '../utils';
+import adapterConstants, { APP_NAME, APP_NAME_DASHED, FRAGMENT_CONTENTTYPE_NAME, FRAGMENT_DEFAULT_REGION_NAME, getContentApiUrl, getXpBaseUrl, IS_DEV_MODE, JSESSIONID_HEADER, PAGE_TEMPLATE_CONTENTTYPE_NAME, PAGE_TEMPLATE_FOLDER, RENDER_MODE, sanitizeGraphqlName, SITE_KEY, XP_COMPONENT_TYPE, XP_REQUEST_TYPE, } from '../utils';
 import { ComponentRegistry } from '../ComponentRegistry';
 const NO_PROPS_PROCESSOR = (props) => __awaiter(void 0, void 0, void 0, function* () { var _a; return (_a = yield props) !== null && _a !== void 0 ? _a : {}; });
 const ALIAS_PREFIX = 'request';
 const GUILLOTINE_QUERY_REGEXP = /^\s*query\s*(?:\((.*)*\))?\s*{\s*guillotine\s*{((?:.|\s)+)}\s*}\s*$/;
 const GRAPHQL_FRAGMENTS_REGEXP = /fragment\s+.+\s+on\s+.+\s*{[\s\w{}().,:"'`]+}/;
 /** Generic fetch */
-export const fetchFromApi = (apiUrl, body, method = 'POST') => __awaiter(void 0, void 0, void 0, function* () {
+export const fetchFromApi = (apiUrl, body, headers, method = 'POST') => __awaiter(void 0, void 0, void 0, function* () {
     const options = {
         method,
         headers: {
@@ -25,6 +25,9 @@ export const fetchFromApi = (apiUrl, body, method = 'POST') => __awaiter(void 0,
         },
         body: JSON.stringify(body),
     };
+    if (headers) {
+        Object.assign(options.headers, headers);
+    }
     let res;
     try {
         res = yield fetch(apiUrl, options);
@@ -61,7 +64,7 @@ export const fetchFromApi = (apiUrl, body, method = 'POST') => __awaiter(void 0,
     return json;
 });
 /** Guillotine-specialized fetch, using the generic fetch above */
-export const fetchGuillotine = (contentApiUrl, body, xpContentPath) => __awaiter(void 0, void 0, void 0, function* () {
+export const fetchGuillotine = (contentApiUrl, body, xpContentPath, headers) => __awaiter(void 0, void 0, void 0, function* () {
     if (typeof body.query !== 'string' || !body.query.trim()) {
         return {
             error: {
@@ -70,7 +73,7 @@ export const fetchGuillotine = (contentApiUrl, body, xpContentPath) => __awaiter
             },
         };
     }
-    const result = yield fetchFromApi(contentApiUrl, body)
+    const result = yield fetchFromApi(contentApiUrl, body, headers)
         .then(json => {
         let errors = (json || {}).errors;
         if (errors) {
@@ -104,7 +107,7 @@ export const fetchGuillotine = (contentApiUrl, body, xpContentPath) => __awaiter
     return result;
 });
 // /////////////////////////////////////////////////////////////////////////////// Specific fetch wrappers:
-const fetchMetaData = (contentApiUrl, xpContentPath) => __awaiter(void 0, void 0, void 0, function* () {
+const fetchMetaData = (contentApiUrl, xpContentPath, headers) => __awaiter(void 0, void 0, void 0, function* () {
     var _b;
     const body = {
         query: getMetaQuery(pageFragmentQuery()),
@@ -112,7 +115,7 @@ const fetchMetaData = (contentApiUrl, xpContentPath) => __awaiter(void 0, void 0
             path: xpContentPath,
         },
     };
-    const metaResult = yield fetchGuillotine(contentApiUrl, body, xpContentPath);
+    const metaResult = yield fetchGuillotine(contentApiUrl, body, xpContentPath, headers);
     if (metaResult.error) {
         return metaResult;
     }
@@ -122,12 +125,12 @@ const fetchMetaData = (contentApiUrl, xpContentPath) => __awaiter(void 0, void 0
         };
     }
 });
-const fetchContentData = (contentApiUrl, xpContentPath, query, variables) => __awaiter(void 0, void 0, void 0, function* () {
+const fetchContentData = (contentApiUrl, xpContentPath, query, variables, headers) => __awaiter(void 0, void 0, void 0, function* () {
     const body = { query };
     if (variables && Object.keys(variables).length > 0) {
         body.variables = variables;
     }
-    const contentResults = yield fetchGuillotine(contentApiUrl, body, xpContentPath);
+    const contentResults = yield fetchGuillotine(contentApiUrl, body, xpContentPath, headers);
     if (contentResults.error) {
         return contentResults;
     }
@@ -505,7 +508,14 @@ function errorResponse(code = '500', message = 'Unknown error', requestType, ren
 export const buildContentFetcher = (config) => {
     const { APP_NAME, APP_NAME_DASHED, getXPRequestType, getRenderMode, getSingleComponentPath, componentRegistry, } = config;
     return (contentPathOrArray, context) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
+        var _a, _b, _c;
+        let headers;
+        const jsessionid = (_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers[JSESSIONID_HEADER];
+        if (jsessionid) {
+            headers = {
+                'Cookie': `${JSESSIONID_HEADER}=${jsessionid}`,
+            };
+        }
         const xpBaseUrl = getXpBaseUrl(context);
         const contentApiUrl = getContentApiUrl(context);
         const requestType = getXPRequestType(context);
@@ -518,11 +528,12 @@ export const buildContentFetcher = (config) => {
                 requestedComponentPath = getSingleComponentPath(context);
             }
             // /////////////  FIRST GUILLOTINE CALL FOR METADATA     /////////////////
-            const metaResult = yield fetchMetaData(contentApiUrl, '${site}/' + siteRelativeContentPath);
+            const metaResult = yield fetchMetaData(contentApiUrl, '${site}/' + siteRelativeContentPath, headers);
             // ///////////////////////////////////////////////////////////////////////
             const { type, components, _path } = metaResult.meta || {};
             contentPath = _path || '';
             if (metaResult.error) {
+                console.error(metaResult.error);
                 return errorResponse(metaResult.error.code, metaResult.error.message, requestType, renderMode, contentApiUrl, xpBaseUrl, contentPath);
             }
             if (!metaResult.meta) {
@@ -545,14 +556,14 @@ export const buildContentFetcher = (config) => {
             if (pageCmp) {
                 processComponentConfig(APP_NAME, APP_NAME_DASHED, pageCmp);
             }
-            const contentQueryAndVars = getQueryAndVariables(type, contentPath, contentTypeDef === null || contentTypeDef === void 0 ? void 0 : contentTypeDef.query, context, (_a = pageCmp === null || pageCmp === void 0 ? void 0 : pageCmp.page) === null || _a === void 0 ? void 0 : _a.config);
+            const contentQueryAndVars = getQueryAndVariables(type, contentPath, contentTypeDef === null || contentTypeDef === void 0 ? void 0 : contentTypeDef.query, context, (_b = pageCmp === null || pageCmp === void 0 ? void 0 : pageCmp.page) === null || _b === void 0 ? void 0 : _b.config);
             if (contentQueryAndVars) {
                 allDescriptors.push({
                     type: contentTypeDef,
                     queryAndVariables: contentQueryAndVars,
                 });
             }
-            const commonQueryAndVars = getQueryAndVariables(type, contentPath, componentRegistry.getCommonQuery(), context, (_b = pageCmp === null || pageCmp === void 0 ? void 0 : pageCmp.page) === null || _b === void 0 ? void 0 : _b.config);
+            const commonQueryAndVars = getQueryAndVariables(type, contentPath, componentRegistry.getCommonQuery(), context, (_c = pageCmp === null || pageCmp === void 0 ? void 0 : pageCmp.page) === null || _c === void 0 ? void 0 : _c.config);
             if (commonQueryAndVars) {
                 allDescriptors.push({
                     type: contentTypeDef,
@@ -574,8 +585,12 @@ export const buildContentFetcher = (config) => {
                 return errorResponse('400', `Missing or empty query override for content type ${type}`, requestType, renderMode, contentApiUrl, xpBaseUrl, contentPath);
             }
             // ///////////////    SECOND GUILLOTINE CALL FOR DATA   //////////////////////
-            const contentResults = yield fetchContentData(contentApiUrl, contentPath, query, variables);
+            const contentResults = yield fetchContentData(contentApiUrl, contentPath, query, variables, headers);
             // ///////////////////////////////////////////////////////////////////////////
+            if (contentResults.error) {
+                console.error(contentResults.error);
+                return errorResponse(contentResults.error.code, contentResults.error.message, requestType, renderMode, contentApiUrl, xpBaseUrl, contentPath);
+            }
             // Apply processors to every component
             const datas = yield applyProcessors(allDescriptors, contentResults, context);
             //  Unwind the data back to components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/nextjs-adapter",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "publishConfig": {
@@ -14,20 +14,20 @@
   },
   "dependencies": {
     "html-react-parser": "^3.0.4",
-    "next": "^13.0.3",
+    "next": "^13.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "unescape": "^1.0.1"
   },
   "devDependencies": {
     "@enonic/eslint-config": "^0.1.0",
-    "@types/node": "^18.11.9",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "eslint": "^8.27.0",
-    "eslint-plugin-react": "^7.31.10",
-    "typescript": "^4.8.4"
+    "@types/node": "^18.11.17",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.46.1",
+    "@typescript-eslint/parser": "^5.46.1",
+    "eslint": "^8.30.0",
+    "eslint-plugin-react": "^7.31.11",
+    "typescript": "^4.9.4"
   }
 }

package/utils.d.ts

@@ -12,6 +12,7 @@ export declare const FROM_XP_PARAM = "__fromxp__";
 export declare const XP_BASE_URL_HEADER = "xpbaseurl";
 export declare const COMPONENT_SUBPATH_HEADER = "xp-component-path";
 export declare const RENDER_MODE_HEADER = "content-studio-mode";
+export declare const JSESSIONID_HEADER = "jsessionid";
 export declare const PORTAL_COMPONENT_ATTRIBUTE = "data-portal-component-type";
 export declare const PORTAL_REGION_ATTRIBUTE = "data-portal-region";
 export declare const FRAGMENT_CONTENTTYPE_NAME = "portal:fragment";

package/utils.js

@@ -16,6 +16,7 @@ export const FROM_XP_PARAM = '__fromxp__';
 export const XP_BASE_URL_HEADER = 'xpbaseurl';
 export const COMPONENT_SUBPATH_HEADER = 'xp-component-path';
 export const RENDER_MODE_HEADER = 'content-studio-mode';
+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';

package/views/BaseComponent.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { MetaData, PageComponent } from '../guillotine/getMetaData';
-export declare type BaseComponentProps = {
+export type BaseComponentProps = {
     component: PageComponent;
     meta: MetaData;
     common?: any;

package/views/RichTextView.d.ts

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 import { MetaData, RichTextData } from '../guillotine/getMetaData';
 import { DOMNode } from 'html-react-parser';
-export declare type ReplacerResult = JSX.Element | object | void | undefined | null | false;
-export declare type Replacer = (domNode: DOMNode, data: RichTextData, meta: MetaData, renderMacroInEditMode: boolean) => ReplacerResult;
-declare type Props = {
+export type ReplacerResult = JSX.Element | object | void | undefined | null | false;
+export type Replacer = (domNode: DOMNode, data: RichTextData, meta: MetaData, renderMacroInEditMode: boolean) => ReplacerResult;
+type Props = {
     data: RichTextData;
     meta: MetaData;
+    className?: string;
     tag?: string;
     renderMacroInEditMode?: boolean;
     customReplacer?: Replacer;
 };
 export declare function createReplacer(allData: RichTextData, meta: MetaData, renderMacroInEditMode?: boolean, customReplacer?: Replacer): (domNode: DOMNode) => ReplacerResult;
-declare const RichTextView: ({ tag, data, meta, renderMacroInEditMode, customReplacer }: Props) => JSX.Element;
+declare const RichTextView: ({ className, tag, data, meta, renderMacroInEditMode, customReplacer }: Props) => JSX.Element;
 export default RichTextView;

package/views/RichTextView.jsx

@@ -46,9 +46,9 @@ export function createReplacer(allData, meta, renderMacroInEditMode = true, cust
         return el;
     };
 }
-const RichTextView = ({ tag, data, meta, renderMacroInEditMode, customReplacer }) => {
+const RichTextView = ({ className, tag, data, meta, renderMacroInEditMode, customReplacer }) => {
     const CustomTag = tag || 'section';
-    return <CustomTag>
+    return <CustomTag className={className}>
         {data.processedHtml ? HTMLReactParser(data.processedHtml, { replace: createReplacer(data, meta, renderMacroInEditMode, customReplacer) }) : ''}
     </CustomTag>;
 };

package/views/Text.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { MetaData, TextData } from '../guillotine/getMetaData';
-declare type Props = {
+type Props = {
     meta: MetaData;
     component: TextData;
     path: string;