add prettier

Author: snewcomer

.eslintrc.js

@@ -11,11 +11,7 @@ module.exports = {
     },
   },
   plugins: ['ember'],
-  extends: [
-    'eslint:recommended',
-    'plugin:ember/recommended',
-    'plugin:prettier/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
   env: {
     browser: true,
   },

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,15 +1,15 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-labels: 
-
+labels:
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'

.github/workflows/github_ci.yml

@@ -6,9 +6,9 @@ name: build
 on:
   workflow_dispatch:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   main-test:
@@ -34,11 +34,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        scenario: [
-          ember-lts-3.20,
-          ember-lts-3.24,
-          ember-lts-3.28,
-        ]
+        scenario: [ember-lts-3.20, ember-lts-3.24, ember-lts-3.28]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 12

.prettierrc.js

@@ -2,4 +2,5 @@
 
 module.exports = {
   singleQuote: true,
+  printWidth: 120,
 };

CHANGELOG.md

@@ -2,25 +2,25 @@
 
 ## Installation
 
-* `git clone <repository-url>`
-* `cd ember-sortable`
-* `yarn install`
+- `git clone <repository-url>`
+- `cd ember-sortable`
+- `yarn install`
 
 ## Linting
 
-* `yarn lint:hbs`
-* `yarn lint:js`
-* `yarn lint:js --fix`
+- `yarn lint:hbs`
+- `yarn lint:js`
+- `yarn lint:js --fix`
 
 ## Running tests
 
-* `ember test` – Runs the test suite on the current Ember version
-* `ember test --server` – Runs the test suite in "watch mode"
-* `ember try:each` – Runs the test suite against multiple Ember versions
+- `ember test` – Runs the test suite on the current Ember version
+- `ember test --server` – Runs the test suite in "watch mode"
+- `ember try:each` – Runs the test suite against multiple Ember versions
 
 ## Running the dummy application
 
-* `ember serve`
-* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
+- `ember serve`
+- Visit the dummy application at [http://localhost:4200](http://localhost:4200).
 
-For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
+For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

CONTRIBUTING.md

@@ -5,16 +5,20 @@
 To use modifiers, you must use angle-bracket syntax
 
 ### New Root component
-1. Instead of using `sortable-group` as a component, use `sortable-group` as a modifier 
-any element. You no longer need to tell `sortable-group` about the models, so the `each`
-uses the models directly.
+
+1. Instead of using `sortable-group` as a component, use `sortable-group` as a modifier
+   any element. You no longer need to tell `sortable-group` about the models, so the `each`
+   uses the models directly.
 
 **Old Component**
+
 ```hbs
 {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |item|}}
 ```
+
 **New Component**
+
 ```hbs
 <ol {{sortable-group onChange=(action "reorderItems")}}>
   {{#each model.items as |item|}}
@@ -23,19 +27,21 @@ uses the models directly.
 2. Each `item` can be represented by any dom element or component using angle-bracket syntax
 
 **Old Component**
+
 ```hbs
-{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+{{#sortable-group model=model.items onChange=(action 'reorderItems') as |group|}}
   {{#each group.model as |item|}}
     {{#group.item model=item}}
-       {{tem.name}}
+      {{tem.name}}
     {{/group.item}}
   {{/each}}
 {{/sortable-group}}
 ```
 
 **New Component with modifier**
+
 ```hbs
-<ol {{sortable-group onChange=(action "reorderItems")}}>
+<ol {{sortable-group onChange=(action 'reorderItems')}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
       {{tem.name}}
@@ -47,6 +53,7 @@ uses the models directly.
 3. The Handle is also any element with a `sortable-handle` applied to it.
 
 **Old Component**
+
 ```hbs
 {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |modelItem|}}
@@ -61,28 +68,28 @@ uses the models directly.
 ```
 
 **New Component with modifier**
+
 ```hbs
-<ol {{sortable-group onChange=(action "reorderItems")}}>
+<ol {{sortable-group onChange=(action 'reorderItems')}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
       {{tem.name}}
-      <span class="handle" {{sortable-handle}}>&varr;</span>
+      <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
 </ol>
 ```
 
-4. The modifier `groupModel` property is no longer supported. The equivalent can 
-be accomplished by the `action` helper or the new `fn` helper.
+4. The modifier `groupModel` property is no longer supported. The equivalent can
+   be accomplished by the `action` helper or the new `fn` helper.
 
 ```hbs
-<ol {{sortable-group onChange=(action "reorderItems" model)}}>
+<ol {{sortable-group onChange=(action 'reorderItems' model)}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
       {{tem.name}}
-      <span class="handle" {{sortable-handle}}>&varr;</span>
+      <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
 </ol>
 ```
-

MIGRATION_GUIDE_MODIFIERS.md

@@ -5,16 +5,20 @@
 [High Order Components](#Higher Order Components) or [Modifiers](/MIGRATION_GUIDE_MODIFIERS.md)
 
 ### Higher Order Components
+
 `Ember-sortable` can now be built using [higher order components](https://v4.chriskrycho.com/2018/higher-order-components-in-emberjs.html)
 
 1. The array of models are now yielded out by `sortable-group`
 
 **V1**
+
 ```hbs
 {{#sortable-group onChange=(action "reorderItems") as |group|}}
   {{#each model.items as |item|}}
 ```
+
 **V2**
+
 ```hbs
 {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |item|}}
@@ -23,23 +27,25 @@
 2. Each `item` can be represented by the yielded `sortable-item` instead of directly using `sortable-item` and passing the `group` manually.
 
 **V1**
+
 ```hbs
-{{#sortable-group onChange=(action "reorderItems") as |group|}}
+{{#sortable-group onChange=(action 'reorderItems') as |group|}}
   {{#each model.items as |item|}}
-    {{#sortable-item model=item group=group handle=".handle"}}
+    {{#sortable-item model=item group=group handle='.handle'}}
       {{item.name}}
-      <span class="handle">&varr;</span>
+      <span class='handle'>&varr;</span>
     {{/sortable-item}}
   {{/each}}
 {{/sortable-group}}
 ```
 
 **V2**
+
 ```hbs
-{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+{{#sortable-group model=model.items onChange=(action 'reorderItems') as |group|}}
   {{#each group.model as |item|}}
     {{#group.item model=item}}
-    ...
+      ...
     {{/group.item}}
   {{/each}}
 {{/sortable-group}}
@@ -48,18 +54,20 @@
 3. It is recommended to use the yielded `sortable-handle` instead of referencing `handle` by `class`, as it guarantees accessibility support.
 
 **V1**
+
 ```hbs
-{{#sortable-group onChange=(action "reorderItems") as |group|}}
+{{#sortable-group onChange=(action 'reorderItems') as |group|}}
   {{#each model.items as |item|}}
-    {{#sortable-item model=item group=group handle=".handle"}}
+    {{#sortable-item model=item group=group handle='.handle'}}
       {{item.name}}
-      <span class="handle">&varr;</span>
+      <span class='handle'>&varr;</span>
     {{/sortable-item}}
   {{/each}}
 {{/sortable-group}}
 ```
 
 **V2**
+
 ```hbs
 {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |modelItem|}}
@@ -76,6 +84,7 @@
 4. `groupModel` is still supported via `groupModel` instead of `model`
 
 **V1**
+
 ```hbs
 {{#sortable-group model=model onChange=(action "reorderItems") as |group|}}
   {{#each model.items as |item|}}
@@ -84,6 +93,7 @@
 ```
 
 **V2**
+
 ```hbs
 {{#sortable-group groupModel=model model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |item|}}
@@ -94,6 +104,7 @@
 ### Modifiers
 
 ### Accessibility support
+
 1. Keyboard navigation is built into `ember-sortable`.
 2. `a11yItemName`, `a11yAnnouncementConfig`, `itemVisualClass`, `handleVisualClass` can be supplied to enhance the accessibility experience.
 3. Refer to [Accessibility Section](/README.md#Accessibility) for more details.
@@ -103,6 +114,7 @@
 ```
 
 ### Testing
+
 1. The `drag` and `reorder` test helpers are no longer global `async` helpers. They are now importable.
 
 Refer to [Testing Section](/README.md#Testing) for more details.

MIGRATION_GUIDE_V2.md

@@ -13,10 +13,12 @@ Sortable UI primitives for Ember.
 [Check out the demo](https://adopted-ember-addons.github.io/ember-sortable/demo/)
 
 ## v2 -> v3 Migration
+
 The component versions have been removed and you must use the modifier.
 The modifier version does not support `groupModel`, use the currying of the `fn` helper.
 
 ## v1 -> v2 Migration
+
 If you are migrating from `1.x.x` to `2.x.x`,
 For components, please read this [migration guide](/MIGRATION_GUIDE_V2.md).
 For modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md).
@@ -46,7 +48,7 @@ $ ember install ember-sortable
   {{#each @model.items as |modelItem|}}
     <li {{sortable-item model=modelItem}}>
       {{modelItem.name}}
-      <span class="handle" {{sortable-handle}}>&varr;</span>
+      <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
 </ol>
@@ -78,13 +80,12 @@ The modifier version does not support `groupModel`, use the currying of `action`
   {{#each @model.items as |modelItem|}}
     <li {{sortable-item model=modelItem}}>
       {{modelItem.name}}
-      <span class="handle" {{sortable-handle}}>&varr;</span>
+      <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
 </ol>
 ```
 
-
 ### Changing sort direction
 
 To change sort direction, define `direction` on `sortable-group` (default is `y`):
@@ -145,7 +146,7 @@ transition of `.125s` in the default case:
 
 ```css
 .sortable-item {
-  transition: all .125s;
+  transition: all 0.125s;
 }
 ```
 
@@ -219,11 +220,11 @@ There is a service behind the scenes for communication between the group and the
 Both the `{{sortable-group}}` and `{{sortable-item}}` take an additional argument `groupName`. Should you encounter this conflict, assign a `groupName` to the group and items. You only need to do this for one of the sortables in conflict, but you can on both if you wish.
 
 ```hbs
-<ol {{sortable-group groupName="products" onChange=this.reorderItems}}>
+<ol {{sortable-group groupName='products' onChange=this.reorderItems}}>
   {{#each @model.items as |modelItem|}}
-    <li {{sortable-item groupName="products" model=modelItem}}>
+    <li {{sortable-item groupName='products' model=modelItem}}>
       {{modelItem.name}}
-      <span class="handle" {{sortable-handle}}>&varr;</span>
+      <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
 </ol>
@@ -232,20 +233,20 @@ Both the `{{sortable-group}}` and `{{sortable-item}}` take an additional argumen
 Ensure that the same name is passed to both the group and the items, this would be best accomplished by creating property on the component and referring to that property. If you are able to use the `{{#let}}` helper (useful in template only components), using `{{#let}}` makes the usage clearer.
 
 ```hbs
-{{#let "products" as | myGroupName |}}
+{{#let 'products' as |myGroupName|}}
   <ol {{sortable-group groupName=myGroupName onChange=this.reorderItems}}>
     {{#each @model.items as |modelItem|}}
       <li {{sortable-item groupName=myGroupName model=modelItem}}>
         {{modelItem.name}}
-        <span class="handle" {{sortable-handle}}>&varr;</span>
+        <span class='handle' {{sortable-handle}}>&varr;</span>
       </li>
     {{/each}}
   </ol>
 {{/let}}
 ```
 
-
 ### Disabling Drag (Experimental)
+
 `sortable-item` exposes an optional `disabled` (previously `isDraggingDisabled`) flag that you can use to disable reordering for that particular item. Disabling and item won't prevent it from changing position in the array. The user can still move other non-disabled items to over it.
 
 This flag is intended as an utility to make your life easier with 3 main benefits:
@@ -261,30 +262,35 @@ No data is mutated by `sortable-group` or `sortable-item`. In the spirit of “d
 Each item takes a `model` property. This should be fairly self-explanatory but it’s important to note that it doesn’t do anything with this object besides keeping a reference for later use in `onChange`.
 
 ### Accessibility
+
 The `sortable-group` has support for the following accessibility functionality:
 
 #### Built-in Functionalities
 
 ##### Keyboard Navigation
+
 There are 4 modes during keyboard navigation:
+
 - **ACTIVATE**
   enables the keyboard navigation.
-  Activate via  `ENTER/SPACE`
+  Activate via `ENTER/SPACE`
 - **MOVE**
   enables item(s) to be moved up, down, left, or right based on `direction`.
-  Activate via  `ARROW UP/DOWN/LEFT/RIGHT`
+  Activate via `ARROW UP/DOWN/LEFT/RIGHT`
 - **CONFIRM**
   submits the new sort order, invokes the `onChange` action.
-  Activate via  `ENTER/SPACE`.
+  Activate via `ENTER/SPACE`.
 - **CANCEL**
   cancels the new sort order, reverts back to the old sort order.
-  Activate via  `ESCAPE` or when `focus` is lost.
+  Activate via `ESCAPE` or when `focus` is lost.
 
 ##### Focus Management
+
 - When `focus` is on a `item` or `handle`, user can effectively select the `item` via `ENTER/SPACE`. This is the `ACTIVATE` mode.
 - While `ACTIVATE`, the `focus` is locked on `sortable-group` container and will not be lost until `CONFIRM`, `CANCEL`, or `focus` is lost.
 
 #### User configurable
+
 ##### Screen Reader
 
 The default language for `ember-sortable` is English. Any language can be supported by passing in the configuration below in the appropriate language.
@@ -293,18 +299,21 @@ The default language for `ember-sortable` is English. Any language can be suppor
   a name for the item. Defaults to `item`.
 - **a11yAnnouncementConfig**
   a map of `action enums` to `functions` that takes the following `config`, which is exposed by `sortable-group`.
+
 ```javascript
 a11yAnnounceConfig = {
   a11yItemName, // name associated with the name
   index, // 0-based
   maxLength, // length of the items
   direction, // x or y
   delta, // +1 means down or right, -1 means up or left
-}
+};
 ```
+
 and returns a `string` constructed from the `config`.
 
 **Default value**
+
 ```javascript
 {
   ACTIVATE: function({ a11yItemName, index, maxLength, direction }) {
@@ -332,6 +341,7 @@ and returns a `string` constructed from the `config`.
 ```
 
 ##### Visual Indicator
+
 - **handleVisualClass**
   This class will be added to the `sortable-handle` during `ACTIVATE` and `MOVE` operations. This allows you to add custom styles such as `visual arrows` via `pseudo` classes.
 
@@ -342,9 +352,9 @@ and returns a `string` constructed from the `config`.
 
 `ember-sortable` exposes some acceptance test helpers:
 
-* [`drag`][drag]: Drags elements by an offset specified in pixels.
-* [`reorder`][reorder]: Reorders elements to the specified state.
-* [`keyboard`][keyboard]: Keycode constants for quick.
+- [`drag`][drag]: Drags elements by an offset specified in pixels.
+- [`reorder`][reorder]: Reorders elements to the specified state.
+- [`keyboard`][keyboard]: Keycode constants for quick.
 
 [drag]: addon-test-support/helpers/drag.js
 [reorder]: addon-test-support/helpers/reorder.js
@@ -353,32 +363,35 @@ and returns a `string` constructed from the `config`.
 To include them in your application, you can import them:
 
 ```js
-import { drag, reorder }  from 'ember-sortable/test-support/helpers';
-import { ENTER_KEY_CODE, SPACE_KEY_CODE, ESCAPE_KEY_CODE, ARROW_KEY_CODES } from "ember-sortable/test-support/utils/keyboard";
+import { drag, reorder } from 'ember-sortable/test-support/helpers';
+import {
+  ENTER_KEY_CODE,
+  SPACE_KEY_CODE,
+  ESCAPE_KEY_CODE,
+  ARROW_KEY_CODES,
+} from 'ember-sortable/test-support/utils/keyboard';
 ```
 
 ### Examples
+
 `Reorder`
+
 ```js
-await reorder(
-  'mouse',
-  '[data-test-vertical-demo-handle]',
-  ...order
-);
+await reorder('mouse', '[data-test-vertical-demo-handle]', ...order);
 ```
 
 `Drag`
+
 ```js
-await drag('mouse', '[data-test-scrollable-demo-handle] .handle', () => { return {dy: itemHeight() * 2 + 1, dx: undefined}});
+await drag('mouse', '[data-test-scrollable-demo-handle] .handle', () => {
+  return { dy: itemHeight() * 2 + 1, dx: undefined };
+});
 ```
 
 `Keyboard`
+
 ```js
-await triggerKeyEvent(
-  '[data-test-vertical-demo-handle]',
-  'keydown',
-  ENTER_KEY_CODE
-);
+await triggerKeyEvent('[data-test-vertical-demo-handle]', 'keydown', ENTER_KEY_CODE);
 ```
 
 ## Developing

README.md

@@ -57,10 +57,7 @@ export async function drag(mode, itemSelector, offsetFn, callbacks = {}) {
   // https://stackoverflow.com/a/5042051
   const dx = offset.dx || 0;
   const dy = offset.dy || 0;
-  const clientHeight =
-    itemElement.clientHeight ||
-    itemElement.offsetHeight ||
-    itemElement.parentNode.offsetHeight;
+  const clientHeight = itemElement.clientHeight || itemElement.offsetHeight || itemElement.parentNode.offsetHeight;
   const scale = clientHeight / (rect.bottom - rect.top);
   const halfwayX = itemOffset.left + (dx * scale) / 2;
   const halfwayY = itemOffset.top + (dy * scale) / 2;

V2_MIGRATION_RFC.md

@@ -27,18 +27,12 @@ const OVERSHOOT = 2;
   @return {Promise}
 */
 export async function reorder(mode, itemSelector, ...resultSelectors) {
-  for (
-    let targetIndex = 0;
-    targetIndex < resultSelectors.length;
-    targetIndex++
-  ) {
+  for (let targetIndex = 0; targetIndex < resultSelectors.length; targetIndex++) {
     const items = findAll(itemSelector);
     const sourceElement = find(resultSelectors[targetIndex]);
     const targetElement = items[targetIndex];
-    const dx =
-      getOffset(targetElement).left - OVERSHOOT - getOffset(sourceElement).left;
-    const dy =
-      getOffset(targetElement).top - OVERSHOOT - getOffset(sourceElement).top;
+    const dx = getOffset(targetElement).left - OVERSHOOT - getOffset(sourceElement).left;
+    const dy = getOffset(targetElement).top - OVERSHOOT - getOffset(sourceElement).top;
 
     await drag(mode, sourceElement, () => {
       return { dx: dx, dy: dy };

addon-test-support/helpers/drag.js

@@ -26,16 +26,7 @@ function createKeyTest(key, keyCode) {
 export const isEnterKey = createKeyTest(ENTER_KEY, ENTER_KEY_CODE);
 export const isEscapeKey = createKeyTest(ESCAPE_KEY, ESCAPE_KEY_CODE);
 export const isSpaceKey = createKeyTest(SPACE_KEY, SPACE_KEY_CODE);
-export const isLeftArrowKey = createKeyTest(
-  ARROW_KEYS.LEFT,
-  ARROW_KEY_CODES.LEFT
-);
+export const isLeftArrowKey = createKeyTest(ARROW_KEYS.LEFT, ARROW_KEY_CODES.LEFT);
 export const isUpArrowKey = createKeyTest(ARROW_KEYS.UP, ARROW_KEY_CODES.UP);
-export const isRightArrowKey = createKeyTest(
-  ARROW_KEYS.RIGHT,
-  ARROW_KEY_CODES.RIGHT
-);
-export const isDownArrowKey = createKeyTest(
-  ARROW_KEYS.DOWN,
-  ARROW_KEY_CODES.DOWN
-);
+export const isRightArrowKey = createKeyTest(ARROW_KEYS.RIGHT, ARROW_KEY_CODES.RIGHT);
+export const isDownArrowKey = createKeyTest(ARROW_KEYS.DOWN, ARROW_KEY_CODES.DOWN);

addon-test-support/helpers/reorder.js

@@ -86,9 +86,7 @@ export default class SortableGroupModifier extends Modifier {
    * }
    */
   get a11yAnnouncementConfig() {
-    return (
-      this.args.named.a11yAnnouncementConfig || defaultA11yAnnouncementConfig
-    );
+    return this.args.named.a11yAnnouncementConfig || defaultA11yAnnouncementConfig;
   }
 
   get itemVisualClass() {
@@ -109,10 +107,7 @@ export default class SortableGroupModifier extends Modifier {
    */
   @action
   focusOut() {
-    if (
-      !this.isRetainingFocus &&
-      !this._isElementWithinHandle(document.activeElement)
-    ) {
+    if (!this.isRetainingFocus && !this._isElementWithinHandle(document.activeElement)) {
       this.cancelKeyboardSelection();
     }
   }
@@ -136,10 +131,7 @@ export default class SortableGroupModifier extends Modifier {
     const isKeyboardReorderModeEnabled = this.isKeyboardReorderModeEnabled;
     const _selectedItem = this._selectedItem;
 
-    if (
-      !isKeyboardReorderModeEnabled &&
-      (isEnterKey(event) || isSpaceKey(event))
-    ) {
+    if (!isKeyboardReorderModeEnabled && (isEnterKey(event) || isSpaceKey(event))) {
       this._prepareKeyboardReorderMode();
       this._announceAction(ANNOUNCEMENT_ACTION_TYPES.ACTIVATE);
       this._updateItemVisualIndicators(_selectedItem, true);
@@ -190,20 +182,12 @@ export default class SortableGroupModifier extends Modifier {
     // DOWN or RIGHT
     if (toIndex > fromIndex) {
       value = item[direction];
-      set(
-        item,
-        direction,
-        nextItem[direction] + (nextItem[dimension] - item[dimension])
-      );
+      set(item, direction, nextItem[direction] + (nextItem[dimension] - item[dimension]));
       set(nextItem, direction, value);
       // UP or LEFT
     } else {
       value = nextItem[direction];
-      set(
-        nextItem,
-        direction,
-        item[direction] + (item[dimension] - nextItem[dimension])
-      );
+      set(nextItem, direction, item[direction] + (item[dimension] - nextItem[dimension]));
       set(item, direction, value);
     }
   }

addon-test-support/utils/keyboard.js

@@ -3,11 +3,7 @@ import { Promise, defer } from 'rsvp';
 import { action, set } from '@ember/object';
 import { reads } from '@ember/object/computed';
 import { or } from '@ember/object/computed';
-import {
-  DRAG_ACTIONS,
-  ELEMENT_CLICK_ACTION,
-  END_ACTIONS,
-} from '../utils/constant';
+import { DRAG_ACTIONS, ELEMENT_CLICK_ACTION, END_ACTIONS } from '../utils/constant';
 import { run, throttle, bind, scheduleOnce, later } from '@ember/runloop';
 import { DEBUG } from '@glimmer/env';
 import { getX, getY } from '../utils/coordinate';
@@ -129,12 +125,7 @@ export default class SortableItemModifier extends Modifier {
       }
     );
 
-    return (
-      this.groupDisabled ||
-      this.args.named.disabled ||
-      this.args.named.isDraggingDisabled ||
-      false
-    );
+    return this.groupDisabled || this.args.named.disabled || this.args.named.isDraggingDisabled || false;
   }
 
   /**
@@ -249,9 +240,7 @@ export default class SortableItemModifier extends Modifier {
    @property disableCheckScrollBounds
    */
   get disableCheckScrollBounds() {
-    return this.args.named.disableCheckScrollBounds != undefined
-      ? this.args.named.disableCheckScrollBounds
-      : isTesting;
+    return this.args.named.disableCheckScrollBounds != undefined ? this.args.named.disableCheckScrollBounds : isTesting;
   }
 
   /**
@@ -351,26 +340,18 @@ export default class SortableItemModifier extends Modifier {
 
     this._prepareDragListener = bind(this, this._prepareDrag, startEvent);
 
-    DRAG_ACTIONS.forEach((event) =>
-      window.addEventListener(event, this._prepareDragListener)
-    );
+    DRAG_ACTIONS.forEach((event) => window.addEventListener(event, this._prepareDragListener));
 
     this._cancelStartDragListener = () => {
-      DRAG_ACTIONS.forEach((event) =>
-        window.removeEventListener(event, this._prepareDragListener)
-      );
+      DRAG_ACTIONS.forEach((event) => window.removeEventListener(event, this._prepareDragListener));
     };
 
     const selfCancellingCallback = () => {
-      END_ACTIONS.forEach((event) =>
-        window.removeEventListener(event, selfCancellingCallback)
-      );
+      END_ACTIONS.forEach((event) => window.removeEventListener(event, selfCancellingCallback));
       this._cancelStartDragListener();
     };
 
-    END_ACTIONS.forEach((event) =>
-      window.addEventListener(event, selfCancellingCallback)
-    );
+    END_ACTIONS.forEach((event) => window.addEventListener(event, selfCancellingCallback));
   }
 
   /**
@@ -387,9 +368,7 @@ export default class SortableItemModifier extends Modifier {
     let dy = Math.abs(getY(startEvent) - getY(event));
 
     if (distance <= dx || distance <= dy) {
-      DRAG_ACTIONS.forEach((event) =>
-        window.removeEventListener(event, this._prepareDragListener)
-      );
+      DRAG_ACTIONS.forEach((event) => window.removeEventListener(event, this._prepareDragListener));
       this._startDrag(startEvent);
     }
   }
@@ -410,19 +389,15 @@ export default class SortableItemModifier extends Modifier {
     let dragThrottled = (ev) => throttle(this, drag, ev, 16, false);
 
     let drop = () => {
-      DRAG_ACTIONS.forEach((event) =>
-        window.removeEventListener(event, dragThrottled)
-      );
+      DRAG_ACTIONS.forEach((event) => window.removeEventListener(event, dragThrottled));
       END_ACTIONS.forEach((event) => window.removeEventListener(event, drop));
 
       run(() => {
         this._drop();
       });
     };
 
-    DRAG_ACTIONS.forEach((event) =>
-      window.addEventListener(event, dragThrottled)
-    );
+    DRAG_ACTIONS.forEach((event) => window.addEventListener(event, dragThrottled));
     END_ACTIONS.forEach((event) => window.addEventListener(event, drop));
 
     this.sortableGroup.prepare();
@@ -590,10 +565,7 @@ export default class SortableItemModifier extends Modifier {
 
     if (groupDirection === 'x') {
       let x = this.x;
-      let dx =
-        x -
-        this.element.offsetLeft +
-        parseFloat(getComputedStyle(this.element).marginLeft);
+      let dx = x - this.element.offsetLeft + parseFloat(getComputedStyle(this.element).marginLeft);
 
       this.element.style.transform = `translateX(${dx}px)`;
     }
@@ -652,10 +624,7 @@ export default class SortableItemModifier extends Modifier {
    */
   _preventClick() {
     const selfCancellingCallback = (event) => {
-      this.element.removeEventListener(
-        ELEMENT_CLICK_ACTION,
-        selfCancellingCallback
-      );
+      this.element.removeEventListener(ELEMENT_CLICK_ACTION, selfCancellingCallback);
       this._preventClickHandler(event);
     };
 
@@ -725,9 +694,7 @@ export default class SortableItemModifier extends Modifier {
     let el = this.element;
     let transitionProperty = getComputedStyle(el).transitionProperty;
 
-    return (
-      /all|transform/.test(transitionProperty) && this.transitionDuration > 0
-    );
+    return /all|transform/.test(transitionProperty) && this.transitionDuration > 0;
   }
 
   /**

addon/modifiers/sortable-group.js

@@ -1,8 +1,6 @@
 export const defaultA11yAnnouncementConfig = {
   ACTIVATE({ a11yItemName, index, maxLength, direction }) {
-    let message = `${a11yItemName} at position, ${
-      index + 1
-    } of ${maxLength}, is activated to be repositioned.`;
+    let message = `${a11yItemName} at position, ${index + 1} of ${maxLength}, is activated to be repositioned.`;
 
     if (direction === 'y') {
       message += 'Press up and down keys to change position,';

addon/modifiers/sortable-item.js

@@ -26,16 +26,7 @@ function createKeyTest(key, keyCode) {
 export const isEnterKey = createKeyTest(ENTER_KEY, ENTER_KEY_CODE);
 export const isEscapeKey = createKeyTest(ESCAPE_KEY, ESCAPE_KEY_CODE);
 export const isSpaceKey = createKeyTest(SPACE_KEY, SPACE_KEY_CODE);
-export const isLeftArrowKey = createKeyTest(
-  ARROW_KEYS.LEFT,
-  ARROW_KEY_CODES.LEFT
-);
+export const isLeftArrowKey = createKeyTest(ARROW_KEYS.LEFT, ARROW_KEY_CODES.LEFT);
 export const isUpArrowKey = createKeyTest(ARROW_KEYS.UP, ARROW_KEY_CODES.UP);
-export const isRightArrowKey = createKeyTest(
-  ARROW_KEYS.RIGHT,
-  ARROW_KEY_CODES.RIGHT
-);
-export const isDownArrowKey = createKeyTest(
-  ARROW_KEYS.DOWN,
-  ARROW_KEY_CODES.DOWN
-);
+export const isRightArrowKey = createKeyTest(ARROW_KEYS.RIGHT, ARROW_KEY_CODES.RIGHT);
+export const isDownArrowKey = createKeyTest(ARROW_KEYS.DOWN, ARROW_KEY_CODES.DOWN);

addon/utils/defaults.js

@@ -3,11 +3,7 @@
 const getChannelURL = require('ember-source-channel-url');
 
 module.exports = function () {
-  return Promise.all([
-    getChannelURL('release'),
-    getChannelURL('beta'),
-    getChannelURL('canary'),
-  ]).then((urls) => {
+  return Promise.all([getChannelURL('release'), getChannelURL('beta'), getChannelURL('canary')]).then((urls) => {
     return {
       useYarn: true,
       scenarios: [

addon/utils/keyboard.js

@@ -25,16 +25,11 @@ function fakeDocumentContainer() {
   document.getElementById('ember-testing').style.height = 'auto';
 
   return () => {
-    document.getElementById('ember-testing-container').style.height =
-      originalStyle.containerHeight;
-    document.getElementById('ember-testing-container').style.width =
-      originalStyle.containerWidth;
-    document.getElementById('ember-testing-container').style.overflow =
-      originalStyle.containerOverflow;
-    document.getElementById('ember-testing').style.height =
-      originalStyle.appHeight;
-    document.getElementById('ember-testing').style.height =
-      originalStyle.appWidth;
+    document.getElementById('ember-testing-container').style.height = originalStyle.containerHeight;
+    document.getElementById('ember-testing-container').style.width = originalStyle.containerWidth;
+    document.getElementById('ember-testing-container').style.overflow = originalStyle.containerOverflow;
+    document.getElementById('ember-testing').style.height = originalStyle.appHeight;
+    document.getElementById('ember-testing').style.height = originalStyle.appWidth;
   };
 }
 
@@ -58,10 +53,7 @@ module('Acceptance | container auto scroll', function (hooks) {
     await drag('mouse', '[data-test-doc-auto-scroll-demo-item]', () => {
       return { dy: itemHeight() * 30 + 1, dx: undefined };
     });
-    assert.ok(
-      document.getElementById('ember-testing-container').scrollTop,
-      'The container has scroll (top)'
-    );
+    assert.ok(document.getElementById('ember-testing-container').scrollTop, 'The container has scroll (top)');
   });
 
   test('horizontaly reordering can scroll his parent container (not document)', async function (assert) {
@@ -76,10 +68,7 @@ module('Acceptance | container auto scroll', function (hooks) {
     await drag('mouse', '[data-test-doc-auto-scroll-demo-item]', () => {
       return { dy: undefined, dx: itemWidth() * 30 + 1 };
     });
-    assert.ok(
-      document.getElementById('ember-testing-container').scrollLeft,
-      'The container has scroll (left)'
-    );
+    assert.ok(document.getElementById('ember-testing-container').scrollLeft, 'The container has scroll (left)');
   });
 
   test('verticaly reordering can scroll his parent container (document)', async function (assert) {
@@ -96,10 +85,7 @@ module('Acceptance | container auto scroll', function (hooks) {
     await drag('mouse', '[data-test-doc-auto-scroll-demo-item]', () => {
       return { dy: itemHeight() * 30 + 1, dx: undefined };
     });
-    assert.ok(
-      document.documentElement.scrollTop,
-      'The document has scroll (top)'
-    );
+    assert.ok(document.documentElement.scrollTop, 'The document has scroll (top)');
     restoreTestingContainer();
   });
 
@@ -117,10 +103,7 @@ module('Acceptance | container auto scroll', function (hooks) {
     await drag('mouse', '[data-test-doc-auto-scroll-demo-item]', () => {
       return { dy: undefined, dx: itemWidth() * 30 + 1 };
     });
-    assert.ok(
-      document.documentElement.scrollLeft,
-      'The document has scroll (left)'
-    );
+    assert.ok(document.documentElement.scrollLeft, 'The document has scroll (left)');
     restoreTestingContainer();
   });
 });

config/ember-try.js

@@ -1 +1 @@
-{{@item}}
+{{@item}}

tests/acceptance/auto-scroll-test.js

@@ -1,14 +1,15 @@
 import Controller from '@ember/controller';
 import { equal } from '@ember/object/computed';
-import { set } from '@ember/object';
+import { action, set } from '@ember/object';
 
-export default Controller.extend({
-  queryParams: ['direction'],
-  direction: 'y',
-  isVertical: equal('direction', 'y'),
-  actions: {
-    updateItems(newOrder) {
-      set(this, 'model.items', newOrder);
-    },
-  },
-});
+export default class DocAutoScroll extends Controller {
+  queryParams = ['direction'];
+  direction = 'y';
+
+  @equal('direction', 'y') isVertical;
+
+  @action
+  updateItems(newOrder) {
+    set(this, 'model.items', newOrder);
+  }
+}

tests/acceptance/smoke-modifier-test.js

@@ -15,9 +15,7 @@ export default class ModifierController extends Controller {
 
   a11yAnnouncementConfig = {
     ACTIVATE: function ({ a11yItemName, index, maxLength, direction }) {
-      let message = `${a11yItemName} at position, ${
-        index + 1
-      } of ${maxLength}, is activated to be repositioned.`;
+      let message = `${a11yItemName} at position, ${index + 1} of ${maxLength}, is activated to be repositioned.`;
       if (direction === 'y') {
         message += 'Press up and down keys to change position,';
       } else {

tests/dummy/app/components/item-presenter/template.hbs

@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Ember Sortable Demo</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     {{content-for "head"}}
 
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/dummy.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/dummy.css" />
 
     {{content-for "head-footer"}}
   </head>

tests/dummy/app/controllers/docautoscroll.js

@@ -21,12 +21,12 @@
 
 .demo footer {
   margin-top: 2em;
-  font-size: .5em;
+  font-size: 0.5em;
 }
 
 .demo .sortable-item {
   padding: 4px;
-  transition: all .125s;
+  transition: all 0.125s;
 }
 
 .demo .sortable-item.is-dragging {
@@ -35,14 +35,13 @@
 }
 
 .demo .sortable-item .handle {
-  padding: 0 .5em;
+  padding: 0 0.5em;
   cursor: move;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
-
 .vertical-demo .sortable-item {
   display: block;
   position: relative;
@@ -62,23 +61,28 @@
 .vertical-demo .sortable-item .handle {
   display: block;
   position: absolute;
-  top: 0; right: 0; bottom: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
   background: rgba(71, 1, 1, 0.5);
   color: pink;
 }
 
-.vertical-spacing-demo .sortable-item, .vertical-distance-demo .sortable-item, .vertical-doc-auto-scroll-demo .sortable-item {
+.vertical-spacing-demo .sortable-item,
+.vertical-distance-demo .sortable-item,
+.vertical-doc-auto-scroll-demo .sortable-item {
   display: block;
   position: relative;
-  background: #58D3F7;
+  background: #58d3f7;
   width: 50%;
   line-height: 50px;
   margin: 5px auto;
   text-align: center;
 }
 
-.vertical-spacing-demo .sortable-item.is-dragging, .vertical-distance-demo .sortable-item.is-dragging {
-  background: #A9E2F3;
+.vertical-spacing-demo .sortable-item.is-dragging,
+.vertical-distance-demo .sortable-item.is-dragging {
+  background: #a9e2f3;
 }
 
 .horizontal-demo {
@@ -89,14 +93,15 @@
 .horizontal-doc-auto-scroll-demo {
   white-space: nowrap;
 }
-.horizontal-doc-auto-scroll-demo ol{
+.horizontal-doc-auto-scroll-demo ol {
   padding-left: 0px;
 }
-.horizontal-doc-auto-scroll-demo .sortable-item{
+.horizontal-doc-auto-scroll-demo .sortable-item {
   width: 70px;
 }
 
-.horizontal-demo .sortable-item, .horizontal-doc-auto-scroll-demo .sortable-item{
+.horizontal-demo .sortable-item,
+.horizontal-doc-auto-scroll-demo .sortable-item {
   display: inline-block;
   position: relative;
   cursor: move;
@@ -136,7 +141,6 @@
   color: black;
 }
 
-
 .scrollable-demo .sortable-container {
   height: 300px;
   overflow-y: auto;
@@ -165,7 +169,9 @@
 .scrollable-demo .sortable-item .handle {
   display: block;
   position: absolute;
-  top: 0; right: 0; bottom: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
   background: rgba(71, 1, 1, 0.5);
   color: pink;
 }

tests/dummy/app/controllers/index.js

@@ -1,13 +1,9 @@
-<section class={{if isVertical "vertical-doc-auto-scroll-demo" "horizontal-doc-auto-scroll-demo" }}>
-  <ol data-test-doc-auto-scroll-demo-group
-    {{sortable-group
-      onChange=(action "updateItems")
-      direction=direction}}
-  >
-    {{#each model.items as |item|}}
+<section class={{if @isVertical 'vertical-doc-auto-scroll-demo' 'horizontal-doc-auto-scroll-demo'}}>
+  <ol data-test-doc-auto-scroll-demo-group {{sortable-group onChange=this.updateItems direction=@direction}}>
+    {{#each @model.items as |item|}}
       <li data-test-doc-auto-scroll-demo-item {{sortable-item disableCheckScrollBounds=false model=item}}>
         {{item}}
       </li>
     {{/each}}
   </ol>
-</section>
+</section>

tests/dummy/app/index.html

@@ -1,74 +1,74 @@
-<article class="demo">
+<article class='demo'>
   <header>
     <h2>Ember Sortable</h2>
   </header>
 
   <main>
-    <section class="vertical-demo">
+    <section class='vertical-demo'>
       <h3>Vertical</h3>
 
-      <ol data-test-vertical-demo-group
+      <ol
+        data-test-vertical-demo-group
         {{sortable-group
           onChange=this.update
           a11yAnnouncementConfig=this.a11yAnnouncementConfig
-          a11yItemName="spanish number"
+          a11yItemName='spanish number'
           itemVisualClass=this.itemVisualClass
           handleVisualClass=this.handleVisualClass
         }}
       >
         {{#each model.items as |item|}}
           <li data-test-vertical-demo-item {{sortable-item model=item}}>
             {{item}}
-            <span class="handle" data-test-vertical-demo-handle {{sortable-handle}} data-item={{item}}>
+            <span class='handle' data-test-vertical-demo-handle {{sortable-handle}} data-item={{item}}>
               <span>&vArr;</span>
             </span>
           </li>
         {{/each}}
       </ol>
     </section>
 
-    <section class="vertical-demo">
+    <section class='vertical-demo'>
       <h3>Vertical with different sized models and inputs</h3>
 
-      <ol data-test-vertical-demo-group
-        {{sortable-group
-          onChange=this.updateDifferentSizedModels
-          groupName="verticle-size"
-        }}
+      <ol
+        data-test-vertical-demo-group
+        {{sortable-group onChange=this.updateDifferentSizedModels groupName='verticle-size'}}
       >
         {{#each this.differentSizedModels as |item|}}
-          <li data-test-vertical-demo-item class="word-break" {{sortable-item model=item groupName="verticle-size"}}>
-            <label for="demo-input">{{item}}</label>
-            <input id="demo-input" type="text">
-            <span data-item={{item}} data-test-vertical-demo-handle class="handle" {{sortable-handle}}>
+          <li data-test-vertical-demo-item class='word-break' {{sortable-item model=item groupName='verticle-size'}}>
+            <label for='demo-input'>{{item}}</label>
+            <input id='demo-input' type='text' />
+            <span data-item={{item}} data-test-vertical-demo-handle class='handle' {{sortable-handle}}>
               <span>&vArr;</span>
             </span>
           </li>
         {{/each}}
       </ol>
     </section>
 
-    <section class="horizontal-demo">
+    <section class='horizontal-demo'>
       <h3>Horizontal</h3>
 
-      <ol data-test-horizontal-demo-group
+      <ol
+        data-test-horizontal-demo-group
         {{sortable-group
-          direction="x"
+          direction='x'
           onChange=this.update
           itemVisualClass=this.itemVisualClass
           handleVisualClass=this.handleVisualClass
-          groupName="horizontal"
+          groupName='horizontal'
         }}
       >
-        {{#each this.model.items as |item|}}
-          <li data-test-horizontal-demo-handle tabindex={{"0"}} {{sortable-item model=item groupName="horizontal"}}>
+        {{#each @model.items as |item|}}
+          <li data-test-horizontal-demo-handle tabindex={{'0'}} {{sortable-item model=item groupName='horizontal'}}>
             <ItemPresenter @item={{item}} />
           </li>
         {{/each}}
       </ol>
     </section>
 
-    <section class="table-demo">
+    <section class='table-demo'>
       <h3>Table</h3>
 
       {{! template-lint-disable table-groups}}
@@ -79,23 +79,23 @@
             <th>Item</th>
           </tr>
         </thead>
-        <tbody {{sortable-group onChange=this.update groupName="table"}}>
+        <tbody {{sortable-group onChange=this.update groupName='table'}}>
           {{#each this.model.items as |item|}}
-            <tr data-test-table-demo-item class="handle" {{sortable-item model=item groupName="table"}}>
-              <td><span data-test-table-demo-handle data-item={{item}} class="handle">&vArr;</span></td>
+            <tr data-test-table-demo-item class='handle' {{sortable-item model=item groupName='table'}}>
+              <td><span data-test-table-demo-handle data-item={{item}} class='handle'>&vArr;</span></td>
               <td>{{item}}</td>
             </tr>
           {{/each}}
         </tbody>
       </table>
     </section>
 
-    <section class="vertical-spacing-demo">
+    <section class='vertical-spacing-demo'>
       <h3>Vertical with 15px spacing</h3>
 
-      <ol {{sortable-group onChange=this.update groupName="verticle-15"}}>
+      <ol {{sortable-group onChange=this.update groupName='verticle-15'}}>
         {{#each this.model.items as |item|}}
-          <li {{sortable-item model=item spacing=15 groupName="verticle-15"}} tabindex="0">
+          <li {{sortable-item model=item spacing=15 groupName='verticle-15'}} tabindex='0'>
             {{item}}
             <span data-test-vertical-spacing-demo-handle data-item={{item}}>
             </span>
@@ -104,12 +104,16 @@
       </ol>
     </section>
 
-    <section class="vertical-distance-demo">
+    <section class='vertical-distance-demo'>
       <h3>Vertical with distance set to 15</h3>
 
-      <ol {{sortable-group onChange=this.update groupName="verticle-15d"}}>
+      <ol {{sortable-group onChange=this.update groupName='verticle-15d'}}>
         {{#each this.model.items as |item|}}
-          <li data-test-vertical-distance-demo-handle {{sortable-item model=item distance=15 groupName="verticle-15d"}} tabindex="0">
+          <li
+            data-test-vertical-distance-demo-handle
+            {{sortable-item model=item distance=15 groupName='verticle-15d'}}
+            tabindex='0'
+          >
             {{item}}
             <span data-item={{item}}>
             </span>
@@ -118,15 +122,15 @@
       </ol>
     </section>
 
-    <section class="scrollable-demo">
+    <section class='scrollable-demo'>
       <h3>Scrollable</h3>
 
-      <div class="sortable-container">
-        <ol {{sortable-group onChange=this.update groupName="scrollable"}}>
+      <div class='sortable-container'>
+        <ol {{sortable-group onChange=this.update groupName='scrollable'}}>
           {{#each this.model.items as |item|}}
-            <li data-test-scrollable-demo-handle {{sortable-item model=item groupName="scrollable"}}>
+            <li data-test-scrollable-demo-handle {{sortable-item model=item groupName='scrollable'}}>
               {{item}}
-              <span class="handle" data-item={{item}} {{sortable-handle}}>
+              <span class='handle' data-item={{item}} {{sortable-handle}}>
                 <span>&vArr;</span>
               </span>
             </li>
@@ -142,32 +146,29 @@
 
   <footer>
     <p>
-      <a href="https://github.com/adopted-ember-addons/ember-sortable">
+      <a href='https://github.com/adopted-ember-addons/ember-sortable'>
         View on GitHub
       </a>
     </p>
   </footer>
 </article>
-<article class="demo-no-css">
-  <section class="vertical-demo">
+<article class='demo-no-css'>
+  <section class='vertical-demo'>
     <h3>Vertical</h3>
 
-    <ol 
+    <ol
       data-test-vertical-demo-group-no-css
-      {{sortable-group
-        onChange=this.update 
-        handleVisualClass=handleVisualClass
-        groupName="verticle-no-css"}}>
+      {{sortable-group onChange=this.update handleVisualClass=handleVisualClass groupName='verticle-no-css'}}
+    >
       {{#each this.model.items as |item|}}
-        <li data-test-scrollable-demo-handle-item-no-css {{sortable-item model=item groupName="verticle-no-css"}}>
+        <li data-test-scrollable-demo-handle-item-no-css {{sortable-item model=item groupName='verticle-no-css'}}>
           {{item}}
-          <span class="handle" data-test-vertical-demo-handle-no-css data-item={{item}} {{sortable-handle}}>
+          <span class='handle' data-test-vertical-demo-handle-no-css data-item={{item}} {{sortable-handle}}>
             <span>&vArr;</span>
           </span>
         </li>
       {{/each}}
     </ol>
 
   </section>
-</article>
-
+</article>

tests/dummy/app/styles/app.css

@@ -10,10 +10,7 @@
           "outputRepo": "https://github.com/ember-cli/ember-addon-output",
           "codemodsSource": "ember-addon-codemods-manifest@1",
           "isBaseBlueprint": true,
-          "options": [
-            "--welcome",
-            "--yarn"
-          ]
+          "options": ["--welcome", "--yarn"]
         }
       ]
     }

tests/dummy/app/templates/docautoscroll.hbs

@@ -1,10 +1,6 @@
 'use strict';
 
-const browsers = [
-  'last 1 Chrome versions',
-  'last 1 Firefox versions',
-  'last 1 Safari versions',
-];
+const browsers = ['last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions'];
 
 // Ember's browser support policy is changing, and IE11 support will end in
 // v4.0 onwards.

tests/dummy/app/templates/index.hbs

@@ -1,25 +1,22 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Dummy Tests</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    {{content-for "head"}}
-    {{content-for "test-head"}}
+    {{content-for "head"}} {{content-for "test-head"}}
 
-    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/dummy.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/test-support.css">
+    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
+    <link rel="stylesheet" href="{{rootURL}}assets/dummy.css" />
+    <link rel="stylesheet" href="{{rootURL}}assets/test-support.css" />
 
-    {{content-for "head-footer"}}
-    {{content-for "test-head-footer"}}
+    {{content-for "head-footer"}} {{content-for "test-head-footer"}}
   </head>
   <body>
-    {{content-for "body"}}
-    {{content-for "test-body"}}
+    {{content-for "body"}} {{content-for "test-body"}}
 
     <div id="qunit"></div>
     <div id="qunit-fixture">
@@ -34,7 +31,6 @@
     <script src="{{rootURL}}assets/dummy.js"></script>
     <script src="{{rootURL}}assets/tests.js"></script>
 
-    {{content-for "body-footer"}}
-    {{content-for "test-body-footer"}}
+    {{content-for "body-footer"}} {{content-for "test-body-footer"}}
   </body>
 </html>

tests/dummy/config/ember-cli-update.json

@@ -1,13 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import {
-  settled,
-  find,
-  findAll,
-  render,
-  triggerKeyEvent,
-  waitUntil,
-} from '@ember/test-helpers';
+import { settled, find, findAll, render, triggerKeyEvent, waitUntil } from '@ember/test-helpers';
 import { set } from '@ember/object';
 import { reorder } from 'ember-sortable/test-support/helpers';
 import hbs from 'htmlbars-inline-precompile';
@@ -109,9 +102,7 @@ module('Integration | Modifier | sortable-group', function (hooks) {
     await announcerHasText();
     assert
       .dom(announcerSelector)
-      .hasText(
-        'item is moved to position, 2 of 3. Press Space to confirm new position, Escape to cancel.'
-      );
+      .hasText('item is moved to position, 2 of 3. Press Space to confirm new position, Escape to cancel.');
 
     triggerKeyEvent('[data-test-handle=Uno]', 'keydown', 32) /* SPACE */;
 
@@ -126,11 +117,7 @@ module('Integration | Modifier | sortable-group', function (hooks) {
   });
 
   function contents(selector) {
-    return find(selector)
-      .textContent.replace(/⇕/g, '')
-      .replace(/\s+/g, ' ')
-      .replace(/^\s+/, '')
-      .replace(/\s+$/, '');
+    return find(selector).textContent.replace(/⇕/g, '').replace(/\s+/g, ' ').replace(/^\s+/, '').replace(/\s+$/, '');
   }
 
   let announcerSelector = '#test-list + .visually-hidden';

tests/dummy/config/targets.js

@@ -6,9 +6,7 @@ module('Unit | Service | ember-sortable', function (hooks) {
   setupTest(hooks);
 
   hooks.beforeEach(function () {
-    this.sortableService = this.owner.lookup(
-      'service:ember-sortable@ember-sortable'
-    );
+    this.sortableService = this.owner.lookup('service:ember-sortable@ember-sortable');
 
     // While not truly a group modifier, the service just registers whatever object is passed
     this.groupModifier = {
@@ -48,10 +46,7 @@ module('Unit | Service | ember-sortable', function (hooks) {
     assert.ok(isArray(groupDef.items));
     assert.ok(groupDef.items.includes(this.sortableItem));
 
-    this.sortableService.deregisterItem(
-      this.unregisteredGroupName,
-      this.sortableItem
-    );
+    this.sortableService.deregisterItem(this.unregisteredGroupName, this.sortableItem);
     groupDef = this.sortableService.fetchGroup(this.groupName);
     assert.ok(groupDef.items.includes(this.sortableItem));
 
@@ -67,10 +62,6 @@ module('Unit | Service | ember-sortable', function (hooks) {
     assert.ok(isArray(groupDef.items));
 
     let groupDef2 = this.sortableService.fetchGroup(this.groupName);
-    assert.strictEqual(
-      groupDef,
-      groupDef2,
-      'Fetches the correct group is one exists'
-    );
+    assert.strictEqual(groupDef, groupDef2, 'Fetches the correct group is one exists');
   });
 });