native-document 1.0.37 → 1.0.39

package/dist/native-document.dev.js

@@ -150,10 +150,14 @@ var NativeDocument = (function (exports) {
             list() {
                 return $pluginByEvents;
             },
-            add(name, plugin){
+            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;
                 }
@@ -198,7 +202,7 @@ var NativeDocument = (function (exports) {
                 const plugins = $pluginByEvents.get(eventName);
 
                 for(const plugin of plugins) {
-                    const callback = plugin[eventName];
+                    const callback = plugin['on'+eventName];
                     if(typeof callback === 'function') {
                         try{
                             callback.call(plugin, ...data);
@@ -239,7 +243,7 @@ var NativeDocument = (function (exports) {
     });
 
     ObservableItem.prototype.__$isObservable = true;
-
+    const DEFAULT_OPERATIONS = {};
     const noneTrigger = function() {};
     ObservableItem.prototype.triggerFirstListener = function(operations) {
         this.$listeners[0](this.$currentValue, this.$previousValue, operations || {});
@@ -691,11 +695,153 @@ var NativeDocument = (function (exports) {
 
     NDElement.prototype.node = NDElement.prototype.htmlElement;
 
+    NDElement.prototype.shadow = function(mode, style = null) {
+        const $element = this.$element;
+        const children = Array.from($element.childNodes);
+        const shadowRoot = $element.attachShadow({ mode });
+        if(style) {
+            const styleNode = document.createElement("style");
+            styleNode.textContent = style;
+            shadowRoot.appendChild(styleNode);
+        }
+        $element.append = shadowRoot.append.bind(shadowRoot);
+        $element.appendChild = shadowRoot.appendChild.bind(shadowRoot);
+        shadowRoot.append(...children);
+
+        return this;
+    };
+    NDElement.prototype.openShadow = function(style = null) {
+        return this.shadow('open', style);
+    };
+    NDElement.prototype.closedShadow = function(style = null) {
+        return this.shadow('closed', style);
+    };
+
     NDElement.prototype.attach = function(bindingHydrator) {
         bindingHydrator.$hydrate(this.$element);
         return this.$element;
     };
 
+
+    /**
+     *
+     * 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;
+        };
+    }
+
     const COMMON_NODE_TYPES = {
         ELEMENT: 1,
         TEXT: 3,
@@ -847,7 +993,7 @@ var NativeDocument = (function (exports) {
                 parent.nativeInsertBefore(element, target);
                 return;
             }
-            if(isParentUniqueChild(parent) || target === anchorEnd) {
+            if(isParentUniqueChild(parent) && target === anchorEnd) {
                 parent.append(element,  target);
                 return;
             }
@@ -899,11 +1045,11 @@ var NativeDocument = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorEnd, anchorEnd);
+                parent.replaceChildren(anchorStart, anchorEnd);
                 return;
             }
             let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove !== anchorEnd) {
+            while(itemToRemove && itemToRemove !== anchorEnd) {
                 tempItem = itemToRemove.nextSibling;
                 element.nativeAppendChild(itemToRemove);
                 itemToRemove = tempItem;
@@ -1571,6 +1717,23 @@ var NativeDocument = (function (exports) {
         return null;
     };
 
+    const $hydrateFn = function(hydrateFunction, target, element, property) {
+        if(!cloneBindingsDataCache.has(element)) {
+            // { classes, styles, attributes, value, attach }
+            cloneBindingsDataCache.set(element, {});
+        }
+        const hydrationState = cloneBindingsDataCache.get(element);
+        if(target === 'value') {
+            hydrationState.value = hydrateFunction;
+            return;
+        }
+        if(target === 'attach') {
+            hydrationState.attach = hydrateFunction;
+            return;
+        }
+        hydrationState[target] = hydrationState[target] || {};
+        hydrationState[target][property] = hydrateFunction;
+    };
 
     const bindAttachMethods = function(node, bindDingData, data) {
         if(!bindDingData.attach) {
@@ -1581,6 +1744,7 @@ var NativeDocument = (function (exports) {
 
     function TemplateCloner($fn) {
         let $node = null;
+        let $hasBindingData = false;
 
         const clone = (node, data) => {
             const bindDingData = cloneBindingsDataCache.get(node);
@@ -1590,11 +1754,14 @@ var NativeDocument = (function (exports) {
                 }
                 return node.cloneNode(true);
             }
-            const nodeCloned = node.cloneNode();
+            const nodeCloned = node.cloneNode(node.fullCloneNode);
             if(bindDingData) {
                 bindAttributes(nodeCloned, bindDingData, data);
                 bindAttachMethods(nodeCloned, bindDingData, data);
             }
+            if(node.fullCloneNode) {
+                return nodeCloned;
+            }
             const childNodes = node.childNodes;
             for(let i = 0, length = childNodes.length; i < length; i++) {
                 const childNode = childNodes[i];
@@ -1607,31 +1774,25 @@ var NativeDocument = (function (exports) {
         this.clone = (data) => {
             if(!$node) {
                 $node = $fn(this);
+                if(!$hasBindingData) {
+                    const nodeCloned = $node.cloneNode(true);
+                    nodeCloned.fullCloneNode = true;
+                    return nodeCloned;
+                }
+            }
+            if(!$hasBindingData) {
+                return $node.cloneNode(true);
             }
             return clone($node, data);
         };
 
-        const $hydrateFn = function(hydrateFunction, target, element, property) {
-            if(!cloneBindingsDataCache.has(element)) {
-                // { classes, styles, attributes, value, attach }
-                cloneBindingsDataCache.set(element, {});
-            }
-            const hydrationState = cloneBindingsDataCache.get(element);
-            if(target === 'value') {
-                hydrationState.value = hydrateFunction;
-                return;
-            }
-            if(target === 'attach') {
-                hydrationState.attach = hydrateFunction;
-                return;
-            }
-            hydrationState[target] = hydrationState[target] || {};
-            hydrationState[target][property] = hydrateFunction;
-        };
 
         const createBinding = (hydrateFunction, target) => {
             return {
-                $hydrate : (element, property) => $hydrateFn(hydrateFunction, target, element, property),
+                $hydrate : (element, property) => {
+                    $hasBindingData = true;
+                    $hydrateFn(hydrateFunction, target, element, property);
+                },
             }
         };
 
@@ -1740,118 +1901,6 @@ var NativeDocument = (function (exports) {
         });
     };
 
-    (function() {
-        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) {
-                return preventDefaultWrapper(this.$element, eventName, callback);
-            };
-            NDElement.prototype['onStop'+event] = function(callback) {
-                return stopPropagationWrapper(this.$element, eventName, callback);
-            };
-            NDElement.prototype['onPreventStop'+event] = function(callback) {
-                return preventDefaultAndStopPropagationWrapper(this.$element, eventName, callback);
-            };
-
-            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;
-            };
-        }
-    }());
-
     const cssPropertyAccumulator = function(initialValue = {}) {
         let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
         const isArray = Validator.isArray(data);
@@ -3840,6 +3889,7 @@ var NativeDocument = (function (exports) {
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
     exports.Observable = Observable;
+    exports.PluginsManager = PluginsManager;
     exports.Store = Store;
     exports.TemplateCloner = TemplateCloner;
     exports.classPropertyAccumulator = classPropertyAccumulator;