Skip to content

Commit

Permalink
Add deprecation guides for Function.prototype.{on,property,observes}.
Browse files Browse the repository at this point in the history
  • Loading branch information
rwjblue committed Apr 15, 2019
1 parent d6b7d68 commit c1428a3
Show file tree
Hide file tree
Showing 3 changed files with 171 additions and 0 deletions.
44 changes: 44 additions & 0 deletions content/ember/v3/observes-function-prototype-extension.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
id: function-prototype-extensions.observes
title: Function.prototype.observes
until: '4.0.0'
since: '3.11'
---

Historically, Ember has extended the `Function.prototype` with a few functions
(`on`, `observes`, `property`), over time we have moved away from using these
prototype extended functions in favor of using the official ES modules based
API.

In order to migrate away from `Function.prototype.observes` you would update to using
`observer` from `@ember/object` ([see
documentation](https://api.emberjs.com/ember/release/functions/@ember%2Fobject/observer))
directly.

For example, you would migrate from:

```js
import EmberObject from '@ember/object';

export default EmberObject.extend({
valueObserver: function() {
// Executes whenever the "value" property changes
}.observes('value')
});
```

Into:

```js
import EmberObject, { observer } from '@ember/object';

export default EmberObject.extend({
valueObserver: observer('value', function() {
// Executes whenever the "value" property changes
})
});
```

Please review the deprecation RFC over at
[emberjs/rfcs](https://emberjs.github.io/rfcs/0272-deprecation-native-function-prototype-extensions.html)
for more details.
55 changes: 55 additions & 0 deletions content/ember/v3/on-function-prototype-extension.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
id: function-prototype-extensions.on
title: Function.prototype.on
until: '4.0.0'
since: '3.11'
---

Historically, Ember has extended the `Function.prototype` with a few functions
(`on`, `observes`, `property`), over time we have moved away from using these
prototype extended functions in favor of using the official ES modules based
API.

In order to migrate away from `Function.prototype.on` you would update to using
`@ember/object/evented` ([see
documentation](https://api.emberjs.com/ember/release/functions/@ember%2Fobject%2Fevented/on))
directly.

For example, you would migrate from:

```js
import EmberObject from '@ember/object';
import { sendEvent } from '@ember/object/events';

let Job = EmberObject.extend({
logCompleted: function() {
console.log('Job completed!');
}.on('on')
});

let job = Job.create();

sendEvent(job, 'completed'); // Logs 'Job completed!'
```

Into:

```js
import EmberObject from '@ember/object';
import { on } from '@ember/object/evented';
import { sendEvent } from '@ember/object/events';

let Job = EmberObject.extend({
logCompleted: on('completed', function() {
console.log('Job completed!');
})
});

let job = Job.create();

sendEvent(job, 'completed'); // Logs 'Job completed!'
```

Please review the deprecation RFC over at
[emberjs/rfcs](https://emberjs.github.io/rfcs/0272-deprecation-native-function-prototype-extensions.html)
for more details.
72 changes: 72 additions & 0 deletions content/ember/v3/property-function-prototype-extension.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
---
id: function-prototype-extensions.property
title: Function.prototype.property
until: '4.0.0'
since: '3.11'
---

Historically, Ember has extended the `Function.prototype` with a few functions
(`on`, `observes`, `property`), over time we have moved away from using these
prototype extended functions in favor of using the official ES modules based
API.

In order to migrate away from `Function.prototype.property` you would update to using
`computed` from `@ember/object` ([see
documentation](https://api.emberjs.com/ember/release/functions/@ember%2Fobject/computed))
directly.

For example, you would migrate from:

```js
import EmberObject from '@ember/object';

let Person = EmberObject.extend({
init() {
this._super(...arguments);

this.firstName = 'Betty';
this.lastName = 'Jones';
},

fullName: function() {
return `${this.firstName} ${this.lastName}`;
}.computed('firstName', 'lastName')
});

let client = Person.create();

client.get('fullName'); // 'Betty Jones'

client.set('lastName', 'Fuller');
client.get('fullName'); // 'Betty Fuller'
```

Into:

```js
import EmberObject, { computed } from '@ember/object';

let Person = EmberObject.extend({
init() {
this._super(...arguments);

this.firstName = 'Betty';
this.lastName = 'Jones';
},

fullName: computed('firstName', 'lastName', function() {
return `${this.firstName} ${this.lastName}`;
})
});

let client = Person.create();

client.get('fullName'); // 'Betty Jones'

client.set('lastName', 'Fuller');
client.get('fullName'); // 'Betty Fuller'
```

Please review the deprecation RFC over at
[emberjs/rfcs](https://emberjs.github.io/rfcs/0272-deprecation-native-function-prototype-extensions.html)
for more details.

0 comments on commit c1428a3

Please sign in to comment.