ember-sortable 3.0.1 → 4.0.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@ Please upgrade or ask whatever dependency you are using to upgrade.
 https://github.com/highlightjs/highlight.js/issues/2877
 
 
+
+## v4.0.0 (2022-05-16)
+
+#### :boom: Breaking Change
+* [#479](https://github.com/adopted-ember-addons/ember-sortable/pull/479) Drop node 12 and Ember 3.20 support ([@BnitoBzh](https://github.com/BnitoBzh))
+* [#476](https://github.com/adopted-ember-addons/ember-sortable/pull/476) Update ember-modifier to 3.2.0 (drop Ember < 3.24) ([@BnitoBzh](https://github.com/BnitoBzh))
+
+#### :rocket: Enhancement
+* [#477](https://github.com/adopted-ember-addons/ember-sortable/pull/477) perf: avoid creating callbacks for the destructor ([@BnitoBzh](https://github.com/BnitoBzh))
+
+#### :house: Internal
+* [#478](https://github.com/adopted-ember-addons/ember-sortable/pull/478) chore: update release process to match adopted standards ([@knownasilya](https://github.com/knownasilya))
+
+#### Committers: 3
+- Ewan McDougall ([@mrloop](https://github.com/mrloop))
+- Ilya Radchenko ([@knownasilya](https://github.com/knownasilya))
+- [@BnitoBzh](https://github.com/BnitoBzh)
+
 ## v3.0.1 (2022-03-16)
 
 #### :bug: Bug Fix

package/README.md

@@ -25,6 +25,8 @@ For modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md)
 
 ## Requirements
 
+In version 3.0.0+, Node.js v12 or above And Ember.js v3.24 or above
+
 In version 2.0.0+, our `closest` polyfill seems to break some app's `production` build. To mitigate this, the `closest` polyfill will only enabled if it doesn't break the `production` build (if the `polyfill` file is recognized by the build). Affected apps will need to supply their own [closest](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill) polyfill to ensure compatibility with IE. This issue is tracked [here](https://github.com/adopted-ember-addons/ember-sortable/issues/333).
 
 We require the `ember-decorators-polyfill` to be installed if you are using this addon with versions of Ember < 3.10.0.
@@ -42,16 +44,18 @@ $ ember install ember-sortable
 ## Usage
 
 ```hbs
-{{! app/templates/my-route.hbs }}
+{{! app/components/my-list/template.hbs }}
 
 <ol {{sortable-group onChange=this.reorderItems}}>
-  {{#each @model.items as |modelItem|}}
-    <li {{sortable-item model=modelItem}}>
-      {{modelItem.name}}
+  {{#each this.items as |item|}}
+    <li {{sortable-item model=item}}>
+      {{item}}
       <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
 </ol>
+
+<p>The last dragged item was: {{this.lastDragged}}</p>
 ```
 
 The `onChange` action is called with two arguments:
@@ -60,13 +64,16 @@ The `onChange` action is called with two arguments:
 - The model you just dragged
 
 ```js
-// app/routes/my-route.js
+// app/components/my-list/component.js
+
+export default class MyList extends Component {
+  @tracked lastDragged;
+  @tracked items = ['Coal Ila', 'Askaig', 'Bowmore'];
 
-export default class MyRoute extends Route {
   @action
   reorderItems(itemModels, draggedModel) {
-    this.currentModel.items, itemModels);
-    this.currentModel.justDragged, draggedModel);
+    this.items = itemModels;
+    this.lastDragged = draggedModel;
   }
 }
 ```
@@ -74,12 +81,12 @@ export default class MyRoute extends Route {
 The modifier version does not support `groupModel`, use the currying of `action` or the `fn` helper.
 
 ```hbs
-{{! app/templates/my-route.hbs }}
+{{! app/components/my-list/template.hbs }}
 
 <ol {{sortable-group onChange=(fn this.reorderItems model)}}>
-  {{#each @model.items as |modelItem|}}
-    <li {{sortable-item model=modelItem}}>
-      {{modelItem.name}}
+  {{#each this.items as |item|}}
+    <li {{sortable-item model=item}}>
+      {{item}}
       <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
@@ -187,30 +194,25 @@ When the action is called, the item's model will be provided as the only
 argument.
 
 ```js
-// app/routes/my-route.js
+// app/components/my-list/component.js
 
 export default class MyRoute extends Route {
   @action
   dragStarted(item) {
-    console.log(`Item started dragging: ${item.get('name')}`);
+    console.log(`Item started dragging: ${item}`);
   },
   @action
   dragStopped(item) {
-    console.log(`Item stopped dragging: ${item.get('name')}`);
+    console.log(`Item stopped dragging: ${item}`);
   }
 }
 ```
 
 ```hbs
-  <li {{sortable-item
-    onDragStart=this.dragStarted
-    onDragStop=this.dragStopped
-    model=modelItem
-    }}
-  >
-    {{modelItem.name}}
-    <span class="handle" {{sortable-handle}}>&varr;</span>
-  </li>
+<li {{sortable-item onDragStart=this.dragStarted onDragStop=this.dragStopped model=item}}>
+  {{item}}
+  <span class='handle' {{sortable-handle}}>&varr;</span>
+</li>
 ```
 
 ### Multiple Ember-Sortables renders simultaneously
@@ -221,9 +223,9 @@ Both the `{{sortable-group}}` and `{{sortable-item}}` take an additional argumen
 
 ```hbs
 <ol {{sortable-group groupName='products' onChange=this.reorderItems}}>
-  {{#each @model.items as |modelItem|}}
-    <li {{sortable-item groupName='products' model=modelItem}}>
-      {{modelItem.name}}
+  {{#each this.items as |item|}}
+    <li {{sortable-item groupName='products' model=item}}>
+      {{item}}
       <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
@@ -235,9 +237,9 @@ Ensure that the same name is passed to both the group and the items, this would
 ```hbs
 {{#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}}
+    {{#each this.items as |item|}}
+      <li {{sortable-item groupName=myGroupName model=item}}>
+        {{item}}
         <span class='handle' {{sortable-handle}}>&varr;</span>
       </li>
     {{/each}}

package/RELEASE.md

@@ -0,0 +1,60 @@
+# Release Process
+
+Releases are mostly automated using
+[release-it](https://github.com/release-it/release-it/) and
+[lerna-changelog](https://github.com/lerna/lerna-changelog/).
+
+## Preparation
+
+Since the majority of the actual release process is automated, the primary
+remaining task prior to releasing is confirming that all pull requests that
+have been merged since the last release have been labeled with the appropriate
+`lerna-changelog` labels and the titles have been updated to ensure they
+represent something that would make sense to our users. Some great information
+on why this is important can be found at
+[keepachangelog.com](https://keepachangelog.com/en/1.0.0/), but the overall
+guiding principle here is that changelogs are for humans, not machines.
+
+When reviewing merged PR's the labels to be used are:
+
+* breaking - Used when the PR is considered a breaking change.
+* enhancement - Used when the PR adds a new feature or enhancement.
+* bug - Used when the PR fixes a bug included in a previous release.
+* documentation - Used when the PR adds or updates documentation.
+* internal - Used for internal changes that still require a mention in the
+  changelog/release notes.
+
+## Release
+
+Once the prep work is completed, the actual release is straight forward:
+
+* First, ensure that you have installed your projects dependencies:
+
+```sh
+yarn install
+```
+
+* Second, ensure that you have obtained a
+  [GitHub personal access token][generate-token] with the `repo` scope (no
+  other permissions are needed). Make sure the token is available as the
+  `GITHUB_AUTH` environment variable.
+
+  For instance:
+
+  ```bash
+  export GITHUB_AUTH=abc123def456
+  ```
+
+[generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
+
+* And last (but not least 😁) do your release.
+
+```sh
+npx release-it
+```
+
+[release-it](https://github.com/release-it/release-it/) manages the actual
+release process. It will prompt you to to choose the version number after which
+you will have the chance to hand tweak the changelog to be used (for the
+`CHANGELOG.md` and GitHub release), then `release-it` continues on to tagging,
+pushing the tag and commits, etc.

package/addon/modifiers/sortable-group.js

@@ -15,6 +15,7 @@ import { ANNOUNCEMENT_ACTION_TYPES } from '../utils/constant';
 import { defaultA11yAnnouncementConfig } from '../utils/defaults';
 import { next, schedule, scheduleOnce, later } from '@ember/runloop';
 import { inject as service } from '@ember/service';
+import { registerDestructor, isDestroyed } from '@ember/destroyable';
 
 const NO_MODEL = {};
 
@@ -488,7 +489,7 @@ export default class SortableGroupModifier extends Modifier {
     return this.args.named.onChange;
   }
 
-  @service('ember-sortable@ember-sortable')
+  @service('ember-sortable-internal-state')
   sortableService;
 
   /**
@@ -620,7 +621,7 @@ export default class SortableGroupModifier extends Modifier {
       let dimension;
       let direction = this.direction;
 
-      if (!item.isDragging) {
+      if (!isDestroyed(item) && !item.isDragging) {
         set(item, direction, position);
       }
 
@@ -710,32 +711,44 @@ export default class SortableGroupModifier extends Modifier {
     this.element.removeEventListener('focusout', this.focusOut);
   }
 
-  didReceiveArguments() {
+  element;
+  didSetup = false;
+
+  constructor(owner, args) {
+    super(owner, args);
+    registerDestructor(this, cleanup);
+  }
+
+  modify(element /*, positional, named*/) {
+    this.element = element;
+
     this.removeEventListener();
 
+    if (!this.didSetup) {
+      this.announcer = this._createAnnouncer();
+      this.element.insertAdjacentElement('afterend', this.announcer);
+      this.sortableService.registerGroup(this.groupName, this);
+
+      this.didSetup = true;
+    }
+
     if (this.disabled) {
       return;
     }
 
     this.addEventListener();
   }
+}
 
-  didUpdateArguments() {}
-
-  didInstall() {
-    this.announcer = this._createAnnouncer();
-    this.element.insertAdjacentElement('afterend', this.announcer);
-
-    this.sortableService.registerGroup(this.groupName, this);
-  }
-
-  willRemove() {
-    // todo cleanup the announcer
-    if (this.announcer.parentNode) {
-      this.announcer.parentNode.removeChild(this.announcer);
-    }
-    this.removeEventListener();
-
-    this.sortableService.deregisterGroup(this.groupName, this);
+/**
+ *
+ * @param {SortableGroupModifier} instance
+ */
+function cleanup(instance) {
+  // todo cleanup the announcer
+  if (instance.announcer.parentNode) {
+    instance.announcer.parentNode.removeChild(instance.announcer);
   }
+  instance.removeEventListener();
+  instance.sortableService.deregisterGroup(instance.groupName, instance);
 }

package/addon/modifiers/sortable-handle.js

@@ -15,10 +15,15 @@ import Modifier from 'ember-modifier';
  *    </ol>
  */
 export default class SortableHandleModifier extends Modifier {
-  didInstall() {
-    // take the model and look up the registered element, the tell that element you are the handle
-    this.element.dataset.sortableHandle = true;
-    this.element.tabIndex = '0';
-    this.element.setAttribute('role', 'button');
+  didSetup = false;
+
+  modify(element /*, positional, named*/) {
+    if (!this.didSetup) {
+      // take the model and look up the registered element, the tell that element you are the handle
+      element.dataset.sortableHandle = true;
+      element.tabIndex = '0';
+      element.setAttribute('role', 'button');
+      this.didSetup = true;
+    }
   }
 }

package/addon/modifiers/sortable-item.js

@@ -13,6 +13,7 @@ import { buildWaiter } from '@ember/test-waiters';
 import { inject as service } from '@ember/service';
 import { assert, deprecate } from '@ember/debug';
 import config from 'ember-get-config';
+import { registerDestructor } from '@ember/destroyable';
 
 const { environment } = config;
 const isTesting = environment === 'test';
@@ -41,7 +42,7 @@ const sortableItemWaiter = buildWaiter('sortable-item-waiter');
 export default class SortableItemModifier extends Modifier {
   className = 'sortable-item';
 
-  @service('ember-sortable@ember-sortable') sortableService;
+  @service('ember-sortable-internal-state') sortableService;
 
   _sortableGroup;
   /**
@@ -810,27 +811,43 @@ export default class SortableItemModifier extends Modifier {
     this.element.removeEventListener('touchstart', this.touchStart);
   }
 
-  didReceiveArguments() {
+  element;
+  didSetup = false;
+
+  constructor(owner, args) {
+    super(owner, args);
+    registerDestructor(this, cleanup);
+  }
+
+  modify(element /*, positional, named*/) {
+    this.element = element;
+
     this.element.classList.add(this.className);
 
     // Instead of using `event.preventDefault()` in the 'primeDrag' event,
     // (doesn't work in Chrome 56), we set touch-action: none as a workaround.
     this.handleElement = this.element.querySelector(this.handle);
+
     if (this.handleElement) {
       this.handleElement.style['touch-action'] = 'none';
     } else {
       this.element.style['touch-action'] = 'none';
     }
-  }
 
-  didInstall() {
-    this.addEventListener();
-    this.element.dataset.sortableItem = true;
-    this.sortableService.registerItem(this.groupName, this);
+    if (!this.didSetup) {
+      this.addEventListener();
+      this.element.dataset.sortableItem = true;
+      this.sortableService.registerItem(this.groupName, this);
+      this.didSetup = true;
+    }
   }
+}
 
-  willRemove() {
-    this.removeEventListener();
-    this.sortableService.deregisterItem(this.groupName, this);
-  }
+/**
+ *
+ * @param {SortableItemModifier} instance
+ */
+function cleanup(instance) {
+  instance.removeEventListener();
+  instance.sortableService.deregisterItem(instance.groupName, instance);
 }

package/app/services/ember-sortable-internal-state.js

@@ -0,0 +1 @@
+export { default } from 'ember-sortable/services/ember-sortable';

package/package.json

@@ -1,81 +1,84 @@
 {
   "name": "ember-sortable",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "description": "Sortable UI primitives for Ember.",
   "keywords": [
     "ember-addon",
     "sortable"
   ],
+  "repository": "https://github.com/adopted-ember-addons/ember-sortable",
   "license": "MIT",
   "author": "",
   "directories": {
     "doc": "doc",
     "test": "tests"
   },
-  "repository": "https://github.com/adopted-ember-addons/ember-sortable",
   "scripts": {
     "build": "ember build",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
     "start": "ember serve",
-    "test": "ember test",
+    "test:ember": "ember test",
     "test:all": "ember try:each",
     "lint": "yarn lint:hbs && yarn lint:js",
     "release": "release-it"
   },
   "dependencies": {
     "@ember/render-modifiers": "^1.0.2 || ^2.0.0",
-    "@ember/test-waiters": "^2.4.4",
-    "ember-cli-babel": "^7.26.6",
-    "ember-cli-htmlbars": "^5.0.0",
+    "@ember/test-waiters": "^3.0.1",
+    "ember-cli-babel": "^7.26.11",
+    "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-version-checker": "^5.1.2",
-    "ember-get-config": "^0.3.0",
-    "ember-modifier": "^2.1.0",
+    "ember-get-config": "^2.0.0",
+    "ember-modifier": "^3.2.0",
     "ember-test-selectors": "^6.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.4.2",
-    "@embroider/test-setup": "^0.43.5",
+    "@ember/test-helpers": "^2.6.0",
+    "@embroider/test-setup": "^1.2.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "babel-eslint": "^10.0.3",
-    "broccoli-asset-rev": "^2.7.0",
-    "ember-a11y-testing": "^4.3.0",
-    "ember-cli": "^3.28.0",
+    "broccoli-asset-rev": "^3.0.0",
+    "ember-a11y-testing": "^5.0.0",
+    "ember-auto-import": "^2.4.0",
+    "ember-cli": "^4.2.0",
     "ember-cli-dependency-checker": "^3.0.0",
-    "ember-cli-eslint": "^4.2.3",
-    "ember-cli-inject-live-reload": "^1.8.2",
+    "ember-cli-inject-live-reload": "^2.0.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.0",
     "ember-load-initializers": "^2.1.2",
-    "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^5.1.4",
+    "ember-qunit": "mydea/ember-qunit#fn/ember-auto-import-v2-node-12",
     "ember-resolver": "^8.0.3",
-    "ember-source": "^3.28.0",
+    "ember-source": "^4.2.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^3.6.0",
-    "ember-try": "^1.4.0",
+    "ember-template-lint": "^4.2.0",
+    "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-ember": "~9.6.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-plugin-ember": "^10.5.9",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "eslint-plugin-qunit": "^6.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-qunit": "^7.2.0",
     "husky": "^3.0.8",
     "lerna-changelog": "^0.8.2",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
-    "qunit": "^2.16.0",
-    "qunit-dom": "^1.6.0",
+    "prettier": "^2.5.1",
+    "qunit": "^2.18.0",
+    "qunit-dom": "^2.0.0",
     "release-it": "^14.11.8",
-    "release-it-lerna-changelog": "^4.0.1"
+    "release-it-lerna-changelog": "^4.0.1",
+    "webpack": "^5.69.1"
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": "14.* || >= 16"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   },
   "ember": {
     "edition": "octane"
@@ -87,14 +90,20 @@
   "release-it": {
     "plugins": {
       "release-it-lerna-changelog": {
-        "infile": "CHANGELOG.md"
+        "infile": "CHANGELOG.md",
+        "launchEditor": false
       }
     },
     "git": {
       "tagName": "v${version}"
     },
     "github": {
-      "release": true
+      "release": true,
+      "tokenRef": "GITHUB_AUTH"
     }
+  },
+  "volta": {
+    "node": "14.19.2",
+    "yarn": "1.22.18"
   }
 }

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,25 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-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 '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Additional context**
-Add any other context about the problem here.

package/.github/workflows/github_ci.yml

@@ -1,71 +0,0 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: build
-
-on:
-  workflow_dispatch:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-jobs:
-  main-test:
-    name: Main test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12
-          cache: yarn
-      - name: Install Dependencies
-        run: yarn install --frozen-lockfile
-      - name: Running tests
-        run: yarn test
-
-  ember-try-required:
-    name: Ember try ember-${{matrix.scenario}}
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        scenario: [ember-lts-3.20, ember-lts-3.24, ember-lts-3.28]
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12
-          cache: yarn
-      - name: Install Dependencies
-        run: yarn install --frozen-lockfile
-      - name: Running test
-        run: yarn ember try:one ${{ matrix.scenario }}
-
-  ember-try-optional:
-    name: Ember try ember-${{matrix.scenario}}
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      max-parallel: 1
-      matrix:
-        scenario: [ember-beta, ember-release, ember-canary]
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12
-          cache: yarn
-      - name: Install Dependencies
-        run: yarn install --frozen-lockfile
-      - name: Running test
-        run: yarn ember try:one ${{ matrix.scenario }}
-        continue-on-error: true