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

package/src/guillotine/fetchGuillotine.ts

@@ -0,0 +1,61 @@
+import type {ContentApiBaseBody, GuillotineResult, ProjectLocaleConfig} from '../types';
+
+
+import {fetchFromApi} from './fetchFromApi';
+
+
+/** Guillotine-specialized fetch, using the generic fetch above */
+export async function fetchGuillotine<Data = Record<string, unknown>>(
+    contentApiUrl: string,
+    body: ContentApiBaseBody,
+    projectConfig: ProjectLocaleConfig,
+    headers?: {},
+): Promise<GuillotineResult> {
+    if (typeof body.query !== 'string' || !body.query.trim()) {
+        return {
+            error: {
+                code: '400',
+                message: `Invalid or missing query. JSON.stringify(query) = ${JSON.stringify(body.query)}`,
+            },
+        };
+    }
+    const path = body.variables?.path;
+    const pathMessage = path ? JSON.stringify(path) : '';
+    return await fetchFromApi<Data>(
+        contentApiUrl,
+        body,
+        projectConfig,
+        headers,
+    )
+        .then(json => {
+            let errors: any[] = json.errors; // fetchFromApi ensures json is an object
+
+            if (errors) {
+                if (!Array.isArray(errors)) {
+                    errors = [errors];
+                }
+                console.error(`${errors.length} error(s) when fetching data from: ${contentApiUrl}`);
+                console.error(`headers: ${JSON.stringify(headers, null, 2)} \nvariables: ${JSON.stringify(body.variables, null, 2)}`);
+                errors.forEach(error => {
+                    console.error(error);
+                });
+
+                return {
+                    error: {
+                        code: '500',
+                        message: `Server responded with ${errors.length} error(s), probably from guillotine - see log.`,
+                    },
+                };
+            }
+
+            return json.data;
+        })
+        .catch((err) => {
+            console.warn(`Client-side error when trying to fetch data ${pathMessage}`, err);
+            try {
+                return {error: JSON.parse(err.message)};
+            } catch (e2) {
+                return {error: {code: 'Client-side error', message: err.message}};
+            }
+        });
+}

package/src/guillotine/fetchMetaData.ts

@@ -0,0 +1,32 @@
+import type {
+    ContentApiBaseBody,
+    MetaResult,
+    ProjectLocaleConfig,
+} from '../types';
+
+
+import {getMetaQuery, pageFragmentQuery} from './getMetaData';
+import {fetchGuillotine} from './fetchGuillotine';
+
+
+export const fetchMetaData = async (
+    contentApiUrl: string,
+    xpContentPath: string,
+    projectConfig: ProjectLocaleConfig,
+    headers?: {},
+): Promise<MetaResult> => {
+    const body: ContentApiBaseBody = {
+        query: getMetaQuery(pageFragmentQuery()),
+        variables: {
+            path: xpContentPath,
+        },
+    };
+    const metaResult = await fetchGuillotine<MetaResult>(contentApiUrl, body, projectConfig, headers);
+    if (metaResult.error) {
+        return metaResult;
+    } else {
+        return {
+            meta: metaResult?.guillotine?.get,
+        };
+    }
+};

package/src/guillotine/getCleanContentPathArrayOrThrow400.ts

@@ -0,0 +1,22 @@
+/** Checks a site-relative contentPath as a slash-delimited string or a string array, and returns a pure site-relative path string (no double slashes, starts with a slash, does not end with one). */
+export const getCleanContentPathArrayOrThrow400 = (contentPath: string | string[] | undefined): string => {
+    if (contentPath === undefined) {
+        return '';
+    }
+    const isArray = Array.isArray(contentPath);
+
+    if (!isArray) {
+        if (typeof contentPath !== '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)})`,
+            }));
+        }
+
+        return contentPath;
+
+    } else {
+        return (contentPath).join('/');
+    }
+};

package/src/guillotine/getComponentConfig.ts

@@ -0,0 +1,7 @@
+import type {PageComponent} from '../types';
+
+
+export function getComponentConfig(cmp?: PageComponent) {
+    const cmpData = cmp && cmp[cmp.type];
+    return cmpData && 'config' in cmpData ? cmpData.config : undefined;
+}

package/src/guillotine/getContentAndComponentPaths.ts

@@ -0,0 +1,11 @@
+const COMPONENT_PATH_KEY = /\/?_\/component/;   // first slash is optional for root components
+
+export const getContentAndComponentPaths = (requestPath: string): string[] => {
+    let contentPath, componentPath;
+    if (COMPONENT_PATH_KEY.test(requestPath)) {
+        [contentPath, componentPath] = requestPath.split(COMPONENT_PATH_KEY);
+    } else {
+        contentPath = requestPath;
+    }
+    return [contentPath, componentPath];
+};

package/src/guillotine/getMetaData.ts

@@ -0,0 +1,73 @@
+import {ComponentRegistry} from '../common/ComponentRegistry';
+import {configQuery} from './metadata/configQuery';
+import {richTextQuery} from './metadata/richTextQuery';
+import {indent} from '../utils/indent';
+
+
+const partConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getParts());
+};
+
+const layoutConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getLayouts());
+};
+
+const pageConfigQuery = (): string => {
+    return configQuery(ComponentRegistry.getPages());
+};
+
+
+/*
+    IMPORTANT: make sure to transform your queries into functions too when using this function inside them !!!
+ */
+const componentsQuery = () => `type
+path
+page {
+    descriptor
+${indent(pageConfigQuery(), 4)}
+    template {
+      _path
+    }
+}
+layout {
+    descriptor
+${indent(layoutConfigQuery(), 4)}
+}
+text {
+${indent(richTextQuery('value'), 4)}
+}
+part {
+    descriptor
+${indent(partConfigQuery(), 4)}
+}
+image {
+    caption
+    image {
+      imageUrl (type:absolute, scale: "width-768")
+    }
+}`;
+
+// THIS QUERY DOES NOT SUPPORT NESTED FRAGMENTS
+export const pageFragmentQuery = () => `components(resolveFragment: false, resolveTemplate: true) {
+    fragment {
+        id
+        fragment {
+            components {
+${indent(componentsQuery(),16)}
+            }
+        }
+    }
+${indent(componentsQuery(),4)}
+}`;
+
+export function getMetaQuery(pageFragment?: string): string {
+    return `query($path:ID!) {
+    guillotine {
+        get(key:$path) {
+            _path
+            type
+${indent(pageFragment || '', 12)}
+        }
+    }
+}`;
+}

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>
+    );
+};