native-document 1.0.80 → 1.0.82

package/src/core/data/ObservableItem.js

@@ -20,6 +20,7 @@ export default function ObservableItem(value, configs = null) {
     this.$currentValue = value;
     this.$isCleanedUp = false;
 
+    this.$firstListener = null;
     this.$listeners = null;
     this.$watchers = null;
 
@@ -31,8 +32,9 @@ export default function ObservableItem(value, configs = null) {
             this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
         }
     }
-
-    PluginsManager.emit('CreateObservable', this);
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('CreateObservable', this);
+    }
 }
 
 Object.defineProperty(ObservableItem.prototype, '$value', {
@@ -55,7 +57,7 @@ ObservableItem.prototype.intercept = function(callback) {
 };
 
 ObservableItem.prototype.triggerFirstListener = function(operations) {
-    this.$listeners[0](this.$currentValue, this.$previousValue, operations || {});
+    this.$firstListener(this.$currentValue, this.$previousValue, operations || {});
 };
 
 ObservableItem.prototype.triggerListeners = function(operations) {
@@ -104,22 +106,29 @@ ObservableItem.prototype.triggerWatchers = function() {
 };
 
 ObservableItem.prototype.triggerAll = function(operations) {
-    this.triggerListeners(operations);
     this.triggerWatchers();
+    this.triggerListeners(operations);
 };
 
 ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
-    this.triggerListeners(operations);
     this.triggerWatchers();
+    this.triggerListeners(operations);
 };
 
 ObservableItem.prototype.assocTrigger = function() {
+    this.$firstListener = null;
     if(this.$watchers?.size && this.$listeners?.length) {
         this.trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
         return;
     }
     if(this.$listeners?.length) {
-        this.trigger = (this.$listeners.length === 1) ? this.triggerFirstListener : this.triggerListeners;
+        if(this.$listeners.length === 1) {
+            this.$firstListener = this.$listeners[0];
+            this.trigger = this.triggerFirstListener
+        }
+        else {
+            this.trigger = this.triggerListeners;
+        }
         return;
     }
     if(this.$watchers?.size) {
@@ -150,10 +159,14 @@ ObservableItem.prototype.set = function(data) {
     }
     this.$previousValue = this.$currentValue;
     this.$currentValue = newValue;
-    PluginsManager.emit('ObservableBeforeChange', this);
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('ObservableBeforeChange', this);
+    }
     this.trigger();
     this.$previousValue = null;
-    PluginsManager.emit('ObservableAfterChange', this);
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('ObservableAfterChange', this);
+    }
 };
 
 ObservableItem.prototype.val = function() {
@@ -213,11 +226,15 @@ ObservableItem.prototype.subscribe = function(callback, target = null) {
 
     this.$listeners.push(callback);
     this.assocTrigger();
-    PluginsManager.emit('ObservableSubscribe', this, target);
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('ObservableSubscribe', this, target);
+    }
     return () => {
         this.unsubscribe(callback);
         this.assocTrigger();
-        PluginsManager.emit('ObservableUnsubscribe', this);
+        if(process.env.NODE_ENV === 'development') {
+            PluginsManager.emit('ObservableUnsubscribe', this);
+        }
     };
 };
 

package/src/core/data/observable-helpers/computed.js

@@ -15,8 +15,9 @@ Observable.computed = function(callback, dependencies = []) {
     const initialValue = callback();
     const observable = new ObservableItem(initialValue);
     const updatedValue = nextTick(() => observable.set(callback()));
-
-    PluginsManager.emit('CreateObservableComputed', observable, dependencies)
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('CreateObservableComputed', observable, dependencies);
+    }
 
     if(Validator.isFunction(dependencies)) {
         if(!Validator.isObservable(dependencies.$observer)) {

package/src/core/elements/anchor.js

@@ -152,4 +152,6 @@ export function createPortal(children, { parent, name = 'unnamed' } = {}) {
 
     (parent || document.body).appendChild(anchor);
     return anchor;
-}
+}
+
+DocumentFragment.prototype.setAttribute = () => {}

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

@@ -84,7 +84,7 @@ export function ForEachArray(data, callback, configs = {}) {
         if(child) {
             cache.set(item, {
                 child,
-                indexObserver: (indexObserver ? new WeakRef(indexObserver) : null)
+                indexObserver
             });
             return child;
         }

package/src/core/utils/plugins-manager.js

@@ -1,77 +1,81 @@
 import DebugManager from "./debug-manager";
 
-const PluginsManager = (function() {
+let PluginsManager = null;
 
-    const $plugins = new Map();
-    const $pluginByEvents = new Map();
+if(process.env.NODE_ENV === 'development') {
+    PluginsManager = (function() {
 
-    return {
-        list() {
-            return $pluginByEvents;
-        },
-        add(plugin, name){
-            if (!plugin || typeof plugin !== 'object') {
-                throw new Error(`Plugin ${name} must be an object`);
-            }
-            name = name || plugin.name;
-            if (!name || typeof name !== 'string') {
-                throw new Error(`Please, provide a valid plugin name`);
-            }
-            if($plugins.has(name)) {
-                return;
-            }
+        const $plugins = new Map();
+        const $pluginByEvents = new Map();
 
-            plugin.$name = name;
-            $plugins.set(name ,plugin);
-            if(typeof plugin?.init === 'function') {
-                plugin.init();
-            }
-            for(const methodName in plugin) {
-                if(/^on[A-Z]/.test(methodName)) {
-                    const eventName = methodName.replace(/^on/, '');
-                    if(!$pluginByEvents.has(eventName)) {
-                        $pluginByEvents.set(eventName, new Set());
+        return {
+            list() {
+                return $pluginByEvents;
+            },
+            add(plugin, name){
+                if (!plugin || typeof plugin !== 'object') {
+                    throw new Error(`Plugin ${name} must be an object`);
+                }
+                name = name || plugin.name;
+                if (!name || typeof name !== 'string') {
+                    throw new Error(`Please, provide a valid plugin name`);
+                }
+                if($plugins.has(name)) {
+                    return;
+                }
+
+                plugin.$name = name;
+                $plugins.set(name ,plugin);
+                if(typeof plugin?.init === 'function') {
+                    plugin.init();
+                }
+                for(const methodName in plugin) {
+                    if(/^on[A-Z]/.test(methodName)) {
+                        const eventName = methodName.replace(/^on/, '');
+                        if(!$pluginByEvents.has(eventName)) {
+                            $pluginByEvents.set(eventName, new Set());
+                        }
+                        $pluginByEvents.get(eventName).add(plugin);
                     }
-                    $pluginByEvents.get(eventName).add(plugin);
                 }
-            }
-        },
-        remove(pluginName){
-            if(!$plugins.has(pluginName)) {
-                return;
-            }
-            const plugin = $plugins.get(pluginName);
-            if(typeof plugin.cleanup === 'function') {
-                plugin.cleanup();
-            }
-            for(const [name, sets] of $pluginByEvents.entries() ) {
-                if(sets.has(plugin)) {
-                    sets.delete(plugin);
+            },
+            remove(pluginName){
+                if(!$plugins.has(pluginName)) {
+                    return;
                 }
-                if(sets.size === 0) {
-                    $pluginByEvents.delete(name);
+                const plugin = $plugins.get(pluginName);
+                if(typeof plugin.cleanup === 'function') {
+                    plugin.cleanup();
                 }
-            }
-            $plugins.delete(pluginName);
-        },
-        emit(eventName, ...data) {
-            if(!$pluginByEvents.has(eventName)) {
-                return;
-            }
-            const plugins = $pluginByEvents.get(eventName);
+                for(const [name, sets] of $pluginByEvents.entries() ) {
+                    if(sets.has(plugin)) {
+                        sets.delete(plugin);
+                    }
+                    if(sets.size === 0) {
+                        $pluginByEvents.delete(name);
+                    }
+                }
+                $plugins.delete(pluginName);
+            },
+            emit(eventName, ...data) {
+                if(!$pluginByEvents.has(eventName)) {
+                    return;
+                }
+                const plugins = $pluginByEvents.get(eventName);
 
-            for(const plugin of plugins) {
-                const callback = plugin['on'+eventName];
-                if(typeof callback === 'function') {
-                    try{
-                        callback.call(plugin, ...data);
-                    } catch (error) {
-                        DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                for(const plugin of plugins) {
+                    const callback = plugin['on'+eventName];
+                    if(typeof callback === 'function') {
+                        try{
+                            callback.call(plugin, ...data);
+                        } catch (error) {
+                            DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                        }
                     }
                 }
             }
-        }
-    };
-}());
+        };
+    }());
+}
 
 export default PluginsManager;

package/src/core/wrappers/ElementCreator.js

@@ -59,8 +59,9 @@ export const ElementCreator = {
      */
     createElement(name)  {
         if(name) {
-            if($nodeCache.has(name)) {
-                return $nodeCache.get(name).cloneNode();
+            const cacheNode = $nodeCache.get(name);
+            if(cacheNode) {
+                return cacheNode.cloneNode();
             }
             const node = document.createElement(name);
             $nodeCache.set(name, node);
@@ -75,12 +76,16 @@ export const ElementCreator = {
      */
     processChildren(children, parent) {
         if(children === null) return;
-        PluginsManager.emit('BeforeProcessChildren', parent);
+        if(process.env.NODE_ENV === 'development') {
+            PluginsManager.emit('BeforeProcessChildren', parent);
+        }
         let child = this.getChild(children);
         if(child) {
             parent.appendChild(child);
         }
-        PluginsManager.emit('AfterProcessChildren', parent);
+        if(process.env.NODE_ENV === 'development') {
+            PluginsManager.emit('AfterProcessChildren', parent);
+        }
     },
     getChild(child) {
         if(child == null) {
@@ -103,7 +108,6 @@ export const ElementCreator = {
      * @param {Object} attributes
      */
     processAttributes(element, attributes) {
-        if(Validator.isFragment(element)) return;
         if (attributes) {
             AttributesWrapper(element, attributes);
         }
@@ -116,7 +120,9 @@ export const ElementCreator = {
      * @returns {HTMLElement|DocumentFragment}
      */
     setup(element, attributes, customWrapper) {
-        PluginsManager.emit('Setup', element, attributes, customWrapper);
+        if(process.env.NODE_ENV === 'development') {
+            PluginsManager.emit('Setup', element, attributes, customWrapper);
+        }
         return element;
     }
 };

package/src/core/wrappers/HtmlElementWrapper.js

@@ -20,13 +20,8 @@ function createHtmlElement($tagName, customWrapper, _attributes, _children = nul
     let element = ElementCreator.createElement($tagName);
     let finalElement = (customWrapper && typeof customWrapper === 'function') ? customWrapper(element) : element;
 
-    if(attributes) {
-        ElementCreator.processAttributes(finalElement, attributes);
-    }
-    if(children) {
-        ElementCreator.processChildren(children, finalElement);
-    }
-
+    ElementCreator.processAttributes(finalElement, attributes);
+    ElementCreator.processChildren(children, finalElement);
     return ElementCreator.setup(finalElement, attributes, customWrapper);
 }
 

package/src/core/wrappers/NDElement.js

@@ -6,7 +6,9 @@ import DebugManager from "../utils/debug-manager.js";
 export function NDElement(element) {
     this.$element = element;
     this.$observer = null;
-    PluginsManager.emit('NDElementCreated', element, this);
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('NDElementCreated', element, this);
+    }
 }
 
 NDElement.prototype.__$isNDElement = true;
@@ -175,8 +177,9 @@ NDElement.extend = function(methods) {
 
         NDElement.prototype[name] = method;
     }
-
-    PluginsManager.emit('NDElementExtended', methods);
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('NDElementExtended', methods);
+    }
 
     return NDElement;
 };

package/src/core/wrappers/TemplateCloner.js

@@ -38,14 +38,6 @@ 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 }
@@ -71,27 +63,43 @@ const bindAttachMethods = function(node, bindDingData, data) {
     }
 };
 
+
+const applyBindingTreePath = (root, target, data, path) => {
+    let newTarget = null;
+    if(path.fn) {
+        newTarget = path.fn(data, target, root);
+    }
+    if(path.children) {
+        for(let i = 0, length = path.children.length; i < length; i++) {
+            const currentPath = path.children[i];
+            const pathTargetNode = target.childNodes[currentPath.index];
+            applyBindingTreePath(root, pathTargetNode, data, currentPath);
+        }
+    }
+    return newTarget;
+};
+
 export function TemplateCloner($fn) {
     let $node = null;
     let $hasBindingData = false;
 
-    const $bindingPaths = [];
+    const $bindingTreePath = {
+        fn: null,
+        children: [],
+    };
 
-    const clone = (node, data, path) => {
+    const clone = (node, data, currentPath) => {
         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;
+                currentPath.fn = (data, targetNode, currentRoot) => {
+                    const newNode = bindDingData.value(data);
+                    if (targetNode === currentRoot) {
+                        return newNode;
                     }
-                });
+                    targetNode.replaceWith(newNode);
+                    return null;
+                };
                 return bindDingData.value(data);
             }
             return node.cloneNode(true);
@@ -103,35 +111,35 @@ export function TemplateCloner($fn) {
         if(bindDingData) {
             bindAttributes(nodeCloned, bindDingData, data);
             bindAttachMethods(nodeCloned, bindDingData, data);
-            $bindingPaths.push({
-                path: [...path],
-                fn: (data, targetNode) => {
-                    bindAttributes(targetNode, bindDingData, data);
-                    bindAttachMethods(targetNode, bindDingData, data);
-                }
-            })
+            currentPath.fn = (data, targetNode) => {
+                bindAttributes(targetNode, bindDingData, data);
+                bindAttachMethods(targetNode, bindDingData, data);
+            };
         }
         const childNodes = node.childNodes;
+        const bindingPathChildren = [];
         for(let i = 0, length = childNodes.length; i < length; i++) {
             const childNode = childNodes[i];
-            path.push(i);
+            const path = { index: i, fn: null };
             const childNodeCloned = clone(childNode, data, path);
-            path.pop();
+            if(path.children || path.fn) {
+                bindingPathChildren.push(path);
+            }
             nodeCloned.appendChild(childNodeCloned);
         }
+        if(bindingPathChildren.length) {
+            currentPath.children = currentPath.children || [];
+            currentPath.children = bindingPathChildren;
+        }
         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;
-            }
+        const newRoot = applyBindingTreePath(root, root, data, $bindingTreePath);
+        if(newRoot) {
+            root = newRoot;
         }
 
         return root;
@@ -144,7 +152,7 @@ export function TemplateCloner($fn) {
             return $node.cloneNode(true);
         }
 
-        const firstClone = clone($node, data, []);
+        const firstClone = clone($node, data, $bindingTreePath);
         this.clone = cloneWithBindingPaths;
         return firstClone;
     };

package/src/core/wrappers/prototypes/nd-element-extensions.js

@@ -49,7 +49,9 @@ Array.prototype.toNdElement = function () {
 
 Function.prototype.toNdElement = function () {
     const child = this;
-    PluginsManager.emit('BeforeProcessComponent', child);
+    if(process.env.NODE_ENV === 'development') {
+        PluginsManager.emit('BeforeProcessComponent', child);
+    }
     return ElementCreator.getChild(child());
 };