feat: generate separate interface for modular blocks

Author: aman19K

MIGRATION.md

@@ -0,0 +1,51 @@
+## Migrating from v2 to v3
+This migration document details the changes needed to separate nested modular blocks into distinct interfaces. This update will impact how modular blocks are represented and utilized throughout the codebase.
+
+## Before Example
+export interface Test {
+  /** Version */
+  _version?: 2;
+  /** Title */
+  title: string;
+  /** Modular Blocks */
+  modular_blocks?: {
+    test: {
+      /** Multi Line Textbox */
+      multi_line?: string;
+      /** Rich Text Editor */
+      rich_text_editor?: string;
+      /** Modular Blocks1 */
+      modular_blocks1?: {
+        test1: {
+          /** Multi Line Textbox */
+          multi_line?: string;
+        };
+      }[];
+    };
+  }[];
+}
+
+
+## After
+export interface Test {
+  /** Version */
+  _version: 2;
+  /** Title */
+  title: string;
+  /** Modular Blocks */
+  modular_blocks?: ModularBlocks[];
+}
+
+export interface ModularBlocks {
+  /** Multi Line Textbox */
+  multi_line?: string;
+  /** Rich Text Editor */
+  rich_text_editor?: string;
+  /** Modular Blocks1 */
+  modular_blocks1?: ModularBlocks1[];
+}
+
+export interface ModularBlocks1 {
+  /** Multi Line Textbox */
+  multi_line?: string;
+}

README.md

@@ -11,6 +11,9 @@ This plugin generates TypeScript typings from Content Types. Interfaces and fiel
 $ csdx plugins:install contentstack-cli-tsgen
 ```
 
+## Migration
+See the V3 [Migration Guide](https://github.com/contentstack/contentstack-cli-tsgen/blob/master/MIGRATION.md) if you are migrating from v2 or older.
+
 ## How to use this plugin
 
 `$ csdx tsgen`
@@ -92,38 +95,7 @@ interface BuiltinExample {
   /** Single Choice */
   single_choice: "Choice 1" | "Choice 2" | "Choice 3";
   /** Modular Blocks */
-  modular_blocks?: (
-    | {
-        block_1: {
-          /** Number */ 
-          number?: number;
-          /** Single line textbox */
-          single_line?: string;
-        };
-        block_2: undefined;
-        seo_gf: undefined;
-      }
-    | {
-        block_2: {
-          /** Boolean */ 
-          boolean?: boolean;
-          /** Date */
-          date?: string;
-        };
-        block_1: undefined;
-        seo_gf: undefined;
-      }
-    | {
-        seo_gf: {
-          /** Keywords */ 
-          keywords?: string;
-          /** Description */
-          description?: string;
-        };
-        block_1: undefined;
-        block_2: undefined;
-      }
-  )[];
+  modular_blocks?:ModularBlocks[];
   /** Number */
   number?: number;
   /** Link */
@@ -135,4 +107,25 @@ interface BuiltinExample {
   /** Date */
   date?: string;
 }
+
+interface ModularBlocks {
+  block_1: {
+    /** Number */
+    number?: number;
+    /** Single line textbox */
+    single_line?: string;
+  };
+  block_2: {
+    /** Boolean */
+    boolean?: boolean;
+    /** Date */
+    date?: string;
+  };
+  seo_gf: {
+    /** Keywords */
+    keywords?: string;
+    /** Description */
+    description?: string;
+  };
+}
 ```

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "contentstack-cli-tsgen",
   "description": "Generate TypeScript typings from a Stack.",
-  "version": "2.3.2",
+  "version": "3.0.0",
   "author": "Michael Davis",
   "bugs": "https://github.com/Contentstack-Solutions/contentstack-cli-tsgen/issues",
   "dependencies": {

package.json

@@ -65,6 +65,7 @@ export default function (userOptions: TSGenOptions) {
   const visitedGlobalFields = new Set<string>()
   const visitedContentTypes = new Set<string>()
   const cachedGlobalFields: GlobalFieldCache = {}
+  const modularBlockInterfaces = new Set<string>()
 
   const typeMap: TypeMap = {
     text: {func: type_text, track: true, flag: TypeFlags.BuiltinJS},
@@ -215,6 +216,8 @@ export default function (userOptions: TSGenOptions) {
       if (field.multiple) {
         fieldType += "[]";
       }
+    }else if (field.data_type === 'blocks') {
+      fieldType = type_modular_blocks(field);
     }
     return [
       field.uid + op_required(field.mandatory) + ':',
@@ -235,7 +238,7 @@ export default function (userOptions: TSGenOptions) {
   function visit_content_type(
     contentType: ContentstackTypes.ContentType | ContentstackTypes.GlobalField
   ) {
-    return [
+    const contentTypeInterface = [
       options.docgen.interface(contentType.description),
       define_interface(contentType, options.systemFields),
       '{',
@@ -246,8 +249,10 @@ export default function (userOptions: TSGenOptions) {
     ]
     .filter(v => v)
     .join('\n')
-  }
 
+    return [...modularBlockInterfaces, contentTypeInterface].join('\n\n');
+  }
+  
   function visit_modular_block(
     field: ContentstackTypes.Field,
     block: ContentstackTypes.Block
@@ -260,11 +265,29 @@ export default function (userOptions: TSGenOptions) {
     )
   }
 
-  function type_modular_blocks(field: ContentstackTypes.Field) {
-    return op_paren(
-      field.blocks.map(block => visit_modular_block(field, block)).join(' | ')
-    )
+  function type_modular_blocks(field: ContentstackTypes.Field): string {
+      const blockInterfaceName = name_type(field.uid);
+      const blockInterfaces = field.blocks.map((block) => {
+        const fieldType = block.reference_to && cachedGlobalFields[name_type(block.reference_to)]
+          ? name_type(block.reference_to)
+          : visit_fields(block.schema || []);
+          
+        const schema = block.reference_to ? `${fieldType};` : `{\n ${fieldType} }`;
+        return `${block.uid}: ${schema}`;
+      });
+    
+      const modularInterface = [
+        `export interface ${blockInterfaceName} {`,
+        blockInterfaces.join('\n'),
+        '}',
+      ].join('\n');
+    
+      // Store or track the generated block interface for later use
+      modularBlockInterfaces.add(modularInterface);
+      
+      return field.multiple ? `${blockInterfaceName}[]` : blockInterfaceName;
   }
+  
 
   function type_group(field: ContentstackTypes.Field) {
     return ['{', visit_fields(field.schema), '}'].filter(v => v).join('\n')

src/lib/tsgen/factory.ts

@@ -18,20 +18,26 @@ describe("modular blocks", () => {
 
   test("definition", () => {
     expect(result.definition).toMatchInlineSnapshot(`
-      "export interface ModularBlocks
+      "export interface ModularBlocks {
+      string_block: {
+       single_line?: string  ;
+      multi_line?: string  ;
+      markdown?: string  ;
+      rich_text_editor?: string  ; }
+      string_block_with_options: {
+       single_line_textbox_required: string  ;
+      single_line_textbox_multiple?: string[]  ; }
+      boolean_block: {
+       boolean?: boolean  ; }
+      }
+
+      export interface ModularBlocks
       {
       /** Version */
       _version:  2 ;
       title: string  ;
       url: string  ;
-      modular_blocks?: ({string_block: {single_line?: string  ;
-      multi_line?: string  ;
-      markdown?: string  ;
-      rich_text_editor?: string  ;};string_block_with_options: undefined;
-      boolean_block: undefined;} | {string_block_with_options: {single_line_textbox_required: string  ;
-      single_line_textbox_multiple?: string[]  ;};string_block: undefined;
-      boolean_block: undefined;} | {boolean_block: {boolean?: boolean  ;};string_block: undefined;
-      string_block_with_options: undefined;})[]  ;
+      modular_blocks?: ModularBlocks[]  ;
       }"
     `);
   });