fix: edge-cases when using labels with typed lists (#4)

Author: jsaari97

kitchen-sink.yml

@@ -265,13 +265,18 @@ collections: # A list of collections the CMS should be able to edit
               - { label: "Select", name: "select", widget: "select", options: ["a", "b", "c"] }
               - { label: "Datetime", name: "datetime", widget: "datetime" }
               - { label: "Markdown", name: "markdown", widget: "markdown" }
-          - label: "Type 3 Object"
+          - label: "type 3 Object"
             name: "type_3_object"
             widget: "object"
             fields:
               - { label: "Date", name: "date", widget: "date" }
               - { label: "Image", name: "image", widget: "image" }
               - { label: "File", name: "file", widget: "file" }
+          - label: "type_4_object"
+            name: "type_4_object"
+            widget: "object"
+            fields:
+              - { label: "Name", name: "name", widget: "string" }
       - label: "Code block"
         name: "code"
         widget: "code"

src/__snapshots__/generate.spec.ts.snap

@@ -151,6 +151,11 @@ export interface kitchenSink_typed_list_type_3_object {
   file: any;
 }
 
+export interface kitchenSink_typed_list_type_4_object {
+  type: \\"type_4_object\\";
+  name: string;
+}
+
 export interface kitchenSink_code {
   code: string;
   lang: string;
@@ -181,7 +186,7 @@ export interface kitchenSink {
   hidden: any;
   object: kitchenSink_object;
   list: kitchenSink_list[];
-  typed_list: (kitchenSink_typed_list_type_1_object | kitchenSink_typed_list_type_2_object | kitchenSink_typed_list_type_3_object)[];
+  typed_list: (kitchenSink_typed_list_type_1_object | kitchenSink_typed_list_type_2_object | kitchenSink_typed_list_type_3_object | kitchenSink_typed_list_type_4_object)[];
   code: kitchenSink_code;
   code_alt: kitchenSink_code_alt;
   snippet: string;
@@ -311,18 +316,19 @@ export interface KitchenSink_List {
   object: KitchenSink_List_Object;
 }
 
-export interface KitchenSink_TypedList_Type1Object {
-  string: string;
-  boolean: boolean;
-  text: string;
-}
-
 export interface KitchenSink_TypedList_Type2Object_NestedObject {
   number: string;
 }
 
 export type KitchenSink_TypedList_Type2Object_Select_options = \\"a\\" | \\"b\\" | \\"c\\";
 
+export interface KitchenSink_TypedList_Type1Object {
+  type: \\"type_1_object\\";
+  string: string;
+  boolean: boolean;
+  text: string;
+}
+
 export interface KitchenSink_TypedList_Type2Object {
   type: \\"type_2_object\\";
   number: string;
@@ -332,13 +338,18 @@ export interface KitchenSink_TypedList_Type2Object {
   markdown: string;
 }
 
-export interface KitchenSink_TypedList_Type3Object {
+export interface KitchenSink_TypedList_type3Object {
   type: \\"type_3_object\\";
   date: string;
   image: string;
   file: any;
 }
 
+export interface KitchenSink_TypedList_type_4_object {
+  type: \\"type_4_object\\";
+  name: string;
+}
+
 export interface KitchenSink_CodeBlock {
   code: string;
   lang: string;
@@ -369,7 +380,7 @@ export interface KitchenSink {
   hidden: any;
   object: KitchenSink_Object;
   list: KitchenSink_List[];
-  typed_list: (KitchenSink_TypedList_Type1Object | KitchenSink_TypedList_Type2Object | KitchenSink_TypedList_Type3Object)[];
+  typed_list: (KitchenSink_TypedList_Type1Object | KitchenSink_TypedList_Type2Object | KitchenSink_TypedList_type3Object | KitchenSink_TypedList_type_4_object)[];
   code: KitchenSink_CodeBlock;
   code_alt: KitchenSink_CodeAltBlock;
   snippet: string;

src/widget/transform.spec.ts

@@ -317,7 +317,7 @@ describe("Widget transformation", () => {
               [
                 "__typename",
                 {
-                  name: "one",
+                  name: "type_one",
                   required: true,
                   multiple: false,
                   type: [
@@ -341,9 +341,9 @@ describe("Widget transformation", () => {
           { prefix: "parent" },
         ),
       ).toEqual([
-        ["list: (parent_list_one | parent_list_two)[];"],
+        ["list: (parent_list_type_one | parent_list_two)[];"],
         [
-          `interface parent_list_one { __typename: "one"; key: string; }`,
+          `interface parent_list_type_one { __typename: "type_one"; key: string; }`,
           `interface parent_list_two { __typename: "two"; id: number; }`,
         ],
       ]);
@@ -545,6 +545,55 @@ describe("Widget transformation", () => {
       ]);
     });
   });
+
+  it("should parse typed lists with labels", () => {
+    expect(
+      parse(
+        {
+          name: "list",
+          label: "my_list",
+          required: true,
+          multiple: true,
+          type: [
+            [
+              "__typename",
+              {
+                name: "type_one",
+                label: "type one",
+                required: true,
+                multiple: false,
+                type: [
+                  {
+                    name: "key",
+                    singularLabel: "my key",
+                    type: "string",
+                    required: true,
+                    multiple: false,
+                  },
+                ],
+              },
+              {
+                name: "two",
+                label: "type_two",
+                required: true,
+                multiple: false,
+                type: [
+                  { name: "id", singularLabel: "my_id", type: "number", required: true, multiple: false },
+                ],
+              },
+            ],
+          ],
+        },
+        { prefix: "parent", label: true },
+      ),
+    ).toEqual([
+      ["list: (parent_my_list_typeOne | parent_my_list_type_two)[];"],
+      [
+        `interface parent_my_list_typeOne { __typename: "type_one"; key: string; }`,
+        `interface parent_my_list_type_two { __typename: "two"; id: number; }`,
+      ],
+    ]);
+  });
 });
 
 describe("Nested list depth", () => {

src/widget/transform.ts

@@ -1,5 +1,10 @@
 import type { Widget } from "../types";
 
+export const getWidgetName = (widget: Widget, useLabel: boolean): string =>
+  useLabel
+    ? (widget.singularLabel || widget.label || widget.name).replace(/\s./gi, toCamelCase)
+    : widget.name;
+
 export const toCamelCase = (str: string): string => str.slice(1).toUpperCase();
 
 export const wrapEnum = (item: number | string): string =>
@@ -70,9 +75,7 @@ export const transformType =
     const required = !widget.required ? "?" : "";
     const multiple = widget.multiple ? "[]" : "";
 
-    const widgetName = label
-      ? (widget.singularLabel || widget.label || widget.name).replace(/\s./gi, toCamelCase)
-      : widget.name;
+    const widgetName = getWidgetName(widget, label);
 
     const name = prefix ? `${prefix}_${widgetName}` : widgetName;
 
@@ -144,15 +147,17 @@ export const transformType =
           transformType({ prefix: name, label }),
           empty,
         );
-        const typeNames = (objects as Widget[]).map((w) => w.name);
 
-        const pattern = new RegExp(`(${typeNames.map((w) => `${name}_${w}`).join("|")}) {`);
+        const pattern = new RegExp(
+          `(${(objects as Widget[]).map((w) => `${name}_${getWidgetName(w, label)}`).join("|")}) {`,
+        );
 
         // sort typed lists last and splice rest
         const rest = interfaces
           .sort(sortTypes(pattern))
           .splice(0, interfaces.length - names.length);
 
+        const typeNames = (objects as Widget[]).map((w) => w.name);
         const typeValues = zip(typeNames.map(wrapEnum));
 
         return [