@enonic/nextjs-adapter 3.2.2 → 3.3.0-B2

package/src/utils/getLocaleMappings.ts

@@ -1,36 +0,0 @@
-import type {LocaleMappings} from '../types';
-
-
-import {ENV_VARS} from '../common/constants';
-import {MAPPINGS} from '../common/env';
-
-
-// NOTE: Dissallowing slash and any whitespace in 2nd capture group.
-const PROJECT_CONFIG_REGEXP = /^([\w-]+):([^/\s]+)(\/[\w.-]+)?$/i;
-
-
-export function getLocaleMappings(): LocaleMappings {
-    const str = MAPPINGS;
-    if (!str?.length) {
-        throw new Error(`Did you forget to define "${ENV_VARS.MAPPINGS}" 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/getRenderMode.ts

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

@@ -1,30 +0,0 @@
-import type {Context} from '../types';
-import {PROJECT_ID_HEADER} from '../common/constants';
-import {getLocaleMappings} from './getLocaleMappings';
-import {getLocaleMappingByProjectId} from './getLocaleMappingByProjectId';
-
-
-export function getRequestLocaleInfo(context: Context) {
-    let locale: string;
-    const configs = getLocaleMappings();
-    const locales = Object.keys(configs);
-    const defaultLocale = locales.find((locale) => configs[locale].default);
-    const projectId = context.headers?.get(PROJECT_ID_HEADER);
-    if (projectId) {
-        locale = getLocaleMappingByProjectId(projectId, false)?.locale;
-
-    } else {
-        locale = context.locale;
-        /* Disabled to prevent situation when www.site.com redirects to www.site.com/no when accept-header is set to 'no'
-
-        if (!locale) {
-            const acceptLang = context.headers?.get('accept-language') || '';
-            const langs = new Negotiator({headers: {'accept-language': acceptLang}}).languages();
-            locale = localeMatcher(langs, locales, defaultLocale);
-        }*/
-        if (!locale) {
-            locale = defaultLocale;
-        }
-    }
-    return {locale, locales, defaultLocale};
-}

package/src/utils/getXpBaseUrl.ts

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

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

package/src/utils/sanitizeGraphqlName.ts

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

@@ -1,156 +0,0 @@
-import React, {Suspense} from '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 '../client/getClientHydratedHtml';
-import {enonicDebug} from '../utils/enonicLog';
-import {getServerRenderedHtml} from '../server/getServerRenderedHtml';
-
-
-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;
-
-    enonicDebug('BaseComponent', type, cmpData);
-
-    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) && isComponentOutputEmpty(ComponentView)) {
-        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: <strong>{descriptor}</strong>. Did you forget to register it ?
-            </p>
-        </div>
-    );
-};
-
-const isComponentOutputEmpty = (component: React.ReactElement) => {
-    if (typeof document !== 'undefined') {
-        // render component on the client to see if it's empty
-        return !getClientHydratedHtml(component)?.length;
-    } else {
-        // render component on the server to see if it's empty
-        // Suspense is needed to render component on the server
-        return getServerRenderedHtml(<Suspense fallback={<p>Loading...</p>}>{component}</Suspense>) === '<!--$--><!--/$-->';
-    }
-};
-
-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

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

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

@@ -1,105 +0,0 @@
-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';
-import {shouldShowMissingView, MissingComponent} from './BaseComponent';
-import React from 'react';
-
-
-const unescape = require('unescape');
-
-export const MACRO_DISABLE = 'system:disable';
-export const MACRO_EMBED = 'system:embed';
-
-
-const BaseMacro = (props: BaseMacroProps) => {
-    const {data, children, 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) {
-            // NB. config body takes precedence over children
-
-            // 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 if (children) {
-            return <>
-                {`[${data.name}${attrs}]`}
-                {children}
-                {`[/${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}>{children}</MacroView>;
-    } else if (data.descriptor) {
-        console.warn(`BaseMacro: can not render macro '${data.descriptor}': no next view or catch-all defined`);
-        if (shouldShowMissingView(meta)) {
-            return <MissingComponent type="macro" descriptor={data.descriptor}/>;
-        }
-    }
-    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

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

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

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

package/src/views/Fragment.tsx

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

package/src/views/MainView.tsx

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import type {FetchContentResult} from '../types';
-
-
-import {XP_REQUEST_TYPE} from '../common/constants';
-import SingleComponent from './SingleComponent';
-import BaseContent from './BaseContent';
-
-
-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;

package/src/views/PropsView.tsx

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-
-interface Props {
-    label: string
-    data: any
-}
-
-const PropsView = (props: any) => {
-    return (
-        <div className='debug'
-            style={{margin: '10px', padding: '10px', border: '2px solid lightgrey'}}>
-            <DataDump label='Page' data={props.page}/>
-            <DataDump label='Part' data={props.part}/>
-            <DataDump label='Layout' data={props.layout}/>
-            <DataDump label='Data' data={props.data}/>
-            <DataDump label='Common' data={props.common}/>
-        </div>
-    );
-};
-
-export default PropsView;
-
-const DataDump = ({label, data}: Props) => (
-    (data && (
-            <>
-                {label && (
-                    <h5 style={{marginTop: '0', marginBottom: '0'}}>{label}:</h5>
-                )}
-                <pre style={{
-                    fontSize: '.8em',
-                    width: '100%',
-                    whiteSpace: 'pre-wrap',
-                    wordWrap: 'break-word',
-                }}>{JSON.stringify(data, null, 2)}</pre>
-            </>
-        )
-    ) || null
-);