Skip to content
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions content/ember/v6/deprecate-ember-mixin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
---
title: Deprecating Ember.Mixin
until: 7.0.0
since: 6.5.0
---

`Ember.Mixin` is deprecated. This is part of the legacy `@ember/object` API and is not compatible with native classes. Instead of using mixins, you should refactor your code to use class-based patterns.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My strategy for removing mixins from a codebase has been to copy the code into the places that mixed in the mixin and then if there is any common state, extract that to a service. From there I refactor to utilities or to the service to clean it up.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clarification: Mixins had shared state 😬


One common pattern to replace mixins is to use class decorators.

### Before: Using Mixins

Here is an example of a mixin that provides "editable" functionality to a class:

```javascript
// app/mixins/editable.js
import Mixin from '@ember/object/mixin';

export default Mixin.create({
isEditing: false,

edit() {
console.log('starting to edit');
this.set('isEditing', true);
},
});
```

```javascript
// app/models/comment.js
import EmberObject from '@ember/object';
import EditableMixin from '../mixins/editable';

export default class Comment extends EmberObject.extend(EditableMixin) {
post = null;
}
```

### After: Using Class Decorators

You can achieve the same result by creating a class decorator. This decorator will add the same properties and methods to the class it's applied to.

First, create the decorator function:

```javascript
// app/decorators/editable.js
import { tracked } from '@glimmer/tracking';

export function editable(klass) {
return class extends klass {
@tracked isEditing = false;

edit() {
console.log('starting to edit');
this.isEditing = true;
}
};
}
```

Then, apply the decorator to your class:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Showing how to do this with a plain function call rather than decorator syntax might be good.

Especially because we still offer babel-style decorator call signatures, not the standards track stage3 ones.


```javascript
// app/models/comment.js
import EmberObject from '@ember/object';
import { editable } from '../decorators/editable';

@editable
export default class Comment extends EmberObject {
post = null;
}
```

This approach provides the same functionality as the mixin but uses standard JavaScript features, making the code easier to understand.