@remkoj/optimizely-cms-cli 2.0.4 → 3.0.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import { globSync, glob } from 'glob';
 import dotenv from 'dotenv';
 import { expand } from 'dotenv-expand';
-import { getCmsIntegrationApiConfigFromEnvironment, createClient } from '@remkoj/optimizely-cms-api';
+import { getCmsIntegrationApiConfigFromEnvironment, createClient, OptiCmsVersion, IntegrationApi } from '@remkoj/optimizely-cms-api';
 import yargs from 'yargs';
 import path from 'node:path';
 import fs from 'node:fs';
@@ -41,7 +41,7 @@ function createOptiCmsApp(scriptName, version, epilogue) {
         .option("cms_url", { alias: "cu", description: "Optimizely CMS URL", string: true, type: "string", demandOption: isDemanded(config.base), default: config.base, coerce: (val) => new URL(val) })
         .option("client_id", { alias: "ci", description: "API Client ID", string: true, type: "string", demandOption: isDemanded(config.clientId), default: config.clientId })
         .option('client_secret', { alias: "cs", description: "API Client Secrent", string: true, type: "string", demandOption: isDemanded(config.clientSecret), default: config.clientSecret })
-        .option('user_id', { alias: "uid", description: "Impersonate user id", string: true, type: "string", demandOption: false, default: config.actAs })
+        .option('user_id', { alias: "u", description: "Impersonate user id", string: true, type: "string", demandOption: false, default: config.actAs })
         .option('verbose', { description: "Enable logging", boolean: true, type: 'boolean', demandOption: false, default: config.debug })
         .demandCommand(1, 1)
         .showHelpOnFail(true)
@@ -92,6 +92,18 @@ function parseArgs({ client_id, client_secret, cms_url, user_id, verbose, path:
     };
 }
 
+function createCmsClient(args) {
+    const { _config: cfg } = parseArgs(args);
+    const baseConfig = getCmsIntegrationApiConfigFromEnvironment();
+    const client = createClient({
+        ...baseConfig,
+        ...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 StylesPushCommand = {
     command: "styles:push",
     describe: "Push Visual Builder style definitions into the CMS (create/replace)",
@@ -102,7 +114,11 @@ const StylesPushCommand = {
     },
     handler: async (args) => {
         const { _config: cfg, excludeTemplates, templates, ...opts } = parseArgs(args);
-        const client = createClient(cfg);
+        const client = createCmsClient(args);
+        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
+            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
+            return;
+        }
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Pushing (create/replace) DisplayStyles into Optimizely CMS\n`));
         const styleDefinitionFiles = await glob("./**/*.opti-style.json", {
             cwd: opts.components
@@ -161,23 +177,21 @@ 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: [] });
+    yargs.option('all', { alias: 'a', description: "Include non-supported base types", boolean: true, type: 'boolean', demandOption: false, default: false });
     return yargs;
 };
+function getEnumOptions(enumObject) {
+    return Object.keys(enumObject).filter((item) => {
+        return isNaN(Number(item));
+    });
+}
 async function getContentTypes(client, args, pageSize = 100, allowSystem = false) {
-    const { _config: cfg, excludeBaseTypes, excludeTypes, baseTypes, types } = parseArgs(args);
+    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`));
@@ -195,7 +209,24 @@ async function getContentTypes(client, args, pageSize = 100, allowSystem = false
         process.stdout.write(chalk.gray(`${figures.arrowRight} Fetched ${results.length} Content-Types from Optimizely CMS\n`));
         process.stdout.write(chalk.gray(`${figures.arrowRight} Filtering Content-Types based upon arguments\n`));
     }
-    const contentTypes = results.filter(data => {
+    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)) &&
@@ -217,8 +248,8 @@ async function getContentTypes(client, args, pageSize = 100, allowSystem = false
     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
+        all: allContentTypes,
+        contentTypes: contentTypes
     };
 }
 
@@ -232,6 +263,8 @@ const stylesBuilder = yargs => {
     return newArgs;
 };
 async function getStyles(client, args, pageSize = 100) {
+    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)
@@ -272,11 +305,21 @@ async function getStyles(client, args, pageSize = 100) {
                 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 (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;
+        }
         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;
         }
+        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;
+        }
         return true;
     });
     if (cfg.debug)
@@ -321,7 +364,12 @@ const StylesListCommand = {
     command: "styles:list",
     describe: "List Visual Builder style definitions from the CMS",
     handler: async (args) => {
-        const { all: results } = await getStyles(createCmsClient(args), { ...args, excludeBaseTypes: [], excludeNodeTypes: [], excludeTemplates: [], excludeTypes: [], baseTypes: [], nodes: [], templates: [], types: [], templateTypes: [] });
+        const client = createCmsClient(args);
+        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
+            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
+            return;
+        }
+        const { all: results } = await getStyles(client, { ...args, excludeBaseTypes: [], excludeNodeTypes: [], excludeTemplates: [], excludeTypes: [], baseTypes: [], nodes: [], templates: [], types: [], templateTypes: [], all: false });
         const styles = new Table({
             head: [
                 chalk.yellow(chalk.bold("Name")),
@@ -357,8 +405,13 @@ const StylesPullCommand = {
     handler: async (args) => {
         const { _config: cfg, components: basePath, force, definitions } = parseArgs(args);
         const client = createCmsClient(args);
+        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
+            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
+            return;
+        }
         const { styles: filteredResults } = await getStyles(client, args);
         //#region Create & Write opti-style.json files
+        process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating .opti-style.json files\n`));
         const typeFiles = {};
         const updatedTemplates = (await Promise.all(filteredResults.map(async (displayTemplate) => {
             let itemPath = undefined;
@@ -384,18 +437,28 @@ const StylesPullCommand = {
                 fs.mkdirSync(itemPath, { recursive: true });
             // Write Style JSON
             const filePath = path.join(itemPath, `${displayTemplate.key}.opti-style.json`);
+            const outputTemplate = { ...displayTemplate };
+            if (outputTemplate.createdBy)
+                delete outputTemplate.createdBy;
+            if (outputTemplate.lastModifiedBy)
+                delete outputTemplate.lastModifiedBy;
             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;
                 }
+                else {
+                    if (cfg.debug) {
+                        process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting style file for ${displayTemplate.key}\n`));
+                    }
+                    fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
+                }
+            }
+            else {
                 if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting style file for ${displayTemplate.key}\n`));
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Creating style file for ${displayTemplate.key} in ${filePath}\n`));
+                fs.writeFileSync(filePath, JSON.stringify(outputTemplate, undefined, 2));
             }
-            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] = {
                     filePath: path.join(typesPath, 'displayTemplates.ts'),
@@ -408,6 +471,7 @@ const StylesPullCommand = {
         //#endregion
         //#region Create needed definition files
         if (definitions) {
+            process.stdout.write(chalk.gray(`${figures.arrowRight} Start creating displayTemplates.ts files\n`));
             for (const targetId of Object.getOwnPropertyNames(typeFiles)) {
                 const { filePath: typeFilePath, templates } = typeFiles[targetId];
                 if (fs.existsSync(typeFilePath)) {
@@ -417,12 +481,15 @@ const StylesPullCommand = {
                         continue;
                     }
                     if (cfg.debug)
-                        process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting definition file for ${targetId}\n`));
+                        process.stdout.write(chalk.gray(`${figures.arrowRight} Overwriting definition file for ${targetId} - ${typeFilePath}\n`));
                 }
                 else if (cfg.debug)
-                    process.stdout.write(chalk.gray(`${figures.arrowRight} Creating definition file for ${targetId}\n`));
+                    process.stdout.write(chalk.gray(`${figures.arrowRight} Creating definition file for ${targetId} - ${typeFilePath}\n`));
                 // Write Style definition
-                const imports = ['import type { LayoutProps } from "@remkoj/optimizely-cms-react/components"', 'import type { ReactNode } from "react"'];
+                const imports = [
+                    'import type { LayoutProps } from "@remkoj/optimizely-cms-react"',
+                    'import type { ReactNode } from "react"'
+                ];
                 const typeContents = [];
                 const props = [];
                 let typeId = targetId.split('/', 2)[1];
@@ -430,9 +497,9 @@ const StylesPullCommand = {
                     const importPath = path.relative(path.dirname(typeFilePath), displayTemplateFile).replaceAll('\\', '/');
                     imports.push(`import type ${displayTemplate.key}Styles from "./${importPath}"`);
                     typeContents.push(`export type ${displayTemplate.key}Props = LayoutProps<typeof ${displayTemplate.key}Styles>`);
-                    typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, any> = Record<string, any>> = {
-    data: DT
-    layoutProps: ${displayTemplate.key}Props | undefined
+                    typeContents.push(`export type ${displayTemplate.key}ComponentProps<DT extends Record<string, any> = Record<string, any>> = {
+    data: DT
+    layoutProps: ${displayTemplate.key}Props | undefined
 } & JSX.IntrinsicElements['div']`);
                     typeContents.push(`export type ${displayTemplate.key}Component<DT extends Record<string, any> = Record<string, any>> = (props: ${displayTemplate.key}ComponentProps<DT>) => ReactNode`);
                     typeContents.push('');
@@ -443,13 +510,25 @@ const StylesPullCommand = {
                 if (typeId) {
                     typeId = ucFirst$1(typeId);
                     typeContents.push('');
-                    typeContents.push(`export type ${typeId}LayoutProps = ${props.join(' | ')}
-export type ${typeId}ComponentProps<DT extends Record<string, any> = Record<string, any>, LP extends ${typeId}LayoutProps = ${typeId}LayoutProps> = {
-    data: DT
-    layoutProps: LP | undefined
-} & JSX.IntrinsicElements['div']
-
-export type ${typeId}Component<DT extends Record<string, any> = Record<string, any>, LP extends ${typeId}LayoutProps = ${typeId}LayoutProps> = (props: ${typeId}ComponentProps<DT,LP>) => ReactNode`);
+                    typeContents.push(`export type ${typeId}LayoutProps = ${props.join(' | ')}
+export type ${typeId}ComponentProps<DT extends Record<string, any> = Record<string, any>, LP extends ${typeId}LayoutProps = ${typeId}LayoutProps> = {
+    data: DT
+    layoutProps: LP | undefined
+} & JSX.IntrinsicElements['div']
+
+export type ${typeId}Component<DT extends Record<string, any> = Record<string, any>, LP extends ${typeId}LayoutProps = ${typeId}LayoutProps> = (props: ${typeId}ComponentProps<DT,LP>) => ReactNode
+
+export function isDefaultProps(props?: ${typeId}LayoutProps | null) : props is ${templates.filter(t => t.data.isDefault).at(0)?.data?.key}Props
+{
+    return props?.template == "${templates.filter(t => t.data.isDefault).at(0)?.data?.key}"
+}`);
+                    templates.forEach(t => {
+                        typeContents.push(`
+export function is${t.data.key}Props(props?: ${typeId}LayoutProps | null) : props is ${t.data.key}Props
+{
+    return props?.template == "${t.data.key}"
+}`);
+                    });
                 }
                 fs.writeFileSync(typeFilePath, imports.join("\n") + "\n\n" + typeContents.join("\n"));
             }
@@ -474,12 +553,16 @@ const StylesCreateCommand = {
     handler: async (args) => {
         const { components: basePath } = parseArgs(args);
         const client = createCmsClient(args);
+        if (client.runtimeCmsVersion == OptiCmsVersion.CMS12) {
+            process.stdout.write(chalk.gray(`${figures.cross} Styles are not supported on CMS12\n`));
+            return;
+        }
         const allowedBaseTypes = ['section', 'element'];
         // 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: [] }),
-            getStyles(client, { ...args, excludeBaseTypes: [], excludeNodeTypes: [], excludeTemplates: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], nodes: [], components: '', templates: [], templateTypes: [] })
+            getContentTypes(client, { ...args, excludeBaseTypes: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], all: false }),
+            getStyles(client, { ...args, excludeBaseTypes: [], excludeNodeTypes: [], excludeTemplates: [], excludeTypes: [], baseTypes: allowedBaseTypes, types: [], nodes: [], components: '', templates: [], templateTypes: [], all: false })
         ]);
         const styleKeys = styles.map(x => x.key);
         // Define the configuration
@@ -562,9 +645,18 @@ const TypesPullCommand = {
                     process.stdout.write(chalk.yellow(`${figures.cross} Skipping type definition for ${contentType.displayName} (${contentType.key}) - File already exists\n`));
                 return contentType.key;
             }
+            const outContentType = { ...contentType };
+            if (outContentType.source || outContentType.source == "")
+                delete outContentType.source;
+            if (outContentType.features)
+                delete outContentType.features;
+            if (outContentType.usage)
+                delete outContentType.usage;
+            if (outContentType.lastModifiedBy)
+                delete outContentType.lastModifiedBy;
             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));
+            fs.writeFileSync(typeFile, JSON.stringify(outContentType, undefined, 2));
             return contentType.key;
         }).filter(x => x);
         process.stdout.write(chalk.green(chalk.bold(`${figures.tick} Created/updated type definitions for ${updatedTypes.join(', ')}\n`)));
@@ -603,7 +695,20 @@ const TypesPushCommand = {
         // Output selected types
         const results = await Promise.all(typeDefinitions.map(type => {
             process.stdout.write(chalk.yellowBright(`  ${figures.arrowRight} Pushing ${type.definition.displayName} from ${type.file}\n`));
-            return client.contentTypes.contentTypesPut(type.definition.key, type.definition, force)
+            const outType = { ...type.definition };
+            if (outType.source || outType.source == "")
+                delete outType.source;
+            if (outType.created || outType.created == "")
+                delete outType.created;
+            if (outType.lastModified || outType.lastModified == "")
+                delete outType.lastModified;
+            if (outType.lastModifiedBy || outType.lastModifiedBy == "")
+                delete outType.lastModifiedBy;
+            if (outType.features)
+                delete outType.features;
+            if (outType.usage)
+                delete outType.usage;
+            return client.contentTypes.contentTypesPut(outType.key, outType, force)
                 .then(ct => { return { key: type.definition.key, type: ct, file: type.file }; })
                 .catch(e => { return { key: type.definition.key, type: type.definition, file: type.file, error: e }; });
         }));
@@ -660,21 +765,27 @@ function getTypeFolder(list, type) {
     return list.filter(x => x.type == type).at(0)?.path;
 }
 
+/**
+ * Keep track of all generated properties
+ */
+let generatedProps = [];
 const NextJsQueriesCommand = {
     command: "nextjs:fragments",
     describe: "Create the GrapQL Fragments for a Next.JS / Optimizely Graph structure",
     builder,
     handler: async (args, opts) => {
+        generatedProps = [];
         // Prepare
         const { loadedContentTypes, createdTypeFolders } = opts || {};
         const { components: basePath, _config: { debug }, force } = parseArgs(args);
-        const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(createCmsClient(args), args);
+        const client = createCmsClient(args);
+        const { contentTypes, all: allContentTypes } = loadedContentTypes ?? await getContentTypes(client, args);
         // Start process
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Generating GraphQL fragments for ${contentTypes.map(x => x.key).join(', ')}\n`));
         const typeFolders = createdTypeFolders ?? createTypeFolders(contentTypes, basePath, debug);
         const updatedTypes = contentTypes.map(contentType => {
             const typePath = getTypeFolder(typeFolders, contentType.key);
-            return createGraphFragments(contentType, typePath, basePath, force, debug, allContentTypes);
+            return createGraphFragments(contentType, typePath, basePath, force, debug, allContentTypes, client.runtimeCmsVersion == OptiCmsVersion.CMS12);
         }).filter(x => x).flat();
         // Report outcome
         if (updatedTypes.length > 0)
@@ -683,9 +794,10 @@ const NextJsQueriesCommand = {
             process.stdout.write(chalk.yellowBright(`${figures.arrowRight} No GraphQL fragments created/updated\n`));
         if (!opts)
             process.stdout.write(chalk.green(chalk.bold(figures.tick + " Done")) + "\n");
+        generatedProps = [];
     }
 };
-function createGraphFragments(contentType, typePath, basePath, force, debug, contentTypes) {
+function createGraphFragments(contentType, typePath, basePath, force, debug, contentTypes, forCms12 = false) {
     const returnValue = [];
     const baseType = contentType.baseType ?? 'default';
     const baseQueryFile = path.join(typePath, `${contentType.key}.${baseType}.graphql`);
@@ -703,7 +815,7 @@ function createGraphFragments(contentType, typePath, basePath, force, debug, con
     else if (debug) {
         process.stdout.write(chalk.gray(`${figures.arrowRight} Creating ${contentType.displayName} (${contentType.key}) base fragment\n`));
     }
-    const { fragment, propertyTypes } = createInitialFragment(contentType);
+    const { fragment, propertyTypes } = createInitialFragment(contentType, false, undefined, forCms12);
     fs.writeFileSync(baseQueryFile, fragment);
     returnValue.push(contentType.key);
     let dependencies = Array.isArray(propertyTypes) ? [...propertyTypes] : [];
@@ -715,14 +827,15 @@ function createGraphFragments(contentType, typePath, basePath, force, debug, con
                 console.warn(`🟠 The content type ${dep[0]} has been referenced, but is not found in the Optimizely CMS instance`);
                 return;
             }
-            const propertyFragmentFile = path.join(basePath, propContentType.baseType ?? 'default', propContentType.key, `${propContentType.key}.property.graphql`);
+            const fullTypeName = forCms12 ? contentType.key + propContentType.key : propContentType.key;
+            const propertyFragmentFile = path.join(basePath, propContentType.baseType, propContentType.key, `${fullTypeName}.property.graphql`);
             const propertyFragmentDir = path.dirname(propertyFragmentFile);
             if (!fs.existsSync(propertyFragmentDir))
                 fs.mkdirSync(propertyFragmentDir, { recursive: true });
             if (!fs.existsSync(propertyFragmentFile) || force) {
                 if (debug)
                     process.stdout.write(chalk.gray(`${figures.arrowRight} Writing ${propContentType.displayName} (${propContentType.key}) property fragment\n`));
-                const propContentTypeInfo = createInitialFragment(propContentType, true);
+                const propContentTypeInfo = createInitialFragment(propContentType, true, contentType, forCms12);
                 fs.writeFileSync(propertyFragmentFile, propContentTypeInfo.fragment);
                 returnValue.push(propContentType.key);
                 if (Array.isArray(propContentTypeInfo.propertyTypes))
@@ -733,7 +846,7 @@ function createGraphFragments(contentType, typePath, basePath, force, debug, con
     }
     return returnValue.length > 0 ? returnValue : undefined;
 }
-function createInitialFragment(contentType, forProperty = false) {
+function createInitialFragment(contentType, forProperty = false, forBaseType, forCms12 = false) {
     const propertyTypes = [];
     const fragmentFields = [];
     const typeProps = contentType.properties ?? {};
@@ -741,60 +854,109 @@ function createInitialFragment(contentType, forProperty = false) {
         // Exclude system properties, which are not present in Optimizely Graph
         if (['experience', 'section'].includes(contentType.baseType) && ['AdditionalData', 'UnstructuredData', 'Layout'].includes(propKey))
             return;
+        // Exclude CMS 12 System Properties
+        if (forCms12 && ['Categories'].includes(propKey))
+            return;
+        const propType = typeProps[propKey].type;
+        const isConflict = generatedProps.some(x => x.propName == propKey && x.propType != propType);
+        const propName = isConflict ? `${contentType.key}${propKey}: ${propKey}` : propKey;
         // Write the property
-        switch (typeProps[propKey].type) {
-            case "array":
+        switch (propType) {
+            case IntegrationApi.PropertyDataType.ARRAY:
                 switch (typeProps[propKey].items.type) {
+                    case "integer":
+                        if (typeProps[propKey].format == 'categorization')
+                            fragmentFields.push(`${propName} { Id, Name, Description }`);
+                        else
+                            fragmentFields.push(propName);
+                        break;
+                    case "string":
+                        fragmentFields.push(propName);
+                        break;
                     case "content":
                         if (contentType.baseType == 'page' || contentType.baseType == 'experience')
-                            fragmentFields.push(`${propKey} { ...BlockData }`);
+                            fragmentFields.push(`${propName} { ...${forCms12 ? 'PageIContentListItem' : 'BlockData'} }`);
                         else
-                            fragmentFields.push(`${propKey} { ...IContentListItem }`);
+                            fragmentFields.push(`${propName} { ...IContentListItem }`);
                         break;
                     case "component":
                         const componentType = typeProps[propKey].items.contentType;
                         switch (componentType) {
                             case 'link':
-                                fragmentFields.push(`${propKey} { ...LinkItemData }`);
+                                fragmentFields.push(`${propName} { ...LinkItemData }`);
                                 break;
                             default:
-                                fragmentFields.push(`${propKey} { ...${componentType}Data }`);
+                                fragmentFields.push(`${propName} { ...${componentType}Data }`);
                                 break;
                         }
                         break;
+                    case "contentReference":
+                        fragmentFields.push(`${propName} { ...ReferenceData }`);
+                        break;
                     default:
-                        fragmentFields.push(`${propKey} { __typename }`);
+                        fragmentFields.push(`${propName} { __typename }`);
                         break;
                 }
                 break;
-            case "string":
-                if (typeProps[propKey].format == "html")
-                    fragmentFields.push(`${propKey} { json, html }`);
-                else
-                    fragmentFields.push(propKey);
+            case IntegrationApi.PropertyDataType.STRING: {
+                const propDetails = typeProps[propKey];
+                switch (propDetails.format ?? "") {
+                    case 'html':
+                        fragmentFields.push(forCms12 ? `${propName} { Structure, Html }` : `${propName} { json, html }`);
+                        break;
+                    case 'shortString':
+                    case 'selectOne':
+                    case '':
+                        fragmentFields.push(propName);
+                        break;
+                    default:
+                        if (!isConflict)
+                            console.warn(chalk.redBright(`❗ Unsupported string format "${propDetails.format}" for ${contentType.key}.${propKey}; add it manually to the fragment if you need to access this field`));
+                        break;
+                }
                 break;
-            case "url":
-                fragmentFields.push(`${propKey} { ...LinkData }`);
+            }
+            case IntegrationApi.PropertyDataType.URL:
+                fragmentFields.push(forCms12 ? propName : `${propName} { ...LinkData }`);
                 break;
-            case "contentReference":
-                fragmentFields.push(`${propKey} { ...ReferenceData }`);
+            case IntegrationApi.PropertyDataType.CONTENT_REFERENCE:
+                fragmentFields.push(`${propName} { ...ReferenceData }`);
                 break;
-            case "component":
+            case IntegrationApi.PropertyDataType.COMPONENT: {
                 const componentType = typeProps[propKey].contentType;
-                fragmentFields.push(`${propKey} { ...${componentType}PropertyData }`);
-                propertyTypes.push([componentType, true]);
+                if (forCms12 && componentType == "link") {
+                    fragmentFields.push(`${propName} { ...LinkItemData }`);
+                }
+                else {
+                    const componentFragmentName = forCms12 ? contentType.key + componentType : componentType + 'Property';
+                    fragmentFields.push(`${propName} { ...${componentFragmentName}Data }`);
+                    propertyTypes.push([componentType, true]);
+                }
+                break;
+            }
+            case IntegrationApi.PropertyDataType.BINARY:
+                fragmentFields.push(`${propName} { ...BinaryData }`);
                 break;
             default:
-                fragmentFields.push(propKey);
+                fragmentFields.push(propName);
                 break;
         }
+        generatedProps.push({
+            propType: typeProps[propKey].type,
+            propName: propKey
+        });
     });
     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' : ''} {
-  ${fragmentFields.join("\n  ")}
+    if (fragmentFields.length == 0) {
+        if (forCms12)
+            fragmentFields.push('empty: _metadata: ContentLink { key: GuidValue }');
+        else
+            fragmentFields.push('empty: _metadata { key }');
+    }
+    const fragmentTarget = forProperty ? (forCms12 ? (forBaseType?.key ?? '') + contentType.key : contentType.key + 'Property') : contentType.key;
+    const tpl = `fragment ${fragmentTarget}Data on ${fragmentTarget} {
+  ${fragmentFields.join("\n  ")}
 }`;
     return {
         fragment: tpl,
@@ -889,84 +1051,84 @@ function getDisplayTemplateInfo$1(contentType, typePath) {
 }
 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]
-
+    default: (contentType, varName, displayTemplate, baseDisplayTemplate) => `import { type 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?.replaceAll("'", "\\'") ?? ''}'
+    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 {}
-}
-
+    page: (contentType, varName, displayTemplate) => `import { type OptimizelyNextPage as CmsComponent } from "@remkoj/optimizely-cms-nextjs";
+import { ${contentType.key}DataFragmentDoc, type ${contentType.key}DataFragment } from "@/gql/graphql";${displayTemplate ? `
+import { ${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?.replaceAll("'", "\\'") ?? ''}'
+    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 {}
-}
-
+    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 { 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 = getFragmentData(CompositionDataFragmentDoc, getFragmentData(ExperienceDataFragmentDoc, data)?.composition)
+    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}`
 };
 
@@ -1010,15 +1172,14 @@ function createSpecificNode(template, templatePath, force = false, debug = false
     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>);
-}
-
+    const component = `import { extractSettings, type CmsLayoutComponent } from "@remkoj/optimizely-cms-react/rsc";${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);
 }
@@ -1035,17 +1196,16 @@ function createGenericNode(basePath, force, debug) {
     }
     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>
-}
-
+    const nodeContent = `import { CmsEditable, type CmsLayoutComponent } 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);
 }
@@ -1080,6 +1240,10 @@ const NextJsFactoryCommand = {
         entries.forEach((e, i) => {
             if (isImportInfoList(e) && typeof e.prefix == 'string')
                 switch (e.prefix) {
+                    case "Video":
+                    case "Image":
+                        entries[i].prefix = ["Media", e.prefix, "Component"];
+                        break;
                     case "Experience":
                         entries[i].prefix = [e.prefix, "Page"];
                         break;
@@ -1233,34 +1397,34 @@ function processTypeListFolder(baseType, baseTypePath, force = false, debug = fa
 }
 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
+    const factoryContent = `// Auto generated dictionary
+import { type 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;
-}` : ''}
+        `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;
 }
@@ -1299,8 +1463,7 @@ const CmsVersionCommand = {
     command: "cms:version",
     describe: "Get the CMS Version information",
     handler: async (args) => {
-        const { _config: cfg } = parseArgs(args);
-        const client = createClient(cfg);
+        const client = createCmsClient(args);
         process.stdout.write(chalk.yellowBright(`${figures.arrowRight} Reading version information Optimizely CMS\n`));
         const versionInfo = await client.getInstanceInfo();
         const info = new Table({
@@ -1337,7 +1500,7 @@ const commands = [
     CmsVersionCommand
 ];
 
-var version = "2.0.4";
+var version = "3.0.0";
 var name = "opti-cms";
 var APP = {
 	version: version,