Skip to content

Instantly share code, notes, and snippets.

@nelstrom
Created October 30, 2023 17:17
Show Gist options
  • Save nelstrom/96c335f188a0d1543fb9ae3a040cfbe8 to your computer and use it in GitHub Desktop.
Save nelstrom/96c335f188a0d1543fb9ae3a040cfbe8 to your computer and use it in GitHub Desktop.
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.
<div>
<h1>Product search</h1>
<input {{on 'input' this.doSearch}} value={{this.query}} />
</div>
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 });
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment