sdc_client 0.57.11 → 0.57.12

package/src/simpleDomControl/sdc_view.js

@@ -1,4 +1,4 @@
-import {controllerFactory, runControlFlowFunctions, tagList} from "./sdc_controller.js";
+import {controllerFactory, runControlFlowFunctions} from "./sdc_controller.js";
 import {getUrlParam} from "./sdc_params.js";
 import {app} from "./sdc_main.js";
 import {trigger} from "./sdc_events.js";
@@ -23,7 +23,7 @@ export function cleanCache() {
  * doms and returns a list of objects containing also the tag name the dom and the tag
  * names of the super controller
  *
- * @param {jquery} $container - jQuery container
+ * @param {$} $container - jQuery container
  * @param {Array<string>} tagNameList - a string list with tag names.
  * @param {AbstractSDC} parentController - controller in surrounding
  * @return {Array} - a array of objects with all register tags found
@@ -338,38 +338,86 @@ function _reloadMethodHTML(controller, $dom) {
 }
 
 
-export function reconcile($virtualNode, $realNode, controller) {
-    // Step 1: Check node types (e.g., div vs span)
-    if ($virtualNode[0].nodeType !==  $realNode[0].nodeType ||
-        $virtualNode.prop("nodeName") !== $realNode.prop("nodeName")) {
-        $realNode.safeReplace($virtualNode);
-        return;
+function getNodeKey(node) {
+    if (node[0].nodeType === 3) {
+        return `TEXT__${node[0].nodeValue}`;
     }
-
-    if ($virtualNode[0].nodeType === 3) {
-        if ($virtualNode[0].nodeValue !== $realNode[0].nodeValue) {
-          $realNode[0].nodeValue = $virtualNode[0].nodeValue;
-        }
-        return;
+    const res = [node[0].tagName];
+    if (node[0].nodeName === 'INPUT') {
+        [['name', ''], ['type', 'text'], ['id', '']].forEach(([key, defaultValue]) => {
+            const attr = node.attr(key) ?? defaultValue;
+            if (attr) {
+                res.push(attr);
+            }
+        });
     }
+    return res.join('__');
+}
 
-    // Step 2: Compare attributes
-    syncAttributes($realNode, $virtualNode);
+function reconcileTree($element, id = [], parent = null) {
+    id.push(getNodeKey($element));
+    const obj = {
+        $element,
+        id: id.join('::'),
+        depth: id.length,
+        idx: 0,
+        op: null,
+        parent
+    };
+    return [obj].concat($element.contents().toArray().map((x) => reconcileTree($(x), id.slice(), obj)).flat());
 
-    // Step 3: Recurse children
-    const virtualChildren = $virtualNode.contents();
-    const realChildren = $realNode.contents();
+}
+
+
+export function reconcile($virtualNode, $realNode) {
+    const $old = reconcileTree($realNode);
+    const $new = reconcileTree($virtualNode);
+    $old.map((x, i) => x.idx = i);
+    $new.map((x, i) => x.idx = i);
+    const depth = Math.max(...$new.concat($old).map(x => x.depth));
+    const op_steps = lcbDiff($old, $new, depth);
+    let opIdx = 0;
+    let toRemove = [];
+
+    op_steps.forEach(op_step => {
+        const {op, $element, idx} = op_step;
+        if (op.type === 'keep_counterpart') {
+
+            if (op.counterpart.idx + opIdx !== idx) {
+                const elemBefore = op_step.getBefore();
+                if (!elemBefore) {
+                    op_step.getRealParent().$element.prepend(op.counterpart.$element);
+                } else {
+                    op.counterpart.$element.insertAfter(elemBefore.$element);
+                }
+            }
+
+            syncAttributes(op.counterpart.$element, $element);
+            if ($element.hasClass(CONTROLLER_CLASS)) {
+                $element.data(DATA_CONTROLLER_KEY).$container = op.counterpart.$element;
+                $element.data(DATA_CONTROLLER_KEY, null);
+            }
+
+            toRemove.push($element);
+
+        } else if (op.type === 'delete') {
+            $element.safeRemove();
+            opIdx--;
+        } else if (op.type === 'insert_ignore') {
+            opIdx++;
+        } else if (op.type === 'insert') {
+            opIdx++;
+            const {after, target} = op_step.op;
+            if (after) {
+                $element.insertAfter(after.$element);
+            } else if (target) {
+                target.$element.prepend($element);
+            }
 
-    const len = Math.max(virtualChildren.length, realChildren.length);
-    for (let i = 0; i < len; i++) {
-        if (i >= realChildren.length) {
-            $realNode.append($(virtualChildren[i]));
-        } else if (i >= virtualChildren.length) {
-            $(realChildren[i]).safeRemove();
-        } else {
-            reconcile($(virtualChildren[i]), $(realChildren[i]), controller);
         }
-    }
+    });
+
+    toRemove.forEach(($element) => $element.safeRemove());
 }
 
 function syncAttributes($real, $virtual) {
@@ -390,8 +438,92 @@ function syncAttributes($real, $virtual) {
     });
 
     Object.entries($virtual.data()).forEach(([key, value]) => {
-        if (key !== DATA_CONTROLLER_KEY) {
-            $real.data(key, value);
+        $real.data(key, value);
+    });
+}
+
+/**
+ * LCB (Longest Common Branch) finds matching branches and reserves them!
+ *
+ * @param oldNodes
+ * @param newNodes
+ * @param depth
+ * @returns {*|*[]}
+ */
+function lcbDiff(oldNodes, newNodes, depth) {
+    newNodes.filter(x => x.depth === depth && !x.op).forEach((newNode) => {
+        const oldNode = oldNodes.find((tempOldNode) => {
+            return !tempOldNode.op && tempOldNode.id === newNode.id;
+        });
+
+        if (oldNode) {
+            const keepTreeBranch = (oldNode, newNode) => {
+                oldNode.op = {type: 'keep', idx: newNode.idx};
+                newNode.op = {type: 'keep_counterpart', counterpart: oldNode};
+                oldNode = oldNode.parent;
+                if (!oldNode || oldNode.op) {
+                    return;
+                }
+                newNode = newNode.parent;
+                keepTreeBranch(oldNode, newNode);
+
+            }
+            keepTreeBranch(oldNode, newNode);
+        }
+    });
+    if (depth > 1) {
+        return lcbDiff(oldNodes, newNodes, depth - 1);
+    }
+
+    oldNodes.forEach((x, i) => {
+        if (!x.op) {
+            const idx = (oldNodes[i - 1]?.op.idx ?? -1) + 1;
+            x.op = {type: 'delete', idx}
+        }
+    });
+
+    function getRealParent(element) {
+        if (!element.parent) {
+            return null;
+        }
+        return element.parent.op.type === 'keep_counterpart' ? element.parent.op.counterpart : element.parent;
+    }
+
+    function getBefore(element, idx) {
+        const startDepth = element.depth;
+        while (idx >= 0 && element.depth >= startDepth) {
+            idx -= 1;
+            element = newNodes[idx];
+            if (element.depth === startDepth) {
+                return element.op.type === 'keep_counterpart' ? element.op.counterpart : element;
+            }
+        }
+
+        return null
+
+    }
+
+    newNodes.forEach((x, i) => {
+        x.getBefore = () => getBefore(x, i);
+        x.getRealParent = () => getRealParent(x);
+
+        if (!x.op) {
+            const target = x.getRealParent();
+            const type = target?.op.type === 'insert' ? 'insert_ignore' : 'insert';
+            x.op = {type, target, after: x.getBefore()}
         }
     });
+
+    const tagged = [
+        ...oldNodes,
+        ...newNodes,
+    ];
+
+
+    return tagged.sort((a, b) => {
+        const aVal = a.op?.idx ?? a.idx;
+        const bVal = b.op?.idx ?? b.idx;
+
+        return aVal - bVal;
+    });
 }

package/test/controller.test.js

@@ -9,49 +9,9 @@ import * as sdc_view from '../src/simpleDomControl/sdc_view.js';
 const app = sdc.app;
 
 import $ from 'jquery';
+import {TestCtr, TestCtrA} from "./utils.js";
 window.$ = $;
 
-const TestControllerInfo = {
-    name: 'TestCtr',
-    tag: 'test-ctr'
-};
-
-class TestCtr extends sdc.AbstractSDC {
-    constructor() {
-        super();
-        this.contentUrl = TestControllerInfo.name; //<test-ctr>
-        this.events.unshift({});
-        this.val = 0;
-        this.contentReload = true;
-    }
-
-    sayA() {
-        return 'A'
-    }
-
-    onInit() {}
-}
-
-class TestCtrA extends sdc.AbstractSDC {
-    constructor() {
-        super();
-        this.contentUrl = 'TestCtrA'; //<test-ctr-a>
-        this.events.unshift({});
-        this.val = 1;
-        this.val_2 = 2;
-    }
-
-    sayA() {
-        return 'B'
-    }
-
-    sayB() {
-        return 'B'
-    }
-
-    onInit() {}
-}
-
 describe('Controller', () => {
     let ajaxSpy;
     beforeEach(() => {

package/test/utils.js

@@ -0,0 +1,89 @@
+import {AbstractSDC} from "../src/index.js";
+
+
+export const TestControllerInfo = {
+    name: 'TestCtr',
+    tag: 'test-ctr'
+};
+
+export class TestCtr extends AbstractSDC {
+    constructor() {
+        super();
+        this.contentUrl = TestControllerInfo.name; //<test-ctr>
+        this.events.unshift({});
+        this.val = 0;
+        this.contentReload = true;
+    }
+
+    sayA() {
+        return 'A'
+    }
+
+    onInit() {
+    }
+}
+
+export class TestCtrA extends AbstractSDC {
+    constructor() {
+        super();
+        this.contentUrl = 'TestCtrA'; //<test-ctr-a>
+        this.events.unshift({});
+        this.val = 1;
+        this.val_2 = 2;
+    }
+
+    sayA() {
+        return 'B'
+    }
+
+    sayB() {
+        return 'B'
+    }
+
+    onInit() {
+    }
+}
+
+export class TestList extends AbstractSDC {
+    constructor() {
+        super();
+        this.contentUrl = 'TestCtrA'; //<test-ctr-a>
+        this.events.unshift({});
+        this.number = 0;
+    }
+
+    onInit(number = 10) {
+        this.number = number;
+    }
+
+    onLoad(html) {
+        $(html).append('<div><this.listview></this.listview></div>');
+        return super.onLoad(html);
+    }
+
+    listview() {
+        const listItems = [];
+        for (let i = 0; i < this.number; i++) {
+            listItems.push(`<test-item data-idx="${i}"></test-item>`);
+        }
+
+        return `<div>${listItems.join('\n')}</div>`;
+    }
+}
+
+export class TestItem extends AbstractSDC {
+    constructor() {
+        super();
+        this.contentUrl = 'TestCtrA'; //<test-item>
+        this.events.unshift({});
+    }
+
+    onInit(idx) {
+        this.idx = idx;
+    }
+
+    onLoad(html) {
+        $(html).append(`<input name="i_${this.idx}" />`);
+        return super.onLoad(html);
+    }
+}

package/test/view.test.js

@@ -0,0 +1,141 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {TestItem, TestList} from "./utils.js";
+import {reconcile} from "../src/simpleDomControl/sdc_view.js";
+import {app} from "../src/index.js";
+import $ from "jquery";
+
+window.$ = $;
+
+describe('Test reconcile', () => {
+
+    beforeAll(() => {
+        app.updateJquery();
+    });
+
+    test('Load Content', async () => {
+        const a = '<div>' +
+            '<h1>Test</h1>' +
+            '<ul>' +
+            '<li>B</li>' +
+            '<li><input name="TEST" /></li>' +
+            '<li>D</li>' +
+            '</ul>' +
+            '</div>';
+
+        const b = '<div class="class.1">' +
+            '<p>UPS</p>' +
+            '<p>UPS</p>' +
+            '<h1>Test 1</h1>' +
+            '<ul>' +
+            '<li>A</li>' +
+            '<li>A1 <input name="TEST" type="text"/></li>' +
+            '<li>B</li>' +
+            '<li><input name="TEST" type="text"/></li>' +
+            '<li>D</li>' +
+            '</ul>' +
+            '</div>';
+        const $b = $(b);
+        const $a = $(a);
+        const input_a = $a.find('[name=TEST]')[0]
+        reconcile($b, $a);
+        expect($a.html()).toBe($(b).html());
+        expect($a[0].className).toBe('class.1');
+        expect(input_a).toBe($a.find('[name=TEST]')[0]);
+
+    });
+
+    test('Load Content 2', async () => {
+        const a = '<div>' +
+            '<p>UPS</p>' +
+            '<p>UPS</p>' +
+            '<h1>Test</h1>' +
+            '<ul>' +
+            '<li>B</li>' +
+            '<li><input name="TEST" /></li>' +
+            '<li>D</li>' +
+            '</ul>' +
+            '</div>';
+
+        const b = '<div class="class.1">' +
+            '<h1>Test 1</h1>' +
+            '<ul>' +
+            '<li>A</li>' +
+            '<li>A1 <input name="TEST" type="text"/></li>' +
+            '<li>B</li>' +
+            '<li><input name="TEST" type="text"/></li>' +
+            '<li>D</li>' +
+            '</ul>' +
+            '</div>';
+        const $b = $(b);
+        const $a = $(a);
+        const input_a = $a.find('[name=TEST]')[0]
+        reconcile($b, $a);
+        expect($a.html()).toBe($(b).html());
+        expect($a[0].className).toBe('class.1');
+        expect(input_a).toBe($a.find('[name=TEST]')[0]);
+
+    });
+
+
+    test('Load Content Split', async () => {
+        const a = '<div>' +
+            '<ul>' +
+            '<li>X<input name="TEST" /></li>' +
+            '</ul>' +
+            '</div>';
+
+        const b = '<div class="class.1">' +
+            '<ul>' +
+            '<li>A1 <input name="TEST" type="text"/></li>' +
+            '<li>X</li>' +
+            '</ul>' +
+            '</div>';
+        const $b = $(b);
+        const $a = $(a);
+        const input_a = $a.find('[name=TEST]')[0]
+        reconcile($b, $a);
+        expect($a.html()).toBe($(b).html());
+        expect($a[0].className).toBe('class.1');
+        expect(input_a).toBe($a.find('[name=TEST]')[0]);
+
+    });
+});
+
+describe('Controller reconcile', () => {
+    let ajaxSpy;
+    beforeEach(async () => {
+        ajaxSpy = jest.spyOn($, 'ajax');
+        ajaxSpy.mockImplementation(() => {
+            return Promise.resolve('<div></div>');
+        });
+        app.register(TestList);
+        app.register(TestItem);
+        const $body = $('body');
+        const $ctr_div = $(document.createElement('test-list'));
+        $body.append($ctr_div);
+        await app.init_sdc();
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        $('body').safeEmpty();
+    });
+
+    test('Load Content Split', async () => {
+        const oldList = $('body').find('input').toArray();
+        const controller = app.getController($('body').children());
+        controller.number = 5;
+        await controller.refresh();
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+        const newList = $('body').find('input').toArray();
+        expect(newList.length).toBe(5);
+        newList.forEach((x, i) => {
+           expect(x).toBe(oldList[i]);
+        });
+
+
+    });
+});