fix: Allow to move sandbox between arrays with existence binder

Author: finom

src/array/_processrendering/renderitemnode.js

@@ -58,7 +58,7 @@ export default function renderItemNode({
                 // moving sandbox does not fire "render" event but it fire "afterrender"
                 // since "afterrender" means "node is inserted to DOM"
                 return {
-                    node,
+                    node: node.__matreshkaReplacedByNode || node,
                     itemEventOptions: {
                         node,
                         self: item,
@@ -106,8 +106,8 @@ export default function renderItemNode({
         throw matreshkaError('array:rendered_number_nodes', { length: parsed.length });
     }
 
-    let node = renderedInArrays[selfId] = parsed[0];
-    node = node.__matreshkaReplacedByNode || node;
+    const node = renderedInArrays[selfId] = parsed[0];
+
 
     if (bindRenderedAsSandbox) {
         if (forceRerender) {
@@ -137,8 +137,8 @@ export default function renderItemNode({
 
         triggerOne(item, 'render', itemEventOptions);
 
-        return { node, itemEventOptions };
+        return { node: node.__matreshkaReplacedByNode || node, itemEventOptions };
     }
 
-    return { node };
+    return { node: node.__matreshkaReplacedByNode || node };
 }

test/spec/bindings/existence_binder_spec.js

@@ -137,4 +137,43 @@ describe('Existence binder', () => {
             Array.from(arr.nodes.sandbox.childNodes).map(({ nodeName }) => nodeName)
         ).toEqual(['#comment', 'DIV', 'DIV', '#comment', 'DIV']);
     });
+
+    it('allows to move sandbox across arrays', () => {
+        class Arr extends MatreshkaArray {
+            constructor(...args) {
+                super(...args)
+                    .bindNode('sandbox', '<div data-foo="bar"></div>');
+            }
+        }
+
+        const arr = new Arr();
+        const arr2 = new Arr();
+        const obj = { exists: true }; // eslint-disable-line no-shadow
+        arr.itemRenderer = arr2.itemRenderer = '<div><span></span></div>';
+
+        arr.push(obj);
+        const arrItemNode = arr.nodes.sandbox.childNodes[0];
+        expect(arrItemNode.nodeName).toEqual('DIV');
+
+        bindNode(obj, 'exists', ':sandbox', existence(), noDebounceFlag);
+        obj.exists = false;
+
+        const replacedBy = arr.nodes.sandbox.childNodes[0];
+
+        expect(replacedBy.nodeName).toEqual('#comment');
+
+        arr2.push_(obj, {
+            moveSandbox: true
+        });
+
+        expect(
+            arr2.nodes.sandbox.childNodes[0]
+        ).toEqual(replacedBy);
+
+        obj.exists = true;
+
+        expect(
+            arr2.nodes.sandbox.childNodes[0]
+        ).toEqual(arrItemNode);
+    });
 });