add computed decorator

Author: 43081j

README.md

@@ -126,6 +126,18 @@ class TestElement extends Polymer.Element {
   @property()
   bar: string = 'yes';
 
+  // @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

@@ -42,6 +42,40 @@ export interface PropertyOptions {
   notify?: boolean;
   reflectToAttribute?: boolean;
   readOnly?: boolean;
+  computed?: string;
+}
+
+function createProperty(proto: any, name: string, options?: PropertyOptions): void {
+  const notify: boolean = options && options.notify || false;
+  const reflectToAttribute: boolean =
+      options && options.reflectToAttribute || false;
+  const readOnly: boolean = options && options.readOnly || false;
+  const computed: string|undefined = options && options.computed || undefined;
+
+  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 = {};
+  }
+
+  proto.constructor.properties[name] = {
+    type,
+    notify,
+    reflectToAttribute,
+    readOnly,
+    computed
+  };
 }
 
 /**
@@ -52,33 +86,7 @@ export interface PropertyOptions {
  */
 export function property(options?: PropertyOptions) {
   return (proto: any, propName: string): any => {
-    const notify: boolean = options && options.notify || false;
-    const reflectToAttribute: boolean =
-        options && options.reflectToAttribute || false;
-    const readOnly: boolean = options && options.readOnly || false;
-
-    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 = {};
-    }
-    proto.constructor.properties[propName] = {
-      type,
-      notify,
-      reflectToAttribute,
-      readOnly,
-    };
+    createProperty(proto, propName, options);
   }
 }
 
@@ -100,6 +108,29 @@ export function observe(targets: string|string[]) {
   }
 }
 
+/**
+ * A TypeScript accessor decorator factory that causes the decorated accessor to
+ * be called when a property changes. `targets` is either a single property
+ * name, or a list of property names.
+ *
+ * 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 targetString = targets.join(',');
+    const propNameCased = propName[0].toUpperCase() + propName.slice(1);
+    const fnName = `__compute${propNameCased}`;
+
+    proto.constructor.prototype[fnName] = descriptor.get;
+
+    descriptor.get = undefined;
+
+    createProperty(proto, propName, {
+      computed: `${fnName}(${targetString})`
+    });
+  };
+}
+
 /**
  * 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

@@ -94,6 +94,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() {
@@ -107,7 +133,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 {
@@ -33,6 +33,18 @@ class TestElement extends Polymer.Element {
   @property({readOnly:true})
   readOnlyString: 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;