Merge pull request #27 from contentstack/modular-block-enhancement

Enhanced modular blocks to generate separate interface

Author: praveen-mohan-cs

README.md

@@ -123,38 +123,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 */
@@ -166,6 +135,27 @@ 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;
+  };
+}
 ```
 
 #### 2. `graphqlTS()` (Available only for NodeJS)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentstack/types-generator",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Contentstack type definition generation library",
   "private": false,
   "author": "Contentstack",
@@ -42,7 +42,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@contentstack/delivery-sdk": "^4.0.5",
+    "@contentstack/delivery-sdk": "^4.1.0",
     "@gql2ts/from-schema": "^2.0.0-4",
     "axios": "^1.7.4",
     "lodash": "^4.17.21",

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 },
@@ -233,6 +234,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) + ":",
@@ -260,7 +263,8 @@ export default function (userOptions: TSGenOptions) {
   function visit_content_type(
     contentType: ContentstackTypes.ContentType | ContentstackTypes.GlobalField
   ) {
-    return [
+    modularBlockInterfaces.clear();
+    const contentTypeInterface = [
       options.docgen.interface(contentType.description),
       define_interface(contentType, options.systemFields),
       "{",
@@ -271,29 +275,34 @@ export default function (userOptions: TSGenOptions) {
     ]
       .filter((v) => v)
       .join("\n");
-  }
 
-  function visit_modular_block(
-    field: ContentstackTypes.Field,
-    block: ContentstackTypes.Block
-  ) {
-    return (
-      "{" +
-      [
-        block.uid + ":",
-        block.reference_to
-          ? name_type(block.reference_to as string) + ";"
-          : "{" + visit_fields(block.schema || []) + "};",
-      ].join(" ") +
-      visit_block_names(field, block) +
-      "}"
-    );
+    return [...modularBlockInterfaces, contentTypeInterface].join("\n\n");
   }
 
-  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) {

src/generateTS/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[]  ;
       }"
     `);
   });