#79: readability - adding comments, moving code around for structure

src/enonic-connection-config.js

@@ -31,7 +31,7 @@ const xpPreviewOrigin = apiDomain;
 const siteUrl = `${apiDomain}/${siteRoot}`;
 const contentApiUrl = `${siteUrl}/${apiPostfix}`;
 
-const publicPattern = new RegExp('^/?');
+const publicPattern = new RegExp('^/*');
 
 module.exports = {
     mode,
@@ -44,18 +44,28 @@ module.exports = {
     siteName,
     siteRoot,
     contentApiUrl,
+
     appKey,
     appKeyUnderscored: appKey.replace(/\./g, '_'),
     appKeyDashed: appKey.replace(/\./g, '-'),
 
+
     /**
-     * Returns the full XP _path value to a content item, from it's site-relative content path.
-     * Eg., if a content item is accessed at the next.js side with localhost:3000/sub/path, then the site-relative content path is '/sub/path/',
-     * and the full _path returned is the string '/mysite/sub/path'.
+     * Prefixes the site-relative content path with the XP site _name and returns a full XP _path string
+     *
+     * @param siteRelativeContentPath {string} The contentPath slug array from [[...contentPath]].tsx, stringified and slash-delimited
+     * @returns {string} Fully qualified XP content path
      */
     getXpPath: (siteRelativeContentPath) => `/${siteName}/${siteRelativeContentPath}`,
 
 
+
+    /**
+     * If the request stems from XP (the CS-preview proxy), assets under the /public/ folder needs to have their URL prefixed with the running domain of this next.js server. If not, prefix only with a slash.
+     * @param serverRelativeAssetPath Regular next.js asset path
+     * @param requestIsFromXp
+     * @returns {string}
+     */
     getPublicAssetUrl: (serverRelativeAssetPath, requestIsFromXp) => requestIsFromXp
         ? serverRelativeAssetPath.replace(publicPattern, `${nextDomain}/`)
         : serverRelativeAssetPath.replace(publicPattern, `/`)

src/pages/[[...contentPath]].tsx

@@ -5,11 +5,34 @@ import { querySelector, variablesGetterSelector } from "../selectors/queries";
 import { propsProcessorSelector } from "../selectors/propsProcessors";
 import enonicConnectionConfig from "../enonic-connection-config";
 
+import BasePage from "../components/BasePage";
+
+
+type Context = {
+    params: {
+
+        // String array catching a sub-path assumed to match the site-relative path of an XP content.
+        contentPath: string[]
+    },
+    query: {
+
+        // The XP preview proxy injects the '__fromXp__' parameter.  It's used here (as 'requestIsFromXp')
+        // to make some adaptations in the rendered and returned code, adapting to some postprocessing needed for the CS preview to work.
+        __fromXp__?: string|boolean
+    }
+};
+
+
 type EnonicConnectionConfig = {
     contentApiUrl: string,
     getXpPath: (siteRelativeContentPath: string) => string
 };
 
+
+
+
+////////////////////////////////////////////////////////////////////////////////////////////// Config and prepare the fetchContent function:
+
 const fetchContent: ContentFetcher = buildContentFetcher<EnonicConnectionConfig>({
     enonicConnectionConfig,
     querySelector,
@@ -19,18 +42,9 @@ const fetchContent: ContentFetcher = buildContentFetcher<EnonicConnectionConfig>
 });
 
 
-////////////////////////////////////////////////////////////////////////////////////////////// SSR: uncomment this instead of CLIENT below
 
-import BasePage from "../components/BasePage";
+////////////////////////////////////////////////////////////////////////////////////////////// SSR:
 
-type Context = {
-    // this type is purposefully naive. Please make sure to update this with a more
-    // accurate model before using it.
-    params: { contentPath: string[] },
-    query: {
-        __fromXp__?: string|boolean
-    }
-};
 
 export const getServerSideProps = async (context: Context) => {
     const pageProps = await fetchContent(context.params.contentPath, !!context.query.__fromXp__);

src/selectors/queries.ts

@@ -1,10 +1,24 @@
 import { appKey } from '../enonic-connection-config';
 
-
 import personQuery from './queries/getPerson';
 import movieQuery from './queries/getMovie';
 import listQuery from './queries/getList';
 
+
+
+export type QuerySelector = {
+    [fullContentType: string]: string
+};
+export type VariablesGetterFunc = (path: string) => {
+    path: string,
+    [variables: string]: any
+};
+export type VariablesGetterSelector = {
+    [fullContentType: string]: VariablesGetterFunc
+};
+
+
+
 // XP content types ('type' from the first meta response in fetchContent.ts) mapped to full guillotine query strings.
 // If type is not found here, a LOW-PERFORMING default query is selected from _getDefaultData.ts!
 export const querySelector: QuerySelector = {
@@ -22,15 +36,3 @@ export const querySelector: QuerySelector = {
 export const variablesGetterSelector: VariablesGetterSelector = {
     'base:folder': (path:string) => ({ path, maxChildren: 1000 })                                          // If MY_FOLDER_QUERY uses a $maxChildren parameter
 };
-
-
-export type QuerySelector = {
-    [fullContentType: string]: string
-};
-export type VariablesGetterFunc = (path: string) => {
-    path: string,
-    [variables: string]: any
-};
-export type VariablesGetterSelector = {
-    [fullContentType: string]: VariablesGetterFunc
-};