|
1 | 1 | # ember-resources
|
2 | 2 |
|
| 3 | +## 6.3.0 |
| 4 | + |
| 5 | +### Minor Changes |
| 6 | + |
| 7 | +- [#952](https://github.com/NullVoxPopuli/ember-resources/pull/952) [`1551b33`](https://github.com/NullVoxPopuli/ember-resources/commit/1551b33ae62f650c8f9bbdefe2aa1cffad44188f) Thanks [@NullVoxPopuli](https://github.com/NullVoxPopuli)! - Introduce resources as modifiers. |
| 8 | + This brings alignment with Starbeam's plans for modifiers as a universal primitive. |
| 9 | + |
| 10 | + In ember-resources, using modifiers as resources looks like this: |
| 11 | + |
| 12 | + ```js |
| 13 | + import { resource } from 'ember-resources'; |
| 14 | + import { modifier } from 'ember-resources/modifier'; |
| 15 | + |
| 16 | + const wiggle = modifier((element, arg1, arg2, namedArgs) => { |
| 17 | + return resource(({ on }) => { |
| 18 | + let animation = element.animate([ |
| 19 | + { transform: `translateX(${arg1}px)` }, |
| 20 | + { transform: `translateX(-${arg2}px)` }, |
| 21 | + ], { |
| 22 | + duration: 100, |
| 23 | + iterations: Infinity, |
| 24 | + }); |
| 25 | + |
| 26 | + on.cleanup(() => animation.cancel()); |
| 27 | + }); |
| 28 | + }); |
| 29 | + |
| 30 | + <template> |
| 31 | + <div {{wiggle 2 5 named="hello"}}>hello</div> |
| 32 | + </template> |
| 33 | + ``` |
| 34 | + |
| 35 | + The signature for the modifier here is _different_ from `ember-modifier`, where positional args and named args are grouped together into an array and object respectively. |
| 36 | + |
| 37 | + This signature for ember-resource's `modifier` follows the [plain function invocation](https://blog.emberjs.com/plain-old-functions-as-helpers/) signature. |
| 38 | + |
| 39 | + <details><summary>in Starbeam</summary> |
| 40 | + |
| 41 | + ```js |
| 42 | + import { resource } from '@starbeam/universal'; |
| 43 | + |
| 44 | + function wiggle(element, arg1, arg2, namedArgs) { |
| 45 | + return resource(({ on }) => { |
| 46 | + let animation = element.animate([ |
| 47 | + { transform: `translateX(${arg1}px)` }, |
| 48 | + { transform: `translateX(-${arg2}px)` }, |
| 49 | + ], { |
| 50 | + duration: 100, |
| 51 | + iterations: Infinity, |
| 52 | + }); |
| 53 | + |
| 54 | + on.cleanup(() => animation.cancel()); |
| 55 | + }); |
| 56 | + } |
| 57 | + |
| 58 | + <template> |
| 59 | + <div {{wiggle 2 5 named="hello"}}>hello</div> |
| 60 | + </template> |
| 61 | + ``` |
| 62 | + |
| 63 | + </details> |
| 64 | + |
3 | 65 | ## 6.2.2
|
4 | 66 |
|
5 | 67 | ### Patch Changes
|
|
0 commit comments