Does not work with native classes

Using Ember 3.6, ember-concurrency 0.8.26

Given a component defined with ‘classic’ syntax, all is good.

import Component from '@ember/component'
import { task, timeout } from 'ember-concurrency';

export default Component.extend({
  result: null,
  doStuff: task(function*(){
    yield timeout(1000);
    this.set('result', 'done');
  })
});

If, however, we use native class syntax

import Component from '@ember/component';
import { task, timeout } from 'ember-concurrency';

export default class NativeTaskComponent extends Component {
  result = null;
  doStuff = task(function*() {
    yield timeout(1000);
    this.set('result', new Date());
  });
}

We see -task-property.js:620 Uncaught Error: It looks like you tried to perform a task via this.nameOfTask.perform(), which isn't supported. Use 'this.get('nameOfTask').perform()' instead.

I’ve spent a little time trying to figure out why this is the case and have found that when creating a TaskProperty, the function passed to super does not get executed https://github.com/machty/ember-concurrency/blob/master/addon/-task-property.js#L416-L437

export class TaskProperty extends _ComputedProperty {
  constructor(taskFn) {
    let tp;
    console.log('called before super');
    super(function(_propertyName) {
      console.log('called inside super anonymous function');
      taskFn.displayName = `${_propertyName} (task)`;
...

The transpiled output of the classic invocation is

define("dummy/components/classic-task/component", ["exports", "ember-concurrency"], function (_exports, _emberConcurrency) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.default = void 0;

  var _default = Ember.Component.extend({
    result: null,
    doStuff: (0, _emberConcurrency.task)(function* () {
      yield (0, _emberConcurrency.timeout)(1000);
      this.set('result', 'done');
    })
  });

  _exports.default = _default;
});

Whilst the native version is

define("dummy/components/native-task/component", ["exports", "ember-concurrency"], function (_exports, _emberConcurrency) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.default = void 0;

  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

  class NativeTaskComponent extends Ember.Component {
    constructor(...args) {
      super(...args);

      _defineProperty(this, "result", null);

      _defineProperty(this, "doStuff", (0, _emberConcurrency.task)(function* () {
        yield (0, _emberConcurrency.timeout)(1000);
        this.set('result', new Date());
      }));
    }

  }

  _exports.default = NativeTaskComponent;
});

So it looks like it’s caused by the way the property ends up being defined on the native class that is causing the issue.

[buschtoens]

For completeness sake: In the Octane edition of Ember.js, you can create a task like this:

class MyClass {
  @task(function*() {
    // ...
  }) myTask;
}

[aaronfischer]

Hmm, I’m seeing the “classic” syntax generating that error: Class constructor ComputedProperty cannot be invoked without 'new':

  setupSso: task(function* () {
    let tokenValue = this.getTokenParam();
    if (tokenValue) {
    ...

References (-task-property.js:398):

  function TaskProperty(taskFn) {
    let tp = this;
    _utils._ComputedProperty.call(this, function (_propertyName) {     // THIS LINE
      taskFn.displayName = `${_propertyName} (task)`;
      return Task.create({
        fn: tp.taskFn,