@remkoj/optimizely-cms-cli 6.0.0-pre12 → 6.0.0-pre14

package/README.md

@@ -1,4 +1,8 @@
 # Optimizely CMS Command Line Toolkit <!-- omit in toc -->
+
+> [!WARNING]
+> There'll be an update of Optimizely SaaS CMS that is incompatible with all SDK versions prior to 5.1.6. If you don't upgrade, you will see empty pages (main website) and "Component not found" messages (preview).
+
 A collection of Command Line tools used to increase productivity when working with the Optimizely CMS from a TypeScript / JavaScript based frontend.
 
 The defaults and methods are based upon using a Next.JS application with the conventions introduced by the [Create Next App template](https://github.com/remkoj/optimizely-saas-starter)
@@ -123,4 +127,4 @@ yarn opti-cms nextjs:factory -f
 | --baseTypes | -b | Select only content types with one of these base types. Add multiple times to build a list | [] |
 | --types | -t | Select content types with this key. Add multiple times to build a list | [] |
 | --all | -a | Include non-supported base types, non supported base types are skipped by default | |
-| --force | -f | By default, this method is none-destructive. Set this parameter to overwrite existing files. | |
+| --force | -f | By default, this method is none-destructive. Set this parameter to overwrite existing files. | |

package/dist/index.js

@@ -1,11 +1,11 @@
 import { globSync, glob, globIterate } from 'glob';
 import { config } from 'dotenv';
 import { expand } from 'dotenv-expand';
+import path from 'node:path';
+import fs from 'node:fs';
 import { readPartialEnvConfig, createClient, OptiCmsVersion, 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';
@@ -13,23 +13,38 @@ import { input, select, confirm } from '@inquirer/prompts';
 import createDeepMerge from '@fastify/deepmerge';
 import { Ajv } from 'ajv';
 import addFormats from 'ajv-formats';
-import GraphQLGen from '@remkoj/optimizely-graph-functions/contenttype-loader';
+import { DocumentGenerator, PropertyCollisionTracker } from '@remkoj/optimizely-graph-functions/generate';
 import deepEqual from 'fast-deep-equal';
 
+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 globResult = globSync(".env*");
-    const envFiles = globResult.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`));
+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(config({ path: envFiles, debug: false, quiet: true }));
     return envFiles;
 }
 
-function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
+function createOptiCmsApp(scriptName, version, epilogue, envFiles, projectDir) {
     if (envFiles) {
         process.stdout.write(chalk.bold(`✅ Loaded environment files:`) + "\n");
         envFiles.forEach(envFile => {
@@ -45,11 +60,12 @@ function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
         console.error(chalk.redBright(`${chalk.bold("[ERROR]:")} Error processing environment variables: ${e.message}`));
         process.exit(1);
     }
+    const defaultPath = projectDir ?? process.cwd();
     return yargs(process.argv)
         .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) => val ? new URL(val) : undefined })
         .option("client_id", { alias: "ci", description: "API Client ID", string: true, type: "string", demandOption: isDemanded(config.clientId), default: config.clientId })
@@ -588,6 +604,20 @@ function ucFirst$1(input) {
         return input;
     return input[0].toUpperCase() + input.substring(1);
 }
+function toTypeFilesList(client, templates, basePath, createPaths = true) {
+    return templates.reduce(async (prevList, displayTemplate) => {
+        const typeFiles = await prevList;
+        const { targetType, styleFilePath: filePath, helperFilePath: helperPath } = await createTemplateMetadata(client, displayTemplate, basePath, createPaths);
+        if (!typeFiles[targetType]) {
+            typeFiles[targetType] = {
+                filePath: helperPath,
+                templates: []
+            };
+        }
+        typeFiles[targetType].templates.push({ key: displayTemplate.key, file: filePath, data: displayTemplate });
+        return typeFiles;
+    }, Promise.resolve({}));
+}
 async function createTemplateMetadata(client, displayTemplate, basePath, createPaths = true) {
     let itemPath = undefined;
     let targetType;
@@ -811,6 +841,91 @@ const StylesCreateCommand = {
     }
 };
 
+const StylesDeleteCommand = {
+    command: "styles:delete",
+    describe: "Remove Visual Builder style definitions from the CMS",
+    builder: (yargs) => {
+        const newYargs = stylesBuilder(yargs);
+        newYargs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
+        newYargs.option('withStyleFile', { alias: 'w', description: "Delete the .opti-style.json file as weill", boolean: true, type: 'boolean', demandOption: false, default: true });
+        newYargs.option("definitions", { alias: 'u', description: "Update typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: true });
+        return newYargs;
+    },
+    handler: async (args) => {
+        const { components: basePath } = parseArgs(args);
+        const client = createCmsClient(args);
+        const { styles, all: allStyles } = await getStyles(client, args, 100);
+        if (styles.findIndex(x => x.isDefault) >= 0)
+            process.stdout.write(chalk.redBright(chalk.bold((`\n${figures.warning} You are deleting a default Display Template this may lead to unpredicted behavior.\n\n`))));
+        if (!args.force) {
+            process.stdout.write(`This will remove the following display templates\n`);
+            for (const style of styles) {
+                process.stdout.write(` ${figures.arrowRight} ${style.displayName || style.key} [Key: ${style.key}; Default: ${style.isDefault ? 'Yes' : 'No'}]\n`);
+            }
+            process.stdout.write(`\nRun with -f to actually preform removal\n`);
+            return;
+        }
+        const keysToDelete = styles.map(displayTemplate => displayTemplate.key);
+        const styleHelpers = await toTypeFilesList(client, allStyles, basePath, false);
+        for (const displayTemplate of styles) {
+            const { styleFilePath, targetType, itemPath, typesPath } = await createTemplateMetadata(client, displayTemplate, basePath, false);
+            // Remove style file
+            if (args.withStyleFile) {
+                process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing *.opti-style.json file for ${displayTemplate.displayName} [${displayTemplate.key}]\n`));
+                await fsAsync.rm(styleFilePath, { force: false, recursive: false, maxRetries: 1 }).catch((e) => {
+                    if (e?.code === 'ENOENT') // The file can't be deleted as it does not exist - that's the desired state
+                        return;
+                    throw e;
+                });
+                await fsAsync.rmdir(itemPath, { recursive: false, maxRetries: 1 }).catch((e) => {
+                    if (e?.code === 'ENOTEMPTY') {
+                        process.stdout.write(chalk.yellowBright(`${figures.warning} The folder is not empty, please remove ${itemPath} manually if needed\n`));
+                        return;
+                    }
+                    else if (e?.code === 'ENOENT')
+                        return;
+                    else
+                        throw e;
+                });
+            }
+            // Remove/update typescript helper
+            if (args.definitions && styleHelpers[targetType]) {
+                process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing/updating displayTemplates.ts file for ${displayTemplate.displayName} [${displayTemplate.key}]\n`));
+                const remainingTemplates = styleHelpers[targetType].templates.filter(x => !keysToDelete.includes(x.key));
+                if (remainingTemplates.length === 0) {
+                    await fsAsync.rm(styleHelpers[targetType].filePath, { force: false, recursive: false, maxRetries: 1 }).catch((e) => {
+                        if (e?.code === 'ENOENT') // The file can't be deleted as it does not exist - that's the desired state
+                            return;
+                        throw e;
+                    });
+                    await fsAsync.rmdir(typesPath, { recursive: false, maxRetries: 1 }).catch((e) => {
+                        if (e?.code === 'ENOTEMPTY') {
+                            process.stdout.write(chalk.yellowBright(`${figures.warning} The folder is not empty, please remove ${typesPath} manually if needed\n`));
+                            return;
+                        }
+                        else if (e?.code === 'ENOENT')
+                            return;
+                        else
+                            throw e;
+                    });
+                }
+                else {
+                    const newEntry = {
+                        filePath: styleHelpers[targetType].filePath,
+                        templates: remainingTemplates
+                    };
+                    if (!await createDisplayTemplateHelper(newEntry, targetType, false, false))
+                        process.stdout.write(chalk.yellowBright(`${figures.warning} The display template was not updated, please update ${newEntry.filePath} manually`));
+                }
+            }
+            // Actually remove from CMS
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Removing the display template ${displayTemplate.displayName} [${displayTemplate.key}] from Optimizely CMS\n`));
+            await client.displayTemplatesDelete({ path: { key: displayTemplate.key } });
+        }
+        process.stdout.write("\n" + chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+
 const TypesPullCommand = {
     command: "types:pull",
     describe: "Pull content type definition files into the project",
@@ -1500,6 +1615,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",
@@ -1508,17 +1624,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)));
@@ -1529,87 +1650,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);
@@ -1658,59 +1762,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 = {
@@ -1750,16 +1850,23 @@ const NextJsFragmentsCommand = {
     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);
+        // Get content types
         const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
+        const allContentTypesMap = new Map();
+        allContentTypes.forEach(x => {
+            if (x.key)
+                allContentTypesMap.set(x.key, x);
+        });
+        const generator = new DocumentGenerator(allContentTypesMap);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL fragments\n`));
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
-        const tracker = new Map();
+        const tracker = new PropertyCollisionTracker(appPath);
         const dependencies = [];
         const updatedTypes = contentTypes.map(contentType => {
-            const { written, propertyTypes } = createComponentFragments(contentType, getTypeFolder(typeFolders, contentType.key), force, debug, tracker);
+            const { written, propertyTypes } = createComponentFragments(contentType, getTypeFolder(typeFolders, contentType.key), force, debug, tracker, generator);
             dependencies.push(...propertyTypes);
             return written ? contentType.key : undefined;
         }).filter(x => x);
@@ -1779,7 +1886,7 @@ const NextJsFragmentsCommand = {
                 typeFolders.push(tf);
             }
             return tf;
-        }, force, debug);
+        }, force, debug, tracker, generator);
         // Report outcome
         if (generatedProps.length > 0)
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL property fragments for ${generatedProps.join(', ')}\n`));
@@ -1789,7 +1896,7 @@ const NextJsFragmentsCommand = {
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
 };
-function createComponentFragments(contentType, typePath, force, debug, propertyTracker = new Map()) {
+function createComponentFragments(contentType, typePath, force, debug, propertyTracker = new Map(), generator) {
     const baseQueryFile = typePath.fragmentFile;
     let writeFragment = true;
     if (fs.existsSync(baseQueryFile)) {
@@ -1808,13 +1915,13 @@ function createComponentFragments(contentType, typePath, force, debug, propertyT
     }
     let written = false;
     if (writeFragment) {
-        const fragment = GraphQLGen.buildFragment(contentType, undefined, false, propertyTracker);
+        const fragment = generator.buildFragment(contentType, undefined, false, propertyTracker);
         fs.writeFileSync(baseQueryFile, fragment);
         written = true;
     }
-    return { written, propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType) };
+    return { written, propertyTypes: DocumentGenerator.getReferencedPropertyComponents(contentType) };
 }
-function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeFolder, force = false, debug = false) {
+function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeFolder, force = false, debug = false, propertyTracker = new Map(), generator) {
     const returnValue = [];
     for (const propertyContentTypeKey of propertyTypesList.filter((v, i, a) => a.indexOf(v, i + 1) <= i)) {
         // Load the ContentType definition
@@ -1846,16 +1953,16 @@ function createPropertyFragments(propertyTypesList, allContentTypes, selectTypeF
             process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) property fragment\n`));
         }
         if (mustWrite) {
-            const fragment = GraphQLGen.buildFragment(contentType, undefined, true);
+            const fragment = generator.buildFragment(contentType, undefined, true, propertyTracker);
             fs.writeFileSync(propertyFragmentFile, fragment);
             returnValue.push(contentType.key);
         }
         // Recurse down for properties that we're not yet rendering
-        const referencedPropertyTypes = GraphQLGen.getReferencedPropertyComponents(contentType).filter(x => !propertyTypesList.includes(x));
+        const referencedPropertyTypes = DocumentGenerator.getReferencedPropertyComponents(contentType).filter(x => !propertyTypesList.includes(x));
         if (referencedPropertyTypes.length > 0) {
             if (debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Component property ${propertyContentTypeKey} uses components a property, recursing down\n`));
-            const additionalProperties = createPropertyFragments(referencedPropertyTypes, allContentTypes, selectTypeFolder, force, debug);
+            const additionalProperties = createPropertyFragments(referencedPropertyTypes, allContentTypes, selectTypeFolder, force, debug, propertyTracker, generator);
             returnValue.push(...additionalProperties);
         }
     }
@@ -1873,16 +1980,23 @@ 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 allContentTypesMap = new Map();
+        allContentTypes.forEach(x => {
+            if (x.key)
+                allContentTypesMap.set(x.key, x);
+        });
+        const generator = new DocumentGenerator(allContentTypesMap);
+        const propertyTracker = new PropertyCollisionTracker(appPath);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL queries\n`));
         const dependencies = [];
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
         const updatedTypes = contentTypes.map(contentType => {
             const typePath = getTypeFolder(typeFolders, contentType.key);
-            const { written, propertyTypes } = createGraphQueries(contentType, typePath, force, debug);
+            const { written, propertyTypes } = createGraphQueries(contentType, typePath, force, debug, propertyTracker, generator);
             dependencies.push(...propertyTypes);
             return written ? contentType.key : undefined;
         }).filter(x => x).flat();
@@ -1901,7 +2015,7 @@ const NextJsQueriesCommand = {
                 typeFolders.push(tf);
             }
             return tf;
-        }, force, debug);
+        }, force, debug, propertyTracker, generator);
         // Report outcome
         if (generatedProps.length > 0)
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated GraphQL property fragments for ${generatedProps.join(', ')}\n`));
@@ -1911,7 +2025,7 @@ const NextJsQueriesCommand = {
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
     }
 };
-function createGraphQueries(contentType, typePath, force, debug) {
+function createGraphQueries(contentType, typePath, force, debug, tracker, generator) {
     const baseQueryFile = typePath.queryFile;
     let mustWrite = true;
     if (fs.existsSync(baseQueryFile)) {
@@ -1929,12 +2043,12 @@ function createGraphQueries(contentType, typePath, force, debug) {
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
     }
     if (mustWrite) {
-        const fragment = GraphQLGen.buildGetQuery(contentType, undefined, new Map());
+        const fragment = generator.buildGetQuery(contentType, undefined, tracker);
         fs.writeFileSync(baseQueryFile, fragment);
     }
     return {
         written: mustWrite,
-        propertyTypes: GraphQLGen.getReferencedPropertyComponents(contentType)
+        propertyTypes: DocumentGenerator.getReferencedPropertyComponents(contentType)
     };
 }
 
@@ -2214,7 +2328,7 @@ function writeFileAsync(path, data) {
     });
 }
 
-var version = "6.0.0-pre12";
+var version = "6.0.0-pre14";
 var name = "opti-cms";
 var APP = {
 	version: version,
@@ -2582,20 +2696,22 @@ const commands = [
     StylesListCommand,
     StylesPullCommand,
     StylesPushCommand,
+    StylesDeleteCommand,
     TypesPullCommand,
     TypesPushCommand
 ];
 
 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));
     }
     catch {
         //We're ignoring error here, as yargs will already generate the "nice output" for it
-        //console.log('Caught error')
+        //console.log ('Caught error')
     }
 }
 main();