Messing around with Effection. Trying to create a scope, which is torn down with the component. And trying to run a task in that scope in response to user interaction.

product-search.hbs

<div>
  <h1>Product search</h1>

  <input {{on 'input' this.doSearch}} value={{this.query}} />
</div>

product-search.js

import Component from '@glimmer/component';
import { registerDestructor } from '@ember/destroyable';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import { createScope, useAbortSignal } from 'effection';

export default class ProductSearchComponent extends Component {
  @tracked query = '';

  constructor(...args) {
    super(...args);
    console.log('Creating ProductSearch');

    let [_scope, destroy] = createScope();
    this.scope = _scope;

    registerDestructor(this, () => {
      destroy();
      console.log('Destroying ProductSearch');
    });
  }

  @action
  doSearch(e) {
    this.query = e.target.value;

    const url = `https://dummyjson.com/products/search?q=${this.query}`;
    this.scope.run(function* () {
      console.log('Running in scope...', { url });
      let signal = yield* useAbortSignal();
      const response = yield* fetch(url, {
        signal,
      });
      const result = yield* response.json();
      console.log({ response, result });
    });
  }
}