@remkoj/optimizely-cms-cli 5.1.7 → 5.3.0

package/dist/index.js

@@ -3,11 +3,12 @@ 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 { getCmsIntegrationApiConfigFromEnvironment, createClient, ContentBaseType, OptiCmsVersion, PropertyDataType, ContentRoots } from '@remkoj/optimizely-cms-api';
 import yargs from 'yargs';
 import chalk from 'chalk';
 import figures from 'figures';
 import Table from 'cli-table3';
+import { diff } from 'deep-object-diff';
 import fsAsync from 'node:fs/promises';
 import { input, select, confirm } from '@inquirer/prompts';
 
@@ -15,7 +16,7 @@ function getProjectDir() {
     let testPath = process.cwd();
     let hasPackageJson = false;
     do {
-        hasPackageJson = fs.statSync('/' + path.join(testPath, 'package.json'), { throwIfNoEntry: false })?.isFile() ?? false;
+        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);
@@ -31,7 +32,7 @@ function getProjectDir() {
  * @returns     A string array with the files processed
  */
 function prepare(pDir) {
-    const projectDir = getProjectDir();
+    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`));
@@ -79,7 +80,7 @@ function createOptiCmsApp(scriptName, version, epilogue, envFiles, projectDir) {
             console.error(msg + "\n");
         if (error)
             console.error(`[${chalk.bold(error.name ?? 'Error')}]: ${error.message ?? ''}\n`);
-        args.showHelp("error");
+        //args.showHelp("error")
     });
 }
 function isDemanded(value) {
@@ -138,79 +139,6 @@ function createCmsClient(args) {
     return client;
 }
 
-const StylesPushCommand = {
-    command: "styles:push",
-    describe: "Push Visual Builder style definitions into the CMS (create/replace)",
-    builder: (yargs) => {
-        yargs.option('excludeTemplates', { alias: 'e', description: "Exclude these templates", string: true, type: 'array', demandOption: false, default: [] });
-        yargs.option("templates", { alias: 't', description: "Select only these templates", string: true, type: 'array', demandOption: false, default: [] });
-        return yargs;
-    },
-    handler: async (args) => {
-        const { _config: cfg, excludeTemplates, templates, ...opts } = parseArgs(args);
-        const client = createCmsClient(args);
-        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
-            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
-            return;
-        }
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/replace) DisplayStyles into Optimizely CMS\n`));
-        const styleDefinitionFiles = await glob("./**/*.opti-style.json", {
-            cwd: opts.components
-        });
-        const results = (await Promise.all(styleDefinitionFiles.map(async (styleDefinitionFile) => {
-            const filePath = path.normalize(path.join(opts.components, styleDefinitionFile));
-            const styleDefinition = tryReadJsonFile(filePath, cfg.debug);
-            const styleKey = styleDefinition.key;
-            if (!styleKey) {
-                process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The style definition in ${path.relative(opts.path, filePath)} does not have a key defined\n`));
-                return undefined;
-            }
-            if (excludeTemplates.includes(styleKey))
-                return undefined; // Skip excluded styles
-            if (templates.length > 0 && !templates.includes(styleKey))
-                return undefined; // Only include defined styles, if any
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Pushing: ${styleKey}\n`));
-            const newTemplate = await client.displayTemplates.displayTemplatesPut(styleKey, styleDefinition);
-            return newTemplate;
-        }))).filter(isNotNullOrUndefined);
-        const styles = new Table({
-            head: [
-                chalk.yellow(chalk.bold("Name")),
-                chalk.yellow(chalk.bold("Key")),
-                chalk.yellow(chalk.bold("Default")),
-                chalk.yellow(chalk.bold("Target"))
-            ],
-            colWidths: [31, 20, 9, 20],
-            colAligns: ["left", "left", "center", "left"]
-        });
-        results.forEach(tpl => {
-            styles.push([
-                tpl.displayName,
-                tpl.key,
-                tpl.isDefault ? figures.tick : figures.cross,
-                tpl.contentType ? `${tpl.contentType} (C)` : tpl.baseType ? `${tpl.baseType} (B)` : `${tpl.nodeType} (N)`
-            ]);
-        });
-        process.stdout.write(styles.toString() + "\n");
-        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
-    }
-};
-function tryReadJsonFile(filePath, debug = false) {
-    try {
-        if (debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Reading style definition from ${filePath}\n`));
-        return JSON.parse(fs.readFileSync(filePath, { encoding: 'utf-8' }));
-    }
-    catch (e) {
-        process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} Error while reading ${filePath}\n`));
-    }
-    return undefined;
-}
-function isNotNullOrUndefined(i) {
-    return i ? true : false;
-}
-
 const ContentTypesArgsDefaults = {
     excludeBaseTypes: [],
     excludeTypes: ['folder', 'media', 'image', 'video'],
@@ -250,7 +178,7 @@ async function getContentTypes(client, args, pageSize = 100, allowSystem = false
         process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched ${results.length} Content-Types from Optimizely CMS\n`));
         process.stdout.write(chalk.gray(`${figures.arrowRight} Filtering Content-Types based upon arguments\n`));
     }
-    const validBaseTypes = getEnumOptions(IntegrationApi.ContentBaseType).map(x => x.toLowerCase());
+    const validBaseTypes = getEnumOptions(ContentBaseType).map(x => x.toLowerCase());
     if (cfg.debug)
         process.stdout.write(`Allowing base types: ${validBaseTypes.join(', ')}\n`);
     const allContentTypes = all ?
@@ -409,6 +337,269 @@ async function getStyleFilePath(definition, opts) {
     throw new Error(`Unable to resolve the target for the DisplayTemplate: ${definition.key}`);
 }
 
+function normalizeMergePatch(value, omitKeys, requiredKeys = [], requiredSource) {
+    if (value === undefined || value === null)
+        return null;
+    if (Array.isArray(value))
+        return value.map(item => normalizeMergePatch(item, omitKeys));
+    if (typeof value !== 'object')
+        return value;
+    const output = Object.entries(value).reduce((acc, [key, entry]) => {
+        if (!omitKeys.includes(key))
+            acc[key] = normalizeMergePatch(entry, omitKeys);
+        return acc;
+    }, {});
+    const withRequiredKeys = requiredKeys.reduce((acc, key) => {
+        if (requiredSource && !Object.keys(acc).includes(key))
+            acc[key] = requiredSource[key];
+        return acc;
+    }, output);
+    return withRequiredKeys;
+}
+/**
+ * Computes a JSON Merge Patch (RFC 7396) that transforms `currentValue` into `newValue`.
+ *
+ * The resulting patch can be sent directly as the request body of an `application/merge-patch+json`
+ * request. Changed and added properties are included with their new value; removed properties are
+ * included with a `null` value (as required by RFC 7396); unchanged properties are omitted entirely.
+ *
+ * @see https://datatracker.ietf.org/doc/html/rfc7396
+ *
+ * @example Basic usage
+ * ```ts
+ * const current = { name: 'Alice', age: 30, role: 'user' }
+ * const updated = { name: 'Alice', age: 31 }
+ *
+ * generatePatch(current, updated)
+ * // => { age: 31, role: null }
+ * //   `age` is replaced, `role` is removed (null), `name` is unchanged (omitted)
+ * ```
+ *
+ * @example Excluding keys from the patch
+ * ```ts
+ * const current = { id: '123', name: 'Alice', version: 1 }
+ * const updated = { id: '123', name: 'Bob',   version: 2 }
+ *
+ * generatePatch(current, updated, { readonlyFields: ['id', 'version'] })
+ * // => { name: 'Bob' }
+ * //   `id` and `version` are excluded even though they are present in the diff
+ * ```
+ *
+ * @example Always include required fields
+ * ```ts
+ * const current = { id: '123', name: 'Alice', version: 1 }
+ * const updated = { id: '123', name: 'Alice', version: 2 }
+ *
+ * generatePatch(current, updated, { requiredFields: ['id'] })
+ * // => { id: '123', version: 2 }
+ * //   `id` is included even though it did not change
+ * ```
+ *
+ * @example Nested objects
+ * ```ts
+ * const current = { address: { city: 'Amsterdam', zip: '1000AA' } }
+ * const updated = { address: { city: 'Utrecht' } }
+ *
+ * generatePatch(current, updated)
+ * // => { address: { city: 'Utrecht', zip: null } }
+ * ```
+ *
+ * @param currentValue - The current state of the resource.
+ * @param newValue     - The desired state of the resource.
+ * @param options      - Optional configuration.
+ * @param options.readonlyFields - Keys that should never appear in the generated patch,
+ *                           regardless of whether they changed.
+ * @param options.requiredFields - Keys that should always appear in the generated patch,
+ *                           using values from `newValue`.
+ * @returns A {@link MergePatch} object ready to be serialised as an `application/merge-patch+json` body.
+ */
+function generatePatch(currentValue, newValue, options = {}) {
+    const requiredKeys = options.requiredFields ?? [];
+    const omitKeys = (options.readonlyFields ?? []).filter(key => !requiredKeys.includes(key));
+    const patch = diff(currentValue, newValue);
+    return normalizeMergePatch(patch, omitKeys, requiredKeys, newValue);
+}
+/**
+ * Extracts all field paths from a {@link MergePatch} as dot-separated strings.
+ * Nested objects are flattened recursively; leaf values (including `null`) produce a path entry.
+ *
+ * @example
+ * ```ts
+ * getPatchFields({ a: { b: 0 }, c: 'value' })
+ * // => ['a.b', 'c']
+ * ```
+ *
+ * @param patch  - The merge patch to extract fields from.
+ * @param prefix - Internal prefix used during recursion; omit when calling directly.
+ * @returns An array of dot-separated field path strings.
+ */
+function getPatchFields(patch, prefix = '') {
+    return Object.entries(patch).flatMap(([key, value]) => {
+        const path = prefix ? `${prefix}.${key}` : key;
+        return typeof value === 'object' && value !== null && !Array.isArray(value)
+            ? getPatchFields(value, path)
+            : [path];
+    });
+}
+
+/**
+ * CLI command that synchronizes local `.opti-style.json` definitions with Optimizely CMS.
+ *
+ * Existing styles are patched, missing styles are created, and command options allow
+ * selecting or excluding template keys during the push.
+ */
+const StylesPushCommand = {
+    command: 'styles:push',
+    describe: 'Push Visual Builder style definitions into the CMS (create/patch)',
+    builder: (yargs) => {
+        yargs.option('excludeTemplates', {
+            alias: 'e',
+            description: 'Exclude these templates',
+            string: true,
+            type: 'array',
+            demandOption: false,
+            default: [],
+        });
+        yargs.option('templates', {
+            alias: 't',
+            description: 'Select only these templates',
+            string: true,
+            type: 'array',
+            demandOption: false,
+            default: [],
+        });
+        return yargs;
+    },
+    handler: async (args) => {
+        const { _config: { debug = false }, excludeTemplates, templates, ...opts } = parseArgs(args);
+        const client = createCmsClient(args);
+        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
+            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
+            return;
+        }
+        const { styles: displayTemplates } = await getStyles(client, {
+            // Defaults
+            all: true,
+            baseTypes: [],
+            excludeBaseTypes: [],
+            excludeNodeTypes: [],
+            excludeTemplates: [],
+            excludeTypes: [],
+            nodes: [],
+            templates: [],
+            templateTypes: [],
+            types: [],
+            // Arguments from this method
+            ...args,
+        }, 50);
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/patch) DisplayStyles into Optimizely CMS\n`));
+        // Listing all style files
+        const styleDefinitionFiles = await glob('./**/*.opti-style.json', {
+            cwd: opts.components,
+        });
+        // Helper function to read the files from disk
+        function readStyleFile(styleDefinitionFile) {
+            const filePath = path.normalize(path.join(opts.components, styleDefinitionFile));
+            const styleDefinition = tryReadJsonFile(filePath, debug);
+            return styleDefinition ? {
+                styleKey: styleDefinition.key,
+                styleDefinition,
+                styleFile: filePath
+            } : undefined;
+        }
+        // Helper function to filter the files read from disk
+        function filterStyleDefinition(data) {
+            if (!data || !data.styleKey)
+                return false;
+            const { styleKey } = data;
+            if (excludeTemplates.includes(styleKey)) {
+                if (debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${styleKey} - explicitly excluded\n`));
+                return false;
+            }
+            // Skip if there a selectin and this template is not in it
+            if (templates.length > 0 && !templates.includes(styleKey)) {
+                if (debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${styleKey} - not in selected list of templates\n`));
+                return false; // Only include defined styles, if any
+            }
+            return true;
+        }
+        // Processing each file
+        const results = await Promise.allSettled(styleDefinitionFiles
+            .map(readStyleFile)
+            .filter(filterStyleDefinition)
+            .map(async ({ styleKey, styleDefinition, styleFile }) => {
+            const displayTemplate = displayTemplates.find(dt => dt.key === styleKey);
+            // Confirm we're including
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} ${displayTemplate ? 'Updating' : 'Creating'} ${styleKey}\n`));
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} from ${styleFile || 'unknown source'}\n`));
+            // Patch or create the template
+            const newTemplate = await (displayTemplate ? (async () => {
+                const patch = generatePatch(displayTemplate, styleDefinition, {
+                    readonlyFields: ['key', 'created', 'createdBy', 'lastModified', 'lastModifiedBy'],
+                });
+                if (!path || Object.entries(patch).length === 0)
+                    return displayTemplate;
+                // @ts-expect-error: We're expecting an error here due to the CMS Logic not matching 
+                // the OpenAPI Specification.
+                return client.displayTemplates.displayTemplatesPatch(styleKey, patch);
+            })() : client.displayTemplates.displayTemplatesCreate(displayTemplate));
+            // Validate the result
+            const unpatchedFields = generatePatch(newTemplate, styleDefinition, {
+                readonlyFields: ['key', 'created', 'createdBy', 'lastModified', 'lastModifiedBy']
+            });
+            if (unpatchedFields && Object.entries(unpatchedFields).length > 0)
+                throw new Error(`Creating/patching of displayTemplate failed, the following fields failed: ${getPatchFields(unpatchedFields).join('; ')}`);
+            // Return the template after Create/Patch
+            return newTemplate;
+        }));
+        const styles = new Table({
+            head: [
+                chalk.yellow(chalk.bold('Name')),
+                chalk.yellow(chalk.bold('Key')),
+                chalk.yellow(chalk.bold('Default')),
+                chalk.yellow(chalk.bold('Target')),
+            ],
+            colWidths: [31, 20, 9, 20],
+            colAligns: ['left', 'left', 'center', 'left'],
+        });
+        results.forEach((result) => {
+            if (result.status === 'fulfilled') {
+                const tpl = result.value;
+                styles.push([
+                    tpl.displayName,
+                    tpl.key,
+                    tpl.isDefault ? figures.tick : figures.cross,
+                    tpl.contentType
+                        ? `${tpl.contentType} (C)`
+                        : tpl.baseType
+                            ? `${tpl.baseType} (B)`
+                            : `${tpl.nodeType} (N)`,
+                ]);
+            }
+            else {
+                const error = result.reason;
+                process.stderr.write(`Error creating/updating style: ${error}`);
+            }
+        });
+        process.stdout.write(styles.toString() + '\n');
+        process.stdout.write(chalk.green(chalk.bold(figures.tick + ' Done')) + '\n');
+    },
+};
+function tryReadJsonFile(filePath, debug = false) {
+    try {
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Reading style definition from ${filePath}\n`));
+        return JSON.parse(fs.readFileSync(filePath, { encoding: 'utf-8' }));
+    }
+    catch (e) {
+        process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} Error while reading ${filePath}\n`));
+    }
+    return undefined;
+}
+
 const StylesListCommand = {
     command: "styles:list",
     describe: "List Visual Builder style definitions from the CMS",
@@ -864,7 +1055,7 @@ const TypesPullCommand = {
 
 const TypesPushCommand = {
     command: "types:push",
-    describe: "Push content type definition into Optimizely CMS (create / replace)",
+    describe: "Push content type definition into Optimizely CMS (create / patch)",
     builder: (yargs) => {
         yargs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
         yargs.option('excludeTypes', { alias: 'ect', description: "Exclude these content types", string: true, type: 'array', demandOption: false, default: [] });
@@ -877,7 +1068,7 @@ const TypesPushCommand = {
         const { _config: cfg, components: basePath, excludeBaseTypes, excludeTypes, baseTypes, types, force } = parseArgs(args);
         const client = createClient(cfg);
         // Find all type files
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/replace) Content Types into Optimizely CMS\n`));
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/patch) Content Types into Optimizely CMS\n`));
         const typeDefinitionFiles = await glob("./**/*.opti-type.json", { cwd: basePath });
         // Read & filter all identified type files
         const typeDefinitions = typeDefinitionFiles.map(file => {
@@ -907,7 +1098,7 @@ const TypesPushCommand = {
                 delete outType.features;
             if (outType.usage)
                 delete outType.usage;
-            return client.contentTypes.contentTypesPut(outType.key, outType, force)
+            return client.contentTypes.contentTypesPatch(outType.key, outType, force)
                 .then(ct => { return { key: type.definition.key, type: ct, file: type.file }; })
                 .catch(e => { return { key: type.definition.key, type: type.definition, file: type.file, error: e }; });
         }));
@@ -963,40 +1154,55 @@ 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.split(':').pop()}.${baseType}.graphql`);
@@ -1015,7 +1221,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] : [];
@@ -1035,7 +1241,7 @@ function createGraphFragments(contentType, typePath, basePath, force, debug, con
             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))
@@ -1046,8 +1252,8 @@ 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);
+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} {
@@ -1058,7 +1264,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 ?? {};
@@ -1070,30 +1276,33 @@ 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) {
-            case IntegrationApi.PropertyDataType.ARRAY:
+            case PropertyDataType.ARRAY:
                 {
                     const typeData = typeProps[propKey];
                     switch (typeData.items.type) {
-                        case IntegrationApi.PropertyDataType.INTEGER:
-                            if (typeData.format == 'categorization')
-                                fragmentFields.push(`${propName} { Id, Name, Description }`);
+                        case PropertyDataType.INTEGER:
+                            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;
-                        case IntegrationApi.PropertyDataType.STRING:
+                        case PropertyDataType.STRING:
                             fragmentFields.push(propName);
                             break;
-                        case IntegrationApi.PropertyDataType.CONTENT:
+                        case PropertyDataType.CONTENT:
                             if (contentType.baseType == 'page' || contentType.baseType == 'experience')
                                 fragmentFields.push(`${propName} { ...${forCms12 ? 'PageIContentListItem' : 'BlockData'} }`);
                             else
                                 fragmentFields.push(`${propName} { ...IContentListItem }`);
                             break;
-                        case IntegrationApi.PropertyDataType.COMPONENT:
+                        case PropertyDataType.COMPONENT:
                             const componentType = typeData.items.contentType.split(':').pop();
                             switch (componentType) {
                                 case 'link':
@@ -1108,7 +1317,7 @@ function renderProperties(contentType, forCms12 = false) {
                                     }
                             }
                             break;
-                        case IntegrationApi.PropertyDataType.CONTENT_REFERENCE:
+                        case PropertyDataType.CONTENT_REFERENCE:
                             fragmentFields.push(`${propName} { ...ReferenceData }`);
                             break;
                         default:
@@ -1117,7 +1326,7 @@ function renderProperties(contentType, forCms12 = false) {
                     }
                     break;
                 }
-            case IntegrationApi.PropertyDataType.STRING: {
+            case PropertyDataType.STRING: {
                 const propDetails = typeProps[propKey];
                 switch (propDetails.format ?? "") {
                     case 'html':
@@ -1135,15 +1344,15 @@ function renderProperties(contentType, forCms12 = false) {
                 }
                 break;
             }
-            case IntegrationApi.PropertyDataType.URL:
+            case PropertyDataType.URL:
                 fragmentFields.push(forCms12 ? propName : `${propName} { ...LinkData }`);
                 break;
-            case IntegrationApi.PropertyDataType.CONTENT_REFERENCE:
+            case PropertyDataType.CONTENT_REFERENCE:
                 fragmentFields.push(`${propName} { ...ReferenceData }`);
                 break;
-            case IntegrationApi.PropertyDataType.COMPONENT: {
+            case PropertyDataType.COMPONENT: {
                 const componentType = typeProps[propKey].contentType.split(':').pop();
-                if (forCms12 && componentType == "link") {
+                if (componentType == "link") {
                     fragmentFields.push(`${propName} { ...LinkItemData }`);
                 }
                 else {
@@ -1153,17 +1362,21 @@ function renderProperties(contentType, forCms12 = false) {
                 }
                 break;
             }
-            case IntegrationApi.PropertyDataType.BINARY:
-                fragmentFields.push(`${propName} { ...BinaryData }`);
+            case PropertyDataType.BINARY:
+                fragmentFields.push(propName);
+                break;
+            case 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');
@@ -1175,6 +1388,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')
@@ -1446,6 +1671,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",
@@ -1454,17 +1680,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)));
@@ -1475,87 +1706,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);
@@ -1604,59 +1818,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 = {
@@ -1700,15 +1910,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)
@@ -1717,9 +1928,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)) {
@@ -1736,7 +1948,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] : [];
@@ -1756,7 +1968,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))
@@ -1767,8 +1979,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} (
@@ -2148,7 +2360,7 @@ const commands = [
     CmsVersionCommand
 ];
 
-var version = "5.1.7";
+var version = "5.3.0";
 var name = "opti-cms";
 var APP = {
 	version: version,
@@ -2156,8 +2368,8 @@ var APP = {
 };
 
 async function main() {
-    const envFiles = prepare();
     const projectDir = getProjectDir();
+    const envFiles = prepare(projectDir);
     const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles, projectDir);
     app.command(commands);
     try {