@enonic/nextjs-adapter 3.0.0-B3 → 3.0.0-B5

package/src/guillotine/getParentRegion.ts

@@ -0,0 +1,59 @@
+import type {
+    PageComponent,
+    PageRegion,
+    PathFragment,
+    RegionTree,
+} from '../types';
+
+
+import {XP_COMPONENT_TYPE} from '../common/constants';
+import {prefixLayoutPath} from './prefixLayoutPath';
+
+
+export function getParentRegion(
+    source: RegionTree,
+    contentType: string,
+    cmpPath: PathFragment[],
+    components: PageComponent[] = [],
+    createMissing ? : boolean,
+): PageRegion | undefined {
+    let currentTree: RegionTree = source;
+    let currentRegion: PageRegion | undefined;
+    let parentPath = '';
+
+    for (let i = 0; i < cmpPath.length; i++) {
+        const pathFragment = cmpPath[i];
+        const regionName = pathFragment.region;
+        parentPath += `/${pathFragment.region}/${pathFragment.index}`;
+        currentRegion = currentTree[regionName];
+
+        if (!currentRegion) {
+            if (createMissing) {
+                currentRegion = {
+                    name: regionName,
+                    components: [],
+                };
+                currentTree[regionName] = currentRegion;
+            } else {
+                throw `Region [${regionName}] was not found`;
+            }
+        }
+
+        if (i < cmpPath.length - 1) {
+            // look for layouts inside if this is not the last path fragment
+
+            const layout = components.find((cmp: PageComponent) => {
+                return cmp.type === XP_COMPONENT_TYPE.LAYOUT && prefixLayoutPath(contentType, cmp.path) === parentPath;
+            });
+            if (!layout) {
+                throw `Layout [${parentPath}] not found among components, but needed for component [${JSON.stringify(cmpPath, null, 2)}]`;
+            }
+            if (!layout.regions) {
+                layout.regions = {};
+            }
+            currentTree = layout.regions;
+        }
+    } // for
+
+    return currentRegion;
+}

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';