@enonic/nextjs-adapter 0.0.1-alpha.3 → 0.0.1-alpha.4

package/ComponentRegistry.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import { PageComponent } from './guillotine/getMetaData';
+import { Context } from './guillotine/fetchContent';
+/**
+ *  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 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 VariablesGetterResult = {
+    [variables: string]: any;
+    path: string;
+};
+export declare type SelectedQueryMaybeVariablesFunc = string | {
+    query: string;
+    variables: VariablesGetter;
+} | [
+    string,
+    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;
+    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 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;
+    private static getSelector;
+    private static getType;
+    private static addType;
+}

package/ComponentRegistry.js

@@ -0,0 +1,115 @@
+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 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 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);
+    }
+    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;
+    }
+}
+ComponentRegistry.contentTypes = {};
+ComponentRegistry.pages = {};
+ComponentRegistry.components = {};
+ComponentRegistry.parts = {};
+ComponentRegistry.layouts = {};
+ComponentRegistry.macros = {};

package/UrlProcessor.d.ts

@@ -0,0 +1,21 @@
+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 siteKey;
+    static process(url: string, meta: MetaData): string;
+    static setSiteKey(key: string): void;
+    static isMediaLink(ref: string, linkData: LinkData[]): boolean;
+    static isContentImage(ref: string, linkData: ImageData[]): boolean;
+    private static stripApiUrl;
+    private static isPageUrl;
+    private static getApiUrl;
+}
+export declare const getUrl: any;

package/UrlProcessor.js

@@ -0,0 +1,54 @@
+import { commonChars, RENDER_MODE, SITE_KEY } from './utils';
+export class UrlProcessor {
+    static process(url, meta) {
+        let result;
+        if (!meta || !this.isPageUrl(url) && meta.renderMode === RENDER_MODE.NEXT) {
+            // keep content urls absolute in next mode for everything but page urls
+            result = url;
+        }
+        else {
+            const apiUrl = this.getApiUrl(meta);
+            const strippedUrl = this.stripApiUrl(url, apiUrl);
+            result = ((meta === null || meta === void 0 ? void 0 : meta.baseUrl) || '') + strippedUrl;
+        }
+        return result;
+    }
+    static setSiteKey(key) {
+        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;
+    }
+    static isContentImage(ref, linkData) {
+        var _a;
+        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;
+        return (remaining.length > 0 && remaining.charAt(0) === '/') ? remaining.substring(1) : remaining;
+    }
+    static isPageUrl(url) {
+        return !this.IMG_ATMT_REGEXP.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) {
+            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.setSiteKey(SITE_KEY);
+export const getUrl = UrlProcessor.process.bind(UrlProcessor);

package/baseMappings.d.ts

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

package/baseMappings.js

@@ -0,0 +1,38 @@
+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';
+import BaseLayout from './views/BaseLayout';
+import TextView from './views/Text';
+import DefaultMacro from './views/macros/DefaultMacro';
+import DisableMacro from './views/macros/DisableMacro';
+// Base Content Types
+ComponentRegistry.addContentType(FRAGMENT_CONTENTTYPE_NAME, {
+    view: FragmentView,
+});
+// 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,
+    configQuery: '{body}',
+});
+ComponentRegistry.addMacro('system:disable', {
+    view: DisableMacro,
+    configQuery: '{body}',
+});

package/guillotine/fetchContent.d.ts

@@ -0,0 +1,82 @@
+/// <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 declare 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;
+};
+declare type Result = {
+    error?: {
+        code: string;
+        message: string;
+    } | null;
+};
+declare type GuillotineResult = Result & {
+    [dataKey: string]: any;
+};
+export declare 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 & {
+    componentRegistry: typeof ComponentRegistry;
+};
+export interface ServerSideParams extends ParsedUrlQuery {
+    contentPath?: string[];
+    mode?: string;
+}
+export interface PreviewParams {
+    contentPath: string[];
+    headers: Record<string, string>;
+}
+export declare type Context = GetServerSidePropsContext<ServerSideParams, PreviewParams>;
+export interface MinimalContext {
+    req: IncomingMessage & {
+        cookies: NextApiRequestCookies;
+    };
+}
+/**
+ * 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 declare type ContentFetcher = (contentPath: string | string[], context: Context) => Promise<FetchContentResult>;
+export declare type ContentApiBaseBody = {
+    query?: string;
+    variables?: {
+        path?: string;
+    };
+};
+/** Generic fetch */
+export declare const fetchFromApi: (apiUrl: string, body: {}, method?: string) => Promise<any>;
+/** Guillotine-specialized fetch, using the generic fetch above */
+export declare const fetchGuillotine: (contentApiUrl: string, body: ContentApiBaseBody, xpContentPath: string) => 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;
+/**
+ * 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 {};