Function getPromiseState

Example

We can use getPromiseState to dynamically load and render a component

import { getPromiseState } from 'reactiveweb/get-promise-state';

let state = getPromiseState(() => import('./some-module/component'));

<template>
  {{#if state.isLoading}}
    ... pending ...
  {{else if state.error}}
    oh no!
  {{else if state.resolved}}
    <state.resolved />
  {{/if}}
</template>
Copy

Example

getPromiseState can also be used in a class without @cached, because it maintains its own cache.

import Component from '@glimmer/component';
import { getPromiseState } from 'reactiveweb/get-promise-state';

async function readFromSomewhere() { // implementation omitted for brevity
}

export default class Demo extends Component {
  // doesn't matter how many times state is accessed, you get a stable state
  get state() {
    return getPromiseState(readFromSomewhere);
  }

  <template>
    {{#if this.state.resolved}}
       ...
    {{/if}}
  </template>
}
Copy

Example

A reactively constructed function will also be used and have its result cached between uses

import Component from '@glimmer/component';
import { getPromiseState } from 'reactiveweb/get-promise-state';

async function readFromSomewhere() { // implementation omitted for brevity
}

export default class Demo extends Component {
  // Note: the @cached is important here because we don't want repeat accesses
  //       to cause doAsync to be called again unless @id changes
  @cached
  get promise() {
    return this.doAsync(this.args.id);
  }

  get state() {
    return getPromiseState(this.promise);
  }

  <template>
    {{#if this.state.resolved}}
       ...
    {{/if}}
  </template>
}
Copy

NOTE: This getPromiseState is not a replacement for WarpDrive's getRequestState namely, the getPromiseState in this library (reactiveweb) does not support futures, cancellation, or anything else specific to warp-drive.

all in all, they are very similar. The primary use case I had for creating my own is that I wanted dynamic module loading (with import) to be one line (shown in the first example).

reactiveweb's getPromiseState is made primarily for my needs in my own projects, and I don't intend to say anything negative about @warp-drives getPromiseState -- I actually took a lot of code from it! it's a good tool.