fix(transformer): stop unnecessary calls to list recursor on empty ne…

…sted items array

build/transforms.d.ts

@@ -29,13 +29,13 @@ export declare type block = {
         items?: Array<string> | Array<ListItem>;
         style?: string;
         code?: string;
-        service?: "vimeo" | "youtube";
+        service?: 'vimeo' | 'youtube';
         source?: string;
         embed?: string;
         width?: number;
         height?: number;
-        alignment?: "left" | "right" | "center" | "justify";
-        align?: "left" | "right" | "center" | "justify";
+        alignment?: 'left' | 'right' | 'center' | 'justify';
+        align?: 'left' | 'right' | 'center' | 'justify';
     };
 };
 declare const transforms: transforms;

src/transforms.ts

@@ -15,7 +15,7 @@ type ListItem = {
   items: Array<ListItem>;
 };
 
-const alignType = ["left", "right", "center", "justify"]
+const alignType = ['left', 'right', 'center', 'justify'];
 
 export type block = {
   type: string;
@@ -33,13 +33,13 @@ export type block = {
     items?: Array<string> | Array<ListItem>;
     style?: string;
     code?: string;
-    service?: "vimeo" | "youtube";
+    service?: 'vimeo' | 'youtube';
     source?: string;
     embed?: string;
     width?: number;
     height?: number;
-    alignment?: "left" | "right" | "center" | "justify";
-    align?: "left" | "right" | "center" | "justify";
+    alignment?: 'left' | 'right' | 'center' | 'justify';
+    align?: 'left' | 'right' | 'center' | 'justify';
   };
 };
 
@@ -55,33 +55,36 @@ const transforms: transforms = {
   paragraph: ({ data }) => {
     const paragraphAlign = data.alignment || data.align;
 
-    if (typeof paragraphAlign !== 'undefined' && alignType.includes(paragraphAlign)) {
+    if (
+      typeof paragraphAlign !== 'undefined' &&
+      alignType.includes(paragraphAlign)
+    ) {
       return `<p style="text-align:${paragraphAlign};">${data.text}</p>`;
     } else {
-      return `<p>${data.text}</p>`
+      return `<p>${data.text}</p>`;
     }
   },
 
   list: ({ data }) => {
-    const listStyle = data.style === "unordered" ? "ul" : "ol";
+    const listStyle = data.style === 'unordered' ? 'ul' : 'ol';
 
     const recursor = (items: any, listStyle: string) => {
       const list = items.map((item: any) => {
         if (!item.content && !item.items) return `<li>${item}</li>`;
 
-        let list = "";
-        if (item.items) list = recursor(item.items, listStyle);
+        let list = '';
+        if (item.items.length) list = recursor(item.items, listStyle);
         if (item.content) return `<li> ${item.content} ${list} </li>`;
       });
 
-      return `<${listStyle}>${list.join("")}</${listStyle}>`;
+      return `<${listStyle}>${list.join('')}</${listStyle}>`;
     };
 
     return recursor(data.items, listStyle);
   },
 
   image: ({ data }) => {
-    let caption = data.caption ? data.caption : "Image";
+    let caption = data.caption ? data.caption : 'Image';
     return `<img src="${
       data.file && data.file.url ? data.file.url : data.url
     }" alt="${caption}" />`;
@@ -97,13 +100,13 @@ const transforms: transforms = {
 
   embed: ({ data }) => {
     switch (data.service) {
-      case "vimeo":
+      case 'vimeo':
         return `<iframe src="${data.embed}" height="${data.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`;
-      case "youtube":
+      case 'youtube':
         return `<iframe width="${data.width}" height="${data.height}" src="${data.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
       default:
         throw new Error(
-          "Only Youtube and Vime Embeds are supported right now."
+          'Only Youtube and Vime Embeds are supported right now.'
         );
     }
   },