fix: replace getters with a function - simple api for updaing

MrAntix · Jan 20, 2019 · 8e5c396 · 8e5c396
1 parent e36a763
commit 8e5c396
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 14 deletions.
diff --git a/src/bind.spec.ts b/src/bind.spec.ts
@@ -2,17 +2,27 @@ import { bind } from './bind';
 
 describe('bind', () => {
   it('binds attributes', () => {
-    document.documentElement.innerHTML = '<div bind [inner-html]="html"></div>';
+    document.documentElement.innerHTML = `
+      <div bind [inner-html]="html"></div>
+      <div bind [inner-html]="html"></div>
+    `;
 
     const context = {
       html: '<span>inserted</span>'
     };
 
     bind(document, context);
 
-    const el = document.querySelector<HTMLElement>('[bind]');
+    const els = document.querySelectorAll<HTMLElement>('[bind]');
 
-    expect(el.innerHTML).toEqual(context.html);
+    expect(els[0].innerHTML).toEqual(context.html);
+    expect(els[1].innerHTML).toEqual(context.html);
+
+    const update ='<span>updated</span>';
+    context.html = update;
+
+    expect(els[0].innerHTML).toEqual(update);
+    expect(els[1].innerHTML).toEqual(update);
   });
 
   it('binds events', async () => {
@@ -31,7 +41,7 @@ describe('bind', () => {
     expect(recievedEvent).not.toBeUndefined();
   });
 
-  it('this is bound to element in getters', async () => {
+  it('this is bound to element in function properties', async () => {
     document.documentElement.innerHTML = `
       <div data-id="one" bind [inner-html]="html"></div>
       <div data-id="two" bind [inner-html]="html"></div>
@@ -40,7 +50,7 @@ describe('bind', () => {
     const els = document.querySelectorAll<HTMLElement>('[bind]');
 
     const context = {
-      get html() {
+      html() {
         return `<span>inserted ${this.dataset.id}</span>`;
       }
     };
@@ -50,6 +60,11 @@ describe('bind', () => {
     expect(els[0].innerHTML).toEqual('<span>inserted one</span>');
     expect(els[1].innerHTML).toEqual('<span>inserted two</span>');
 
+    els[0].dataset.id = 'three';
+    context.html();
+
+    expect(els[0].innerHTML).toEqual('<span>inserted three</span>');
+    expect(els[1].innerHTML).toEqual('<span>inserted two</span>');
   });
 
   it('this is bound to element in event handlers', async () => {

diff --git a/src/bind.ts b/src/bind.ts
@@ -23,19 +23,39 @@ export function bind(rootElement: Document | Element, context: any): void {
         Object.getOwnPropertyDescriptor(context, binding.contextMemberName) ||
         {};
 
-      let setValue = descriptor.set || (value => (descriptor.value = value));
-      let getValue = descriptor.get || (() => descriptor.value);
+      if (typeof descriptor.value === 'function') {
+        const fn = descriptor.value['fn'] || descriptor.value;
 
-      Object.defineProperty(context, binding.contextMemberName, {
-        set: function(value) {
+        const boundFunction = function() {
+          const value = fn.bind(element)();
           if (component[binding.componentMemberName] !== value) {
             component[binding.componentMemberName] = value;
           }
-          if (getValue() !== value) setValue(value);
-        },
-        get: getValue
-      });
-      component[binding.componentMemberName] = getValue.bind(element)();
+          if (descriptor.value['fn']) descriptor.value();
+        };
+        boundFunction['fn'] = fn;
+
+        Object.defineProperty(context, binding.contextMemberName, {
+          value: boundFunction
+        });
+
+        boundFunction();
+      } else {
+        let getValue = descriptor.get || (() => descriptor.value);
+        let setValue = descriptor.set || (value => (descriptor.value = value));
+
+        Object.defineProperty(context, binding.contextMemberName, {
+          set: function(value) {
+            if (component[binding.componentMemberName] !== value) {
+              component[binding.componentMemberName] = value;
+            }
+            if (getValue() !== value) setValue(value);
+          },
+          get: getValue
+        });
+
+        component[binding.componentMemberName] = getValue.bind(element)();
+      }
     });
 
     //bind Events