@remkoj/optimizely-cms-cli 2.0.0 → 2.0.1-pre1

package/dist/index.js

@@ -55,11 +55,20 @@ function isDemanded(value) {
  * @param       param0      The parameters from the Command Line application
  * @returns     The arguments, with the Optimizely CMS Client parameters transformed into a configuration object
  */
-function parseArgs({ client_id, client_secret, cms_url, user_id, verbose, path: argsPath, components: argsComponents, ...args }) {
+function parseArgs({ client_id, client_secret, cms_url, user_id, verbose, path: argsPath, components: argsComponents, ...args }, createBasePath = true) {
     const appPath = path.isAbsolute(argsPath) ? argsPath : path.normalize(path.join(process.cwd(), argsPath));
     const componentDir = path.normalize(path.join(argsPath, argsComponents));
     if (!componentDir.startsWith(argsPath))
         throw new Error(`The component directory ${componentDir} is outside the application directory (${appPath})`);
+    if (createBasePath && !fs.existsSync(componentDir)) {
+        if (verbose)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} The components directory ${componentDir} does not exist yet, it will be created\n`));
+        fs.mkdirSync(componentDir, { recursive: true });
+    }
+    if (!fs.statSync(componentDir).isDirectory()) {
+        process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The components path ${componentDir} exists, but is not a folder\n`));
+        process.exit(1);
+    }
     return {
         _config: {
             base: cms_url,
@@ -143,26 +152,142 @@ function isNotNullOrUndefined(i) {
     return i ? true : false;
 }
 
+function createCmsClient(args) {
+    const { _config: cfg } = parseArgs(args);
+    const client = createClient(cfg);
+    if (cfg.debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Connecting to ${cfg.base.href} as ${cfg.actAs ?? cfg.clientId}\n`));
+    return client;
+}
+
+const contentTypesBuilder = yargs => {
+    yargs.option('excludeTypes', { alias: 'ect', description: "Exclude these content types", string: true, type: 'array', demandOption: false, default: [] });
+    yargs.option('excludeBaseTypes', { alias: 'ebt', description: "Exclude these base types", string: true, type: 'array', demandOption: false, default: ['folder', 'media', 'image', 'video'] });
+    yargs.option("baseTypes", { alias: 'b', description: "Select only these base types", string: true, type: 'array', demandOption: false, default: [] });
+    yargs.option("types", { alias: 't', description: "Select only these types", string: true, type: 'array', demandOption: false, default: [] });
+    return yargs;
+};
+async function getContentTypes(client, args, pageSize = 100, allowSystem = false) {
+    const { _config: cfg, excludeBaseTypes, excludeTypes, baseTypes, types } = parseArgs(args);
+    process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Content Types from Optimizely CMS\n`));
+    if (cfg.debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page 1 of ? (${pageSize} items per page)\n`));
+    let resultsPage = await client.contentTypes.contentTypesList(undefined, undefined, 0, pageSize);
+    const results = resultsPage.items ?? [];
+    let pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
+    while (pagesRemaining > 0 && results.length < resultsPage.totalItemCount) {
+        if (cfg.debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page ${resultsPage.pageIndex + 2} of ${Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize)} (${resultsPage.pageSize} items per page)\n`));
+        resultsPage = await client.contentTypes.contentTypesList(undefined, undefined, resultsPage.pageIndex + 1, resultsPage.pageSize);
+        results.push(...resultsPage.items);
+        pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
+    }
+    if (cfg.debug) {
+        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 contentTypes = results.filter(data => {
+        // Remove items based upon filters
+        const keepType = (!excludeBaseTypes.includes(data.baseType)) &&
+            (!excludeTypes.includes(data.key)) &&
+            (baseTypes.length == 0 || baseTypes.includes(data.baseType)) &&
+            (types.length == 0 || types.includes(data.key));
+        if (!keepType) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${data.key} due to applied filters\n`));
+            return false;
+        }
+        // Skip system types if desired
+        if (data.source == 'system' && !allowSystem) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${data.key} due to it being a system type\n`));
+            return false;
+        }
+        return true;
+    });
+    if (cfg.debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${results.length} to ${contentTypes.length} items\n`));
+    return {
+        all: results,
+        contentTypes
+    };
+}
+
+const stylesBuilder = yargs => {
+    const newArgs = contentTypesBuilder(yargs);
+    newArgs.option('excludeNodeTypes', { alias: 'ent', description: "Exclude these node types", string: true, type: 'array', demandOption: false, default: [] });
+    newArgs.option('excludeTemplates', { alias: 'et', description: "Exclude these templates", string: true, type: 'array', demandOption: false, default: ['folder', 'media', 'image', 'video'] });
+    newArgs.option("nodes", { alias: 'n', description: "Select only these node types", string: true, type: 'array', demandOption: false, default: [] });
+    newArgs.option("templates", { alias: 'd', description: "Select only these templates", string: true, type: 'array', demandOption: false, default: [] });
+    newArgs.option("templateTypes", { alias: 'tt', description: "Select only these template types", choices: ['node', 'base', 'component'], type: 'array', demandOption: false, default: [] });
+    return newArgs;
+};
+async function getStyles(client, args, pageSize = 100) {
+    const { _config: cfg, excludeBaseTypes, excludeTypes, excludeNodeTypes, excludeTemplates, baseTypes, types, nodes, templates, templateTypes } = parseArgs(args);
+    process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Style-Definitions from Optimizely CMS\n`));
+    if (cfg.debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page 1 of ? (${pageSize} items per page)\n`));
+    let resultsPage = await client.displayTemplates.displayTemplatesList(0, pageSize);
+    const results = resultsPage.items ?? [];
+    let pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
+    while (pagesRemaining > 0 && results.length < resultsPage.totalItemCount) {
+        if (cfg.debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page ${resultsPage.pageIndex + 2} of ${Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize)} (${resultsPage.pageSize} items per page)\n`));
+        resultsPage = await client.displayTemplates.displayTemplatesList(resultsPage.pageIndex + 1, resultsPage.pageSize);
+        results.push(...resultsPage.items);
+        pagesRemaining = Math.ceil(resultsPage.totalItemCount / resultsPage.pageSize) - (resultsPage.pageIndex + 1);
+    }
+    if (cfg.debug) {
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched ${results.length} Style-Definitions from Optimizely CMS\n`));
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Filtering Style-Definitions based upon arguments\n`));
+    }
+    const styles = results.filter(data => {
+        if (isExcluded(data.key, excludeTemplates, templates)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style defintion key filtering active\n`));
+            return false;
+        }
+        const templateType = data.baseType ? 'base' : data.nodeType ? 'node' : data.contentType ? 'component' : 'unknown';
+        if (isExcluded(templateType, [], templateTypes)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style type filtering is active\n`));
+            return false;
+        }
+        if (data.baseType && isExcluded(data.baseType, excludeBaseTypes, baseTypes)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style is defined at base type level and base type filtering is active\n`));
+            return false;
+        }
+        if (data.contentType && isExcluded(data.contentType, excludeTypes, types)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style is defined at component type level and component type filtering is active\n`));
+            return false;
+        }
+        if (data.nodeType && isExcluded(data.nodeType, excludeNodeTypes, nodes)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style is defined at node type level and node type filtering is active\n`));
+            return false;
+        }
+        return true;
+    });
+    if (cfg.debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${results.length} to ${styles.length} items\n`));
+    return {
+        all: results,
+        styles
+    };
+}
+function isExcluded(value, exclusions, inclusions) {
+    if (value == undefined || value == null)
+        return false;
+    return exclusions.includes(value) || (inclusions.length > 0 && !inclusions.includes(value));
+}
+
 const StylesListCommand = {
     command: "styles:list",
     describe: "List Visual Builder style definitions from the CMS",
     handler: async (args) => {
-        const { _config: cfg, ...opts } = parseArgs(args);
-        const client = createClient(cfg);
-        const pageSize = 100;
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Reading DisplayStyles from Optimizely CMS\n`));
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page 1 of ? (${pageSize} items per page)\n`));
-        let templatesPage = await client.displayTemplates.displayTemplatesList(0, pageSize);
-        const results = templatesPage.items ?? [];
-        let pagesRemaining = Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize) - (templatesPage.pageIndex + 1);
-        while (pagesRemaining > 0 && results.length < templatesPage.totalItemCount) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page ${templatesPage.pageIndex + 2} of ${Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize)} (${templatesPage.pageSize} items per page)\n`));
-            templatesPage = await client.displayTemplates.displayTemplatesList(templatesPage.pageIndex + 1, templatesPage.pageSize);
-            results.push(...templatesPage.items);
-            pagesRemaining = Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize) - (templatesPage.pageIndex + 1);
-        }
+        const { all: results } = await getStyles(createCmsClient(args), { ...args, excludeBaseTypes: [], excludeNodeTypes: [], excludeTemplates: [], excludeTypes: [], baseTypes: [], nodes: [], templates: [], types: [], templateTypes: [] });
         const styles = new Table({
             head: [
                 chalk.yellow(chalk.bold("Name")),
@@ -190,50 +315,15 @@ const StylesPullCommand = {
     command: "styles:pull",
     describe: "Create Visual Builder style definitions from the CMS",
     builder: (yargs) => {
-        yargs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
-        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: [] });
-        yargs.option("definitions", { alias: 'd', description: "Create/overwrite typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: false });
-        return yargs;
+        const newYargs = stylesBuilder(yargs);
+        newYargs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
+        newYargs.option("definitions", { alias: 'd', description: "Create/overwrite typescript definitions", boolean: true, type: 'boolean', demandOption: false, default: true });
+        return newYargs;
     },
     handler: async (args) => {
-        const { _config: cfg, components: basePath, force, definitions, excludeTemplates, templates } = parseArgs(args);
-        const client = createClient(cfg);
-        const pageSize = 100;
-        //#region Load all templates from Optimizely CMS
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Reading DisplayStyles from Optimizely CMS\n`));
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page 1 of ? (${pageSize} items per page)\n`));
-        let templatesPage = await client.displayTemplates.displayTemplatesList(0, pageSize);
-        const results = templatesPage.items ?? [];
-        let pagesRemaining = Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize) - (templatesPage.pageIndex + 1);
-        while (pagesRemaining > 0 && results.length < templatesPage.totalItemCount) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page ${templatesPage.pageIndex + 2} of ${Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize)} (${templatesPage.pageSize} items per page)\n`));
-            templatesPage = await client.displayTemplates.displayTemplatesList(templatesPage.pageIndex + 1, templatesPage.pageSize);
-            results.push(...templatesPage.items);
-            pagesRemaining = Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize) - (templatesPage.pageIndex + 1);
-        }
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched ${results.length} Content-Types from Optimizely CMS\n`));
-        //#endregion
-        //#region Ensure target base path exists
-        if (!fs.existsSync(basePath))
-            fs.mkdirSync(basePath, { recursive: true });
-        if (!fs.statSync(basePath).isDirectory()) {
-            process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The components path ${basePath} is not a folder\n`));
-            process.exit(1);
-        }
-        //#endregion
-        //#region Apply template filters
-        const filteredResults = results.filter(result => {
-            if (excludeTemplates.includes(result.key))
-                return false;
-            if (templates.length > 0 && !templates.includes(result.key))
-                return false;
-            return true;
-        });
-        //#endregion
+        const { _config: cfg, components: basePath, force, definitions } = parseArgs(args);
+        const client = createCmsClient(args);
+        const { styles: filteredResults } = await getStyles(client, args);
         //#region Create & Write opti-style.json files
         const typeFiles = {};
         const updatedTemplates = (await Promise.all(filteredResults.map(async (displayTemplate) => {
@@ -241,8 +331,8 @@ const StylesPullCommand = {
             let targetType;
             let typesPath;
             if (displayTemplate.nodeType) {
-                itemPath = path.join(basePath, 'styles', displayTemplate.nodeType, displayTemplate.key);
-                typesPath = path.join(basePath, 'styles', displayTemplate.nodeType);
+                itemPath = path.join(basePath, 'nodes', displayTemplate.nodeType, displayTemplate.key);
+                typesPath = path.join(basePath, 'nodes', displayTemplate.nodeType);
                 targetType = 'node/' + displayTemplate.nodeType;
             }
             else if (displayTemplate.baseType) {
@@ -260,6 +350,17 @@ const StylesPullCommand = {
                 fs.mkdirSync(itemPath, { recursive: true });
             // Write Style JSON
             const filePath = path.join(itemPath, `${displayTemplate.key}.opti-style.json`);
+            if (fs.existsSync(filePath)) {
+                if (!force) {
+                    if (cfg.debug)
+                        process.stdout.write(chalk.gray(`${figures.cross} Skipping style file for ${displayTemplate.key} - File already exists\n`));
+                    return;
+                }
+                if (cfg.debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting style file for ${displayTemplate.key}\n`));
+            }
+            else if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Creating style file for ${displayTemplate.key}\n`));
             fs.writeFileSync(filePath, JSON.stringify(displayTemplate, undefined, 2));
             if (!typeFiles[targetType]) {
                 typeFiles[targetType] = {
@@ -269,17 +370,23 @@ const StylesPullCommand = {
             }
             typeFiles[targetType].templates.push({ file: filePath, data: displayTemplate });
             return displayTemplate.key;
-        })));
+        }))).filter(x => x);
         //#endregion
         //#region Create needed definition files
         if (definitions) {
             for (const targetId of Object.getOwnPropertyNames(typeFiles)) {
                 const { filePath: typeFilePath, templates } = typeFiles[targetId];
-                if (fs.existsSync(typeFilePath) && !force) {
+                if (fs.existsSync(typeFilePath)) {
+                    if (!force) {
+                        if (cfg.debug)
+                            process.stdout.write(chalk.gray(`${figures.cross} Skipped writing definition file for ${targetId} - it already exists\n`));
+                        continue;
+                    }
                     if (cfg.debug)
-                        process.stdout.write(chalk.gray(`${figures.cross} Skipped writing definition file ${typeFilePath} as it already exists\n`));
-                    continue;
+                        process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting definition file for ${targetId}\n`));
                 }
+                else if (cfg.debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Creating definition file for ${targetId}\n`));
                 // Write Style definition
                 const imports = ['import type { LayoutProps } from "@remkoj/optimizely-cms-react/components"', 'import type { ReactNode } from "react"'];
                 const typeContents = [];
@@ -314,8 +421,7 @@ export type ${typeId}Component<DT extends Record<string, any> = Record<string, a
             }
         }
         //#endregion
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated style definitions for ${updatedTemplates.join(', ')}\n`));
-        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+        process.stdout.write(chalk.green(chalk.bold(figures.tick + ` Created/updated style definitions for ${updatedTemplates.join(', ')}`)) + "\n");
     }
 };
 function ucFirst$1(input) {
@@ -328,59 +434,30 @@ const TypesPullCommand = {
     command: "types:pull",
     describe: "Pull content type definition files into the project",
     builder: (yargs) => {
+        const newArgs = contentTypesBuilder(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: [] });
-        yargs.option('excludeBaseTypes', { alias: 'ebt', description: "Exclude these base types", string: true, type: 'array', demandOption: false, default: ['folder', 'media', 'image', 'video'] });
-        yargs.option("baseTypes", { alias: 'b', description: "Select only these base types", string: true, type: 'array', demandOption: false, default: [] });
-        yargs.option("types", { alias: 't', description: "Select only these types", string: true, type: 'array', demandOption: false, default: [] });
-        return yargs;
+        return newArgs;
     },
     handler: async (args) => {
-        const { _config: cfg, components: basePath, excludeBaseTypes, excludeTypes, baseTypes, types, force } = parseArgs(args);
-        const client = createClient(cfg);
-        const pageSize = 100;
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Content Types from Optimizely CMS\n`));
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page 1 of ? (${pageSize} items per page)\n`));
-        let templatesPage = await client.contentTypes.contentTypesList(undefined, undefined, 0, pageSize);
-        const results = templatesPage.items ?? [];
-        let pagesRemaining = Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize) - (templatesPage.pageIndex + 1);
-        while (pagesRemaining > 0 && results.length < templatesPage.totalItemCount) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page ${templatesPage.pageIndex + 2} of ${Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize)} (${templatesPage.pageSize} items per page)\n`));
-            templatesPage = await client.contentTypes.contentTypesList(undefined, undefined, templatesPage.pageIndex + 1, templatesPage.pageSize);
-            results.push(...templatesPage.items);
-            pagesRemaining = Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize) - (templatesPage.pageIndex + 1);
-        }
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched ${results.length} Content-Types from Optimizely CMS\n`));
-        if (!fs.existsSync(basePath))
-            fs.mkdirSync(basePath, { recursive: true });
-        if (!fs.statSync(basePath).isDirectory()) {
-            process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The components path ${basePath} is not a folder\n`));
-            process.exit(1);
-        }
-        const updatedTypes = results.filter(data => {
-            return (!excludeBaseTypes.includes(data.baseType)) &&
-                (!excludeTypes.includes(data.key)) &&
-                (!baseTypes || baseTypes.length == 0 || baseTypes.includes(data.baseType)) &&
-                (!types || types.length == 0 || types.includes(data.key));
-        }).map(contentType => {
+        const { _config: { debug }, components: basePath, force } = parseArgs(args);
+        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`);
             if (!fs.existsSync(typePath))
                 fs.mkdirSync(typePath, { recursive: true });
             if (fs.existsSync(typeFile) && !force) {
-                process.stdout.write(chalk.yellow(`${figures.cross} Skipping type definition for ${contentType.displayName} (${contentType.key}) - File already exists\n`));
+                if (debug)
+                    process.stdout.write(chalk.yellow(`${figures.cross} Skipping type definition for ${contentType.displayName} (${contentType.key}) - File already exists\n`));
                 return contentType.key;
             }
-            if (cfg.debug)
+            if (debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Writing type definition for ${contentType.displayName} (${contentType.key})\n`));
             fs.writeFileSync(typeFile, JSON.stringify(contentType, undefined, 2));
             return contentType.key;
         }).filter(x => x);
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated type definitions for ${updatedTypes.join(', ')}\n`));
-        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+        process.stdout.write(chalk.green(chalk.bold(`${figures.tick} Created/updated type definitions for ${updatedTypes.join(', ')}\n`)));
     }
 };
 
@@ -444,209 +521,81 @@ const TypesPushCommand = {
     }
 };
 
-const NextJsCreateCommand = {
-    command: "nextjs:create",
-    describe: "Scaffold a complete Next.JS / Optimizely Graph structure",
-    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: [] });
-        yargs.option('excludeBaseTypes', { alias: 'ebt', description: "Exclude these base types", string: true, type: 'array', demandOption: false, default: ['folder', 'media', 'image', 'video'] });
-        return yargs;
-    },
-    handler: async (args) => {
-        const { _config: cfg, components: basePath, excludeBaseTypes, excludeTypes, force } = parseArgs(args);
-        const client = createClient(cfg);
-        const pageSize = 100;
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Content Types from Optimizely CMS\n`));
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page 1 of ? (${pageSize} items per page)\n`));
-        let templatesPage = await client.contentTypes.contentTypesList(undefined, undefined, 0, pageSize);
-        const results = templatesPage.items ?? [];
-        let pagesRemaining = Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize) - (templatesPage.pageIndex + 1);
-        while (pagesRemaining > 0 && results.length < templatesPage.totalItemCount) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Fetching page ${templatesPage.pageIndex + 2} of ${Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize)} (${templatesPage.pageSize} items per page)\n`));
-            templatesPage = await client.contentTypes.contentTypesList(undefined, undefined, templatesPage.pageIndex + 1, templatesPage.pageSize);
-            results.push(...templatesPage.items);
-            pagesRemaining = Math.ceil(templatesPage.totalItemCount / templatesPage.pageSize) - (templatesPage.pageIndex + 1);
-        }
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched ${results.length} Content-Types from Optimizely CMS\n`));
-        if (!fs.existsSync(basePath))
-            fs.mkdirSync(basePath, { recursive: true });
-        if (!fs.statSync(basePath).isDirectory()) {
-            process.stderr.write(chalk.redBright(`${chalk.bold(figures.cross)} The components path ${basePath} is not a folder\n`));
-            process.exit(1);
-        }
-        // Apply content type filters
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Applying content type filters\n`));
-        const contentTypes = results.filter(contentType => {
-            if (contentType.source == 'system') {
-                if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) - Internal CMS type\n`));
-                return false;
-            }
-            const baseType = contentType.baseType ?? 'default';
-            if (excludeBaseTypes.includes(baseType)) {
-                if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) - Base type excluded\n`));
-                return false;
-            }
-            if (excludeTypes.includes(contentType.key)) {
-                if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) - Content type excluded\n`));
-                return false;
-            }
-            return true;
-        });
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${results.length} to ${contentTypes.length} items\n`));
-        // Create the type specific
-        const updatedTypes = contentTypes.map(contentType => {
-            const baseType = contentType.baseType ?? 'default';
-            // Create the type folder
-            const typePath = path.join(basePath, baseType, contentType.key);
-            if (!fs.existsSync(typePath))
-                fs.mkdirSync(typePath, { recursive: true });
-            // Create fragments
-            createGraphFragments(contentType, typePath, basePath, force, cfg, contentTypes);
-            // Create component
-            createComponent(contentType, typePath, force, cfg);
-            return contentType.key;
-        }).filter(x => x);
-        createFactory(contentTypes, basePath, force, cfg);
-        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated type definitions for ${updatedTypes.join(', ')}\n`));
-        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
-    }
+const builder = yargs => {
+    const updatedArgs = contentTypesBuilder(yargs);
+    updatedArgs.option('force', { alias: 'f', description: "Overwrite existing files", boolean: true, type: 'boolean', demandOption: false, default: false });
+    return updatedArgs;
 };
-function createFactory(contentTypes, basePath, force, cfg) {
-    // Get the list of all base types
-    const baseTypes = contentTypes.map(x => x.baseType).concat(['default']).filter((x, i, a) => x && !a.slice(0, i).includes(x)).sort();
-    const baseTypeFactories = baseTypes.map(baseType => {
-        // Get the list of inheriting types and return if it's empty
-        const inheritingTypes = contentTypes.filter(x => x.baseType == baseType);
-        if (inheritingTypes.length == 0)
-            return;
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Factory for ${ucFirst(baseType)} will contain these components: ${inheritingTypes.map(x => x.displayName ?? x.key).join(", ")}\n`));
-        // Check the file presence and if we should overwrite
-        const baseTypeFactory = path.join(basePath, baseType, 'index.ts');
-        if (fs.existsSync(baseTypeFactory)) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${ucFirst(baseType)} factory\n`));
+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);
+        if (!fs.existsSync(typePath)) {
+            fs.mkdirSync(typePath, { recursive: true });
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Created folder ${typePath} for Content-Type ${contentType.key}\n`));
         }
-        // Build the actual factory
-        const lines = [
-            '// Auto generated dictionary',
-            'import { ComponentTypeDictionary } from "@remkoj/optimizely-cms-react";'
-        ];
-        inheritingTypes.forEach(type => {
-            lines.push(`import ${type.key} from "./${type.key}";`);
-        });
-        lines.push('');
-        lines.push(`export const ${baseType}Dictionary : ComponentTypeDictionary = [`);
-        inheritingTypes.forEach(type => {
-            lines.push('    {', `        type: '${type.key}',`, `        component: ${type.key}`, '    },');
-        });
-        lines.push(']', '', `export default ${baseType}Dictionary`);
-        fs.writeFileSync(baseTypeFactory, lines.join("\n"));
-        return baseType;
-    }).filter(x => x);
-    const cmsFactoryFile = path.join(basePath, 'index.ts');
-    if (fs.existsSync(cmsFactoryFile)) {
-        if (cfg.debug)
-            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting CMS Components factory\n`));
-    }
-    const lines = [
-        '// Auto generated dictionary',
-        'import { ComponentTypeDictionary } from "@remkoj/optimizely-cms-react";'
-    ];
-    baseTypeFactories.forEach(type => {
-        lines.push(`import ${type}Components from "./${type}";`);
-    });
-    lines.push('');
-    baseTypeFactories.forEach(type => {
-        lines.push(`prefixDictionaryEntries(${type}Components, '${ucFirst(type)}');`);
-        if (type == "experience")
-            lines.push(`prefixDictionaryEntries(${type}Components, 'Page'); // Experiences are a subtype of Page`);
-        if (type == "element")
-            lines.push(`prefixDictionaryEntries(${type}Components, 'Component'); // Elements are a subtype of Component`);
-    });
-    lines.push('');
-    lines.push('export const cmsComponentDictionary : ComponentTypeDictionary = [');
-    baseTypeFactories.forEach(type => {
-        lines.push(`    ...${type}Components,`);
+        // Check folders
+        if (!fs.statSync(typePath).isDirectory())
+            throw new Error(`The folder ${typePath} for Content-Type ${contentType.key} exists, but is not a directory!`);
+        return {
+            type: contentType.key,
+            path: typePath,
+        };
     });
-    lines.push(']', '', `export default cmsComponentDictionary`, `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
-}`);
-    fs.writeFileSync(cmsFactoryFile, lines.join("\n"));
+    return folders;
 }
-function createComponent(contentType, typePath, force, cfg) {
-    const componentFile = path.join(typePath, 'index.tsx');
-    if (fs.existsSync(componentFile)) {
-        if (force) {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) component\n`));
-        }
-        else {
-            if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) component - file already exists\n`));
-            return undefined;
-        }
-    }
-    const isPage = contentType.baseType == 'page' || contentType.baseType == 'experience';
-    const varName = `${contentType.key}${ucFirst(contentType.baseType ?? 'part')}`;
-    const component = `import ${isPage ? '{ OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs"' : '{ CmsComponent } from "@remkoj/optimizely-cms-react"'};
-import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";
-
-/**
- * ${contentType.displayName}
- * ${contentType.description}
- */
-export const ${varName} : CmsComponent<${contentType.key}DataFragment> = ({ data }) => {
-    const componentName = '${contentType.displayName}'
-    const componentInfo = '${contentType.description ?? ''}'
-    return <div className="mx-auto px-2 container">
-        <div>{ componentName }</div>
-        <div>{ componentInfo }</div>
-        <pre className="w-full overflow-x-hidden font-mono text-sm">{ JSON.stringify(data, undefined, 4) }</pre>
-    </div>
-}
-${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
-${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
-${isPage && `${varName}.getMetaData = async (contentLink) => {
-    // Add your metadata logic here
-    return {}
-}`.trim()}
-
-export default ${varName}`;
-    fs.writeFileSync(componentFile, component);
-}
-function ucFirst(current) {
-    return current[0]?.toUpperCase() + current.substring(1);
+function getTypeFolder(list, type) {
+    return list.filter(x => x.type == type).at(0)?.path;
 }
-function createGraphFragments(contentType, typePath, basePath, force, cfg, contentTypes) {
+
+const NextJsQueriesCommand = {
+    command: "nextjs:fragments",
+    describe: "Create the GrapQL Fragments for a Next.JS / Optimizely Graph structure",
+    builder,
+    handler: async (args, opts) => {
+        // Prepare
+        const { loadedContentTypes, createdTypeFolders } = opts || {};
+        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(createCmsClient(args), 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);
+        }).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`));
+        if (!opts)
+            process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+function createGraphFragments(contentType, typePath, basePath, force, debug, contentTypes) {
+    const returnValue = [];
     const baseType = contentType.baseType ?? 'default';
     const baseQueryFile = path.join(typePath, `${contentType.key}.${baseType}.graphql`);
     if (fs.existsSync(baseQueryFile)) {
         if (force) {
-            if (cfg.debug)
+            if (debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) base fragment\n`));
         }
         else {
-            if (cfg.debug)
+            if (debug)
                 process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) base fragment - file already exists\n`));
             return undefined;
         }
     }
+    else if (debug) {
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
+    }
     const { fragment, propertyTypes } = createInitialFragment(contentType);
     fs.writeFileSync(baseQueryFile, fragment);
+    returnValue.push(contentType.key);
     let dependencies = Array.isArray(propertyTypes) ? [...propertyTypes] : [];
     while (Array.isArray(dependencies) && dependencies.length > 0) {
         let newDependencies = [];
@@ -661,15 +610,18 @@ function createGraphFragments(contentType, typePath, basePath, force, cfg, conte
             if (!fs.existsSync(propertyFragmentDir))
                 fs.mkdirSync(propertyFragmentDir, { recursive: true });
             if (!fs.existsSync(propertyFragmentFile) || force) {
-                process.stdout.write(` - Writing property fragment: ${propContentType.displayName ?? propContentType.key}\n`);
+                if (debug)
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Writing ${propContentType.displayName} (${propContentType.key}) property fragment\n`));
                 const propContentTypeInfo = createInitialFragment(propContentType, true);
                 fs.writeFileSync(propertyFragmentFile, propContentTypeInfo.fragment);
+                returnValue.push(propContentType.key);
                 if (Array.isArray(propContentTypeInfo.propertyTypes))
                     newDependencies.push(...propContentTypeInfo.propertyTypes);
             }
         });
         dependencies = newDependencies;
     }
+    return returnValue.length > 0 ? returnValue : undefined;
 }
 function createInitialFragment(contentType, forProperty = false) {
     const propertyTypes = [];
@@ -727,6 +679,8 @@ function createInitialFragment(contentType, forProperty = false) {
                 break;
         }
     });
+    if (contentType.baseType == "experience")
+        fragmentFields.push('...ExperienceData');
     if (fragmentFields.length == 0)
         fragmentFields.push('_metadata { key }');
     const tpl = `fragment ${contentType.key}${forProperty ? 'Property' : ''}Data on ${contentType.key}${forProperty ? 'Property' : ''} {
@@ -738,6 +692,499 @@ function createInitialFragment(contentType, forProperty = false) {
     };
 }
 
+function ucFirst(current) {
+    if (typeof current != 'string')
+        throw new Error("Only strings can be transformed");
+    if (current == "")
+        return current;
+    return current[0]?.toUpperCase() + current.substring(1);
+}
+
+const NextJsComponentsCommand = {
+    command: "nextjs:components",
+    describe: "Create the React Components for a Next.JS / Optimizely Graph structure",
+    builder,
+    handler: async (args, opts) => {
+        // Prepare
+        const { loadedContentTypes, createdTypeFolders } = opts || {};
+        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        const { contentTypes } = loadedContentTypes ?? await getContentTypes(createCmsClient(args), args);
+        // Start process
+        process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating React Components 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 createComponent(contentType, typePath, force, debug);
+        }).filter(x => x);
+        // Report outcome
+        if (updatedTypes.length > 0)
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Created/updated React Components for ${updatedTypes.join(', ')}\n`));
+        else
+            process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No React Components created/updated\n`));
+        if (!opts)
+            process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+    }
+};
+function createComponent(contentType, typePath, force, debug = false) {
+    const componentFile = path.join(typePath, 'index.tsx');
+    if (fs.existsSync(componentFile)) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${contentType.displayName} (${contentType.key}) component - file already exists\n`));
+            return undefined;
+        }
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${contentType.displayName} (${contentType.key}) component\n`));
+    }
+    else if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) component\n`));
+    // 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 tplFn = Templates[contentType.baseType] ?? Templates['default'];
+    if (!tplFn) {
+        if (debug)
+            process.stdout.write(chalk.redBright(`${figures.cross} Skipping ${contentType.displayName} (${contentType.key}) component - no template for ${contentType.baseType} found\n`));
+        return undefined;
+    }
+    // Apply template
+    fs.writeFileSync(componentFile, tplFn(contentType, varName, displayTemplate, baseDisplayTemplate));
+    return contentType.key;
+}
+function getBaseTypeTemplateInfo(contentType, typePath) {
+    const displayTemplatesFile = path.join(typePath, '..', 'styles', 'displayTemplates.ts');
+    if (fs.existsSync(displayTemplatesFile)) {
+        const baseTypeVarName = contentType.baseType ? contentType.baseType[0].toUpperCase() + contentType.baseType.substring(1) : undefined;
+        if (!baseTypeVarName)
+            return undefined;
+        const displayTemplateContent = fs.readFileSync(displayTemplatesFile).toString();
+        const displayTemplateName = baseTypeVarName + 'LayoutProps';
+        if (displayTemplateContent.includes(`export type ${displayTemplateName} =`)) {
+            return displayTemplateName;
+        }
+    }
+    return undefined;
+}
+function getDisplayTemplateInfo$1(contentType, typePath) {
+    const displayTemplatesFile = path.join(typePath, 'displayTemplates.ts');
+    if (fs.existsSync(displayTemplatesFile)) {
+        const displayTemplateContent = fs.readFileSync(displayTemplatesFile).toString();
+        const displayTemplateName = contentType.key + 'LayoutProps';
+        if (displayTemplateContent.includes(`export type ${displayTemplateName} =`)) {
+            return displayTemplateName;
+        }
+    }
+    return undefined;
+}
+const Templates = {
+    // Default Template for all components without specifics
+    default: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { CmsComponent } from "@remkoj/optimizely-cms-react";
+import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+import { ${displayTemplate} } from "./displayTemplates";` : ''}${baseDisplayTemplate ? `
+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' : ''}, children }) => {
+    const componentName = '${contentType.displayName}'
+    const componentInfo = '${contentType.description ?? ''}'
+    return <div className="w-full border-y border-y-solid border-y-slate-900 py-2 mb-4">
+        <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> }
+        { children && <div className="mt-4 mx-4 flex flex-col">{ children }</div>}
+    </div>
+}
+${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
+${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+
+export default ${varName}`,
+    // Template for all page component types
+    page: (contentType, varName, displayTemplate) => `import { OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
+import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+import { ${displayTemplate} } from "./displayTemplates";` : ''}
+import { getSdk } from "@/gql"
+
+/**
+ * ${contentType.displayName}
+ * ${contentType.description}
+ */
+export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, children }) => {
+    const componentName = '${contentType.displayName}'
+    const componentInfo = '${contentType.description ?? ''}'
+    return <div className="mx-auto px-2 container">
+        <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> }
+        { children && <div className="flex flex-col mt-4 mx-4">{ children }</div>}
+    </div>
+}
+${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
+${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getMetaData = async (contentLink, locale, client) => {
+    const sdk = getSdk(client);
+    // Add your metadata logic here
+    return {}
+}
+
+export default ${varName}`,
+    // Template for all experience component types
+    experience: (contentType, varName, displayTemplate) => `import { OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
+import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";
+import { type Maybe, type ICompositionNode, type ExperienceDataFragment } from "@/gql/graphql";
+import { OptimizelyComposition, isNode, CmsEditable } from "@remkoj/optimizely-cms-react/rsc";${displayTemplate ? `
+import { ${displayTemplate} } from "./displayTemplates";` : ''}
+import { getSdk } from "@/gql"
+
+/**
+ * ${contentType.displayName}
+ * ${contentType.description}
+ */
+export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''} }) => {
+    const composition = (data as ExperienceDataFragment).composition as Maybe<ICompositionNode>
+    return <CmsEditable as="div" className="mx-auto px-2 container" cmsFieldName="unstructuredData">
+        { composition && isNode(composition) && <OptimizelyComposition node={composition} /> }
+    </CmsEditable>
+}
+${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
+${varName}.getDataFragment = () => ['${contentType.key}Data', ${contentType.key}DataFragmentDoc]
+${varName}.getMetaData = async (contentLink, locale, client) => {
+    const sdk = getSdk(client);
+    // Add your metadata logic here
+    return {}
+}
+
+export default ${varName}`
+};
+
+const NextJsVisualBuilderCommand = {
+    command: "nextjs:visualbuilder",
+    describe: "Create the React Components for Visual Builder in a Next.JS / Optimizely Graph structure",
+    builder,
+    handler: async (args) => {
+        // Prepare
+        const { components: basePath, _config: { debug }, force } = parseArgs(args);
+        // Create the fall-back node and style defintions
+        await StylesPullCommand.handler({ ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: ['node'], definitions: true });
+        createGenericNode(basePath, force, debug);
+        // Get all styles
+        const { styles } = await getStyles(createCmsClient(args), { ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: ['node', 'base'] });
+        // Process node styles
+        styles.filter(x => typeof (x.nodeType) == 'string' && x.nodeType.length > 0).map(styleDefintion => {
+            const templatePath = path.join(basePath, 'nodes', styleDefintion.nodeType, styleDefintion.key);
+            createSpecificNode(styleDefintion, templatePath, force, debug);
+        });
+        // Process base styles
+        styles.filter(x => typeof (x.baseType) == 'string' && x.baseType.length > 0).map(styleDefinition => {
+            const templatePath = path.join(basePath, styleDefinition.baseType, 'styles', styleDefinition.key);
+            createSpecificNode(styleDefinition, templatePath, force, debug);
+        });
+    }
+};
+function createSpecificNode(template, templatePath, force = false, debug = false) {
+    const nodeFile = path.join(templatePath, 'index.tsx');
+    if (fs.existsSync(nodeFile)) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${template.displayName} (${template.key}) component - file already exists\n`));
+            return undefined;
+        }
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting ${template.displayName} (${template.key}) component\n`));
+    }
+    else if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${template.displayName} (${template.key}) component\n`));
+    if (!fs.existsSync(templatePath))
+        fs.mkdirSync(templatePath, { recursive: true });
+    const displayTemplateName = getDisplayTemplateInfo(template, templatePath);
+    const component = `import { type CmsLayoutComponent } from "@remkoj/optimizely-cms-react";
+import { extractSettings } from "@remkoj/optimizely-cms-react/components";${displayTemplateName ? `
+import { ${displayTemplateName} } from "../displayTemplates";` : ''}
+
+export const ${template.key} : CmsLayoutComponent<${displayTemplateName ?? '{}'}> = ({ contentLink, layoutProps, children }) => {
+    const layout = extractSettings(layoutProps);
+    return (<div className="vb:${template.nodeType} vb:${template.nodeType}:${template.key}">{ children }</div>);
+}
+
+export default ${template.key};`;
+    fs.writeFileSync(nodeFile, component);
+}
+function createGenericNode(basePath, force, debug) {
+    const nodeItem = path.join(basePath, 'node.tsx');
+    if (fs.existsSync(nodeItem)) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping generic node component - file already exists\n`));
+            return undefined;
+        }
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting generic node component\n`));
+    }
+    else if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Creating generic node component\n`));
+    const nodeContent = `import { type CmsLayoutComponent } from "@remkoj/optimizely-cms-react"
+import { CmsEditable } from '@remkoj/optimizely-cms-react/rsc'
+
+export const VisualBuilderNode : CmsLayoutComponent = ({ contentLink, layoutProps, children }) =>
+{
+    let className = \`vb:\${layoutProps?.layoutType}\`
+    if (layoutProps && layoutProps.layoutType == "section")
+        return <CmsEditable as="div" className={ className } cmsId={ contentLink.key }>{ children }</CmsEditable>
+    return <div className={ className }>{ children }</div>
+}
+
+export default VisualBuilderNode`;
+    fs.writeFileSync(nodeItem, nodeContent);
+}
+function getDisplayTemplateInfo(template, typePath) {
+    const displayTemplatesFile = path.join(typePath, '..', 'displayTemplates.ts');
+    if (fs.existsSync(displayTemplatesFile)) {
+        const displayTemplateContent = fs.readFileSync(displayTemplatesFile).toString();
+        const displayTemplateName = template.key + 'Props';
+        if (displayTemplateContent.includes(`export type ${displayTemplateName} =`)) {
+            return displayTemplateName;
+        }
+    }
+    return undefined;
+}
+
+const NextJsFactoryCommand = {
+    command: "nextjs:factory",
+    describe: "Create the ComponentFactory for a Next.JS / Optimizely Graph structure",
+    builder,
+    handler: async (args) => {
+        const { components: basePath, force, _config: { debug } } = parseArgs(args);
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Start generating component factories\n`));
+        const baseDirEntries = fs.readdirSync(basePath);
+        const entries = baseDirEntries
+            .filter(entry => fs.statSync(path.join(basePath, entry)).isDirectory())
+            .map(entry => entry == "nodes" ? processSubGroupFolder(entry, path.join(basePath, entry), force, debug) : processTypeListFolder(entry, path.join(basePath, entry), force, debug))
+            .filter(x => x);
+        // Post process the entries
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Post processing resolved top-level factory entries\n`));
+        entries.forEach((e, i) => {
+            if (isImportInfoList(e) && typeof e.prefix == 'string')
+                switch (e.prefix) {
+                    case "Experience":
+                        entries[i].prefix = [e.prefix, "Page"];
+                        break;
+                    case "Element":
+                        entries[i].prefix = [e.prefix, "Component"];
+                        break;
+                }
+        });
+        // Add any global components
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Adding global components\n`));
+        baseDirEntries.filter(x => x.endsWith('.tsx') && fs.statSync(path.join(basePath, x)).isFile()).forEach(entry => {
+            const entryName = entry.substring(0, entry.length - 4).replaceAll('.', '').split('-').map(p => ucFirst(p)).join('');
+            const importPath = './' + entry.substring(0, entry.length - 4);
+            entries.push({
+                isList: false,
+                component: (entryName[0].toLowerCase() + entryName.substring(1)) + "Component",
+                path: importPath,
+                type: entryName
+            });
+        });
+        // We're always overwriting the main factory
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Creating/overwriting main factory\n`));
+        const mainFactoryFile = path.join(basePath, "index.ts");
+        fs.writeFileSync(mainFactoryFile, generateFactory(entries, "cms"));
+        process.stdout.write(chalk.yellow(`${figures.arrowRight} Generated main factory in: ${mainFactoryFile}.\n`));
+    }
+};
+function processSubGroupFolder(groupName, groupTypePath, force = false, debug = false) {
+    const subgroupInfo = fs
+        .readdirSync(groupTypePath)
+        .filter(entry => {
+        return fs.statSync(path.join(groupTypePath, entry)).isDirectory();
+    }).map(entry => processTypeListFolder(entry, path.join(groupTypePath, entry), force, debug))
+        .filter(x => x);
+    if (subgroupInfo.length == 0)
+        return null;
+    const baseTypeIndex = path.join(groupTypePath, "index.ts");
+    /* Check file existence and determine if we can continue */
+    if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Identified base type ${groupName}\n`));
+    if (fs.existsSync(baseTypeIndex)) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping factory for ${groupName} - file already exists\n`));
+            return {
+                isList: true,
+                component: groupName + 'Dictionary',
+                prefix: groupName[0].toUpperCase() + groupName.substring(1),
+                path: './' + groupName
+            };
+        }
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting factory for ${groupName}\n`));
+    }
+    else if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Generating new factory for ${groupName}\n`));
+    fs.writeFileSync(baseTypeIndex, generateFactory(subgroupInfo, groupName));
+    process.stdout.write(chalk.yellow(`${figures.arrowRight} Generated partial factory in: ${baseTypeIndex}.\n`));
+    return {
+        isList: true,
+        component: groupName + 'Dictionary',
+        prefix: groupName[0].toUpperCase() + groupName.substring(1),
+        path: './' + groupName
+    };
+}
+function isImportInfoList(toTest) {
+    return toTest.isList == true;
+}
+function isPrefixedImportInfoList(toTest) {
+    return isImportInfoList(toTest) && ((typeof toTest.prefix == 'string' && toTest.prefix.length > 0) || (Array.isArray(toTest.prefix) && toTest.prefix.length > 0 && toTest.prefix.every(x => typeof x == 'string' && x.length > 0)));
+}
+function processTypeListFolder(baseType, baseTypePath, force = false, debug = false) {
+    const baseTypeIndex = path.join(baseTypePath, "index.ts");
+    /* Check file existence and determine if we can continue */
+    if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Identified base type ${baseType}\n`));
+    if (fs.existsSync(baseTypeIndex)) {
+        if (!force) {
+            if (debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping factory for ${baseType} - file already exists\n`));
+            return {
+                isList: true,
+                component: baseType + 'Dictionary',
+                prefix: baseType[0].toUpperCase() + baseType.substring(1),
+                path: './' + baseType
+            };
+        }
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting factory for ${baseType}\n`));
+    }
+    else if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Generating new factory for ${baseType}\n`));
+    // Get the components to import
+    let hasStyles = false;
+    const components = fs
+        .readdirSync(baseTypePath)
+        .filter(entry => {
+        if (entry == 'styles') {
+            hasStyles = true;
+            return false;
+        }
+        return fs.statSync(path.join(baseTypePath, entry)).isDirectory() &&
+            fs.existsSync(path.join(baseTypePath, entry, "index.tsx"));
+    })
+        .map(entry => {
+        return {
+            component: entry + 'Component',
+            path: './' + entry,
+            type: entry
+        };
+    });
+    // Handle styles folder
+    if (hasStyles) {
+        const styles = processTypeListFolder("styles", path.join(baseTypePath, 'styles'), force, debug);
+        if (styles) {
+            components.push({
+                path: "./styles",
+                component: "styleDictionary",
+                isList: true,
+                prefix: "Styles"
+            });
+        }
+    }
+    components.sort((a, b) => {
+        if (isImportInfoList(a) && !isImportInfoList(b))
+            return -1;
+        if (!isImportInfoList(a) && isImportInfoList(b))
+            return 1;
+        return 0;
+    });
+    if (components.length == 0) {
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} The base type ${baseType} has no components.\n`));
+        return null;
+    }
+    if (debug)
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Generating factory for ${baseType} with the components: ${components.map(x => x.isList == true ? x.component : x.type).join(", ")}.\n`));
+    // Create the file
+    const factoryContent = generateFactory(components, baseType);
+    fs.writeFileSync(baseTypeIndex, factoryContent);
+    process.stdout.write(chalk.yellow(`${figures.arrowRight} Generated partial factory in: ${baseTypeIndex}.\n`));
+    // Build the result
+    return {
+        isList: true,
+        component: baseType + 'Dictionary',
+        prefix: baseType[0].toUpperCase() + baseType.substring(1),
+        path: './' + baseType
+    };
+}
+function generateFactory(components, typeName) {
+    const needsPrefixFunction = components.some(isPrefixedImportInfoList);
+    const factoryContent = `// Auto generated dictionary
+import { ComponentTypeDictionary } from "@remkoj/optimizely-cms-react";
+${components.map(x => `import ${x.component} from "${x.path}";`).join("\n")}
+
+${needsPrefixFunction ? `// Prefix entries - if needed
+${components.filter(isPrefixedImportInfoList).map(x => Array.isArray(x.prefix) ?
+        x.prefix.map(z => `prefixDictionaryEntries(${x.component}, "${z}");`).join("\n") :
+        `prefixDictionaryEntries(${x.component}, "${x.prefix}");`).join("\n")}
+
+` : ''}// Build dictionary
+export const ${typeName}Dictionary : ComponentTypeDictionary = [
+    ${components.map(x => x.isList == true ? `...${x.component}` : `{ 
+        type: "${x.type}", 
+        component: ${x.component} 
+    }`).join(",\n    ")}
+];
+
+// Export dictionary
+export default ${typeName}Dictionary;${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;
+}
+
+const NextJsCreateCommand = {
+    command: "nextjs:create",
+    describe: "Scaffold a complete Next.JS / Optimizely Graph structure",
+    builder,
+    handler: async (args) => {
+        const { _config: cfg, components: basePath } = parseArgs(args);
+        const client = createCmsClient(args);
+        const getContentTypesResult = await getContentTypes(client, args);
+        const { contentTypes } = getContentTypesResult;
+        const folders = createTypeFolders(contentTypes, basePath, cfg.debug);
+        process.stdout.write(chalk.yellowBright(chalk.bold(figures.tick) + " Prepared context, to limit duplicate work") + "\n");
+        // First create the base files in parallel
+        await Promise.all([
+            TypesPullCommand.handler(args),
+            StylesPullCommand.handler({ ...args, excludeNodeTypes: [], excludeTemplates: [], nodes: [], templates: [], templateTypes: [], definitions: true }),
+            NextJsQueriesCommand.handler(args, { loadedContentTypes: getContentTypesResult, createdTypeFolders: folders })
+        ]);
+        process.stdout.write(chalk.yellowBright(chalk.bold(figures.tick) + " Prepared types, styles and fragments") + "\n");
+        // Then create the components
+        await NextJsComponentsCommand.handler(args, { loadedContentTypes: getContentTypesResult, createdTypeFolders: folders });
+        await NextJsVisualBuilderCommand.handler(args);
+        process.stdout.write(chalk.yellowBright(chalk.bold(figures.tick) + " Created components") + "\n");
+        // Finally create the factories
+        await NextJsFactoryCommand.handler(args);
+        process.stdout.write(chalk.yellowBright(chalk.bold(figures.tick) + " Created component factory") + "\n");
+        process.stdout.write("\n");
+        process.stdout.write(chalk.green(chalk.bold(figures.tick + " Scaffolded a complete Next.JS / Optimizely Graph structure")) + "\n");
+    }
+};
+
 const CmsVersionCommand = {
     command: "cms:version",
     describe: "Get the CMS Version information",
@@ -772,10 +1219,14 @@ const commands = [
     TypesPullCommand,
     TypesPushCommand,
     NextJsCreateCommand,
+    NextJsQueriesCommand,
+    NextJsComponentsCommand,
+    NextJsVisualBuilderCommand,
+    NextJsFactoryCommand,
     CmsVersionCommand
 ];
 
-var version = "2.0.0";
+var version = "2.0.1-pre1";
 var name = "opti-cms";
 var APP = {
 	version: version,