Add "computed" and "observer" attribute to @Property decorator (#18)

Polymer · Dec 27, 2017 · d6b3fa3 · d6b3fa3
1 parent 9bcac25
commit d6b3fa3
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 6 deletions.
diff --git a/CHANGELOG.md b/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.

diff --git a/src/decorators.ts b/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};
   }
 }
 

diff --git a/test/integration/decorators.ts b/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 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');
+    });
 
   });
 

diff --git a/test/integration/elements/test-element.ts b/test/integration/elements/test-element.ts
@@ -32,12 +32,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 +68,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;
+  }
 }