@enonic/nextjs-adapter 1.0.2 → 2.0.0-B2

package/server/index.js

@@ -43,7 +43,7 @@ exports.withEnonicCache = exports.PURGE_CACHE_URL = void 0;
 var http_1 = require("http");
 var cache_1 = require("./cache");
 var path_1 = __importDefault(require("path"));
-var host = process.env.HOST || '127.0.0.1';
+var hostname = process.env.HOST || '127.0.0.1';
 var dev = process.env.NODE_ENV !== 'production';
 var port = process.env.PORT && parseInt(process.env.PORT, 10) || (dev ? 3000 : 4242);
 exports.PURGE_CACHE_URL = '/_/enonic/cache/purge';
@@ -61,59 +61,71 @@ exports.default = (function (next) { return __awaiter(void 0, void 0, void 0, fu
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                nextServer = next({ dev: dev });
+                nextServer = next({ dev: dev, hostname: hostname, port: port });
                 nextHandler = nextServer.getRequestHandler();
-                return [4 /*yield*/, nextServer.prepare().then(function () {
-                        var nextNodeServer = nextServer['server'];
-                        var opts = nextNodeServer['serverOptions'].conf;
-                        var purgeUrl = ((opts === null || opts === void 0 ? void 0 : opts.basePath) || '') + exports.PURGE_CACHE_URL;
-                        // eslint-disable-next-line @typescript-eslint/no-misused-promises
-                        var server = (0, http_1.createServer)(function (req, res) { return __awaiter(void 0, void 0, void 0, function () {
-                            var parsedUrl, tokenParam, cache, pathParam;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0:
-                                        parsedUrl = new URL("http://".concat(host, ":").concat(port).concat(req.url || ''));
-                                        if (!(parsedUrl.pathname !== purgeUrl)) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, nextHandler(req, res)];
-                                    case 1:
-                                        _a.sent();
-                                        return [3 /*break*/, 5];
-                                    case 2:
-                                        if (!dev) return [3 /*break*/, 3];
-                                        console.warn('\nCache clearing is not available in DEV mode.\n');
-                                        res.setHeader('Content-Type', 'application/json');
-                                        res.end(JSON.stringify({ purged: false }));
-                                        return [3 /*break*/, 5];
-                                    case 3:
-                                        tokenParam = parsedUrl.searchParams.get('token');
-                                        if (tokenParam !== process.env.API_TOKEN) {
-                                            // XP hijacks 401 to show login page, so send 407 instead
-                                            res.statusCode = 407;
-                                            res.end(JSON.stringify({ message: 'Invalid token' }));
-                                            return [2 /*return*/];
-                                        }
-                                        cache = nextNodeServer.getIncrementalCache({
-                                            requestHeaders: Object.assign({}, req.headers),
+                return [4 /*yield*/, nextServer.prepare().then(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        var nextNodeServer, opts, purgeUrl, server;
+                        var _a;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0: return [4 /*yield*/, ((_a = nextServer['getServer']) === null || _a === void 0 ? void 0 : _a.call(nextServer))];
+                                case 1:
+                                    nextNodeServer = _b.sent();
+                                    if (!nextNodeServer) {
+                                        console.error('Unable to access incremental cache, cache purge endpoint will be disabled');
+                                        return [2 /*return*/, nextServer];
+                                    }
+                                    opts = nextNodeServer['serverOptions'].conf;
+                                    purgeUrl = ((opts === null || opts === void 0 ? void 0 : opts.basePath) || '') + exports.PURGE_CACHE_URL;
+                                    console.info("Staring cache purge endpoint at ".concat(purgeUrl, "..."));
+                                    server = (0, http_1.createServer)(function (req, res) { return __awaiter(void 0, void 0, void 0, function () {
+                                        var parsedUrl, tokenParam, cache, pathParam;
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0:
+                                                    parsedUrl = new URL("http://".concat(hostname, ":").concat(port).concat(req.url || ''));
+                                                    if (!(parsedUrl.pathname !== purgeUrl)) return [3 /*break*/, 2];
+                                                    return [4 /*yield*/, nextHandler(req, res)];
+                                                case 1:
+                                                    _a.sent();
+                                                    return [3 /*break*/, 5];
+                                                case 2:
+                                                    if (!dev) return [3 /*break*/, 3];
+                                                    console.warn('\nCache clearing is not available in DEV mode.\n');
+                                                    res.setHeader('Content-Type', 'application/json');
+                                                    res.end(JSON.stringify({ purged: false }));
+                                                    return [3 /*break*/, 5];
+                                                case 3:
+                                                    tokenParam = parsedUrl.searchParams.get('token');
+                                                    if (tokenParam !== process.env.ENONIC_API_TOKEN) {
+                                                        // XP hijacks 401 to show login page, so send 407 instead
+                                                        res.statusCode = 407;
+                                                        res.end(JSON.stringify({ message: 'Invalid token' }));
+                                                        return [2 /*return*/];
+                                                    }
+                                                    cache = nextNodeServer.getIncrementalCache({
+                                                        requestHeaders: Object.assign({}, req.headers),
+                                                    });
+                                                    pathParam = parsedUrl.searchParams.get('path') || undefined;
+                                                    return [4 /*yield*/, (0, cache_1.purgeCache)(cache, pathParam)];
+                                                case 4:
+                                                    _a.sent();
+                                                    res.setHeader('Content-Type', 'application/json');
+                                                    res.end(JSON.stringify({ purged: true }));
+                                                    _a.label = 5;
+                                                case 5: return [2 /*return*/];
+                                            }
                                         });
-                                        pathParam = parsedUrl.searchParams.get('path') || undefined;
-                                        return [4 /*yield*/, (0, cache_1.purgeCache)(cache, pathParam)];
-                                    case 4:
-                                        _a.sent();
-                                        res.setHeader('Content-Type', 'application/json');
-                                        res.end(JSON.stringify({ purged: true }));
-                                        _a.label = 5;
-                                    case 5: return [2 /*return*/];
-                                }
-                            });
-                        }); }).listen(port, host, function () {
-                            console.info("Server ready on ".concat(host, ":").concat(port));
-                        }).on('error', function (e) {
-                            console.error('Server error:', e);
-                            server.close();
+                                    }); }).listen(port, hostname, function () {
+                                        console.info("Server ready on ".concat(hostname, ":").concat(port));
+                                    }).on('error', function (e) {
+                                        console.error('Server error:', e);
+                                        server.close();
+                                    });
+                                    return [2 /*return*/, nextServer];
+                            }
                         });
-                        return nextServer;
-                    })];
+                    }); })];
             case 1: return [2 /*return*/, _a.sent()];
         }
     });

package/utils.d.ts

@@ -1,15 +1,24 @@
+/// <reference types="node" />
+/// <reference types="node" />
 /** Import config values from .env, .env.development and .env.production */
-import { MinimalContext } from './guillotine/fetchContent';
+import { GetServerSidePropsContext } from 'next';
+import { ParsedUrlQuery } from 'node:querystring';
+import { IncomingHttpHeaders } from 'http';
 export declare const IS_DEV_MODE: boolean;
+export declare enum ENV_VARS {
+    PROJECTS = "ENONIC_PROJECTS",
+    API = "ENONIC_API",
+    API_TOKEN = "ENONIC_API_TOKEN"
+}
 /** 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 declare const APP_NAME: string;
 /** Optional utility value - derived from APP_NAME, only with underscores instead of dots */
 export declare const APP_NAME_UNDERSCORED: string;
 /** Optional utility value - derived from APP_NAME, only with dashes instead of dots */
 export declare const APP_NAME_DASHED: string;
-export declare const SITE_KEY: string;
 export declare const XP_BASE_URL_HEADER = "xpbaseurl";
 export declare const RENDER_MODE_HEADER = "content-studio-mode";
+export declare const PROJECT_ID_HEADER = "content-studio-project";
 export declare const JSESSIONID_HEADER = "jsessionid";
 export declare const PORTAL_COMPONENT_ATTRIBUTE = "data-portal-component-type";
 export declare const PORTAL_REGION_ATTRIBUTE = "data-portal-region";
@@ -18,6 +27,16 @@ export declare const FRAGMENT_DEFAULT_REGION_NAME = "fragment";
 export declare const PAGE_TEMPLATE_CONTENTTYPE_NAME = "portal:page-template";
 export declare const PAGE_TEMPLATE_FOLDER = "portal:template-folder";
 export declare const SITE_CONTENTTYPE_NAME = "portal:site";
+export declare const LOCALE_HEADER = "locale";
+export declare const LOCALES_HEADER = "locales";
+export declare const DEFAULT_LOCALE_HEADER = "default-locale";
+/** excluded contents:
+ * - folder
+ * - shortcuts (redirect can't be used in prerender)
+ * - media
+ * - paths with '/_' in them
+ */
+export declare const GET_STATIC_PATHS_QUERY = "query ($count: Int = 100){\n  guillotine {\n    query(query: \"type != 'base:folder' AND type != 'base:shortcut' AND type NOT LIKE 'media:*' AND _path NOT LIKE '*/_*'\", first: $count) {\n      _name\n      _path\n      site {\n        _name\n      }\n    }\n  }\n}";
 export declare enum XP_REQUEST_TYPE {
     COMPONENT = "component",
     TYPE = "type",
@@ -38,9 +57,48 @@ export declare enum XP_COMPONENT_TYPE {
     FRAGMENT = "fragment",
     PAGE = "page"
 }
+export interface ServerSideParams extends ParsedUrlQuery {
+    contentPath?: string[];
+    mode?: string;
+}
+export interface PreviewParams {
+    contentPath: string[];
+    headers: Record<string, string>;
+    params: Record<string, string>;
+}
+export type Context = GetServerSidePropsContext<ServerSideParams, PreviewParams>;
+export type LocaleProjectConfig = {
+    project: string;
+    site: string;
+    locale: string;
+};
+export type LocaleProjectConfigs = {
+    default: LocaleProjectConfig;
+    [locale: string]: LocaleProjectConfig;
+};
+export interface MinimalContext {
+    req?: {
+        headers: IncomingHttpHeaders;
+    };
+    locale?: string;
+    defaultLocale?: string;
+    locales?: string[];
+}
+export interface ContentPathItem {
+    params: {
+        contentPath: string[];
+    };
+    locale?: string;
+}
 export declare const getRenderMode: (context?: MinimalContext) => RENDER_MODE;
+export declare function normalizeLocale(locale: string): string | undefined;
+export declare function getLocaleProjectConfig(context?: MinimalContext): LocaleProjectConfig;
+export declare function getLocaleProjectConfigById(projectId?: string, useDefault?: boolean): LocaleProjectConfig;
+export declare function getLocaleProjectConfigs(): LocaleProjectConfigs;
+export declare function fixDoubleSlashes(str: string): string;
 export declare function getContentApiUrl(context?: MinimalContext): string;
-export declare function getJsessionHeaders(context?: MinimalContext): Object;
+export declare function addJsessionHeaders(headers?: Object, context?: MinimalContext): void;
+export declare function addLocaleHeaders(headers?: Object, context?: Context): void;
 export declare const getXpBaseUrl: (context?: MinimalContext) => string;
 export declare const commonChars: (s1?: string, s2?: string) => string;
 export declare const sanitizeGraphqlName: (text: string) => string;
@@ -49,7 +107,6 @@ declare const adapterConstants: {
     APP_NAME: string;
     APP_NAME_UNDERSCORED: string;
     APP_NAME_DASHED: string;
-    SITE_KEY: string;
     PORTAL_COMPONENT_ATTRIBUTE: string;
     PORTAL_REGION_ATTRIBUTE: string;
 };

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;