Let @event create instances of ChangeListeners

So far @event created only instance of Listeners, since there was
no functional difference in ChangeListeners. Now they have an
additional "values" property, so a distinction is needed.

Some tests needed adjustments as a result. In two cases it was just
removing dead code.

Author: tbuschto

src/decorators/event.ts

@@ -14,31 +14,60 @@ interface TargetInstance {[key: string]: ListenersStore; }
  * When used on a widget the `Listeners` instance will be integrated in
  * the existing event system. Events triggered via one API will also be issued via the other.
  */
-export function event(targetProto: object, propertyName: string): void {
-  const propertyType = Reflect.getMetadata('design:type', targetProto, propertyName);
-  if (
-    propertyType
-    && (propertyType !== Object)
-    && (propertyType !== Listeners)
-    && (propertyType !== ChangeListeners)
-  ) {
-    throw new Error(`@event: Invalid type for property ${propertyName}`);
-  }
-  if (!/^on[A-Z]/.test(propertyName)) {
-    throw new Error(`@event: Invalid name for property ${propertyName}`);
-  }
-  Object.defineProperty(targetProto, propertyName, {
-    get() {
+export function event(targetProto: object, evPropertyName: string): void {
+  const evPropertyType = Reflect.getMetadata('design:type', targetProto, evPropertyName);
+  checkPropertyType(evPropertyType, evPropertyName);
+  checkPropertyName(evPropertyName, evPropertyType);
+  if (evPropertyName.endsWith('Changed')) {
+    defineGetter(targetProto, evPropertyName, function() {
       const targetInstance = this as TargetInstance;
-      const eventType = propertyName.charAt(2).toLowerCase() + propertyName.slice(3);
+      const propertyName = eventType(evPropertyName).slice(0, -7);
       const store = getPropertyStore(targetInstance);
-      if (!store[propertyName]) {
-        store[propertyName] = new Listeners<any>(targetInstance, eventType);
+      if (!store[evPropertyName]) {
+        store[evPropertyName] = new ChangeListeners(targetInstance, propertyName);
       }
-      return store[propertyName];
-    },
+      return store[evPropertyName];
+    });
+  } else {
+    defineGetter(targetProto, evPropertyName, function() {
+      const targetInstance = this as TargetInstance;
+      const store = getPropertyStore(targetInstance);
+      if (!store[evPropertyName]) {
+        store[evPropertyName] = new Listeners<any>(targetInstance, eventType(evPropertyName));
+      }
+      return store[evPropertyName];
+    });
+  }
+}
+
+function defineGetter(target: object, property: string, getter: () => any) {
+  Object.defineProperty(target, property, {
+    get: getter,
     enumerable: true,
     configurable: false
   });
+}
+
+function eventType(evPropertyName: string): string {
+  return evPropertyName.charAt(2).toLowerCase() + evPropertyName.slice(3);
+}
 
+function checkPropertyType(propertyType: any, propertyName: string) {
+  if (propertyType
+    && (propertyType !== Object)
+    && (propertyType !== Listeners)
+    && (propertyType !== ChangeListeners)) {
+    throw new Error(`@event: Invalid type for property ${propertyName}`);
+  }
+}
+
+function checkPropertyName(propertyName: string, propertyType: any) {
+  if (!/^on[A-Z]/.test(propertyName)) {
+    throw new Error(`@event: Invalid name for property ${propertyName}`);
+  }
+  if (propertyType === ChangeListeners) {
+    if (!/^on[A-Z].*Changed$/.test(propertyName)) {
+      throw new Error(`@event: Invalid name for property ${propertyName}`);
+    }
+  }
 }

test/component-bind-one-way-jsx.spec.jsx

@@ -270,7 +270,6 @@ describe('component', () => {
 
       widget.myItem = Object.assign(new ItemB(), {text: 'bar', int: 23});
       widget.myItem.text = 'baz';
-      widget.myItem.onOtherItemChanged.trigger();
 
       expect(textInput.text).to.equal('baz');
     });

test/component-bind-one-way.spec.tsx

@@ -250,7 +250,6 @@ describe('component', () => {
 
       widget.myItem = Object.assign(new ItemB(), {text: 'bar', int: 23});
       widget.myItem.text = 'baz';
-      (widget.myItem as ItemB).onOtherItemChanged.trigger();
 
       expect(textInput.text).to.equal('baz');
     });

test/event.spec.tsx

@@ -1,8 +1,8 @@
 import {expect} from 'chai';
-import {Listeners, NativeObject, tabris} from 'tabris';
+import {ChangeListeners, Listeners, NativeObject, Observable, tabris} from 'tabris';
 import ClientMock from 'tabris/ClientMock';
 import {restoreSandbox, stub} from './test';
-import {event} from '../src';
+import {event, property} from '../src';
 
 describe('event', () => {
 
@@ -38,6 +38,20 @@ describe('event', () => {
     expect(listener).to.have.been.calledOnce;
   });
 
+  it('injects working ChangeListeners', () => {
+    class PlainClass {
+      @event readonly onFooChanged: ChangeListeners<PlainClass, 'foo'>;
+      @property foo: string;
+    }
+
+    const object = new PlainClass();
+    object.onFooChanged(listener);
+    object.foo = 'bar';
+
+    expect(object.onFooChanged.values).to.be.instanceOf(Observable);
+    expect(listener).to.have.been.calledOnce;
+  });
+
   it('fails for incompatible types', () => {
     expect(() => {
       class PlainClass {
@@ -122,6 +136,19 @@ describe('event', () => {
         @event readonly myEvent: Listeners<{target: PlainClass}>;
       }
     }).to.throw(/myEvent/);
+    expect(() => {
+      class PlainClass {
+        @event readonly onFoo: ChangeListeners<PlainClass, 'foo'>;
+        @property foo: string;
+      }
+    }).to.throw(/onFoo/);
+    expect(() => {
+      class PlainClass {
+        @event readonly onBarChanged: ChangeListeners<PlainClass, 'foo'>;
+        @property foo: string;
+      }
+      new PlainClass().onBarChanged(() => {});
+    }).to.throw(/has no property "bar"/);
   });
 
 });

test/property-js.spec.js

@@ -52,6 +52,8 @@ class CustomComponent extends Composite {
 class MyModel {
   /** @type {boolean} */
   @property myBool = false;
+  /** @type {boolean} */
+  @property otherProp = false;
   /** @type {tabris.ChangeListeners<MyModel, 'myBool'>} */
   @event onOtherPropChanged;
 }

test/property.spec.ts

@@ -80,6 +80,7 @@ describe('property', () => {
     const listener = stub();
     class MyModel {
       @property myBool: boolean = false;
+      @property otherProp: boolean = false;
       @event onOtherPropChanged: ChangeListeners<MyModel, 'myBool'>;
     }
     const myModel = new MyModel();