native-document 1.0.184 → 1.0.185

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-document",
-  "version": "1.0.184",
+  "version": "1.0.185",
   "description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
   "author": "AfroCodeur <https://github.com/afrocodeur>",
   "license": "MIT",

package/src/core/wrappers/template-cloner/NodeCloner.js

@@ -1,6 +1,7 @@
 import {ElementCreator} from '../ElementCreator';
 import {createTextNode} from '../HtmlElementWrapper';
 import {NDElement} from '../NDElement';
+import {call} from '@babel/traverse/lib/path/context';
 
 /**
  * Stores deferred attribute, class, style, and event bindings for a cloneable element.
@@ -18,6 +19,7 @@ export default function NodeCloner($element) {
     this.$attrs = null;
     this.$ndMethods = null;
     this.$content = null;
+    this.$uniqueCallbacks= new Map();
 }
 
 NodeCloner.prototype.shouldBeHydrate = function() {
@@ -56,10 +58,28 @@ const buildProperties = (cache, properties, data) => {
 };
 
 const getPropertyValue = (callbackOrProperty, data) => {
+    if(callbackOrProperty?.__$Observable) {
+        return callbackOrProperty;
+    }
     const value = (typeof callbackOrProperty ==='string') ? data[0][callbackOrProperty] :  callbackOrProperty;
     return (typeof value === 'function') ? value.apply(this, data) : value;
 };
 
+
+const $nodeClonedCallbackData = new WeakMap();
+
+const $nodeClonerCallbackCaller = (callback, event) => {
+    const data = $nodeClonedCallbackData.get(event.target);
+    callback.apply(event.target, [...data, event]);
+};
+
+NodeCloner.prototype.resolveMethods = function() {
+    for(const methodName in this.$ndMethods) {
+        const callback = this.$ndMethods[methodName];
+        const uniqueCallback = $nodeClonerCallbackCaller.bind(null, callback);
+        this.$uniqueCallbacks.set(methodName, uniqueCallback);
+    }
+};
 /**
  * Pre-compiles all registered bindings into a sequence of optimised steps.
  * Called once before the first clone operation. Subsequent calls are no-ops.
@@ -70,21 +90,24 @@ NodeCloner.prototype.resolve = function() {
     if(this.$content) {
         return;
     }
+    this.resolveMethods();
     const steps = [];
     if(this.$ndMethods) {
         const methods = Object.keys(this.$ndMethods);
         if(methods.length === 1) {
             const methodName = methods[0];
-            const callback = this.$ndMethods[methodName];
-            steps.push((clonedNode, data) => {
-                clonedNode.nd[methodName](callback.length === 0 ? callback : callback.bind(clonedNode, ...data));
+            steps.push((clonedNode) => {
+                const uniqueCallback = this.$uniqueCallbacks.get(methodName);
+                clonedNode.nd[methodName](uniqueCallback);
             });
         } else {
-            steps.push((clonedNode, data) => {
+            steps.push((clonedNode) => {
                 const nd = clonedNode.nd;
                 for(const methodName in this.$ndMethods) {
-                    const callback  = this.$ndMethods[methodName];
-                    nd[methodName](callback.length === 0 ? callback : this.$ndMethods[methodName].bind(clonedNode, ...data));
+                    const uniqueCallback = this.$uniqueCallbacks.get(methodName);
+
+                    // callback.length === 0 ? callback : this.$ndMethods[methodName].bind(clonedNode, ...data)
+                    nd[methodName](uniqueCallback);
                 }
             });
         }
@@ -146,6 +169,7 @@ NodeCloner.prototype.resolve = function() {
 
     this.cloneNode = (data) => {
         const clonedNode = $element.cloneNode(false);
+        $nodeClonedCallbackData.set(clonedNode, data);
         for(let i = 0; i < stepsCount; i++) {
             steps[i](clonedNode, data);
         }
@@ -187,11 +211,7 @@ NodeCloner.prototype.attach = function(methodName, callback) {
  */
 NodeCloner.prototype.text = function(valueOrProperty) {
     this.$content = valueOrProperty;
-    if(typeof valueOrProperty === 'function') {
-        this.cloneNode = (data) => createTextNode(valueOrProperty.apply(null, data));
-        return this;
-    }
-    this.cloneNode = (data) => createTextNode(data[0][valueOrProperty]);
+    this.cloneNode = (data) => createTextNode(getPropertyValue(valueOrProperty, data));
     return this;
 };
 

package/src/core/wrappers/template-cloner/TemplateCloner.js

@@ -96,6 +96,7 @@ export function TemplateCloner($fn) {
             $node.nodeCloner = new NodeCloner($node);
         }
         assignClonerToNode($node);
+
         if(this.$scopeDataBuilder) {
             this.clone = (data) => {
                 const scopeData = this.scopeData();