https://github.com/buschtoens/ember-render-helpers

Helpers that complement @ember/render-modifiers
https://github.com/buschtoens/ember-render-helpers

ember ember-addon ember-helper ember-helpers ember-template-helper emberjs

Last synced: 4 days ago
JSON representation

Helpers that complement @ember/render-modifiers

• Host: GitHub
• URL: https://github.com/buschtoens/ember-render-helpers
• Owner: buschtoens
• License: mit
• Created: 2019-08-27T08:22:49.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-11-11T10:56:19.000Z (3 months ago)
• Last Synced: 2025-01-15T10:54:39.067Z (12 days ago)
• Topics: ember, ember-addon, ember-helper, ember-helpers, ember-template-helper, emberjs
• Language: TypeScript
• Homepage:
• Size: 1.29 MB
• Stars: 22
• Watchers: 3
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-ember - ember-render-helpers - `@ember/render-modifiers` as template helpers. (Packages / Helpers)

README

        
[![This project uses GitHub Actions for continuous integration.](https://github.com/buschtoens/ember-render-helpers/actions/workflows/ci.yml/badge.svg)](https://github.com/buschtoens/ember-render-helpers/actions/workflows/ci.yml)

# ember-render-helpers

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

The original idea came from [this Pre-RFC][pre-rfc].

[render-modifiers]: https://github.com/emberjs/ember-render-modifiers#readme

[pre-rfc]: https://github.com/emberjs/rfcs/issues/484

## Installation

```

ember install ember-render-helpers

```

Use Glint or <template> tag? ✨

- Update your template registry to extend this addon's. Check the [Glint documentation](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) for more information.

    ```ts

    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 `` tag, use the named import to consume the helpers.

    ```ts

    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!');

      }

      

        {{didInsertHelper this.sayHello}}

      

    }

    ```

## 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.

```hbs

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

```

```ts

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.

```hbs

{{#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}}

Toggle

Random

```

```ts

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) {

    console.log({ positional, named });

    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }

  }

  @action

  onWillDestroy(positional: unknown[], named: Record) {

    console.log({ positional, named });

    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }

  }

  @action

  onDidUpdate(positional: unknown[], named: Record) {

    console.log({ positional, named });

    // => { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }

  }

}

```