@enonic/nextjs-adapter 1.0.1 → 2.0.0-B1

package/utils.js

@@ -1,19 +1,27 @@
 const mode = process.env.MODE || process.env.NEXT_PUBLIC_MODE;
 export const IS_DEV_MODE = (mode === 'development');
+export var ENV_VARS;
+(function (ENV_VARS) {
+    ENV_VARS["PROJECTS"] = "ENONIC_PROJECTS";
+    ENV_VARS["API"] = "ENONIC_API";
+    ENV_VARS["API_TOKEN"] = "ENONIC_API_TOKEN";
+})(ENV_VARS || (ENV_VARS = {}));
 /** URL to the guillotine API */
-const CONTENT_API_DRAFT = (process.env.CONTENT_API_DRAFT || process.env.NEXT_PUBLIC_CONTENT_API_DRAFT);
-const CONTENT_API_MASTER = (process.env.CONTENT_API_MASTER || process.env.NEXT_PUBLIC_CONTENT_API_MASTER);
+const API_URL = (process.env.ENONIC_API || process.env.NEXT_PUBLIC_ENONIC_API);
+/** Locales and Enonic XP projects correspondence list */
+const PROJECTS = (process.env.ENONIC_PROJECTS || process.env.NEXT_PUBLIC_ENONIC_PROJECTS);
 /** Optional utility value - defining in one place the name of the target app (the app that defines the content types, the app name is therefore part of the content type strings used both in typeselector and in query introspections) */
-export const APP_NAME = (process.env.APP_NAME || process.env.NEXT_PUBLIC_APP_NAME);
+export const APP_NAME = (process.env.ENONIC_APP_NAME || process.env.NEXT_PUBLIC_ENONIC_APP_NAME);
 /** Optional utility value - derived from APP_NAME, only with underscores instead of dots */
 export const APP_NAME_UNDERSCORED = (APP_NAME || '').replace(/\./g, '_');
 /** Optional utility value - derived from APP_NAME, only with dashes instead of dots */
 export const APP_NAME_DASHED = (APP_NAME || '').replace(/\./g, '-');
-export const SITE_KEY = (process.env.SITE_KEY || process.env.NEXT_PUBLIC_SITE_KEY);
+const PROJECT_CONFIG_REGEXP = new RegExp('^(?:([\\w-]+):)?([^\\/\\s]+)(\\/[\\w-.]+)?$', 'i');
 // ////////////////////////////////////////////////////////////////////////  Hardcode-able constants
 // URI parameter marking that a request is for a preview for CS. MUST MATCH THE VALUE OF 'FROM_XP_PARAM' on XP side.
 export const XP_BASE_URL_HEADER = 'xpbaseurl';
 export const RENDER_MODE_HEADER = 'content-studio-mode';
+export const PROJECT_ID_HEADER = 'content-studio-project';
 export const JSESSIONID_HEADER = 'jsessionid';
 export const PORTAL_COMPONENT_ATTRIBUTE = 'data-portal-component-type';
 export const PORTAL_REGION_ATTRIBUTE = 'data-portal-region';
@@ -22,6 +30,26 @@ export const FRAGMENT_DEFAULT_REGION_NAME = 'fragment';
 export const PAGE_TEMPLATE_CONTENTTYPE_NAME = 'portal:page-template';
 export const PAGE_TEMPLATE_FOLDER = 'portal:template-folder';
 export const SITE_CONTENTTYPE_NAME = 'portal:site';
+export const LOCALE_HEADER = 'locale';
+export const LOCALES_HEADER = 'locales';
+export const DEFAULT_LOCALE_HEADER = 'default-locale';
+/** excluded contents:
+ * - folder
+ * - shortcuts (redirect can't be used in prerender)
+ * - media
+ * - paths with '/_' in them
+ */
+export const GET_STATIC_PATHS_QUERY = `query ($count: Int = 100){
+  guillotine {
+    query(query: "type != 'base:folder' AND type != 'base:shortcut' AND type NOT LIKE 'media:*' AND _path NOT LIKE '*/_*'", first: $count) {
+      _name
+      _path
+      site {
+        _name
+      }
+    }
+  }
+}`;
 // ------------------------------- Exports and auxillary functions derived from values above ------------------------------------
 export var XP_REQUEST_TYPE;
 (function (XP_REQUEST_TYPE) {
@@ -53,39 +81,109 @@ export const getRenderMode = (context) => {
     const enumValue = RENDER_MODE[value === null || value === void 0 ? void 0 : value.toUpperCase()];
     return enumValue || RENDER_MODE[process.env.RENDER_MODE] || RENDER_MODE.NEXT;
 };
+export function normalizeLocale(locale) {
+    return locale !== 'default' ? locale : undefined;
+}
+export function getLocaleProjectConfig(context) {
+    var _a;
+    const projectId = (((_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers) || {})[PROJECT_ID_HEADER];
+    if (projectId) {
+        return getLocaleProjectConfigById(projectId);
+    }
+    const projectsConfig = getLocaleProjectConfigs();
+    const locale = (context === null || context === void 0 ? void 0 : context.locale) || (context === null || context === void 0 ? void 0 : context.defaultLocale);
+    let config = projectsConfig[locale];
+    if (!config) {
+        config = projectsConfig.default;
+    }
+    if (!config) {
+        throw new Error(`No config for locale "${locale}" found in "${ENV_VARS.PROJECTS}" environmental variable.
+        Format: <default-repository-name>/<site-path>,<language>:<repository-name>/<site-path>,...`);
+    }
+    return config;
+}
+export function getLocaleProjectConfigById(projectId, useDefault = true) {
+    const projects = getLocaleProjectConfigs();
+    if (!projectId) {
+        return useDefault ? projects.default : undefined;
+    }
+    const match = Object.values(projects).find(p => {
+        var _a;
+        return ((_a = p === null || p === void 0 ? void 0 : p.project) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === projectId.toLowerCase();
+    });
+    return match || (useDefault ? projects.default : undefined);
+}
+export function getLocaleProjectConfigs() {
+    const str = PROJECTS;
+    const envVarName = ENV_VARS.PROJECTS;
+    if (!(str === null || str === void 0 ? void 0 : str.length)) {
+        throw Error(`"${envVarName}" environmental variable is required.`);
+    }
+    const result = str.split(',').reduce((config, prjStr) => {
+        const matches = PROJECT_CONFIG_REGEXP.exec(prjStr === null || prjStr === void 0 ? void 0 : prjStr.trim());
+        if (!(matches === null || matches === void 0 ? void 0 : matches.length)) {
+            return config;
+        }
+        const [full, lang = 'default', project, site] = matches;
+        if (project && site) {
+            config[lang] = {
+                project,
+                site,
+                locale: lang,
+            };
+        }
+        else {
+            throw Error(`Wrong configuration in "${envVarName}": ${prjStr}.
+            Format: <default-repository-name>/<site-path>,<language>:<repository-name>/<site-path>,...`);
+        }
+        return config;
+    }, {
+        default: {
+            project: '',
+            site: '',
+            locale: '',
+        },
+    });
+    if (!result.default.site || !result.default.project) {
+        throw Error(`"${envVarName}" environmental variable should contain default value.
+        Format: <default-repository-name>/<site-path>,<language>:<repository-name>/<site-path>,...`);
+    }
+    return result;
+}
+export function fixDoubleSlashes(str) {
+    return str.replace(/(^|[^:/])\/{2,}/g, '$1/');
+}
 export function getContentApiUrl(context) {
-    const mode = getRenderMode(context);
-    return mode === RENDER_MODE.NEXT ? CONTENT_API_MASTER : CONTENT_API_DRAFT;
+    const project = getLocaleProjectConfig(context).project;
+    const branch = getRenderMode(context) === RENDER_MODE.NEXT ? 'master' : 'draft';
+    return fixDoubleSlashes(`${API_URL}/${project}/${branch}`);
 }
-export function getJsessionHeaders(context) {
+export function addJsessionHeaders(headers = {}, context) {
     var _a;
-    const headers = {};
     const jsessionid = (_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers[JSESSIONID_HEADER];
     if (jsessionid) {
         headers['Cookie'] = `${JSESSIONID_HEADER}=${jsessionid}`;
     }
-    return headers;
 }
-/** For '<a href="..."' link values in props when clicking the link should navigate to an XP content item page
- *  and the query returns the XP _path to the target content item:
- *  When viewed directly, the header will have a `<base href='/' />` (see src/pages/_app.tsx), and when viewed through an
- *  XP Content Studio preview, lib-nextjs-proxy will add `<base href='xp/relevant/root/site/url/' />`.
- *  So for content-item links to work in BOTH contexts, the href value should be the path relative to the root site item, not starting with a slash.
- * */
-// export const getContentLinkUrlFromXpPath = (_path: string): string => _path.replace(siteNamePattern, '')
-const xpBaseUrlMap = {};
+export function addLocaleHeaders(headers = {}, context) {
+    const locale = context === null || context === void 0 ? void 0 : context.locale;
+    if (locale) {
+        headers[LOCALE_HEADER] = locale;
+    }
+    const locales = context === null || context === void 0 ? void 0 : context.locales;
+    if (locales) {
+        headers[LOCALES_HEADER] = JSON.stringify(locales);
+    }
+    const defaultLocale = context === null || context === void 0 ? void 0 : context.defaultLocale;
+    if (defaultLocale) {
+        headers[DEFAULT_LOCALE_HEADER] = defaultLocale;
+    }
+}
 export const getXpBaseUrl = (context) => {
     var _a;
-    const mode = getRenderMode(context);
-    const existingUrl = xpBaseUrlMap[mode];
-    if (existingUrl) {
-        return existingUrl;
-    }
     const header = ((((_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers) || {})[XP_BASE_URL_HEADER] || '');
     // TODO: workaround for XP pattern controller mapping not picked up in edit mode
-    const resultingUrl = (header || '/').replace(/\/edit\//, '/inline/');
-    xpBaseUrlMap[mode] = resultingUrl;
-    return resultingUrl;
+    return (header || '/').replace(/\/edit\//, '/inline/');
 };
 export const commonChars = (s1, s2) => {
     let result = '';
@@ -120,7 +218,6 @@ const adapterConstants = {
     APP_NAME,
     APP_NAME_UNDERSCORED,
     APP_NAME_DASHED,
-    SITE_KEY,
     PORTAL_COMPONENT_ATTRIBUTE,
     PORTAL_REGION_ATTRIBUTE,
 };

package/views/BaseComponent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MetaData, PageComponent } from '../guillotine/getMetaData';
 export type BaseComponentProps = {
     component: PageComponent;
@@ -10,16 +10,16 @@ export default BaseComponent;
 export declare const MissingComponent: ({ descriptor, type }: {
     descriptor?: string;
     type: string;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare function shouldShowMissingView(meta: MetaData): boolean;
 export declare const ErrorComponent: ({ type, descriptor, reason }: {
     type?: string;
     descriptor?: string;
     reason: string;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare function shouldShowErrorView(meta: MetaData): boolean;
 export declare const PlaceholderComponent: ({ type, descriptor }: {
     type?: string;
     descriptor?: string;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare function shouldShowPlaceholderView(meta: MetaData): boolean;

package/views/BaseContent.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FetchContentResult } from '../guillotine/fetchContent';
-declare const BaseContent: (props: FetchContentResult) => JSX.Element;
+declare const BaseContent: (props: FetchContentResult) => React.JSX.Element;
 export default BaseContent;

package/views/BaseLayout.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { LayoutData, MetaData, RegionTree } from '../guillotine/getMetaData';
 export interface LayoutProps {
     layout: LayoutData;
@@ -13,5 +13,5 @@ interface BaseLayoutProps {
     common?: any;
     meta: MetaData;
 }
-declare const BaseLayout: (props: BaseLayoutProps) => JSX.Element;
+declare const BaseLayout: (props: BaseLayoutProps) => React.JSX.Element;
 export default BaseLayout;

package/views/BaseMacro.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MacroConfig, MacroData, MetaData } from '../guillotine/getMetaData';
 export declare const MACRO_DISABLE = "system:disable";
 export declare const MACRO_EMBED = "system:embed";
@@ -12,5 +12,5 @@ export interface MacroProps {
     config: MacroConfig;
     meta: MetaData;
 }
-declare const BaseMacro: (props: BaseMacroProps) => JSX.Element;
+declare const BaseMacro: (props: BaseMacroProps) => React.JSX.Element;
 export default BaseMacro;

package/views/BasePage.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MetaData, PageData } from '../guillotine/getMetaData';
 export interface PageProps {
     page: PageData;
@@ -15,5 +15,5 @@ export interface BasePageProps {
     error?: string;
     meta: MetaData;
 }
-declare const BasePage: (props: BasePageProps) => JSX.Element;
+declare const BasePage: (props: BasePageProps) => React.JSX.Element;
 export default BasePage;

package/views/BasePart.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MetaData, PartData } from '../guillotine/getMetaData';
 export interface PartProps {
     part: PartData;
@@ -15,5 +15,5 @@ interface BasePartProps {
     error?: string;
     meta: MetaData;
 }
-declare const BasePart: (props: BasePartProps) => JSX.Element;
+declare const BasePart: (props: BasePartProps) => React.JSX.Element;
 export default BasePart;

package/views/Empty.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Empty: () => JSX.Element;
+import React from 'react';
+declare const Empty: () => React.JSX.Element;
 export default Empty;

package/views/Fragment.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FragmentData, MetaData, PageData } from '../guillotine/getMetaData';
 interface FragmentProps {
     page?: PageData;
@@ -6,5 +6,5 @@ interface FragmentProps {
     common?: any;
     meta: MetaData;
 }
-declare const FragmentView: (props: FragmentProps) => JSX.Element;
+declare const FragmentView: (props: FragmentProps) => React.JSX.Element;
 export default FragmentView;

package/views/Fragment.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import BaseComponent from './BaseComponent';
-import { FRAGMENT_DEFAULT_REGION_NAME } from '../utils';
+import BaseComponent, { MissingComponent, shouldShowMissingView } from './BaseComponent';
+import { FRAGMENT_DEFAULT_REGION_NAME, XP_COMPONENT_TYPE } from '../utils';
 const FragmentView = (props) => {
     var _a;
     const { component, page } = props;
@@ -13,13 +13,18 @@ const FragmentView = (props) => {
             comps.push(...regionComps);
         }
     }
-    else if (component) {
+    else if (component === null || component === void 0 ? void 0 : component.fragment) {
         // rendering a part of a page
         comps.push(...component.fragment.components);
     }
-    const { common, meta } = props;
-    return (<>
-            {comps.map((comp, i) => (<BaseComponent key={i} component={comp} common={common} meta={meta}/>))}
-        </>);
+    if (!comps.length && shouldShowMissingView(props.meta)) {
+        return <MissingComponent type={XP_COMPONENT_TYPE.FRAGMENT} descriptor={(page === null || page === void 0 ? void 0 : page.descriptor) || (component === null || component === void 0 ? void 0 : component.id)}/>;
+    }
+    else {
+        const { common, meta } = props;
+        return (<>
+                {comps.map((comp, i) => (<BaseComponent key={i} component={comp} common={common} meta={meta}/>))}
+            </>);
+    }
 };
 export default FragmentView;

package/views/MainView.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { FetchContentResult } from '../guillotine/fetchContent';
-declare const _MainView: (props: FetchContentResult) => JSX.Element;
+declare const _MainView: (props: FetchContentResult) => React.JSX.Element;
 export default _MainView;

package/views/Region.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MetaData, PageComponent, PageData } from '../guillotine/getMetaData';
 export interface RegionProps {
     name: string;
@@ -14,7 +14,7 @@ export interface RegionsProps {
     meta: MetaData;
 }
 /** Single region */
-export declare const RegionView: (props: RegionProps) => JSX.Element;
+export declare const RegionView: (props: RegionProps) => React.JSX.Element;
 /** Multiple regions, or only one if named in props.selected */
-declare const RegionsView: (props: RegionsProps) => JSX.Element;
+declare const RegionsView: (props: RegionsProps) => React.JSX.Element;
 export default RegionsView;

package/views/RichTextView.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MetaData, RichTextData } from '../guillotine/getMetaData';
 import { DOMNode } from 'html-react-parser';
 export type ReplacerResult = JSX.Element | object | void | undefined | null | false;
@@ -12,5 +12,5 @@ type Props = {
     customReplacer?: Replacer;
 };
 export declare function createReplacer(allData: RichTextData, meta: MetaData, renderMacroInEditMode?: boolean, customReplacer?: Replacer): (domNode: DOMNode) => ReplacerResult;
-declare const RichTextView: ({ className, tag, data, meta, renderMacroInEditMode, customReplacer }: Props) => JSX.Element;
+declare const RichTextView: ({ className, tag, data, meta, renderMacroInEditMode, customReplacer }: Props) => React.JSX.Element;
 export default RichTextView;

package/views/SingleComponent.d.ts

@@ -1,5 +1,5 @@
 /** Render only one component as a result of a request from XP-side .../_/component/... during edit refresh. */
-/// <reference types="react" />
+import React from 'react';
 import { FetchContentResult } from '../guillotine/fetchContent';
-declare const SingleComponent: ({ meta, common }: FetchContentResult) => JSX.Element;
+declare const SingleComponent: ({ meta, common }: FetchContentResult) => React.JSX.Element;
 export default SingleComponent;

package/views/StaticContent.d.ts

@@ -4,12 +4,12 @@ export interface StaticContentProps extends Record<string, any> {
     element?: string;
     condition: boolean;
 }
-export default function StaticContent({ children, element, condition, ...props }: StaticContentProps): import("react").DOMElement<{
-    [x: string]: any;
-}, Element> | import("react").ReactElement<{
-    ref: boolean | import("react").MutableRefObject<any>;
+export default function StaticContent({ children, element, condition, ...props }: StaticContentProps): import("react").ReactElement<{
+    ref: import("react").RefObject<unknown>;
     suppressHydrationWarning: boolean;
     dangerouslySetInnerHTML: {
         __html: string;
     };
-}, string | import("react").JSXElementConstructor<any>>;
+}, string | import("react").JSXElementConstructor<any>> | import("react").DOMElement<{
+    [x: string]: any;
+}, Element>;

package/views/StaticContent.jsx

@@ -9,30 +9,28 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { createElement, useEffect, useRef, useState } from 'react';
-function useStaticContent() {
-    const ref = useRef(null);
-    const [render, setRender] = useState(typeof window === 'undefined');
-    useEffect(() => {
-        var _a;
-        // check if the innerHTML is empty as client side navigation
-        // need to render the component without server-side backup
-        const isEmpty = ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.innerHTML) === '';
-        if (isEmpty) {
-            setRender(true);
-        }
-    }, []);
-    return [render, ref];
+import { createElement, createRef } from 'react';
+function useStaticContent(ref, isServer) {
+    var _a;
+    if (isServer) {
+        return false;
+    }
+    if (((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.innerHTML) === '') {
+        return false;
+    }
+    return true;
 }
 export default function StaticContent(_a) {
     var { children, element = 'div', condition = true } = _a, props = __rest(_a, ["children", "element", "condition"]);
-    const [render, ref] = useStaticContent();
+    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, Object.assign(Object.assign({}, props), { ref, suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: '' } }));
+    }
     // just render if:
     // - condition is false
     // - we're in the server or a spa navigation
-    if (render || !condition) {
-        return createElement(element, props, ...[].concat(children));
-    }
-    // avoid re-render on the client
-    return createElement(element, Object.assign(Object.assign({}, props), { ref, suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: '' } }));
+    return createElement(element, props, ...[].concat(children));
 }

package/views/Text.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { MetaData, TextData } from '../guillotine/getMetaData';
 type Props = {
     meta: MetaData;
     component: TextData;
     path: string;
 };
-declare const DefaultTextView: ({ component, meta, path }: Props) => JSX.Element;
+declare const DefaultTextView: ({ component, meta, path }: Props) => React.JSX.Element;
 export default DefaultTextView;