@enonic/nextjs-adapter 2.0.1 → 2.0.2

package/ComponentRegistry.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+import { PageComponent } from './guillotine/getMetaData';
+import { Context } from './utils';
+/**
+ *  Object that configures the handling of a particular content type. All attributes are optional (see examples below), and missing values will fall back to default behavior:
+ *          - 'query' (used in fetchContent.ts) Guillotine query for fetching content data, may also have a function that supplies guillotine variables. So, 'query' can EITHER be only a query string, OR also add a get-guillotine-variables function. In the latter case, 'query' can be an object with 'query' and 'variables' attributes, or an array where the query string is first and the get-variables function is second. Either way, the get-variables function takes two arguments: path (content path, mandatory) and context (next.js-supplied Context from getServerSideProps etc. Optional, and requires that fetchContent is called with the context, of course).
+ *          - 'props' (used in fetchContent.ts) is a function for processing props after fetching them
+ *          - 'view' (used in BasePage.tsx) is a React component: top-level content-type-specific rendering with the props first fetched from guillotine (and then optionally preprocessed with the function in 'props').
+ */
+export interface ComponentDefinition {
+    catchAll?: boolean;
+    query?: SelectedQueryMaybeVariablesFunc;
+    configQuery?: string;
+    processor?: DataProcessor;
+    view?: React.FunctionComponent<any>;
+}
+export type DataProcessor = (data: any, context?: Context, config?: any) => Promise<Record<string, any>>;
+export type VariablesGetter = (path: string, context?: Context, config?: any) => VariablesGetterResult;
+export type QueryGetter = (path: string, context?: Context, config?: any) => string;
+export type VariablesGetterResult = {
+    [variables: string]: any;
+    path: string;
+};
+export type SelectedQueryMaybeVariablesFunc = string | QueryGetter | {
+    query: string | QueryGetter;
+    variables: VariablesGetter;
+} | [
+    string | QueryGetter,
+    VariablesGetter
+];
+export declare const CATCH_ALL = "*";
+export declare class ComponentRegistry {
+    private static contentTypes;
+    private static pages;
+    private static components;
+    private static parts;
+    private static layouts;
+    private static macros;
+    private static commonQuery;
+    private static getSelector;
+    private static getType;
+    private static addType;
+    static getByComponent(component: PageComponent): ComponentDefinition | undefined;
+    static setCommonQuery(query: SelectedQueryMaybeVariablesFunc): void;
+    static getCommonQuery(): SelectedQueryMaybeVariablesFunc;
+    static addMacro(name: string, obj: ComponentDefinition): void;
+    static getMacro(name: string): ComponentDefinition | undefined;
+    static getMacros(): [string, ComponentDefinition][];
+    static getParts(): [string, ComponentDefinition][];
+    static getLayouts(): [string, ComponentDefinition][];
+    static getPages(): [string, ComponentDefinition][];
+    static getContentTypes(): [string, ComponentDefinition][];
+    static getComponents(): [string, ComponentDefinition][];
+    static addContentType(name: string, obj: ComponentDefinition): void;
+    static getContentType(name: string): ComponentDefinition | undefined;
+    static addPage(name: string, obj: ComponentDefinition): void;
+    static getPage(name: string): ComponentDefinition | undefined;
+    static addPart(name: string, obj: ComponentDefinition): void;
+    static getPart(name: string): ComponentDefinition | undefined;
+    static addLayout(name: string, obj: ComponentDefinition): void;
+    static getLayout(name: string): ComponentDefinition | undefined;
+    static addComponent(name: string, obj: ComponentDefinition): void;
+    static getComponent(name: string): ComponentDefinition | undefined;
+}

package/ComponentRegistry.js

@@ -0,0 +1,121 @@
+import { XP_COMPONENT_TYPE } from './utils';
+function toSelectorName(type) {
+    switch (type) {
+        case XP_COMPONENT_TYPE.PAGE:
+            return 'page';
+        case XP_COMPONENT_TYPE.LAYOUT:
+            return 'layout';
+        case XP_COMPONENT_TYPE.PART:
+            return 'part';
+    }
+}
+export const CATCH_ALL = '*';
+export class ComponentRegistry {
+    static getSelector(name) {
+        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;
+        }
+    }
+    static getType(selectorName, typeName, useCatchAll = true) {
+        const selector = ComponentRegistry.getSelector(selectorName);
+        let type = selector[typeName];
+        if (type) {
+            type.catchAll = false;
+        }
+        else if (!type && useCatchAll) {
+            type = selector[CATCH_ALL];
+            if (type) {
+                type.catchAll = true;
+            }
+        }
+        return type;
+    }
+    static addType(selectorName, name, obj) {
+        const selector = ComponentRegistry.getSelector(selectorName);
+        const curr = selector[name];
+        selector[name] = curr ? Object.assign(curr, obj) : obj;
+    }
+    static getByComponent(component) {
+        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;
+    }
+    static setCommonQuery(query) {
+        this.commonQuery = query;
+    }
+    static getCommonQuery() {
+        return this.commonQuery;
+    }
+    static addMacro(name, obj) {
+        return ComponentRegistry.addType('macro', name, obj);
+    }
+    static getMacro(name) {
+        return ComponentRegistry.getType('macro', name);
+    }
+    static getMacros() {
+        return Object.entries(this.macros);
+    }
+    static getParts() {
+        return Object.entries(this.parts);
+    }
+    static getLayouts() {
+        return Object.entries(this.layouts);
+    }
+    static getPages() {
+        return Object.entries(this.pages);
+    }
+    static getContentTypes() {
+        return Object.entries(this.contentTypes);
+    }
+    static getComponents() {
+        return Object.entries(this.components);
+    }
+    static addContentType(name, obj) {
+        return ComponentRegistry.addType('contentType', name, obj);
+    }
+    static getContentType(name) {
+        return ComponentRegistry.getType('contentType', name);
+    }
+    static addPage(name, obj) {
+        return ComponentRegistry.addType('page', name, obj);
+    }
+    static getPage(name) {
+        return ComponentRegistry.getType('page', name);
+    }
+    static addPart(name, obj) {
+        return ComponentRegistry.addType('part', name, obj);
+    }
+    static getPart(name) {
+        return ComponentRegistry.getType('part', name);
+    }
+    static addLayout(name, obj) {
+        return ComponentRegistry.addType('layout', name, obj);
+    }
+    static getLayout(name) {
+        return ComponentRegistry.getType('layout', name);
+    }
+    static addComponent(name, obj) {
+        return ComponentRegistry.addType('component', name, obj);
+    }
+    static getComponent(name) {
+        return ComponentRegistry.getType('component', name);
+    }
+}
+ComponentRegistry.contentTypes = {};
+ComponentRegistry.pages = {};
+ComponentRegistry.components = {};
+ComponentRegistry.parts = {};
+ComponentRegistry.layouts = {};
+ComponentRegistry.macros = {};

package/UrlProcessor.d.ts

@@ -0,0 +1,25 @@
+import { ImageData, LinkData, MetaData } from './guillotine/getMetaData';
+export declare class UrlProcessor {
+    static IMG_TAG: string;
+    static LINK_TAG: string;
+    static MACRO_TAG: string;
+    static IMG_ATTR: string;
+    static LINK_ATTR: string;
+    static MACRO_ATTR: string;
+    private static IMG_ATMT_REGEXP;
+    private static endSlashPattern;
+    private static startSlashPattern;
+    private static localhostPattern;
+    private static siteKey;
+    static process(url: string, meta: MetaData, serverSide?: boolean): string;
+    static setSiteKey(key: string): void;
+    static isMediaLink(ref: string, linkData: LinkData[]): boolean;
+    static isContentImage(ref: string, linkData: ImageData[]): boolean;
+    static processSrcSet(srcset: string, meta: MetaData): string;
+    private static stripApiUrl;
+    private static isAttachmentUrl;
+    private static startsWithHash;
+    private static isRelative;
+    private static getApiUrl;
+}
+export declare const getUrl: (url: string, meta: MetaData, serverSide?: boolean) => string;

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

@@ -1,25 +1,7 @@
-import {commonChars, fixDoubleSlashes, getLocaleProjectConfigs, RENDER_MODE} from './utils';
-import {ImageData, LinkData, MetaData} from './guillotine/getMetaData';
-import {addBasePath} from 'next/dist/client/add-base-path';
-
+import { commonChars, fixDoubleSlashes, getLocaleProjectConfigs, RENDER_MODE } from './utils';
+import { addBasePath } from 'next/dist/client/add-base-path';
 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/;
-
-    private static siteKey: string;
-
-    public static process(url: string, meta: MetaData, serverSide = false): string {
+    static process(url, meta, serverSide = false) {
         if (this.startsWithHash(url) || !meta || (this.isAttachmentUrl(url)) && meta.renderMode === RENDER_MODE.NEXT) {
             // do not process if:
             // - url starts with #
@@ -27,11 +9,10 @@ export class UrlProcessor {
             // - attachment urls in NEXT mode
             return url;
         }
-
-        let result: string;
+        let result;
         const apiUrl = this.getApiUrl(meta);
         const strippedUrl = this.stripApiUrl(url, apiUrl);
-        const baseUrl = meta?.baseUrl && meta?.baseUrl !== '/' ? meta.baseUrl : '';
+        const baseUrl = (meta === null || meta === void 0 ? void 0 : meta.baseUrl) && (meta === null || meta === void 0 ? void 0 : meta.baseUrl) !== '/' ? meta.baseUrl : '';
         if (meta.renderMode === RENDER_MODE.NEXT) {
             // only add basePath and locale in next mode
             result = `/${strippedUrl}`;
@@ -43,26 +24,24 @@ export class UrlProcessor {
                 // no need for baseurl and basepath on server
                 result = addBasePath(`${baseUrl}${result}`);
             }
-        } else {
+        }
+        else {
             result = `${baseUrl}/${strippedUrl}`;
         }
-
         return fixDoubleSlashes(result);
     }
-
-    public static setSiteKey(key: string): void {
+    static setSiteKey(key) {
         this.siteKey = key;
     }
-
-    public static isMediaLink(ref: string, linkData: LinkData[]): boolean {
-        return linkData.find(data => data.ref === ref)?.media !== null;
+    static isMediaLink(ref, linkData) {
+        var _a;
+        return ((_a = linkData.find(data => data.ref === ref)) === null || _a === void 0 ? void 0 : _a.media) !== null;
     }
-
-    public static isContentImage(ref: string, linkData: ImageData[]): boolean {
-        return linkData.find(data => data.ref === ref)?.image !== null;
+    static isContentImage(ref, linkData) {
+        var _a;
+        return ((_a = linkData.find(data => data.ref === ref)) === null || _a === void 0 ? void 0 : _a.image) !== null;
     }
-
-    public static processSrcSet(srcset: string, meta: MetaData): string {
+    static processSrcSet(srcset, meta) {
         return srcset.split(/, */g).map(src => {
             const srcParts = src.trim().split(' ');
             switch (srcParts.length) {
@@ -76,8 +55,7 @@ export class UrlProcessor {
             }
         }).join(', ');
     }
-
-    private static stripApiUrl(url: string, apiUrl: string): string {
+    static stripApiUrl(url, apiUrl) {
         // 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');
@@ -85,31 +63,35 @@ export class UrlProcessor {
         const remaining = common.length > 0 ? normalUrl.substring(common.length) : normalUrl;
         return (remaining.length > 0 && remaining.charAt(0) === '/') ? remaining.substring(1) : remaining;
     }
-
-    private static isAttachmentUrl(url: string): boolean {
+    static isAttachmentUrl(url) {
         return this.IMG_ATMT_REGEXP.test(url);
     }
-
-    private static startsWithHash(url: string): boolean {
-        return url?.charAt(0) == '#';
+    static startsWithHash(url) {
+        return (url === null || url === void 0 ? void 0 : url.charAt(0)) == '#';
     }
-
-    private static isRelative(url: string): boolean {
+    static isRelative(url) {
         return !/^(?:ht|f)tps?:\/\/[^ :\r\n\t]+/.test(url);
     }
-
-    private static getApiUrl(meta: MetaData) {
-        let combinedUrl = meta.apiUrl?.replace(this.endSlashPattern, '') || '';
-        if (this.siteKey?.length) {
+    static getApiUrl(meta) {
+        var _a, _b;
+        let combinedUrl = ((_a = meta.apiUrl) === null || _a === void 0 ? void 0 : _a.replace(this.endSlashPattern, '')) || '';
+        if ((_b = this.siteKey) === null || _b === void 0 ? void 0 : _b.length) {
             combinedUrl += '/' + this.siteKey.replace(this.startSlashPattern, '');
         }
         return combinedUrl;
     }
 }
-
+UrlProcessor.IMG_TAG = 'img';
+UrlProcessor.LINK_TAG = 'a';
+UrlProcessor.MACRO_TAG = 'editor-macro';
+UrlProcessor.IMG_ATTR = 'data-image-ref';
+UrlProcessor.LINK_ATTR = 'data-link-ref';
+UrlProcessor.MACRO_ATTR = 'data-macro-ref';
+UrlProcessor.IMG_ATMT_REGEXP = /_\/image\/|_\/attachment\//;
+UrlProcessor.endSlashPattern = /\/+$/;
+UrlProcessor.startSlashPattern = /^\/+/;
+UrlProcessor.localhostPattern = /localhost/;
 // Actual site is going to be set in fetchContent method, but set a default fallback here too
 const defaultConfig = getLocaleProjectConfigs().default;
 UrlProcessor.setSiteKey(defaultConfig.site);
-
-export const getUrl: (url: string, meta: MetaData, serverSide?: boolean) => string = UrlProcessor.process.bind(UrlProcessor);
-
+export const getUrl = UrlProcessor.process.bind(UrlProcessor);

package/baseMappings.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,5 @@
-import {ComponentRegistry} from './ComponentRegistry';
-import {FRAGMENT_CONTENTTYPE_NAME, XP_COMPONENT_TYPE} from './utils';
+import { ComponentRegistry } from './ComponentRegistry';
+import { FRAGMENT_CONTENTTYPE_NAME, XP_COMPONENT_TYPE } from './utils';
 import FragmentView from './views/Fragment';
 import BasePage from './views/BasePage';
 import BasePart from './views/BasePart';
@@ -7,40 +7,30 @@ import BaseLayout from './views/BaseLayout';
 import TextView from './views/Text';
 import DefaultMacro from './views/macros/DefaultMacro';
 import DisableMacro from './views/macros/DisableMacro';
-import {getShortcutQuery} from './query/Shortcut';
-
+import { getShortcutQuery } from './query/Shortcut';
 // Base Content Types
-
 ComponentRegistry.addContentType(FRAGMENT_CONTENTTYPE_NAME, {
     view: FragmentView,
 });
-
 ComponentRegistry.addContentType('base:shortcut', {
     query: getShortcutQuery,
 });
-
 // Base Components
-
 ComponentRegistry.addComponent(XP_COMPONENT_TYPE.PAGE, {
     view: BasePage,
 });
-
 ComponentRegistry.addComponent(XP_COMPONENT_TYPE.PART, {
     view: BasePart,
 });
-
 ComponentRegistry.addComponent(XP_COMPONENT_TYPE.LAYOUT, {
     view: BaseLayout,
 });
-
 ComponentRegistry.addComponent(XP_COMPONENT_TYPE.FRAGMENT, {
     view: FragmentView,
 });
-
 ComponentRegistry.addComponent(XP_COMPONENT_TYPE.TEXT, {
     view: TextView,
 });
-
 // Macro mappings
 ComponentRegistry.addMacro('system:embed', {
     view: DefaultMacro,

package/guillotine/fetchContent.d.ts

@@ -0,0 +1,49 @@
+import { MetaData, PageComponent } from './getMetaData';
+import { ContentPathItem, Context, LocaleProjectConfig } from '../utils';
+import { GetServerSidePropsResult, GetStaticPropsResult } from 'next';
+type Result = {
+    error?: {
+        code: string;
+        message: string;
+    } | null;
+};
+export type GuillotineResult = Result & {
+    [dataKey: string]: any;
+};
+export type FetchContentResult = Result & {
+    data: Record<string, any> | null;
+    common: Record<string, any> | null;
+    meta: MetaData;
+    page: PageComponent | null;
+};
+/**
+ * Sends one query to the guillotine API and asks for content type, then uses the type to select a second query and variables, which is sent to the API and fetches content data.
+ * @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 type ContentFetcher = (contentPath: string | string[], context?: Context) => Promise<FetchContentResult>;
+export type ContentApiBaseBody = {
+    query?: string;
+    variables?: {
+        path?: string;
+        [key: string]: string | number | undefined;
+    };
+};
+/** Generic fetch */
+export declare const fetchFromApi: (apiUrl: string, body: ContentApiBaseBody, projectConfig: LocaleProjectConfig, headers?: {}, method?: string) => Promise<any>;
+/** Guillotine-specialized fetch, using the generic fetch above */
+export declare const fetchGuillotine: (contentApiUrl: string, body: ContentApiBaseBody, projectConfig: LocaleProjectConfig, 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
+ * Sends one query to the guillotine API and asks for content type, then uses the type to select a second query and variables, which is sent to the API and fetches content data.
+ * @param contentPath string or string array: local (site-relative) path to a content available on the API (by XP _path - obtainable by running contentPath through getXpPath). Pre-split into string array, or already a slash-delimited string.
+ * @param context object from Next, contains .query info
+ * @returns FetchContentResult object: {data?: T, error?: {code, message}}
+ */
+export declare const fetchContent: ContentFetcher;
+export declare function createResponse(props: FetchContentResult, context?: Context, isStatic?: true): GetStaticPropsResult<FetchContentResult>;
+export declare function createResponse(props: FetchContentResult, context?: Context, isStatic?: false): GetServerSidePropsResult<FetchContentResult>;
+export declare function fetchContentPathsForAllLocales(path: string, query?: string, countPerLocale?: number): Promise<ContentPathItem[]>;
+export declare function fetchContentPathsForLocale(path: string, config: LocaleProjectConfig, query?: string, count?: number): Promise<ContentPathItem[]>;
+export {};