https://github.com/nullvoxpopuli/ember-functions-as-modifiers-polyfill
Polyfill for https://github.com/emberjs/rfcs/pull/757
https://github.com/nullvoxpopuli/ember-functions-as-modifiers-polyfill
Last synced: 5 months ago
JSON representation
Polyfill for https://github.com/emberjs/rfcs/pull/757
- Host: GitHub
- URL: https://github.com/nullvoxpopuli/ember-functions-as-modifiers-polyfill
- Owner: NullVoxPopuli
- License: mit
- Created: 2022-01-08T21:23:05.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2026-03-09T00:49:02.000Z (5 months ago)
- Last Synced: 2026-03-09T02:22:28.363Z (5 months ago)
- Language: TypeScript
- Size: 1.99 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-functions-as-modifiers-polyfill
==============================================================================
[](https://badge.fury.io/js/ember-functions-as-modifiers-polyfill)
[](https://github.com/NullVoxPopuli/ember-functions-as-modifiers-polyfill/actions/workflows/ci.yml)
Use plain functions as modifiers.
Polyfill for [RFC: 757 | Default Modifier Manager](https://github.com/emberjs/rfcs/pull/757)
Compatibility
------------------------------------------------------------------------------
* Ember.js v3.25 or above
* Ember CLI v3.25 or above
* Node.js v14 or above
* ember-auto-import v1 or above
* embroider-optimized
Installation
------------------------------------------------------------------------------
```
ember install ember-functions-as-modifiers-polyfill
```
Usage
------------------------------------------------------------------------------
Define a function (doesn't have to be in a component)
```js
import Component from '@glimmer/component';
export default class MyComponent extends Component {
myModifier = (element, x) => {
let handler = () => console.log(x); // -> 3
element.addEventListener('click', handler);
return () => element.removeEventListener('click', handler);
}
}
```
```hbs
```
Named arguments will all be grouped together in the last argument of the helper:
```js
import Component from '@glimmer/component';
export default class MyComponent extends Component {
doStuff = (element, x, options) => {
let handler = () => console.log(x, options.optionA, options.optionB); // -> 3 2 3
element.addEventListener('click', handler);
return () => element.removeEventListener('click', handler);
};
}
```
```hbs
```
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).