@enonic/nextjs-adapter 0.13.0 → 1.0.0-RC1

package/UrlProcessor.js

@@ -1,4 +1,5 @@
 import { commonChars, RENDER_MODE, SITE_KEY } from './utils';
+import { useRouter } from 'next/router';
 export class UrlProcessor {
     static process(url, meta) {
         let result;
@@ -9,7 +10,17 @@ export class UrlProcessor {
         else {
             const apiUrl = this.getApiUrl(meta);
             const strippedUrl = this.stripApiUrl(url, apiUrl);
-            result = ((meta === null || meta === void 0 ? void 0 : meta.baseUrl) || '') + strippedUrl;
+            let basePath;
+            // only add basePath in next
+            if (meta.renderMode === RENDER_MODE.NEXT) {
+                try {
+                    basePath = useRouter().basePath;
+                }
+                catch (e) {
+                    console.error('Error getting basePath from nextjs router', e);
+                }
+            }
+            result = (basePath && basePath !== '/' ? basePath : '') + ((meta === null || meta === void 0 ? void 0 : meta.baseUrl) || '') + strippedUrl;
         }
         return result;
     }
@@ -24,6 +35,20 @@ export class UrlProcessor {
         var _a;
         return ((_a = linkData.find(data => data.ref === ref)) === null || _a === void 0 ? void 0 : _a.image) !== null;
     }
+    static processSrcSet(srcset, meta) {
+        return srcset.split(/, */g).map(src => {
+            const srcParts = src.trim().split(' ');
+            switch (srcParts.length) {
+                case 1:
+                    return this.process(src, meta);
+                case 2:
+                    return this.process(srcParts[0], meta) + ' ' + srcParts[1];
+                default:
+                    console.warn('Can not process image srcset: ' + src);
+                    return src;
+            }
+        }).join(', ');
+    }
     static stripApiUrl(url, apiUrl) {
         // normalise localhost-127.0.0.1 if present in urls
         const normalUrl = url.replace(this.localhostPattern, '127.0.0.1');

package/guillotine/fetchContent.d.ts

@@ -1,20 +1,10 @@
 /// <reference types="node" />
 /// <reference types="node" />
 import { MetaData, PageComponent } from './getMetaData';
-import { RENDER_MODE, XP_REQUEST_TYPE } from '../utils';
-import { ComponentRegistry } from '../ComponentRegistry';
 import { ParsedUrlQuery } from 'node:querystring';
 import { type GetServerSidePropsContext } from 'next';
 import { IncomingMessage } from 'http';
 import { type NextApiRequestCookies } from 'next/dist/server/api-utils';
-export type AdapterConstants = {
-    APP_NAME: string;
-    APP_NAME_DASHED: string;
-    SITE_KEY: string;
-    getXPRequestType: (context?: Context) => XP_REQUEST_TYPE;
-    getRenderMode: (context?: Context) => RENDER_MODE;
-    getSingleComponentPath: (context?: Context) => string | undefined;
-};
 type Result = {
     error?: {
         code: string;
@@ -30,9 +20,6 @@ export type FetchContentResult = Result & {
     meta: MetaData;
     page: PageComponent | null;
 };
-type FetcherConfig<T extends AdapterConstants> = T & {
-    componentRegistry: typeof ComponentRegistry;
-};
 export interface ServerSideParams extends ParsedUrlQuery {
     contentPath?: string[];
     mode?: string;
@@ -63,14 +50,7 @@ export type ContentApiBaseBody = {
 /** Generic fetch */
 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, 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.
- * @param componentRegistry ComponentRegistry object from ComponentRegistry.ts, holding user type mappings that are set in typesRegistration.ts file
- * @returns ContentFetcher
- */
-export declare const buildContentFetcher: <T extends AdapterConstants>(config: FetcherConfig<T>) => ContentFetcher;
+export declare const fetchGuillotine: (contentApiUrl: string, body: ContentApiBaseBody, headers?: {}) => Promise<GuillotineResult>;
 /**
  * Default fetchContent function, built with params from imports.
  * It runs custom content-type-specific guillotine calls against an XP guillotine endpoint, returns content data, error and some meta data

package/guillotine/fetchContent.js

@@ -8,7 +8,7 @@ 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, JSESSIONID_HEADER, 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, getJsessionHeaders, getRenderMode, 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 { 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';
@@ -64,7 +64,8 @@ export const fetchFromApi = (apiUrl, body, headers, method = 'POST') => __awaite
     return json;
 });
 /** Guillotine-specialized fetch, using the generic fetch above */
-export const fetchGuillotine = (contentApiUrl, body, xpContentPath, headers) => __awaiter(void 0, void 0, void 0, function* () {
+export const fetchGuillotine = (contentApiUrl, body, headers) => __awaiter(void 0, void 0, void 0, function* () {
+    var _b;
     if (typeof body.query !== 'string' || !body.query.trim()) {
         return {
             error: {
@@ -73,6 +74,8 @@ export const fetchGuillotine = (contentApiUrl, body, xpContentPath, headers) =>
             },
         };
     }
+    const path = (_b = body.variables) === null || _b === void 0 ? void 0 : _b.path;
+    const pathMessage = path ? `(path = ${JSON.stringify(path)})` : '';
     const result = yield fetchFromApi(contentApiUrl, body, headers)
         .then(json => {
         let errors = (json || {}).errors;
@@ -80,7 +83,7 @@ export const fetchGuillotine = (contentApiUrl, body, xpContentPath, headers) =>
             if (!Array.isArray(errors)) {
                 errors = [errors];
             }
-            console.warn(`${errors.length} error(s) when trying to fetch data (path = ${JSON.stringify(xpContentPath)}):`);
+            console.warn(`${errors.length} error(s) when trying to fetch data ${pathMessage}:`);
             errors.forEach(error => {
                 console.error(error);
             });
@@ -96,7 +99,7 @@ export const fetchGuillotine = (contentApiUrl, body, xpContentPath, headers) =>
         return json.data;
     })
         .catch((err) => {
-        console.warn(`Client-side error when trying to fetch data (path = ${JSON.stringify(xpContentPath)})`, err);
+        console.warn(`Client-side error when trying to fetch data ${pathMessage}`, err);
         try {
             return { error: JSON.parse(err.message) };
         }
@@ -108,20 +111,20 @@ export const fetchGuillotine = (contentApiUrl, body, xpContentPath, headers) =>
 });
 // /////////////////////////////////////////////////////////////////////////////// Specific fetch wrappers:
 const fetchMetaData = (contentApiUrl, xpContentPath, headers) => __awaiter(void 0, void 0, void 0, function* () {
-    var _b;
+    var _c;
     const body = {
         query: getMetaQuery(pageFragmentQuery()),
         variables: {
             path: xpContentPath,
         },
     };
-    const metaResult = yield fetchGuillotine(contentApiUrl, body, xpContentPath, headers);
+    const metaResult = yield fetchGuillotine(contentApiUrl, body, headers);
     if (metaResult.error) {
         return metaResult;
     }
     else {
         return {
-            meta: (_b = metaResult === null || metaResult === void 0 ? void 0 : metaResult.guillotine) === null || _b === void 0 ? void 0 : _b.get,
+            meta: (_c = metaResult === null || metaResult === void 0 ? void 0 : metaResult.guillotine) === null || _c === void 0 ? void 0 : _c.get,
         };
     }
 });
@@ -130,7 +133,7 @@ const fetchContentData = (contentApiUrl, xpContentPath, query, variables, header
     if (variables && Object.keys(variables).length > 0) {
         body.variables = variables;
     }
-    const contentResults = yield fetchGuillotine(contentApiUrl, body, xpContentPath, headers);
+    const contentResults = yield fetchGuillotine(contentApiUrl, body, headers);
     if (contentResults.error) {
         return contentResults;
     }
@@ -365,7 +368,7 @@ function getComponentConfig(cmp) {
     const cmpData = cmp && cmp[cmp.type];
     return cmpData && 'config' in cmpData ? cmpData.config : undefined;
 }
-function collectComponentDescriptors(components, componentRegistry, requestedComponentPath, xpContentPath, context) {
+function collectComponentDescriptors(components, componentRegistry, xpContentPath, context) {
     const descriptors = [];
     for (const cmp of (components || [])) {
         processComponentConfig(APP_NAME, APP_NAME_DASHED, cmp);
@@ -388,7 +391,7 @@ function collectComponentDescriptors(components, componentRegistry, requestedCom
         }
         else {
             // look for parts inside fragments
-            const fragPartDescs = collectComponentDescriptors(cmp.fragment.fragment.components, componentRegistry, requestedComponentPath, xpContentPath, context);
+            const fragPartDescs = collectComponentDescriptors(cmp.fragment.fragment.components, componentRegistry, xpContentPath, context);
             if (fragPartDescs.length) {
                 descriptors.push(...fragPartDescs);
             }
@@ -453,11 +456,15 @@ function getQueryAndVariables(type, path, selectedQuery, context, config) {
         };
     }
 }
-function createPageData(contentType, components) {
+function createPageData(contentType, components, componentPath) {
     let page;
-    if (components) {
+    if (components && !componentPath) {
         page = buildPage(contentType, components);
     }
+    else {
+        // Don't build page for single component
+        page = null;
+    }
     return page;
 }
 function createMetaData(contentType, contentPath, requestType, renderMode, apiUrl, baseUrl, requestedComponentPath, pageCmp, components = []) {
@@ -483,10 +490,13 @@ function createMetaData(contentType, contentPath, requestType, renderMode, apiUr
     if ((typeDef === null || typeDef === void 0 ? void 0 : 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 in case it's not implemented)
+        // always render a page if there is a descriptor (show missing if not implemented)
         meta.canRender = true;
-        meta.catchAll = false; // catchAll only refers to content type catch-all
     }
     else if (typeDef === null || typeDef === void 0 ? void 0 : typeDef.view) {
         meta.canRender = true;
@@ -515,40 +525,76 @@ function errorResponse(code = '500', message = 'Unknown error', requestType, ren
         },
     };
 }
+function restrictComponentsToPath(contentType, components, componentPath) {
+    if (!componentPath || !(components === null || components === void 0 ? void 0 : components.length)) {
+        return components || [];
+    }
+    // filter components to the requested one only
+    const component = components.find(cmp => {
+        return cmp.path === componentPath;
+    });
+    if (!component) {
+        return [];
+    }
+    let result = [component];
+    if (component.type !== XP_COMPONENT_TYPE.LAYOUT) {
+        // remember to include all parent layouts too !
+        const cmpPath = parseComponentPath(contentType, component.path);
+        for (let i = cmpPath.length - 2; i >= 0; i--) {
+            const parentPath = cmpPath[i];
+            const parentCmp = components.find(cmp => cmp.path === `/${parentPath.region}/${parentPath.index}`);
+            if (parentCmp) {
+                result.unshift(parentCmp);
+            }
+        }
+    }
+    else {
+        // It's a layout, include child components
+        const childCmps = components.filter(cmp => cmp.path !== component.path && cmp.path.startsWith(component.path));
+        if (childCmps.length) {
+            result = result.concat(childCmps);
+        }
+    }
+    return result;
+}
+const COMPONENT_PATH_KEY = /\/?_\/component/; // first slash is optional for root components
+const getContentAndComponentPaths = (requestPath, context) => {
+    let contentPath, componentPath;
+    if (COMPONENT_PATH_KEY.test(requestPath)) {
+        [contentPath, componentPath] = requestPath.split(COMPONENT_PATH_KEY);
+    }
+    else {
+        contentPath = requestPath;
+    }
+    return [contentPath, componentPath];
+};
 // /////////////////////////////  ENTRY 1 - THE BUILDER:
 /**
  * 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.
- * @param componentRegistry ComponentRegistry object from ComponentRegistry.ts, holding user type mappings that are set in typesRegistration.ts file
+ * @param config object containing ComponentRegistry as well as constants imported from enonic-connecion-config.js
  * @returns ContentFetcher
  */
-export const buildContentFetcher = (config) => {
-    const { APP_NAME, APP_NAME_DASHED, getXPRequestType, getRenderMode, getSingleComponentPath, componentRegistry, } = config;
+const buildContentFetcher = (config) => {
+    const { APP_NAME, APP_NAME_DASHED, componentRegistry, } = config;
     return (contentPathOrArray, context) => __awaiter(void 0, void 0, void 0, function* () {
-        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}`,
-            };
-        }
+        var _a, _b;
+        const headers = getJsessionHeaders(context);
         const xpBaseUrl = getXpBaseUrl(context);
         const contentApiUrl = getContentApiUrl(context);
-        const requestType = getXPRequestType(context);
         const renderMode = getRenderMode(context);
-        let contentPath;
+        let requestType = XP_REQUEST_TYPE.TYPE;
         try {
-            const siteRelativeContentPath = getCleanContentPathArrayOrThrow400(contentPathOrArray);
-            let requestedComponentPath;
-            if (requestType === XP_REQUEST_TYPE.COMPONENT) {
-                requestedComponentPath = getSingleComponentPath(context);
+            const requestContentPath = getCleanContentPathArrayOrThrow400(contentPathOrArray);
+            const [siteRelativeContentPath, componentPath] = getContentAndComponentPaths(requestContentPath, context);
+            if (componentPath) {
+                // set component request type because url contains component path
+                requestType = XP_REQUEST_TYPE.COMPONENT;
             }
             // /////////////  FIRST GUILLOTINE CALL FOR METADATA     /////////////////
             const metaResult = yield fetchMetaData(contentApiUrl, '${site}/' + siteRelativeContentPath, headers);
             // ///////////////////////////////////////////////////////////////////////
-            const { type, components, _path } = metaResult.meta || {};
-            contentPath = _path || '';
+            const { _path, type } = metaResult.meta || {};
+            const contentPath = _path || siteRelativeContentPath;
             if (metaResult.error) {
                 console.error(metaResult.error);
                 return errorResponse(metaResult.error.code, metaResult.error.message, requestType, renderMode, contentApiUrl, xpBaseUrl, contentPath);
@@ -565,6 +611,14 @@ export const buildContentFetcher = (config) => {
                     type === PAGE_TEMPLATE_FOLDER)) {
                 return errorResponse('404', `Content type [${type}] is not accessible in ${renderMode} mode`, requestType, renderMode, contentApiUrl, xpBaseUrl, contentPath);
             }
+            const components = restrictComponentsToPath(type, metaResult.meta.components, componentPath);
+            if (componentPath && !components.length) {
+                // component was not found
+                return errorResponse('404', `Component ${componentPath} was not found`, requestType, renderMode, contentApiUrl, xpBaseUrl, contentPath);
+            }
+            if (requestType !== XP_REQUEST_TYPE.COMPONENT && components.length > 0) {
+                requestType = XP_REQUEST_TYPE.PAGE;
+            }
             // //////////////////////////////////////////////////  Content type established. Proceed to data call:
             const allDescriptors = [];
             // Add the content type query at all cases
@@ -573,14 +627,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, (_b = pageCmp === null || pageCmp === void 0 ? void 0 : pageCmp.page) === null || _b === void 0 ? void 0 : _b.config);
+            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);
             if (contentQueryAndVars) {
                 allDescriptors.push({
                     type: contentTypeDef,
                     queryAndVariables: contentQueryAndVars,
                 });
             }
-            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);
+            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);
             if (commonQueryAndVars) {
                 allDescriptors.push({
                     type: contentTypeDef,
@@ -592,7 +646,7 @@ export const buildContentFetcher = (config) => {
                     processComponentConfig(APP_NAME, APP_NAME_DASHED, cmp);
                 }
                 // Collect component queries if defined
-                const componentDescriptors = collectComponentDescriptors(components, componentRegistry, requestedComponentPath, contentPath, context);
+                const componentDescriptors = collectComponentDescriptors(components, componentRegistry, contentPath, context);
                 if (componentDescriptors.length) {
                     allDescriptors.push(...componentDescriptors);
                 }
@@ -642,14 +696,13 @@ export const buildContentFetcher = (config) => {
                 }
             }
             const page = createPageData(type, components);
-            const meta = createMetaData(type, siteRelativeContentPath, requestType, renderMode, contentApiUrl, xpBaseUrl, requestedComponentPath, page, components);
+            const meta = createMetaData(type, siteRelativeContentPath, requestType, renderMode, contentApiUrl, xpBaseUrl, componentPath, page, components);
             return {
                 data: contentData,
                 common,
                 meta,
-                page: page || null,
+                page,
             };
-            // ///////////////////////////////////////////////////////////  Catch
         }
         catch (e) {
             console.error(e);
@@ -663,7 +716,7 @@ export const buildContentFetcher = (config) => {
                     message: e.message,
                 };
             }
-            return errorResponse(error.code, error.message, requestType, renderMode, contentApiUrl, xpBaseUrl, contentPath);
+            return errorResponse(error.code, error.message, requestType, renderMode, contentApiUrl, xpBaseUrl, contentPathOrArray.toString());
         }
     });
 };

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/nextjs-adapter",
-  "version": "0.13.0",
+  "version": "1.0.0-RC1",
   "license": "Apache-2.0",
   "main": "index.js",
   "publishConfig": {
@@ -8,26 +8,27 @@
   },
   "scripts": {
     "copy": "npx --yes cpy-cli package.json README.md dist",
-    "build": "tsc",
-    "lint": "eslint --quiet .",
-    "lint:fix": "eslint --fix ."
+    "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"
   },
   "dependencies": {
-    "html-react-parser": "^3.0.7",
-    "next": "^13.1.2",
+    "html-react-parser": "^3.0.11",
+    "lru-cache": "^7.17.0",
+    "next": "^13.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "unescape": "^1.0.1"
   },
   "devDependencies": {
     "@enonic/eslint-config": "^1.1.0",
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.48.1",
-    "eslint": "^8.32.0",
-    "eslint-plugin-react": "^7.32.0",
-    "typescript": "^4.9.4"
+    "@types/node": "^18.14.6",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "eslint": "^8.35.0",
+    "eslint-plugin-react": "^7.32.2",
+    "typescript": "^4.9.5"
   }
 }