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

package/src/guillotine/getQueryAndVariables.ts

@@ -0,0 +1,52 @@
+import type {
+    Context,
+    QueryAndVariables,
+    SelectedQueryMaybeVariablesFunc,
+} from '../types';
+
+
+export function getQueryAndVariables(
+    type: string,
+    path: string,
+    context: Context,
+    selectedQuery?: SelectedQueryMaybeVariablesFunc,
+    config?: any,
+): QueryAndVariables | undefined {
+
+    let query, getVariables;
+
+    if (
+        typeof selectedQuery === 'string' || typeof selectedQuery === 'function'
+    ) {
+        query = selectedQuery;
+
+    } else if (Array.isArray(selectedQuery)) {
+        query = selectedQuery[0];
+        getVariables = selectedQuery[1];
+
+    } else if (typeof selectedQuery === 'object') {
+        query = selectedQuery.query;
+        getVariables = selectedQuery.variables;
+    }
+
+    if (getVariables && typeof getVariables !== 'function') {
+        throw Error(`getVariables for content type ${type} should be a function, not: ${typeof getVariables}`);
+    }
+
+    if (query && typeof query !== 'string' && typeof query !== 'function') {
+        throw Error(`Query for content type ${type} should be a string or function, not: ${typeof query}`);
+    }
+
+    if (typeof query === 'function') {
+        query = query(path, context, config);
+    }
+
+    if (query) {
+        return {
+            query,
+            variables: getVariables ? getVariables(path, context, config) : {
+                path,
+            },
+        };
+    }
+}

package/src/guillotine/metadata/configQuery.ts

@@ -0,0 +1,46 @@
+import type {ComponentDefinition} from '../../types';
+
+
+import {sanitizeGraphqlName} from '../../utils/sanitizeGraphqlName';
+
+
+export const configQuery = (
+    list: [string, ComponentDefinition][],
+    includeAppName = true,
+    canUseConfigAsJson = true,
+): string => {
+    const hasQueryList = list?.filter(([key, def]) => def.configQuery) || [];
+    if (hasQueryList.length === 0) {
+        return canUseConfigAsJson ? 'configAsJson' : '';
+    }
+
+    const configsByApp: Record<string,string[]> = {};
+    hasQueryList
+        .forEach((entry) => {
+            const nameParts = entry[0].split(':');
+            if (nameParts.length === 2) {
+                const sanitizedAppName = sanitizeGraphqlName(nameParts[0]);
+                let existingConfigs = configsByApp[sanitizedAppName];
+                if (!existingConfigs) {
+                    existingConfigs = [];
+                    configsByApp[sanitizedAppName] = existingConfigs;
+                }
+                existingConfigs.push(`${sanitizeGraphqlName(nameParts[1])}${entry[1].configQuery}`);
+            }
+        });
+
+    // Still query for configAsJson if at least one item has no configQuery defined
+    const configAsJsonQuery = canUseConfigAsJson && hasQueryList.length < list.length ? 'configAsJson' : '';
+
+    if (!includeAppName) {
+        return `${configAsJsonQuery}
+                config {
+                    ${Object.values(configsByApp).reduce((arr, curr) => arr.concat(curr), []).join('\n')}
+                }`;
+    } else {
+        return `${configAsJsonQuery}
+                config {
+                    ${Object.entries(configsByApp).map(entry => entry[0] + '{\n' + entry[1].join('\n') + '\n}')}
+                }`;
+    }
+};

package/src/guillotine/metadata/richTextQuery.ts

@@ -0,0 +1,34 @@
+import {ComponentRegistry} from '../../common/ComponentRegistry';
+import {configQuery} from './configQuery';
+import {indent} from '../../utils/indent';
+
+
+const macroConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getMacros(), false, false);
+};
+
+export const richTextQuery = (fieldName: string) => {
+    return `${fieldName}(processHtml:{type:absolute, imageWidths:[400, 800, 1200], imageSizes:"(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"}) {
+    processedHtml
+    macros {
+        ref
+        name
+        descriptor
+        ${indent(macroConfigQuery(), 8)}
+    }
+    links {
+        ref
+        media {
+            content {
+                _id
+            }
+        }
+    }
+    images {
+        ref
+        image {
+            _id
+        }
+    }
+}`;
+};

package/src/guillotine/parseComponentPath.ts

@@ -0,0 +1,29 @@
+import type {PathFragment} from '../types';
+
+
+import {
+    FRAGMENT_CONTENTTYPE_NAME,
+    FRAGMENT_DEFAULT_REGION_NAME,
+} from '../common/constants';
+
+
+export function parseComponentPath(contentType: string, path: string): PathFragment[] {
+    const matches: PathFragment[] = [];
+    let match;
+    const myRegexp = /(?:(\w+)\/(\d+))+/g;
+    while ((match = myRegexp.exec(path)) !== null) {
+        matches.push({
+            region: match[1],
+            index: +match[2],
+        });
+    }
+    if (contentType === FRAGMENT_CONTENTTYPE_NAME) {
+        // there is no main region in fragment content and the root component has '/' path
+        // prepend FRAGMENT_DEFAULT_REGION_NAME to path to conform to page structure
+        matches.unshift({
+            region: FRAGMENT_DEFAULT_REGION_NAME,
+            index: 0,
+        });
+    }
+    return matches;
+}

package/src/guillotine/prefixLayoutPath.ts

@@ -0,0 +1,16 @@
+import {
+    FRAGMENT_CONTENTTYPE_NAME,
+    FRAGMENT_DEFAULT_REGION_NAME,
+} from '../common/constants';
+
+
+export function prefixLayoutPath(contentType: string, path: string): string {
+    if (contentType !== FRAGMENT_CONTENTTYPE_NAME) {
+        return path;
+    } else {
+        // prepend FRAGMENT_DEFAULT_REGION_NAME to path to conform to page structure
+        // so that component with path '/' becomes /FRAGMENT_DEFAULT_REGION_NAME/0
+        // path /left/1 becomes /FRAGMENT_DEFAULT_REGION_NAME/0/left/1
+        return `/${FRAGMENT_DEFAULT_REGION_NAME}/0${path === '/' ? '' : path}`;
+    }
+}

package/src/guillotine/processComponentConfig.ts

@@ -0,0 +1,38 @@
+import type {PageComponent} from '../types';
+
+
+import {sanitizeGraphqlName} from '../utils/sanitizeGraphqlName';
+
+
+export function processComponentConfig(
+    myAppName: string,
+    myAppNameDashed: string,
+    cmp: PageComponent,
+): void {
+    const cmpData = cmp[cmp.type];
+    if (cmpData && 'descriptor' in cmpData && cmpData.descriptor) {
+        const [appName, cmpName] = cmpData.descriptor.split(':');
+        if (appName !== myAppName) {
+            return;
+        }
+        let config;
+        const configArray: Object[] = [];
+        if ('configAsJson' in cmpData && cmpData.configAsJson && cmpData.configAsJson[myAppNameDashed]) {
+            config = cmpData.configAsJson[myAppNameDashed][cmpName];
+            if (config) {
+                configArray.push(config);
+                delete cmpData.configAsJson;
+            }
+        }
+        const sanitizedAppName = sanitizeGraphqlName(appName);
+        if ('config' in cmpData && cmpData.config && cmpData.config[sanitizedAppName]) {
+            config = cmpData.config[sanitizedAppName][sanitizeGraphqlName(cmpName)];
+            if (config) {
+                configArray.push(config);
+            }
+        }
+        if (configArray.length) {
+            cmpData.config = Object.assign({}, ...configArray);
+        }
+    }
+}

package/src/guillotine/restrictComponentsToPath.ts

@@ -0,0 +1,45 @@
+import type {PageComponent} from '../types';
+
+
+import {XP_COMPONENT_TYPE} from '../common/constants';
+import {parseComponentPath} from './parseComponentPath';
+
+
+export function restrictComponentsToPath(
+    contentType: string,
+    components?: PageComponent[],
+    componentPath?: string,
+): PageComponent[] {
+    if (!componentPath || !components?.length) {
+        return components || [];
+    }
+
+    // filter components to the requested one only
+    const component = components.find(cmp => {
+        return cmp.path === componentPath;
+    });
+
+    if (!component) {
+        return [];
+    }
+
+    let result: PageComponent[] = [component];
+    if (component.type !== XP_COMPONENT_TYPE.LAYOUT) {
+        // remember to include all parent layouts too !
+        const cmpPath = parseComponentPath(contentType, component.path);
+        for (let i = cmpPath.length - 2; i >= 0; i--) {
+            const parentPath = cmpPath[i];
+            const parentCmp = components.find(cmp => cmp.path === `/${parentPath.region}/${parentPath.index}`);
+            if (parentCmp) {
+                result.unshift(parentCmp);
+            }
+        }
+    } else {
+        // It's a layout, include child components
+        const childCmps = components.filter(cmp => cmp.path !== component.path && cmp.path.startsWith(component.path));
+        if (childCmps.length) {
+            result = result.concat(childCmps);
+        }
+    }
+    return result;
+}

package/src/guillotine/validateData.ts

@@ -0,0 +1,11 @@
+import type {FetchContentResult} from '../types';
+
+
+import {validateNotFound} from './validateNotFound';
+import {validateShortcut} from './validateShortcut';
+
+
+export function validateData(props: FetchContentResult): void {
+    validateNotFound(props);
+    validateShortcut(props);
+}

package/src/guillotine/validateNotFound.ts

@@ -0,0 +1,20 @@
+import type {FetchContentResult} from '../types';
+
+
+import {notFound} from 'next/navigation';
+
+
+export function validateNotFound(props: FetchContentResult): void {
+    const {error} = props;
+    if (error) {
+        switch (error.code) {
+            case '404':
+                console.warn(error.code, error.message);
+                notFound();
+                break;
+            default:
+                console.error(error.code, error.message);
+                throw new Error(error.message);
+        }
+    }
+}

package/src/guillotine/validateShortcut.ts

@@ -0,0 +1,37 @@
+import type {FetchContentResult} from '../types';
+
+
+import {notFound, redirect, RedirectType} from 'next/navigation';
+import {RENDER_MODE} from '../common/constants';
+import {IS_DEV_MODE} from '../common/env';
+import {UrlProcessor} from '../common/UrlProcessor';
+
+
+export function validateShortcut(props: FetchContentResult): void {
+    const {data, meta, error} = props;
+    const pageUrl = data?.get?.data?.target?.pageUrl;
+    if (meta.type === 'base:shortcut' && pageUrl) {
+        if (meta.renderMode !== RENDER_MODE.NEXT) {
+            // do not show shortcut targets in preview/edit mode
+            console.warn(404, `Shortcuts are not available in ${RENDER_MODE.NEXT} render mode`);
+            notFound();
+        }
+
+        const destination = UrlProcessor.process(pageUrl, meta, true);
+        console.debug(`Redirecting shortcut content [${meta.path}] to`, destination);
+        redirect(destination, RedirectType.replace);
+    }
+
+    // we can not set 418 for static paths,
+    // but we can show 404 instead to be handled in CS
+    const canNotRender = meta && !meta.canRender && meta.renderMode !== RENDER_MODE.EDIT;
+
+    const catchAllInNextProdMode = meta.renderMode === RENDER_MODE.NEXT && !IS_DEV_MODE && meta.catchAll;
+
+    const isNotFound = (error && error.code === '404') || canNotRender || catchAllInNextProdMode;
+
+    if (isNotFound) {
+        console.warn(404, `Can not render content at [${meta.path}]`);
+        notFound();
+    }
+}

package/src/i18n/LocaleContext.tsx

@@ -0,0 +1,54 @@
+'use client';
+import type {Dict, LocaleContextType} from '../types';
+
+import React, {createContext, useContext, useEffect, useState} from 'react';
+import {getPhrase, loadPhrases} from './i18n';
+
+
+const LocaleContext = createContext<LocaleContextType>({
+    dictionary: {},
+    locale: '',
+    localize: (key: string, ...args: any[]) => key,
+    setLocale: (locale: string) => Promise.resolve({}),
+});
+
+export const useLocaleContext = () => useContext(LocaleContext);
+
+export const LocaleContextProvider = ({
+    children,
+    locale: localeProps = '',
+}: {
+    children: any
+    locale?: string
+}) => {
+    const [currentLocale, setLocaleState] = useState(localeProps);
+    const [dictionary, setPhrasesState] = useState<Dict>({});
+
+    const setLocale = async (locale: string): Promise<Dict> => {
+        setLocaleState(locale);
+        return loadPhrases(locale).then((phrases) => {
+            setPhrasesState(phrases);
+            console.info(`Loaded client-side phrases for locale "${locale}"`);
+            return phrases;
+        });
+    };
+
+    useEffect(() => {
+        if (localeProps) {
+            void setLocale(localeProps); // void to avoid @typescript-eslint/no-floating-promises
+        }
+    }, []);
+
+    const localize = (key: string, ...args: any[]) => getPhrase(currentLocale, dictionary, key, ...args);
+
+    return (
+        <LocaleContext.Provider value={{
+            setLocale,
+            locale: currentLocale,
+            dictionary,
+            localize,
+        }}>
+            {children}
+        </LocaleContext.Provider>
+    );
+};

package/src/i18n/i18n.ts

@@ -0,0 +1,54 @@
+import type {Dict} from '../types';
+
+
+export class I18n {
+    private static locale = '';
+    private static dictionary: Dict = {};
+
+    public static async setLocale(locale: string): Promise<Dict> {
+        this.locale = locale;
+        return loadPhrases(locale).then((phrases) => {
+            this.dictionary = phrases;
+            console.info(`Loaded server-side phrases for locale "${locale}"`);
+            return phrases;
+        });
+    }
+
+    public static localize(key: string, ...args: any[]): string {
+        return getPhrase(this.locale, this.dictionary, key, ...args);
+    }
+
+    public static getLocale() {
+        return this.locale;
+    }
+
+    public static getDictionary() {
+        return this.dictionary;
+    }
+}
+
+export const loadPhrases = async (locale: string): Promise<Dict> => {
+    return import(`@phrases/${locale}.json`)
+        .then((module) => module.default)
+        .catch((e) => {
+            console.error(`Failed to load phrases for locale "${locale}"`, e);
+            return {};
+        });
+};
+
+export const getPhrase = (locale: string, dict: Dict, key: string, ...args: any[]) => {
+    const template = dict[key];
+    if (!template) {
+        console.warn(`Missing localization phrase for locale "${locale}": <${key}>`);
+        return `<${key}>`;
+    }
+    if (args.length) {
+        let index = -1;
+        return template.replace(/{(\d+)?}/g, (match, digit) => {
+            index++;
+            return args[digit || index] ?? match;
+        });
+    }
+    return template;
+};
+

package/src/index.ts

@@ -0,0 +1,42 @@
+export {
+    APP_NAME,
+    APP_NAME_DASHED,
+    APP_NAME_UNDERSCORED,
+    IS_DEV_MODE,
+} from './common/env';
+
+export type * from './types';
+
+export {ComponentRegistry} from './common/ComponentRegistry';
+
+export {
+    CATCH_ALL,
+    JSESSIONID_HEADER,
+    PORTAL_COMPONENT_ATTRIBUTE,
+    PORTAL_REGION_ATTRIBUTE,
+    PROJECT_ID_HEADER,
+    RENDER_MODE,
+    RENDER_MODE_HEADER,
+    XP_BASE_URL_HEADER,
+    XP_COMPONENT_TYPE,
+    XP_REQUEST_TYPE,
+} from './common/constants';
+
+
+export {richTextQuery} from './guillotine/metadata/richTextQuery';
+export {validateData} from './guillotine/validateData';
+
+export {I18n} from './i18n/i18n';
+
+export {getContentApiUrl} from './utils/getContentApiUrl';
+export {getProjectLocaleConfig} from './utils/getProjectLocaleConfig';
+export {getProjectLocaleConfigById} from './utils/getProjectLocaleConfigById';
+export {getProjectLocaleConfigByLocale} from './utils/getProjectLocaleConfigByLocale';
+export {getRequestLocaleInfo} from './utils/getRequestLocaleInfo';
+export {sanitizeGraphqlName} from './utils/sanitizeGraphqlName';
+
+export {
+    UrlProcessor,
+    getAsset,
+    getUrl,
+} from './common/UrlProcessor';

package/src/query/Shortcut.ts

@@ -0,0 +1,14 @@
+export const getShortcutQuery = `
+  query($path:ID!){
+    guillotine {
+      get(key:$path) {
+        ... on base_Shortcut {
+          data {
+            target {
+              pageUrl(type: absolute)
+            }
+          }
+        }
+      }
+    }
+  }`;

package/src/server.ts

@@ -0,0 +1,5 @@
+export {fetchContent} from './guillotine/fetchContent';
+export {fetchContentPathsForAllLocales} from './guillotine/fetchContentPathsForAllLocales';
+export {fetchContentPathsForLocale} from './guillotine/fetchContentPathsForLocale';
+export {fetchFromApi} from './guillotine/fetchFromApi';
+export {fetchGuillotine} from './guillotine/fetchGuillotine';

package/src/types/component.ts

@@ -0,0 +1,147 @@
+import type {XP_COMPONENT_TYPE} from '../common/constants';
+import type {Context} from './next';
+
+// Differs from ComponentDefinition to avoid storing catchAll on all components
+// catchAll is calculated in getType instead
+export interface ComponentDefinitionParams {
+    query?: SelectedQueryMaybeVariablesFunc
+    configQuery?: string
+    processor?: DataProcessor
+    view?: React.FunctionComponent<any>
+}
+
+/**
+ *  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; // will be set automatically depending on the binding
+    query?: SelectedQueryMaybeVariablesFunc,
+    configQuery?: string,
+    processor?: DataProcessor,
+    view?: React.FunctionComponent<any>
+}
+
+export interface ComponentDescriptor {
+    type?: ComponentDefinition;
+    component?: PageComponent;
+    queryAndVariables?: QueryAndVariables;
+}
+
+export type ComponentDictionary = Record<string,ComponentDefinitionParams>;
+
+// NB! Always return null or empty object from processor for next is unable to serialize undefined
+export type DataProcessor = (data: any, context?: Context, config?: any) => Promise<Record<string, any>>;
+
+export interface FragmentData {
+    id: string;
+    fragment: {
+        components: PageComponent[];
+    }
+}
+
+export interface ImageData {
+    ref: string;
+    image: {
+        id: string,
+    } | null,
+}
+
+export interface LayoutData {
+    descriptor: string;
+    config?: any;
+
+    [customKeysFromQuery: string]: any;
+}
+
+export interface LinkData {
+    ref: string,
+    media: {
+        content: {
+            id: string,
+        }
+    } | null,
+}
+
+export type MacroConfig = Record<string, any>;
+
+export interface MacroData {
+    ref: string
+    name: string
+    descriptor: string
+    config: Record<string, MacroConfig>
+}
+
+export interface PageComponent {
+    [key: string]: any; // keeps ts happy when accessing component data field by XP_COMPONENT_TYPE type
+    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 PageData {
+    descriptor: string;
+    config?: any;
+    template?: string | null;
+    regions?: RegionTree;
+}
+
+export interface PageRegion {
+    name: string;
+    components: PageComponent[];
+}
+
+export interface PartData {
+    descriptor: string;
+    config: any; // TODO NestedRecord?;
+
+    [customKeysFromQuery: string]: any;
+}
+
+export interface QueryAndVariables {
+    query: string
+    variables?: Record<string, any>
+}
+
+export type QueryGetter = (path: string, context?: Context, config?: any) => string;
+
+export type SelectedQueryMaybeVariablesFunc =
+    | string
+    | QueryGetter
+    | {
+        query: string | QueryGetter
+        variables: VariablesGetter
+    }
+    | [string | QueryGetter, VariablesGetter];
+
+export type RegionTree = Record<string, PageRegion>;
+
+export interface RichTextData {
+    processedHtml: string
+    links: LinkData[]
+    macros: MacroData[]
+    images: ImageData[]
+}
+
+export interface TextData {
+    value: RichTextData;
+}
+
+// TODO: also access as arguments: dataAsJson, pageAsJson, configAsJson from the first (meta) call here?
+//   Another option could be to let the component or page controller pass those values to NextJS by a header
+export type VariablesGetter = (path: string, context?: Context, config?: any) => VariablesGetterResult;
+
+export interface VariablesGetterResult {
+    [variables: string]: any
+    path: string
+}