clean up empty template strings from vdom tree

dlants · Dec 14, 2024 · 97b8518 · 97b8518
1 parent d5e6620
commit 97b8518
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 4 deletions.
diff --git a/rplugin/node/magenta/src/tea/render.spec.ts b/rplugin/node/magenta/src/tea/render.spec.ts
@@ -354,4 +354,182 @@ third line`;
       },
     );
   });
+
+  await test("rendering empty array", async () => {
+    const view = ({ arr }: { arr: string[] }) => d`${arr.map((c) => d`${c}`)}`;
+    const mountedView = await mountView({
+      view,
+      props: { arr: [] },
+      mount: {
+        nvim,
+        buffer,
+        startPos: { row: 0, col: 0 },
+        endPos: { row: 0, col: 0 },
+      },
+    });
+
+    const lines = await buffer.getLines({
+      start: 0,
+      end: 1,
+      strictIndexing: false,
+    });
+
+    assert.equal(lines[0], "");
+
+    assert.deepStrictEqual(
+      await extractMountTree(mountedView._getMountedNode()),
+      {
+        type: "node",
+        startPos: {
+          row: 0,
+          col: 0,
+        },
+        endPos: {
+          row: 0,
+          col: 0,
+        },
+        children: [
+          {
+            children: [],
+            endPos: {
+              col: 0,
+              row: 0,
+            },
+            startPos: {
+              col: 0,
+              row: 0,
+            },
+            type: "array",
+          },
+        ],
+      },
+    );
+  });
+
+  await test.only("rendering array", async () => {
+    const view = ({ arr }: { arr: string[] }) => d`${arr.map((c) => d`${c}`)}`;
+    const mountedView = await mountView({
+      view,
+      props: { arr: ["1", "\n", "2"] },
+      mount: {
+        nvim,
+        buffer,
+        startPos: { row: 0, col: 0 },
+        endPos: { row: 0, col: 0 },
+      },
+    });
+
+    const lines = await buffer.getLines({
+      start: 0,
+      end: 2,
+      strictIndexing: false,
+    });
+
+    assert.deepStrictEqual(lines, ["1", "2"]);
+
+    assert.deepStrictEqual(
+      await extractMountTree(mountedView._getMountedNode()),
+      {
+        type: "node",
+        children: [
+          {
+            type: "array",
+            children: [
+              {
+                type: "node",
+                children: [
+                  {
+                    type: "string",
+                    content: "1",
+                    startPos: {
+                      row: 0,
+                      col: 0,
+                    },
+                    endPos: {
+                      row: 0,
+                      col: 1,
+                    },
+                  },
+                ],
+                startPos: {
+                  row: 0,
+                  col: 0,
+                },
+                endPos: {
+                  row: 0,
+                  col: 1,
+                },
+              },
+              {
+                type: "node",
+                children: [
+                  {
+                    type: "string",
+                    content: "\n",
+                    startPos: {
+                      row: 0,
+                      col: 1,
+                    },
+                    endPos: {
+                      row: 1,
+                      col: 0,
+                    },
+                  },
+                ],
+                startPos: {
+                  row: 0,
+                  col: 1,
+                },
+                endPos: {
+                  row: 1,
+                  col: 0,
+                },
+              },
+              {
+                type: "node",
+                children: [
+                  {
+                    type: "string",
+                    content: "2",
+                    startPos: {
+                      row: 1,
+                      col: 0,
+                    },
+                    endPos: {
+                      row: 1,
+                      col: 1,
+                    },
+                  },
+                ],
+                startPos: {
+                  row: 1,
+                  col: 0,
+                },
+                endPos: {
+                  row: 1,
+                  col: 1,
+                },
+              },
+            ],
+            startPos: {
+              row: 0,
+              col: 0,
+            },
+            endPos: {
+              row: 1,
+              col: 1,
+            },
+          },
+        ],
+        startPos: {
+          row: 0,
+          col: 0,
+        },
+        endPos: {
+          row: 1,
+          col: 1,
+        },
+      },
+    );
+  });
 });
diff --git a/rplugin/node/magenta/src/tea/view.ts b/rplugin/node/magenta/src/tea/view.ts
@@ -92,8 +92,10 @@ export function d(
   template: TemplateStringsArray,
   ...values: (VDOMNode[] | VDOMNode | string)[]
 ): VDOMNode {
-  const children: VDOMNode[] = [{ type: "string", content: template[0] }];
-
+  const children: VDOMNode[] = [];
+  if (template[0].length) {
+    children.push({ type: "string", content: template[0] });
+  }
   for (let i = 0; i < values.length; i++) {
     if (typeof values[i] == "string") {
       children.push({ type: "string", content: values[i] as string });
@@ -102,7 +104,9 @@ export function d(
     } else {
       children.push(values[i] as VDOMNode);
     }
-    children.push({ type: "string", content: template[i + 1] });
+    if (template[i + 1].length > 0) {
+      children.push({ type: "string", content: template[i + 1] });
+    }
   }
 
   return { type: "node", children: children, template: template };

diff --git a/rplugin/node/magenta/test/preamble.ts b/rplugin/node/magenta/test/preamble.ts
@@ -64,7 +64,12 @@ export function extractMountTree(mounted: MountedVDOM): unknown {
       };
 
     case "array":
-      return mounted;
+      return {
+        type: "array",
+        children: mounted.children.map(extractMountTree),
+        startPos: mounted.startPos,
+        endPos: mounted.endPos,
+      };
 
     default:
       assertUnreachable(mounted);