-
-
Save lllama/e720722ecc80280c1489c8abfdba0d8a to your computer and use it in GitHub Desktop.
Derived async manager
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Component from '@glimmer/component'; | |
import { action } from '@ember/object'; | |
import { tracked } from '@glimmer/tracking'; | |
const tasks = new WeakMap(); | |
class Task { | |
@tracked isLoading = true; | |
@tracked lastError; | |
@tracked result; | |
constructor(example) { | |
this.example = example; | |
this.perform(); | |
} | |
@action | |
async perform() { | |
this.isLoading = true; | |
try { | |
this.result = await this._fake(); | |
} catch (error) { | |
this.lastError = error; | |
throw error; | |
} finally { | |
this.isLoading = false; | |
} | |
this.lastError = null; | |
return this.result; | |
} | |
async _fake() { | |
await new Promise(r => setTimeout(r, 1000)); | |
if (Math.random() > 0.6) { | |
throw new Error('bork'); | |
} else { | |
return `foo ${this.example.name} bar`; | |
} | |
} | |
static find(example) { | |
if (!tasks.has(example)) { | |
tasks.set(example, new Task(example)); | |
} | |
return tasks.get(example); | |
} | |
} | |
export default class extends Component { | |
get task() { | |
return Task.find(this.args.example); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Controller from '@ember/controller'; | |
import { action } from '@ember/object'; | |
import { tracked } from '@glimmer/tracking'; | |
const examples = [ | |
{ id: 'example-1', name: 'Example 1' }, | |
{ id: 'example-2', name: 'Example 2' }, | |
{ id: 'example-3', name: 'Example 3' }, | |
{ id: 'example-4', name: 'Example 4' }, | |
{ id: 'example-5', name: 'Example 5' }, | |
]; | |
export default class ApplicationController extends Controller { | |
examples = examples; | |
@tracked currentExample = examples[0]; | |
get isSelected() { | |
return { [this.currentExample.id]: true }; | |
} | |
@action | |
updateExample({ target }) { | |
let [option = {}] = target.selectedOptions; | |
this.currentExample = examples.findBy('id', option.value); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment