Skip to content

Add Mixin deprecation guide #1408

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
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.

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:

```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.