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

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

package/src/types/componentProps.ts

@@ -0,0 +1,142 @@
+import {DOMNode} from 'html-react-parser';
+import type {
+    RENDER_MODE,
+    XP_REQUEST_TYPE,
+} from '../common/constants';
+import type {
+    FragmentData,
+    LayoutData,
+    MacroConfig,
+    MacroData,
+    PageComponent,
+    PageData,
+    PartData,
+    RichTextData,
+    RegionTree,
+} from './component';
+
+
+export interface BaseComponentProps {
+    component: PageComponent;
+    meta: MetaData;
+    common?: any;                  // Content is passed down for optional consumption in componentviews.
+    // TODO: Use a react contextprovider instead of "manually" passing everything down
+}
+
+export interface BaseLayoutProps {
+    component?: LayoutData;
+    path: string;
+    regions?: RegionTree;
+    common?: any;
+    meta: MetaData;
+}
+
+export interface BaseMacroProps {
+    data: MacroData;
+    meta: MetaData;
+    renderInEditMode?: boolean;
+}
+
+export interface BasePageProps {
+    component?: PageData;
+    path?: string;
+    common?: any;
+    data?: any;
+    error?: string;
+    meta: MetaData;
+}
+
+export interface BasePartProps {
+    component?: PartData;
+    path: string;
+    common?: any;
+    data?: any;
+    error?: string;
+    meta: MetaData;
+}
+
+export interface FragmentProps {
+    page?: PageData;
+    component?: FragmentData;
+    common?: any;
+    meta: MetaData;
+}
+
+export interface LayoutProps {
+    layout: LayoutData;
+    path: string;
+    common: any;
+    meta: MetaData;
+}
+
+export interface MacroProps {
+    name: string;
+    config: MacroConfig;
+    meta: MetaData;
+}
+
+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,
+}
+
+export interface PageProps {
+    page: PageData;
+    path: string;
+    data?: any;
+    common?: any; // Content is passed down to componentviews. TODO: Use a react contextprovider instead?
+    meta: MetaData;
+}
+
+export interface PartProps {
+    part: PartData
+    path: string
+    data?: any
+    // Content is passed down to componentviews. TODO: Use a react contextprovider instead?
+    common?: any
+    meta: MetaData
+}
+
+export interface RegionProps {
+    name: string
+    components?: PageComponent[]
+    className?: string
+    // Content is passed down for optional consumption in componentviews. TODO: Use a react contextprovider instead?
+    common?: any
+    meta: MetaData
+}
+
+export interface RegionsProps {
+    page: PageData | null;
+    name?: string;
+    // Content is passed down for optional consumption in componentviews. TODO: Use a react contextprovider instead?
+    common?: any;
+    meta: MetaData;
+}
+
+export type Replacer = (
+    domNode: DOMNode,
+    data: RichTextData,
+    meta: MetaData,
+    renderMacroInEditMode: boolean
+) => ReplacerResult;
+
+export type ReplacerResult = JSX.Element | object | void | undefined | null | false;
+
+export interface RichTextViewProps {
+    data: RichTextData
+    meta: MetaData
+    className?: string
+    tag?: string
+    renderMacroInEditMode?: boolean
+    customReplacer?: Replacer
+}