@enonic/nextjs-adapter 3.0.0-B2 → 3.0.0-B4

package/src/utils/getContentApiUrl.ts

@@ -0,0 +1,20 @@
+import type {Context} from '../types';
+
+
+import {RENDER_MODE} from '../common/constants';
+import {API_URL} from '../common/env';
+import {getProjectLocaleConfig} from './getProjectLocaleConfig';
+import {fixDoubleSlashes} from './fixDoubleSlashes';
+import {getRenderMode} from './getRenderMode';
+
+
+export function getContentApiUrl(context: Context): string {
+    const project = getProjectLocaleConfig(context).project;
+    const branch = getRenderMode(context) === RENDER_MODE.NEXT
+        ? 'master'
+        : getRenderMode(context) === RENDER_MODE.LIVE
+            ? 'master'
+            : 'draft';
+
+    return fixDoubleSlashes(`${API_URL}/${project}/${branch}`);
+}

package/src/utils/getProjectLocaleConfig.ts

@@ -0,0 +1,24 @@
+import type {Context, ProjectLocaleConfig} from '../types';
+
+
+import {PROJECT_ID_HEADER} from '../common/constants';
+import {getProjectLocaleConfigById} from './getProjectLocaleConfigById';
+import {getProjectLocaleConfigByLocale} from './getProjectLocaleConfigByLocale';
+
+
+export function getProjectLocaleConfig(context: Context): ProjectLocaleConfig {
+    const projectId = context.headers?.get(PROJECT_ID_HEADER);
+
+    let config: ProjectLocaleConfig;
+    if (projectId) {
+        // first use project id header
+        config = getProjectLocaleConfigById(projectId, false);
+    }
+    if (!config) {
+        // next try to use locale from url
+        // it will fall back to default locale if not found
+        config = getProjectLocaleConfigByLocale(context.locale);
+    }
+
+    return config;
+}

package/src/utils/getProjectLocaleConfigById.ts

@@ -0,0 +1,21 @@
+import type {ProjectLocaleConfig} from '../types';
+
+
+import {getProjectLocaleConfigs} from './getProjectLocaleConfigs';
+
+
+export function getProjectLocaleConfigById(projectId?: string, useDefault = true): ProjectLocaleConfig {
+    const configs = getProjectLocaleConfigs();
+
+    let config: ProjectLocaleConfig;
+    if (projectId) {
+        config = Object.values(configs).find(p => {
+            return p?.project?.toLowerCase() === projectId.toLowerCase();
+        });
+    }
+    if (!config && useDefault) {
+        config = Object.values(configs).find(c => c.default);
+    }
+
+    return config;
+}

package/src/utils/getProjectLocaleConfigByLocale.ts

@@ -0,0 +1,19 @@
+import type {ProjectLocaleConfig} from '../types';
+
+
+import {getProjectLocaleConfigs} from './getProjectLocaleConfigs';
+
+
+export function getProjectLocaleConfigByLocale(locale?: string, useDefault = true): ProjectLocaleConfig {
+    const configs = getProjectLocaleConfigs();
+
+    let config: ProjectLocaleConfig;
+    if (locale) {
+        config = configs[locale];
+    }
+    if (!config && useDefault) {
+        config = Object.values(configs).find(c => c.default);
+    }
+
+    return config;
+}

package/src/utils/getProjectLocaleConfigs.ts

@@ -0,0 +1,36 @@
+import type {ProjectLocalesConfig} from '../types';
+
+
+import {ENV_VARS} from '../common/constants';
+import {PROJECTS} from '../common/env';
+
+
+// NOTE: Dissallowing slash and any whitespace in 2nd capture group.
+const PROJECT_CONFIG_REGEXP = /^([\w-]+):([^/\s]+)(\/[\w.-]+)?$/i;
+
+
+export function getProjectLocaleConfigs(): ProjectLocalesConfig {
+    const str = PROJECTS;
+    if (!str?.length) {
+        throw new Error(`Did you forget to define "${ENV_VARS.PROJECTS}" environmental variable?
+        Format: <default-language>:<default-repository-name>/<default-site-path>,<language>:<repository-name>/<site-path>,...`);
+    }
+    return str.split(',').reduce((config, prjStr, index: number) => {
+        const trimmedprjStr = prjStr.trim();
+        if (!trimmedprjStr.length) {
+            return config;
+        }
+        const matches: RegExpExecArray = PROJECT_CONFIG_REGEXP.exec(trimmedprjStr);
+        if (!matches?.length) {
+            throw new Error(`Project "${prjStr}" doesn't match format: <default-language>:<default-repository-name>/<default-site-path>,<language>:<repository-name>/<site-path>`);
+        }
+        const [_full, lang, project, site] = matches;
+        config[lang] = {
+            default: index === 0,
+            project,
+            site,
+            locale: lang,
+        };
+        return config;
+    }, {});
+}

package/src/utils/getProjectLocales.ts

@@ -0,0 +1,6 @@
+import {getProjectLocaleConfigs} from './getProjectLocaleConfigs';
+
+
+export function getProjectLocales(): string[] {
+    return Object.keys(getProjectLocaleConfigs());
+}

package/src/utils/getRenderMode.ts

@@ -0,0 +1,14 @@
+import type {Context} from '../types';
+
+
+import {
+    RENDER_MODE,
+    RENDER_MODE_HEADER,
+} from '../common/constants';
+
+
+export const getRenderMode = (context: Context): RENDER_MODE => {
+    const value = context.headers?.get(RENDER_MODE_HEADER);
+    const enumValue = RENDER_MODE[(value as keyof typeof RENDER_MODE)?.toUpperCase()];
+    return enumValue || RENDER_MODE[process.env.RENDER_MODE] || RENDER_MODE.NEXT;
+};

package/src/utils/getRequestLocaleInfo.ts

@@ -0,0 +1,29 @@
+import type {Context} from '../types';
+
+
+import Negotiator from 'negotiator';
+import {match as localeMatcher} from '@formatjs/intl-localematcher';
+import {PROJECT_ID_HEADER} from '../common/constants';
+import {getProjectLocaleConfigs} from './getProjectLocaleConfigs';
+import {getProjectLocaleConfigById} from './getProjectLocaleConfigById';
+
+
+export function getRequestLocaleInfo(context: Context) {
+    let locale: string;
+    const configs = getProjectLocaleConfigs();
+    const locales = Object.keys(configs);
+    const defaultLocale = locales.find((locale) => configs[locale].default);
+    const projectId = context.headers?.get(PROJECT_ID_HEADER);
+    if (projectId) {
+        locale = getProjectLocaleConfigById(projectId, false)?.locale;
+
+    } else {
+        locale = context.locale;
+        if (!locale) {
+            const acceptLang = context.headers?.get('accept-language') || '';
+            const langs = new Negotiator({headers: {'accept-language': acceptLang}}).languages();
+            locale = localeMatcher(langs, locales, defaultLocale);
+        }
+    }
+    return {locale, locales, defaultLocale};
+}

package/src/utils/getXpBaseUrl.ts

@@ -0,0 +1,12 @@
+import type {Context} from '../types';
+
+
+import {XP_BASE_URL_HEADER} from '../common/constants';
+
+
+export const getXpBaseUrl = (context: Context): string => {
+    const header = context.headers?.get(XP_BASE_URL_HEADER) || '/';
+
+    // TODO: workaround for XP pattern controller mapping not picked up in edit mode
+    return header.replace(/\/edit\//, '/inline/');
+};

package/src/utils/indent.ts

@@ -0,0 +1,4 @@
+export const indent = (s: string, count = 2, indentChar = ' ') => s
+    .split('\n')
+    .map((line) => `${indentChar.repeat(count)}${line}`)
+    .join('\n');

package/src/utils/sanitizeGraphqlName.ts

@@ -0,0 +1,11 @@
+// sanitizes text according to graphql naming spec http://spec.graphql.org/October2021/#sec-Names
+export const sanitizeGraphqlName = (text: string) => {
+    if (!text || text.trim().length === 0) {
+        return '';
+    }
+    let result = text.replace(/([^0-9A-Za-z])+/g, '_');
+    if (result.length > 0 && /[0-9]/.test(result.charAt(0))) {
+        result = '_' + result;
+    }
+    return result;
+};

package/src/views/BaseComponent.tsx

@@ -0,0 +1,153 @@
+/// <reference types="react" />
+import type {BaseComponentProps, MetaData, PageComponent} from '../types';
+
+
+import {PORTAL_COMPONENT_ATTRIBUTE, RENDER_MODE, XP_COMPONENT_TYPE} from '../common/constants';
+import {IS_DEV_MODE} from '../common/env';
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import Empty from './Empty';
+import getClientHydratedHtml from './getClientHydratedHtml';
+
+
+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: 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 = 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 {
+            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 = renderComponent(ComponentView);
+        if (!outputHTML?.trim().length) {
+            // render some placeholder in case of empty output
+            ComponentView = <PlaceholderComponent type={type} descriptor={descriptor}/>;
+        }
+    }
+
+    if (meta.renderMode === RENDER_MODE.EDIT) {
+        return (
+            <div {...createEditorAttrs(type)}>
+                {ComponentView}
+            </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}: { 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>
+    );
+};
+
+const renderComponent = (component: React.ReactElement) => {
+    if (typeof document !== 'undefined') {
+        // render component on the client to see if it's empty
+        return getClientHydratedHtml(component);
+    } else {
+        // report non-empty output for server-side rendering
+        return '<div>Server-side rendered component</div>';
+    }
+};
+
+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}: { 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>
+    );
+};
+
+export function shouldShowErrorView(meta: MetaData): boolean {
+    return meta.renderMode === RENDER_MODE.EDIT;
+}
+
+function createEditorAttrs(type: XP_COMPONENT_TYPE): Record<string,string> {
+    return {
+        [PORTAL_COMPONENT_ATTRIBUTE]: type,
+    };
+}
+
+function createComponentAttrs(component: PageComponent, meta: MetaData, common?: any): Record<string,any> {
+    const {type, data, error} = component;
+    const cmpAttrs: Record<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}: { 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>
+    );
+};
+
+export function shouldShowPlaceholderView(meta: MetaData): boolean {
+    return meta.renderMode === RENDER_MODE.EDIT;
+}
+

package/src/views/BaseContent.tsx

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import type {BasePageProps, FetchContentResult} from '../types';
+
+
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import BasePage 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?.page;
+    const pageDesc = pageData?.descriptor;
+    const typeDef = ComponentRegistry.getContentType(meta.type);
+    const ContentTypeView = typeDef?.view;
+
+    if (ContentTypeView && !typeDef?.catchAll) {
+        return <ContentTypeView {...props}/>;
+    } else if (pageDesc) {
+        const pageAttrs: BasePageProps = {
+            component: pageData,
+            path: page?.path,
+            meta,
+            common,
+        };
+        if (page?.data) {
+            pageAttrs.data = page.data;
+        }
+        if (page?.error) {
+            pageAttrs.error = page.error;
+        }
+
+        return <BasePage {...pageAttrs}/>;
+    } else if (ContentTypeView) {
+        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,33 @@
+/// <reference types="react" />
+import type {BaseLayoutProps} from '../types';
+
+
+import {XP_COMPONENT_TYPE} from '../common/constants';
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import {MissingComponent, shouldShowMissingView} from './BaseComponent';
+
+
+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/BaseMacro.tsx

@@ -0,0 +1,94 @@
+/// <reference types="react" />
+import type {BaseMacroProps, MacroConfig} from '../types';
+
+
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import {RENDER_MODE} from '../common/constants';
+import {sanitizeGraphqlName} from '../utils/sanitizeGraphqlName';
+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: 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?.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?.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: any): any {
+    let parsedVal: any;
+    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: MacroConfig): string {
+    const attrs: string[] = Object.entries(config)
+        .filter(entry => entry[0] !== 'body')
+        .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,42 @@
+/// <reference types="react" />
+import type {BasePageProps} from '../types';
+
+
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import {XP_COMPONENT_TYPE} from '../common/constants';
+import {ErrorComponent, MissingComponent, shouldShowErrorView, shouldShowMissingView} from './BaseComponent';
+
+
+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,34 @@
+/// <reference types="react" />
+import type {BasePartProps} from '../types';
+
+
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import {XP_COMPONENT_TYPE} from '../common/constants';
+import {MissingComponent, shouldShowMissingView} from './BaseComponent';
+
+
+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/Empty.tsx

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+
+const Empty = () => <></>;
+
+export default Empty;

package/src/views/Fragment.tsx

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import type {FragmentProps, PageComponent} from '../types';
+
+
+import {FRAGMENT_DEFAULT_REGION_NAME, XP_COMPONENT_TYPE} from '../common/constants';
+import BaseComponent, {MissingComponent, shouldShowMissingView} from './BaseComponent';
+
+
+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;