|
| 1 | +# no-array-prototype-extensions |
| 2 | + |
| 3 | +Do not use Ember's `array` prototype extensions. |
| 4 | + |
| 5 | +Use native array functions instead of `.filterBy`, `.toArray()` in Ember modules. |
| 6 | + |
| 7 | +Use lodash helper functions instead of `.uniqBy()`, `sortBy()` in Ember modules. |
| 8 | + |
| 9 | +Use immutable update style with `@tracked` properties or `TrackedArray` from `tracked-built-ins` instead of `.pushObject`, `removeObject` in Ember modules. |
| 10 | + |
| 11 | +## Examples |
| 12 | + |
| 13 | +Examples of **incorrect** code for this rule: |
| 14 | + |
| 15 | +```js |
| 16 | +/** Helper functions **/ |
| 17 | +import Component from '@glimmer/component'; |
| 18 | + |
| 19 | +export default class SampleComponent extends Component { |
| 20 | + abc = ['x', 'y', 'z', 'x']; |
| 21 | + |
| 22 | + def = this.abc.without('x'); |
| 23 | + ghi = this.abc.uniq(); |
| 24 | + jkl = this.abc.toArray(); |
| 25 | + mno = this.abc.uniqBy('y'); |
| 26 | + pqr = this.abc.sortBy('z'); |
| 27 | +} |
| 28 | +``` |
| 29 | + |
| 30 | +```js |
| 31 | +/** Observable-based functions **/ |
| 32 | +import Component from '@glimmer/component'; |
| 33 | +import { action } from '@ember/object'; |
| 34 | + |
| 35 | +export default class SampleComponent extends Component { |
| 36 | + abc = []; |
| 37 | + @action |
| 38 | + someAction(newItem) { |
| 39 | + this.abc.pushObject('1'); |
| 40 | + } |
| 41 | +} |
| 42 | +``` |
| 43 | + |
| 44 | +Examples of **correct** code for this rule: |
| 45 | + |
| 46 | +```js |
| 47 | +/** Helper functions **/ |
| 48 | +import Component from '@glimmer/component'; |
| 49 | +import { uniqBy, sortBy } from 'lodash'; |
| 50 | + |
| 51 | +export default class SampleComponent extends Component { |
| 52 | + abc = ['x', 'y', 'z', 'x']; |
| 53 | + |
| 54 | + def = this.abc.filter((el) => el !== 'x'); |
| 55 | + ghi = [...new Set(this.abc)]; |
| 56 | + jkl = [...this.abc]; |
| 57 | + mno = uniqBy(this.abc, 'y'); |
| 58 | + pqr = sortBy(this.abc, 'z'); |
| 59 | +} |
| 60 | +``` |
| 61 | + |
| 62 | +```js |
| 63 | +/** Observable-based functions **/ |
| 64 | +/** Use immutable tracked property is OK **/ |
| 65 | +import Component from '@glimmer/component'; |
| 66 | +import { action } from '@ember/object'; |
| 67 | +import { tracked } from '@glimmer/tracking'; |
| 68 | + |
| 69 | +export default class SampleComponent extends Component { |
| 70 | + @tracked abc = []; |
| 71 | + |
| 72 | + @action |
| 73 | + someAction(newItem) { |
| 74 | + this.abc = [...abc, newItem]; |
| 75 | + } |
| 76 | +} |
| 77 | +``` |
| 78 | + |
| 79 | +```js |
| 80 | +/** Observable-based functions **/ |
| 81 | +/** Use TrackedArray is OK **/ |
| 82 | +import Component from '@glimmer/component'; |
| 83 | +import { action } from '@ember/object'; |
| 84 | +import { tracked } from '@glimmer/tracking'; |
| 85 | +import { TrackedArray } from 'tracked-built-ins'; |
| 86 | + |
| 87 | +export default class SampleComponent extends Component { |
| 88 | + @tracked abc = new TrackedArray(); |
| 89 | + |
| 90 | + @action |
| 91 | + someAction(newItem) { |
| 92 | + abc.push(newItem); |
| 93 | + } |
| 94 | +} |
| 95 | +``` |
| 96 | + |
| 97 | +## References |
| 98 | + |
| 99 | +* [EmberArray](https://api.emberjs.com/ember/release/classes/EmberArray) |
| 100 | +* [MutableArray](https://api.emberjs.com/ember/release/classes/MutableArray) |
| 101 | +* [Prototype extensions documentation](https://guides.emberjs.com/release/configuring-ember/disabling-prototype-extensions/) |
| 102 | +* Array prototype extensions deprecation RFC |
| 103 | + |
| 104 | +## Related Rules |
| 105 | + |
| 106 | +* [no-function-prototype-extensions](no-function-prototype-extensions.md) |
| 107 | +* [no-string-prototype-extensions](no-string-prototype-extensions.md) |
0 commit comments