RFC: Improved CP Syntax

FEATURES.md

@@ -67,7 +67,7 @@ for a detailed explanation.
 
 * `ember-htmlbars-inline-if-helper`
 
-  Enables the use of the if helper in inline form. The truthy 
+  Enables the use of the if helper in inline form. The truthy
   and falsy values are passed as params, instead of using the block form.
 
   Added in [#9718](https://github.com/emberjs/ember.js/pull/9718).
@@ -100,3 +100,12 @@ for a detailed explanation.
   - `transitioning-out`: link-to is currently active, but will no longer
     be active when the current underway (slow) transition completes.
 
+* `new-computed-syntax`
+
+  Enables the new computed property syntax. In this new syntax, instead of passing
+  a function that acts both as getter and setter for the property, `Ember.computed`
+  receives an object with `get` and `set` keys, each one containing a function.
+  If the object does not contain a `set` key, the property will simply be overrided.
+  Passing just function is still supported, and is equivalent to pass only a getter.
+
+  Added in [#9527](https://github.com/emberjs/ember.js/pull/9527).

features.json

@@ -9,7 +9,8 @@
     "ember-htmlbars-component-generation": null,
     "ember-htmlbars-inline-if-helper": true,
     "ember-htmlbars-attribute-syntax": null,
-    "ember-routing-transitioning-classes": true
+    "ember-routing-transitioning-classes": true,
+    "new-computed-syntax": null
   },
   "debugStatements": [
     "Ember.warn",

packages/ember-metal/lib/computed.js

@@ -112,9 +112,28 @@ function UNDEFINED() { }
   @extends Ember.Descriptor
   @constructor
 */
-function ComputedProperty(func, opts) {
-  func.__ember_arity__ = func.length;
-  this.func = func;
+function ComputedProperty(config, opts) {
+  if (Ember.FEATURES.isEnabled("new-computed-syntax")) {
+    if (typeof config === "function") {
+      config.__ember_arity = config.length;
+      this._getter = config;
+      if (config.__ember_arity > 1) {
+        this._setter = config;
+      }
+    } else {
+      this._getter = config.get;
+      this._setter = config.set;
+      if (this._setter && this._setter.__ember_arity === undefined) {
+        this._setter.__ember_arity = this._setter.length;
+      }
+    }
+  } else {
+    config.__ember_arity = config.length;
+    this._getter = config;
+    if (config.__ember_arity > 1) {
+      this._setter = config;
+    }
+  }
 
   this._dependentKeys = undefined;
   this._suspended = undefined;
@@ -336,7 +355,7 @@ ComputedPropertyPrototype.get = function(obj, keyName) {
       return result;
     }
 
-    ret = this.func.call(obj, keyName);
+    ret = this._getter.call(obj, keyName);
     if (ret === undefined) {
       cache[keyName] = UNDEFINED;
     } else {
@@ -349,7 +368,7 @@ ComputedPropertyPrototype.get = function(obj, keyName) {
     }
     addDependentKeys(this, obj, keyName, meta);
   } else {
-    ret = this.func.call(obj, keyName);
+    ret = this._getter.call(obj, keyName);
   }
   return ret;
 };
@@ -416,12 +435,12 @@ ComputedPropertyPrototype.set = function computedPropertySetWithSuspend(obj, key
 
 ComputedPropertyPrototype._set = function computedPropertySet(obj, keyName, value) {
   var cacheable      = this._cacheable;
-  var func           = this.func;
+  var setter         = this._setter;
   var meta           = metaFor(obj, cacheable);
   var cache          = meta.cache;
   var hadCachedValue = false;
 
-  var funcArgLength, cachedValue, ret;
+  var cachedValue, ret;
 
   if (this._readOnly) {
     throw new EmberError('Cannot set read-only property "' + keyName + '" on object: ' + inspect(obj));
@@ -435,24 +454,16 @@ ComputedPropertyPrototype._set = function computedPropertySet(obj, keyName, valu
     hadCachedValue = true;
   }
 
-  // Check if the CP has been wrapped. If it has, use the
-  // length from the wrapped function.
-
-  funcArgLength = func.wrappedFunction ? func.wrappedFunction.__ember_arity__ : func.__ember_arity__;
-
-  // For backwards-compatibility with computed properties
-  // that check for arguments.length === 2 to determine if
-  // they are being get or set, only pass the old cached
-  // value if the computed property opts into a third
-  // argument.
-  if (funcArgLength === 3) {
-    ret = func.call(obj, keyName, value, cachedValue);
-  } else if (funcArgLength === 2) {
-    ret = func.call(obj, keyName, value);
-  } else {
+  if (!setter) {
     defineProperty(obj, keyName, null, cachedValue);
     set(obj, keyName, value);
     return;
+  } else if (setter.__ember_arity === 2) {
+    // Is there any way of deprecate this in a sensitive way?
+    // Maybe now that getters and setters are the prefered options we can....
+    ret = setter.call(obj, keyName, value);
+  } else {
+    ret = setter.call(obj, keyName, value, cachedValue);
   }
 
   if (hadCachedValue && cachedValue === ret) { return; }
@@ -557,11 +568,16 @@ function computed(func) {
     func = args.pop();
   }
 
-  if (typeof func !== "function") {
-    throw new EmberError("Computed Property declared without a property function");
-  }
-
   var cp = new ComputedProperty(func);
+  // jscs:disable
+  if (Ember.FEATURES.isEnabled("new-computed-syntax")) {
+    // Empty block on purpose
+  } else {
+    // jscs:enable
+    if (typeof func !== "function") {
+      throw new EmberError("Computed Property declared without a property function");
+    }
+  }
 
   if (args) {
     cp.property.apply(cp, args);

packages/ember-metal/lib/mixin.js

@@ -151,7 +151,14 @@ function giveDescriptorSuper(meta, key, property, values, descs) {
   // to clone the computed property so that other mixins do not receive
   // the wrapped version.
   property = o_create(property);
-  property.func = wrap(property.func, superProperty.func);
+  property._getter = wrap(property._getter, superProperty._getter);
+  if (superProperty._setter) {
+    if (property._setter) {
+      property._setter = wrap(property._setter, superProperty._setter);
+    } else {
+      property._setter = superProperty._setter;
+    }
+  }
 
   return property;
 }
@@ -250,7 +257,7 @@ function addNormalizedProperty(base, key, value, meta, descs, values, concats, m
 
     // Wrap descriptor function to implement
     // __nextSuper() if needed
-    if (value.func) {
+    if (value._getter) {
       value = giveDescriptorSuper(meta, key, value, values, descs);
     }
 

packages/ember-metal/lib/utils.js

@@ -511,7 +511,6 @@ export function wrap(func, superFunc) {
   }
 
   superWrapper.wrappedFunction = func;
-  superWrapper.wrappedFunction.__ember_arity__ = func.length;
   superWrapper.__ember_observes__ = func.__ember_observes__;
   superWrapper.__ember_observesBefore__ = func.__ember_observesBefore__;
   superWrapper.__ember_listens__ = func.__ember_listens__;

packages/ember-metal/tests/computed_test.js

@@ -616,6 +616,56 @@ testBoth('chained dependent keys should evaluate computed properties lazily', fu
   equal(count, 0, 'b should not run');
 });
 
+// ..........................................................
+// improved-cp-syntax
+//
+
+if (Ember.FEATURES.isEnabled("new-computed-syntax")) {
+  QUnit.module('computed - improved cp syntax');
+
+  test('setter and getters are passed using an object', function() {
+    var testObj = Ember.Object.extend({
+      a: '1',
+      b: '2',
+      aInt: computed('a', {
+        get: function(keyName) {
+          equal(keyName, 'aInt', 'getter receives the keyName');
+          return parseInt(this.get('a'));
+        },
+        set: function(keyName, value, oldValue) {
+          equal(keyName, 'aInt', 'setter receives the keyName');
+          equal(value, 123, 'setter receives the new value');
+          equal(oldValue, 1, 'setter receives the old value');
+          this.set('a', ""+value); // side effect
+          return parseInt(this.get('a'));
+        }
+      })
+    }).create();
+
+    ok(testObj.get('aInt') === 1, 'getter works');
+    testObj.set('aInt', 123);
+    ok(testObj.get('a') === '123', 'setter works');
+    ok(testObj.get('aInt') === 123, 'cp has been updated too');
+  });
+
+  test('setter can be omited', function() {
+    var testObj = Ember.Object.extend({
+      a: '1',
+      b: '2',
+      aInt: computed('a', {
+        get: function(keyName) {
+          equal(keyName, 'aInt', 'getter receives the keyName');
+          return parseInt(this.get('a'));
+        }
+      })
+    }).create();
+
+    ok(testObj.get('aInt') === 1, 'getter works');
+    ok(testObj.get('a') === '1');
+    testObj.set('aInt', '123');
+    ok(testObj.get('aInt') === '123', 'cp has been updated too');
+  });
+}
 
 // ..........................................................
 // BUGS

packages/ember-runtime/lib/computed/array_computed.js

@@ -14,7 +14,7 @@ function ArrayComputedProperty() {
 
   ReduceComputedProperty.apply(this, arguments);
 
-  this.func = (function(reduceFunc) {
+  this._getter = (function(reduceFunc) {
     return function (propertyName) {
       if (!cp._hasInstanceMeta(this, propertyName)) {
         // When we recompute an array computed property, we need already
@@ -29,7 +29,7 @@ function ArrayComputedProperty() {
 
       return reduceFunc.apply(this, arguments);
     };
-  })(this.func);
+  })(this._getter);
 
   return this;
 }

packages/ember-runtime/lib/computed/reduce_computed.js

@@ -544,7 +544,7 @@ function ReduceComputedProperty(options) {
   };
 
 
-  this.func = function (propertyName) {
+  this._getter = function (propertyName) {
     Ember.assert('Computed reduce values require at least one dependent key', cp._dependentKeys);
 
     recompute.call(this, propertyName);

packages/ember-runtime/tests/system/array_proxy/content_update_test.js

@@ -12,9 +12,7 @@ test("The `contentArrayDidChange` method is invoked after `content` is updated."
   proxy = ArrayProxy.createWithMixins({
     content: Ember.A(),
 
-    arrangedContent: computed('content', function(key, value) {
-      // setup arrangedContent as a different object than content,
-      // which is the default
+    arrangedContent: computed('content', function(key) {
       return Ember.A(this.get('content').slice());
     }),