ember-render-helpers

ember-render-helpers

Use the {{did-insert}}, {{did-update}}, {{will-destroy}} modifiers from @ember/render-modifiers as template helpers.

The original idea came from this Pre-RFC.

Installation

ember install ember-render-helpers

Use Glint or <template> tag? ✨

• Update your template registry to extend this addon's. Check the Glint documentation for more information.

  import '@glint/environment-ember-loose';
  
  import type EmberRenderHelpersRegistry from 'ember-render-helpers/template-registry';
  
  declare module '@glint/environment-ember-loose/registry' {
    export default interface Registry extends EmberRenderHelpersRegistry, /* other addon registries */ {
      // local entries
    }
  }
  

• In a <template> tag, use the named import to consume the helpers.

  import { action } from '@ember/object';
  import Component from '@glimmer/component';
  import { didInsertHelper } from 'ember-render-helpers';
  
  export default class HelloComponent extends Component {
    @action sayHello() {
      console.log('Hello!');
    }
  
    <template>
      {{didInsertHelper this.sayHello}}
    </template>
  }
  

Usage

ember-render-helpers provides 3 helpers. To avoid name conflicts with @ember/render-modifiers, these helpers are suffixed with -helper.

• {{did-insert-helper}}
• {{did-update-helper}}
• {{will-destroy-helper}}

All helpers expect a callback function as the 1st positional argument. You can pass parameters to this callback function as subsequent positional arguments, as named arguments, or using both.

{{did-insert-helper this.sayHello "Zoey"}}

import Component from '@glimmer/component';
import type { NamedParameters, PositionalParameters } from 'ember-render-helpers';

export default class HelloComponent extends Component {
  @action sayHello(positional: PositionalParameters, _named: NamedParameters) {
    const name = positional[0] as string;

    console.log(`Hello, ${name}!`);
  }
}

Example

Clicking the Toggle button will toggle the isVisible flag. When it switches to true, onDidInsert will be called, because the {{did-insert-helper}} helper is inserted. When it switches to false, onWillDestroy will be called, because the {{will-destroy-helper}} helper is removed.

Clicking the Random button will set randomValue to a new random value. Every time this happens, while isVisible is true, onDidUpdate will be called, because one of the parameters passed to the {{did-update-helper}} helper was updated.

Clicking the Random button does not cause {{did-insert-helper}} or {{will-destroy-helper}} to call onDidInsert and onWillDestroy, since these helpers are not triggered by parameter updates.

{{#if this.isVisible}}
  {{did-insert-helper   this.onDidInsert   1 2 3 this.randomValue foo="bar" qux="baz"}}
  {{will-destroy-helper this.onWillDestroy 1 2 3 this.randomValue foo="bar" qux="baz"}}
  {{did-update-helper   this.onDidUpdate   1 2 3 this.randomValue foo="bar" qux="baz"}}
{{/if}}

<button {{on "click" this.toggleVisibility}}>Toggle</button>
<button {{on "click" this.rollTheDice}}>Random</button>

import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @tracked isVisible = false;

  @tracked randomValue?: number;

  @action
  toggleVisibility() {
    this.isVisible = !this.isVisible;
  }

  @action
  rollTheDice() {
    this.randomValue = Math.random();
  }

  @action
  onDidInsert(positional: unknown[], named: Record<string, unknown>) {
    console.log({ positional, named });
    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
  }

  @action
  onWillDestroy(positional: unknown[], named: Record<string, unknown>) {
    console.log({ positional, named });
    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
  }

  @action
  onDidUpdate(positional: unknown[], named: Record<string, unknown>) {
    console.log({ positional, named });
    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }
  }
}