native-document 1.0.13 → 1.0.15

package/src/elements/control/for-each-array.js

@@ -0,0 +1,280 @@
+import Anchor from "../anchor";
+import {Observable} from "../../data/Observable";
+import Validator from "../../utils/validator";
+import {createTextNode} from "../../wrappers/HtmlElementWrapper";
+import DebugManager from "../../utils/debug-manager";
+import {getKey} from "../../utils/helpers";
+
+export function ForEachArray(data, callback, key, configs = {}) {
+    const element = new Anchor('ForEach Array');
+    const blockEnd = element.endElement();
+    const blockStart = element.startElement();
+
+    let cache = new Map();
+    let nodeCacheByElement = new WeakMap();
+    let lastNumberOfItems = 0;
+
+    const keysCache = new WeakMap();
+
+    const clear = () => {
+        element.removeChildren();
+        cleanCache();
+        lastNumberOfItems = 0;
+    };
+    const getItemKey = (item, indexKey) => {
+        if(keysCache.has(item)) {
+            return keysCache.get(item);
+        }
+        return getKey(item, indexKey, key);
+    }
+
+    const updateIndexObservers = (items, startFrom = 0) => {
+        if(callback.length < 2) {
+            return;
+        }
+        let index = startFrom;
+        for(let i = startFrom, length = items?.length; i < length; i++) {
+            const cacheItem = cache.get(getItemKey(items[i], i));
+            if(!cacheItem) {
+                continue;
+            }
+            cacheItem.indexObserver?.deref()?.set(index);
+            index++;
+        }
+    };
+
+    const removeCacheItem = (cacheItem, removeChild = true) => {
+        if(!cacheItem) {
+            return;
+        }
+        const child = cacheItem.child?.deref();
+        cacheItem.indexObserver?.deref()?.cleanup();
+        cacheItem.child = null;
+        cacheItem.indexObserver = null;
+        nodeCacheByElement.delete(cacheItem.item);
+        keysCache.delete(cacheItem.item);
+        cacheItem.item = null;
+        if(removeChild) {
+            child?.remove();
+            cache.delete(cacheItem.keyId);
+        }
+    }
+
+    const removeCacheItemByKey = (keyId, removeChild = true) => {
+        removeCacheItem(cache.get(keyId), removeChild);
+    };
+
+    const cleanCache = () => {
+        for (const [keyId, cacheItem] of cache.entries()) {
+            removeCacheItem(cacheItem, false);
+        }
+        cache.clear();
+    }
+
+    const buildItem = (item, indexKey) => {
+        const keyId = getItemKey(item, indexKey);
+
+        if(cache.has(keyId)) {
+            const cacheItem = cache.get(keyId);
+            cacheItem.indexObserver?.deref()?.set(indexKey);
+            cacheItem.isNew = false;
+            const child = cacheItem.child?.deref();
+            if(child) {
+                return child;
+            }
+            cache.delete(keyId);
+        }
+
+        try {
+            const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
+            let child = callback(item, indexObserver);
+            if(Validator.isStringOrObservable(child)) {
+                child = createTextNode(child);
+            }
+            cache.set(keyId, {
+                keyId,
+                isNew: true,
+                item,
+                child: new WeakRef(child),
+                indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
+            });
+            keysCache.set(item, keyId);
+            if(Validator.isObject(item)) {
+                nodeCacheByElement.set(item, child);
+            }
+            return child;
+        } catch (e) {
+            DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
+            throw e;
+        }
+    };
+    const getChildByKey = function(keyId, fragment) {
+        const cacheItem = cache.get(keyId);
+        if(!cacheItem) {
+            return null;
+        }
+        const child = cacheItem.child?.deref();
+        if(!child) {
+            removeCacheItem(cacheItem, false);
+            return null;
+        }
+        return child;
+    };
+
+    const removeByKey = function(keyId, fragment) {
+        const cacheItem = cache.get(keyId);
+        if(!cacheItem) {
+            return null;
+        }
+        const child = cacheItem.child?.deref();
+        if(!child) {
+            return null;
+        }
+
+        if(fragment) {
+            fragment.appendChild(child);
+            return;
+        }
+        child.remove();
+    }
+
+    const Actions = {
+        toFragment(items, startIndexFrom = 0){
+            const fragment = document.createDocumentFragment();
+            for(let i = 0, length = items.length; i < length; i++) {
+                fragment.append(buildItem(items[i], lastNumberOfItems));
+                lastNumberOfItems++;
+            }
+            return fragment;
+        },
+        add(items, delay = 0) {
+            setTimeout(() => {
+                element.appendElement(Actions.toFragment(items))
+            }, delay);
+        },
+        replace(items) {
+            clear();
+            Actions.add(items);
+        },
+        reOrder(items) {
+            let child = null;
+            const fragment = document.createDocumentFragment();
+            for(const item of items) {
+                child = nodeCacheByElement.get(item);
+                if(child) {
+                    fragment.appendChild(child);
+                }
+            }
+            child = null;
+            element.appendElement(fragment, blockEnd);
+        },
+        removeOne(element, index) {
+            let child = nodeCacheByElement.get(element);
+            if(child) {
+                child.remove();
+                nodeCacheByElement.delete(element);
+                removeCacheItemByKey(getItemKey(element, index));
+            }
+            child = null;
+        },
+        clear,
+        push(items) {
+            let delay = 0;
+            if(configs.pushDelay) {
+                delay = configs.pushDelay(items) ?? 0;
+            } else {
+                delay = (items.length >= 1000) ? 10 : 0;
+            }
+            Actions.add(items, delay);
+        },
+        unshift(values){
+            element.insertBefore(Actions.toFragment(values), blockStart.nextSibling);
+        },
+        splice(args, deleted) {
+            const [start, deleteCount, ...values] = args;
+            let elementBeforeFirst = null;
+            const garbageFragment = document.createDocumentFragment();
+
+            if(deleted.length > 0) {
+                let firstKey = getItemKey(deleted[0], start);
+                if(deleted.length === 1) {
+                    removeByKey(firstKey, garbageFragment);
+                } else if(deleted.length > 1) {
+                    const firstChildRemoved = getChildByKey(firstKey);
+                    elementBeforeFirst = firstChildRemoved?.previousSibling;
+
+                    for(let i = 0; i < deleted.length; i++) {
+                        const keyId = getItemKey(deleted[i], start + i, key);
+                        removeByKey(keyId, garbageFragment);
+                    }
+                }
+            } else {
+                elementBeforeFirst = blockEnd;
+            }
+            garbageFragment.replaceChildren();
+
+            if(values && values.length && elementBeforeFirst) {
+                element.insertBefore(Actions.toFragment(values), elementBeforeFirst.nextSibling);
+            }
+
+        },
+        reverse(_, reversed) {
+            Actions.reOrder(reversed);
+        },
+        sort(_, sorted) {
+            Actions.reOrder(sorted);
+        },
+        remove(_, deleted) {
+            Actions.removeOne(deleted);
+        },
+        pop(_, deleted) {
+            Actions.removeOne(deleted);
+        },
+        shift(_, deleted) {
+            Actions.removeOne(deleted);
+        },
+        swap(args, elements) {
+            const parent = blockEnd.parentNode;
+
+            let childA = nodeCacheByElement.get(elements[0]);
+            let childB = nodeCacheByElement.get(elements[1]);
+            if(!childA || !childB) {
+                return;
+            }
+
+            const childBNext = childB.nextSibling;
+            parent.insertBefore(childB, childA);
+            parent.insertBefore(childA, childBNext);
+            childA = null;
+            childB = null;
+        }
+    };
+
+    const buildContent = (items, _, operations) => {
+        if(operations.action === 'clear' || !items.length) {
+            if(lastNumberOfItems === 0) {
+                return;
+            }
+            clear();
+        }
+
+        if(!operations?.action) {
+            if(lastNumberOfItems === 0) {
+                Actions.add(items);
+                return;
+            }
+            Actions.replace(items);
+        }
+        else if(Actions[operations.action]) {
+            Actions[operations.action](operations.args, operations.result);
+        }
+        updateIndexObservers(items, 0);
+    };
+
+    buildContent(data.val(), null, {action: null});
+    if(Validator.isObservable(data)) {
+        data.subscribe(buildContent);
+    }
+
+    return element;
+}

package/src/elements/control/for-each.js

@@ -2,39 +2,9 @@ import ObservableItem from "../../data/ObservableItem";
 import {Observable} from "../../data/Observable";
 import {createTextNode} from "../../wrappers/HtmlElementWrapper";
 import Validator from "../../utils/validator";
-import {throttle} from "../../utils/helpers.js";
 import Anchor from "../anchor";
-
-
-/**
- *
- * @param {*} item
- * @param {string|null} defaultKey
- * @param {?Function} key
- * @returns {*}
- */
-const getKey = (item, defaultKey, key) => {
-    if(Validator.isFunction(key)) return key(item, defaultKey);
-    if(Validator.isObservable(item)) {
-        const val = item.val();
-        return (val && key) ? val[key] : defaultKey;
-    }
-    return item[key] ?? defaultKey;
-}
-
-/**
- *
- * @param {Map} cache
- * @param {Set} keyIds
- */
-const cleanBlockByCache = (cache, keyIds) => {
-    for(const [key, {child}] of cache.entries()) {
-        if(keyIds.has(key)) {
-            continue;
-        }
-        child.remove();
-    }
-}
+import DebugManager from "../../utils/debug-manager";
+import {getKey} from "../../utils/helpers";
 
 /**
  *
@@ -46,62 +16,136 @@ const cleanBlockByCache = (cache, keyIds) => {
 export function ForEach(data, callback, key) {
     const element = new Anchor('ForEach');
     const blockEnd = element.endElement();
+    const blockStart = element.startElement();
 
     let cache = new Map();
+    let lastKeyOrder = null;
+    const keyIds = new Set();
+
+    const clear = () => {
+        element.removeChildren();
+        cleanCache();
+    };
+
+    const cleanCache = (parent) => {
+        for(const [keyId, cacheItem] of cache.entries()) {
+            if(keyIds.has(keyId)) {
+                continue;
+            }
+            const child = cacheItem.child?.deref();
+            if(parent && child) {
+                parent.removeChild(child);
+            }
+            cacheItem.indexObserver?.cleanup();
+            cacheItem.child = null;
+            cacheItem.indexObserver = null;
+            cache.delete(cacheItem.keyId);
+            lastKeyOrder && lastKeyOrder.delete(cacheItem.keyId);
+        }
+    };
 
     const handleContentItem = (item, indexKey) => {
         const keyId = getKey(item, indexKey, key);
 
         if(cache.has(keyId)) {
-            cache.get(keyId).indexObserver.set(indexKey);
+            const cacheItem = cache.get(keyId);
+            cacheItem.indexObserver?.set(indexKey);
+            cacheItem.isNew = false;
+            if(cacheItem.child?.deref()) {
+                return keyId;
+            }
+            cache.delete(keyId);
         }
-        else {
-            const indexObserver = Observable(indexKey);
+
+        try {
+            const indexObserver = callback.length >= 2 ? Observable(indexKey) : null;
             let child = callback(item, indexObserver);
             if(Validator.isStringOrObservable(child)) {
                 child = createTextNode(child);
             }
-            cache.set(keyId, { child, indexObserver});
+            cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
+        } catch (e) {
+            DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
+            throw e;
         }
         return keyId;
+    };
+
+    const batchDOMUpdates = (parent) => {
+        const fragment = document.createDocumentFragment();
+        for(const itemKey of keyIds) {
+            const cacheItem = cache.get(itemKey);
+            if(!cacheItem) {
+                continue;
+            }
+            const child = cacheItem.child?.deref();
+            child && fragment.appendChild(child);
+        }
+        parent.insertBefore(fragment, blockEnd);
     }
-    const keyIds = new Set();
+
+    const diffingDOMUpdates = (parent) => {
+        const operations = [];
+        let fragment = document.createDocumentFragment();
+        const newKeys = Array.from(keyIds);
+        const oldKeys = Array.from(lastKeyOrder);
+
+        let currentPosition = blockStart;
+
+        for(const index in newKeys) {
+            const itemKey = newKeys[index];
+            const cacheItem = cache.get(itemKey);
+            if(!cacheItem) {
+                continue;
+            }
+            const child = cacheItem.child.deref();
+            if(!child) {
+                continue;
+            }
+            fragment.appendChild(child);
+        }
+        element.replaceContent(fragment);
+    };
 
     const buildContent = () => {
-        const items = (Validator.isObservable(data)) ? data.val() : data;
         const parent = blockEnd.parentNode;
         if(!parent) {
             return;
         }
+
+        const items = (Validator.isObservable(data)) ? data.val() : data;
         keyIds.clear();
         if(Array.isArray(items)) {
-            items.forEach((item, index) => keyIds.add(handleContentItem(item, index)));
+            for(let i = 0, length = items.length; i < length; i++) {
+                const keyId= handleContentItem(items[i], i);
+                keyIds.add(keyId);
+            }
         } else {
             for(const indexKey in items) {
-                keyIds.add(handleContentItem(items[indexKey], indexKey));
+                const keyId = handleContentItem(items[indexKey], indexKey);
+                keyIds.add(keyId);
             }
         }
 
-        cleanBlockByCache(cache, keyIds);
-        let nextElementSibling = blockEnd;
-        for(const item of [...keyIds].reverse()) {
-            const { child } = cache.get(item);
-            if(child) {
-                if(nextElementSibling && nextElementSibling.previousSibling === child) {
-                    nextElementSibling = child;
-                    continue;
-                }
-                parent.insertBefore(child, nextElementSibling);
-                nextElementSibling = child;
-            }
+        if(keyIds.size === 0) {
+            clear();
+            lastKeyOrder?.clear();
+            return;
         }
+
+        cleanCache(parent);
+        if(!lastKeyOrder || lastKeyOrder.size === 0) {
+            batchDOMUpdates(parent);
+        } else {
+            diffingDOMUpdates(parent);
+        }
+        lastKeyOrder?.clear();
+        lastKeyOrder = new Set([...keyIds]);
     };
 
     buildContent();
     if(Validator.isObservable(data)) {
-        data.subscribe(throttle((newValue, oldValue) => {
-            buildContent(newValue, oldValue);
-        }, 50, { debounce: true }))
+        data.subscribe(buildContent)
     }
     return element;
-}
+}

package/src/elements/index.js

@@ -1,6 +1,7 @@
 import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
 
 export * from './control/for-each';
+export * from './control/for-each-array';
 export * from './control/show-if';
 export * from './control/switch';
 export * from './content-formatter';

package/src/elements/list.js

@@ -4,3 +4,7 @@ export const OrderedList = HtmlElementWrapper('ol');
 export const UnorderedList = HtmlElementWrapper('ul');
 export const ListItem = HtmlElementWrapper('li');
 
+export const Li = ListItem;
+export const Ol = OrderedList;
+export const Ul = UnorderedList;
+

package/src/utils/helpers.js

@@ -1,35 +1,58 @@
+import Validator from "./validator";
+
+const invoke = function(fn, args, context) {
+    if(context) {
+        fn.apply(context, args);
+    } else {
+        fn(...args);
+    }
+};
 /**
  *
  * @param {Function} fn
  * @param {number} delay
- * @param {{leading?:Boolean, trailing?:Boolean, debounce?:Boolean}}options
+ * @param {{leading?:Boolean, trailing?:Boolean, debounce?:Boolean, check: Function}}options
  * @returns {(function(...[*]): void)|*}
  */
-export const throttle = function(fn, delay, options = {}) {
+export const debounce = function(fn, delay, options = {}) {
     let timer = null;
-    let lastExecTime = 0;
-    const { leading = true, trailing = true, debounce = false } = options;
+    let lastArgs = null;
 
     return  function(...args) {
-        const now = Date.now();
-        if (debounce) {
-            // debounce mode: reset the timer for each call
-            clearTimeout(timer);
-            timer = setTimeout(() => fn.apply(this, args), delay);
-            return;
-        }
-        if (leading && now - lastExecTime >= delay) {
-            fn.apply(this, args);
-            lastExecTime = now;
-        }
-        if (trailing && !timer) {
-            timer = setTimeout(() => {
-                fn.apply(this, args);
-                lastExecTime = Date.now();
-                timer = null;
-            }, delay - (now - lastExecTime));
+        const context = options.context === true ? this : null;
+        let scopeDelay = delay;
+        if(options.check) {
+            const response = options.check(...args);
+            if(typeof response === 'number') {
+                scopeDelay = response;
+            }
         }
+        lastArgs = args;
+
+        // debounce mode: reset the timer for each call
+        clearTimeout(timer);
+        timer = setTimeout(() => invoke(fn, lastArgs, context), delay);
+    }
+};
+
+
+/**
+ *
+ * @param {*} item
+ * @param {string|null} defaultKey
+ * @param {?Function} key
+ * @returns {*}
+ */
+export const getKey = (item, defaultKey, key) => {
+    if(Validator.isFunction(key)) return key(item, defaultKey);
+    if(Validator.isObservable(item)) {
+        const val = item.val();
+        return (val && key) ? val[key] : defaultKey;
+    }
+    if(!Validator.isObject(item)) {
+        return item;
     }
+    return item[key] ?? defaultKey;
 };
 
 export const trim = function(str, char) {

package/src/wrappers/AttributesWrapper.js

@@ -3,20 +3,6 @@ import NativeDocumentError from "../errors/NativeDocumentError";
 import {BOOLEAN_ATTRIBUTES} from "./constants.js";
 import {Observable} from "../data/Observable";
 
-/**
- *
- * @param {HTMLElement} element
- * @param {string} className
- * @param {string} value
- */
-const toggleClassItem = function(element, className, value) {
-    if(value) {
-        element.classList.add(className);
-    } else {
-        element.classList.remove(className);
-    }
-}
-
 /**
  *
  * @param {HTMLElement} element
@@ -26,11 +12,11 @@ function bindClassAttribute(element, data) {
     for(let className in data) {
         const value = data[className];
         if(Validator.isObservable(value)) {
-            toggleClassItem(element, className, value.val());
-            value.subscribe(newValue => toggleClassItem(element, className, newValue));
+            element.classList.toggle(className, value.val());
+            value.subscribe(newValue => element.classList.toggle(className, newValue));
             continue;
         }
-        toggleClassItem(element, className, value);
+        element.classList.toggle(className, value)
     }
 }
 
@@ -102,8 +88,8 @@ function bindAttributeWithObservable(element, attributeName, value) {
         }
         element.setAttribute(attributeName, newValue);
     };
+    applyValue(value.val());
     value.subscribe(applyValue);
-    applyValue(value.val())
 
     if(attributeName === 'value') {
         element.addEventListener('input', () => value.set(element.value));
@@ -152,6 +138,7 @@ export default function AttributesWrapper(element, attributes) {
             continue;
         }
         element.setAttribute(attributeName, value);
+
     }
     return element;
 }