Usage without {{else}} block (make to="inverse" optional)

[jakebixbyavalara]

trafficstars

I was hoping to use this as a simple provider component, where the value was yielded and always consumable within the block, without the {{#if}}{{else}} logic. Currently the value is only yielded in the resolved state, which seems to prevent the use of liquid-fire within the block since it starts out rendering the else block.

I've tested out an override template within my app where it is just yielding the resolved value, and it seems to work as I was hoping for.

{{yield this.resolvedValue}}

I'm willing to help out if you'd be interested in enabling this sort of functionality, but I think it might be tricky supporting both ways in one template. I just wanted to maybe see if you all had any thoughts on this before proceeding much further.

I tried out a couple different ideas on supporting both ways:

1. Make a version of the component that uses the above template with an appropriate name, like async-provider.

{{#async-provider this.value as |value|}}
...

2. Do the above, but change the current async-await component name to async-if then adopt the provider behavior with the async-await component.

{{#async-if this.value as |value|}}
{{else}}
{{/async-if}}
{{#async-await this.value as |value|}}
...

3. Use a flag as a second positional param in the component to use an alternate template:

{{#if this.isProvider}}
  {{yield this.resolvedValue}}
{{else}}
  {{#if this.isResolved}}
    {{yield this.resolvedValue}}
  {{else}}
    {{yield to="inverse"}}
  {{/if}}
{{/if}}

{{#async-await this.value true as |sections|}}
...

Anyhow, great work, great component, and thanks for making it for the masses!

[chancancode]

The problem with that in general, is that undefined is a perfectly valid resolution value, so you can't differentiate between a promise that is pending or has resolved into undefined. What is the specific liquid-fire use case you have?

[jakebixbyavalara]

@chancancode When I tried wrapping a liquid-if with the helper, it was not animating. The resolved yield would kick over and the liquid-if contents were rendering instantly with no transition animation.

This is more or less what the template was doing:

{{#async-await this.records as |records|}}
  {{#liquid-if records.length use="fade"}}
    {{#each records as |record|}}
      title: {{record.title}}
    {{/each}}
  {{/liquid-if}}
{{/async-await}}

When I added an async-await template in my app with only the single yield (to override the addon's template) the animation works as expected.