Add "computed" and "observer" attribute to @property decorator

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Change Log
 
 ## [Unreleased]
+- Added "observer" attribute to @property annotation
+- Added "computed" attribute to @property annotation
 
 ## [0.1.1] - 2017-09-28
 - Metadata Reflection polyfill is no longer a bower dependency.

src/decorators.ts

@@ -42,6 +42,8 @@ export interface PropertyOptions {
   notify?: boolean;
   reflectToAttribute?: boolean;
   readOnly?: boolean;
+  computed?: string;
+  observer?: string;
 }
 
 /**
@@ -56,6 +58,8 @@ export function property(options?: PropertyOptions) {
     const reflectToAttribute: boolean =
         options && options.reflectToAttribute || false;
     const readOnly: boolean = options && options.readOnly || false;
+    const computed: string = options && options.computed || '';
+    const observer: string = options && options.observer || '';
 
     let type;
     if (options && options.hasOwnProperty('type')) {
@@ -73,12 +77,8 @@ export function property(options?: PropertyOptions) {
     if (!proto.constructor.hasOwnProperty('properties')) {
       proto.constructor.properties = {};
     }
-    proto.constructor.properties[propName] = {
-      type,
-      notify,
-      reflectToAttribute,
-      readOnly,
-    };
+    proto.constructor.properties[propName] =
+        {type, notify, reflectToAttribute, readOnly, computed, observer};
   }
 }
 

test/integration/decorators.ts

@@ -74,6 +74,18 @@ suite('TypeScript Decorators', function() {
       const propValue = testElement.readOnlyString;
       chai.assert.equal(propValue, 'initial value');
     });
+
+    test('computed property should should return computed value', function() {
+      testElement.computedString = "new value";
+      const propValue = testElement.computedString;
+      chai.assert.equal(propValue, 'computed yahoo');
+    });
+
+    test('observer property function should be invoked', function() {
+      testElement.observedString = "new value";
+      const propValue = testElement.lastChange;
+      chai.assert.equal(propValue, 'new value');
+    });
 
   });
 

test/integration/elements/test-element.ts

@@ -9,7 +9,7 @@
  * rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
-/// <reference path="../bower_components/polymer-decorators/global.d.ts" />
+/// <reference path="bower_components/polymer-decorators/global.d.ts" />
 
 const {customElement, property, query, queryAll, observe} = Polymer.decorators;
 
@@ -18,9 +18,6 @@ class TestElement extends Polymer.Element {
   @property({notify: true})
   aNum: number = 42;
 
-  @property()
-  doesntNotify: boolean = true;
-
   @property({notify: true})
   aString: string = 'yes';
 
@@ -32,12 +29,20 @@ class TestElement extends Polymer.Element {
 
   @property({readOnly:true})
   readOnlyString: string;
+
+  @property({computed:'computeString(reflectedString)'})
+  computedString: string;
 
+  @property({observer:'observeString'})
+  observedString: string;
+
   // stand-in for set function dynamically created by Polymer on read only properties
   _setReadOnlyString: (value: string) => void;
 
   lastNumChange: number;
 
+  lastChange: string;
+
   lastMultiChange: any[];
 
   @query('#num')
@@ -60,4 +65,12 @@ class TestElement extends Polymer.Element {
   private _numStringChanged(newNum: number, newString: string) {
     this.lastMultiChange = [newNum, newString];
   }
+
+  private computeString(s:string) {
+      return "computed " + s;
+  }
+
+  private observeString(s:string) {
+      this.lastChange = s;
+  }
 }