update syntax to current ember

addon/dist/components/grid-item.js

@@ -2,13 +2,13 @@ import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty } from
 import { _ as _defineProperty } from '../defineProperty-f419f636.js';
 import { setComponentTemplate } from '@ember/component';
 import { hbs } from 'ember-cli-htmlbars';
-import { computed, action } from '@ember/object';
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 
 var TEMPLATE = hbs("{{!-- template-lint-disable  --}}\n<div\n    draggable={{this.canDrag}}\n    {{did-insert this.insertAction}}\n    {{position this.itemPosition}}\n    {{on \"dragstart\" this.dragStartAction}}\n    {{on \"drag\" this.dragMoveAction}}\n    {{on \"dragend\" this.dragEndAction}}\n    {{on \"mouseover\" this.mouseOverAction}}\n    {{on \"mouseleave\" this.mouseLeaveAction}}\n    class=\"grid-item\" >\n    {{yield}}\n</div>\n\n\n");
 
-var _dec, _class, _descriptor;
+var _class, _descriptor;
 
 function getScrollParent(el) {
   let returnEl;
@@ -39,7 +39,7 @@ function getScrollParent(el) {
 */
 
 
-let GridItem = (_dec = computed('args.pos.{x,y,w,h}', 'args.grid.containerWidth'), (_class = class GridItem extends Component {
+let GridItem = (_class = class GridItem extends Component {
   constructor(...args) {
     super(...args);
 
@@ -172,7 +172,7 @@ let GridItem = (_dec = computed('args.pos.{x,y,w,h}', 'args.grid.containerWidth'
   initializer: function () {
     return !this.args.handle;
   }
-}), _applyDecoratedDescriptor(_class.prototype, "itemPosition", [_dec], Object.getOwnPropertyDescriptor(_class.prototype, "itemPosition"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "insertAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "insertAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragStartAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragStartAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragMoveAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragMoveAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragEndAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragEndAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "mouseOverAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseOverAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "mouseLeaveAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseLeaveAction"), _class.prototype)), _class));
+}), _applyDecoratedDescriptor(_class.prototype, "itemPosition", [cached], Object.getOwnPropertyDescriptor(_class.prototype, "itemPosition"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "insertAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "insertAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragStartAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragStartAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragMoveAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragMoveAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "dragEndAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "dragEndAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "mouseOverAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseOverAction"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "mouseLeaveAction", [action], Object.getOwnPropertyDescriptor(_class.prototype, "mouseLeaveAction"), _class.prototype)), _class);
 setComponentTemplate(TEMPLATE, GridItem);
 
 export { GridItem as default };

addon/src/components/grid-item.js

@@ -1,6 +1,6 @@
-import { action, computed } from '@ember/object';
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 
 function getScrollParent(el) {
     let returnEl;
@@ -35,7 +35,7 @@ export default class GridItem extends Component {
     handle = this.args.handle;
     @tracked canDrag = !this.args.handle;
 
-    @computed('args.pos.{x,y,w,h}', 'args.grid.containerWidth')
+    @cached
     get itemPosition() {
         if (!this.args.pos) {
             return '';

docs/.prettierrc.js

@@ -1,5 +1,13 @@
 'use strict';
 
 module.exports = {
-  singleQuote: true,
+    singleQuote: true,
+    arrowParens: 'always',
+    bracketSpacing: true,
+    printWidth: 100,
+    proseWrap: 'preserve',
+    semi: true,
+    tabWidth: 4,
+    trailingComma: 'all',
+    useTabs: false,
 };

docs/app/controllers/index.js

@@ -1,6 +1,8 @@
 import Controller from '@ember/controller';
-import { compact, moveElement } from 'ember-grid-layout/utils';
-import { setProperties, action } from '@ember/object';
+import { compact } from 'ember-grid-layout/utils';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { next } from '@ember/runloop';
 import 'ember-grid-layout/styles/grid-layout.css';
 
 let i = 10;
@@ -13,26 +15,30 @@ let layout = [
 
 layout = compact(layout, 'vertical', 12);
 
-const wrappedLayout = layout.map((d, i) => ({
-    data: i,
-    position: d,
-}));
+class Layout {
+    @tracked position;
+    data = null;
+    constructor(position, data) {
+        this.data = data;
+        this.position = position;
+    }
+}
+
+const wrappedLayout = layout.map((d, i) => new Layout(d, i));
 
 export default class IndexController extends Controller {
     compactType = 'vertical';
     preventCollision = true;
     cols = 2;
-    width = 555;
+    @tracked width = 555;
     wrappedLayout = wrappedLayout;
 
-    init() {
-        super.init(...arguments);
-    }
-
     @action
     updatePosition(newLayout, moving) {
-        this.wrappedLayout.forEach((d, i) => {
-            setProperties(d.position, newLayout[i]);
+        next(this, function () {
+            this.wrappedLayout.forEach((d, i) => {
+                d.position = newLayout[i];
+            });
         });
     }
 
@@ -57,6 +63,6 @@ export default class IndexController extends Controller {
 
     @action
     changeWidth() {
-        this.set('width', this.width * 0.8);
+        this.width = this.width * 0.8;
     }
 }