@remkoj/optimizely-cms-cli 5.1.6 → 5.2.0

package/dist/index.js

@@ -1,30 +1,51 @@
 import { globSync, glob } from 'glob';
 import dotenv from 'dotenv';
 import { expand } from 'dotenv-expand';
+import path from 'node:path';
+import fs from 'node:fs';
 import { getCmsIntegrationApiConfigFromEnvironment, createClient, OptiCmsVersion, IntegrationApi, ContentRoots } from '@remkoj/optimizely-cms-api';
 import yargs from 'yargs';
 import chalk from 'chalk';
-import path from 'node:path';
-import fs from 'node:fs';
 import figures from 'figures';
 import Table from 'cli-table3';
 import fsAsync from 'node:fs/promises';
 import { input, select, confirm } from '@inquirer/prompts';
 
+function getProjectDir() {
+    let testPath = process.cwd();
+    let hasPackageJson = false;
+    do {
+        hasPackageJson = fs.statSync(path.join(testPath, 'package.json'), { throwIfNoEntry: false })?.isFile() ?? false;
+        if (!hasPackageJson)
+            testPath = path.normalize(path.join(testPath, '..'));
+    } while (!hasPackageJson && testPath.length > 2);
+    if (!hasPackageJson) {
+        throw new Error('No package.json found!');
+    }
+    return testPath;
+}
 /**
  * Prepare the application context, by parsing the .env files in the main
  * application directory.
  *
  * @returns     A string array with the files processed
  */
-function prepare() {
-    const envFiles = globSync(".env*").sort((a, b) => b.length - a.length).filter(n => n == ".env" || n == ".env.local" || (process.env.NODE_ENV && n == `.env.${process.env.NODE_ENV}.local`));
-    expand(dotenv.config({ path: envFiles, debug: false, quiet: true }));
+function prepare(pDir) {
+    const projectDir = pDir ?? getProjectDir();
+    const envFiles = globSync(".env*", { cwd: projectDir })
+        .sort((a, b) => b.length - a.length)
+        .filter(n => n == ".env" || n == ".env.local" || (process.env.NODE_ENV && n == `.env.${process.env.NODE_ENV}.local`));
+    expand(dotenv.config({
+        path: envFiles.map(envFile => path.join(projectDir, envFile)),
+        debug: false,
+        quiet: true
+    }));
     return envFiles;
 }
 
-function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
+function createOptiCmsApp(scriptName, version, epilogue, envFiles, projectDir) {
     let config;
+    const defaultPath = projectDir ?? process.cwd();
     try {
         config = getCmsIntegrationApiConfigFromEnvironment();
     }
@@ -38,7 +59,7 @@ function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
         .scriptName(scriptName)
         .version(version)
         .usage('$0 <cmd> [args]')
-        .option("path", { alias: "p", description: "Application root folder", string: true, type: "string", demandOption: false, default: process.cwd() })
+        .option("path", { alias: "p", description: "Application root folder", string: true, type: "string", demandOption: false, default: defaultPath })
         .option("components", { alias: "c", description: "Path to components folder", string: true, type: "string", demandOption: false, default: "./src/components/cms" })
         .option("cms_url", { alias: "cu", description: "Optimizely CMS URL", string: true, type: "string", demandOption: isDemanded(config.base), default: config.base, coerce: (val) => new URL(val) })
         .option("client_id", { alias: "ci", description: "API Client ID", string: true, type: "string", demandOption: isDemanded(config.clientId), default: config.clientId })
@@ -230,6 +251,8 @@ async function getContentTypes(client, args, pageSize = 100, allowSystem = false
         process.stdout.write(chalk.gray(`${figures.arrowRight} Filtering Content-Types based upon arguments\n`));
     }
     const validBaseTypes = getEnumOptions(IntegrationApi.ContentBaseType).map(x => x.toLowerCase());
+    if (cfg.debug)
+        process.stdout.write(`Allowing base types: ${validBaseTypes.join(', ')}\n`);
     const allContentTypes = all ?
         // If we're returning all content types, including non-supported base types, make sure the base type is always set
         results.map(contentType => {
@@ -238,15 +261,21 @@ async function getContentTypes(client, args, pageSize = 100, allowSystem = false
                 baseType: contentType.baseType ?? 'default'
             };
         }) :
-        // Otherwise filter out any non supported content base type
+        // Otherwise filter out any non supported content base type and types that include a ':'
         results.filter(contentType => {
             const baseType = (contentType.baseType ?? 'default').toLowerCase();
-            const isValid = validBaseTypes.includes(baseType);
+            const isValid = validBaseTypes.includes(baseType) && !contentType.key.includes(':');
             if (!isValid && cfg.debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Removing ${contentType.key} as it has an unsupported base type: ${baseType}\n`));
             return isValid;
         });
     const contentTypes = allContentTypes.filter(data => {
+        // Remove all intermediary/supporting types
+        if (!all && data.key.includes(':')) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${data.key} due to it containing a ':'\n`));
+            return false;
+        }
         // Remove items based upon filters
         const keepType = (!excludeBaseTypes.includes(data.baseType)) &&
             (!excludeTypes.includes(data.key)) &&
@@ -519,8 +548,8 @@ async function createTemplateMetadata(client, displayTemplate, basePath, createP
             break;
         case 'content':
             const contentType = await client.contentTypes.contentTypesGet(displayTemplate.contentType ?? '-');
-            itemPath = path.join(basePath, contentType.baseType, contentType.key);
-            typesPath = path.join(basePath, contentType.baseType, contentType.key);
+            itemPath = path.join(basePath, contentType.baseType, contentType.key.split(':').pop());
+            typesPath = path.join(basePath, contentType.baseType, contentType.key.split(':').pop());
             targetType = targetPrefix + '/' + displayTemplate.contentType;
             break;
         default:
@@ -802,8 +831,8 @@ const TypesPullCommand = {
         const client = createCmsClient(args);
         const { contentTypes } = await getContentTypes(client, args);
         const updatedTypes = contentTypes.map(contentType => {
-            const typePath = path.join(basePath, contentType.baseType, contentType.key);
-            const typeFile = path.join(typePath, `${contentType.key}.opti-type.json`);
+            const typePath = path.join(basePath, contentType.baseType, contentType.key.split(':').pop());
+            const typeFile = path.join(typePath, `${contentType.key.split(':').pop()}.opti-type.json`);
             if (!fs.existsSync(typePath))
                 fs.mkdirSync(typePath, { recursive: true });
             if (fs.existsSync(typeFile) && !force) {
@@ -915,7 +944,7 @@ function createTypeFolders(contentTypes, basePath, debug = false) {
     const folders = contentTypes.map(contentType => {
         const baseType = contentType.baseType ?? 'default';
         // Create the type folder
-        const typePath = path.join(basePath, baseType, contentType.key);
+        const typePath = path.join(basePath, baseType, contentType.key.split(':').pop());
         if (!fs.existsSync(typePath)) {
             fs.mkdirSync(typePath, { recursive: true });
             if (debug)
@@ -934,43 +963,59 @@ function createTypeFolders(contentTypes, basePath, debug = false) {
 function getTypeFolder(list, type) {
     return list.filter(x => x.type == type).at(0)?.path;
 }
+const PROPS_LOCK_FILE = '.opti-props.lock';
+function getGeneratedProps(appPath) {
+    const lockPath = path.join(appPath, PROPS_LOCK_FILE);
+    try {
+        const lockData = JSON.parse(fs.readFileSync(lockPath).toString());
+        const generatedProps = Array.isArray(lockData) ? lockData.map(x => { return { propName: x.propertyName, propType: x.propertyType }; }) : [];
+        return generatedProps;
+    }
+    catch (e) {
+        return [];
+    }
+}
+function writeGeneratedProps(appPath, generatedProps) {
+    const lockPath = path.join(appPath, PROPS_LOCK_FILE);
+    fs.writeFileSync(lockPath, JSON.stringify(generatedProps.map(x => { return { propertyName: x.propName, propertyType: x.propType }; }), undefined, 2));
+}
 
-/**
- * Keep track of all generated properties
- */
-let generatedProps = [];
 const NextJsFragmentsCommand = {
     command: "nextjs:fragments",
     describe: "Create the GrapQL Fragments for a Next.JS / Optimizely Graph structure",
     builder,
     handler: async (args, opts) => {
-        generatedProps = [];
         // Prepare
         const { loadedContentTypes, createdTypeFolders } = opts || {};
-        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        const { components: basePath, _config: { debug }, force, path: appPath } = parseArgs(args);
         const client = createCmsClient(args);
+        // Get locked property names
+        const generatedProps = getGeneratedProps(appPath);
+        // Get content types
         const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL fragments for ${contentTypes.map(x => x.key).join(', ')}\n`));
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
         const updatedTypes = contentTypes.map(contentType => {
             const typePath = getTypeFolder(typeFolders, contentType.key);
-            return createGraphFragments(contentType, typePath, basePath, force, debug, allContentTypes, client.runtimeCmsVersion == OptiCmsVersion.CMS12);
+            return createGraphFragments(contentType, typePath, basePath, force, debug, allContentTypes, generatedProps, client.runtimeCmsVersion == OptiCmsVersion.CMS12);
         }).filter(x => x).flat();
         // Report outcome
         if (updatedTypes.length > 0)
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL fragments for ${updatedTypes.join(', ')}\n`));
         else
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL fragments created/updated\n`));
+        // Write updated lock
+        writeGeneratedProps(appPath, generatedProps);
         if (!opts)
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
-        generatedProps = [];
     }
 };
-function createGraphFragments(contentType, typePath, basePath, force, debug, contentTypes, forCms12 = false) {
+function createGraphFragments(contentType, typePath, basePath, force, debug, contentTypes, generatedProps = [], forCms12 = false) {
     const returnValue = [];
     const baseType = contentType.baseType ?? 'default';
-    const baseQueryFile = path.join(typePath, `${contentType.key}.${baseType}.graphql`);
+    const baseQueryFile = path.join(typePath, `${contentType.key.split(':').pop()}.${baseType}.graphql`);
+    //console.log('Mapping', contentType.key, baseQueryFile);
     if (fs.existsSync(baseQueryFile)) {
         if (force) {
             if (debug)
@@ -985,7 +1030,7 @@ function createGraphFragments(contentType, typePath, basePath, force, debug, con
     else if (debug) {
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
     }
-    const { fragment, propertyTypes } = createInitialFragment(contentType, false, undefined, forCms12);
+    const { fragment, propertyTypes } = createInitialFragment(contentType, false, undefined, generatedProps, forCms12);
     fs.writeFileSync(baseQueryFile, fragment);
     returnValue.push(contentType.key);
     let dependencies = Array.isArray(propertyTypes) ? [...propertyTypes] : [];
@@ -998,14 +1043,14 @@ function createGraphFragments(contentType, typePath, basePath, force, debug, con
                 return;
             }
             const fullTypeName = forCms12 ? contentType.key + propContentType.key : propContentType.key;
-            const propertyFragmentFile = path.join(basePath, propContentType.baseType, propContentType.key, `${fullTypeName}.property.graphql`);
+            const propertyFragmentFile = path.join(basePath, propContentType.baseType, propContentType.key.split(':').pop(), `${fullTypeName.split(':').pop()}.property.graphql`);
             const propertyFragmentDir = path.dirname(propertyFragmentFile);
             if (!fs.existsSync(propertyFragmentDir))
                 fs.mkdirSync(propertyFragmentDir, { recursive: true });
             if (!fs.existsSync(propertyFragmentFile) || force) {
                 if (debug)
                     process.stdout.write(chalk.gray(`${figures.arrowRight} Writing ${propContentType.displayName} (${propContentType.key}) property fragment\n`));
-                const propContentTypeInfo = createInitialFragment(propContentType, true, contentType, forCms12);
+                const propContentTypeInfo = createInitialFragment(propContentType, true, contentType, generatedProps, forCms12);
                 fs.writeFileSync(propertyFragmentFile, propContentTypeInfo.fragment);
                 returnValue.push(propContentType.key);
                 if (Array.isArray(propContentTypeInfo.propertyTypes))
@@ -1016,9 +1061,10 @@ function createGraphFragments(contentType, typePath, basePath, force, debug, con
     }
     return returnValue.length > 0 ? returnValue : undefined;
 }
-function createInitialFragment(contentType, forProperty = false, forBaseType, forCms12 = false) {
-    const { fragmentFields, propertyTypes } = renderProperties(contentType, forCms12);
-    const fragmentTarget = forProperty ? (forCms12 ? (forBaseType?.key ?? '') + contentType.key : contentType.key + 'Property') : contentType.key;
+function createInitialFragment(contentType, forProperty = false, forBaseType, generatedProps = [], forCms12 = false) {
+    const { fragmentFields, propertyTypes } = renderProperties(contentType, generatedProps, forCms12);
+    const contentTypeKey = contentType.key.split(':').pop();
+    const fragmentTarget = forProperty ? (forCms12 ? (forBaseType?.key ?? '') + contentTypeKey : contentTypeKey + 'Property') : contentTypeKey;
     const tpl = `fragment ${fragmentTarget}Data on ${fragmentTarget} {
   ${fragmentFields.join("\n  ")}
 }`;
@@ -1027,7 +1073,7 @@ function createInitialFragment(contentType, forProperty = false, forBaseType, fo
         propertyTypes: propertyTypes.length == 0 ? null : propertyTypes
     };
 }
-function renderProperties(contentType, forCms12 = false) {
+function renderProperties(contentType, generatedProps = [], forCms12 = false) {
     const propertyTypes = [];
     const fragmentFields = [];
     const typeProps = contentType.properties ?? {};
@@ -1039,7 +1085,8 @@ function renderProperties(contentType, forCms12 = false) {
         if (forCms12 && ['Categories'].includes(propKey))
             return;
         const propType = typeProps[propKey].type;
-        const isConflict = generatedProps.some(x => x.propName == propKey && x.propType != propType);
+        const propDataType = getPropDataType(typeProps[propKey]);
+        const isConflict = generatedProps.some(x => x.propName == propKey && x.propType != propDataType);
         const propName = isConflict ? `${contentType.key}${propKey}: ${propKey}` : propKey;
         // Write the property
         switch (propType) {
@@ -1048,8 +1095,10 @@ function renderProperties(contentType, forCms12 = false) {
                     const typeData = typeProps[propKey];
                     switch (typeData.items.type) {
                         case IntegrationApi.PropertyDataType.INTEGER:
-                            if (typeData.format == 'categorization')
-                                fragmentFields.push(`${propName} { Id, Name, Description }`);
+                            if (typeData.format == 'categorization') {
+                                //fragmentFields.push(`${propName} { Id, Name, Description }`)
+                                console.warn(chalk.redBright(`❗ Property ${propName} is a 'categorization', this is not supported. If you need to use this property, add it manually into the generated files`));
+                            }
                             else
                                 fragmentFields.push(propName);
                             break;
@@ -1063,7 +1112,7 @@ function renderProperties(contentType, forCms12 = false) {
                                 fragmentFields.push(`${propName} { ...IContentListItem }`);
                             break;
                         case IntegrationApi.PropertyDataType.COMPONENT:
-                            const componentType = typeData.items.contentType;
+                            const componentType = typeData.items.contentType.split(':').pop();
                             switch (componentType) {
                                 case 'link':
                                     fragmentFields.push(`${propName} { ...LinkItemData }`);
@@ -1111,8 +1160,8 @@ function renderProperties(contentType, forCms12 = false) {
                 fragmentFields.push(`${propName} { ...ReferenceData }`);
                 break;
             case IntegrationApi.PropertyDataType.COMPONENT: {
-                const componentType = typeProps[propKey].contentType;
-                if (forCms12 && componentType == "link") {
+                const componentType = typeProps[propKey].contentType.split(':').pop();
+                if (componentType == "link") {
                     fragmentFields.push(`${propName} { ...LinkItemData }`);
                 }
                 else {
@@ -1123,16 +1172,20 @@ function renderProperties(contentType, forCms12 = false) {
                 break;
             }
             case IntegrationApi.PropertyDataType.BINARY:
-                fragmentFields.push(`${propName} { ...BinaryData }`);
+                fragmentFields.push(propName);
+                break;
+            case IntegrationApi.PropertyDataType.CONTENT:
+                fragmentFields.push(`${propName} { ...${forCms12 ? 'PageIContentListItem' : 'BlockData'} }`);
                 break;
             default:
                 fragmentFields.push(propName);
                 break;
         }
-        generatedProps.push({
-            propType: typeProps[propKey].type,
-            propName: propKey
-        });
+        if (propName === propKey && !generatedProps.some(x => x.propName === propKey))
+            generatedProps.push({
+                propType: propDataType,
+                propName: propKey
+            });
     });
     if (contentType.baseType == "experience")
         fragmentFields.push('...ExperienceData');
@@ -1144,6 +1197,18 @@ function renderProperties(contentType, forCms12 = false) {
     }
     return { fragmentFields, propertyTypes };
 }
+function getPropDataType(baseInfo) {
+    const baseType = baseInfo.type;
+    if (!baseType)
+        throw new Error("Invalid property type definition");
+    const propInfo = baseInfo.type === "array" ? baseInfo.items : baseInfo;
+    switch (propInfo.type) {
+        case "string":
+            return propInfo.format === 'html' ? 'richtext' : propInfo.type;
+        default:
+            return propInfo.type;
+    }
+}
 
 function ucFirst(current) {
     if (typeof current != 'string')
@@ -1194,7 +1259,7 @@ function createComponent(contentType, typePath, force, debug = false) {
     // Get type information & short-hands
     const displayTemplate = getDisplayTemplateInfo$1(contentType, typePath);
     const baseDisplayTemplate = getBaseTypeTemplateInfo(contentType, typePath);
-    const varName = `${contentType.key}${ucFirst(contentType.baseType ?? 'part')}`;
+    const varName = `${contentType.key.split(':').pop()}${ucFirst(contentType.baseType ?? 'part')}`;
     const tplFn = Templates[contentType.baseType] ?? Templates['default'];
     if (!tplFn) {
         if (debug)
@@ -1233,7 +1298,7 @@ function getDisplayTemplateInfo$1(contentType, typePath) {
 const Templates = {
     // Default Template for all components without specifics
     default: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { CmsEditable, type CmsComponent } from "@remkoj/optimizely-cms-react/rsc";
-import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+import { ${contentType.key.split(':').pop()}DataFragmentDoc, type ${contentType.key.split(':').pop()}DataFragment } from "@/gql/graphql";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}${baseDisplayTemplate ? `
 import { ${baseDisplayTemplate} } from "../styles/displayTemplates";` : ''}
 
@@ -1241,22 +1306,23 @@ import { ${baseDisplayTemplate} } from "../styles/displayTemplates";` : ''}
  * ${contentType.displayName}
  * ${contentType.description}
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, editProps }) => {
+export const ${varName} : CmsComponent<${contentType.key.split(':').pop()}DataFragment${(displayTemplate || baseDisplayTemplate) ? ', ' + [displayTemplate, baseDisplayTemplate].filter(x => x).join(" | ") : ''}> = ({ data${(displayTemplate || baseDisplayTemplate) ? ', layoutProps' : ''}, editProps${contentType.baseType == 'section' ? ', children' : ''} }) => {
     const componentName = '${contentType.displayName}'
     const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
     return <CmsEditable className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4" {...editProps}>
         <div className="font-bold italic">{ componentName }</div>
         <div>{ componentInfo }</div>
-        { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }
+        { Object.getOwnPropertyNames(data).length > 0 && <pre className="w-full overflow-x-hidden font-mono text-sm bg-slate-200 p-2 rounded-sm border border-solid border-slate-900 text-slate-900">{ JSON.stringify(data, undefined, 4) }</pre> }${contentType.baseType == 'section' ? `
+        { children }` : ''}
     </CmsEditable>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getDataFragment = () => ['${contentType.key.split(':').pop()}Data', ${contentType.key.split(':').pop()}DataFragmentDoc]
 
 export default ${varName}`,
     // Template for all page component types
     page: (contentType, varName, displayTemplate) => `import { type OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
-import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+import { ${contentType.key.split(':').pop()}DataFragmentDoc, type ${contentType.key.split(':').pop()}DataFragment } from "@/gql/graphql";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}
 import { getSdk } from "@/gql"
 
@@ -1264,7 +1330,7 @@ import { getSdk } from "@/gql"
  * ${contentType.displayName}
  * ${contentType.description}
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''} }) => {
+export const ${varName} : CmsComponent<${contentType.key.split(':').pop()}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''} }) => {
     const componentName = '${contentType.displayName}'
     const componentInfo = '${contentType.description?.replaceAll("'", "\\'") ?? ''}'
     return <div className="mx-auto px-2 container">
@@ -1274,7 +1340,7 @@ export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTe
     </div>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getDataFragment = () => ['${contentType.key.split(':').pop()}Data', ${contentType.key.split(':').pop()}DataFragmentDoc]
 ${varName}.getMetaData = async (contentLink, locale, client) => {
     const sdk = getSdk(client);
     // Add your metadata logic here
@@ -1285,7 +1351,7 @@ export default ${varName}`,
     // Template for all experience component types
     experience: (contentType, varName, displayTemplate) => `import { type OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
 import { getFragmentData } from "@/gql/fragment-masking";
-import { ExperienceDataFragmentDoc, CompositionDataFragmentDoc, ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";
+import { ExperienceDataFragmentDoc, ${contentType.key.split(':').pop()}DataFragmentDoc, type ${contentType.key.split(':').pop()}DataFragment } from "@/gql/graphql";
 import { OptimizelyComposition, isNode, CmsEditable } from "@remkoj/optimizely-cms-react/rsc";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}
 import { getSdk } from "@/gql"
@@ -1294,14 +1360,14 @@ import { getSdk } from "@/gql"
  * ${contentType.displayName}
  * ${contentType.description}
  */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, ctx }) => {
-    const composition = getFragmentData(CompositionDataFragmentDoc, getFragmentData(ExperienceDataFragmentDoc, data)?.composition)
+export const ${varName} : CmsComponent<${contentType.key.split(':').pop()}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, ctx }) => {
+    const composition = getFragmentData(ExperienceDataFragmentDoc, data)?.composition
     return <CmsEditable as="div" className="mx-auto px-2 container" cmsFieldName="unstructuredData" ctx={ctx}>
-        { composition && isNode(composition) && <OptimizelyComposition node={composition} /> }
+        { composition && isNode(composition) && <OptimizelyComposition node={composition} ctx={ctx} /> }
     </CmsEditable>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getDataFragment = () => ['${contentType.key.split(':').pop()}Data', ${contentType.key}DataFragmentDoc]
 ${varName}.getMetaData = async (contentLink, locale, client) => {
     const sdk = getSdk(client);
     // Add your metadata logic here
@@ -1414,6 +1480,7 @@ function getDisplayTemplateInfo(template, typePath) {
 
 const ROOT_FACTORY_KEY = ".";
 const FACTORY_FILE_NAME = "index.ts";
+const reservedNames = ["loading.tsx", "loading.jsx", "suspense.tsx", "suspense.jsx"];
 const NextJsFactoryCommand = {
     command: "nextjs:factory",
     describe: "Create the ComponentFactory for a Next.JS / Optimizely Graph structure",
@@ -1422,17 +1489,22 @@ const NextJsFactoryCommand = {
         const { components: basePath, force, _config: { debug } } = parseArgs(args);
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Start generating component factories\n`));
+        // Get & filter all component files
         const components = globSync(["./**/*.jsx", "./**/*.tsx"], {
             cwd: basePath
         }).map(p => p.split(path.sep)).filter(p => {
+            // Get the filename
+            const fileName = p.at(p.length - 1);
+            if (!fileName)
+                return false;
             // Consider components in a file starting with "_" as a partial
-            if (p.at(p.length - 1)?.startsWith('_') == true)
+            if (fileName.startsWith('_') == true)
                 return false;
             // Consider components in a folder named "partials" as a partial
-            if (p.at(p.length - 2)?.toLowerCase() == 'partials')
+            if (p.some(folder => folder === 'partials'))
                 return false;
             // Skip the special loader component
-            if (p.at(p.length - 1) == "loading.tsx" || p.at(p.length - 1) == "loading.jsx")
+            if (reservedNames.includes(fileName))
                 return false;
             // Check if the file has a default export
             const fileBuffer = fs.readFileSync(path.join(basePath, p.join(path.sep)));
@@ -1443,87 +1515,70 @@ const NextJsFactoryCommand = {
             }
             return true;
         });
+        // Report what we have found
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Identified ${components.length} components in ${basePath}\n`));
+        // Build factory / component structure
         const componentFactoryDefintions = new Map();
         components.forEach(component => {
+            // Determine component target
+            const componentKey = processName(component.length == 1 ? ucFirst(path.basename(component[0], path.extname(component[0]))) : component.at(component.length - 2));
+            let componentVariant = (component.length > 1 ? component.at(component.length - 1) ?? 'default' : 'default').replace('index', 'default');
+            componentVariant = path.basename(componentVariant, path.extname(componentVariant));
+            const componentDir = path.dirname(path.join(...component));
+            // Get factory information
             const factorySegments = component.length > 2 ? component.slice(0, -2) : [ROOT_FACTORY_KEY];
-            const factoryKey = factorySegments.join(path.sep);
+            const factoryKey = path.posix.join(...factorySegments);
             const factoryFile = path.join(factoryKey, FACTORY_FILE_NAME);
-            // Add component to factory
+            // Check dynamic & suspense
+            const useDynamic = [
+                path.join(basePath, componentDir, 'loading.tsx'),
+                path.join(basePath, componentDir, 'loading.jsx')
+            ].some(fs.existsSync);
+            const useSuspense = [
+                path.join(basePath, componentDir, 'suspense.tsx'),
+                path.join(basePath, componentDir, 'suspense.jsx')
+            ].some(fs.existsSync);
+            // Prepare data
+            const componentImport = component.length == 1 ?
+                `.${path.posix.sep}${path.basename(component[0], path.extname(component[0]))}` :
+                `.${path.posix.sep}${path.posix.relative(factoryKey, componentDir)}${componentVariant !== 'default' ? path.posix.sep + componentVariant : ''}`;
+            const loaderImport = useDynamic ? componentImport + path.posix.sep + 'loading' : undefined;
+            const suspenseImport = useSuspense ? componentImport + path.posix.sep + 'suspense' : undefined;
+            const componentVariablesBase = componentKey + (componentVariant !== 'default' ? processName(componentVariant) : '');
+            // Add to the factory
             const factory = componentFactoryDefintions.get(factoryKey) || { file: factoryFile, entries: [], subfactories: [] };
-            const useSuspense = fs.existsSync(path.join(basePath, component.slice(0, -1).join(path.sep), 'loading.tsx')) || fs.existsSync(path.join(basePath, component.slice(0, -1).join(path.sep), 'loading.jsx'));
-            if (useSuspense && debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Components in ${component.slice(0, -1).join(path.sep)} will use suspense\n`));
-            const componentSegments = component.slice(-2).map(p => {
-                const entry = p.substring(0, p.length - path.extname(p).length);
-                return entry.toLowerCase() == "index" ? null : entry;
-            }).filter(x => x);
-            const componentImport = "./" + componentSegments.join('/');
-            const loaderImport = useSuspense ? "./" + component.slice(-2).map((p, i, a) => {
-                const entry = p.substring(0, p.length - path.extname(p).length);
-                if (i == a.length - 1)
-                    return 'loading';
-                return entry.toLowerCase() == "index" ? null : entry;
-            }).join('/') : undefined;
             factory.entries.push({
+                key: componentKey,
+                variant: componentVariant,
                 import: componentImport,
-                variable: [...componentSegments.map(processName), 'Component'].join(''),
-                key: componentSegments.join('/') == "node" ? "Node" : componentSegments.join('/'),
+                variable: componentVariablesBase + 'Component',
                 loaderImport,
-                loaderVariable: useSuspense ? [...componentSegments.map(processName), 'Loader'].join('') : undefined,
+                loaderVariable: useDynamic ? componentVariablesBase + 'Loader' : undefined,
+                suspenseImport,
+                suspenseVariable: useSuspense ? componentVariablesBase + 'Placeholder' : undefined
             });
             componentFactoryDefintions.set(factoryKey, factory);
-            // Register with all appropriate parents
+            // Add/update parent factories
             const parentSegements = factoryKey == ROOT_FACTORY_KEY ? factorySegments.slice(0, -1) : [ROOT_FACTORY_KEY, ...factorySegments.slice(0, -1)];
-            let currentFactory = {
-                key: factoryKey,
-                import: './' + factorySegments.slice(-1).join('/'),
-                prefix: processName(factorySegments.slice(-1).at(0)),
-                variable: factorySegments.map(processName).join("") + "Factory"
-            };
-            for (let i = parentSegements.length; i > 0; i--) {
-                const parentFactoryKey = parentSegements.slice(0, i).filter(x => x != ROOT_FACTORY_KEY).join(path.sep) || ROOT_FACTORY_KEY;
+            parentSegements.forEach((_, idx, data) => {
+                const parentFactoryKey = path.posix.join(...data.slice(0, idx + 1)) || ROOT_FACTORY_KEY;
+                const childFactoryKey = factorySegments.slice(idx, idx + 1).at(0);
                 const parentFactory = componentFactoryDefintions.get(parentFactoryKey) ?? { file: path.join(parentFactoryKey, FACTORY_FILE_NAME), entries: [], subfactories: [] };
-                if (!parentFactory.subfactories.some(x => x.key == currentFactory.key))
-                    parentFactory.subfactories.push(currentFactory);
-                componentFactoryDefintions.set(parentFactoryKey, parentFactory);
-                if (i > 1) {
-                    currentFactory = {
-                        key: parentFactoryKey,
-                        import: './' + parentFactoryKey.split(path.sep).slice(-1).at(0),
-                        prefix: processName(parentFactoryKey.split(path.sep).slice(-1).at(0)),
-                        variable: parentFactoryKey.split(path.sep).map(processName).join("") + "Factory"
-                    };
+                if (!parentFactory.subfactories.some(x => x.key === childFactoryKey)) {
+                    parentFactory.subfactories.push({
+                        key: childFactoryKey,
+                        import: './' + childFactoryKey,
+                        variable: processName(childFactoryKey) + 'Factory'
+                    });
+                    componentFactoryDefintions.set(parentFactoryKey, parentFactory);
                 }
-            }
-        });
-        const mainFactory = componentFactoryDefintions.get(ROOT_FACTORY_KEY);
-        if (mainFactory) {
-            if (debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Updating prefixes within RootFactory\n`));
-            mainFactory.subfactories = mainFactory.subfactories.map(subFactory => {
-                if (typeof (subFactory.prefix == 'string'))
-                    switch (subFactory.prefix) {
-                        case "Video":
-                        case "Image":
-                            subFactory.prefix = ["Media", subFactory.prefix, "Component"];
-                            break;
-                        case "Experience":
-                            subFactory.prefix = [subFactory.prefix, "Page"];
-                            break;
-                        case "Element":
-                            subFactory.prefix = ["Component"];
-                            break;
-                        case "Media":
-                            subFactory.prefix = [subFactory.prefix, "Component"];
-                            break;
-                    }
-                return subFactory;
             });
-        }
+        });
+        // Report factory file count
         if (debug)
             process.stdout.write(chalk.gray(`${figures.arrowRight} Finished preparing ${componentFactoryDefintions.size} factories, start writing\n`));
+        // Iterate over the factories and create them
         let updateCounter = 0;
         for (const key of componentFactoryDefintions.keys()) {
             const factory = componentFactoryDefintions.get(key);
@@ -1572,59 +1627,55 @@ function processName(input) {
     return nameSegements.map(ucFirst).join('');
 }
 function generateFactory(factoryInfo, factoryKey) {
-    const needsPrefixFunction = factoryInfo.subfactories.length > 0;
+    // Get the factory name
     const factoryName = factoryKey.split(path.sep).map(processName).join("") + "Factory";
-    const components = factoryInfo.entries;
-    const subFactories = factoryInfo.subfactories;
-    const factoryContent = `// Auto generated dictionary
+    // Get the components and sub-factories, sorted by key to minimize changes between runs
+    const components = [...factoryInfo.entries].sort((a, b) => { return a.key < b.key ? -1 : a.key > b.key ? 1 : 0; });
+    const subFactories = [...factoryInfo.subfactories].sort((a, b) => { return a.key < b.key ? -1 : a.key > b.key ? 1 : 0; });
+    // Check if there's at least one component that uses next/dynamic
+    const hasDynamic = factoryInfo.entries.some(x => x.loaderImport);
+    // The intro for the factory
+    const factoryIntro = `// Auto generated dictionary
 // @not-modified => When this line is removed, the "force" parameter of the CLI tool is required to overwrite this file
-import { type ComponentTypeDictionary } from "@remkoj/optimizely-cms-react";
-${[...components, ...subFactories].map(x => {
-        let importLine = `import ${x.variable} from "${x.import}";`;
-        if (x.loaderImport && x.loaderVariable) {
-            importLine += `\nimport ${x.loaderVariable} from "${x.loaderImport}";`;
-        }
-        return importLine;
-    }).join("\n")}
-
-${needsPrefixFunction ? `// Prefix entries - if needed
-${subFactories.map(subFactory => Array.isArray(subFactory.prefix) ?
-        subFactory.prefix.map(z => `prefixDictionaryEntries(${subFactory.variable}, "${z}");`).join("\n") :
-        `prefixDictionaryEntries(${subFactory.variable}, "${subFactory.prefix}");`).join("\n")}
-
-` : ''}// Build dictionary
-export const ${factoryName} : ComponentTypeDictionary = [
-    ${[...components.map(x => {
-            if (x.loaderVariable) {
-                return `{ 
-        type: "${x.key}", 
-        component: ${x.variable},
-        useSuspense: true,
-        loader: ${x.loaderVariable}
-    }`;
-            }
-            else {
-                return `{ 
-        type: "${x.key}", 
-        component: ${x.variable} 
-    }`;
-            }
-        }), ...subFactories.map(x => `...${x.variable}`)].join(",\n    ")}
-];
-
-// Export dictionary
-export default ${factoryName};
-${needsPrefixFunction ? `
-// Helper functions
-function prefixDictionaryEntries(list: ComponentTypeDictionary, prefix: string) : ComponentTypeDictionary
-{
-    list.forEach((component, idx, dictionary) => {
-        dictionary[idx].type = typeof component.type == 'string' ? prefix + "/" + component.type : [ prefix, ...component.type ]
-    });
-    return list;
-}
-` : ''}`;
-    return factoryContent;
+import { type ComponentTypeDictionary } from '@remkoj/optimizely-cms-react';${hasDynamic ? `
+import dynamic from 'next/dynamic';` : ''}`;
+    // The outry for the factory
+    const factoryOutro = `// Export dictionary
+export default ${factoryName};`;
+    // The imports of the factory
+    const factoryImports = [...components, ...subFactories].map(x => {
+        let imports = [x.loaderImport ?
+                `import ${x.loaderVariable} from '${x.loaderImport}';` :
+                `import ${x.variable} from '${x.import}';`];
+        if (x.suspenseImport)
+            imports.push(`import ${x.suspenseVariable} from '${x.suspenseImport}';`);
+        return imports.join('\n');
+    }).join('\n');
+    // The dynamic imports of the factory
+    const dynamicImports = hasDynamic ? `// Lazy load components that have a loading file, this only affects client components
+// See https://nextjs.org/docs/app/guides/lazy-loading#importing-server-components
+// for more details on how this affects server components in Next.js
+` + components.filter(x => x.loaderImport).map(x => {
+        return `const ${x.variable} = dynamic(() => import('${x.import}'), {
+  ssr: true,
+  loading: ${x.loaderVariable}
+});`;
+    }).join('\n') : undefined;
+    // The actual entries for the factory
+    const factoryEntries = [...components.map(x => {
+            return `  {
+    type: '${x.key}',${x.variant && x.variant !== 'default' ? `
+    variant: '${x.variant}',` : ''}
+    component: ${x.variable}${x.suspenseVariable ? `,
+    useSuspense: true,
+    loader: ${x.suspenseVariable}` : ''}
+  }`;
+        }), ...subFactories.map(x => `  ...${x.variable}`)];
+    // The body of the factory
+    const factoryBody = `// Build dictionary
+export const ${factoryName} : ComponentTypeDictionary = [${factoryEntries.length > 0 ? '\n' + factoryEntries.join(',\n') + '\n' : ''}];`;
+    // Combine everything into one string
+    return [factoryIntro, factoryImports, dynamicImports, factoryBody, factoryOutro].filter(x => (x?.length || 0) > 0).join('\n\n') + '\n';
 }
 
 const NextJsCreateCommand = {
@@ -1668,15 +1719,16 @@ const NextJsQueriesCommand = {
     handler: async (args, opts) => {
         // Prepare
         const { loadedContentTypes, createdTypeFolders } = opts || {};
-        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        const { components: basePath, _config: { debug }, force, path: appPath } = parseArgs(args);
         const client = createCmsClient(args);
         const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
+        const generatedProps = getGeneratedProps(appPath);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL fragments for ${contentTypes.map(x => x.key).join(', ')}\n`));
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
         const updatedTypes = contentTypes.map(contentType => {
             const typePath = getTypeFolder(typeFolders, contentType.key);
-            return createGraphQueries(contentType, typePath, basePath, force, debug, allContentTypes, client.runtimeCmsVersion == OptiCmsVersion.CMS12);
+            return createGraphQueries(contentType, typePath, basePath, force, debug, allContentTypes, generatedProps, client.runtimeCmsVersion == OptiCmsVersion.CMS12);
         }).filter(x => x).flat();
         // Report outcome
         if (updatedTypes.length > 0)
@@ -1685,9 +1737,10 @@ const NextJsQueriesCommand = {
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL fragments created/updated\n`));
         if (!opts)
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+        writeGeneratedProps(appPath, generatedProps);
     }
 };
-function createGraphQueries(contentType, typePath, basePath, force, debug, contentTypes, forCms12 = false) {
+function createGraphQueries(contentType, typePath, basePath, force, debug, contentTypes, generatedProps = [], forCms12 = false) {
     const returnValue = [];
     const baseQueryFile = path.join(typePath, `${contentType.key}.query.graphql`);
     if (fs.existsSync(baseQueryFile)) {
@@ -1704,7 +1757,7 @@ function createGraphQueries(contentType, typePath, basePath, force, debug, conte
     else if (debug) {
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
     }
-    const { fragment, propertyTypes } = createInitialQuery(contentType, false, undefined, forCms12);
+    const { fragment, propertyTypes } = createInitialQuery(contentType, false, undefined, generatedProps, forCms12);
     fs.writeFileSync(baseQueryFile, fragment);
     returnValue.push(contentType.key);
     let dependencies = Array.isArray(propertyTypes) ? [...propertyTypes] : [];
@@ -1724,7 +1777,7 @@ function createGraphQueries(contentType, typePath, basePath, force, debug, conte
             if (!fs.existsSync(propertyFragmentFile) || force) {
                 if (debug)
                     process.stdout.write(chalk.gray(`${figures.arrowRight} Writing ${propContentType.displayName} (${propContentType.key}) property fragment\n`));
-                const propContentTypeInfo = createInitialFragment(propContentType, true, contentType, forCms12);
+                const propContentTypeInfo = createInitialFragment(propContentType, true, contentType, generatedProps, forCms12);
                 fs.writeFileSync(propertyFragmentFile, propContentTypeInfo.fragment);
                 returnValue.push(propContentType.key);
                 if (Array.isArray(propContentTypeInfo.propertyTypes))
@@ -1735,8 +1788,8 @@ function createGraphQueries(contentType, typePath, basePath, force, debug, conte
     }
     return returnValue.length > 0 ? returnValue : undefined;
 }
-function createInitialQuery(contentType, forProperty = false, forBaseType, forCms12 = false) {
-    const { fragmentFields, propertyTypes } = renderProperties(contentType, forCms12);
+function createInitialQuery(contentType, forProperty = false, forBaseType, generatedProps = [], forCms12 = false) {
+    const { fragmentFields, propertyTypes } = renderProperties(contentType, generatedProps, forCms12);
     const fragmentTarget = forProperty ? (forCms12 ? ('') + contentType.key : contentType.key + 'Property') : contentType.key;
     const tpl = `query get${fragmentTarget}Data($key: String!, $locale: [Locales], $version: String, $changeset: String, $variation: String) {
   data: ${fragmentTarget} (
@@ -2116,7 +2169,7 @@ const commands = [
     CmsVersionCommand
 ];
 
-var version = "5.1.6";
+var version = "5.2.0";
 var name = "opti-cms";
 var APP = {
 	version: version,
@@ -2124,8 +2177,9 @@ var APP = {
 };
 
 async function main() {
-    const envFiles = prepare();
-    const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles);
+    const projectDir = getProjectDir();
+    const envFiles = prepare(projectDir);
+    const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles, projectDir);
     app.command(commands);
     try {
         await app.parse(process.argv.slice(2));