native-document 1.0.36 → 1.0.38

package/src/wrappers/NDElement.js

@@ -1,6 +1,7 @@
 import DocumentObserver from "./DocumentObserver";
-import { EVENTS } from "../utils/events";
 import PluginsManager from "../utils/plugins-manager";
+import Validator from "../utils/validator";
+import {EVENTS} from "../utils/events";
 
 export function NDElement(element) {
     this.$element = element;
@@ -65,7 +66,149 @@ NDElement.prototype.htmlElement = function() {
 
 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;
+    };
+}

package/src/wrappers/TemplateCloner.js

@@ -37,6 +37,23 @@ const bindAttributes = (node, bindDingData, data) => {
     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) {
@@ -47,6 +64,7 @@ const bindAttachMethods = function(node, bindDingData, data) {
 
 export function TemplateCloner($fn) {
     let $node = null;
+    let $hasBindingData = false;
 
     const clone = (node, data) => {
         const bindDingData = cloneBindingsDataCache.get(node);
@@ -56,11 +74,14 @@ export function TemplateCloner($fn) {
             }
             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];
@@ -73,31 +94,25 @@ export function TemplateCloner($fn) {
     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)
+            },
         }
     };
 
@@ -147,4 +162,4 @@ export function useCache(fn) {
     return function(_, __, ...args) {
         return wrapper([_, __, ...args]);
     };
-}
+}

package/types/control-flow.d.ts

@@ -4,11 +4,11 @@ import { ValidChild } from './elements';
 
 // Control Flow Functions
 export interface ShowIfFunction {
-    (condition: ObservableItem<boolean> | ObservableChecker<boolean>, child: ValidChild, comment?: string): DocumentFragment;
+    (condition: ObservableItem<boolean> | ObservableChecker<boolean>, child: ValidChild, options?: { comment?: string | null; shouldKeepInCache?: boolean }): DocumentFragment;
 }
 
 export interface HideIfFunction {
-    (condition: ObservableItem<boolean> | ObservableChecker<boolean>, child: ValidChild, comment?: string): DocumentFragment;
+    (condition: ObservableItem<boolean> | ObservableChecker<boolean>, child: ValidChild, options?: { comment?: string | null; shouldKeepInCache?: boolean }): DocumentFragment;
 }
 
 export interface MatchFunction {
@@ -31,14 +31,18 @@ export interface ForEachFunction {
     <T>(data: T[] | Record<string, T> | ObservableItem<T[]> | ObservableItem<Record<string, T>>,
         callback: (item: T, index?: ObservableItem<number>) => ValidChild,
         key?: string | ((item: T, defaultKey: string | number) => string),
-        configs?: { shouldKeepItemsInCache: boolean, isParentUniqueChild: boolean }): DocumentFragment,
+        configs?: { shouldKeepItemsInCache: boolean, isParentUniqueChild: boolean,  }): DocumentFragment,
 }
 
 export interface ForEachArrayFunction {
     <T>(data: ObservableArray<T>,
         callback: (item: T, index?: ObservableItem<number>) => ValidChild,
         key?: string | ((item: T, defaultKey: number) => string),
-        configs?: { pushDelay?: (items: T[]) => number, isParentUniqueChild: boolean }): DocumentFragment;
+        configs?: { pushDelay?: (items: T[]) => number, isParentUniqueChild: boolean, shouldKeepItemsInCache?: boolean }): DocumentFragment;
+}
+
+export interface HideIfNotFunction {
+    (condition: ObservableItem<boolean> | ObservableChecker<boolean>, child: ValidChild, options?: { comment?: string | null; shouldKeepInCache?: boolean }): DocumentFragment;
 }
 
 // Control Flow Components