add @computed decorator (#20)

Author: 43081j

README.md

@@ -134,6 +134,18 @@ class TestElement extends Polymer.Element {
   private onBazChanged(newValue: string, oldValue: string) {
   }
 
+  // @computed replaces the getter with a computed property
+  @computed('foo')
+  get computedExample() {
+    return this.foo * 2;
+  }
+
+  // @computed also takes multiple parameters
+  @computed('foo', 'bar')
+  get computedExampleTwo() {
+    return `${this.bar}: ${this.foo}`;
+  }
+
   // @query replaces the property with a getter that querySelectors() in
   // the shadow root. Use this for type-safe access to internal nodes.
   @query('h1')

src/decorators.ts

@@ -46,6 +46,35 @@ export interface PropertyOptions {
   observer?: string|((val: any, old: any) => void);
 }
 
+function createProperty(proto: any, name: string, options?: PropertyOptions): void {
+  const notify = options && options.notify || false;
+  const reflectToAttribute = options && options.reflectToAttribute || false;
+  const readOnly = options && options.readOnly || false;
+  const computed = options && options.computed || '';
+  const observer = options && options.observer || '';
+
+  let type;
+  if (options && options.hasOwnProperty('type')) {
+    type = options.type;
+  } else if (
+      (window as any).Reflect && Reflect.hasMetadata && Reflect.getMetadata &&
+      Reflect.hasMetadata('design:type', proto, name)) {
+    type = Reflect.getMetadata('design:type', proto, name);
+  } else {
+    console.error(
+        'A type could not be found for ${propName}. ' +
+        'Set a type or configure Metadata Reflection API support.');
+  }
+
+  if (!proto.constructor.hasOwnProperty('properties')) {
+    proto.constructor.properties = {};
+  }
+
+  const finalOpts: PropertyOptions =
+      {type, notify, reflectToAttribute, readOnly, computed, observer};
+  proto.constructor.properties[name] = finalOpts;
+}
+
 /**
  * A TypeScript property decorator factory that defines this as a Polymer
  * property.
@@ -54,31 +83,7 @@ export interface PropertyOptions {
  */
 export function property(options?: PropertyOptions) {
   return (proto: any, propName: string): any => {
-    const notify = options && options.notify || false;
-    const reflectToAttribute = options && options.reflectToAttribute || false;
-    const readOnly = options && options.readOnly || false;
-    const computed = options && options.computed || '';
-    const observer = options && options.observer || '';
-
-    let type;
-    if (options && options.hasOwnProperty('type')) {
-      type = options.type;
-    } else if (
-        (window as any).Reflect && Reflect.hasMetadata && Reflect.getMetadata &&
-        Reflect.hasMetadata('design:type', proto, propName)) {
-      type = Reflect.getMetadata('design:type', proto, propName);
-    } else {
-      console.error(
-          'A type could not be found for ${propName}. ' +
-          'Set a type or configure Metadata Reflection API support.');
-    }
-
-    if (!proto.constructor.hasOwnProperty('properties')) {
-      proto.constructor.properties = {};
-    }
-    const finalOpts: PropertyOptions =
-        {type, notify, reflectToAttribute, readOnly, computed, observer};
-    proto.constructor.properties[propName] = finalOpts;
+    createProperty(proto, propName, options);
   }
 }
 
@@ -100,6 +105,31 @@ export function observe(targets: string|string[]) {
   }
 }
 
+/**
+ * A TypeScript accessor decorator factory that causes the decorated getter to
+ * be called when a set of dependencies change. The arguments of this decorator
+ * should be paths of the data dependencies as described
+ * [here](https://www.polymer-project.org/2.0/docs/devguide/observers#define-a-computed-property)
+ * The decorated getter should not have an associated setter.
+ *
+ * This function must be invoked to return a decorator.
+ */
+export function computed<T = any>(...targets: (keyof T)[]) {
+  return (proto: any, propName: string, descriptor: PropertyDescriptor): void => {
+    const fnName = `__compute${propName}`;
+
+    Object.defineProperty(proto, fnName, {
+      value: descriptor.get
+    });
+
+    descriptor.get = undefined;
+
+    createProperty(proto, propName, {
+      computed: `${fnName}(${targets.join(',')})`
+    });
+  };
+}
+
 /**
  * A TypeScript property decorator factory that converts a class property into
  * a getter that executes a querySelector on the element's shadow root.

test/integration/decorators.ts

@@ -106,6 +106,32 @@ suite('TypeScript Decorators', function() {
 
   });
 
+  suite('@computed', function() {
+
+    test('defines a computed property', function() {
+      testElement.dependencyOne = 'foo';
+
+      const compDiv = testElement.shadowRoot.querySelector('#computed');
+      chai.assert.equal(compDiv.textContent, 'foo');
+      chai.assert.equal(testElement.computedOne, 'foo');
+    });
+
+    test('defines a computed property with multiple arguments', function() {
+      testElement.dependencyOne = 'foo';
+
+      const compDiv = testElement.shadowRoot.querySelector('#computedTwo');
+
+      chai.assert.equal(compDiv.textContent, 'foo');
+      chai.assert.equal(testElement.computedTwo, 'foo');
+
+      testElement.dependencyTwo = 'bar';
+
+      chai.assert.equal(compDiv.textContent, 'foobar');
+      chai.assert.equal(testElement.computedTwo, 'foobar');
+    });
+
+  });
+
   suite('@query', function() {
 
     test('queries the shadow root', function() {
@@ -119,7 +145,7 @@ suite('TypeScript Decorators', function() {
 
     test('queries the shadow root', function() {
       const divs = testElement.divs;
-      chai.assert.equal(divs.length, 2);
+      chai.assert.equal(divs.length, 4);
     });
 
   });

test/integration/elements/test-element.html

@@ -5,6 +5,8 @@
   <template>
     <div id="num">{{aNum}}</div>
     <div id="string">{{aString}}</div>
+    <div id="computed">{{computedOne}}</div>
+    <div id="computedTwo">{{computedTwo}}</div>
   </template>
   <script src="./test-element.js"></script>
 </dom-module>

test/integration/elements/test-element.ts

@@ -11,7 +11,7 @@
 
 /// <reference path="../bower_components/polymer-decorators/global.d.ts" />
 
-const {customElement, property, query, queryAll, observe} = Polymer.decorators;
+const {customElement, property, query, queryAll, observe, computed} = Polymer.decorators;
 
 @customElement('test-element')
 class TestElement extends Polymer.Element {
@@ -39,6 +39,18 @@ class TestElement extends Polymer.Element {
   @property({observer:'observeString'})
   observedString: string;
 
+  @property()
+  dependencyOne: string = '';
+
+  @property()
+  dependencyTwo: string = '';
+
+  @computed('dependencyOne')
+  get computedOne() { return this.dependencyOne; }
+
+  @computed('dependencyOne', 'dependencyTwo')
+  get computedTwo() { return this.dependencyOne + this.dependencyTwo; }
+
   // stand-in for set function dynamically created by Polymer on read only properties
   _setReadOnlyString: (value: string) => void;