native-document 1.0.76 → 1.0.77

package/src/core/elements/form.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 
 export const Form = HtmlElementWrapper('form', function(el) {

package/src/core/elements/html5-semantics.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 export const Main = HtmlElementWrapper('main');
 export const Section = HtmlElementWrapper('section');

package/src/core/elements/img.js

@@ -1,6 +1,6 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper"
-import Validator from "../utils/validator";
-import NativeDocumentError from "../errors/NativeDocumentError";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper"
+import Validator from "@src/core/utils/validator";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
 
 export const BaseImage = HtmlElementWrapper('img');
 export const Img = function(src, attributes) {

package/src/core/elements/index.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 export * from './control/for-each';
 export * from './control/for-each-array';

package/src/core/elements/interactive.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 
 export const Details = HtmlElementWrapper('details');

package/src/core/elements/list.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 export const OrderedList = HtmlElementWrapper('ol');
 export const UnorderedList = HtmlElementWrapper('ul');

package/src/core/elements/medias.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 export const Audio = HtmlElementWrapper('audio');
 export const Video = HtmlElementWrapper('video');

package/src/core/elements/meta-data.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 export const Time = HtmlElementWrapper('time');
 export const Data = HtmlElementWrapper('data');

package/src/core/elements/table.js

@@ -1,4 +1,4 @@
-import HtmlElementWrapper from "../wrappers/HtmlElementWrapper";
+import HtmlElementWrapper from "@src/core/wrappers/HtmlElementWrapper";
 
 export const Caption = HtmlElementWrapper('caption');
 export const Table = HtmlElementWrapper('table');

package/src/core/utils/EventEmitter.js

@@ -1,4 +1,4 @@
-import NativeDocumentError from "../errors/NativeDocumentError";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
 
 export default function EventEmitter() {
 

package/src/core/utils/args-types.js

@@ -1,6 +1,6 @@
 import Validator from "./validator";
-import ArgTypesError from "../errors/ArgTypesError";
-import NativeDocumentError from "../errors/NativeDocumentError";
+import ArgTypesError from "@src/core/errors/ArgTypesError";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
 
 let withValidation = (fn) => fn;
 let ArgTypes = {};

package/src/core/utils/events.js

@@ -63,6 +63,74 @@ export const EVENTS = [
   "VolumeChange",
   "Waiting",
 
+  "TouchCancel",
+  "TouchEnd",
+  "TouchMove",
+  "TouchStart",
+  "AnimationEnd",
+  "AnimationIteration",
+  "AnimationStart",
+  "TransitionEnd",
+  "Copy",
+  "Cut",
+  "Paste",
+  "FocusIn",
+  "FocusOut",
+  "ContextMenu"
+];
+
+export const EVENTS_WITH_PREVENT = [
+  "Click",
+  "DblClick",
+  "MouseDown",
+  "MouseUp",
+  "Wheel",
+  "KeyDown",
+  "KeyPress",
+  "Invalid",
+  "Reset",
+  "Submit",
+  "DragOver",
+  "Drop",
+  "BeforeUnload",
+  "TouchCancel",
+  "TouchEnd",
+  "TouchMove",
+  "TouchStart",
+  "Copy",
+  "Cut",
+  "Paste",
+  "ContextMenu"
+];
+
+export const EVENTS_WITH_STOP =  [
+  "Click",
+  "DblClick",
+  "MouseDown",
+  "MouseMove",
+  "MouseOut",
+  "MouseOver",
+  "MouseUp",
+  "Wheel",
+  "KeyDown",
+  "KeyPress",
+  "KeyUp",
+  "Change",
+  "Input",
+  "Invalid",
+  "Reset",
+  "Search",
+  "Select",
+  "Submit",
+  "Drag",
+  "DragEnd",
+  "DragEnter",
+  "DragLeave",
+  "DragOver",
+  "DragStart",
+  "Drop",
+  "BeforeUnload",
+  "HashChange",
   "TouchCancel",
   "TouchEnd",
   "TouchMove",

package/src/core/utils/filters/standard.js

@@ -1,4 +1,4 @@
-import Validator from "../validator";
+import Validator from "@src/core/utils/validator";
 import { createFilter, createMultiSourceFilter } from "./utils";
 
 

package/src/core/utils/filters/utils.js

@@ -1,4 +1,4 @@
-import Validator from "../validator";
+import Validator from "@src/core/utils/validator";
 
 export function toDate(value) {
     if (value instanceof Date) return value;

package/src/core/utils/helpers.js

@@ -56,15 +56,18 @@ export const nextTick = function(fn) {
  * @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.isString(key)) {
+        const val = Validator.isObservable(item) ? item.val() : item;
+        const result = val?.[key];
+        return Validator.isObservable(result) ? result.val() : (result ?? defaultKey);
     }
-    if(!Validator.isObject(item)) {
-        return item;
+
+    if (Validator.isFunction(key)) {
+        return key(item, defaultKey);
     }
-    return item[key]?.val?.() ??  item[key] ?? defaultKey;
+
+    const val = Validator.isObservable(item) ? item.val() : item;
+    return val ?? defaultKey;
 };
 
 export const trim = function(str, char) {

package/src/core/utils/prototypes.js

@@ -1,7 +1,7 @@
 import {withValidation} from "./args-types.js";
-import {Observable} from "../data/Observable";
+import {Observable} from "@src/core/data/Observable";
 import Validator from "./validator";
-import {NDElement} from "../wrappers/NDElement";
+import {NDElement} from "@src/core/wrappers/NDElement";
 
 
 Function.prototype.args = function(...args) {

package/src/core/utils/validator.js

@@ -1,9 +1,9 @@
-import ObservableItem from "../data/ObservableItem";
+import ObservableItem from "@src/core/data/ObservableItem";
 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";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
+import ObservableChecker from "@src/core/data/ObservableChecker";
+import {NDElement} from "@src/core/wrappers/NDElement";
+import TemplateBinding from "@src/core/wrappers/TemplateBinding";
 
 const COMMON_NODE_TYPES = {
     ELEMENT: 1,
@@ -139,6 +139,7 @@ const Validator = {
 };
 if(process.env.NODE_ENV === 'development') {
     Validator.validateAttributes = function(attributes) {
+        console.log('AttributesWrapper', attributes);
         if (!attributes || typeof attributes !== 'object') {
             return attributes;
         }

package/src/core/wrappers/AttributesWrapper.js

@@ -1,7 +1,8 @@
-import Validator from "../utils/validator";
-import NativeDocumentError from "../errors/NativeDocumentError";
+import Validator from "@src/core/utils/validator";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError";
 import {BOOLEAN_ATTRIBUTES} from "./constants.js";
-import {Observable} from "../data/Observable";
+import {Observable} from "@src/core/data/Observable";
+import './prototypes/bind-class-extensions';
 
 
 export function toggleElementClass(element, className, shouldAdd) {
@@ -36,18 +37,8 @@ export function updateObserverFromInput(element, attributeName, defaultValue, va
 export function bindClassAttribute(element, data) {
     for(let className in data) {
         const value = data[className];
-        if(Validator.isObservable(value)) {
-            element.classes.toggle(className, value.val());
-            value.subscribe(toggleElementClass.bind(null, element, className));
-            continue;
-        }
-        if(Validator.isObservableWhenResult(value)) {
-            element.classes.toggle(className, value.isMath());
-            value.subscribe(toggleElementClass.bind(null, element, className));
-            continue;
-        }
-        if(value.$hydrate) {
-            value.$hydrate(element, className);
+        if(value?.bindNdClass) {
+            value.bindNdClass(element, className);
             continue;
         }
         element.classes.toggle(className, value)
@@ -117,6 +108,12 @@ export function bindAttributeWithObservable(element, attributeName, value) {
     }
 }
 
+const NdBindings = {
+    class: (element, value) => bindClassAttribute(element, value),
+    style: (element, value) => bindStyleAttribute(element, value),
+};
+
+
 /**
  *
  * @param {HTMLElement} element
@@ -132,41 +129,27 @@ export default function AttributesWrapper(element, attributes) {
 
     for(let key in attributes) {
         const attributeName = key.toLowerCase();
-        let value = attributes[attributeName];
-        if(value === null || value === undefined) {
+        let value = attributes[key];
+        if(value == null) {
             continue;
         }
         if(value.handleNdAttribute) {
             value.handleNdAttribute(element, attributeName, value)
             continue;
         }
-        if(Validator.isString(value)) {
-            element.setAttribute(attributeName, value);
-            return;
-        }
-        if(attributeName === 'class' && Validator.isObject(value)) {
-            bindClassAttribute(element, value);
-            continue;
-        }
-        if(attributeName === 'style' && Validator.isObject(value)) {
-            bindStyleAttribute(element, value);
-            continue;
+        if(typeof value === 'object') {
+            const binding = NdBindings[attributeName];
+            if(binding) {
+                binding(element, value);
+                continue;
+            }
         }
-        if(BOOLEAN_ATTRIBUTES.includes(attributeName)) {
+        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
             bindBooleanAttribute(element, attributeName, value);
             continue;
         }
-        if(Validator.isObservable(value)) {
-            bindAttributeWithObservable(element, attributeName, value);
-            continue;
-        }
-        if(value.$hydrate) {
-            value.$hydrate(element, attributeName);
-            continue;
-        }
 
         element.setAttribute(attributeName, value);
-
     }
     return element;
 }

package/src/core/wrappers/DocumentObserver.js

@@ -1,4 +1,4 @@
-import {debounce} from "../utils/helpers";
+import {debounce} from "@src/core/utils/helpers";
 
 const DocumentObserver = {
     mounted: new WeakMap(),

package/src/core/wrappers/ElementCreator.js

@@ -1,7 +1,7 @@
-import Anchor from "../elements/anchor";
-import Validator from "../utils/validator";
+import Anchor from "@src/core/elements/anchor";
+import Validator from "@src/core/utils/validator";
 import AttributesWrapper from "./AttributesWrapper";
-import PluginsManager from "../utils/plugins-manager";
+import PluginsManager from "@src/core/utils/plugins-manager";
 import './prototypes/nd-element-extensions';
 import './prototypes/attributes-extensions';
 
@@ -83,19 +83,14 @@ export const ElementCreator = {
         PluginsManager.emit('AfterProcessChildren', parent);
     },
     getChild(child) {
-        if(child == null) {
-            return null;
-        }
-        if(child.toNdElement) {
-            do {
-                child =  child.toNdElement();
-                if(Validator.isElement(child)) {
-                    return child;
-                }
-            } while (child.toNdElement);
+        while (child?.toNdElement) {
+            child = child.toNdElement();
+
+            if (Validator.isElement(child)) return child;
+            if (!child) return null;
         }
 
-        return ElementCreator.createStaticTextNode(null, child);
+        return child ? ElementCreator.createStaticTextNode(null, child) : null;
     },
     /**
      *

package/src/core/wrappers/HtmlElementWrapper.js

@@ -1,7 +1,7 @@
-import Validator from "../utils/validator";
+import Validator from "@src/core/utils/validator";
 import {ElementCreator} from "./ElementCreator";
 import './NdPrototype';
-import {normalizeComponentArgs} from "../utils/args-types";
+import {normalizeComponentArgs} from "@src/core/utils/args-types";
 
 /**
  *

package/src/core/wrappers/NDElement.js

@@ -1,7 +1,7 @@
 import DocumentObserver from "./DocumentObserver";
-import PluginsManager from "../utils/plugins-manager";
-import NativeDocumentError from "../errors/NativeDocumentError.js";
-import DebugManager from "../utils/debug-manager.js";
+import PluginsManager from "@src/core/utils/plugins-manager";
+import NativeDocumentError from "@src/core/errors/NativeDocumentError.js";
+import DebugManager from "@src/core/utils/debug-manager.js";
 
 export function NDElement(element) {
     this.$element = element;

package/src/core/wrappers/NdPrototype.js

@@ -1,22 +1,17 @@
 import { NDElement } from "./NDElement";
-import {EVENTS} from "../utils/events";
+import {EVENTS, EVENTS_WITH_PREVENT, EVENTS_WITH_STOP} from "@src/core/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);
+        return new NDElement(this);
     }
 };
 
 Object.defineProperty(HTMLElement.prototype, 'nd', property);
 
 Object.defineProperty(DocumentFragment.prototype, 'nd', property);
+
 Object.defineProperty(NDElement.prototype, 'nd', {
     configurable: true,
     get: function() {
@@ -29,31 +24,29 @@ Object.defineProperty(NDElement.prototype, 'nd', {
 // ----------------------------------------------------------------
 // Events helpers
 // ----------------------------------------------------------------
+EVENTS.forEach(eventSourceName => {
+    const eventName = eventSourceName.toLowerCase();
+    NDElement.prototype['on'+eventSourceName] = function(callback = null) {
+        this.$element.addEventListener(eventName, callback);
+        return this;
+    };
+})
 
-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;
-        };
+EVENTS_WITH_STOP.forEach(eventSourceName => {
+    const eventName = eventSourceName.toLowerCase();
+    NDElement.prototype['onStop'+eventSourceName] = function(callback = null) {
+        _stop(this.$element, eventName, callback);
+        return this;
+    };
+});
 
-        NDElement.prototype['onPreventStop'+eventSourceName] = function(callback) {
-            _preventStop(this.$element, eventName, callback);
-            return this;
-        };
-    })
-};
+EVENTS_WITH_PREVENT.forEach(eventSourceName => {
+    const eventName = eventSourceName.toLowerCase();
+    NDElement.prototype['onPrevent'+eventSourceName] = function(callback = null) {
+        _prevent(this.$element, eventName, callback);
+        return this;
+    };
+});
 
 NDElement.prototype.on = function(name, callback, options) {
     this.$element.addEventListener(name.toLowerCase(), callback, options);

package/src/core/wrappers/SingletonView.js

@@ -1,4 +1,4 @@
-import Anchor from "../elements/anchor";
+import Anchor from "@src/core/elements/anchor";
 
 
 export function SingletonView($viewCreator) {

package/src/core/wrappers/TemplateCloner.js

@@ -1,6 +1,5 @@
 import {ElementCreator} from "./ElementCreator";
 import {createTextNode} from "./HtmlElementWrapper";
-import Anchor from "../elements/anchor";
 import TemplateBinding from "./TemplateBinding";
 
 const cloneBindingsDataCache = new WeakMap();
@@ -11,7 +10,7 @@ const bindAttributes = (node, bindDingData, data) => {
     if(bindDingData.attributes) {
         attributes = {};
         for (const attr in bindDingData.attributes) {
-            attributes[attr] = bindDingData.attributes[attr](...data);
+            attributes[attr] = bindDingData.attributes[attr].apply(null, data);
         }
     }
 
@@ -19,7 +18,7 @@ const bindAttributes = (node, bindDingData, data) => {
         attributes = attributes || {};
         attributes.class = {};
         for (const className in bindDingData.classes) {
-            attributes.class[className] = bindDingData.classes[className](...data);
+            attributes.class[className] = bindDingData.classes[className].apply(null, data);
         }
     }
 
@@ -27,7 +26,7 @@ const bindAttributes = (node, bindDingData, data) => {
         attributes = attributes || {};
         attributes.style = {};
         for (const property in bindDingData.styles) {
-            attributes.style[property] = bindDingData.styles[property](...data);
+            attributes.style[property] = bindDingData.styles[property].apply(null, data);
         }
     }
 
@@ -39,6 +38,14 @@ const bindAttributes = (node, bindDingData, data) => {
     return null;
 };
 
+const findByPath = (root, path) => {
+    let target = root;
+    for (let i = 0, len = path.length; i < len; i++) {
+        target = target.childNodes[path[i]];
+    }
+    return target;
+};
+
 const $hydrateFn = function(hydrateFunction, targetType, element, property) {
     if(!cloneBindingsDataCache.has(element)) {
         // { classes, styles, attributes, value, attach }
@@ -59,7 +66,7 @@ const bindAttachMethods = function(node, bindDingData, data) {
     }
     for(const methodName in bindDingData.attach) {
         node.nd[methodName](function(...args) {
-            bindDingData.attach[methodName].call(this, ...[...args, ...data]);
+            bindDingData.attach[methodName].apply(this, [...args, ...data]);
         });
     }
 };
@@ -68,44 +75,78 @@ export function TemplateCloner($fn) {
     let $node = null;
     let $hasBindingData = false;
 
-    const clone = (node, data) => {
+    const $bindingPaths = [];
+
+    const clone = (node, data, path) => {
         const bindDingData = cloneBindingsDataCache.get(node);
         if(node.nodeType === 3) {
             if(bindDingData && bindDingData.value) {
+                $bindingPaths.push({
+                    path: [...path],
+                    fn: (data, targetNode, currentRoot) => {
+                        const newNode = bindDingData.value(data);
+                        targetNode.replaceWith(newNode);
+                        if (targetNode === currentRoot) {
+                            return newNode;
+                        }
+                        return null;
+                    }
+                });
                 return bindDingData.value(data);
             }
             return node.cloneNode(true);
         }
         const nodeCloned = node.cloneNode(node.fullCloneNode);
+        if(node.fullCloneNode) {
+            return nodeCloned;
+        }
         if(bindDingData) {
             bindAttributes(nodeCloned, bindDingData, data);
             bindAttachMethods(nodeCloned, bindDingData, data);
-        }
-        if(node.fullCloneNode) {
-            return nodeCloned;
+            $bindingPaths.push({
+                path: [...path],
+                fn: (data, targetNode) => {
+                    bindAttributes(targetNode, bindDingData, data);
+                    bindAttachMethods(targetNode, bindDingData, data);
+                }
+            })
         }
         const childNodes = node.childNodes;
         for(let i = 0, length = childNodes.length; i < length; i++) {
             const childNode = childNodes[i];
-            const childNodeCloned = clone(childNode, data);
+            path.push(i);
+            const childNodeCloned = clone(childNode, data, path);
+            path.pop();
             nodeCloned.appendChild(childNodeCloned);
         }
         return nodeCloned;
     };
 
-    this.clone = (data) => {
-        if(!$node) {
-            $node = $fn(this);
-            if(!$hasBindingData) {
-                const nodeCloned = $node.cloneNode(true);
-                nodeCloned.fullCloneNode = true;
-                return nodeCloned;
+    const cloneWithBindingPaths = (data) => {
+        let root = $node.cloneNode(true);
+
+        for (let i = 0, len = $bindingPaths.length; i < len; i++) {
+            const binding = $bindingPaths[i];
+            const target = findByPath(root, binding.path);
+            const newRoot = binding.fn(data, target, root);
+            if(newRoot) {
+                root = newRoot;
             }
         }
+
+        return root;
+    };
+
+    this.clone = (data) => {
+        $node = $fn(this);
         if(!$hasBindingData) {
+            this.clone = () => $node.cloneNode(true);
             return $node.cloneNode(true);
         }
-        return clone($node, data);
+
+        const firstClone = clone($node, data, []);
+        this.clone = cloneWithBindingPaths;
+        return firstClone;
     };
 
 
@@ -164,3 +205,4 @@ export function useCache(fn) {
         return wrapper([_, __, ...args]);
     };
 }
+w