native-document 1.0.35 → 1.0.37

package/src/wrappers/TemplateCloner.js

@@ -1,22 +1,20 @@
 import {ElementCreator} from "./ElementCreator";
 import {createTextNode} from "./HtmlElementWrapper";
-import PluginsManager from "../utils/plugins-manager";
 
 const cloneBindingsDataCache = new WeakMap();
 
 
 const bindAttributes = (node, bindDingData, data) => {
-    if(!bindDingData) {
-        return null;
-    }
-    const attributes = { };
+    let attributes = null;
     if(bindDingData.attributes) {
+        attributes = attributes || {};
         for (const attr in bindDingData.attributes) {
             attributes[attr] = bindDingData.attributes[attr](...data);
         }
     }
 
     if(bindDingData.classes) {
+        attributes = attributes || {};
         attributes.class = {};
         for (const className in bindDingData.classes) {
             attributes.class[className] = bindDingData.classes[className](...data);
@@ -24,49 +22,69 @@ const bindAttributes = (node, bindDingData, data) => {
     }
 
     if(bindDingData.styles) {
+        attributes = attributes || {};
         attributes.style = {};
         for (const property in bindDingData.styles) {
             attributes.style[property] = bindDingData.styles[property](...data);
         }
     }
 
-    if(Object.keys(attributes)) {
+    if(attributes) {
         ElementCreator.processAttributes(node, attributes);
-        return attributes;
+        return true;
     }
 
     return null;
 };
 
-
-const bindAttachesMethods = function(node, bindDingData, data) {
-    if(!bindDingData?.attaches) {
-        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;
     }
-    for(const methodName in bindDingData.attaches) {
-        node.nd[methodName](function(...args) {
-            bindDingData.attaches[methodName].call(this, ...[...args, ...data]);
-        });
+    if(target === 'attach') {
+        hydrationState.attach = hydrateFunction;
+        return;
     }
+    hydrationState[target] = hydrationState[target] || {};
+    hydrationState[target][property] = hydrateFunction;
 }
 
+const bindAttachMethods = function(node, bindDingData, data) {
+    if(!bindDingData.attach) {
+        return null;
+    }
+    bindDingData.attach(node, ...data);
+};
+
 export function TemplateCloner($fn) {
     let $node = null;
+    let $hasBindingData = false;
 
     const clone = (node, data) => {
         const bindDingData = cloneBindingsDataCache.get(node);
-        if(node instanceof Text) {
-            if(bindDingData?.value) {
+        if(node.nodeType === 3) {
+            if(bindDingData && bindDingData.value) {
                 return bindDingData.value(data);
             }
             return node.cloneNode(true);
         }
-        const nodeCloned = node.cloneNode();
-        bindAttributes(nodeCloned, bindDingData, data);
-        bindAttachesMethods(nodeCloned, bindDingData, data);
-
-        for(let i = 0, length = node.childNodes.length; i < length; i++) {
-            const childNode = node.childNodes[i];
+        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];
             const childNodeCloned = clone(childNode, data);
             nodeCloned.appendChild(childNodeCloned);
         }
@@ -76,27 +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);
         }
-        const cloneNode =  clone($node, data);
-        PluginsManager.emit('NodeTemplateInstanceCreated', cloneNode);
-        return cloneNode;
+        return clone($node, data);
     };
 
+
     const createBinding = (hydrateFunction, target) => {
         return {
-            $hydrate : function(element, property) {
-                if(!cloneBindingsDataCache.has(element)) {
-                    // { classes, styles, attributes, value, attaches }
-                    cloneBindingsDataCache.set(element, {});
-                }
-                const hydrationState = cloneBindingsDataCache.get(element);
-                if(target === 'value') {
-                    hydrationState.value = hydrateFunction;
-                    return;
-                }
-                hydrationState[target] = hydrationState[target] || {};
-                hydrationState[target][property] = hydrateFunction;
-            }
+            $hydrate : (element, property) => {
+                $hasBindingData = true;
+                $hydrateFn(hydrateFunction, target, element, property)
+            },
         }
     };
 
@@ -106,29 +122,44 @@ export function TemplateCloner($fn) {
     this.class = (fn) => {
         return createBinding(fn, 'classes');
     };
-    this.value = (fn) => {
+    this.property = (propertyName) => {
+        return this.value(propertyName);
+    }
+    this.value = (callbackOrProperty) => {
+        if(typeof callbackOrProperty !== 'function') {
+            return createBinding(function(data) {
+                const firstArgument = data[0];
+                return createTextNode(firstArgument[callbackOrProperty]);
+            }, 'value');
+        }
         return createBinding(function(data) {
-            return createTextNode(fn(...data));
+            return createTextNode(callbackOrProperty(...data));
         }, 'value');
     };
     this.attr = (fn) => {
         return createBinding(fn, 'attributes');
     };
     this.attach = (fn) => {
-        return createBinding(fn, 'attaches');
+        return createBinding(fn, 'attach');
     };
 }
 
 export function useCache(fn) {
     let $cache = null;
-    PluginsManager.emit('NodeTemplateStored', fn);
 
-    return function(...args) {
+    const wrapper = function(args) {
         if(!$cache) {
             $cache = new TemplateCloner(fn);
-            PluginsManager.emit('NodeTemplateCreated', $cache);
         }
-
         return $cache.clone(args);
     };
-}
+
+    if(fn.length < 2) {
+        return function(...args) {
+            return wrapper(args);
+        };
+    }
+    return function(_, __, ...args) {
+        return wrapper([_, __, ...args]);
+    };
+}

package/types/control-flow.d.ts

@@ -30,14 +30,15 @@ export interface WhenFunction {
 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)): DocumentFragment;
+        key?: string | ((item: T, defaultKey: string | number) => string),
+        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 }): DocumentFragment;
+        configs?: { pushDelay?: (items: T[]) => number, isParentUniqueChild: boolean }): DocumentFragment;
 }
 
 // Control Flow Components

package/types/elements.d.ts

@@ -412,6 +412,204 @@ export interface NDElement {
     onPreventStopCopy(callback: (event: ClipboardEvent) => void): this;
     onPreventStopCut(callback: (event: ClipboardEvent) => void): this;
     onPreventStopPaste(callback: (event: ClipboardEvent) => void): this;
+
+    // DELEGATION METHODS - WHEN (for children)
+
+    // When versions for Mouse Events
+    whenClick(callback: (event: MouseEvent) => void): this;
+    whenDblClick(callback: (event: MouseEvent) => void): this;
+    whenMouseDown(callback: (event: MouseEvent) => void): this;
+    whenMouseEnter(callback: (event: MouseEvent) => void): this;
+    whenMouseLeave(callback: (event: MouseEvent) => void): this;
+    whenMouseMove(callback: (event: MouseEvent) => void): this;
+    whenMouseOut(callback: (event: MouseEvent) => void): this;
+    whenMouseOver(callback: (event: MouseEvent) => void): this;
+    whenMouseUp(callback: (event: MouseEvent) => void): this;
+    whenWheel(callback: (event: WheelEvent) => void): this;
+    whenContextMenu(callback: (event: MouseEvent) => void): this;
+
+    // When versions for Keyboard Events
+    whenKeyDown(callback: (event: KeyboardEvent) => void): this;
+    whenKeyPress(callback: (event: KeyboardEvent) => void): this;
+    whenKeyUp(callback: (event: KeyboardEvent) => void): this;
+
+    // When versions for Form Events
+    whenBlur(callback: (event: FocusEvent) => void): this;
+    whenChange(callback: (event: Event) => void): this;
+    whenFocus(callback: (event: FocusEvent) => void): this;
+    whenFocusIn(callback: (event: FocusEvent) => void): this;
+    whenFocusOut(callback: (event: FocusEvent) => void): this;
+    whenInput(callback: (event: Event) => void): this;
+    whenInvalid(callback: (event: Event) => void): this;
+    whenReset(callback: (event: Event) => void): this;
+    whenSearch(callback: (event: Event) => void): this;
+    whenSelect(callback: (event: Event) => void): this;
+    whenSubmit(callback: (event: Event) => void): this;
+
+    // When versions for Drag Events
+    whenDrag(callback: (event: DragEvent) => void): this;
+    whenDragEnd(callback: (event: DragEvent) => void): this;
+    whenDragEnter(callback: (event: DragEvent) => void): this;
+    whenDragLeave(callback: (event: DragEvent) => void): this;
+    whenDragOver(callback: (event: DragEvent) => void): this;
+    whenDragStart(callback: (event: DragEvent) => void): this;
+    whenDrop(callback: (event: DragEvent) => void): this;
+
+    // When versions for Window/Page Events
+    whenAfterPrint(callback: (event: Event) => void): this;
+    whenBeforePrint(callback: (event: Event) => void): this;
+    whenBeforeUnload(callback: (event: BeforeUnloadEvent) => void): this;
+    whenError(callback: (event: Event) => void): this;
+    whenHashChange(callback: (event: HashChangeEvent) => void): this;
+    whenLoad(callback: (event: Event) => void): this;
+    whenOffline(callback: (event: Event) => void): this;
+    whenOnline(callback: (event: Event) => void): this;
+    whenPageHide(callback: (event: PageTransitionEvent) => void): this;
+    whenPageShow(callback: (event: PageTransitionEvent) => void): this;
+    whenResize(callback: (event: UIEvent) => void): this;
+    whenScroll(callback: (event: Event) => void): this;
+    whenUnload(callback: (event: Event) => void): this;
+
+    // When versions for Media Events
+    whenAbort(callback: (event: Event) => void): this;
+    whenCanPlay(callback: (event: Event) => void): this;
+    whenCanPlayThrough(callback: (event: Event) => void): this;
+    whenDurationChange(callback: (event: Event) => void): this;
+    whenEmptied(callback: (event: Event) => void): this;
+    whenEnded(callback: (event: Event) => void): this;
+    whenLoadedData(callback: (event: Event) => void): this;
+    whenLoadedMetadata(callback: (event: Event) => void): this;
+    whenLoadStart(callback: (event: Event) => void): this;
+    whenPause(callback: (event: Event) => void): this;
+    whenPlay(callback: (event: Event) => void): this;
+    whenPlaying(callback: (event: Event) => void): this;
+    whenProgress(callback: (event: ProgressEvent) => void): this;
+    whenRateChange(callback: (event: Event) => void): this;
+    whenSeeked(callback: (event: Event) => void): this;
+    whenSeeking(callback: (event: Event) => void): this;
+    whenStalled(callback: (event: Event) => void): this;
+    whenSuspend(callback: (event: Event) => void): this;
+    whenTimeUpdate(callback: (event: Event) => void): this;
+    whenVolumeChange(callback: (event: Event) => void): this;
+    whenWaiting(callback: (event: Event) => void): this;
+
+    // When versions for Touch Events
+    whenTouchCancel(callback: (event: TouchEvent) => void): this;
+    whenTouchEnd(callback: (event: TouchEvent) => void): this;
+    whenTouchMove(callback: (event: TouchEvent) => void): this;
+    whenTouchStart(callback: (event: TouchEvent) => void): this;
+
+    // When versions for Animation Events
+    whenAnimationEnd(callback: (event: AnimationEvent) => void): this;
+    whenAnimationIteration(callback: (event: AnimationEvent) => void): this;
+    whenAnimationStart(callback: (event: AnimationEvent) => void): this;
+
+    // When versions for Transition Events
+    whenTransitionEnd(callback: (event: TransitionEvent) => void): this;
+
+    // When versions for Clipboard Events
+    whenCopy(callback: (event: ClipboardEvent) => void): this;
+    whenCut(callback: (event: ClipboardEvent) => void): this;
+    whenPaste(callback: (event: ClipboardEvent) => void): this;
+
+    // CAPTURE METHODS (for parents)
+
+    // Capture versions for Mouse Events
+    captureClick(directHandler?: (event: MouseEvent) => void): this;
+    captureDblClick(directHandler?: (event: MouseEvent) => void): this;
+    captureMouseDown(directHandler?: (event: MouseEvent) => void): this;
+    captureMouseEnter(directHandler?: (event: MouseEvent) => void): this;
+    captureMouseLeave(directHandler?: (event: MouseEvent) => void): this;
+    captureMouseMove(directHandler?: (event: MouseEvent) => void): this;
+    captureMouseOut(directHandler?: (event: MouseEvent) => void): this;
+    captureMouseOver(directHandler?: (event: MouseEvent) => void): this;
+    captureMouseUp(directHandler?: (event: MouseEvent) => void): this;
+    captureWheel(directHandler?: (event: WheelEvent) => void): this;
+    captureContextMenu(directHandler?: (event: MouseEvent) => void): this;
+
+    // Capture versions for Keyboard Events
+    captureKeyDown(directHandler?: (event: KeyboardEvent) => void): this;
+    captureKeyPress(directHandler?: (event: KeyboardEvent) => void): this;
+    captureKeyUp(directHandler?: (event: KeyboardEvent) => void): this;
+
+    // Capture versions for Form Events
+    captureBlur(directHandler?: (event: FocusEvent) => void): this;
+    captureChange(directHandler?: (event: Event) => void): this;
+    captureFocus(directHandler?: (event: FocusEvent) => void): this;
+    captureFocusIn(directHandler?: (event: FocusEvent) => void): this;
+    captureFocusOut(directHandler?: (event: FocusEvent) => void): this;
+    captureInput(directHandler?: (event: Event) => void): this;
+    captureInvalid(directHandler?: (event: Event) => void): this;
+    captureReset(directHandler?: (event: Event) => void): this;
+    captureSearch(directHandler?: (event: Event) => void): this;
+    captureSelect(directHandler?: (event: Event) => void): this;
+    captureSubmit(directHandler?: (event: Event) => void): this;
+
+    // Capture versions for Drag Events
+    captureDrag(directHandler?: (event: DragEvent) => void): this;
+    captureDragEnd(directHandler?: (event: DragEvent) => void): this;
+    captureDragEnter(directHandler?: (event: DragEvent) => void): this;
+    captureDragLeave(directHandler?: (event: DragEvent) => void): this;
+    captureDragOver(directHandler?: (event: DragEvent) => void): this;
+    captureDragStart(directHandler?: (event: DragEvent) => void): this;
+    captureDrop(directHandler?: (event: DragEvent) => void): this;
+
+    // Capture versions for Window/Page Events
+    captureAfterPrint(directHandler?: (event: Event) => void): this;
+    captureBeforePrint(directHandler?: (event: Event) => void): this;
+    captureBeforeUnload(directHandler?: (event: BeforeUnloadEvent) => void): this;
+    captureError(directHandler?: (event: Event) => void): this;
+    captureHashChange(directHandler?: (event: HashChangeEvent) => void): this;
+    captureLoad(directHandler?: (event: Event) => void): this;
+    captureOffline(directHandler?: (event: Event) => void): this;
+    captureOnline(directHandler?: (event: Event) => void): this;
+    capturePageHide(directHandler?: (event: PageTransitionEvent) => void): this;
+    capturePageShow(directHandler?: (event: PageTransitionEvent) => void): this;
+    captureResize(directHandler?: (event: UIEvent) => void): this;
+    captureScroll(directHandler?: (event: Event) => void): this;
+    captureUnload(directHandler?: (event: Event) => void): this;
+
+    // Capture versions for Media Events
+    captureAbort(directHandler?: (event: Event) => void): this;
+    captureCanPlay(directHandler?: (event: Event) => void): this;
+    captureCanPlayThrough(directHandler?: (event: Event) => void): this;
+    captureDurationChange(directHandler?: (event: Event) => void): this;
+    captureEmptied(directHandler?: (event: Event) => void): this;
+    captureEnded(directHandler?: (event: Event) => void): this;
+    captureLoadedData(directHandler?: (event: Event) => void): this;
+    captureLoadedMetadata(directHandler?: (event: Event) => void): this;
+    captureLoadStart(directHandler?: (event: Event) => void): this;
+    capturePause(directHandler?: (event: Event) => void): this;
+    capturePlay(directHandler?: (event: Event) => void): this;
+    capturePlaying(directHandler?: (event: Event) => void): this;
+    captureProgress(directHandler?: (event: ProgressEvent) => void): this;
+    captureRateChange(directHandler?: (event: Event) => void): this;
+    captureSeeked(directHandler?: (event: Event) => void): this;
+    captureSeeking(directHandler?: (event: Event) => void): this;
+    captureStalled(directHandler?: (event: Event) => void): this;
+    captureSuspend(directHandler?: (event: Event) => void): this;
+    captureTimeUpdate(directHandler?: (event: Event) => void): this;
+    captureVolumeChange(directHandler?: (event: Event) => void): this;
+    captureWaiting(directHandler?: (event: Event) => void): this;
+
+    // Capture versions for Touch Events
+    captureTouchCancel(directHandler?: (event: TouchEvent) => void): this;
+    captureTouchEnd(directHandler?: (event: TouchEvent) => void): this;
+    captureTouchMove(directHandler?: (event: TouchEvent) => void): this;
+    captureTouchStart(directHandler?: (event: TouchEvent) => void): this;
+
+    // Capture versions for Animation Events
+    captureAnimationEnd(directHandler?: (event: AnimationEvent) => void): this;
+    captureAnimationIteration(directHandler?: (event: AnimationEvent) => void): this;
+    captureAnimationStart(directHandler?: (event: AnimationEvent) => void): this;
+
+    // Capture versions for Transition Events
+    captureTransitionEnd(directHandler?: (event: TransitionEvent) => void): this;
+
+    // Capture versions for Clipboard Events
+    captureCopy(directHandler?: (event: ClipboardEvent) => void): this;
+    captureCut(directHandler?: (event: ClipboardEvent) => void): this;
+    capturePaste(directHandler?: (event: ClipboardEvent) => void): this;
 }
 
 export type ValidChild =
@@ -424,7 +622,9 @@ export type ValidChild =
     | Text
     | ObservableItem
     | NDElement
-    | ValidChild[];
+    | BindingHydrator
+    | ValidChild[]
+    | ((...args: any[]) => ValidChild);
 
 export type Attributes = Record<string, any> & {
     class?: string | Record<string, boolean | ObservableItem<boolean>>;

package/types/observable.d.ts

@@ -81,6 +81,7 @@ export interface BatchFunction<TArgs extends any[] = any[], TReturn = any> {
     readonly $observer: ObservableItem<number>;
 }
 
+export type ValidComputedDependencies = Array<ObservableItem | ObservableArray<any> | ObservableChecker | ObservableProxy<any>>;
 export interface ObservableStatic {
     <T>(value: T): ObservableItem<T>;
     array<T>(target: T[]): ObservableArray<T>;
@@ -88,7 +89,7 @@ export interface ObservableStatic {
     object<T extends Record<string, any>>(value: T): ObservableProxy<T>;
     json<T extends Record<string, any>>(value: T): ObservableProxy<T>;
 
-    computed<T>(callback: () => T, dependencies?: ObservableItem[]): ObservableItem<T>;
+    computed<T>(callback: () => T, dependencies?: ValidComputedDependencies): ObservableItem<T>;
     computed<T>(callback: () => T, batchFunction?: BatchFunction): ObservableItem<T>;
 
     batch(callback: Function): BatchFunction;

package/src/wrappers/HtmlElementEventsWrapper.js

@@ -1,64 +0,0 @@
-
-
-/**
- *
- * @param {HTMLElement} element
- * @returns {HTMLElement}
- */
-function HtmlElementPreventEventsWrapper(element) {
-    const events = {};
-    return new Proxy(events, {
-        get(target, property) {
-            if(events[property]) {
-                return events[property];
-            }
-            events[property] = function(callback) {
-                element.addEventListener(property.toLowerCase(), function(event) {
-                    event.preventDefault();
-                    callback.apply(this, [event]);
-                });
-                return element
-            };
-            return events[property];
-        },
-        set(target, property, newValue, receiver) {
-            //...
-            this.get(target, property)(newValue);
-            return element;
-        }
-    });
-}
-
-/**
- *
- * @param {HTMLElement} element
- * @returns {HTMLElement}
- */
-export default function HtmlElementEventsWrapper(element) {
-    const events = {};
-    return new Proxy(events, {
-        get(target, property) {
-            if(events[property]) {
-                return events[property];
-            }
-            if(property === 'prevent') {
-                events[property] = HtmlElementPreventEventsWrapper(element);
-                return events[property];
-            }
-            if(property === 'removeAll') {
-
-                return;
-            }
-            events[property] = function(callback) {
-                element.addEventListener(property.toLowerCase(), callback);
-                return element
-            };
-            return events[property];
-        },
-        set(target, property, newValue, receiver) {
-            //...
-            this.get(target, property)(newValue);
-            return element;
-        }
-    });
-}