From c346ea902f432806d21ca4eed5597f3a69a2f6c0 Mon Sep 17 00:00:00 2001
From: Seva Zaikov <seva.zaikov@gmail.com>
Date: Fri, 17 Jul 2026 09:06:28 -0700
Subject: [PATCH] fix nested fragments not flattening

---
 integration-tests/fragment.test.ts | 29 ++++++++++++++++++
 src/_utils.ts                      | 49 ++++++++----------------------
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/integration-tests/fragment.test.ts b/integration-tests/fragment.test.ts
index c8c6362..3aa53c3 100644
--- a/integration-tests/fragment.test.ts
+++ b/integration-tests/fragment.test.ts
@@ -81,6 +81,35 @@ describe("<Fragment>", () => {
     );
   });
 
+  test("flattens nested <Fragment> components recursively", () => {
+    function App() {
+      return createElement("main", {
+        "data-testid": "container",
+        children: [
+          "before",
+          createElement(Fragment, {
+            children: [
+              createElement("span", { children: "outer" }),
+              createElement(Fragment, {
+                children: createElement("b", { children: "inner" }),
+              }),
+            ],
+          }),
+          "after",
+        ],
+      });
+    }
+
+    cleanup = attachComponent({
+      htmlElement: document.body,
+      component: createElement(App),
+    });
+
+    expect(screen.getByTestId("container").innerHTML).toBe(
+      "before<span>outer</span><b>inner</b>after",
+    );
+  });
+
   test("supports updating children in <Fragment> components correctly", async () => {
     const user = userEvent.setup();
     function App() {
diff --git a/src/_utils.ts b/src/_utils.ts
index 986e6b4..6f4ce2b 100644
--- a/src/_utils.ts
+++ b/src/_utils.ts
@@ -157,43 +157,18 @@ function insertNode({
     let lastInsertedNode: HTMLElement | Text | null = null;
 
     (velesElement as ExecutedVelesElement).childComponents.forEach((childComponentofPhantom) => {
-      if ("executedVelesNode" in childComponentofPhantom) {
-        if (lastInsertedNode) {
-          lastInsertedNode.after(childComponentofPhantom.html);
-        } else {
-          if (adjacentNode) {
-            adjacentNode.after(childComponentofPhantom.html);
-          } else {
-            parentVelesElement.html.prepend(childComponentofPhantom.html);
-          }
-        }
-        childComponentofPhantom.parentVelesElement = parentVelesElement;
-        lastInsertedNode = childComponentofPhantom.html;
-      } else if ("executedVelesStringElement" in childComponentofPhantom) {
-        if (lastInsertedNode) {
-          lastInsertedNode.after(childComponentofPhantom.html);
-        } else {
-          if (adjacentNode) {
-            adjacentNode.after(childComponentofPhantom.html);
-          } else {
-            parentVelesElement.html.prepend(childComponentofPhantom.html);
-          }
-        }
-        childComponentofPhantom.parentVelesElement = parentVelesElement;
-        lastInsertedNode = childComponentofPhantom.html;
-      } else {
-        const executedNode = getExecutedComponentVelesNode(childComponentofPhantom);
-        if (lastInsertedNode) {
-          lastInsertedNode.after(executedNode.html);
-        } else {
-          if (adjacentNode) {
-            adjacentNode.after(executedNode.html);
-          } else {
-            parentVelesElement.html.prepend(executedNode.html);
-          }
-        }
-        executedNode.parentVelesElement = parentVelesElement;
-        lastInsertedNode = executedNode.html;
+      const executedNode =
+        "executedVelesComponent" in childComponentofPhantom
+          ? getExecutedComponentVelesNode(childComponentofPhantom)
+          : childComponentofPhantom;
+      const lastInsertedChildNode = insertNode({
+        velesElement: executedNode,
+        adjacentNode: lastInsertedNode ?? adjacentNode,
+        parentVelesElement,
+      });
+
+      if (lastInsertedChildNode) {
+        lastInsertedNode = lastInsertedChildNode;
       }
     });
     velesElement.parentVelesElement = parentVelesElement;