@enonic/nextjs-adapter 2.0.1 → 2.0.2

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/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;

package/src/views/BasePart.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import {MetaData, PartData} from '../guillotine/getMetaData';
-import {ComponentRegistry} from '../ComponentRegistry';
-import {XP_COMPONENT_TYPE} from '../utils';
-import {MissingComponent, shouldShowMissingView} from './BaseComponent';
-
-
-export interface PartProps {
-    part: PartData;
-    path: string;
-    data?: any;
-    common?: any; // Content is passed down to componentviews. TODO: Use a react contextprovider instead?
-    meta: MetaData;
-}
-
-interface BasePartProps {
-    component?: PartData;
-    path: string;
-    common?: any;
-    data?: any;
-    error?: string;
-    meta: MetaData;
-}
-
-const BasePart = (props: BasePartProps) => {
-    const {component, data, common, meta, path} = props;
-
-    let partSelection;
-    if (component) {
-        partSelection = ComponentRegistry.getPart(component.descriptor);
-    }
-    const SelectedPartView = partSelection?.view;
-    if (SelectedPartView) {
-        return <SelectedPartView part={component}
-                                 path={path}
-                                 data={data}
-                                 common={common}
-                                 meta={meta}/>;
-    } else if (component?.descriptor) {
-        // empty descriptor usually means uninitialized part
-        console.warn(`BasePart: can not render part '${component.descriptor}': no next view or catch-all defined`);
-        if (shouldShowMissingView(meta)) {
-            return <MissingComponent type={XP_COMPONENT_TYPE.PART} descriptor={component.descriptor}/>;
-        }
-    }
-    return null;
-};
-
-export default BasePart;
-

package/src/views/Fragment.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import BaseComponent, {MissingComponent, shouldShowMissingView} from './BaseComponent';
-import {FragmentData, MetaData, PageComponent, PageData} from '../guillotine/getMetaData';
-import {FRAGMENT_DEFAULT_REGION_NAME, XP_COMPONENT_TYPE} from '../utils';
-
-interface FragmentProps {
-    page?: PageData;
-    component?: FragmentData;
-    common?: any;
-    meta: MetaData;
-}
-
-const FragmentView = (props: FragmentProps) => {
-    const {component, page} = props;
-    const comps: PageComponent[] = [];
-    if (page) {
-        // rendering whole page
-        const regions = page.regions || {};
-        const regionComps = regions[FRAGMENT_DEFAULT_REGION_NAME]?.components;
-        if (regionComps) {
-            comps.push(...regionComps);
-        }
-    } else if (component?.fragment) {
-        // rendering a part of a page
-        comps.push(...component.fragment.components);
-    }
-
-    if (!comps.length && shouldShowMissingView(props.meta)) {
-        return <MissingComponent type={XP_COMPONENT_TYPE.FRAGMENT} descriptor={page?.descriptor || component?.id}/>;
-    } else {
-        const {common, meta} = props;
-
-        return (
-            <>
-                {
-                    comps.map((comp: PageComponent, i: number) => (
-                        <BaseComponent key={i} component={comp} common={common} meta={meta}/>
-                    ))
-                }
-            </>
-        );
-    }
-};
-
-export default FragmentView;

package/src/views/MainView.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import {FetchContentResult} from '../guillotine/fetchContent';
-import SingleComponent from './SingleComponent';
-import BaseContent from './BaseContent';
-import {XP_REQUEST_TYPE} from '../utils';
-
-
-const _MainView = (props: FetchContentResult) => {
-    const {meta} = props;
-
-    // Single-component render:
-    if (meta?.requestType === XP_REQUEST_TYPE.COMPONENT) {
-        return <SingleComponent {...props} />;
-    }
-
-    // meta.requestType="type", and hence content-type based, is standard view for now.
-    return <BaseContent {...props} />;
-};
-
-export default _MainView;