native-document 1.0.69 → 1.0.72

package/src/{elements → core/elements}/control/for-each-array.js

@@ -21,12 +21,14 @@ export function ForEachArray(data, callback, key, configs = {}) {
         cleanCache();
         lastNumberOfItems = 0;
     };
+
     const getItemKey = (item, indexKey) => {
         if(keysCache.has(item)) {
             return keysCache.get(item);
         }
         return getKey(item, indexKey, key);
     };
+
     const getItemChild = (item) => {
         return getChildByKey(getItemKey(item));
     };
@@ -143,9 +145,9 @@ export function ForEachArray(data, callback, key, configs = {}) {
         },
         add(items, delay = 2) {
             const fragment = Actions.toFragment(items);
-            setTimeout(() => {
+            Promise.resolve().then(() => {
                 element.appendElement(fragment);
-            }, delay);
+            });
         },
         replace(items) {
             clear();

package/src/core/utils/EventEmitter.js

@@ -0,0 +1,46 @@
+import NativeDocumentError from "../errors/NativeDocumentError";
+
+export default function EventEmitter() {
+
+    this.__$events = null;
+
+}
+
+EventEmitter.prototype.on = function(eventName, callback) {
+    if(!this.__$events) {
+        this.__$events = new Map();
+    }
+    if(!this.__$events.has(eventName)) {
+        this.__$events.set(eventName, callback);
+        return;
+    }
+    const existingCallback = this.__$events.get(eventName);
+    if(!Array.isArray(existingCallback)) {
+        this.__$events.set(eventName, [existingCallback, callback]);
+        return;
+    }
+    existingCallback.push(callback);
+};
+
+EventEmitter.prototype.hasListeners = function(eventName) {
+    return !!this.__$events.get(eventName);
+};
+
+EventEmitter.prototype.trigger = async function(eventName, ...args) {
+    const callbacks = this.__$events.get(eventName);
+    if(!callbacks) {
+        // throw new NativeDocumentError(this.constructor.name, 'Event '+eventName+' not found');
+        return;
+    }
+
+    if(typeof callbacks === 'function') {
+        return await Promise.resolve(callbacks.apply(this, args))
+    }
+
+    let result = null;
+    for(let i = 0, length = callbacks.length; i < length; i++) {
+        result = await Promise.resolve(await callbacks[i].apply(this, args));
+    }
+    return result;
+};
+EventEmitter.prototype.emit = EventEmitter.prototype.trigger;

package/src/{utils → core/utils}/filters/date.js

@@ -45,12 +45,14 @@ export const timeEquals = (observableOrValue) => {
 
 export const timeAfter = (observableOrValue) => {
     return createFilter(observableOrValue, (value, target) => {
+        if (!value || !target) return false;
         return getSecondsOfDay(value) > getSecondsOfDay(target);
     });
 };
 
 export const timeBefore = (observableOrValue) => {
     return createFilter(observableOrValue, (value, target) => {
+        if (!value || !target) return false;
         return getSecondsOfDay(value) < getSecondsOfDay(target);
     });
 };

package/src/{utils → core/utils}/filters/standard.js

@@ -33,7 +33,7 @@ export function between(minObservableOrValue, maxObservableOrValue){
     );
 }
 
-export function In(observableOrArray){
+export function inArray(observableOrArray){
     return createFilter(observableOrArray, (value, arr) => arr.includes(value));
 }
 

package/src/{utils → core/utils}/helpers.js

@@ -35,6 +35,18 @@ export const debounce = function(fn, delay, options = {}) {
     }
 };
 
+export const nextTick = function(fn) {
+    let pending = false;
+    return function(...args) {
+        if (pending) return;
+        pending = true;
+
+        Promise.resolve().then(() => {
+            fn.apply(this, args);
+            pending = false;
+        });
+    };
+};
 
 /**
  *

package/src/{utils → core/utils}/validator.js

@@ -3,6 +3,7 @@ import DebugManager from "./debug-manager";
 import NativeDocumentError from "../errors/NativeDocumentError";
 import ObservableChecker from "../data/ObservableChecker";
 import {NDElement} from "../wrappers/NDElement";
+import TemplateBinding from "../wrappers/TemplateBinding";
 
 const COMMON_NODE_TYPES = {
     ELEMENT: 1,
@@ -16,6 +17,9 @@ const Validator = {
     isObservable(value) {
         return  value?.__$isObservable || value instanceof ObservableItem || value instanceof ObservableChecker;
     },
+    isTemplateBinding(value) {
+        return  value?.__$isTemplateBinding || value instanceof TemplateBinding;
+    },
     isObservableWhenResult(value) {
         return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
     },
@@ -25,6 +29,9 @@ const Validator = {
     isProxy(value) {
         return value?.__isProxy__
     },
+    isObservableOrProxy(value) {
+        return Validator.isObservable(value) || Validator.isProxy(value);
+    },
     isAnchor(value) {
         return value?.__Anchor__
     },

package/src/{wrappers → core/wrappers}/ElementCreator.js

@@ -2,7 +2,7 @@ import Anchor from "../elements/anchor";
 import Validator from "../utils/validator";
 import AttributesWrapper from "./AttributesWrapper";
 import PluginsManager from "../utils/plugins-manager";
-import validator from "../utils/validator";
+import './prototype-extensions';
 
 const $nodeCache = new Map();
 let $textNodeCache = null;
@@ -92,41 +92,18 @@ export const ElementCreator = {
         PluginsManager.emit('AfterProcessChildren', parent);
     },
     getChild(child) {
-        if(child === null) {
+        if(child == null) {
             return null;
         }
-        if(Validator.isString(child)) {
-            child = child.resolveObservableTemplate ? child.resolveObservableTemplate() : child;
-            if(Validator.isString(child)) {
-                return ElementCreator.createStaticTextNode(null, child);
-            }
-        }
-        if (Validator.isElement(child)) {
-            return child;
-        }
-        if (Validator.isObservable(child)) {
-            return ElementCreator.createObservableNode(null, child);
-        }
-        if(Validator.isNDElement(child)) {
-            return child.$element ?? child.$build?.() ?? null;
-        }
-        if(validator.$element) {
-            return validator.$element;
-        }
-        if(Validator.isArray(child)) {
-            const fragment = document.createDocumentFragment();
-            for(let i = 0, length = child.length; i < length; i++) {
-                fragment.appendChild(this.getChild(child[i]));
-            }
-            return fragment;
-        }
-        if(Validator.isFunction(child)) {
-            PluginsManager.emit('BeforeProcessComponent', child);
-            return this.getChild(child());
-        }
-        if(child?.$hydrate) {
-            return ElementCreator.createHydratableNode(null, child);
+        if(child.toNdElement) {
+            do {
+                child =  child.toNdElement();
+                if(Validator.isElement(child)) {
+                    return child;
+                }
+            } while (child.toNdElement);
         }
+
         return ElementCreator.createStaticTextNode(null, child);
     },
     /**

package/src/{wrappers → core/wrappers}/NDElement.js

@@ -1,11 +1,8 @@
 import DocumentObserver from "./DocumentObserver";
 import PluginsManager from "../utils/plugins-manager";
-import Validator from "../utils/validator";
 import NativeDocumentError from "../errors/NativeDocumentError.js";
 import DebugManager from "../utils/debug-manager.js";
 
-import {EVENTS} from "../utils/events";
-
 export function NDElement(element) {
     this.$element = element;
     this.$observer = null;
@@ -110,130 +107,6 @@ NDElement.prototype.attach = function(bindingHydrator) {
 };
 
 
-/**
- *
- * ND events API
- *
- */
-
-const DelegatedEventsCallbackStore = {};
-
-const addCallbackToCallbacksStore = function(element, eventName, callback) {
-    if(!element) return;
-    if(!DelegatedEventsCallbackStore[eventName]) {
-        const eventStore = new WeakMap();
-        DelegatedEventsCallbackStore[eventName] = eventStore;
-        eventStore.set(element, callback);
-        return;
-    }
-    const eventStore = DelegatedEventsCallbackStore[eventName];
-
-    if(!eventStore.has(element)) {
-        eventStore.set(element, callback);
-        return;
-    }
-    const existingCallbacks = eventStore.get(element);
-    if(!Validator.isArray(existingCallbacks)) {
-        eventStore.set(element, [store[eventName], callback]);
-        return;
-    }
-    existingCallbacks.push(callback);
-}
-
-const handleDelegatedCallbacks = function(container, eventName) {
-    container.addEventListener(eventName, (event) => {
-        const eventStore = DelegatedEventsCallbackStore[eventName];
-        if(!eventStore) {
-            return;
-        }
-        let target = event.target;
-        while(target && target !== container) {
-            const callback = eventStore.get(target);
-            if(!callback) {
-                target = target.parentElement;
-                continue;
-            }
-
-            if(Validator.isFunction(callback)) {
-                callback.call(target, event);
-            }
-            else {
-                for(let i = 0; i < callback.length; i++) {
-                    callback[i].call(target, event);
-                }
-            }
-            return;
-        }
-    });
-};
-
-const preventDefaultWrapper = function(element, eventName, callback) {
-    element.addEventListener(eventName, (event) => {
-        event.preventDefault();
-        callback && callback.call(element, event);
-    });
-    return this;
-}
-
-const stopPropagationWrapper = function(element, eventName, callback) {
-    element.addEventListener(eventName, (event) => {
-        event.stopPropagation();
-        callback && callback.call(element, event);
-    });
-    return this;
-};
-
-const preventDefaultAndStopPropagationWrapper = function(element, eventName, callback) {
-    element.addEventListener(eventName, (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        callback && callback.call(element, event);
-    });
-    return this;
-};
-
-const captureEventWrapper = function(element, eventName, directHandler) {
-    if(directHandler) {
-        element.addEventListener(eventName, directHandler);
-        return this;
-    }
-    handleDelegatedCallbacks(element, eventName);
-    return this;
-}
-
-for(const event of EVENTS) {
-    const eventName = event.toLowerCase();
-    NDElement.prototype['on'+event] = function(callback) {
-        this.$element.addEventListener(eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['onPrevent'+event] = function(callback) {
-        preventDefaultWrapper(this.$element, eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['onStop'+event] = function(callback) {
-        stopPropagationWrapper(this.$element, eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['onPreventStop'+event] = function(callback) {
-        preventDefaultAndStopPropagationWrapper(this.$element, eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['when'+event] = function(callback) {
-        addCallbackToCallbacksStore(this.$element, eventName, callback);
-        return this;
-    };
-
-    NDElement.prototype['capture'+event] = function(directHandler) {
-        captureEventWrapper(this.$element, eventName, directHandler);
-        return this;
-    };
-}
-
 NDElement.prototype.with = function(methods) {
     if (!methods || typeof methods !== 'object') {
         throw new NativeDocumentError('extend() requires an object of methods');

package/src/core/wrappers/NdPrototype.js

@@ -0,0 +1,147 @@
+import { NDElement } from "./NDElement";
+import {EVENTS} from "../utils/events";
+
+let createNdElementInstance = (target) => {
+    attachEventPrototypes && attachEventPrototypes();
+    attachEventPrototypes = null;
+    createNdElementInstance = (target) => new NDElement(target);
+    return  new NDElement(target);
+};
+const property = {
+    configurable: true,
+    get() {
+        return createNdElementInstance(this);
+    }
+};
+
+Object.defineProperty(HTMLElement.prototype, 'nd', property);
+
+Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+Object.defineProperty(NDElement.prototype, 'nd', {
+    configurable: true,
+    get: function() {
+        return this;
+    }
+});
+
+
+
+// ----------------------------------------------------------------
+// Events helpers
+// ----------------------------------------------------------------
+
+let attachEventPrototypes = () => {
+    EVENTS.forEach(eventSourceName => {
+        const eventName = eventSourceName.toLowerCase();
+        NDElement.prototype['on'+eventSourceName] = function(callback) {
+            this.$element.addEventListener(eventName, callback);
+            return this;
+        };
+
+        NDElement.prototype['onPrevent'+eventSourceName] = function(callback) {
+            _prevent(this.$element, eventName, callback);
+            return this;
+        };
+
+        NDElement.prototype['onStop'+eventSourceName] = function(callback) {
+            _stop(this.$element, eventName, callback);
+            return this;
+        };
+
+        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback) {
+            _preventStop(this.$element, eventName, callback);
+            return this;
+        };
+    })
+};
+
+NDElement.prototype.on = function(name, callback, options) {
+    this.$element.addEventListener(name.toLowerCase(), callback, options);
+    return this;
+};
+
+const _prevent = function(element, eventName, callback) {
+    const handler = (event) => {
+        event.preventDefault();
+        callback && callback.call(element, event);
+    };
+    element.addEventListener(eventName, handler);
+    return this;
+}
+
+const _stop = function(element, eventName, callback) {
+    const handler = (event) => {
+        event.stopPropagation();
+        callback && callback.call(element, event);
+    };
+    element.addEventListener(eventName, handler);
+    return this;
+};
+
+const _preventStop = function(element, eventName, callback) {
+    const handler = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        callback && callback.call(element, event);
+    };
+    element.addEventListener(eventName, handler);
+    return this;
+};
+
+
+
+// ----------------------------------------------------------------
+// Class attributes binder
+// ----------------------------------------------------------------
+const classListMethods = {
+    getClasses() {
+        return this.$element.className?.split(' ').filter(Boolean);
+    },
+    add(value) {
+        const classes = this.getClasses();
+        if(classes.indexOf(value) >= 0) {
+            return;
+        }
+        classes.push(value);
+        this.$element.className = classes.join(' ');
+    },
+    remove(value) {
+        const classes = this.getClasses();
+        const index = classes.indexOf(value);
+        if(index < 0) {
+            return;
+        }
+        classes.splice(index, 1);
+        this.$element.className = classes.join(' ');
+    },
+    toggle(value, force = undefined) {
+        const classes = this.getClasses();
+        const index = classes.indexOf(value);
+        if(index >= 0) {
+            if(force === true) {
+                return;
+            }
+            classes.splice(index, 1);
+        }
+        else {
+            if(force === false) {
+                return;
+            }
+            classes.push(value);
+        }
+        this.$element.className = classes.join(' ');
+    },
+    contains(value) {
+        return this.getClasses().indexOf(value) >= 0;
+    }
+}
+
+Object.defineProperty(HTMLElement.prototype, 'classes', {
+    configurable: true,
+    get() {
+        return {
+            $element: this,
+            ...classListMethods
+        };
+    }
+});

package/src/core/wrappers/TemplateBinding.js

@@ -0,0 +1,7 @@
+
+
+export default function TemplateBinding(hydrate) {
+    this.$hydrate = hydrate;
+}
+
+TemplateBinding.prototype.__$isTemplateBinding = true;

package/src/{wrappers → core/wrappers}/TemplateCloner.js

@@ -1,6 +1,7 @@
 import {ElementCreator} from "./ElementCreator";
 import {createTextNode} from "./HtmlElementWrapper";
 import Anchor from "../elements/anchor";
+import TemplateBinding from "./TemplateBinding";
 
 const cloneBindingsDataCache = new WeakMap();
 
@@ -109,12 +110,10 @@ export function TemplateCloner($fn) {
 
 
     const createBinding = (hydrateFunction, target) => {
-        return {
-            $hydrate : (element, property) => {
-                $hasBindingData = true;
-                $hydrateFn(hydrateFunction, target, element, property)
-            },
-        }
+        return new TemplateBinding((element, property) => {
+            $hasBindingData = true;
+            $hydrateFn(hydrateFunction, target, element, property)
+        });
     };
 
     this.style = (fn) => {

package/src/core/wrappers/prototype-extensions.js

@@ -0,0 +1,56 @@
+import ObservableItem from "../data/ObservableItem";
+import {NDElement} from "./NDElement";
+import TemplateBinding from "./TemplateBinding";
+import {ElementCreator} from "./ElementCreator";
+import PluginsManager from "../utils/plugins-manager";
+import Validator from "../utils/validator";
+
+String.prototype.toNdElement = function () {
+    const formattedChild = this.resolveObservableTemplate ? this.resolveObservableTemplate() : this;
+    if(Validator.isString(formattedChild)) {
+        return ElementCreator.createStaticTextNode(null, formattedChild);
+    }
+    return ElementCreator.getChild(null, formattedChild);
+};
+
+Element.prototype.toNdElement = function () {
+    return this;
+};
+Text.prototype.toNdElement = function () {
+    return this;
+};
+Comment.prototype.toNdElement = function () {
+    return this;
+};
+Document.prototype.toNdElement = function () {
+    return this;
+};
+DocumentFragment.prototype.toNdElement = function () {
+    return this;
+};
+
+ObservableItem.prototype.toNdElement = function () {
+    return ElementCreator.createObservableNode(null, this);
+};
+
+NDElement.prototype.toNdElement = function () {
+    return this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+};
+
+Array.prototype.toNdElement = function () {
+    const fragment = document.createDocumentFragment();
+    for(let i = 0, length = this.length; i < length; i++) {
+        fragment.appendChild(ElementCreator.getChild(this[i]));
+    }
+    return fragment;
+};
+
+Function.prototype.toNdElement = function () {
+    const child = this;
+    PluginsManager.emit('BeforeProcessComponent', child);
+    return ElementCreator.getChild(child());
+};
+
+TemplateBinding.prototype.toNdElement = function () {
+    return ElementCreator.createHydratableNode(null, this);
+};

package/src/devtools/hrm/ComponentRegistry.js

@@ -1,5 +1,5 @@
 import {Anchor} from "../../../elements.js";
-import Validator from "../../utils/validator";
+import Validator from "../../core/utils/validator";
 
 const ComponentRegistry = (function() {
     const registry = new Map();

package/src/router/Route.js

@@ -1,4 +1,4 @@
-import {trim} from "../utils/helpers.js";
+import {trim} from "../core/utils/helpers.js";
 
 export const RouteParamPatterns = {
 

package/src/router/RouteGroupHelper.js

@@ -1,4 +1,4 @@
-import {trim} from "../utils/helpers.js";
+import {trim} from "../core/utils/helpers.js";
 
 export const RouteGroupHelper = {
     /**

package/src/router/Router.js

@@ -1,12 +1,12 @@
 import {Route} from "./Route.js";
-import Validator from "../utils/validator.js";
-import RouterError from "../errors/RouterError.js";
+import Validator from "../core/utils/validator.js";
+import RouterError from "../core/errors/RouterError.js";
 import {RouteGroupHelper} from "./RouteGroupHelper.js";
-import {trim} from "../utils/helpers.js";
+import {trim} from "../core/utils/helpers.js";
 import HashRouter from "./modes/HashRouter.js";
 import HistoryRouter from "./modes/HistoryRouter.js";
 import MemoryRouter from "./modes/MemoryRouter.js";
-import DebugManager from "../utils/debug-manager.js";
+import DebugManager from "../core/utils/debug-manager.js";
 import {RouterComponent} from "./RouterComponent.js";
 
 export const DEFAULT_ROUTER_NAME = 'default';