@enonic/nextjs-adapter 2.0.0-B3 → 2.0.1

package/src/ComponentRegistry.ts

@@ -0,0 +1,189 @@
+import {PageComponent} from './guillotine/getMetaData';
+import {Context, XP_COMPONENT_TYPE} 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; // will be set automatically depending on the binding
+    query?: SelectedQueryMaybeVariablesFunc,
+    configQuery?: string,
+    processor?: DataProcessor,
+    view?: React.FunctionComponent<any>
+}
+
+type SelectorName = 'contentType' | 'page' | 'component' | 'part' | 'layout' | 'macro';
+
+function toSelectorName(type: XP_COMPONENT_TYPE): SelectorName | undefined {
+    switch (type) {
+    case XP_COMPONENT_TYPE.PAGE:
+        return 'page';
+    case XP_COMPONENT_TYPE.LAYOUT:
+        return 'layout';
+    case XP_COMPONENT_TYPE.PART:
+        return 'part';
+    }
+}
+
+interface ComponentDictionary {
+    [type: string]: ComponentDefinition;
+}
+
+// NB! Always return null or empty object from processor for next is unable to serialize undefined
+export type DataProcessor = (data: any, context?: Context, config?: any) => Promise<Record<string, any>>;
+
+// TODO: also access as arguments: dataAsJson, pageAsJson, configAsJson from the first (meta) call here?
+//   Another option could be to let the component or page controller pass those values to NextJS by a header
+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 const CATCH_ALL = '*';
+
+export class ComponentRegistry {
+
+    private static contentTypes: ComponentDictionary = {};
+    private static pages: ComponentDictionary = {};
+    private static components: ComponentDictionary = {};
+    private static parts: ComponentDictionary = {};
+    private static layouts: ComponentDictionary = {};
+    private static macros: ComponentDictionary = {};
+    private static commonQuery: SelectedQueryMaybeVariablesFunc;
+
+    private static getSelector(name: SelectorName): ComponentDictionary {
+        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;
+        }
+    }
+
+    private static getType(selectorName: SelectorName, typeName: string, useCatchAll = true): ComponentDefinition | undefined {
+        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;
+    }
+
+    private static addType(selectorName: SelectorName, name: string, obj: ComponentDefinition): void {
+        const selector = ComponentRegistry.getSelector(selectorName);
+        const curr = selector[name];
+        selector[name] = curr ? Object.assign(curr, obj) : obj;
+    }
+
+    public static getByComponent(component: PageComponent): ComponentDefinition | undefined {
+        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;
+    }
+
+    public static setCommonQuery(query: SelectedQueryMaybeVariablesFunc): void {
+        this.commonQuery = query;
+    }
+
+    public static getCommonQuery(): SelectedQueryMaybeVariablesFunc {
+        return this.commonQuery;
+    }
+
+    public static addMacro(name: string, obj: ComponentDefinition): void {
+        return ComponentRegistry.addType('macro', name, obj);
+    }
+
+    public static getMacro(name: string): ComponentDefinition | undefined {
+        return ComponentRegistry.getType('macro', name);
+    }
+
+    public static getMacros(): [string, ComponentDefinition][] {
+        return Object.entries(this.macros);
+    }
+
+    public static getParts(): [string, ComponentDefinition][] {
+        return Object.entries(this.parts);
+    }
+
+    public static getLayouts(): [string, ComponentDefinition][] {
+        return Object.entries(this.layouts);
+    }
+
+    public static getPages(): [string, ComponentDefinition][] {
+        return Object.entries(this.pages);
+    }
+
+    public static getContentTypes(): [string, ComponentDefinition][] {
+        return Object.entries(this.contentTypes);
+    }
+
+    public static getComponents(): [string, ComponentDefinition][] {
+        return Object.entries(this.components);
+    }
+
+    public static addContentType(name: string, obj: ComponentDefinition): void {
+        return ComponentRegistry.addType('contentType', name, obj);
+    }
+
+    public static getContentType(name: string): ComponentDefinition | undefined {
+        return ComponentRegistry.getType('contentType', name);
+    }
+
+    public static addPage(name: string, obj: ComponentDefinition): void {
+        return ComponentRegistry.addType('page', name, obj);
+    }
+
+    public static getPage(name: string): ComponentDefinition | undefined {
+        return ComponentRegistry.getType('page', name);
+    }
+
+    public static addPart(name: string, obj: ComponentDefinition): void {
+        return ComponentRegistry.addType('part', name, obj);
+    }
+
+    public static getPart(name: string): ComponentDefinition | undefined {
+        return ComponentRegistry.getType('part', name);
+    }
+
+    public static addLayout(name: string, obj: ComponentDefinition): void {
+        return ComponentRegistry.addType('layout', name, obj);
+    }
+
+    public static getLayout(name: string): ComponentDefinition | undefined {
+        return ComponentRegistry.getType('layout', name);
+    }
+
+    public static addComponent(name: string, obj: ComponentDefinition): void {
+        return ComponentRegistry.addType('component', name, obj);
+    }
+
+    public static getComponent(name: string): ComponentDefinition | undefined {
+        return ComponentRegistry.getType('component', name);
+    }
+}

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

@@ -1,7 +1,25 @@
-import { commonChars, fixDoubleSlashes, getLocaleProjectConfigs, RENDER_MODE } from './utils';
-import { addBasePath } from 'next/dist/client/add-base-path';
+import {commonChars, fixDoubleSlashes, getLocaleProjectConfigs, RENDER_MODE} from './utils';
+import {ImageData, LinkData, MetaData} from './guillotine/getMetaData';
+import {addBasePath} from 'next/dist/client/add-base-path';
+
 export class UrlProcessor {
-    static process(url, meta, serverSide = false) {
+
+    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 {
         if (this.startsWithHash(url) || !meta || (this.isAttachmentUrl(url)) && meta.renderMode === RENDER_MODE.NEXT) {
             // do not process if:
             // - url starts with #
@@ -9,10 +27,11 @@ export class UrlProcessor {
             // - attachment urls in NEXT mode
             return url;
         }
-        let result;
+
+        let result: string;
         const apiUrl = this.getApiUrl(meta);
         const strippedUrl = this.stripApiUrl(url, apiUrl);
-        const baseUrl = (meta === null || meta === void 0 ? void 0 : meta.baseUrl) && (meta === null || meta === void 0 ? void 0 : meta.baseUrl) !== '/' ? meta.baseUrl : '';
+        const baseUrl = meta?.baseUrl && meta?.baseUrl !== '/' ? meta.baseUrl : '';
         if (meta.renderMode === RENDER_MODE.NEXT) {
             // only add basePath and locale in next mode
             result = `/${strippedUrl}`;
@@ -24,24 +43,26 @@ export class UrlProcessor {
                 // no need for baseurl and basepath on server
                 result = addBasePath(`${baseUrl}${result}`);
             }
-        }
-        else {
+        } else {
             result = `${baseUrl}/${strippedUrl}`;
         }
+
         return fixDoubleSlashes(result);
     }
-    static setSiteKey(key) {
+
+    public static setSiteKey(key: string): void {
         this.siteKey = key;
     }
-    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 isMediaLink(ref: string, linkData: LinkData[]): boolean {
+        return linkData.find(data => data.ref === ref)?.media !== 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 isContentImage(ref: string, linkData: ImageData[]): boolean {
+        return linkData.find(data => data.ref === ref)?.image !== null;
     }
-    static processSrcSet(srcset, meta) {
+
+    public static processSrcSet(srcset: string, meta: MetaData): string {
         return srcset.split(/, */g).map(src => {
             const srcParts = src.trim().split(' ');
             switch (srcParts.length) {
@@ -55,43 +76,40 @@ export class UrlProcessor {
             }
         }).join(', ');
     }
-    static stripApiUrl(url, apiUrl) {
+
+    private static stripApiUrl(url: string, apiUrl: string): string {
         // 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 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 isAttachmentUrl(url) {
+
+    private static isAttachmentUrl(url: string): boolean {
         return this.IMG_ATMT_REGEXP.test(url);
     }
-    static startsWithHash(url) {
-        return (url === null || url === void 0 ? void 0 : url.charAt(0)) == '#';
+
+    private static startsWithHash(url: string): boolean {
+        return url?.charAt(0) == '#';
     }
-    static isRelative(url) {
+
+    private static isRelative(url: string): boolean {
         return !/^(?:ht|f)tps?:\/\/[^ :\r\n\t]+/.test(url);
     }
-    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) {
+
+    private static getApiUrl(meta: MetaData) {
+        let combinedUrl = meta.apiUrl?.replace(this.endSlashPattern, '') || '';
+        if (this.siteKey?.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 = UrlProcessor.process.bind(UrlProcessor);
+
+export const getUrl: (url: string, meta: MetaData, serverSide?: boolean) => string = UrlProcessor.process.bind(UrlProcessor);
+

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

@@ -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,30 +7,40 @@ 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,