@enonic/nextjs-adapter 2.0.0-B3 → 2.0.1

package/src/views/Region.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {PORTAL_REGION_ATTRIBUTE, RENDER_MODE} from '../utils';
+
+import BaseComponent from './BaseComponent';
+import {MetaData, PageComponent, PageData} from '../guillotine/getMetaData';
+
+export interface RegionProps {
+    name: string;
+    components?: PageComponent[];
+    className?: string;
+    common?: any;                  // Content is passed down for optional consumption in componentviews. TODO: Use a react contextprovider instead?
+    meta: MetaData;
+}
+
+export interface RegionsProps {
+    page: PageData | null;
+    name?: string;
+    common?: any;                  // Content is passed down for optional consumption in componentviews. TODO: Use a react contextprovider instead?
+    meta: MetaData;
+}
+
+/** Single region */
+export const RegionView = (props: RegionProps) => {
+    const {name, components, common, meta, className} = props;
+    const regionAttrs: { [key: string]: string } = {};
+
+    if (className) {
+        regionAttrs.className = className;
+    }
+
+    const children = (components || [])
+        .sort(sortPageComponentsByPath)
+        .map((component: PageComponent, i: number) => (
+            <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;
+    }
+
+    return <div {...regionAttrs}>{children}</div>;
+};
+
+
+/** Multiple regions, or only one if named in props.selected */
+const RegionsView = (props: RegionsProps) => {
+    const {page, name, meta, common} = props;
+    const regions = 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: string, i) => {
+                    const region = regions[name];
+                    return <RegionView key={i} {...region} common={common} meta={meta}/>;
+                })
+            }
+        </>
+    );
+};
+
+function sortPageComponentsByPath(aComp: PageComponent, bComp: PageComponent): number {
+    // 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.jsx → src/views/RichTextView.tsx}

@@ -1,16 +1,33 @@
 import React from 'react';
-import { getUrl, UrlProcessor } from '../UrlProcessor';
-import HTMLReactParser from 'html-react-parser';
-import { ElementType } from 'domelementtype';
+import {getUrl, UrlProcessor} from '../UrlProcessor';
+import {MetaData, RichTextData} from '../guillotine/getMetaData';
+import HTMLReactParser, {DOMNode} from 'html-react-parser';
+import {ElementType} from 'domelementtype';
+import {Element} from 'domhandler/lib';
 import BaseMacro from './BaseMacro';
-export function createReplacer(allData, meta, renderMacroInEditMode = true, customReplacer) {
+
+export type ReplacerResult = JSX.Element | object | void | undefined | null | false;
+
+export type Replacer = (domNode: DOMNode, data: RichTextData, meta: MetaData, renderMacroInEditMode: boolean) => ReplacerResult;
+
+type Props = {
+    data: RichTextData,
+    meta: MetaData,
+    className?: string,
+    tag?: string,
+    renderMacroInEditMode?: boolean,
+    customReplacer?: Replacer,
+};
+
+export function createReplacer(allData: RichTextData, meta: MetaData, renderMacroInEditMode = true, customReplacer?: Replacer): (domNode: DOMNode) => ReplacerResult {
     // eslint-disable-next-line react/display-name
-    return (domNode) => {
+    return (domNode: DOMNode): ReplacerResult => {
         if (domNode.type !== ElementType.Tag) {
             return domNode;
         }
-        const el = domNode;
-        let ref;
+
+        const el = domNode as Element;
+        let ref: string;
         switch (el.tagName) {
             case UrlProcessor.IMG_TAG:
                 ref = el.attribs[UrlProcessor.IMG_ATTR];
@@ -20,6 +37,7 @@ export function createReplacer(allData, meta, renderMacroInEditMode = true, cust
                         if (src) {
                             el.attribs['src'] = getUrl(src, meta);
                         }
+
                         const srcset = el.attribs['srcset'];
                         if (srcset) {
                             el.attribs['srcset'] = UrlProcessor.processSrcSet(srcset, meta);
@@ -30,6 +48,7 @@ export function createReplacer(allData, meta, renderMacroInEditMode = true, cust
             case UrlProcessor.LINK_TAG:
                 ref = el.attribs[UrlProcessor.LINK_ATTR];
                 const href = el.attribs['href'];
+
                 if (ref && href) {
                     el.attribs['href'] = getUrl(href, meta);
                 }
@@ -53,10 +72,12 @@ export function createReplacer(allData, meta, renderMacroInEditMode = true, cust
         return el;
     };
 }
-const RichTextView = ({ className, tag, data, meta, renderMacroInEditMode, customReplacer }) => {
-    const CustomTag = tag || 'section';
+
+const RichTextView = ({className, tag, data, meta, renderMacroInEditMode, customReplacer}: Props) => {
+    const CustomTag = tag as keyof JSX.IntrinsicElements || 'section';
     return <CustomTag className={className}>
-        {data.processedHtml ? HTMLReactParser(data.processedHtml, { replace: createReplacer(data, meta, renderMacroInEditMode, customReplacer) }) : ''}
+        {data.processedHtml ? HTMLReactParser(data.processedHtml, {replace: createReplacer(data, meta, renderMacroInEditMode, customReplacer)}) : ''}
     </CustomTag>;
 };
+
 export default RichTextView;

package/{views/SingleComponent.jsx → src/views/SingleComponent.tsx}

@@ -1,11 +1,17 @@
 /** 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)) {
+import {FetchContentResult} from '../guillotine/fetchContent';
+
+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

@@ -0,0 +1,40 @@
+import {createElement, createRef, ReactNode, useEffect, useState} from 'react';
+
+function useStaticContent(ref, isServer) {
+    if (isServer) {
+        return false;
+    }
+
+    if (ref?.current?.innerHTML === '') {
+        return false;
+    }
+
+    return true;
+}
+
+export interface StaticContentProps extends Record<string, any> {
+    children?: ReactNode | ReactNode[];
+    element?: string;
+    condition: boolean;
+}
+
+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

@@ -0,0 +1,15 @@
+import React from 'react';
+import {MetaData, TextData} from '../guillotine/getMetaData';
+import RichTextView from './RichTextView';
+
+type 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

@@ -0,0 +1,9 @@
+import React from 'react';
+import {MacroProps} from '../BaseMacro';
+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

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

package/ComponentRegistry.d.ts

@@ -1,64 +0,0 @@
-/// <reference types="react" />
-import { PageComponent } from './guillotine/getMetaData';
-import { Context } from './utils';
-/**
- *  Object that configures the handling of a particular content type. All attributes are optional (see examples below), and missing values will fall back to default behavior:
- *          - 'query' (used in fetchContent.ts) Guillotine query for fetching content data, may also have a function that supplies guillotine variables. So, 'query' can EITHER be only a query string, OR also add a get-guillotine-variables function. In the latter case, 'query' can be an object with 'query' and 'variables' attributes, or an array where the query string is first and the get-variables function is second. Either way, the get-variables function takes two arguments: path (content path, mandatory) and context (next.js-supplied Context from getServerSideProps etc. Optional, and requires that fetchContent is called with the context, of course).
- *          - 'props' (used in fetchContent.ts) is a function for processing props after fetching them
- *          - 'view' (used in BasePage.tsx) is a React component: top-level content-type-specific rendering with the props first fetched from guillotine (and then optionally preprocessed with the function in 'props').
- */
-export interface ComponentDefinition {
-    catchAll?: boolean;
-    query?: SelectedQueryMaybeVariablesFunc;
-    configQuery?: string;
-    processor?: DataProcessor;
-    view?: React.FunctionComponent<any>;
-}
-export type DataProcessor = (data: any, context?: Context, config?: any) => Promise<Record<string, any>>;
-export type VariablesGetter = (path: string, context?: Context, config?: any) => VariablesGetterResult;
-export type QueryGetter = (path: string, context?: Context, config?: any) => string;
-export type VariablesGetterResult = {
-    [variables: string]: any;
-    path: string;
-};
-export type SelectedQueryMaybeVariablesFunc = string | QueryGetter | {
-    query: string | QueryGetter;
-    variables: VariablesGetter;
-} | [
-    string | QueryGetter,
-    VariablesGetter
-];
-export declare const CATCH_ALL = "*";
-export declare class ComponentRegistry {
-    private static contentTypes;
-    private static pages;
-    private static components;
-    private static parts;
-    private static layouts;
-    private static macros;
-    private static commonQuery;
-    private static getSelector;
-    private static getType;
-    private static addType;
-    static getByComponent(component: PageComponent): ComponentDefinition | undefined;
-    static setCommonQuery(query: SelectedQueryMaybeVariablesFunc): void;
-    static getCommonQuery(): SelectedQueryMaybeVariablesFunc;
-    static addMacro(name: string, obj: ComponentDefinition): void;
-    static getMacro(name: string): ComponentDefinition | undefined;
-    static getMacros(): [string, ComponentDefinition][];
-    static getParts(): [string, ComponentDefinition][];
-    static getLayouts(): [string, ComponentDefinition][];
-    static getPages(): [string, ComponentDefinition][];
-    static getContentTypes(): [string, ComponentDefinition][];
-    static getComponents(): [string, ComponentDefinition][];
-    static addContentType(name: string, obj: ComponentDefinition): void;
-    static getContentType(name: string): ComponentDefinition | undefined;
-    static addPage(name: string, obj: ComponentDefinition): void;
-    static getPage(name: string): ComponentDefinition | undefined;
-    static addPart(name: string, obj: ComponentDefinition): void;
-    static getPart(name: string): ComponentDefinition | undefined;
-    static addLayout(name: string, obj: ComponentDefinition): void;
-    static getLayout(name: string): ComponentDefinition | undefined;
-    static addComponent(name: string, obj: ComponentDefinition): void;
-    static getComponent(name: string): ComponentDefinition | undefined;
-}

package/ComponentRegistry.js

@@ -1,121 +0,0 @@
-import { XP_COMPONENT_TYPE } from './utils';
-function toSelectorName(type) {
-    switch (type) {
-        case XP_COMPONENT_TYPE.PAGE:
-            return 'page';
-        case XP_COMPONENT_TYPE.LAYOUT:
-            return 'layout';
-        case XP_COMPONENT_TYPE.PART:
-            return 'part';
-    }
-}
-export const CATCH_ALL = '*';
-export class ComponentRegistry {
-    static getSelector(name) {
-        switch (name) {
-            case 'contentType':
-                return this.contentTypes;
-            case 'page':
-                return this.pages;
-            case 'component':
-                return this.components;
-            case 'layout':
-                return this.layouts;
-            case 'part':
-                return this.parts;
-            case 'macro':
-                return this.macros;
-        }
-    }
-    static getType(selectorName, typeName, useCatchAll = true) {
-        const selector = ComponentRegistry.getSelector(selectorName);
-        let type = selector[typeName];
-        if (type) {
-            type.catchAll = false;
-        }
-        else if (!type && useCatchAll) {
-            type = selector[CATCH_ALL];
-            if (type) {
-                type.catchAll = true;
-            }
-        }
-        return type;
-    }
-    static addType(selectorName, name, obj) {
-        const selector = ComponentRegistry.getSelector(selectorName);
-        const curr = selector[name];
-        selector[name] = curr ? Object.assign(curr, obj) : obj;
-    }
-    static getByComponent(component) {
-        const selName = toSelectorName(component.type);
-        const cmpData = component[component.type];
-        const desc = cmpData && 'descriptor' in cmpData ? cmpData.descriptor : component.path;
-        return selName && desc ? this.getType(selName, desc) : undefined;
-    }
-    static setCommonQuery(query) {
-        this.commonQuery = query;
-    }
-    static getCommonQuery() {
-        return this.commonQuery;
-    }
-    static addMacro(name, obj) {
-        return ComponentRegistry.addType('macro', name, obj);
-    }
-    static getMacro(name) {
-        return ComponentRegistry.getType('macro', name);
-    }
-    static getMacros() {
-        return Object.entries(this.macros);
-    }
-    static getParts() {
-        return Object.entries(this.parts);
-    }
-    static getLayouts() {
-        return Object.entries(this.layouts);
-    }
-    static getPages() {
-        return Object.entries(this.pages);
-    }
-    static getContentTypes() {
-        return Object.entries(this.contentTypes);
-    }
-    static getComponents() {
-        return Object.entries(this.components);
-    }
-    static addContentType(name, obj) {
-        return ComponentRegistry.addType('contentType', name, obj);
-    }
-    static getContentType(name) {
-        return ComponentRegistry.getType('contentType', name);
-    }
-    static addPage(name, obj) {
-        return ComponentRegistry.addType('page', name, obj);
-    }
-    static getPage(name) {
-        return ComponentRegistry.getType('page', name);
-    }
-    static addPart(name, obj) {
-        return ComponentRegistry.addType('part', name, obj);
-    }
-    static getPart(name) {
-        return ComponentRegistry.getType('part', name);
-    }
-    static addLayout(name, obj) {
-        return ComponentRegistry.addType('layout', name, obj);
-    }
-    static getLayout(name) {
-        return ComponentRegistry.getType('layout', name);
-    }
-    static addComponent(name, obj) {
-        return ComponentRegistry.addType('component', name, obj);
-    }
-    static getComponent(name) {
-        return ComponentRegistry.getType('component', name);
-    }
-}
-ComponentRegistry.contentTypes = {};
-ComponentRegistry.pages = {};
-ComponentRegistry.components = {};
-ComponentRegistry.parts = {};
-ComponentRegistry.layouts = {};
-ComponentRegistry.macros = {};

package/UrlProcessor.d.ts

@@ -1,25 +0,0 @@
-import { ImageData, LinkData, MetaData } from './guillotine/getMetaData';
-export declare class UrlProcessor {
-    static IMG_TAG: string;
-    static LINK_TAG: string;
-    static MACRO_TAG: string;
-    static IMG_ATTR: string;
-    static LINK_ATTR: string;
-    static MACRO_ATTR: string;
-    private static IMG_ATMT_REGEXP;
-    private static endSlashPattern;
-    private static startSlashPattern;
-    private static localhostPattern;
-    private static siteKey;
-    static process(url: string, meta: MetaData, serverSide?: boolean): string;
-    static setSiteKey(key: string): void;
-    static isMediaLink(ref: string, linkData: LinkData[]): boolean;
-    static isContentImage(ref: string, linkData: ImageData[]): boolean;
-    static processSrcSet(srcset: string, meta: MetaData): string;
-    private static stripApiUrl;
-    private static isAttachmentUrl;
-    private static startsWithHash;
-    private static isRelative;
-    private static getApiUrl;
-}
-export declare const getUrl: (url: string, meta: MetaData, serverSide?: boolean) => string;

package/baseMappings.d.ts

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

package/guillotine/fetchContent.d.ts

@@ -1,48 +0,0 @@
-import { MetaData, PageComponent } from './getMetaData';
-import { ContentPathItem, Context, LocaleProjectConfig } from '../utils';
-import { GetStaticPropsResult } from 'next';
-type Result = {
-    error?: {
-        code: string;
-        message: string;
-    } | null;
-};
-export type GuillotineResult = Result & {
-    [dataKey: string]: any;
-};
-export type FetchContentResult = Result & {
-    data: Record<string, any> | null;
-    common: Record<string, any> | null;
-    meta: MetaData;
-    page: PageComponent | null;
-};
-/**
- * Sends one query to the guillotine API and asks for content type, then uses the type to select a second query and variables, which is sent to the API and fetches content data.
- * @param contentPath string or string array: pre-split or slash-delimited _path to a content available on the API
- * @returns FetchContentResult object: {data?: T, error?: {code, message}}
- */
-export type ContentFetcher = (contentPath: string | string[], context?: Context) => Promise<FetchContentResult>;
-export type ContentApiBaseBody = {
-    query?: string;
-    variables?: {
-        path?: string;
-        [key: string]: string | number | undefined;
-    };
-};
-/** Generic fetch */
-export declare const fetchFromApi: (apiUrl: string, body: ContentApiBaseBody, projectConfig: LocaleProjectConfig, headers?: {}, method?: string) => Promise<any>;
-/** Guillotine-specialized fetch, using the generic fetch above */
-export declare const fetchGuillotine: (contentApiUrl: string, body: ContentApiBaseBody, projectConfig: LocaleProjectConfig, headers?: {}) => Promise<GuillotineResult>;
-/**
- * Default fetchContent function, built with params from imports.
- * It runs custom content-type-specific guillotine calls against an XP guillotine endpoint, returns content data, error and some meta data
- * Sends one query to the guillotine API and asks for content type, then uses the type to select a second query and variables, which is sent to the API and fetches content data.
- * @param contentPath string or string array: local (site-relative) path to a content available on the API (by XP _path - obtainable by running contentPath through getXpPath). Pre-split into string array, or already a slash-delimited string.
- * @param context object from Next, contains .query info
- * @returns FetchContentResult object: {data?: T, error?: {code, message}}
- */
-export declare const fetchContent: ContentFetcher;
-export declare function createResponse(props: FetchContentResult, context?: Context): GetStaticPropsResult<FetchContentResult>;
-export declare function fetchContentPathsForAllLocales(path: string, query?: string, countPerLocale?: number): Promise<ContentPathItem[]>;
-export declare function fetchContentPathsForLocale(path: string, config: LocaleProjectConfig, query?: string, count?: number): Promise<ContentPathItem[]>;
-export {};

package/guillotine/getMetaData.d.ts

@@ -1,94 +0,0 @@
-import { RENDER_MODE, XP_COMPONENT_TYPE, XP_REQUEST_TYPE } from '../utils';
-export declare const richTextQuery: (fieldName: string) => string;
-export declare const pageFragmentQuery: () => string;
-export declare function getMetaQuery(pageFragment?: string): string;
-export interface PageComponent {
-    [key: string]: any;
-    type: XP_COMPONENT_TYPE;
-    path: string;
-    page?: PageData;
-    part?: PartData;
-    layout?: LayoutData;
-    fragment?: FragmentData;
-    text?: TextData;
-    image?: any;
-    regions?: RegionTree;
-    data?: any;
-    error?: any;
-}
-export interface TextData {
-    value: RichTextData;
-}
-export interface RichTextData {
-    processedHtml: string;
-    links: LinkData[];
-    macros: MacroData[];
-    images: ImageData[];
-}
-export interface LinkData {
-    ref: string;
-    media: {
-        content: {
-            id: string;
-        };
-    } | null;
-}
-export interface MacroData {
-    ref: string;
-    name: string;
-    descriptor: string;
-    config: {
-        [name: string]: MacroConfig;
-    };
-}
-export interface ImageData {
-    ref: string;
-    image: {
-        id: string;
-    } | null;
-}
-export interface MacroConfig {
-    [key: string]: any;
-}
-export interface RegionTree {
-    [key: string]: PageRegion;
-}
-export interface PageRegion {
-    name: string;
-    components: PageComponent[];
-}
-export interface PartData {
-    descriptor: string;
-    config: any;
-    [customKeysFromQuery: string]: any;
-}
-export interface LayoutData {
-    descriptor: string;
-    config?: any;
-    [customKeysFromQuery: string]: any;
-}
-export interface PageData {
-    descriptor: string;
-    config?: any;
-    template?: string | null;
-    regions?: RegionTree;
-}
-export interface FragmentData {
-    id: string;
-    fragment: {
-        components: PageComponent[];
-    };
-}
-export interface MetaData {
-    type: string;
-    path: string;
-    requestType: XP_REQUEST_TYPE;
-    renderMode: RENDER_MODE;
-    requestedComponent?: PageComponent;
-    canRender: boolean;
-    catchAll: boolean;
-    apiUrl: string;
-    baseUrl: string;
-    locale: string;
-    defaultLocale: string;
-}