Task auto-cancellation

components.my-component\.hbs

<h2>My Component</h2>

<ol>
  <li>Open the console and see the tasks running.</li>
  <li>Observe them stop when you hide me.</li>
  <li>Try commenting out my willDestroy() hook and see what happens when you hide me!</li>
</ol>

components.my-component\.js

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

export default class extends Component {
  constructor(owner, args) {
    super(owner, args);
    this.componentTask.perform();
    this.util = new Util();
    this.waitForUtilTask.perform(); 
  }

  @task
  *componentTask() {
    let count = 1;
    while(1) {
      yield timeout(1000);
      console.log(`componentTask ${count}`);
      count++;
    }
  }

  @task
  *waitForUtilTask() {
    const performUtilTask = async () => this.util.utilTask.perform();
    yield performUtilTask();
  }

  willDestroy() {
    //this.util.utilTask.cancelAll();
  }
}

components.util\.js

import { task, timeout } from 'ember-concurrency';

export default class Util {
  @task
  *utilTask() {
    let count = 1;
    while(1) {
      yield timeout(1000);
      console.log(`utilTask ${count}`);
      count++;
    }
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

  @tracked shouldShowComponent = true;

  @action
  toggleComponent() {
    this.shouldShowComponent = !this.shouldShowComponent;
  }
}

templates.application\.hbs

<h1>Task auto-cancellation (indirect child task)</h1>

<button {{on 'click' this.toggleComponent}}>
  {{if this.shouldShowComponent 'Hide' 'Show'}} Component
</button>

{{#if this.shouldShowComponent}}
  <MyComponent />
{{/if}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-concurrency": "2.2.0"
  }
}