{"id":13806880,"url":"https://github.com/buschtoens/ember-render-helpers","last_synced_at":"2025-04-08T03:16:24.805Z","repository":{"id":35086816,"uuid":"204655479","full_name":"buschtoens/ember-render-helpers","owner":"buschtoens","description":"Helpers that complement @ember/render-modifiers","archived":false,"fork":false,"pushed_at":"2025-02-18T14:55:13.000Z","size":1112,"stargazers_count":23,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-06T07:01:57.683Z","etag":null,"topics":["ember","ember-addon","ember-helper","ember-helpers","ember-template-helper","emberjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/buschtoens.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-27T08:22:49.000Z","updated_at":"2025-02-18T14:54:17.000Z","dependencies_parsed_at":"2024-01-09T05:01:50.682Z","dependency_job_id":"ad66c409-fc73-4072-b381-ea8837927cb6","html_url":"https://github.com/buschtoens/ember-render-helpers","commit_stats":{"total_commits":265,"total_committers":6,"mean_commits":"44.166666666666664","dds":"0.10943396226415092","last_synced_commit":"156942c1784ee2cf6954cc9a6a018f5fbe350778"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buschtoens%2Fember-render-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buschtoens%2Fember-render-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buschtoens%2Fember-render-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/buschtoens%2Fember-render-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/buschtoens","download_url":"https://codeload.github.com/buschtoens/ember-render-helpers/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767236,"owners_count":20992548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon","ember-helper","ember-helpers","ember-template-helper","emberjs"],"created_at":"2024-08-04T01:01:17.477Z","updated_at":"2025-04-08T03:16:24.771Z","avatar_url":"https://github.com/buschtoens.png","language":"TypeScript","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)\n\n# ember-render-helpers\n\nUse the `{{did-insert}}`, `{{did-update}}`, `{{will-destroy}}` modifiers from [`@ember/render-modifiers`][render-modifiers] as template helpers.\n\nThe original idea came from [this Pre-RFC][pre-rfc].\n\n[render-modifiers]: https://github.com/emberjs/ember-render-modifiers#readme\n[pre-rfc]: https://github.com/emberjs/rfcs/issues/484\n\n## Installation\n\n```\nember install ember-render-helpers\n```\n\n\u003cdetails\u003e\n\n\u003csummary\u003eUse Glint or \u003ccode\u003e\u0026lt;template\u0026gt;\u003c/code\u003e tag? ✨\u003c/summary\u003e\n\n- 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.\n\n    ```ts\n    import '@glint/environment-ember-loose';\n\n    import type EmberRenderHelpersRegistry from 'ember-render-helpers/template-registry';\n\n    declare module '@glint/environment-ember-loose/registry' {\n      export default interface Registry extends EmberRenderHelpersRegistry, /* other addon registries */ {\n        // local entries\n      }\n    }\n    ```\n\n- In a `\u003ctemplate\u003e` tag, use the named import to consume the helpers.\n\n    ```ts\n    import { action } from '@ember/object';\n    import Component from '@glimmer/component';\n    import { didInsertHelper } from 'ember-render-helpers';\n\n    export default class HelloComponent extends Component {\n      @action sayHello() {\n        console.log('Hello!');\n      }\n\n      \u003ctemplate\u003e\n        {{didInsertHelper this.sayHello}}\n      \u003c/template\u003e\n    }\n    ```\n\n\u003c/details\u003e\n\n\n## Usage\n\n`ember-render-helpers` provides 3 helpers. To avoid name conflicts with `@ember/render-modifiers`, these helpers are suffixed with `-helper`.\n\n- `{{did-insert-helper}}`\n- `{{did-update-helper}}`\n- `{{will-destroy-helper}}`\n\nAll 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.\n\n```hbs\n{{did-insert-helper this.sayHello \"Zoey\"}}\n```\n\n```ts\nimport Component from '@glimmer/component';\nimport type { NamedParameters, PositionalParameters } from 'ember-render-helpers';\n\nexport default class HelloComponent extends Component {\n  @action sayHello(positional: PositionalParameters, _named: NamedParameters) {\n    const name = positional[0] as string;\n\n    console.log(`Hello, ${name}!`);\n  }\n}\n```\n\n\n### Example\n\nClicking the `Toggle` button will toggle the `isVisible` flag. When it switches\nto `true`, `onDidInsert` will be called, because the `{{did-insert-helper}}` helper is\ninserted. When it switches to `false`, `onWillDestroy` will be called, because\nthe `{{will-destroy-helper}}` helper is removed.\n\nClicking the `Random` button will set `randomValue` to a new random value. Every\ntime this happens, while `isVisible` is `true`, `onDidUpdate` will be called,\nbecause one of the parameters passed to the `{{did-update-helper}}` helper was updated.\n\nClicking the `Random` button _does not_ cause `{{did-insert-helper}}` or\n`{{will-destroy-helper}}` to call `onDidInsert` and `onWillDestroy`, since these\nhelpers are not triggered by parameter updates.\n\n```hbs\n{{#if this.isVisible}}\n  {{did-insert-helper   this.onDidInsert   1 2 3 this.randomValue foo=\"bar\" qux=\"baz\"}}\n  {{will-destroy-helper this.onWillDestroy 1 2 3 this.randomValue foo=\"bar\" qux=\"baz\"}}\n  {{did-update-helper   this.onDidUpdate   1 2 3 this.randomValue foo=\"bar\" qux=\"baz\"}}\n{{/if}}\n\n\u003cbutton {{on \"click\" this.toggleVisibility}}\u003eToggle\u003c/button\u003e\n\u003cbutton {{on \"click\" this.rollTheDice}}\u003eRandom\u003c/button\u003e\n```\n\n```ts\nimport { action } from '@ember/object';\nimport Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n\nexport default class extends Component {\n  @tracked isVisible = false;\n\n  @tracked randomValue?: number;\n\n  @action\n  toggleVisibility() {\n    this.isVisible = !this.isVisible;\n  }\n\n  @action\n  rollTheDice() {\n    this.randomValue = Math.random();\n  }\n\n  @action\n  onDidInsert(positional: unknown[], named: Record\u003cstring, unknown\u003e) {\n    console.log({ positional, named });\n    // =\u003e { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }\n  }\n\n  @action\n  onWillDestroy(positional: unknown[], named: Record\u003cstring, unknown\u003e) {\n    console.log({ positional, named });\n    // =\u003e { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }\n  }\n\n  @action\n  onDidUpdate(positional: unknown[], named: Record\u003cstring, unknown\u003e) {\n    console.log({ positional, named });\n    // =\u003e { positional: [1, 2, 3, 0.1337...], named: { foo: 'bar', qux: 'baz' } }\n  }\n}\n```\n","funding_links":[],"categories":["Packages"],"sub_categories":["Helpers"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuschtoens%2Fember-render-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbuschtoens%2Fember-render-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbuschtoens%2Fember-render-helpers/lists"}