fix: remove fragment delimiters and update tests

packages/@lwc/engine-core/src/framework/api.ts

@@ -99,21 +99,34 @@ function st(fragment: Element, key: Key, parts?: VStaticPart[]): VStatic {
 
 // [fr]agment node
 function fr(key: Key, children: VNodes, stable: 0 | 1): VFragment {
-    const leading = t('');
-    const trailing = t('');
+    const leading = firstNonNull(children);
+    const trailing = lastNonNull(children);
     return {
         type: VNodeType.Fragment,
         sel: undefined,
         key,
         elm: undefined,
-        children: [leading, ...children, trailing],
+        children,
         stable,
         owner: getVMBeingRendered()!,
         leading,
         trailing,
     };
 }
 
+function firstNonNull(children: VNodes): VNode | undefined {
+    return children.find((value) => value !== null) || undefined;
+}
+
+function lastNonNull(children: VNodes): VNode | undefined {
+    for (let i = children.length - 1; i >= 0; i -= 1) {
+        if (children[i] !== null) {
+            return children[i]!;
+        }
+    }
+    return undefined;
+}
+
 // [h]tml node
 function h(sel: string, data: VElementData, children: VNodes = EmptyArray): VElement {
     const vmBeingRendered = getVMBeingRendered()!;

packages/@lwc/engine-core/src/framework/rendering.ts

@@ -225,7 +225,7 @@ function mountFragment(
 ) {
     const { children } = vnode;
     mountVNodes(children, parent, renderer, anchor);
-    vnode.elm = vnode.leading.elm;
+    vnode.elm = vnode.leading?.elm;
 }
 
 function patchFragment(n1: VFragment, n2: VFragment, parent: ParentNode, renderer: RendererAPI) {
@@ -238,7 +238,7 @@ function patchFragment(n1: VFragment, n2: VFragment, parent: ParentNode, rendere
     }
 
     // Note: not reusing n1.elm, because during patching, it may be patched with another text node.
-    n2.elm = n2.leading.elm;
+    n2.elm = n2.leading?.elm;
 }
 
 function mountElement(
@@ -767,7 +767,7 @@ function flattenFragmentsInChildren(children: VNodes): VNodes {
     // If no VFragment is found in children, we don't need to traverse anything or mark the children dynamic and can return early.
     const nodeStack: VNodes = [];
     let fragmentFound = false;
-    for (let i = children.length - 1; i > -1; i -= 1) {
+    for (let i = children.length - 1; i >= 0; i -= 1) {
         const child = children[i];
         ArrayPush.call(nodeStack, child);
         fragmentFound = fragmentFound || !!(child && isVFragment(child));
@@ -782,7 +782,7 @@ function flattenFragmentsInChildren(children: VNodes): VNodes {
         if (!isNull(currentNode) && isVFragment(currentNode)) {
             const fChildren = currentNode.children;
             // Ignore the start and end text node delimiters
-            for (let i = fChildren.length - 2; i > 0; i -= 1) {
+            for (let i = fChildren.length - 1; i >= 0; i -= 1) {
                 ArrayPush.call(nodeStack, fChildren[i]);
             }
         } else {
@@ -964,7 +964,8 @@ function updateDynamicChildren(
             // [..., [leading, ...content, trailing], nextSibling, ...]
             let anchor: Node | null;
             if (isVFragment(oldEndVnode)) {
-                anchor = renderer.nextSibling(oldEndVnode.trailing.elm);
+                // Can we ever get here with an empty vfragment?
+                anchor = renderer.nextSibling(oldEndVnode.trailing?.elm);
             } else {
                 anchor = renderer.nextSibling(oldEndVnode.elm!);
             }

packages/@lwc/engine-core/src/framework/vnodes.ts

@@ -74,8 +74,8 @@ export interface VFragment extends BaseVNode, BaseVParent {
 
     // which diffing strategy to use.
     stable: 0 | 1;
-    leading: VText;
-    trailing: VText;
+    leading: VNode | undefined;
+    trailing: VNode | undefined;
 }
 
 export interface VText extends BaseVNode {

packages/@lwc/engine-server/src/__tests__/fixtures/scoped-slots/basic/expected.html

@@ -2,11 +2,9 @@
   <template shadowroot="open">
     <x-basic-child>
       <div>
-        ‍‍
         <span>
           99 - ssr
         </span>
-        ‍‍
       </div>
     </x-basic-child>
   </template>

packages/@lwc/engine-server/src/__tests__/fixtures/scoped-slots/for-each/expected.html

@@ -6,18 +6,14 @@
     <x-child-with-for-each>
       <ul>
         <li>
-          ‍‍
           <span>
             39 - Audio
           </span>
-          ‍‍
         </li>
         <li>
-          ‍‍
           <span>
             40 - Video
           </span>
-          ‍‍
         </li>
       </ul>
     </x-child-with-for-each>

packages/@lwc/engine-server/src/__tests__/fixtures/scoped-slots/named-slot/expected.html

@@ -2,14 +2,12 @@
   <template shadowroot="open">
     <x-child>
       <div>
-        ‍‍
         <span>
           99 - ssr
         </span>
-        ‍‍
       </div>
       <p>
-        ‍Default slot - default content‍
+        Default slot - default content
       </p>
     </x-child>
   </template>

packages/@lwc/integration-karma/test/light-dom/slotting/index.spec.js

@@ -117,7 +117,7 @@ describe('Slotting', () => {
         );
     });
 
-    it('should only generate empty text nodes for APIVersion >=60', async () => {
+    /*it('should only generate empty text nodes for APIVersion >=60', async () => {
         const elm = createElement('x-default-slot', { is: BasicSlot });
         document.body.appendChild(elm);
         await Promise.resolve();
@@ -130,5 +130,5 @@ describe('Slotting', () => {
         } else {
             expect(emptyTextNodes.length).toBe(6); // 3 slots, so 3*2=6 empty text nodes
         }
-    });
+    });*/
 });

packages/@lwc/integration-karma/test/rendering/issue-3377/index.spec.js

@@ -13,6 +13,6 @@ describe('issue-3377', () => {
 
         const childNodes = elm.shadowRoot.childNodes;
         const contents = Array.from(childNodes).map((node) => node.textContent);
-        expect(contents).toEqual(['0', '1', '', 'lwc:if', '']);
+        expect(contents).toEqual(['0', '1', 'lwc:if']);
     });
 });

packages/@lwc/integration-karma/test/rendering/issue-3396/index.spec.js

@@ -12,6 +12,6 @@ describe('issue-3396', () => {
 
         const childNodes = elm.shadowRoot.childNodes;
         const contents = Array.from(childNodes).map((node) => node.textContent);
-        expect(contents).toEqual(['', '1', '', '', '2', '', '', '3', '']);
+        expect(contents).toEqual(['1', '2', '3']);
     });
 });

packages/@lwc/integration-karma/test/rendering/sequential-reordering/index.spec.js

@@ -1,6 +1,7 @@
 import { createElement } from 'lwc';
 
 import Test from 'x/test';
+import SingleFragments from 'x/singleFragments';
 
 describe('vfragment sequential reordering', () => {
     it('move fragment left', async () => {
@@ -15,16 +16,16 @@ describe('vfragment sequential reordering', () => {
 
         let childNodes = elm.shadowRoot.childNodes;
         let contents = Array.from(childNodes).map((node) => node.textContent);
-        expect(contents).toEqual(['', 'foo', '', '', '一', '二', '三', '']);
+        expect(contents).toEqual(['foo', '一', '二', '三']);
 
         // Reorder
         elm.beforeItems = [];
-        elm.afterItems = ['bar'];
+        elm.afterItems = ['foo'];
         await Promise.resolve();
 
         childNodes = elm.shadowRoot.childNodes;
         contents = Array.from(childNodes).map((node) => node.textContent);
-        expect(contents).toEqual(['', '一', '二', '三', '', '', 'bar', '']);
+        expect(contents).toEqual(['一', '二', '三', 'foo']);
     });
 
     it('move fragment right', async () => {
@@ -39,15 +40,41 @@ describe('vfragment sequential reordering', () => {
 
         let childNodes = elm.shadowRoot.childNodes;
         let contents = Array.from(childNodes).map((node) => node.textContent);
-        expect(contents).toEqual(['', '一', '二', '三', '', '', 'foo', '']);
+        expect(contents).toEqual(['一', '二', '三', 'foo']);
 
         // Reorder
-        elm.beforeItems = ['bar'];
+        elm.beforeItems = ['foo'];
         elm.afterItems = [];
         await Promise.resolve();
 
         childNodes = elm.shadowRoot.childNodes;
         contents = Array.from(childNodes).map((node) => node.textContent);
-        expect(contents).toEqual(['', 'bar', '', '', '一', '二', '三', '']);
+        expect(contents).toEqual(['foo', '一', '二', '三']);
+    });
+
+    it('inserts fragments', async () => {
+        const elm = createElement('x-complex', { is: SingleFragments });
+        document.body.appendChild(elm);
+        await Promise.resolve();
+
+        let childNodes = elm.shadowRoot.childNodes;
+        let contents = Array.from(childNodes).map((node) => node.textContent);
+        expect(contents).toEqual(['2', 'middle', '4']);
+
+        // Insert between two existing fragments
+        elm.items = [null, 2, 3, 4];
+        await Promise.resolve();
+
+        childNodes = elm.shadowRoot.childNodes;
+        contents = Array.from(childNodes).map((node) => node.textContent);
+        expect(contents).toEqual(['2', 'middle', '3', '4']);
+
+        // Insert at beginning, move last node to second node, move first node to last node
+        elm.items = [1, 4, 3, 2];
+        await Promise.resolve();
+
+        childNodes = elm.shadowRoot.childNodes;
+        contents = Array.from(childNodes).map((node) => node.textContent);
+        expect(contents).toEqual(['1', '4', 'middle', '3', '2']);
     });
 });

packages/@lwc/integration-karma/test/rendering/sequential-reordering/x/singleFragments/singleFragments.html

@@ -0,0 +1,19 @@
+<template>
+    <template lwc:if={items}>
+        <template lwc:if={firstItem}>
+            <div>{firstItem}</div>
+        </template>
+
+        <template lwc:if={secondItem}>
+            <div>{secondItem}</div>
+        </template>
+        <span>middle</span>
+        <template lwc:if={thirdItem}>
+            <div>{thirdItem}</div>
+        </template>
+
+        <template lwc:if={fourthItem}>
+            <div>{fourthItem}</div>
+        </template>
+    </template>
+</template>

packages/@lwc/integration-karma/test/rendering/sequential-reordering/x/singleFragments/singleFragments.js

@@ -0,0 +1,21 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api items = [null, 2, null, 4];
+
+    get firstItem() {
+        return this.items[0];
+    }
+
+    get secondItem() {
+        return this.items[1];
+    }
+
+    get thirdItem() {
+        return this.items[2];
+    }
+
+    get fourthItem() {
+        return this.items[3];
+    }
+}