Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Introduce Await component for nicer template usage #709

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

chriskrycho
Copy link
Collaborator

The existing load function/helper combo gets the job done, but this new component has a similar top-level API but requires no if-based branching. Instead, it uses named blocks to render the resulting states.

import { Async } from 'ember-async-data';

<template>
  <Async @data={{Promise.resolve 123}}>
    <:pending>Still waiting...</:pending>
    <:resolved as |value|>
      The value is: {{value}}.
    </:resolved>
    <:rejected>Whoops! Something went wrong!</:rejected>
  </Async>
</template>

This ends up being both briefer and less error prone, not least since it provides the resolved value automatically from the resolved block, whereas expressly checking {{#if someAsyncData.isResolved}} allowed the further {{someAsyncData.value}} access but did not provide it automatically.

The existing `load` function/helper combo gets the job done, but this
new component has a similar top-level API but requires no `if`-based
branching. Instead, it uses named blocks to render the resulting state.

    import { Async } from 'ember-async-data';

    <template>
      <Async @DaTa={{Promise.resolve 123}}>
        <:pending>Still waiting...</:pending>
        <:resolved as |value|>
          The value is: {{value}}.
        </:resolved>
        <:rejected>Whoops! Something went wrong!</:rejected>
      </Async>
    </template>

This ends up being both briefer *and* less error prone, not least since
it provides the resolved value automatically from the `resolved` block,
whereas expressly checking `{{#if someAsyncData.isResolved}}` *allowed*
the further `{{someAsyncData.value}}` access but did not provide it
automatically.
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seemed to be the best approach we had when I spiked this out a few months ago, but I'm totally up for a different approach if we have something better now.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

@NullVoxPopuli NullVoxPopuli left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding more gjs/gts files!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants