perf(DeltaUpdates): Enable insertNodeBatch for StringBasedRenderer (#8618)

Author: tobiu

src/main/DeltaUpdates.mjs

@@ -413,31 +413,52 @@ class DeltaUpdates extends Base {
                 allPostMountUpdates = [];
 
             batch.forEach(delta => {
-                const postMountUpdates = delta.postMountUpdates || [];
-
-                const node = render.DomApiRenderer.createDomTree({
-                    index           : -1,
-                    isRoot          : true,
-                    parentNode      : null, // detached
-                    postMountUpdates,
-                    vnode           : delta.vnode
-                });
+                let localPostMountUpdates = delta.postMountUpdates || [],
+                    node;
+
+                if (NeoConfig.useDomApiRenderer) {
+                    node = render.DomApiRenderer.createDomTree({
+                        index           : -1,
+                        isRoot          : true,
+                        parentNode      : null, // detached
+                        postMountUpdates: localPostMountUpdates,
+                        vnode           : delta.vnode
+                    })
+                } else {
+                    node = render.StringBasedRenderer.createNode({outerHTML: delta.outerHTML})
+                }
 
                 if (node) {
                     fragment.appendChild(node);
-                    allPostMountUpdates.push(...postMountUpdates);
+                    if (localPostMountUpdates.length > 0) {
+                        allPostMountUpdates.push(...localPostMountUpdates)
+                    }
                 } else {
-                    console.error('insertNodeBatch: Failed to create node', delta.vnode);
+                    console.error('insertNodeBatch: Failed to create node', delta);
                 }
             });
 
             parentNode.insertBefore(fragment, siblingRef || null);
 
             // Apply all post-mount updates (e.g. scroll positions) after the batch insertion
-            allPostMountUpdates.forEach(({node, vnode}) => {
-                if (vnode.scrollLeft) {node.scrollLeft = vnode.scrollLeft}
-                if (vnode.scrollTop)  {node.scrollTop  = vnode.scrollTop}
-            })
+            if (allPostMountUpdates.length > 0) {
+                allPostMountUpdates.forEach(update => {
+                    // DomApiRenderer format: {node, vnode}
+                    if (update.node) {
+                        if (update.vnode.scrollLeft) {update.node.scrollLeft = update.vnode.scrollLeft}
+                        if (update.vnode.scrollTop)  {update.node.scrollTop  = update.vnode.scrollTop}
+                    }
+                    // StringBasedRenderer format: {id, scrollLeft, scrollTop}
+                    else {
+                        let node = DomAccess.getElement(update.id);
+
+                        if (node) {
+                            if (update.scrollLeft) {node.scrollLeft = update.scrollLeft}
+                            if (update.scrollTop)  {node.scrollTop  = update.scrollTop}
+                        }
+                    }
+                })
+            }
         } else {
             console.error('insertNodeBatch: Parent not found', {parentId, index});
         }
@@ -839,7 +860,7 @@ class DeltaUpdates extends Base {
             const delta = deltas[i];
 
             // Batching optimization for sequential insertNode operations
-            if (NeoConfig.useDomApiRenderer && delta.action === 'insertNode' && i < len - 1) {
+            if (delta.action === 'insertNode' && i < len - 1) {
                 let j     = i + 1,
                     batch = [delta];
 

test/playwright/component/container/FragmentDeltaUpdates.spec.mjs

@@ -183,6 +183,59 @@ test.describe('Neo.main.DeltaUpdates (Fragment Support)', () => {
         expect(result.order).toBe(true);
     });
 
+    test('Manual Fragment Batch Insert Update (StringBasedRenderer)', async ({page}) => {
+        await page.evaluate(async () => {
+            Neo.config.useDomApiRenderer = false; 
+            await Neo.main.DeltaUpdates.importRenderer();
+
+            const root = document.getElementById('component-test-viewport');
+            root.innerHTML = '';
+            
+            const start = document.createComment(' frag-sb-start ');
+            root.appendChild(start);
+            
+            const end = document.createComment(' frag-sb-end ');
+            root.appendChild(end);
+        });
+        
+        await page.evaluate(async () => {
+            Neo.main.DeltaUpdates.update({
+                deltas: [{
+                    action: 'insertNode',
+                    parentId: 'frag-sb',
+                    index: 0,
+                    outerHTML: '<div id="child-sb-1">Child SB 1</div>'
+                }, {
+                    action: 'insertNode',
+                    parentId: 'frag-sb',
+                    index: 1,
+                    outerHTML: '<div id="child-sb-2">Child SB 2</div>'
+                }]
+            });
+        });
+
+        const result = await page.evaluate(() => {
+            const item1 = document.getElementById('child-sb-1');
+            const item2 = document.getElementById('child-sb-2');
+            const start = document.evaluate(`//comment()[contains(., ' frag-sb-start ')]`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+            const end = document.evaluate(`//comment()[contains(., ' frag-sb-end ')]`, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+            
+            if (!item1 || !item2) return { exists: false };
+
+            const startBefore1 = (start.compareDocumentPosition(item1) & Node.DOCUMENT_POSITION_FOLLOWING);
+            const item1Before2 = (item1.compareDocumentPosition(item2) & Node.DOCUMENT_POSITION_FOLLOWING);
+            const item2BeforeEnd = (item2.compareDocumentPosition(end) & Node.DOCUMENT_POSITION_FOLLOWING);
+            
+            return {
+                exists: true,
+                order: !!(startBefore1 && item1Before2 && item2BeforeEnd)
+            };
+        });
+        
+        expect(result.exists).toBe(true);
+        expect(result.order).toBe(true);
+    });
+
     test('Standard DOM Forward Move (Same Parent)', async ({page}) => {
         await page.evaluate(() => {
             const root = document.getElementById('component-test-viewport');