@enonic/nextjs-adapter 3.3.0-B1 → 3.3.0-B2

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

package/src/views/RichTextView.tsx

@@ -1,106 +0,0 @@
-import type {MetaData, RichTextViewProps, Replacer as NextReplacer, RichTextData, MacroData} from '../types';
-
-import {getUrl, UrlProcessor} from '../common/UrlProcessor';
-import BaseMacro from './BaseMacro';
-import Link from 'next/link';
-import {useMemo} from 'react';
-import type {
-    MacroComponentParams,
-    LinkComponentParams,
-    ImageComponentParams,
-    Replacer as ComponentsReplacer,
-    ExtendedRichTextData,
-    ComponentDataAndProps,
-    MacroComponentData
-} from '@enonic/react-components';
-import {RichText, RichTextMetaData} from '@enonic/react-components';
-import type {DOMNode} from 'html-react-parser';
-import {LiteralUnion, TextComponent} from '@enonic-types/core';
-
-interface ExtraRichTextProps {
-    nextMeta: MetaData;
-    renderInEditMode?: boolean;
-}
-
-const RichTextView = (props: RichTextViewProps) => {
-    const component: TextComponent = useMemo(() => ({
-        type: 'text',
-        path: props.meta.path,
-        text: props.data.processedHtml
-    }), [props.meta.path, props.data.processedHtml]);
-
-    return <RichText<ExtraRichTextProps>
-        data={wrapData(props.data)}
-        meta={toRichTextMetaData(props.meta)}
-        nextMeta={props.meta}
-        component={component}
-        className={props.className}
-        tag={props.tag}
-        replacer={wrapReplacer(props.customReplacer, props.meta, props.renderMacroInEditMode)}
-        renderInEditMode={props.renderMacroInEditMode ?? true}
-        Macro={MacroAdapter}
-        Link={LinkAdapter}
-        Image={ImageAdapter}
-    />;
-};
-
-function wrapReplacer(nextReplacer: NextReplacer | undefined, meta: MetaData,
-    renderMacroInEditMode: boolean): ComponentsReplacer<ExtraRichTextProps> {
-    if (!nextReplacer) {
-        return null;
-    }
-    return ({el, data}: { el: DOMNode, data: RichTextData, mode?: LiteralUnion<RequestMode> }) => {
-        return nextReplacer(el, data, meta, renderMacroInEditMode);
-    };
-}
-
-function wrapData(data: RichTextData): ExtendedRichTextData {
-    if (!data.macros || !data.macros.length) {
-        return data as ExtendedRichTextData;
-    }
-    const macroComponents = data.macros.map(macroData => {
-        return {
-            component: {
-                type: 'macro',
-                ref: macroData.ref,
-                name: macroData.name,
-                descriptor: macroData.descriptor
-            },
-            data: {
-                name: macroData.name,
-                descriptor: macroData.descriptor,
-                config: macroData.config || {}
-            }
-        } as ComponentDataAndProps<MacroComponentData>;
-    });
-    return {
-        ...data,
-        macroComponents
-    };
-}
-
-function MacroAdapter(props: MacroComponentParams<ExtraRichTextProps>) {
-    const {children, component, data, common, meta, nextMeta, renderInEditMode} = props;
-
-    return <BaseMacro data={data as Omit<MacroData, 'ref'>} meta={nextMeta} renderInEditMode={renderInEditMode}>{children}</BaseMacro>;
-}
-
-function LinkAdapter(props: LinkComponentParams<ExtraRichTextProps>) {
-    return <Link href={getUrl(props.href, props.nextMeta)}>{props.children}</Link>;
-}
-
-function ImageAdapter(props: ImageComponentParams<ExtraRichTextProps>) {
-    const srcSet = props.srcSet?.length ? UrlProcessor.processSrcSet(props.srcSet, props.nextMeta) : undefined;
-    return <img src={getUrl(props.src, props.nextMeta)} style={props.style} alt={props.alt} sizes={props.sizes} srcSet={srcSet}/>;
-}
-
-function toRichTextMetaData(meta: MetaData): RichTextMetaData {
-    return {
-        type: meta.type,
-        mode: meta.renderMode,
-        path: meta.path,
-        id: meta.id
-    }
-}
-
-export default RichTextView;

package/src/views/SingleComponent.tsx

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-/** Render only one component as a result of a request from XP-side .../_/component/... during edit refresh. */
-import type {FetchContentResult} from '../types';
-
-
-import BaseComponent from './BaseComponent';
-
-
-const SingleComponent = ({meta, common}: FetchContentResult) => {
-
-    if (!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/src/views/StaticContent.tsx

@@ -1,39 +0,0 @@
-import {StaticContentProps} from '../types';
-
-
-import {createElement, createRef} from 'react';
-
-
-function useStaticContent(ref, isServer) {
-    if (isServer) {
-        return false;
-    }
-
-    if (ref?.current?.innerHTML === '') {
-        return false;
-    }
-
-    return true;
-}
-
-
-export default function StaticContent({children, element = 'div', condition = true, ...props}: StaticContentProps) {
-    const isServer = typeof window === 'undefined';
-    const ref = createRef();
-    const isStatic = useStaticContent(ref, isServer);
-
-    // avoid re-render on the client
-    if (isStatic && condition) {
-        return createElement(element, {
-            ...props,
-            ref,
-            suppressHydrationWarning: true,
-            dangerouslySetInnerHTML: {__html: ''}
-        });
-    }
-
-    // just render if:
-    // - condition is false
-    // - we're in the server or a spa navigation
-    return createElement(element, props, ...[].concat(children));
-}

package/src/views/Text.tsx

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import type {MetaData, TextData} from '../types';
-
-
-import RichTextView from './RichTextView';
-
-
-interface Props {
-    meta: MetaData
-    component: TextData
-    path: string
-}
-
-
-const DefaultTextView = ({component, meta, path}: Props) => (
-    <RichTextView data={component.value} meta={meta} renderMacroInEditMode={false}/>
-);
-
-export default DefaultTextView;

package/src/views/macros/DefaultMacro.tsx

@@ -1,9 +0,0 @@
-import type {MacroProps} from '../../types';
-import HTMLReactParser from 'html-react-parser';
-
-
-const DefaultMacro = ({name, config, meta}: MacroProps) => (
-    HTMLReactParser(config.body) as JSX.Element
-);
-
-export default DefaultMacro;

package/src/views/macros/DisableMacro.tsx

@@ -1,8 +0,0 @@
-import type {MacroProps} from '../../types';
-
-
-const DisableMacro = ({name, config, meta}: MacroProps) => (
-    config.body
-);
-
-export default DisableMacro;