Does Ember Octane Route class support using mixins?

Question

I am upgrading to Ember Octane and I understand that mixins have been deprecated. I will continue to use them until I figure out how to replace them. In the meantime, I would like to switch my route over to using the new class syntax, as opposed to Route.extend. Does the new route class syntax support route mixins? If yes, how?

This is related to Ember Octane Upgrade How to pass values from component to controller

Pre-ember Octane:

import Route from '@ember/routing/route';
import AbcAuthenticatedRouteMixin from '../../mixins/abc-authenticated-route-mixin';

export default Route.extend(AbcAuthenticatedRouteMixin, {

    model() {

        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
        };
    },
})

Post-ember Octane:

import Route from '@ember/routing/route';
import AbcAuthenticatedRouteMixin from '../../mixins/abc-authenticated-route-mixin';

export default class ChangePasswordRoute extends Route(AbcAuthenticatedRouteMixin, {

    model() {

        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
        };
    },
}) // I get an error here that says: '{' expected

Yes, you can limitedly use Mixins in Native class syntax. This guide should help you: guides.emberjs.com/release/upgrading/current-edition/… — Gokul Kathirvel

mistahenry mistahenry · Accepted Answer · 2020-03-25T10:41:34

Native class syntax does not directly have an equivalent for the Ember mixin system. If you want to continue using mixins as you convert to Octane, you can do so by mixing classic class extension syntax with native class syntax:

Try

import Route from '@ember/routing/route';
import AbcAuthenticatedRouteMixin from '../../mixins/abc-authenticated-route-mixin';

export default class ChangePasswordRoute extends Route.extend(AbcAuthenticatedRouteMixin) {

    model() {

        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
        };
    }
}

In addition, some new framework classes, such as Glimmer components, do not support Ember mixins at all. In the future, mixins will be removed from the framework, and will not be replaced directly. For apps that use mixins, the recommended path is to refactor the mixins to other patterns, including:

Pure native classes, sharing functionality via class inheritance. Utility functions which can be imported and used in multiple classes. Services which can be injected into multiple classes, sharing functionality and state between them.

Does Ember Octane Route class support using mixins?

1 Answers