fix(AttributeNode): Simplified event bindings

calebdwilliams · Jul 14, 2018 · 101bce7 · 101bce7
1 parent 7af4d12
commit 101bce7
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 75 deletions.
diff --git a/dist/templiteral.cjs.js b/dist/templiteral.cjs.js
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const valuePattern = /---!{.*?(}!---)/gi;
 const eventPattern = /^\(.*\)$/gi;
 const propPattern = /^\[.*\]$/;
-const sanitizePattern = /^this\./;
+
 const startSeparator = /---!\{/gi;
 const endSeparator = /\}!---/gi;
 const modelPattern = /t-model/gi;
@@ -73,17 +73,14 @@ class AttributeNode {
         this.node.addEventListener('input', this._modelFunction(eventHandler));
         this.node.addEventListener('change', this._modelFunction(eventHandler));        
       } else {
-        const events = eventHandler.split(/;/);
-        const eventsSafe = events.filter(event => event.match(sanitizePattern));
-        const sanitizedEvents = eventsSafe.join('; ');
-        if (eventHandler.match(sanitizePattern)) {
-          const handler = Reflect.construct(Function, ['event', sanitizedEvents]).bind(this.context);
-          this.node.addEventListener(eventName, handler);
+        const handlerName = eventHandler.replace(/(this\.)|(\(.*\))/gi, '');
+        if (typeof this.context[handlerName] !== 'function') {
+          console.error(`Method ${handlerName} is not a method of element ${this.context.tagName}`);
+        } else {
+          const handler = this.context[handlerName].bind(this.context);
+          this.node.addEventListener(eventName, this.context[handlerName].bind(this.context));
           this.node._boundEvents = handler;
-        }
-
-        if (eventsSafe.length < events.length) {
-          console.warn('Inline functions not allowed inside of event bindings. Unsafe functions have been removed from node', this.node);
+
         }
       }
     });
@@ -197,7 +194,6 @@ class Template {
                 boundEvents.set(modelSymbol, attribute.value);
               } else if (attribute.name.match('ref')) {
                 this.context.refs[attribute.value] = currentNode;
-                console.dir(this.context);
               }
             }
             if (boundAttrs.size >= 1 || boundEvents.size >= 1) {

diff --git a/dist/templiteral.cjs.min.js b/dist/templiteral.cjs.min.js
diff --git a/dist/templiteral.es.js b/dist/templiteral.es.js
@@ -1,7 +1,7 @@
 const valuePattern = /---!{.*?(}!---)/gi;
 const eventPattern = /^\(.*\)$/gi;
 const propPattern = /^\[.*\]$/;
-const sanitizePattern = /^this\./;
+
 const startSeparator = /---!\{/gi;
 const endSeparator = /\}!---/gi;
 const modelPattern = /t-model/gi;
@@ -69,17 +69,14 @@ class AttributeNode {
         this.node.addEventListener('input', this._modelFunction(eventHandler));
         this.node.addEventListener('change', this._modelFunction(eventHandler));        
       } else {
-        const events = eventHandler.split(/;/);
-        const eventsSafe = events.filter(event => event.match(sanitizePattern));
-        const sanitizedEvents = eventsSafe.join('; ');
-        if (eventHandler.match(sanitizePattern)) {
-          const handler = Reflect.construct(Function, ['event', sanitizedEvents]).bind(this.context);
-          this.node.addEventListener(eventName, handler);
+        const handlerName = eventHandler.replace(/(this\.)|(\(.*\))/gi, '');
+        if (typeof this.context[handlerName] !== 'function') {
+          console.error(`Method ${handlerName} is not a method of element ${this.context.tagName}`);
+        } else {
+          const handler = this.context[handlerName].bind(this.context);
+          this.node.addEventListener(eventName, this.context[handlerName].bind(this.context));
           this.node._boundEvents = handler;
-        }
-
-        if (eventsSafe.length < events.length) {
-          console.warn('Inline functions not allowed inside of event bindings. Unsafe functions have been removed from node', this.node);
+
         }
       }
     });
@@ -193,7 +190,6 @@ class Template {
                 boundEvents.set(modelSymbol, attribute.value);
               } else if (attribute.name.match('ref')) {
                 this.context.refs[attribute.value] = currentNode;
-                console.dir(this.context);
               }
             }
             if (boundAttrs.size >= 1 || boundEvents.size >= 1) {