sdc_client 0.57.10 → 0.57.12

package/src/simpleDomControl/sdc_utils.js

@@ -56,6 +56,7 @@ export function tagNameToCamelCase(str) {
     str = str.replace(/-./g, letter => `${letter[1].toUpperCase()}`);
     return str;
 }
+
 export function tagNameToReadableName(str) {
     str = str.replace(/-./g, letter => ` ${letter[1].toUpperCase()}`).replace(/^./g, letter => `${letter.toUpperCase()}`);
     return str;
@@ -83,31 +84,42 @@ const copyProps = (targetClass, sourceClass) => {
 
 /**
  *
- * @param {AbstractSDC} baseClass
- * @param {AbstractSDC} mixins
+ * @param {typeof AbstractSDC} baseClass
+ * @param {typeof AbstractSDC} mixins
  * @returns {AbstractSDC}
  */
 export function agileAggregation(baseClass, ...mixins) {
 
-    let base = class _Combined {
-        constructor(..._args) {
-            let _mixins = {};
-            mixins.forEach((mixin) => {
-                let newMixin;
-                Object.assign(this, (newMixin = new mixin()));
-                newMixin._tagName = mixin.prototype._tagName;
-                newMixin._isMixin = true;
-                _mixins[mixin.name] = newMixin;
-            });
+    let base = {
+        [baseClass.name]: class {
+            constructor(..._args) {
+                let _mixins = {};
+                mixins.forEach((mixin) => {
+                    let newMixin;
+                    Object.assign(this, (newMixin = new mixin()));
+                    newMixin._tagName = mixin.prototype._tagName;
+                    newMixin._isMixin = true;
+                    _mixins[mixin.name] = newMixin;
+                });
+
+                Object.assign(this, new baseClass());
+                this._mixins = _mixins;
+            }
 
-            Object.assign(this, new baseClass());
-            this._mixins = _mixins;
-        }
 
-        get mixins() {
-            return this._mixins;
+            static get name() {
+                return baseClass.name;
+            }
+
+            static className() {
+                return this.name
+            }
+
+            get mixins() {
+                return this._mixins;
+            }
         }
-    };
+    }[baseClass.name];
 
     copyProps(base, baseClass);
 
@@ -141,7 +153,7 @@ export function uploadFileFormData(formData, url, method) {
         cache: false,
         contentType: false,
         processData: false,
-        beforeSend: function(xhr, settings) {
+        beforeSend: function (xhr, settings) {
             if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                 xhr.setRequestHeader("X-CSRFToken", window.CSRF_TOKEN);
             }
@@ -171,8 +183,8 @@ export function checkIfParamNumberBoolOrString(paramElement, controller = null)
         return paramElement;
     }
 
-    if(controller && typeof controller[paramElement] !== 'undefined') {
-        if(typeof controller[paramElement] === 'function') {
+    if (controller && typeof controller[paramElement] !== 'undefined') {
+        if (typeof controller[paramElement] === 'function') {
             return controller[paramElement].bind(controller);
         }
         return controller[paramElement];
@@ -213,7 +225,7 @@ export function clearErrorsInForm($form) {
 }
 
 export function setErrorsInForm($form, $resForm) {
-    $resForm  = $('<div>').append($resForm);
+    $resForm = $('<div>').append($resForm);
 
     $form.find('.has-error').removeClass('has-error').find('.alert-danger').safeRemove();
     $form.find('.non-field-errors').safeRemove();
@@ -233,4 +245,14 @@ export function setErrorsInForm($form, $resForm) {
     });
 
     return hasNoError;
-}
+}
+
+export function jqueryInsertAt($container, index, $newElement) {
+    let lastIndex = $container.children().size();
+    if (index < lastIndex) {
+        $container.children().eq(index).before($newElement);
+    } else {
+        $container.append($newElement);
+    }
+    return this;
+}

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
@@ -107,7 +107,7 @@ function loadHTMLFile(path, args, tag, hardReload) {
             const data = err.responseJSON;
             trigger('_RedirectOnView', data['url-link']);
         }
-        trigger('navLoaded', {'controller_name': ()=> err.status});
+        trigger('navLoaded', {'controller_name': () => err.status});
 
         throw `<sdc-error data-code="${err.status}">${err.responseText}</sdc-error>`;
     });
@@ -300,16 +300,17 @@ export function replaceTagElementsInContainer(tagList, $container, parentControl
     });
 }
 
-export function reloadMethodHTML(controller) {
-    return _reloadMethodHTML(controller, controller.$container)
+export function reloadMethodHTML(controller, $container) {
+    return _reloadMethodHTML(controller, $container ?? controller.$container)
 }
+
 function _reloadMethodHTML(controller, $dom) {
     const plist = [];
 
     $dom.find(`._bind_to_update_handler.sdc_uuid_${controller._uuid}`).each(function () {
         const $this = $(this);
         let result = undefined;
-        if($this.hasClass(`_with_handler`)) {
+        if ($this.hasClass(`_with_handler`)) {
             result = $this.data('handler');
         } else {
             let controller_handler = this.tagName.toLowerCase().replace(/^this./, '');
@@ -324,18 +325,205 @@ function _reloadMethodHTML(controller, $dom) {
         }
         if (result !== undefined) {
             plist.push(Promise.resolve(result).then((x) => {
-                const $new_content = $(`<div></div>`);
-                $new_content.append(x);
-                return replaceTagElementsInContainer(tagList(), $new_content, controller).then(()=> {
-                    return _reloadMethodHTML(controller, $new_content).then(()=> {
-                        $this.safeEmpty().text('').append(x);
-                        return true;
-                    });
-                });
+                let $newContent = $(`<div></div>`);
+                $newContent.append(x);
+                $newContent = $this.clone().empty().append($newContent);
+                return controller.reconcile($newContent, $this);
             }));
         }
 
     });
 
     return Promise.all(plist);
+}
+
+
+function getNodeKey(node) {
+    if (node[0].nodeType === 3) {
+        return `TEXT__${node[0].nodeValue}`;
+    }
+    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('__');
+}
+
+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());
+
+}
+
+
+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);
+            }
+
+        }
+    });
+
+    toRemove.forEach(($element) => $element.safeRemove());
+}
+
+function syncAttributes($real, $virtual) {
+    const realAttrs = $real[0].attributes ?? [];
+    const virtualAttrs = $virtual[0].attributes ?? [];
+    // Remove missing attrs
+    [...realAttrs].forEach(attr => {
+        if (!$virtual.is(`[${attr.name}]`)) {
+            $real.removeAttr(attr.name);
+        }
+    });
+
+    // Add or update
+    [...virtualAttrs].forEach(attr => {
+        if (!attr.name.startsWith(`data`) && $real.attr(attr.name) !== attr.value) {
+            $real.attr(attr.name, attr.value);
+        }
+    });
+
+    Object.entries($virtual.data()).forEach(([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]);
+        });
+
+
+    });
+});