@enonic/nextjs-adapter 3.2.1 → 3.3.0-B1

package/src/guillotine/fetchGuillotine.ts

@@ -3,32 +3,45 @@ import gqlmin from 'gqlmin';
 
 import {fetchFromApi} from './fetchFromApi';
 
+const XP_ERROR_PATTERN = '/_/error/';
 
 /** Guillotine-specialized fetch, using the generic fetch above */
 export async function fetchGuillotine<Data = Record<string, unknown>>(
     contentApiUrl: string,
     mapping: LocaleMapping,
-    options?: FetchOptions,
+    options?: FetchOptions
 ): Promise<GuillotineResult> {
     const body = options?.body;
+    const path = body?.variables?.path;
+
     if (typeof body.query !== 'string' || !body.query.trim()) {
         return {
             error: {
                 code: '400',
-                message: `Invalid or missing query. JSON.stringify(query) = ${JSON.stringify(body.query)}`,
-            },
+                message: `Invalid or missing query. JSON.stringify(query) = ${JSON.stringify(body.query)}`
+            }
         };
     } else {
-        // Minify the query to avoid hitting 200k space limit
-        body.query = gqlmin(body.query);
+        // special case for not sending XP generated error paths to guillotine
+        const pathArr = path?.split(XP_ERROR_PATTERN);
+        if (pathArr?.length === 2) {
+            return {
+                error: {
+                    code: pathArr[1],
+                    message: `XP error URL detected`
+                }
+            }
+        } else {
+            // Minify the query to avoid hitting 200k space limit
+            body.query = gqlmin(body.query);
+        }
     }
 
-    const path = body?.variables?.path;
     const pathMessage = path ? JSON.stringify(path) : '';
     return await fetchFromApi<Data>(
         contentApiUrl,
         mapping,
-        options,
+        options
     )
         .then(json => {
             let errors: any[] = json.errors; // fetchFromApi ensures json is an object
@@ -45,8 +58,8 @@ export async function fetchGuillotine<Data = Record<string, unknown>>(
                 return {
                     error: {
                         code: '500',
-                        message: `Server responded with ${errors.length} error(s), probably from guillotine - see log.`,
-                    },
+                        message: `Server responded with ${errors.length} error(s), probably from guillotine - see log.`
+                    }
                 };
             }
 

package/src/guillotine/fetchMetaData.ts

@@ -9,23 +9,23 @@ export const fetchMetaData = async (
     contentApiUrl: string,
     xpContentPath: string,
     mapping: LocaleMapping,
-    headers?: GuillotineRequestHeaders,
+    headers?: GuillotineRequestHeaders
 ): Promise<MetaResult> => {
     const body: ContentApiBaseBody = {
         query: getMetaQuery(pageFragmentQuery()),
         variables: {
-            path: xpContentPath,
-        },
+            path: xpContentPath
+        }
     };
     const metaResult = await fetchGuillotine<MetaResult>(contentApiUrl, mapping, {
         body,
-        headers,
+        headers
     });
     if (metaResult.error) {
         return metaResult;
     } else {
         return {
-            meta: metaResult?.guillotine?.get,
+            meta: metaResult?.guillotine?.get
         };
     }
 };

package/src/guillotine/getCleanContentPathArrayOrThrow400.ts

@@ -10,7 +10,7 @@ export const getCleanContentPathArrayOrThrow400 = (contentPath: string | string[
             throw Error(JSON.stringify({
                 code: 400,
                 message: `Unexpected target content _path: contentPath must be a string or pure string array (contentPath=${JSON.stringify(
-                    contentPath)})`,
+                    contentPath)})`
             }));
         }
 
@@ -19,4 +19,4 @@ export const getCleanContentPathArrayOrThrow400 = (contentPath: string | string[
     } else {
         return (contentPath).join('/');
     }
-};
+};

package/src/guillotine/getParentRegion.ts

@@ -10,7 +10,7 @@ export function getParentRegion(
     contentType: string,
     cmpPath: PathFragment[],
     components: PageComponent[] = [],
-    createMissing ? : boolean,
+    createMissing ?: boolean
 ): PageRegion | undefined {
     let currentTree: RegionTree = source;
     let currentRegion: PageRegion | undefined;
@@ -26,7 +26,7 @@ export function getParentRegion(
             if (createMissing) {
                 currentRegion = {
                     name: regionName,
-                    components: [],
+                    components: []
                 };
                 currentTree[regionName] = currentRegion;
             } else {

package/src/guillotine/getQueryAndVariables.ts

@@ -1,8 +1,4 @@
-import type {
-    Context,
-    QueryAndVariables,
-    SelectedQueryMaybeVariablesFunc,
-} from '../types';
+import type {Context, QueryAndVariables, SelectedQueryMaybeVariablesFunc} from '../types';
 
 
 export function getQueryAndVariables(
@@ -10,7 +6,7 @@ export function getQueryAndVariables(
     path: string,
     context: Context,
     selectedQuery?: SelectedQueryMaybeVariablesFunc,
-    config?: any,
+    config?: any
 ): QueryAndVariables | undefined {
 
     let query, getVariables;
@@ -45,8 +41,8 @@ export function getQueryAndVariables(
         return {
             query,
             variables: getVariables ? getVariables(path, context, config) : {
-                path,
-            },
+                path
+            }
         };
     }
-}
+}

package/src/guillotine/metadata/configQuery.ts

@@ -7,7 +7,7 @@ import {sanitizeGraphqlName} from '../../utils/sanitizeGraphqlName';
 export const configQuery = (
     list: [string, ComponentDefinition][],
     includeAppName = true,
-    canUseConfigAsJson = true,
+    canUseConfigAsJson = true
 ): string => {
     const hasQueryList = list?.filter(([key, def]) => def.configQuery) || [];
     if (hasQueryList.length === 0) {
@@ -43,4 +43,4 @@ export const configQuery = (
                     ${Object.entries(configsByApp).map(entry => entry[0] + '{\n' + entry[1].join('\n') + '\n}')}
                 }`;
     }
-};
+};

package/src/guillotine/parseComponentPath.ts

@@ -1,10 +1,7 @@
 import type {PathFragment} from '../types';
 
 
-import {
-    FRAGMENT_CONTENTTYPE_NAME,
-    FRAGMENT_DEFAULT_REGION_NAME,
-} from '../common/constants';
+import {FRAGMENT_CONTENTTYPE_NAME, FRAGMENT_DEFAULT_REGION_NAME} from '../common/constants';
 
 
 export function parseComponentPath(contentType: string, path: string): PathFragment[] {
@@ -14,7 +11,7 @@ export function parseComponentPath(contentType: string, path: string): PathFragm
     while ((match = myRegexp.exec(path)) !== null) {
         matches.push({
             region: match[1],
-            index: +match[2],
+            index: +match[2]
         });
     }
     if (contentType === FRAGMENT_CONTENTTYPE_NAME) {
@@ -22,8 +19,8 @@ export function parseComponentPath(contentType: string, path: string): PathFragm
         // prepend FRAGMENT_DEFAULT_REGION_NAME to path to conform to page structure
         matches.unshift({
             region: FRAGMENT_DEFAULT_REGION_NAME,
-            index: 0,
+            index: 0
         });
     }
     return matches;
-}
+}

package/src/guillotine/processComponentConfig.ts

@@ -7,7 +7,7 @@ import {sanitizeGraphqlName} from '../utils/sanitizeGraphqlName';
 export function processComponentConfig(
     myAppName: string,
     myAppNameDashed: string,
-    cmp: PageComponent,
+    cmp: PageComponent
 ): void {
     const cmpData = cmp[cmp.type];
     if (cmpData && 'descriptor' in cmpData && cmpData.descriptor) {

package/src/guillotine/restrictComponentsToPath.ts

@@ -9,7 +9,7 @@ import {prefixFragmentCmpPath} from './prefixFragmentCmpPath';
 export function restrictComponentsToPath(
     contentType: string,
     components?: PageComponent[],
-    componentPath?: string,
+    componentPath?: string
 ): PageComponent[] {
     if (!componentPath || !components?.length) {
         return components || [];

package/src/i18n/LocaleContext.tsx

@@ -9,14 +9,14 @@ const LocaleContext = createContext<LocaleContextType>({
     dictionary: {},
     locale: '',
     localize: (key: string, ...args: any[]) => key,
-    setLocale: (locale: string) => Promise.resolve({}),
+    setLocale: (locale: string) => Promise.resolve({})
 });
 
 export const useLocaleContext = () => useContext(LocaleContext);
 
 export const LocaleContextProvider = ({
     children,
-    locale: localeProps = '',
+    locale: localeProps = ''
 }: {
     children: any
     locale?: string
@@ -51,7 +51,7 @@ export const LocaleContextProvider = ({
             setLocale,
             locale: currentLocale,
             dictionary,
-            localize,
+            localize
         }}>
             {children}
         </LocaleContext.Provider>

package/src/index.ts

@@ -2,7 +2,7 @@ export {
     APP_NAME,
     APP_NAME_DASHED,
     APP_NAME_UNDERSCORED,
-    IS_DEV_MODE,
+    IS_DEV_MODE
 } from './common/env';
 
 export type * from './types';
@@ -19,7 +19,7 @@ export {
     RENDER_MODE_HEADER,
     XP_BASE_URL_HEADER,
     XP_COMPONENT_TYPE,
-    XP_REQUEST_TYPE,
+    XP_REQUEST_TYPE
 } from './common/constants';
 
 
@@ -38,5 +38,5 @@ export {sanitizeGraphqlName} from './utils/sanitizeGraphqlName';
 export {
     UrlProcessor,
     getAsset,
-    getUrl,
+    getUrl
 } from './common/UrlProcessor';

package/src/types/component.ts

@@ -4,7 +4,7 @@ import type {
     RichTextData as CompsRichTextData,
     LinkData as CompsLinkData,
     ImageData as CompsImageData,
-    MacroData as CompsMacroData,
+    MacroData as CompsMacroData
 } from '@enonic/react-components';
 
 // Differs from ComponentDefinition to avoid storing catchAll on all components

package/src/types/componentProps.ts

@@ -9,8 +9,9 @@ import type {
     PageData,
     PartData,
     RichTextData,
-    RegionTree,
+    RegionTree
 } from './component';
+import type {ReactNode} from 'react';
 
 
 export interface BaseComponentProps {
@@ -29,7 +30,7 @@ export interface BaseLayoutProps {
 }
 
 export interface BaseMacroProps {
-    children: string | React.ReactNode;
+    children: ReactNode;
     data: Omit<MacroData, 'ref'>;
     meta: MetaData;
     renderInEditMode?: boolean;
@@ -86,7 +87,7 @@ export interface MetaData {
     apiUrl: string,
     baseUrl: string,
     locale: string,
-    defaultLocale: string,
+    defaultLocale: string
 }
 
 export interface PageProps {

package/src/types/guillotine.ts

@@ -65,7 +65,7 @@ export interface FetchContentResult extends Result {
 // Seems like NodeJS.fetch lowercases all headers, so we need to lowercase the
 // header names here.
 export interface GuillotineRequestHeaders {
-    [key: string]: string;
+    [key: string]: string | undefined;
     Cookie?: string
     locale: string
     locales: string

package/src/types/index.ts

@@ -16,12 +16,12 @@ export interface ContentApiBaseBody {
 
 export interface ContentApiBaseBodyVariables {
     path?: string,              // Full content item _path
-    [key: string]: string | number | undefined,
+    [key: string]: string | number | undefined
 }
 
 export interface ContentPathItem {
     contentPath: string[]
-    locale: string,
+    locale: string
 }
 
 export interface PathFragment {
@@ -51,7 +51,7 @@ export type FetchOptions = Omit<RequestInit, 'body'> & {
     body?: ContentApiBaseBody,
     next?: {
         revalidate?: boolean | number,
-        tags?: string[],
+        tags?: string[]
     }
 };
 

package/src/utils/buildGuillotineRequestHeaders.ts

@@ -1,17 +1,14 @@
 import type {Context, GuillotineRequestHeaders} from '../types';
 
 
-import {
-    GUILLOTINE_REQUEST_HEADERS,
-    JSESSIONID_HEADER,
-} from '../common/constants';
+import {GUILLOTINE_REQUEST_HEADERS, JSESSIONID_HEADER} from '../common/constants';
 
 
 export function buildGuillotineRequestHeaders({
     context,
     defaultLocale,
     locale,
-    locales,
+    locales
 }: {
     context: Context
     defaultLocale: string
@@ -21,7 +18,7 @@ export function buildGuillotineRequestHeaders({
     const guillotineRequestHeaders: GuillotineRequestHeaders = {
         [GUILLOTINE_REQUEST_HEADERS.DEFAULT_LOCALE]: defaultLocale,
         [GUILLOTINE_REQUEST_HEADERS.LOCALE]: locale,
-        [GUILLOTINE_REQUEST_HEADERS.LOCALES]: JSON.stringify(locales),
+        [GUILLOTINE_REQUEST_HEADERS.LOCALES]: JSON.stringify(locales)
     };
     const jsessionid = context.headers?.get(JSESSIONID_HEADER);
     if (jsessionid) {
@@ -29,4 +26,4 @@ export function buildGuillotineRequestHeaders({
             `${JSESSIONID_HEADER}=${jsessionid}`;
     }
     return guillotineRequestHeaders;
-}
+}

package/src/utils/fixDoubleSlashes.ts

@@ -1,3 +1,3 @@
 export function fixDoubleSlashes(str: string) {
     return str.replace(/(^|[^:/])\/{2,}/g, '$1/');
-}
+}

package/src/utils/getLocaleMappings.ts

@@ -29,7 +29,7 @@ export function getLocaleMappings(): LocaleMappings {
             default: index === 0,
             project,
             site,
-            locale: lang,
+            locale: lang
         };
         return config;
     }, {});

package/src/utils/getRenderMode.ts

@@ -1,14 +1,11 @@
 import type {Context} from '../types';
 
 
-import {
-    RENDER_MODE,
-    RENDER_MODE_HEADER,
-} from '../common/constants';
+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/views/BaseComponent.tsx

@@ -64,7 +64,7 @@ export const MissingComponent = ({descriptor, type}: { descriptor?: string, type
     return (
         <div style={{
             border: '2px dashed lightgrey',
-            padding: '16px',
+            padding: '16px'
         }}>
             <h3 style={{margin: 0}}>Missing component</h3>
             <p style={{marginBottom: 0, color: 'grey'}}>
@@ -96,7 +96,7 @@ export const ErrorComponent = ({type, descriptor, reason}: { type?: string, desc
     return (
         <div style={{
             border: '2px solid red',
-            padding: '16px',
+            padding: '16px'
         }}>
             <h3 style={{margin: 0, textTransform: 'capitalize'}}>{reason ? reason : 'Unknown error'}</h3>
             {descriptor && <p style={{color: 'grey'}}>{`${type}: ${descriptor}`}</p>}
@@ -110,7 +110,7 @@ export function shouldShowErrorView(meta: MetaData): boolean {
 
 function createEditorAttrs(type: XP_COMPONENT_TYPE): Record<string,string> {
     return {
-        [PORTAL_COMPONENT_ATTRIBUTE]: type,
+        [PORTAL_COMPONENT_ATTRIBUTE]: type
     };
 }
 
@@ -120,7 +120,7 @@ function createComponentAttrs(component: PageComponent, meta: MetaData, common?:
         component: component[type],
         path: component.path,
         meta,
-        common,
+        common
     };
 
     if (data) {
@@ -142,7 +142,7 @@ export const PlaceholderComponent = ({type, descriptor}: { type?: string, descri
     return (
         <div style={{
             border: '2px solid lightgrey',
-            padding: '16px',
+            padding: '16px'
         }}>
             <h3 style={{margin: 0, textTransform: 'capitalize'}}>Empty output</h3>
             {descriptor && <p style={{color: 'grey'}}>{`${type} '${descriptor}' output is empty`}</p>}

package/src/views/BaseContent.tsx

@@ -26,7 +26,7 @@ const BaseContent = (props: FetchContentResult) => {
             component: pageData,
             path: page?.path,
             meta,
-            common,
+            common
         };
         if (page?.data) {
             pageAttrs.data = page.data;

package/src/views/BaseMacro.tsx

@@ -31,7 +31,7 @@ const BaseMacro = (props: BaseMacroProps) => {
             // 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;
+            const bodyString = !data.descriptor.startsWith('system:') ? HTMLReactParser(config.body as string) : config.body;
             return <>
                 {`[${data.name}${attrs}]`}
                 {bodyString}

package/src/views/PropsView.tsx

@@ -30,7 +30,7 @@ const DataDump = ({label, data}: Props) => (
                     fontSize: '.8em',
                     width: '100%',
                     whiteSpace: 'pre-wrap',
-                    wordWrap: 'break-word',
+                    wordWrap: 'break-word'
                 }}>{JSON.stringify(data, null, 2)}</pre>
             </>
         )

package/src/views/RichTextView.tsx

@@ -1,23 +1,39 @@
-/// <reference types="react" />
-import type {MetaData, RichTextViewProps, Replacer as OldReplacer, MacroConfig, RichTextData} from '../types';
+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 type {MacroComponentParams, LinkComponentParams, ImageComponentParams, Replacer as NewReplacer} from '@enonic/react-components';
-import {RichText} from '@enonic/react-components';
+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 {sanitizeGraphqlName} from '../utils/sanitizeGraphqlName';
+import {LiteralUnion, TextComponent} from '@enonic-types/core';
 
 interface ExtraRichTextProps {
-    meta: MetaData;
+    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={props.data}
-        meta={props.meta}
+        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)}
@@ -28,36 +44,63 @@ const RichTextView = (props: RichTextViewProps) => {
     />;
 };
 
-function wrapReplacer(oldReplacer: OldReplacer | undefined, meta: MetaData, renderMacroInEditMode: boolean): NewReplacer {
-    if (!oldReplacer) {
+function wrapReplacer(nextReplacer: NextReplacer | undefined, meta: MetaData,
+    renderMacroInEditMode: boolean): ComponentsReplacer<ExtraRichTextProps> {
+    if (!nextReplacer) {
         return null;
     }
-    return (element: DOMNode, data: RichTextData) => {
-        return oldReplacer(element, data, meta, renderMacroInEditMode);
+    return ({el, data}: { el: DOMNode, data: RichTextData, mode?: LiteralUnion<RequestMode> }) => {
+        return nextReplacer(el, data, meta, renderMacroInEditMode);
     };
 }
 
-function MacroAdapter(props: MacroComponentParams<ExtraRichTextProps>) {
-    const {children, descriptor, config, meta, renderInEditMode} = props;
-    const name = descriptor.substring(descriptor.indexOf(':') + 1);
-    const data = {
-        name: name,
-        descriptor: descriptor,
-        config: {
-            [sanitizeGraphqlName(name)]: config as Record<string, MacroConfig>,
-        },
+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
     };
+}
 
-    return <BaseMacro data={data} meta={meta} renderInEditMode={renderInEditMode}>{children}</BaseMacro>;
+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.meta)}>{props.children}</Link>;
+    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.meta) : undefined;
-    return <img src={getUrl(props.src, props.meta)} style={props.style} alt={props.alt} sizes={props.sizes} srcSet={srcSet}/>;
+    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/StaticContent.tsx

@@ -28,7 +28,7 @@ export default function StaticContent({children, element = 'div', condition = tr
             ...props,
             ref,
             suppressHydrationWarning: true,
-            dangerouslySetInnerHTML: {__html: ''},
+            dangerouslySetInnerHTML: {__html: ''}
         });
     }
 

package/baseMappings.d.ts

@@ -1 +0,0 @@
-export {};