@enonic/nextjs-adapter 2.0.0 → 2.0.1

package/{views/BaseComponent.jsx → src/views/BaseComponent.tsx}

@@ -1,31 +1,45 @@
 import React from 'react';
-import { IS_DEV_MODE, PORTAL_COMPONENT_ATTRIBUTE, RENDER_MODE, XP_COMPONENT_TYPE } from '../utils';
-import { ComponentRegistry } from '../ComponentRegistry';
+
+import {IS_DEV_MODE, PORTAL_COMPONENT_ATTRIBUTE, RENDER_MODE, XP_COMPONENT_TYPE} from '../utils';
+import {MetaData, PageComponent} from '../guillotine/getMetaData';
+import {ComponentRegistry} from '../ComponentRegistry';
 import Empty from './Empty';
 import * as ReactDOMServer from 'react-dom/server';
-const BaseComponent = ({ component, meta, common }) => {
-    var _a;
-    const { type, error } = component;
+
+
+export type BaseComponentProps = {
+    component: PageComponent;
+    meta: MetaData;
+    common?: any;                  // Content is passed down for optional consumption in componentviews.
+    // TODO: Use a react contextprovider instead of "manually" passing everything down
+};
+
+const BaseComponent = ({component, meta, common}: BaseComponentProps) => {
+    const {type, error} = component;
     const cmpData = component[type];
     const descriptor = cmpData && 'descriptor' in cmpData ? cmpData.descriptor : undefined;
-    let ComponentView;
+
+    let ComponentView: JSX.Element | null;
+
     if (error) {
         // renders error component when rendering whole page
         console.warn(`BaseComponent: ${type} '${descriptor}' error: ${error}`);
-        ComponentView = shouldShowErrorView(meta) ? <ErrorComponent type={type} reason={error} descriptor={descriptor}/> : <Empty />;
-    }
-    else {
-        const ViewFn = (_a = ComponentRegistry.getComponent(type)) === null || _a === void 0 ? void 0 : _a.view;
+        ComponentView = shouldShowErrorView(meta) ? <ErrorComponent type={type} reason={error} descriptor={descriptor}/> : <Empty/>;
+
+    } else {
+
+        const ViewFn = ComponentRegistry.getComponent(type)?.view;
         if (!ViewFn) {
             // show missing component kind, i.e. 'part', 'layout', 'text'
             console.warn(`BaseComponent: can not render component '${type}': no next view or catch-all defined`);
-            ComponentView = shouldShowMissingView(meta) ? <MissingComponent type={type} descriptor={descriptor}/> : <Empty />;
-        }
-        else {
+            ComponentView = shouldShowMissingView(meta) ? <MissingComponent type={type} descriptor={descriptor}/> : <Empty/>;
+
+        } else {
             const cmpAttrs = createComponentAttrs(component, meta, common);
             ComponentView = <ViewFn {...cmpAttrs}/>;
         }
     }
+
     // need to display a placeholder if descriptor is empty as component is not initialized yet
     if (descriptor && shouldShowPlaceholderView(meta)) {
         const outputHTML = ReactDOMServer.renderToString(ComponentView);
@@ -34,81 +48,101 @@ const BaseComponent = ({ component, meta, common }) => {
             ComponentView = <PlaceholderComponent type={type} descriptor={descriptor}/>;
         }
     }
+
     if (meta.renderMode === RENDER_MODE.EDIT) {
-        return (<div {...createEditorAttrs(type)}>
+        return (
+            <div {...createEditorAttrs(type)}>
                 {ComponentView}
-            </div>);
-    }
-    else {
+            </div>
+        );
+    } else {
         // do not make component wrappers in live mode
         return ComponentView;
     }
 };
 export default BaseComponent;
+
 /*
  *  Used for displaying components with missing implementations on the page, while rendering whole page
  */
-export const MissingComponent = ({ descriptor, type }) => {
-    return (<div style={{
+export const MissingComponent = ({descriptor, type}: { descriptor?: string, type: string }) => {
+    return (
+        <div style={{
             border: '2px dashed lightgrey',
             padding: '16px',
         }}>
-            <h3 style={{ margin: 0 }}>Missing component</h3>
-            <p style={{ marginBottom: 0, color: 'grey' }}>{`Missing ${type} with descriptor: ${descriptor}`}</p>
-        </div>);
+            <h3 style={{margin: 0}}>Missing component</h3>
+            <p style={{marginBottom: 0, color: 'grey'}}>{`Missing ${type} with descriptor: ${descriptor}`}</p>
+        </div>
+    );
 };
-export function shouldShowMissingView(meta) {
+
+export function shouldShowMissingView(meta: MetaData): boolean {
     return IS_DEV_MODE || meta.renderMode !== RENDER_MODE.NEXT;
 }
+
 /*
  *  Used for displaying components with errors on the page, while rendering whole page
  */
-export const ErrorComponent = ({ type, descriptor, reason }) => {
-    return (<div style={{
+export const ErrorComponent = ({type, descriptor, reason}: { type?: string, descriptor?: string, reason: string }) => {
+    return (
+        <div style={{
             border: '2px solid red',
             padding: '16px',
         }}>
-            <h3 style={{ margin: 0, textTransform: 'capitalize' }}>{reason ? reason : 'Unknown error'}</h3>
-            {descriptor && <p style={{ color: 'grey' }}>{`${type}: ${descriptor}`}</p>}
-        </div>);
+            <h3 style={{margin: 0, textTransform: 'capitalize'}}>{reason ? reason : 'Unknown error'}</h3>
+            {descriptor && <p style={{color: 'grey'}}>{`${type}: ${descriptor}`}</p>}
+        </div>
+    );
 };
-export function shouldShowErrorView(meta) {
+
+export function shouldShowErrorView(meta: MetaData): boolean {
     return meta.renderMode === RENDER_MODE.EDIT;
 }
-function createEditorAttrs(type) {
+
+function createEditorAttrs(type: XP_COMPONENT_TYPE): { [key: string]: string } {
     return {
         [PORTAL_COMPONENT_ATTRIBUTE]: type,
     };
 }
-function createComponentAttrs(component, meta, common) {
-    const { type, data, error } = component;
-    const cmpAttrs = {
+
+function createComponentAttrs(component: PageComponent, meta: MetaData, common?: any): { [key: string]: any } {
+    const {type, data, error} = component;
+    const cmpAttrs: { [key: string]: any } = {
         component: component[type],
         path: component.path,
         meta,
         common,
     };
+
     if (data) {
         cmpAttrs.data = data;
     }
+
     if (error) {
         cmpAttrs.error = error;
     }
+
     if (component.type === XP_COMPONENT_TYPE.LAYOUT) {
         // add regions to layout because they are not present in component[component.type] above
         cmpAttrs.regions = component.regions;
     }
     return cmpAttrs;
 }
-export const PlaceholderComponent = ({ type, descriptor }) => {
-    return (<div style={{
+
+export const PlaceholderComponent = ({type, descriptor}: { type?: string, descriptor?: string }) => {
+    return (
+        <div style={{
             border: '2px solid lightgrey',
             padding: '16px',
         }}>
-            <h3 style={{ margin: 0, textTransform: 'capitalize' }}>Empty output</h3>
-            {descriptor && <p style={{ color: 'grey' }}>{`${type} '${descriptor}' output is empty`}</p>}
-        </div>);
+            <h3 style={{margin: 0, textTransform: 'capitalize'}}>Empty output</h3>
+            {descriptor && <p style={{color: 'grey'}}>{`${type} '${descriptor}' output is empty`}</p>}
+        </div>
+    );
 };
-export function shouldShowPlaceholderView(meta) {
+
+export function shouldShowPlaceholderView(meta: MetaData): boolean {
     return meta.renderMode === RENDER_MODE.EDIT;
 }
+

package/{views/BaseContent.jsx → src/views/BaseContent.tsx}

@@ -1,41 +1,48 @@
 import React from 'react';
-import { ComponentRegistry } from '../ComponentRegistry';
-import BasePage from './BasePage';
-const BaseContent = (props) => {
-    const { common, meta, page } = props;
-    if (!(meta === null || meta === void 0 ? void 0 : meta.type)) {
+import {FetchContentResult} from '../guillotine/fetchContent';
+import {ComponentRegistry} from '../ComponentRegistry';
+import BasePage, {BasePageProps} from './BasePage';
+
+
+const BaseContent = (props: FetchContentResult) => {
+    const {common, meta, page} = props;
+
+    if (!meta?.type) {
         console.warn("BaseContent props are missing 'meta.type'");
         return null;
     }
-    const pageData = page === null || page === void 0 ? void 0 : page.page;
-    const pageDesc = pageData === null || pageData === void 0 ? void 0 : pageData.descriptor;
+
+    const pageData = page?.page;
+    const pageDesc = pageData?.descriptor;
     const typeDef = ComponentRegistry.getContentType(meta.type);
-    const ContentTypeView = typeDef === null || typeDef === void 0 ? void 0 : typeDef.view;
-    if (ContentTypeView && !(typeDef === null || typeDef === void 0 ? void 0 : typeDef.catchAll)) {
+    const ContentTypeView = typeDef?.view;
+
+    if (ContentTypeView && !typeDef?.catchAll) {
         // console.info(`BaseContent: rendering '${meta.type}' with content type: ${ContentTypeView.name}`);
         return <ContentTypeView {...props}/>;
-    }
-    else if (pageDesc) {
+    } else if (pageDesc) {
         // console.info(`BaseContent: rendering '${meta.type}' with page: ${BasePage.name}`);
-        const pageAttrs = {
+        const pageAttrs: BasePageProps = {
             component: pageData,
-            path: page === null || page === void 0 ? void 0 : page.path,
+            path: page?.path,
             meta,
             common,
         };
-        if (page === null || page === void 0 ? void 0 : page.data) {
+        if (page?.data) {
             pageAttrs.data = page.data;
         }
-        if (page === null || page === void 0 ? void 0 : page.error) {
+        if (page?.error) {
             pageAttrs.error = page.error;
         }
+
         return <BasePage {...pageAttrs}/>;
-    }
-    else if (ContentTypeView) {
+    } else if (ContentTypeView) {
         // console.info(`BaseContent: rendering '${meta.type}' with content type catch-all: ${ContentTypeView.name}`);
         return <ContentTypeView {...props}/>;
     }
+
     console.log(`BaseContent: can not render ${meta.type}: no content type or page view defined`);
     return null;
 };
+
 export default BaseContent;

package/src/views/BaseLayout.tsx

@@ -0,0 +1,45 @@
+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/{views/BaseMacro.jsx → src/views/BaseMacro.tsx}

@@ -1,18 +1,36 @@
 import React from 'react';
-import { ComponentRegistry } from '../ComponentRegistry';
-import { RENDER_MODE, sanitizeGraphqlName } from '../utils';
+import {MacroConfig, MacroData, MetaData} from '../guillotine/getMetaData';
+import {ComponentRegistry} from '../ComponentRegistry';
+import {RENDER_MODE, sanitizeGraphqlName} from '../utils';
 import HTMLReactParser from 'html-react-parser';
+
 const unescape = require('unescape');
+
 export const MACRO_DISABLE = 'system:disable';
 export const MACRO_EMBED = 'system:embed';
-const BaseMacro = (props) => {
-    const { data, meta, renderInEditMode } = props;
+
+interface BaseMacroProps {
+    data: MacroData;
+    meta: MetaData;
+    renderInEditMode?: boolean;
+}
+
+export interface MacroProps {
+    name: string;
+    config: MacroConfig;
+    meta: MetaData;
+}
+
+const BaseMacro = (props: BaseMacroProps) => {
+    const {data, meta, renderInEditMode} = props;
+
     let config = data.config[sanitizeGraphqlName(data.name)] || {};
     if (data.descriptor !== MACRO_DISABLE) {
         // do not do any processing for disable macro
         config = normalizeValue(config);
     }
-    if (!renderInEditMode && (meta === null || meta === void 0 ? void 0 : meta.renderMode) === RENDER_MODE.EDIT) {
+
+    if (!renderInEditMode && meta?.renderMode === RENDER_MODE.EDIT) {
         const attrs = formatAttributes(config);
         if (config.body) {
             // do not parse system macros (embed, disable) in edit mode
@@ -24,62 +42,60 @@ const BaseMacro = (props) => {
                 {bodyString}
                 {`[/${data.name}]`}
             </>;
-        }
-        else {
+        } else {
             return <>
                 {`[${data.name}${attrs}/]`}
             </>;
         }
     }
+
     const macro = ComponentRegistry.getMacro(data.descriptor);
-    const MacroView = macro === null || macro === void 0 ? void 0 : macro.view;
+    const MacroView = macro?.view;
     if (MacroView) {
         return <MacroView name={data.name} config={config} meta={meta}/>;
-    }
-    else if (data.descriptor) {
+    } else if (data.descriptor) {
         console.warn(`BaseMacro: can not render macro '${data.descriptor}': no next view or catch-all defined`);
     }
     return null;
 };
-function normalizeValue(value) {
-    let parsedVal;
+
+function normalizeValue(value: any): any {
+    let parsedVal: any;
     if (value instanceof Array) {
         parsedVal = value.map(normalizeValue);
-    }
-    else if (value instanceof Object) {
+    } else if (value instanceof Object) {
         parsedVal = {};
         Object.entries(value).forEach(entry => parsedVal[entry[0]] = normalizeValue(entry[1]));
-    }
-    else if (typeof value === 'string') {
+    } else if (typeof value === 'string') {
         const unescapedValue = unescape(value);
         if (unescapedValue.startsWith('[') && unescapedValue.endsWith(']')) {
             // Wicked array notation: "[Value 1, Value 2]"
             parsedVal = unescapedValue.substring(1, unescapedValue.length - 1).split(/,\s*/);
-        }
-        else {
+        } else {
             try {
                 parsedVal = JSON.parse(unescapedValue);
-            }
-            catch (e) {
+            } catch (e) {
                 // simple string or wrongly formatted JSON
                 parsedVal = unescapedValue;
             }
         }
-    }
-    else {
+    } else {
         // most likely a number or unknown type
         parsedVal = value;
     }
     return parsedVal;
 }
-function formatAttributes(config) {
-    const attrs = Object.entries(config)
+
+function formatAttributes(config: MacroConfig): string {
+    const attrs: string[] = Object.entries(config)
         .filter(entry => entry[0] !== 'body')
-        .reduce((accum, entry) => {
-        // concat to make sure we account for arrays
-        [].concat(normalizeValue(entry[1])).forEach(val => accum.push(`${entry[0]}="${val}"`));
-        return accum;
-    }, []);
+        .reduce<string[]>((accum, entry) => {
+            // concat to make sure we account for arrays
+            [].concat(normalizeValue(entry[1])).forEach(val => accum.push(`${entry[0]}="${val}"`));
+            return accum;
+        }, []);
+
     return attrs.length ? ` ${attrs.join(' ')}` : '';
 }
+
 export default BaseMacro;

package/src/views/BasePage.tsx

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,50 @@
+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/{views/Empty.jsx → src/views/Empty.tsx}

@@ -1,3 +1,5 @@
 import React from 'react';
+
 const Empty = () => <></>;
+
 export default Empty;

package/src/views/Fragment.tsx

@@ -0,0 +1,45 @@
+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

@@ -0,0 +1,21 @@
+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;