@enonic/nextjs-adapter 0.0.1-alpha.1

package/guillotine/getMetaData.d.ts

@@ -0,0 +1,91 @@
+import { RENDER_MODE, XP_COMPONENT_TYPE, XP_REQUEST_TYPE } from '../utils';
+export declare const richTextQuery: (fieldName: string) => string;
+export declare const pageFragmentQuery: () => string;
+export declare function getMetaQuery(pageFragment?: string): string;
+export interface PageComponent {
+    [key: string]: any;
+    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 TextData {
+    value: RichTextData;
+}
+export interface RichTextData {
+    processedHtml: string;
+    links: LinkData[];
+    macros: MacroData[];
+    images: ImageData[];
+}
+export interface LinkData {
+    ref: string;
+    media: {
+        content: {
+            id: string;
+        };
+    } | null;
+}
+export interface MacroData {
+    ref: string;
+    name: string;
+    descriptor: string;
+    config: {
+        [name: string]: MacroConfig;
+    };
+}
+export interface ImageData {
+    ref: string;
+    image: {
+        id: string;
+    } | null;
+}
+export interface MacroConfig {
+    [key: string]: any;
+}
+export interface RegionTree {
+    [key: string]: PageRegion;
+}
+export interface PageRegion {
+    name: string;
+    components: PageComponent[];
+}
+export interface PartData {
+    descriptor: string;
+    config: any;
+    [customKeysFromQuery: string]: any;
+}
+export interface LayoutData {
+    descriptor: string;
+    config?: any;
+    [customKeysFromQuery: string]: any;
+}
+export interface PageData {
+    descriptor: string;
+    config?: any;
+    template?: string | null;
+    regions?: RegionTree;
+}
+export interface FragmentData {
+    fragment: {
+        components: PageComponent[];
+    };
+}
+export interface MetaData {
+    type: string;
+    path: string;
+    requestType: XP_REQUEST_TYPE;
+    renderMode: RENDER_MODE;
+    requestedComponent?: PageComponent;
+    canRender: boolean;
+    catchAll: boolean;
+    apiUrl: string;
+    baseUrl: string;
+}

package/guillotine/getMetaData.js

@@ -0,0 +1,128 @@
+import { sanitizeGraphqlName } from '../utils';
+import { ComponentRegistry } from '../ComponentRegistry';
+const macroConfigQuery = () => {
+    return configQuery(ComponentRegistry.getMacros(), false, false);
+};
+const partConfigQuery = () => {
+    return configQuery(ComponentRegistry.getParts());
+};
+const layoutConfigQuery = () => {
+    return configQuery(ComponentRegistry.getLayouts());
+};
+const pageConfigQuery = () => {
+    return configQuery(ComponentRegistry.getPages());
+};
+const configQuery = (list, includeAppName = true, canUseConfigAsJson = true) => {
+    const hasQueryList = (list === null || list === void 0 ? void 0 : list.filter(([key, def]) => def.configQuery)) || [];
+    if (hasQueryList.length === 0) {
+        return canUseConfigAsJson ? 'configAsJson' : '';
+    }
+    const configsByApp = {};
+    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}')}
+                }`;
+    }
+};
+/*
+    IMPORTANT: make sure to transform your queries into functions too when using this function inside them !!!
+ */
+export const richTextQuery = (fieldName) => {
+    return `${fieldName}(processHtml:{type:absolute, imageWidths:[400, 800, 1200], imageSizes:"(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"}) {
+                processedHtml
+                macros {
+                    ref
+                    name
+                    descriptor
+                    ${macroConfigQuery()}
+                }
+                links {
+                    ref
+                    media {
+                        content {
+                            _id
+                        }
+                    }
+                }
+                images {
+                    ref
+                    image {
+                        _id
+                    }
+                }
+            }`;
+};
+const componentsQuery = () => `
+        type
+        path
+        page {
+          descriptor
+          ${pageConfigQuery()}
+          template {
+            _path
+          }
+        }
+        layout {
+          descriptor
+          ${layoutConfigQuery()}
+        }
+        text {
+            ${richTextQuery('value')}
+        }
+        part {
+          descriptor
+          ${partConfigQuery()}
+        }
+        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 {
+              ${componentsQuery()}
+            }
+          }
+        }
+        ${componentsQuery()}
+      }`;
+export function getMetaQuery(pageFragment) {
+    return `query($path:ID!){
+              guillotine {
+                get(key:$path) {
+                  _path
+                  type
+                  ${pageFragment || ''}
+                }
+              }
+            }`;
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './guillotine/fetchContent';

package/index.js

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './guillotine/fetchContent';

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@enonic/nextjs-adapter",
+  "version": "0.0.1-alpha.1",
+  "license": "Apache-2.0",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "copy": "npx --yes cpy-cli package.json README.md dist",
+    "build": "tsc",
+    "lint": "eslint --quiet .",
+    "lint:fix": "eslint --fix ."
+  },
+  "dependencies": {
+    "html-react-parser": "^3.0.4",
+    "next": "^13.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "unescape": "^1.0.1"
+  },
+  "devDependencies": {
+    "@enonic/eslint-config": "^0.1.0",
+    "@types/node": "^18.11.9",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "eslint": "^8.27.0",
+    "eslint-plugin-react": "^7.31.10",
+    "typescript": "^4.8.4"
+  }
+}

package/utils.d.ts

@@ -0,0 +1,64 @@
+/** Import config values from .env, .env.development and .env.production */
+import { Context, MinimalContext } from './guillotine/fetchContent';
+export declare const IS_DEV_MODE: boolean;
+/** 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 FROM_XP_PARAM = "__fromxp__";
+export declare const XP_BASE_URL_HEADER = "xpbaseurl";
+export declare const COMPONENT_SUBPATH_HEADER = "xp-component-path";
+export declare const RENDER_MODE_HEADER = "content-studio-mode";
+export declare const PORTAL_COMPONENT_ATTRIBUTE = "data-portal-component-type";
+export declare const PORTAL_REGION_ATTRIBUTE = "data-portal-region";
+export declare const FRAGMENT_CONTENTTYPE_NAME = "portal:fragment";
+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 enum XP_REQUEST_TYPE {
+    COMPONENT = "component",
+    TYPE = "type",
+    PAGE = "page"
+}
+export declare enum RENDER_MODE {
+    INLINE = "inline",
+    EDIT = "edit",
+    PREVIEW = "preview",
+    LIVE = "live",
+    ADMIN = "admin",
+    NEXT = "next"
+}
+export declare enum XP_COMPONENT_TYPE {
+    PART = "part",
+    LAYOUT = "layout",
+    TEXT = "text",
+    FRAGMENT = "fragment",
+    PAGE = "page"
+}
+/** Returns true if the context object (from next.js in [[...contentPath]].jsx ) stems from a request that comes from XP in a CS-preview, i.e. has the URI param FROM_XP_PARAM (defined as '__fromXp__' above).
+ *  False if no context, query or FROM_XP_PARAM param */
+export declare const isRequestFromXP: (context?: Context) => boolean;
+export declare const getXPRequestType: (context?: Context) => XP_REQUEST_TYPE;
+export declare function getContentApiUrl(context?: MinimalContext): string;
+export declare const getXpBaseUrl: (context?: MinimalContext) => string;
+export declare const commonChars: (s1?: string, s2?: string) => string;
+export declare const sanitizeGraphqlName: (text: string) => string;
+declare const adapterConstants: {
+    IS_DEV_MODE: boolean;
+    APP_NAME: string;
+    APP_NAME_UNDERSCORED: string;
+    APP_NAME_DASHED: string;
+    SITE_KEY: string;
+    FROM_XP_PARAM: string;
+    COMPONENT_SUBPATH_HEADER: string;
+    PORTAL_COMPONENT_ATTRIBUTE: string;
+    PORTAL_REGION_ATTRIBUTE: string;
+    getXPRequestType: (context?: Context) => XP_REQUEST_TYPE;
+    getSingleComponentPath: (context?: Context) => string | undefined;
+    getRenderMode: (context?: MinimalContext) => RENDER_MODE;
+};
+export default adapterConstants;

package/utils.js

@@ -0,0 +1,146 @@
+const mode = process.env.MODE || process.env.NEXT_PUBLIC_MODE;
+export const IS_DEV_MODE = (mode === 'development');
+/** 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);
+/** 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);
+/** 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);
+// ////////////////////////////////////////////////////////////////////////  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 FROM_XP_PARAM = '__fromxp__';
+export const XP_BASE_URL_HEADER = 'xpbaseurl';
+export const COMPONENT_SUBPATH_HEADER = 'xp-component-path';
+export const RENDER_MODE_HEADER = 'content-studio-mode';
+export const PORTAL_COMPONENT_ATTRIBUTE = 'data-portal-component-type';
+export const PORTAL_REGION_ATTRIBUTE = 'data-portal-region';
+export const FRAGMENT_CONTENTTYPE_NAME = 'portal:fragment';
+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';
+// ------------------------------- Exports and auxillary functions derived from values above ------------------------------------
+export var XP_REQUEST_TYPE;
+(function (XP_REQUEST_TYPE) {
+    XP_REQUEST_TYPE["COMPONENT"] = "component";
+    XP_REQUEST_TYPE["TYPE"] = "type";
+    XP_REQUEST_TYPE["PAGE"] = "page";
+})(XP_REQUEST_TYPE || (XP_REQUEST_TYPE = {}));
+export var RENDER_MODE;
+(function (RENDER_MODE) {
+    RENDER_MODE["INLINE"] = "inline";
+    RENDER_MODE["EDIT"] = "edit";
+    RENDER_MODE["PREVIEW"] = "preview";
+    RENDER_MODE["LIVE"] = "live";
+    RENDER_MODE["ADMIN"] = "admin";
+    RENDER_MODE["NEXT"] = "next"; // Fallback: not using XP proxy but rendering directly with next.js
+})(RENDER_MODE || (RENDER_MODE = {}));
+// TODO: Use these instead of hardcoded strings everywhere
+export var XP_COMPONENT_TYPE;
+(function (XP_COMPONENT_TYPE) {
+    XP_COMPONENT_TYPE["PART"] = "part";
+    XP_COMPONENT_TYPE["LAYOUT"] = "layout";
+    XP_COMPONENT_TYPE["TEXT"] = "text";
+    XP_COMPONENT_TYPE["FRAGMENT"] = "fragment";
+    XP_COMPONENT_TYPE["PAGE"] = "page";
+})(XP_COMPONENT_TYPE || (XP_COMPONENT_TYPE = {}));
+/** Returns true if the context object (from next.js in [[...contentPath]].jsx ) stems from a request that comes from XP in a CS-preview, i.e. has the URI param FROM_XP_PARAM (defined as '__fromXp__' above).
+ *  False if no context, query or FROM_XP_PARAM param */
+export const isRequestFromXP = (context) => {
+    return !!getXPRequestType(context);
+};
+export const getXPRequestType = (context) => {
+    var _a;
+    const headerValue = (((_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers) || {})[FROM_XP_PARAM];
+    const enumValue = XP_REQUEST_TYPE[headerValue === null || headerValue === void 0 ? void 0 : headerValue.toUpperCase()];
+    return enumValue || XP_REQUEST_TYPE.PAGE; // need to have some defaults here in case of rendering without XP
+};
+const getRenderMode = (context) => {
+    var _a;
+    const value = (((_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers) || {})[RENDER_MODE_HEADER];
+    const enumValue = RENDER_MODE[value === null || value === void 0 ? void 0 : value.toUpperCase()];
+    return enumValue || RENDER_MODE[process.env.RENDER_MODE] || RENDER_MODE.NEXT;
+};
+const getSingleComponentPath = (context) => {
+    var _a;
+    return (((_a = context === null || context === void 0 ? void 0 : context.req) === null || _a === void 0 ? void 0 : _a.headers) || {})[COMPONENT_SUBPATH_HEADER];
+};
+export function getContentApiUrl(context) {
+    const mode = getRenderMode(context);
+    return mode === RENDER_MODE.NEXT ? CONTENT_API_MASTER : CONTENT_API_DRAFT;
+}
+/** 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 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;
+};
+export const commonChars = (s1, s2) => {
+    let result = '';
+    if (!s1 || s1.length === 0 || !s2 || s2.length === 0) {
+        return result;
+    }
+    for (let i = 0; i < s1.length; i++) {
+        const s1Element = s1[i];
+        if (s2[i] === s1Element) {
+            result += s1Element;
+        }
+        else {
+            break;
+        }
+    }
+    return result;
+};
+// sanitizes text according to graphql naming spec http://spec.graphql.org/October2021/#sec-Names
+export const sanitizeGraphqlName = (text) => {
+    if (!text || text.trim().length === 0) {
+        return '';
+    }
+    let result = text.replace(/([^0-9A-Za-z])+/g, '_');
+    if (result.length > 0 && /[0-9]/.test(result.charAt(0))) {
+        result = '_' + result;
+    }
+    return result;
+};
+// ---------------------------------------------------------------------------------------------------------------- Export
+const adapterConstants = {
+    IS_DEV_MODE,
+    APP_NAME,
+    APP_NAME_UNDERSCORED,
+    APP_NAME_DASHED,
+    SITE_KEY,
+    FROM_XP_PARAM,
+    COMPONENT_SUBPATH_HEADER,
+    PORTAL_COMPONENT_ATTRIBUTE,
+    PORTAL_REGION_ATTRIBUTE,
+    getXPRequestType,
+    getSingleComponentPath,
+    getRenderMode,
+};
+// Verify required values
+const NOT_REQUIRED = ['IS_DEV_MODE'];
+Object.keys(adapterConstants).forEach(key => {
+    if (NOT_REQUIRED.indexOf(key) === -1 && !adapterConstants[key]) {
+        throw Error(`constants.ts: Config value '${key}' is missing (from .env?)`);
+    }
+});
+export default adapterConstants;

package/views/BaseComponent.d.ts

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

package/views/BaseComponent.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { IS_DEV_MODE, PORTAL_COMPONENT_ATTRIBUTE, RENDER_MODE, XP_COMPONENT_TYPE } from '../utils';
+import { ComponentRegistry } from '../ComponentRegistry';
+import Empty from './Empty';
+import * as ReactDOMServer from 'react-dom/server';
+const BaseComponent = ({ component, meta, common }) => {
+    var _a;
+    const { type, error } = component;
+    const cmpData = component[type];
+    const descriptor = cmpData && 'descriptor' in cmpData ? cmpData.descriptor : undefined;
+    let ComponentView;
+    if (error) {
+        // renders error component when rendering whole page
+        console.warn(`BaseComponent: ${type} '${descriptor}' error: ${error}`);
+        ComponentView = shouldShowErrorView(meta) ? <ErrorComponent type={type} reason={error} descriptor={descriptor}/> : <Empty />;
+    }
+    else {
+        const ViewFn = (_a = ComponentRegistry.getComponent(type)) === null || _a === void 0 ? void 0 : _a.view;
+        if (!ViewFn) {
+            // show missing component kind, i.e. 'part', 'layout', 'text'
+            console.warn(`BaseComponent: can not render component '${type}': no next view or catch-all defined`);
+            ComponentView = shouldShowMissingView(meta) ? <MissingComponent type={type} descriptor={descriptor}/> : <Empty />;
+        }
+        else {
+            const cmpAttrs = createComponentAttrs(component, meta, common);
+            ComponentView = <ViewFn {...cmpAttrs}/>;
+        }
+    }
+    // need to display a placeholder if descriptor is empty as component is not initialized yet
+    if (descriptor && shouldShowPlaceholderView(meta)) {
+        const outputHTML = ReactDOMServer.renderToString(ComponentView);
+        if (!outputHTML || outputHTML.trim().length === 0) {
+            // render some placeholder in case of empty output
+            ComponentView = <PlaceholderComponent type={type} descriptor={descriptor}/>;
+        }
+    }
+    if (meta.renderMode === RENDER_MODE.EDIT) {
+        return (<div {...createEditorAttrs(type)}>
+                {ComponentView}
+            </div>);
+    }
+    else {
+        // do not make component wrappers in live mode
+        return ComponentView;
+    }
+};
+export default BaseComponent;
+/*
+ *  Used for displaying components with missing implementations on the page, while rendering whole page
+ */
+export const MissingComponent = ({ descriptor, type }) => {
+    return (<div style={{
+            border: '2px dashed lightgrey',
+            padding: '16px',
+        }}>
+            <h3 style={{ margin: 0 }}>Missing component</h3>
+            <p style={{ marginBottom: 0, color: 'grey' }}>{`Missing ${type} with descriptor: ${descriptor}`}</p>
+        </div>);
+};
+export function shouldShowMissingView(meta) {
+    return IS_DEV_MODE || meta.renderMode !== RENDER_MODE.NEXT;
+}
+/*
+ *  Used for displaying components with errors on the page, while rendering whole page
+ */
+export const ErrorComponent = ({ type, descriptor, reason }) => {
+    return (<div style={{
+            border: '2px solid red',
+            padding: '16px',
+        }}>
+            <h3 style={{ margin: 0, textTransform: 'capitalize' }}>{reason ? reason : 'Unknown error'}</h3>
+            {descriptor && <p style={{ color: 'grey' }}>{`${type}: ${descriptor}`}</p>}
+        </div>);
+};
+export function shouldShowErrorView(meta) {
+    return meta.renderMode === RENDER_MODE.EDIT;
+}
+function createEditorAttrs(type) {
+    return {
+        [PORTAL_COMPONENT_ATTRIBUTE]: type,
+    };
+}
+function createComponentAttrs(component, meta, common) {
+    const { type, data, error } = component;
+    const cmpAttrs = {
+        component: component[type],
+        path: component.path,
+        meta,
+        common,
+    };
+    if (data) {
+        cmpAttrs.data = data;
+    }
+    if (error) {
+        cmpAttrs.error = error;
+    }
+    if (component.type === XP_COMPONENT_TYPE.LAYOUT) {
+        // add regions to layout because they are not present in component[component.type] above
+        cmpAttrs.regions = component.regions;
+    }
+    return cmpAttrs;
+}
+export const PlaceholderComponent = ({ type, descriptor }) => {
+    return (<div style={{
+            border: '2px solid lightgrey',
+            padding: '16px',
+        }}>
+            <h3 style={{ margin: 0, textTransform: 'capitalize' }}>Empty output</h3>
+            {descriptor && <p style={{ color: 'grey' }}>{`${type} '${descriptor}' output is empty`}</p>}
+        </div>);
+};
+export function shouldShowPlaceholderView(meta) {
+    return meta.renderMode === RENDER_MODE.EDIT;
+}

package/views/BaseContent.d.ts

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

package/views/BaseContent.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ComponentRegistry } from '../ComponentRegistry';
+import BasePage from './BasePage';
+const BaseContent = (props) => {
+    const { common, meta, page } = props;
+    if (!(meta === null || meta === void 0 ? void 0 : meta.type)) {
+        console.warn("BaseContent props are missing 'meta.type'");
+        return null;
+    }
+    const pageData = page === null || page === void 0 ? void 0 : page.page;
+    const pageDesc = pageData === null || pageData === void 0 ? void 0 : pageData.descriptor;
+    const typeDef = ComponentRegistry.getContentType(meta.type);
+    const ContentTypeView = typeDef === null || typeDef === void 0 ? void 0 : typeDef.view;
+    if (ContentTypeView && !(typeDef === null || typeDef === void 0 ? void 0 : typeDef.catchAll)) {
+        // console.info(`BaseContent: rendering '${meta.type}' with content type: ${ContentTypeView.name}`);
+        return <ContentTypeView {...props}/>;
+    }
+    else if (pageDesc) {
+        // console.info(`BaseContent: rendering '${meta.type}' with page: ${BasePage.name}`);
+        const pageAttrs = {
+            component: pageData,
+            path: page === null || page === void 0 ? void 0 : page.path,
+            meta,
+            common,
+        };
+        if (page === null || page === void 0 ? void 0 : page.data) {
+            pageAttrs.data = page.data;
+        }
+        if (page === null || page === void 0 ? void 0 : page.error) {
+            pageAttrs.error = page.error;
+        }
+        return <BasePage {...pageAttrs}/>;
+    }
+    else if (ContentTypeView) {
+        // console.info(`BaseContent: rendering '${meta.type}' with content type catch-all: ${ContentTypeView.name}`);
+        return <ContentTypeView {...props}/>;
+    }
+    console.log(`BaseContent: can not render ${meta.type}: no content type or page view defined`);
+    return null;
+};
+export default BaseContent;

package/views/BaseLayout.d.ts

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