@enonic/nextjs-adapter 2.0.1 → 2.0.3

package/src/ComponentRegistry.ts

@@ -1,189 +0,0 @@
-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/src/UrlProcessor.ts

@@ -1,115 +0,0 @@
-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 {
-
-    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 #
-            // - meta is absent
-            // - attachment urls in NEXT mode
-            return url;
-        }
-
-        let result: string;
-        const apiUrl = this.getApiUrl(meta);
-        const strippedUrl = this.stripApiUrl(url, apiUrl);
-        const baseUrl = meta?.baseUrl && meta?.baseUrl !== '/' ? meta.baseUrl : '';
-        if (meta.renderMode === RENDER_MODE.NEXT) {
-            // only add basePath and locale in next mode
-            result = `/${strippedUrl}`;
-            if (!this.isRelative(url) && meta.locale !== meta.defaultLocale) {
-                // do not append locale to local assets (having relative urls)
-                result = `/${meta.locale}${result}`;
-            }
-            if (!serverSide) {
-                // no need for baseurl and basepath on server
-                result = addBasePath(`${baseUrl}${result}`);
-            }
-        } else {
-            result = `${baseUrl}/${strippedUrl}`;
-        }
-
-        return fixDoubleSlashes(result);
-    }
-
-    public static setSiteKey(key: string): void {
-        this.siteKey = key;
-    }
-
-    public static isMediaLink(ref: string, linkData: LinkData[]): boolean {
-        return linkData.find(data => data.ref === ref)?.media !== null;
-    }
-
-    public static isContentImage(ref: string, linkData: ImageData[]): boolean {
-        return linkData.find(data => data.ref === ref)?.image !== null;
-    }
-
-    public static processSrcSet(srcset: string, meta: MetaData): string {
-        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(', ');
-    }
-
-    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 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 {
-        return this.IMG_ATMT_REGEXP.test(url);
-    }
-
-    private static startsWithHash(url: string): boolean {
-        return url?.charAt(0) == '#';
-    }
-
-    private static isRelative(url: string): boolean {
-        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) {
-            combinedUrl += '/' + this.siteKey.replace(this.startSlashPattern, '');
-        }
-        return combinedUrl;
-    }
-}
-
-// 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);
-

package/src/guillotine/getMetaData.ts

@@ -1,246 +0,0 @@
-import {RENDER_MODE, sanitizeGraphqlName, XP_COMPONENT_TYPE, XP_REQUEST_TYPE} from '../utils';
-import {ComponentDefinition, ComponentRegistry} from '../ComponentRegistry';
-
-const macroConfigQuery = (): string => {
-    return configQuery(ComponentRegistry.getMacros(), false, false);
-};
-
-const partConfigQuery = (): string => {
-    return configQuery(ComponentRegistry.getParts());
-};
-
-const layoutConfigQuery = (): string => {
-    return configQuery(ComponentRegistry.getLayouts());
-};
-
-const pageConfigQuery = (): string => {
-    return configQuery(ComponentRegistry.getPages());
-};
-
-const configQuery = (list: [string, ComponentDefinition][], includeAppName = true, canUseConfigAsJson = true): string => {
-    const hasQueryList = list?.filter(([key, def]) => def.configQuery) || [];
-    if (hasQueryList.length === 0) {
-        return canUseConfigAsJson ? 'configAsJson' : '';
-    }
-
-    const configsByApp: { [app: string]: string[] } = {};
-    hasQueryList
-        .forEach((entry) => {
-            const nameParts = entry[0].split(':');
-            if (nameParts.length === 2) {
-                const sanitizedAppName = sanitizeGraphqlName(nameParts[0]);
-                let existingConfigs = configsByApp[sanitizedAppName];
-                if (!existingConfigs) {
-                    existingConfigs = [];
-                    configsByApp[sanitizedAppName] = existingConfigs;
-                }
-                existingConfigs.push(`${sanitizeGraphqlName(nameParts[1])}${entry[1].configQuery}`);
-            }
-        });
-
-    // Still query for configAsJson if at least one item has no configQuery defined
-    const configAsJsonQuery = canUseConfigAsJson && hasQueryList.length < list.length ? 'configAsJson' : '';
-
-    if (!includeAppName) {
-        return `${configAsJsonQuery}
-                config {
-                    ${Object.values(configsByApp).reduce((arr, curr) => arr.concat(curr), []).join('\n')}
-                }`;
-    } else {
-        return `${configAsJsonQuery}
-                config {
-                    ${Object.entries(configsByApp).map(entry => entry[0] + '{\n' + entry[1].join('\n') + '\n}')}
-                }`;
-    }
-};
-
-/*
-    IMPORTANT: make sure to transform your queries into functions too when using this function inside them !!!
- */
-export const richTextQuery = (fieldName: string) => {
-    return `${fieldName}(processHtml:{type:absolute, imageWidths:[400, 800, 1200], imageSizes:"(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"}) {
-                processedHtml
-                macros {
-                    ref
-                    name
-                    descriptor
-                    ${macroConfigQuery()}
-                }
-                links {
-                    ref
-                    media {
-                        content {
-                            _id
-                        }
-                    }
-                }
-                images {
-                    ref
-                    image {
-                        _id
-                    }
-                }
-            }`;
-};
-
-const componentsQuery = () => `
-        type
-        path
-        page {
-          descriptor
-          ${pageConfigQuery()}
-          template {
-            _path
-          }
-        }
-        layout {
-          descriptor
-          ${layoutConfigQuery()}
-        }
-        text {
-            ${richTextQuery('value')}
-        }
-        part {
-          descriptor
-          ${partConfigQuery()}
-        }
-        image {
-          caption
-          image {
-            imageUrl (type:absolute, scale: "width-768")
-          }
-        }
-`;
-
-// THIS QUERY DOES NOT SUPPORT NESTED FRAGMENTS
-export const pageFragmentQuery = () => `
-      components(resolveFragment: false, resolveTemplate: true) {
-        fragment {
-          id
-          fragment {
-            components {
-              ${componentsQuery()}
-            }
-          }
-        }
-        ${componentsQuery()}
-      }`;
-
-export function getMetaQuery(pageFragment?: string): string {
-    return `query($path:ID!){
-              guillotine {
-                get(key:$path) {
-                  _path
-                  type
-                  ${pageFragment || ''}
-                }
-              }
-            }`;
-}
-
-export interface PageComponent {
-    [key: string]: any; // keeps ts happy when accessing component data field by XP_COMPONENT_TYPE type
-    type: XP_COMPONENT_TYPE;
-    path: string;
-    page?: PageData;
-    part?: PartData;
-    layout?: LayoutData;
-    fragment?: FragmentData;
-    text?: TextData;
-    image?: any;
-    regions?: RegionTree;
-    data?: any;
-    error?: any;
-}
-
-export interface TextData {
-    value: RichTextData;
-}
-
-export interface RichTextData {
-    processedHtml: string,
-    links: LinkData[],
-    macros: MacroData[],
-    images: ImageData[],
-}
-
-export interface LinkData {
-    ref: string,
-    media: {
-        content: {
-            id: string,
-        }
-    } | null,
-}
-
-export interface MacroData {
-    ref: string;
-    name: string;
-    descriptor: string;
-    config: {
-        [name: string]: MacroConfig;
-    };
-}
-
-export interface ImageData {
-    ref: string;
-    image: {
-        id: string,
-    } | null,
-}
-
-export interface MacroConfig {
-    [key: string]: any;
-}
-
-
-export interface RegionTree {
-    [key: string]: PageRegion;
-}
-
-export interface PageRegion {
-    name: string;
-    components: PageComponent[];
-}
-
-export interface PartData {
-    descriptor: string;
-    config: any;
-
-    [customKeysFromQuery: string]: any;
-}
-
-export interface LayoutData {
-    descriptor: string;
-    config?: any;
-
-    [customKeysFromQuery: string]: any;
-}
-
-export interface PageData {
-    descriptor: string;
-    config?: any;
-    template?: string | null;
-    regions?: RegionTree;
-}
-
-export interface FragmentData {
-    id: string;
-    fragment: {
-        components: PageComponent[];
-    }
-}
-
-export interface MetaData {
-    type: string,
-    path: string,
-    requestType: XP_REQUEST_TYPE,
-    renderMode: RENDER_MODE,
-    requestedComponent?: PageComponent,
-    canRender: boolean,
-    catchAll: boolean,
-    apiUrl: string,
-    baseUrl: string,
-    locale: string,
-    defaultLocale: string,
-}

package/src/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES6",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "allowSyntheticDefaultImports": true,
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "outDir": "../dist",
-    "declaration": true
-  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": []
-}

package/src/views/BaseLayout.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import {LayoutData, MetaData, RegionTree} from '../guillotine/getMetaData';
-import {ComponentRegistry} from '../ComponentRegistry';
-import {XP_COMPONENT_TYPE} from '../utils';
-import {MissingComponent, shouldShowMissingView} from './BaseComponent';
-
-export interface LayoutProps {
-    layout: LayoutData;
-    path: string;
-    common: any;
-    meta: MetaData;
-}
-
-interface BaseLayoutProps {
-    component?: LayoutData;
-    path: string;
-    regions?: RegionTree;
-    common?: any;
-    meta: MetaData;
-}
-
-const BaseLayout = (props: BaseLayoutProps) => {
-
-    const {component, common, regions, meta, path} = props;
-    let layoutSelection;
-    if (component) {
-        layoutSelection = ComponentRegistry.getLayout(component.descriptor);
-    }
-    const SelectedLayoutView = layoutSelection?.view;
-    if (SelectedLayoutView) {
-        return <SelectedLayoutView layout={{descriptor: component?.descriptor, regions: regions || {}, config: component?.config}}
-                                   path={path}
-                                   common={common}
-                                   meta={meta}/>;
-    } else if (component?.descriptor) {
-        // empty descriptor usually means uninitialized layout
-        console.warn(`BaseLayout: can not render layout '${component?.descriptor}': no next view or catch-all defined`);
-        if (shouldShowMissingView(meta)) {
-            return <MissingComponent type={XP_COMPONENT_TYPE.LAYOUT} descriptor={component.descriptor}/>;
-        }
-    }
-    return null;
-};
-
-export default BaseLayout;

package/src/views/BasePage.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import {ComponentRegistry} from '../ComponentRegistry';
-import {MetaData, PageData} from '../guillotine/getMetaData';
-import {XP_COMPONENT_TYPE} from '../utils';
-import {ErrorComponent, MissingComponent, shouldShowErrorView, shouldShowMissingView} from './BaseComponent';
-
-export interface PageProps {
-    page: PageData;
-    path: string;
-    data?: any;
-    common?: any; // Content is passed down to componentviews. TODO: Use a react contextprovider instead?
-    meta: MetaData;
-}
-
-export interface BasePageProps {
-    component?: PageData;
-    path?: string;
-    common?: any;
-    data?: any;
-    error?: string;
-    meta: MetaData;
-}
-
-const BasePage = (props: BasePageProps) => {
-    const {component, data, common, error, meta, path} = props;
-    const desc = component?.descriptor;
-    if (error) {
-        console.warn(`BasePage: '${desc}' error: ${error}`);
-        if (shouldShowErrorView(meta)) {
-            return <ErrorComponent reason={error} descriptor={desc} type={XP_COMPONENT_TYPE.PAGE}/>;
-        } else {
-            return null;
-        }
-    }
-    let pageDef;
-    if (desc) {
-        pageDef = ComponentRegistry.getPage(desc);
-    }
-    const PageView = pageDef?.view;
-    if (PageView) {
-        return <PageView page={component}
-                         path={path}
-                         data={data}
-                         common={common}
-                         meta={meta}/>;
-    } else if (component?.descriptor) {
-        // empty descriptor usually means uninitialized page
-        console.warn(`BasePage: can not render page '${desc}': no next view or catch-all defined`);
-        if (shouldShowMissingView(meta)) {
-            return <MissingComponent type={XP_COMPONENT_TYPE.PAGE} descriptor={component.descriptor}/>;
-        }
-    }
-    return null;
-};
-
-export default BasePage;