Skip to content

Instantly share code, notes, and snippets.

@chriskrycho
Created April 19, 2021 21:29
Show Gist options
  • Select an option

  • Save chriskrycho/2dfcefb5e6ffa873cc075c2d9910e266 to your computer and use it in GitHub Desktop.

Select an option

Save chriskrycho/2dfcefb5e6ffa873cc075c2d9910e266 to your computer and use it in GitHub Desktop.
minimally it works
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
class TAD {
@tracked state = [0];
get isLoaded() {
return this.state[0] === 1;
}
get isError() {
return this.state[0] === 2;
}
get isLoading() {
return this.state[0] === 0;
}
get value() {
return this.isLoaded ? this.state[1] : null;
}
get error() {
return this.isError ? this.state[1] : null;
}
constructor(promise) {
promise.then(
(value) => this.state = [1, value],
(error) => this.state = [2, error],
);
}
}
export default class ApplicationController extends Controller {
@tracked something;
setTo = (thing) => {
switch (thing) {
case 'pending':
this.something = new TAD(new Promise(() => {}));
break;
case 'resolveNull':
this.something = new TAD(Promise.resolve(null));
break;
case 'resolve12':
this.something = new TAD(Promise.resolve(12));
break;
case 'errorNull':
this.something = new TAD(Promise.reject(null));
break;
case 'errorWat':
this.something = new TAD(Promise.reject('wat'));
break;
default:
throw 'missing/unhandled case';
}
}
}
/*
<button {{on "click" (fn this.setTo 'pending')}}>set to pending</button>
<button {{on "click" (fn this.setTo 'resolveNull')}}>set to loaded(null)</button>
<button {{on "click" (fn this.setTo 'resolve12')}}>set to loaded(12)</button>
<button {{on "click" (fn this.setTo 'errorNull')}}>set to error(null)</button>
<button {{on "click" (fn this.setTo 'errorWat')}}>set to error("wat")</button>
*/
import { helper } from '@ember/component/helper';
export default helper(function and([a, b]/*, hash*/) {
return a && b;
});
<button {{on "click" (fn this.setTo 'pending')}}>set to pending</button>
<button {{on "click" (fn this.setTo 'resolveNull')}}>set to loaded(null)</button>
<button {{on "click" (fn this.setTo 'resolve12')}}>set to loaded(12)</button>
<button {{on "click" (fn this.setTo 'errorNull')}}>set to error(null)</button>
<button {{on "click" (fn this.setTo 'errorWat')}}>set to error("wat")</button>
{{#if (and this.something.isLoaded this.something.value)}}
<p style='color: green;'>loaded with {{this.something.value}}</p>
{{else if this.something.isLoaded}}
<p style='color: green;'>loaded with <code>null</code></p>
{{else if (and this.something.isError this.something.error)}}
<p style='color: red;'>rejected with {{this.something.error}}</p>
{{else if this.something.isError}}
<p style='color: red;'>rejected with <code>null</code></p>
{{else if this.something.isLoading}}
<p>loading...</p>
{{else}}
<p>🤷🏻‍♂️</p>
{{/if}}
{
"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