Default value for Async Provider?

[andy-UKC]

If a component could have a parent with a @provideAsync getter, is there a way to set the default value (as in synchronous providers) for cases where there is not parental @provideAsync?

[keithamus]

Async is determined by the provider; the consumer has no knowledge of how the provider gets its data. In these cases it's probably best to give the consumer a default.

@controller
@providable
class ServerState extends HTMLElement {
  @provideAsync get hitCount(): Promise<number> {
    return (async () => {
      const res = await fetch('/hitcount')
      const json = await res.json()
      return json.hits
    })()
  }
}

@controller
class HitCount extends HTMLElement {
  @consume hitCount = 0;
}

If you want your consumer to have side-effects when it is set - as well as having a default - it's not quite so straightforward. One way to do this would be to encapsulate the value as a private field:

@controller
@providable
class ServerState extends HTMLElement {
  @provideAsync get hitCount(): Promise<number> {
    return (async () => {
      const res = await fetch('/hitcount')
      const json = await res.json()
      return json.hits
    })()
  }
}

@controller
class HitCount extends HTMLElement {
  #hitCount = 0;
  get hitCount() {
    return this.#hitCount
  }
  @consume set hitCount(value: number) {
    this.#hitCount = 0;
    // Trigger a side effect on change
    this.render();
  }

  render() {
    this.textContent = `${this.hitCount} hits!`;
  }
}

I hope this answers your question sufficiently.

[andy-UKC]

Thanks for the detailed reply.

Very useful information.

Though is there any way to detect if there will be a provider upstream? Ie in the example you gave, if HitCount was not a child of ServerState, then in that case, source the hitCount value from elsewhere (asynchronously).

The use case I have is a component that checks a store for a value. To prevent multiple connections to the store (the component could be rendered multiple times within its parent), I'd like to use a provider higher up. But there are also times when the component will be used more standalone, and in that case it should access the store itself (default value, but only if not provider)

[keithamus]

The way @consume works under the hood is that it dispatches a bubbling context-request event. Any component that can @provide will call stopPropagation(), and so you can take advantage of the event bubbling and have a listener set up on the document to determine if the context-request made it all the way up to the document; if it did then the request for context hasn't been fulfilled:

@controller
class HitCount extends HTMLElement {
  #hitCount = 0;
  get hitCount() {
    return this.#hitCount
  }
  @consume set hitCount(value: number) {
    this.#hitCount = 0;
    // Trigger a side effect on change
    this.render();
  }

  #controller: AbortController | null = null;
  connectedCallback() {
    const signal = this.#controller = new AbortController();
    // Catch any unhandled context-request events at the document level.
    this.ownerDocument.addEventListener('context-request', e => {
      if (event.context.name === 'hitCount' && event.target === this) {
        // 'hitCount' was not provided for this element... so use a different state:
        this.hitCount = Infinity
      }
    }, {signal});
  }
  disconnectedCallback() {
    // Don't forget to unbind global listeners!
    this.#controller.abort();
  }

  render() {
    this.textContent = `${this.hitCount} hits!`;
  }
}

[andy-UKC]

Thats awesome, thanks for that, looks like it does just what I need.

Is connectedCallback guaranteed to fire before the event is dispatched? Or would this be an instance where attaching the eventListener in the constructor is better.

[keithamus]

Oh that's a good point, the connectedCallback() runs after the @consume event dispatch so you'd need to attach it during the constructor().

[andy-UKC]

Great, thanks for your help with this