@remkoj/optimizely-cms-cli 6.0.0-pre3 → 6.0.0-pre5

package/dist/index.js

@@ -1,7 +1,7 @@
-import { globSync, glob } from 'glob';
+import { globSync, glob, globIterate } from 'glob';
 import { config } from 'dotenv';
 import { expand } from 'dotenv-expand';
-import { getCmsIntegrationApiConfigFromEnvironment, createClient, OptiCmsVersion, IntegrationApi, ContentRoots } from '@remkoj/optimizely-cms-api';
+import { readPartialEnvConfig, getCmsIntegrationApiConfigFromEnvironment, createClient, OptiCmsVersion, IntegrationApi, ContentRoots } from '@remkoj/optimizely-cms-api';
 import yargs from 'yargs';
 import chalk from 'chalk';
 import path from 'node:path';
@@ -9,6 +9,10 @@ import fs from 'node:fs';
 import figures from 'figures';
 import Table from 'cli-table3';
 import { input, select, confirm } from '@inquirer/prompts';
+import createDeepMerge from '@fastify/deepmerge';
+import { Ajv } from 'ajv';
+import addFormats from 'ajv-formats';
+import deepEqual from 'fast-deep-equal';
 
 /**
  * Prepare the application context, by parsing the .env files in the main
@@ -17,19 +21,25 @@ import { input, select, confirm } from '@inquirer/prompts';
  * @returns     A string array with the files processed
  */
 function prepare() {
-    const envFiles = globSync(".env*").sort((a, b) => b.length - a.length).filter(n => n == ".env" || n == ".env.local" || (process.env.NODE_ENV && n == `.env.${process.env.NODE_ENV}.local`));
-    expand(config({ path: envFiles }));
+    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`));
+    expand(config({ path: envFiles, debug: false, quiet: true }));
     return envFiles;
 }
 
 function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
+    if (envFiles) {
+        process.stdout.write(chalk.bold(`✅ Loaded environment files:`) + "\n");
+        envFiles.forEach(envFile => {
+            process.stdout.write(`  👉 ${envFile}\n`);
+        });
+        process.stdout.write("\n");
+    }
     let config;
     try {
-        config = getCmsIntegrationApiConfigFromEnvironment();
+        config = readPartialEnvConfig();
     }
     catch (e) {
-        if (envFiles)
-            console.error(chalk.gray(`Included environment files: ${envFiles.join(', ')}`));
         console.error(chalk.redBright(`${chalk.bold("[ERROR]:")} Error processing environment variables: ${e.message}`));
         process.exit(1);
     }
@@ -51,12 +61,10 @@ function createOptiCmsApp(scriptName, version, epilogue, envFiles) {
         .epilogue(`Copyright Remko Jantzen - 2023-${(new Date(Date.now())).getFullYear()}`)
         .help()
         .fail((msg, error, args) => {
-        if (envFiles)
-            console.error(chalk.gray(`Included environment files: ${envFiles.join(', ')}\n`));
         if (msg)
-            console.error(msg + "\n");
+            console.error(chalk.redBright(msg) + "\n");
         if (error)
-            console.error(`[${chalk.bold(error.name ?? 'Error')}]: ${error.message ?? ''}\n`);
+            console.error(chalk.redBright(`[${chalk.bold(error.name ?? 'Error')}]: ${error.message ?? ''}`) + '\n');
         args.showHelp("error");
     });
 }
@@ -202,67 +210,98 @@ function getEnumOptions(enumObject) {
         return isNaN(Number(item));
     });
 }
-async function getContentTypes(client, args, pageSize = 100, allowSystem = false) {
+async function getContentTypes(client, args, pageSize = 5, allowSystem = false, customFilter) {
     const { _config: cfg, excludeBaseTypes, excludeTypes, baseTypes, types, all } = 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.contentTypesList({ query: { pageIndex: 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.contentTypesList({ query: { pageIndex: resultsPage.pageIndex + 1, pageSize: 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 validBaseTypes = getEnumOptions(IntegrationApi.ContentBaseType).map(x => x.toLowerCase());
-    const allContentTypes = all ?
-        // If we're returning all content types, including non-supported base types, make sure the base type is always set
-        results.map(contentType => {
-            return {
-                ...contentType,
-                baseType: contentType.baseType ?? 'default'
-            };
-        }) :
-        // Otherwise filter out any non supported content base type
-        results.filter(contentType => {
-            const baseType = (contentType.baseType ?? 'default').toLowerCase();
-            const isValid = validBaseTypes.includes(baseType);
-            if (!isValid && cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Removing ${contentType.key} as it has an unsupported base type: ${baseType}\n`));
-            return isValid;
-        });
-    const contentTypes = allContentTypes.filter(data => {
-        // Remove 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) {
+    const allContentTypes = [];
+    const filteredContentTypes = [];
+    for await (const contentType of getAllContentTypes(client, cfg.debug, pageSize)) {
+        const normalizedContentType = { ...contentType, baseType: contentType.baseType ?? 'default' };
+        // Build the "All" data set
+        if (all)
+            allContentTypes.push(normalizedContentType);
+        else if (validBaseTypes.includes(normalizedContentType.baseType.toLowerCase()))
+            allContentTypes.push(normalizedContentType);
+        else if (cfg.debug) {
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${normalizedContentType.key} as it has an unsupported base type: ${normalizedContentType.baseType}\n`));
+            continue;
+        }
+        else {
+            continue;
+        }
+        // Skip based upon base type filters
+        if (!shouldInclude(normalizedContentType.baseType, baseTypes, excludeBaseTypes)) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${data.key} due to applied filters\n`));
-            return false;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${normalizedContentType.key} as it has a restricted base type: ${normalizedContentType.baseType}\n`));
+            continue;
         }
-        // Skip system types if desired
-        if (data.source == 'system' && !allowSystem) {
+        // Skip based upon type filters
+        if (!shouldInclude(normalizedContentType.key, types, excludeTypes)) {
             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;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping ${normalizedContentType.key} as it has a restricted type: ${normalizedContentType.key}\n`));
+            continue;
         }
-        return true;
-    });
+        // Skip based upon system filter
+        if (normalizedContentType.source == 'system' && !allowSystem) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${normalizedContentType.key} due to it being a system type\n`));
+            continue;
+        }
+        // Skip based upon custom filter
+        if (customFilter && !await customFilter(normalizedContentType)) {
+            if (cfg.debug)
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Content-Type ${normalizedContentType.key} due to the custom filter\n`));
+            continue;
+        }
+        // Add to list
+        filteredContentTypes.push(normalizedContentType);
+    }
     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: allContentTypes,
-        contentTypes: contentTypes
-    };
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${allContentTypes.length} to ${filteredContentTypes.length} items\n`));
+    return { all: allContentTypes, contentTypes: filteredContentTypes };
+}
+function shouldInclude(value, allow, disallow) {
+    // Item is allowed when either allow is not set, an empty array or has the value
+    const isAllowed = !Array.isArray(allow) || allow.length === 0 || allow.includes(value);
+    // Item is disallowed when and the array is set and includes the value
+    const isDisallowed = Array.isArray(disallow) && disallow.includes(value);
+    return isAllowed && !isDisallowed;
+}
+/**
+ * Retrieve all content types as an Async Generator, allowing processing of entries whilest they are being loaded from the CMS instance.
+ *
+ * @param client
+ * @param args
+ * @param pageSize
+ */
+async function* getAllContentTypes(client, debug = false, pageSize = 25) {
+    process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pulling Content Types from Optimizely CMS\n`));
+    let requestPageSize = pageSize;
+    let requestPageIndex = 0;
+    let totalItemCount = 0;
+    let totalPages = 0;
+    do {
+        const resultsPage = await client.contentTypesList({ query: { pageIndex: requestPageIndex, pageSize: requestPageSize } }).catch((_) => {
+            return {
+                items: [],
+                totalItemCount: 0,
+                pageIndex: requestPageIndex,
+                pageSize: requestPageSize
+            };
+        });
+        // Calculate fields for next page
+        totalItemCount = resultsPage.totalItemCount ?? 0;
+        requestPageSize = resultsPage.pageSize;
+        requestPageIndex = resultsPage.pageIndex + 1;
+        totalPages = Math.ceil(totalItemCount / requestPageSize);
+        // Debug output
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched contentTypes page ${requestPageIndex} of ${totalPages} (${requestPageSize} items per page)\n`));
+        // Yield items
+        for (const contentType of (resultsPage.items ?? [])) {
+            yield contentType;
+        }
+    } while (requestPageIndex < totalPages);
 }
 
 const stylesBuilder = yargs => {
@@ -274,73 +313,90 @@ const stylesBuilder = yargs => {
     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) {
+async function getStyles(client, args, pageSize = 25) {
     if (client.runtimeCmsVersion == OptiCmsVersion.CMS12)
         return { all: [], styles: [] };
     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.displayTemplatesList({ query: { pageIndex: 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.displayTemplatesList({ query: { pageIndex: resultsPage.pageIndex + 1, pageSize: 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)) {
+    const allDisplayTemplates = [];
+    const filteredDisplayTemplates = [];
+    for await (const displayTemplate of getAllStyles(client, cfg.debug, pageSize)) {
+        allDisplayTemplates.push(displayTemplate);
+        const templateType = displayTemplate.baseType ? 'base' : displayTemplate.nodeType ? 'node' : displayTemplate.contentType ? 'component' : 'unknown';
+        if (isExcluded(displayTemplate.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;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style defintion key filtering active\n`));
+            continue;
         }
-        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;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style type filtering is active\n`));
+            continue;
         }
-        if (data.baseType && isExcluded(data.baseType, excludeBaseTypes, baseTypes)) {
+        if (displayTemplate.baseType && isExcluded(displayTemplate.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;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at base type level and base type filtering is active\n`));
+            continue;
         }
-        if (data.contentType && isExcluded(data.contentType, excludeTypes, types)) {
+        if (displayTemplate.contentType && isExcluded(displayTemplate.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;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at component type level and component type filtering is active\n`));
+            continue;
         }
         if (templateType != 'component' && types.length > 0) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style is targeting the ${templateType} level and component type selection is active\n`));
-            return false;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is targeting the ${templateType} level and component type selection is active\n`));
+            continue;
         }
-        if (data.nodeType && isExcluded(data.nodeType, excludeNodeTypes, nodes)) {
+        if (displayTemplate.nodeType && isExcluded(displayTemplate.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;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is defined at node type level and node type filtering is active\n`));
+            continue;
         }
         if (templateType != 'node' && nodes.length > 0) {
             if (cfg.debug)
-                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${data.key} - Style is targeting the ${templateType} level and node type selection is active\n`));
-            return false;
+                process.stdout.write(chalk.gray(`${figures.arrowRight} Skipping Style-Defintion ${displayTemplate.key} - Style is targeting the ${templateType} level and node type selection is active\n`));
+            continue;
         }
-        return true;
-    });
+        filteredDisplayTemplates.push(displayTemplate);
+    }
     if (cfg.debug)
-        process.stdout.write(chalk.gray(`${figures.arrowRight} Applied content type filters, reduced from ${results.length} to ${styles.length} items\n`));
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Applied style filters, reduced from ${allDisplayTemplates.length} to ${filteredDisplayTemplates.length} items\n`));
     return {
-        all: results,
-        styles
+        all: allDisplayTemplates,
+        styles: filteredDisplayTemplates
     };
 }
+async function* getAllStyles(client, debug = false, pageSize = 5) {
+    if (client.runtimeCmsVersion == OptiCmsVersion.CMS12)
+        return;
+    let requestPageSize = pageSize;
+    let requestPageIndex = 0;
+    let totalItemCount = 0;
+    let totalPages = 0;
+    do {
+        const resultsPage = await client.displayTemplatesList({ query: { pageIndex: requestPageIndex, pageSize: requestPageSize } }).catch((_) => {
+            return {
+                items: [],
+                totalItemCount: 0,
+                pageIndex: requestPageIndex,
+                pageSize: requestPageSize
+            };
+        });
+        // Calculate fields for next page
+        totalItemCount = resultsPage.totalItemCount ?? 0;
+        requestPageSize = resultsPage.pageSize;
+        requestPageIndex = resultsPage.pageIndex + 1;
+        totalPages = Math.ceil(totalItemCount / requestPageSize);
+        // Debug output
+        if (debug)
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched displayTemplates page ${requestPageIndex} of ${totalPages} (${requestPageSize} items per page)\n`));
+        // Yield items
+        for (const displayTemplate of (resultsPage.items ?? [])) {
+            yield displayTemplate;
+        }
+    } while (requestPageIndex < totalPages);
+}
 function isExcluded(value, exclusions, inclusions) {
     if (value == undefined || value == null)
         return false;
@@ -504,7 +560,7 @@ const StylesPullCommand = {
                 // Write Style definition
                 const imports = [
                     'import type { LayoutProps } from "@remkoj/optimizely-cms-react"',
-                    'import type { ReactNode } from "react"'
+                    'import type { ReactNode, JSX } from "react"'
                 ];
                 const typeContents = [];
                 const props = [];
@@ -573,11 +629,11 @@ const StylesCreateCommand = {
             process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
             return;
         }
-        const allowedBaseTypes = ['section', 'element'];
+        const allowedBaseTypes = ['section', 'component', 'experience'];
         // Prepare
         process.stdout.write(chalk.yellowBright(chalk.bold(`Reading current information from Optimizely CMS\n`)));
         const [{ contentTypes }, { styles }] = await Promise.all([
-            getContentTypes(client, { ...args, excludeBaseTypes: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], all: false }),
+            getContentTypes(client, { ...args, excludeBaseTypes: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], all: false }, 25, false, (ct) => ct.compositionBehaviors?.includes('elementEnabled') || ct.compositionBehaviors?.includes('sectionEnabled') || ct.baseType == 'experience' || ct.baseType == 'section'),
             getStyles(client, { ...args, excludeBaseTypes: [], excludeNodeTypes: [], excludeTemplates: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], nodes: [], components: '', templates: [], templateTypes: [], all: false })
         ]);
         const styleKeys = styles.map(x => x.key);
@@ -585,27 +641,34 @@ const StylesCreateCommand = {
         process.stdout.write(chalk.yellowBright(chalk.bold(`\nConfigure your style definition\n`)));
         const key = await input({ message: "Identifier:", validate: (val) => { return val.match(/^[a-zA-Z][A-Za-z0-9\-_]*$/) != null && !styleKeys.includes(val); } });
         const displayName = await input({ message: "Display name:" });
-        const type = (await select({ message: "Style target:", choices: [
-                { value: "baseType", name: "Base Type", description: "Target all Content-Types that inherit from the specified base type" },
-                { value: "contentType", name: "Content-Type", description: "Target a specific Content-Type that supports styling" },
-                { value: "nodeType", name: "Experience Node", description: "Target a specific node type from a Section" }
-            ] }));
+        const type = (await select({
+            message: "Style target:", choices: [
+                { value: "baseType", name: "Base type", description: "Target all Content-Types that inherit from the specified base type" },
+                { value: "contentType", name: "Content type", description: "Target a specific Content-Type that supports styling" },
+                { value: "nodeType", name: "Node", description: "Target a specific node type from a Section" }
+            ]
+        }));
         let typeId = "";
         switch (type) {
             case 'contentType':
                 typeId = await select({ message: "Content-Type:", choices: contentTypes.map(x => { return { value: x.key, description: x.description, name: x.displayName }; }) });
                 break;
             case 'nodeType':
-                typeId = await select({ message: "Node type:", choices: [
+                typeId = await select({
+                    message: "Node type:", choices: [
                         { value: "row", description: "Row", name: "Row" },
                         { value: "column", description: "Column", name: "Column" }
-                    ] });
+                    ]
+                });
                 break;
             case 'baseType':
-                typeId = await select({ message: "Base type:", choices: [
+                typeId = await select({
+                    message: "Base type:", choices: [
+                        { value: "experience", description: "Target all experience types", name: "Experience" },
                         { value: "section", description: "Target all section types", name: "Section" },
-                        { value: "element", description: "Target all element types", name: "Element" }
-                    ] });
+                        { value: "component", description: "Target all component types", name: "Component" }
+                    ]
+                });
                 break;
         }
         const isDefault = await confirm({ message: "Should this style be marked as default?" });
@@ -625,8 +688,18 @@ const StylesCreateCommand = {
                 process.exit(0);
             }
         }
+        // @ToDo: Add properties
         fs.writeFileSync(path.join(basePath, styleFilePath), JSON.stringify(definition, undefined, 4));
         process.stdout.write(chalk.yellowBright(chalk.bold(`\nWritten style defintion template to: ${path.normalize(path.join(basePath, styleFilePath))}\n`)));
+        if (await confirm({ message: "Do you want to publish this style into Optimizely CMS?" })) {
+            const response = await client.displayTemplatesPut({ body: definition, path: { key: definition.key } }).catch(_ => undefined);
+            if (!response) {
+                process.stderr.write(chalk.redBright(chalk.bold(`\[ERROR] Unable to create style definition ${definition.displayName} in Optimizely CMS\n`)));
+            }
+            else {
+                process.stdout.write(chalk.yellowBright(chalk.bold(`\nCreated style definition ${definition.displayName} in Optimizely CMS\n`)));
+            }
+        }
         process.stdout.write(chalk.yellowBright(`\n1. Add your properties to the 'settings' list in the file`));
         process.stdout.write(chalk.yellowBright(`\n2. Run `));
         process.stdout.write(chalk.whiteBright(`yarn opti-cms styles:push -t ${definition.key}`));
@@ -1132,20 +1205,19 @@ ${varName}.getMetaData = async (contentLink, locale, client) => {
 export default ${varName}`,
     // Template for all experience component types
     experience: (contentType, varName, displayTemplate) => `import { type OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
-import { getFragmentData } from "@/gql/fragment-masking";
-import { ExperienceDataFragmentDoc, CompositionDataFragmentDoc, ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";
+import { ${contentType.key}DataFragmentDoc, type ExperienceDataFragment, type ${contentType.key}DataFragment } from "@/gql/graphql";
 import { OptimizelyComposition, isNode, CmsEditable } from "@remkoj/optimizely-cms-react/rsc";${displayTemplate ? `
 import { ${displayTemplate} } from "./displayTemplates";` : ''}
-import { getSdk } from "@/gql"
+import { getSdk } from "@/gql/client"
 
 /**
  * ${contentType.displayName}
  * ${contentType.description}
  */
 export const ${varName} : CmsComponent<${contentType.key}DataFragment${displayTemplate ? ', ' + displayTemplate : ''}> = ({ data${displayTemplate ? ', layoutProps' : ''}, ctx }) => {
-    const composition = getFragmentData(CompositionDataFragmentDoc, getFragmentData(ExperienceDataFragmentDoc, data)?.composition)
+    const composition = (data as ExperienceDataFragment)?.composition
     return <CmsEditable as="div" className="mx-auto px-2 container" cmsFieldName="unstructuredData" ctx={ctx}>
-        { composition && isNode(composition) && <OptimizelyComposition node={composition} /> }
+        { composition && isNode(composition) && <OptimizelyComposition node={composition} ctx={ctx} /> }
     </CmsEditable>
 }
 ${varName}.displayName = "${contentType.displayName} (${ucFirst(contentType.baseType)}/${contentType.key})"
@@ -1493,6 +1565,386 @@ const NextJsCreateCommand = {
     }
 };
 
+const deepmerge$1 = createDeepMerge();
+async function loadSchema(client, schemaName) {
+    const schemas = Array.isArray(schemaName) ? schemaName : [schemaName];
+    process.stdout.write(`${figures.arrowRight} Downloading current JSON Schema\n`);
+    const spec = await client.getOpenApiSpec();
+    const specSchemas = spec.components?.schemas ?? {};
+    process.stdout.write(`  ${figures.tick} Complete\n`);
+    const result = [];
+    process.stdout.write(`\n${figures.arrowRight} Constructing schema for ${schemas.join(', ')}\n`);
+    for await (const schema of schemas)
+        if (specSchemas[schema]) {
+            const definitions = {};
+            const processedSchema = processSchema(specSchemas[schema], definitions, spec);
+            const jsonSchema = {
+                //"$schema": "https://json-schema.org/draft-07/schema",
+                "$id": `https://api.cms.optimizely.com/schema/${schema}`,
+                type: "object",
+                title: schema,
+                ...processedSchema,
+                definitions
+            };
+            result.push({
+                title: schema,
+                schema: postProcessDefintions(jsonSchema)
+            });
+            process.stdout.write(`  ${figures.tick} Constructed schema of ${schema}\n`);
+        }
+    return result;
+}
+function postProcessDefintions(jsonSchema) {
+    if (!jsonSchema.definitions)
+        return jsonSchema;
+    for (const definitionName in jsonSchema.definitions) {
+        if ((definitionName.endsWith("Property") || definitionName.endsWith("ListItem")) && jsonSchema.definitions[definitionName].properties) {
+            const type = jsonSchema.definitions[definitionName].properties?.type;
+            if (isRefSchema(type)) {
+                const typeSchema = resolveRefSchema(type, jsonSchema);
+                if (typeSchema && typeSchema.type === 'string' && Array.isArray(typeSchema.enum)) {
+                    let typeValue = definitionName.substring(0, definitionName.length - 8);
+                    typeValue = typeValue[0].toLowerCase() + typeValue.substring(1);
+                    typeValue = typeValue === 'list' ? 'array' : typeValue;
+                    typeValue = typeValue === 'jsonString' ? 'json' : typeValue;
+                    if (typeSchema.enum.includes(typeValue)) {
+                        const newTypeDef = deepmerge$1({}, typeSchema);
+                        newTypeDef.enum = newTypeDef.enum.filter((x) => x === typeValue);
+                        jsonSchema.definitions[definitionName].properties.type = newTypeDef;
+                    }
+                }
+            }
+        }
+    }
+    return jsonSchema;
+}
+/**
+ * Schema normalization to tranform the schema from a .Net generated OpenAPI Schema
+ * to a AJV compatible JSON Schema
+ *
+ * @see   https://ajv.js.org/
+ * @param schema
+ * @param defs
+ * @param spec
+ * @returns
+ */
+function processSchema(schema, defs, spec, mergeAllOf = true) {
+    if (Array.isArray(schema))
+        return schema.map(s => processSchema(s, defs, spec, mergeAllOf));
+    if (typeof schema !== 'object' || schema === null)
+        return schema;
+    const props = Object.getOwnPropertyNames(schema);
+    if (props.length === 1 && props[0] === '$ref') {
+        const ref = schema['$ref'];
+        if (isLocalRef(ref)) {
+            const refName = getLocalRefName(ref);
+            if (!defs[refName]) {
+                const refItem = resolveLocalRef(ref, spec);
+                defs[refName] = processSchema(refItem, defs, spec, mergeAllOf);
+            }
+            const newRef = `#/definitions/${refName}`;
+            return { "$ref": newRef };
+        }
+        else {
+            return schema;
+        }
+    }
+    else if (mergeAllOf && props.includes('allOf') && Array.isArray(schema['allOf'])) {
+        // process all of
+        const newObject = props.reduce((generated, propName) => {
+            if (propName != 'allOf')
+                generated[propName] = schema[propName];
+            return generated;
+        }, {});
+        const allOfSchemas = schema['allOf'].map((subschema) => {
+            const resolvedSchema = isRefSchema(subschema) ? resolveRefSchema(subschema, spec) : subschema;
+            const resolved = processSchema(resolvedSchema, defs, spec, mergeAllOf);
+            return resolved;
+        });
+        const merged = allOfSchemas.reduce((previous, current) => deepmerge$1(previous, current), newObject);
+        if (newObject['description'])
+            merged['description'] = newObject['description'];
+        if (newObject['title'])
+            merged['title'] = newObject['title'];
+        return merged;
+    }
+    else {
+        const newSchema = {};
+        for (const key of props) {
+            if (key === 'pattern' && typeof schema[key] === 'string') {
+                newSchema[key] = safeCreateUnicodeRegExp(schema[key]);
+                /*} else if (key === 'readOnly' && schema[key] === true) {
+                  return undefined*/
+            }
+            else if (['additionalProperties', 'required', 'properties', 'discriminator'].includes(key) && typeof schema[key] !== 'object') ;
+            else if (key === 'discriminator' && !Array.isArray(schema['oneOf'])) ;
+            else if (key === 'discriminator' && !schema['type']) {
+                newSchema.type = 'object';
+            }
+            else {
+                const keyVal = processSchema(schema[key], defs, spec, mergeAllOf);
+                if (keyVal !== undefined)
+                    newSchema[key] = keyVal;
+            }
+        }
+        return newSchema;
+    }
+}
+function isRefSchema(schema) {
+    if (typeof schema != 'object' || schema == null)
+        return false;
+    return Object.getOwnPropertyNames(schema).length === 1 && typeof schema['$ref'] === 'string';
+}
+function resolveRefSchema(schema, spec) {
+    if (!isRefSchema(schema))
+        return undefined;
+    return resolveLocalRef(schema['$ref'], spec);
+}
+function isLocalRef(ref) {
+    return typeof ref === 'string' && ref.startsWith('#');
+}
+function getLocalRefName(ref) {
+    if (!isLocalRef(ref))
+        return undefined;
+    const refPath = ref.substring(2).split('/');
+    return refPath.at(refPath.length - 1);
+}
+function resolveLocalRef(ref, spec) {
+    const refPath = ref.substring(2).split('/');
+    return refPath.reduce((integrator, current) => {
+        return integrator ? integrator[current] : undefined;
+    }, spec);
+}
+const replaceEscapedChars = [
+    [new RegExp('\\\\ ', 'g'), ' '],
+    [new RegExp('\\\\!', 'g'), '!'],
+    [new RegExp('\\\\"', 'g'), '"'],
+    [new RegExp('\\\\#', 'g'), '#'],
+    [new RegExp('\\\\%', 'g'), '%'],
+    [new RegExp('\\\\&', 'g'), '&'],
+    [new RegExp("\\\\'", 'g'), "'"],
+    [new RegExp('\\\\,', 'g'), ','],
+    [new RegExp('\\\\-', 'g'), '-'],
+    [new RegExp('\\\\:', 'g'), ':'],
+    [new RegExp('\\\\;', 'g'), ';'],
+    [new RegExp('\\\\<', 'g'), '<'],
+    [new RegExp('\\\\=', 'g'), '='],
+    [new RegExp('\\\\>', 'g'), '>'],
+    [new RegExp('\\\\@', 'g'), '@'],
+    [new RegExp('\\\\_', 'g'), '_'],
+    [new RegExp('\\\\`', 'g'), '`'],
+    [new RegExp('\\\\~', 'g'), '~'],
+    [new RegExp('\\\\[zZ]', 'g'), '$'],
+];
+function safeCreateUnicodeRegExp(pattern) {
+    for (const unEscape of replaceEscapedChars) {
+        pattern = pattern.replace(unEscape[0], unEscape[1]);
+    }
+    return pattern;
+}
+
+const SchemaVsCodeCommand = {
+    command: "schema:vscode",
+    describe: "Configure schema validation for opti-type.json & opti-style.json files by VSCode in the current project folder",
+    builder: (yargs) => {
+        const newYargs = yargs;
+        //newYargs.option('schemas', { alias: 's', description: "The schema's to download", array: true, type: 'string', demandOption: false, default: ['DisplayTemplate', 'ContentType'] })
+        //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 projectPath = args.path;
+        const client = createCmsClient(args);
+        const schemas = await loadSchema(client, ['DisplayTemplate', 'ContentType']);
+        process.stdout.write(`\n${figures.arrowRight} Writing schema files\n`);
+        for (const schema of schemas) {
+            const schemaFile = path.join(projectPath, '.vscode', `${schema.title.toLowerCase()}.schema.json`);
+            void await writeFileAsync(schemaFile, JSON.stringify(schema.schema, undefined, 2));
+            process.stdout.write(`  ${figures.tick} Written the ${schema.title} schema to ${path.relative(projectPath, schemaFile)}\n`);
+        }
+        process.stdout.write(`\n${figures.arrowRight} Updating folder settings\n`);
+        const settingsFile = path.join(projectPath, '.vscode', 'settings.json');
+        const settings = (await readJsonFileAsync(settingsFile).catch(() => undefined)) ?? {};
+        settings['json.validate.enable'] = true;
+        settings['json.schemaDownload.enable'] = true;
+        settings['json.schemas'] = settings['json.schemas'] || [];
+        const hasContentType = settings['json.schemas'].findIndex(v => v.fileMatch.findIndex(fm => fm.endsWith('.opti-type.json')) >= 0) >= 0;
+        const hasStyleDefinition = settings['json.schemas'].findIndex(v => v.fileMatch.findIndex(fm => fm.endsWith('.opti-style.json')) >= 0) >= 0;
+        const hasSchemaType = settings['json.schemas'].findIndex(v => v.fileMatch.findIndex(fm => fm.endsWith('.schema.json')) >= 0) >= 0;
+        if (!hasContentType)
+            settings['json.schemas'].push({
+                "fileMatch": [
+                    "**/*.opti-type.json"
+                ],
+                "url": "./.vscode/contenttype.schema.json"
+            });
+        if (!hasStyleDefinition)
+            settings['json.schemas'].push({
+                "fileMatch": [
+                    "**/*.opti-style.json"
+                ],
+                "url": "./.vscode/displaytemplate.schema.json"
+            });
+        if (!hasSchemaType)
+            settings['json.schemas'].push({
+                "fileMatch": [
+                    "**/*.schema.json"
+                ],
+                "url": "https://json-schema.org/draft-07/schema"
+            });
+        if (settings['json.schemas'].length == 0)
+            delete settings['json.schemas'];
+        await writeFileAsync(settingsFile, JSON.stringify(settings, undefined, 2));
+    }
+};
+function readJsonFileAsync(path) {
+    return new Promise((resolve, reject) => fs.readFile(path, (err, data) => {
+        if (err) {
+            if (err?.code === 'ENOENT')
+                resolve(undefined);
+            else
+                reject(err);
+        }
+        else {
+            try {
+                const d = data.toString();
+                resolve(JSON.parse(d));
+            }
+            catch (e) {
+                reject(e);
+            }
+        }
+    }));
+}
+function writeFileAsync(path, data) {
+    return new Promise((resolve, reject) => {
+        fs.writeFile(path, data, (err) => {
+            if (err)
+                reject(err);
+            else
+                resolve();
+        });
+    });
+}
+
+const deepmerge = createDeepMerge();
+const SchemaValidateCommand = {
+    command: "schema:validate",
+    describe: "Validate the opti-type.json & opti-style.json files",
+    builder: (yargs) => {
+        const newYargs = yargs;
+        //newYargs.option('schemas', { alias: 's', description: "The schema's to download", array: true, type: 'string', demandOption: false, default: ['DisplayTemplate', 'ContentType'] })
+        //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 projectPath = args.path;
+        const client = createCmsClient(args);
+        const schemas = await loadSchema(client, ['DisplayTemplate', 'ContentType']);
+        process.stdout.write(``);
+        const styleSchema = schemas.find(x => x.title == 'DisplayTemplate')?.schema;
+        const typeSchema = schemas.find(x => x.title == 'ContentType')?.schema;
+        const [styleValidator, typeValidator] = await Promise.all([getValidator(styleSchema), getValidator(typeSchema)]);
+        process.stdout.write(`\n${figures.arrowRight} Validating display templates (*.opti-style.json) and content types (*.opti-type.json).\n`);
+        const patterns = ["./**/*.opti-type.json", "./**/*.opti-style.json"];
+        const globMatches = globIterate(patterns, { cwd: projectPath, absolute: true });
+        let allOk = true;
+        for await (const fileMatch of globMatches) {
+            try {
+                const content = JSON.parse(fs.readFileSync(fileMatch).toString());
+                let errors = undefined;
+                if (fileMatch.endsWith('.opti-type.json') && !typeValidator(content)) {
+                    errors = typeValidator.errors;
+                }
+                else if (fileMatch.endsWith('.opti-style.json') && !styleValidator(content)) {
+                    errors = styleValidator.errors;
+                }
+                if (errors) {
+                    allOk = false;
+                    process.stdout.write(chalk.redBright(chalk.bold(`\n${figures.cross} ${path.relative(projectPath, fileMatch)}\n`)));
+                    const groupedErrors = groupErrors(errors);
+                    for (const instancepath in groupedErrors) {
+                        for (const key in groupedErrors[instancepath]) {
+                            const errorList = groupedErrors[instancepath][key].filter((v, i, a) => a.findIndex(pv => deepEqual(v, pv)) === i);
+                            for (const error of errorList) {
+                                process.stdout.write(`  Node ${instancepath} ${error.message}\n`);
+                                switch (error.keyword) {
+                                    case 'enum':
+                                        process.stdout.write(`    Allowed values: ${error.params.allowedValues.map((x) => x.toString()).join(', ')}\n`);
+                                        break;
+                                    case 'oneOf':
+                                        const matching = Array.isArray(error.params.passingSchemas) ? error.params.passingSchemas : [];
+                                        if (matching.length === 0)
+                                            process.stdout.write(`    Currently none matching\n`);
+                                        else
+                                            process.stdout.write(`    Currently matching ${matching.map((x) => x.toString()).join(", ")}\n`);
+                                        break;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            catch (e) {
+                allOk = false;
+                process.stdout.write(chalk.redBright(chalk.bold(`${figures.cross} ${path.relative(projectPath, fileMatch)}\n`)));
+                process.stdout.write(`  ${e.message}\n`);
+            }
+        }
+        process.stdout.write(`\n`);
+        if (allOk)
+            process.stdout.write(chalk.greenBright(`${figures.tick} All types & styles match the schema\n`));
+        else {
+            process.stdout.write(chalk.redBright(`${figures.cross} Some types & styles contain errors\n`));
+            process.exit(1);
+        }
+    }
+};
+function groupErrors(errors) {
+    const errorrsByInstance = groupErrorsByPath(errors);
+    const instancePaths = Object.getOwnPropertyNames(errorrsByInstance);
+    return instancePaths.reduce((previous, current) => {
+        previous[current] = groupErrorsByKeyword(errorrsByInstance[current]);
+        return previous;
+    }, {});
+}
+function groupErrorsByPath(errors) {
+    return errors.reduce((previous, current) => {
+        const instancePath = current.instancePath == "" ? "[ROOT]" : current.instancePath;
+        const partial = {};
+        partial[instancePath] = [current];
+        return deepmerge(previous, partial);
+    }, {});
+}
+function groupErrorsByKeyword(errors) {
+    const toMerge = errors.reduce((previous, current) => {
+        const keyword = current.keyword;
+        const partial = {};
+        partial[keyword] = [current];
+        return deepmerge(previous, partial);
+    }, {});
+    // Enum errors must be merged
+    if (toMerge.enum)
+        toMerge.enum = [toMerge.enum.reduce((prev, current) => prev ? deepmerge(prev, current) : current, undefined)];
+    return toMerge;
+}
+function getValidator(schemaObject) {
+    const ajv = new Ajv({
+        discriminator: true
+    });
+    addFormats(ajv);
+    return ajv.compile(schemaObject);
+}
+
+var version = "6.0.0-pre4";
+var name = "opti-cms";
+var APP = {
+	version: version,
+	name: name
+};
+
 const CmsVersionCommand = {
     command: "cms:version",
     aliases: "$0",
@@ -1520,10 +1972,11 @@ const CmsVersionCommand = {
             colAligns: ["left", "left"]
         });
         info.push(["Instance", client.cmsUrl.host]);
-        info.push(["Client", client.apiVersion]);
-        info.push(["API", versionInfo.apiVersion]);
-        info.push(["CMS", versionInfo.cmsVersion]);
-        info.push(["Service", versionInfo.serviceVersion]);
+        info.push(["Client API", client.apiVersion]);
+        info.push(["Service API", versionInfo.apiVersion]);
+        info.push(["CMS Build", versionInfo.cmsVersion]);
+        info.push(["Service Build", versionInfo.serviceVersion]);
+        info.push(["SDK", APP.version]);
         process.stdout.write(info.toString() + "\n");
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Optimizely CMS Status: ${versionInfo.status}\n`));
         process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
@@ -1845,16 +2298,11 @@ const commands = [
     NextJsVisualBuilderCommand,
     NextJsFactoryCommand,
     CmsResetCommand,
-    CmsVersionCommand
+    CmsVersionCommand,
+    SchemaVsCodeCommand,
+    SchemaValidateCommand
 ];
 
-var version = "6.0.0-pre3";
-var name = "opti-cms";
-var APP = {
-	version: version,
-	name: name
-};
-
 async function main() {
     const envFiles = prepare();
     const app = createOptiCmsApp(APP.name, APP.version, undefined, envFiles);
@@ -1864,7 +2312,7 @@ async function main() {
     }
     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();