@enonic/nextjs-adapter 0.12.0 → 0.13.0

package/ComponentRegistry.d.ts

@@ -14,9 +14,9 @@ export interface ComponentDefinition {
     processor?: DataProcessor;
     view?: React.FunctionComponent<any>;
 }
-export type DataProcessor = (data: any, context?: Context) => Promise<Record<string, any>>;
+export type DataProcessor = (data: any, context?: Context, config?: any) => Promise<Record<string, any>>;
 export type VariablesGetter = (path: string, context?: Context, config?: any) => VariablesGetterResult;
-export type QueryGetter = (config?: any) => string;
+export type QueryGetter = (path: string, context?: Context, config?: any) => string;
 export type VariablesGetterResult = {
     [variables: string]: any;
     path: string;

package/guillotine/fetchContent.d.ts

@@ -40,6 +40,7 @@ export interface ServerSideParams extends ParsedUrlQuery {
 export interface PreviewParams {
     contentPath: string[];
     headers: Record<string, string>;
+    params: Record<string, string>;
 }
 export type Context = GetServerSidePropsContext<ServerSideParams, PreviewParams>;
 export interface MinimalContext {

package/guillotine/fetchContent.js

@@ -230,27 +230,40 @@ function prefixLayoutPath(contentType, path) {
     }
 }
 function buildPage(contentType, comps = []) {
-    let page = {
+    const page = {
         type: XP_COMPONENT_TYPE.PAGE,
         path: '/',
     };
-    const tree = {};
-    if (contentType === FRAGMENT_CONTENTTYPE_NAME) {
-        page.regions = tree;
+    return buildComponentTree(comps, page, contentType);
+}
+function buildComponentTree(comps, rootComp, contentType) {
+    const rootTree = {};
+    const isFragmentType = contentType === FRAGMENT_CONTENTTYPE_NAME;
+    if (isFragmentType) {
+        rootComp.regions = rootTree;
     }
     comps.forEach(cmp => {
         var _a;
         const cmpPath = parseComponentPath(contentType, cmp.path);
-        let region;
-        if (cmp.path === '/' && cmp.type === XP_COMPONENT_TYPE.PAGE) {
-            // add page values to page object
-            page = Object.assign(page, cmp);
-            page.page.regions = tree;
-            return;
+        if (cmp.path === '/') {
+            if (cmp.type === XP_COMPONENT_TYPE.PAGE && rootComp.type === XP_COMPONENT_TYPE.PAGE) {
+                // add page values to page object
+                rootComp = Object.assign(rootComp, cmp);
+                rootComp.page.regions = rootTree;
+                return;
+            }
+            else if (cmp.type === XP_COMPONENT_TYPE.LAYOUT && rootComp.type === XP_COMPONENT_TYPE.FRAGMENT) {
+                // when rendering fragment as part of the page with layout at root path
+                // remove other children from list as they will be included in layout
+                rootComp.fragment.fragment.components = [cmp];
+                cmp.regions = rootTree;
+            }
         }
-        else {
-            region = getParentRegion(tree, contentType, cmpPath, comps, true);
+        if (cmp.type === XP_COMPONENT_TYPE.FRAGMENT) {
+            // build component subtree for fragment
+            cmp = buildComponentTree(cmp.fragment.fragment.components, cmp, contentType);
         }
+        const region = getParentRegion(rootTree, contentType, cmpPath, comps, true);
         if (region) {
             // getting the index of component from string like '/main/0/left/11'
             const cmpIndex = (_a = cmpPath[cmpPath.length - 1]) === null || _a === void 0 ? void 0 : _a.index;
@@ -262,7 +275,7 @@ function buildPage(contentType, comps = []) {
             }
         }
     });
-    return page;
+    return rootComp;
 }
 function combineMultipleQueries(queriesWithVars) {
     const queries = [];
@@ -342,11 +355,16 @@ function applyProcessors(componentDescriptors, contentResults, context) {
                 // if there is a query then there must be a result for it
                 data = contentResults.contents[dataCounter++];
             }
-            return yield propsProcessor(data, context);
+            const config = getComponentConfig(desc.component);
+            return yield propsProcessor(data, context, config);
         }));
         return Promise.allSettled(processorPromises);
     });
 }
+function getComponentConfig(cmp) {
+    const cmpData = cmp && cmp[cmp.type];
+    return cmpData && 'config' in cmpData ? cmpData.config : undefined;
+}
 function collectComponentDescriptors(components, componentRegistry, requestedComponentPath, xpContentPath, context) {
     const descriptors = [];
     for (const cmp of (components || [])) {
@@ -357,8 +375,7 @@ function collectComponentDescriptors(components, componentRegistry, requestedCom
             const cmpDef = ComponentRegistry.getByComponent(cmp);
             if (cmpDef) {
                 // const partPath = `${xpContentPath}/_component${cmp.path}`;
-                const cmpData = cmp[cmp.type];
-                const config = cmpData && 'config' in cmpData ? cmpData.config : undefined;
+                const config = getComponentConfig(cmp);
                 const queryAndVariables = getQueryAndVariables(cmp.type, xpContentPath, cmpDef.query, context, config);
                 if (queryAndVariables) {
                     descriptors.push({
@@ -427,7 +444,7 @@ function getQueryAndVariables(type, path, selectedQuery, context, config) {
         throw Error(`Query for content type ${type} should be a string or function, not: ${typeof query}`);
     }
     if (typeof query === 'function') {
-        query = query(config);
+        query = query(path, context, config);
     }
     if (query) {
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/nextjs-adapter",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "publishConfig": {
@@ -13,21 +13,21 @@
     "lint:fix": "eslint --fix ."
   },
   "dependencies": {
-    "html-react-parser": "^3.0.4",
-    "next": "^13.0.7",
+    "html-react-parser": "^3.0.7",
+    "next": "^13.1.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.17",
+    "@enonic/eslint-config": "^1.1.0",
+    "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "eslint": "^8.30.0",
-    "eslint-plugin-react": "^7.31.11",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "eslint": "^8.32.0",
+    "eslint-plugin-react": "^7.32.0",
     "typescript": "^4.9.4"
   }
 }

package/views/Region.jsx

@@ -15,12 +15,7 @@ export const RegionView = (props) => {
         regionAttrs.id = name + 'Region';
         regionAttrs[PORTAL_REGION_ATTRIBUTE] = name;
     }
-    if (Object.keys(regionAttrs).length) {
-        return <div {...regionAttrs}>{children}</div>;
-    }
-    else {
-        return <>{children}</>;
-    }
+    return <div {...regionAttrs}>{children}</div>;
 };
 /** Multiple regions, or only one if named in props.selected */
 const RegionsView = (props) => {

package/views/StaticContent.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export interface StaticContentProps extends Record<string, any> {
+    children?: ReactNode | ReactNode[];
+    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>;
+    suppressHydrationWarning: boolean;
+    dangerouslySetInnerHTML: {
+        __html: string;
+    };
+}, string | import("react").JSXElementConstructor<any>>;

package/views/StaticContent.jsx

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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];
+}
+export default function StaticContent(_a) {
+    var { children, element = 'div', condition = true } = _a, props = __rest(_a, ["children", "element", "condition"]);
+    const [render, ref] = useStaticContent();
+    // 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: '' } }));
+}