Provider Component

Synopsis

Principles

• Only concerned with how things work.
• Contains logic.
• Renderless.
• Yields data and functions for further interaction.

Example

Provider components are and invisible logic layer that provide you data and/or methods to operate with that.

DataManager Component

As an example, a very, very simple version of the <DataManager> component Desai (2017) describes in detail is been used. It takes an arbitrary list of items and will provide them in a sorted fashion.

{{yield (hash
  items=@items
  sortedItems=this.sortedItems
)}}

import Component from "@glimmer/component";

interface DataManagerArgs {
  items: unknown[];
}

export default class DataManagerComponent extends Component<DataManagerArgs> {
  get sortedItems(): any[] {
    return [...this.args.items].sort();
  }
}

Usage

The <DataManager> is invoked and @items are passed in. In this case it’s declarative but can also be a variable available to the template. The yielded data variable provides access to the sorted items, that are displayed in a list.

<Examples::DataManager 
  @items={{array "banana" "apple" "ananas"}} 
  as |data|
>
  <ul>
    {{#each data.sortedItems as |item|}}
      <li>{{item}}</li>
    {{/each}}
  </ul>
</Examples::DataManager>