@enonic/nextjs-adapter 0.0.1-alpha.1

package/views/BaseLayout.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentRegistry } from '../ComponentRegistry';
+import { XP_COMPONENT_TYPE } from '../utils';
+import { MissingComponent, shouldShowMissingView } from './BaseComponent';
+const BaseLayout = (props) => {
+    const { component, common, regions, meta, path } = props;
+    let layoutSelection;
+    if (component) {
+        layoutSelection = ComponentRegistry.getLayout(component.descriptor);
+    }
+    const SelectedLayoutView = layoutSelection === null || layoutSelection === void 0 ? void 0 : layoutSelection.view;
+    if (SelectedLayoutView) {
+        return <SelectedLayoutView layout={{ descriptor: component === null || component === void 0 ? void 0 : component.descriptor, regions: regions || {}, config: component === null || component === void 0 ? void 0 : component.config }} path={path} common={common} meta={meta}/>;
+    }
+    else if (component === null || component === void 0 ? void 0 : component.descriptor) {
+        // empty descriptor usually means uninitialized layout
+        console.warn(`BaseLayout: can not render layout '${component === null || component === void 0 ? void 0 : 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.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { MacroConfig, MacroData, MetaData } from '../guillotine/getMetaData';
+export declare const MACRO_DISABLE = "system:disable";
+export declare const MACRO_EMBED = "system:embed";
+interface BaseMacroProps {
+    data: MacroData;
+    meta: MetaData;
+    renderInEditMode?: boolean;
+}
+export interface MacroProps {
+    name: string;
+    config: MacroConfig;
+    meta: MetaData;
+}
+declare const BaseMacro: (props: BaseMacroProps) => JSX.Element;
+export default BaseMacro;

package/views/BaseMacro.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+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;
+    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) {
+        const attrs = formatAttributes(config);
+        if (config.body) {
+            // do not parse system macros (embed, disable) in edit mode
+            // but parse others because panel macros (for instance) wants its content to be html, not string
+            // TODO: should we make this behavior configurable ?
+            const bodyString = !data.descriptor.startsWith('system:') ? HTMLReactParser(config.body) : config.body;
+            return <>
+                {`[${data.name}${attrs}]`}
+                {bodyString}
+                {`[/${data.name}]`}
+            </>;
+        }
+        else {
+            return <>
+                {`[${data.name}${attrs}/]`}
+            </>;
+        }
+    }
+    const macro = ComponentRegistry.getMacro(data.descriptor);
+    const MacroView = macro === null || macro === void 0 ? void 0 : macro.view;
+    if (MacroView) {
+        return <MacroView name={data.name} config={config} meta={meta}/>;
+    }
+    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;
+    if (value instanceof Array) {
+        parsedVal = value.map(normalizeValue);
+    }
+    else if (value instanceof Object) {
+        parsedVal = {};
+        Object.entries(value).forEach(entry => parsedVal[entry[0]] = normalizeValue(entry[1]));
+    }
+    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 {
+            try {
+                parsedVal = JSON.parse(unescapedValue);
+            }
+            catch (e) {
+                // simple string or wrongly formatted JSON
+                parsedVal = unescapedValue;
+            }
+        }
+    }
+    else {
+        // most likely a number or unknown type
+        parsedVal = value;
+    }
+    return parsedVal;
+}
+function formatAttributes(config) {
+    const attrs = 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;
+    }, []);
+    return attrs.length ? ` ${attrs.join(' ')}` : '';
+}
+export default BaseMacro;

package/views/BasePage.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { MetaData, PageData } from '../guillotine/getMetaData';
+export interface PageProps {
+    page: PageData;
+    path: string;
+    data?: any;
+    common?: any;
+    meta: MetaData;
+}
+export interface BasePageProps {
+    component?: PageData;
+    path?: string;
+    common?: any;
+    data?: any;
+    error?: string;
+    meta: MetaData;
+}
+declare const BasePage: (props: BasePageProps) => JSX.Element;
+export default BasePage;

package/views/BasePage.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ComponentRegistry } from '../ComponentRegistry';
+import { XP_COMPONENT_TYPE } from '../utils';
+import { ErrorComponent, MissingComponent, shouldShowErrorView, shouldShowMissingView } from './BaseComponent';
+const BasePage = (props) => {
+    const { component, data, common, error, meta, path } = props;
+    const desc = component === null || component === void 0 ? void 0 : 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 === null || pageDef === void 0 ? void 0 : pageDef.view;
+    if (PageView) {
+        return <PageView page={component} path={path} data={data} common={common} meta={meta}/>;
+    }
+    else if (component === null || component === void 0 ? void 0 : 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/views/BasePart.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { MetaData, PartData } from '../guillotine/getMetaData';
+export interface PartProps {
+    part: PartData;
+    path: string;
+    data?: any;
+    common?: any;
+    meta: MetaData;
+}
+interface BasePartProps {
+    component?: PartData;
+    path: string;
+    common?: any;
+    data?: any;
+    error?: string;
+    meta: MetaData;
+}
+declare const BasePart: (props: BasePartProps) => JSX.Element;
+export default BasePart;

package/views/BasePart.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentRegistry } from '../ComponentRegistry';
+import { XP_COMPONENT_TYPE } from '../utils';
+import { MissingComponent, shouldShowMissingView } from './BaseComponent';
+const BasePart = (props) => {
+    const { component, data, common, meta, path } = props;
+    let partSelection;
+    if (component) {
+        partSelection = ComponentRegistry.getPart(component.descriptor);
+    }
+    const SelectedPartView = partSelection === null || partSelection === void 0 ? void 0 : partSelection.view;
+    if (SelectedPartView) {
+        return <SelectedPartView part={component} path={path} data={data} common={common} meta={meta}/>;
+    }
+    else if (component === null || component === void 0 ? void 0 : 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.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Empty: () => JSX.Element;
+export default Empty;

package/views/Empty.jsx

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

package/views/Fragment.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { FragmentData, MetaData, PageData } from '../guillotine/getMetaData';
+interface FragmentProps {
+    page?: PageData;
+    component?: FragmentData;
+    common?: any;
+    meta: MetaData;
+}
+declare const FragmentView: (props: FragmentProps) => JSX.Element;
+export default FragmentView;

package/views/Fragment.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import BaseComponent from './BaseComponent';
+import { FRAGMENT_DEFAULT_REGION_NAME } from '../utils';
+const FragmentView = (props) => {
+    var _a;
+    const { component, page } = props;
+    const comps = [];
+    if (page) {
+        // rendering whole page
+        const regions = page.regions || {};
+        const regionComps = (_a = regions[FRAGMENT_DEFAULT_REGION_NAME]) === null || _a === void 0 ? void 0 : _a.components;
+        if (regionComps) {
+            comps.push(...regionComps);
+        }
+    }
+    else if (component) {
+        // rendering a part of a page
+        comps.push(...component.fragment.components);
+    }
+    const { common, meta } = props;
+    return (<>
+            {comps.map((comp, i) => (<BaseComponent key={i} component={comp} common={common} meta={meta}/>))}
+        </>);
+};
+export default FragmentView;

package/views/MainView.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FetchContentResult } from '../guillotine/fetchContent';
+declare const _MainView: (props: FetchContentResult) => JSX.Element;
+export default _MainView;

package/views/MainView.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import SingleComponent from './SingleComponent';
+import BaseContent from './BaseContent';
+import { XP_REQUEST_TYPE } from '../utils';
+const _MainView = (props) => {
+    const { meta } = props;
+    // Single-component render:
+    if ((meta === null || meta === void 0 ? void 0 : 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;

package/views/Region.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MetaData, PageComponent, PageData } from '../guillotine/getMetaData';
+export interface RegionProps {
+    name: string;
+    components?: PageComponent[];
+    className?: string;
+    common?: any;
+    meta: MetaData;
+}
+export interface RegionsProps {
+    page: PageData | null;
+    name?: string;
+    common?: any;
+    meta: MetaData;
+}
+/** Single region */
+export declare const RegionView: (props: RegionProps) => JSX.Element;
+/** Multiple regions, or only one if named in props.selected */
+declare const RegionsView: (props: RegionsProps) => JSX.Element;
+export default RegionsView;

package/views/Region.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { PORTAL_REGION_ATTRIBUTE, RENDER_MODE } from '../utils';
+import BaseComponent from './BaseComponent';
+/** Single region */
+export const RegionView = (props) => {
+    const { name, components, common, meta, className } = props;
+    const regionAttrs = {};
+    if (className) {
+        regionAttrs.className = className;
+    }
+    const children = (components || [])
+        .sort(sortPageComponentsByPath)
+        .map((component, i) => (<BaseComponent key={`${regionAttrs.id}-${i}`} component={component} common={common} meta={meta}/>));
+    if (meta.renderMode === RENDER_MODE.EDIT) {
+        regionAttrs.id = name + 'Region';
+        regionAttrs[PORTAL_REGION_ATTRIBUTE] = name;
+    }
+    if (Object.keys(regionAttrs).length) {
+        return <div {...regionAttrs}>{children}</div>;
+    }
+    else {
+        return <>{children}</>;
+    }
+};
+/** Multiple regions, or only one if named in props.selected */
+const RegionsView = (props) => {
+    const { page, name, meta, common } = props;
+    const regions = page === null || page === void 0 ? void 0 : page.regions;
+    if (!regions || !Object.keys(regions)) {
+        return null;
+    }
+    // Detect if any single region is selected for rendering and if so, handle that
+    if (name) {
+        const selectedRegion = regions[name];
+        if (!selectedRegion) {
+            console.warn(`Region name '${name}' was selected but not found among regions (${JSON.stringify(Object.keys(regions))}). Skipping.`); // TODO: Throw error instead of this? Return null?
+            return null;
+        }
+        return <RegionView {...selectedRegion} common={common} meta={meta}/>;
+    }
+    return (<>
+            {Object.keys(regions).map((name, i) => {
+            const region = regions[name];
+            return <RegionView key={i} {...region} common={common} meta={meta}/>;
+        })}
+        </>);
+};
+function sortPageComponentsByPath(aComp, bComp) {
+    // sort according to index in region, otherwise there will be a mismatch of views and data
+    // because after 10 components the order will be: /main/1, /main/11, /main/2, /main/3,...
+    let pathArr = aComp.path.split('/');
+    const aIndex = +(pathArr[pathArr.length - 1] || 0);
+    pathArr = bComp.path.split('/');
+    const bIndex = +(pathArr[pathArr.length - 1] || 0);
+    return aIndex - bIndex;
+}
+export default RegionsView;

package/views/RichTextView.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MetaData, RichTextData } from '../guillotine/getMetaData';
+import { DOMNode } from 'html-react-parser';
+export declare type ReplacerResult = JSX.Element | object | void | undefined | null | false;
+export declare type Replacer = (domNode: DOMNode, data: RichTextData, meta: MetaData, renderMacroInEditMode: boolean) => ReplacerResult;
+declare type Props = {
+    data: RichTextData;
+    meta: MetaData;
+    tag?: string;
+    renderMacroInEditMode?: boolean;
+    customReplacer?: Replacer;
+};
+export declare function createReplacer(allData: RichTextData, meta: MetaData, renderMacroInEditMode?: boolean, customReplacer?: Replacer): (domNode: DOMNode) => ReplacerResult;
+declare const RichTextView: ({ tag, data, meta, renderMacroInEditMode, customReplacer }: Props) => JSX.Element;
+export default RichTextView;

package/views/RichTextView.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { getUrl, UrlProcessor } from '../UrlProcessor';
+import HTMLReactParser from 'html-react-parser';
+import { ElementType } from 'domelementtype';
+import BaseMacro from './BaseMacro';
+export function createReplacer(allData, meta, renderMacroInEditMode = true, customReplacer) {
+    // eslint-disable-next-line react/display-name
+    return (domNode) => {
+        if (domNode.type !== ElementType.Tag) {
+            return domNode;
+        }
+        const el = domNode;
+        let ref;
+        switch (el.tagName) {
+            case UrlProcessor.IMG_TAG:
+                ref = el.attribs[UrlProcessor.IMG_ATTR];
+                const src = el.attribs['src'];
+                // do not process content images in next to keep it absolute
+                if (ref && src && UrlProcessor.isContentImage(ref, allData.images)) {
+                    el.attribs['src'] = getUrl(src, meta);
+                }
+                break;
+            case UrlProcessor.LINK_TAG:
+                ref = el.attribs[UrlProcessor.LINK_ATTR];
+                const href = el.attribs['href'];
+                if (ref && href) {
+                    el.attribs['href'] = getUrl(href, meta);
+                }
+                break;
+            case UrlProcessor.MACRO_TAG:
+                ref = el.attribs[UrlProcessor.MACRO_ATTR];
+                const data = ref && allData.macros.find((d) => d.ref === ref);
+                if (data) {
+                    return <BaseMacro data={data} meta={meta} renderInEditMode={renderMacroInEditMode}/>;
+                }
+                break;
+            default:
+                if (customReplacer) {
+                    const result = customReplacer(domNode, allData, meta, renderMacroInEditMode);
+                    if (result) {
+                        return result;
+                    }
+                }
+                break;
+        }
+        return el;
+    };
+}
+const RichTextView = ({ tag, data, meta, renderMacroInEditMode, customReplacer }) => {
+    const CustomTag = tag || 'section';
+    return <CustomTag>
+        {data.processedHtml ? HTMLReactParser(data.processedHtml, { replace: createReplacer(data, meta, renderMacroInEditMode, customReplacer) }) : ''}
+    </CustomTag>;
+};
+export default RichTextView;

package/views/SingleComponent.d.ts

@@ -0,0 +1,5 @@
+/** Render only one component as a result of a request from XP-side .../_/component/... during edit refresh. */
+/// <reference types="react" />
+import { FetchContentResult } from '../guillotine/fetchContent';
+declare const SingleComponent: ({ meta, common }: FetchContentResult) => JSX.Element;
+export default SingleComponent;

package/views/SingleComponent.jsx

@@ -0,0 +1,11 @@
+/** Render only one component as a result of a request from XP-side .../_/component/... during edit refresh. */
+import BaseComponent from './BaseComponent';
+import React from 'react';
+const SingleComponent = ({ meta, common }) => {
+    if (!(meta === null || meta === void 0 ? void 0 : meta.requestedComponent)) {
+        // TODO: Handle missing target region (Throw a 404, "component path not found"?)
+        return null;
+    }
+    return <BaseComponent component={meta.requestedComponent} common={common} meta={meta}/>;
+};
+export default SingleComponent;

package/views/Text.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MetaData, TextData } from '../guillotine/getMetaData';
+declare type Props = {
+    meta: MetaData;
+    component: TextData;
+    path: string;
+};
+declare const DefaultTextView: ({ component, meta, path }: Props) => JSX.Element;
+export default DefaultTextView;

package/views/Text.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import RichTextView from './RichTextView';
+const DefaultTextView = ({ component, meta, path }) => (<RichTextView data={component.value} meta={meta} renderMacroInEditMode={false}/>);
+export default DefaultTextView;

package/views/macros/DefaultMacro.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { MacroProps } from '../BaseMacro';
+declare const DefaultMacro: ({ name, config, meta }: MacroProps) => JSX.Element;
+export default DefaultMacro;

package/views/macros/DefaultMacro.jsx

@@ -0,0 +1,3 @@
+import HTMLReactParser from 'html-react-parser';
+const DefaultMacro = ({ name, config, meta }) => HTMLReactParser(config.body);
+export default DefaultMacro;

package/views/macros/DisableMacro.d.ts

@@ -0,0 +1,3 @@
+import { MacroProps } from '../BaseMacro';
+declare const DisableMacro: ({ name, config, meta }: MacroProps) => any;
+export default DisableMacro;

package/views/macros/DisableMacro.jsx

@@ -0,0 +1,2 @@
+const DisableMacro = ({ name, config, meta }) => (config.body);
+export default DisableMacro;