Shopify · tsov · Oct 11, 2023 · Oct 11, 2023
diff --git a/.changeset/flat-doors-worry.md b/.changeset/flat-doors-worry.md
@@ -0,0 +1,5 @@
+---
+'@shopify/draggable': patch
+---
+
+Adds AutoBind decorator
diff --git a/babel.config.js b/babel.config.js
@@ -1,6 +1,3 @@
-/**
- * @type {import('@babel/core').TransformOptions}
- */
 module.exports = function (api) {
   api.cache(true);
 
@@ -12,6 +9,7 @@ module.exports = function (api) {
       ],
       ['@babel/preset-typescript'],
     ],
+    plugins: [['@babel/plugin-proposal-decorators', {version: '2023-05'}]],
     assumptions: {
       setPublicClassFields: true,
       privateFieldsAsProperties: true,

diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.22.20",
+    "@babel/plugin-proposal-decorators": "^7.23.0",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-typescript": "^7.23.0",
     "@changesets/changelog-github": "^0.4.8",

diff --git a/src/Plugins/ResizeMirror/ResizeMirror.ts b/src/Plugins/ResizeMirror/ResizeMirror.ts
@@ -1,5 +1,5 @@
 import AbstractPlugin from 'shared/AbstractPlugin';
-import {requestNextAnimationFrame} from 'shared/utils';
+import {requestNextAnimationFrame, AutoBind} from 'shared/utils';
 import {FixMeAny} from 'shared/types';
 
 import {MirrorCreatedEvent} from '../../Draggable/Plugins/Mirror/MirrorEvent';
@@ -53,10 +53,6 @@ export default class ResizeMirror extends AbstractPlugin {
      * @property {HTMLElement} mirror
      */
     this.mirror = null;
-
-    this.onMirrorCreated = this.onMirrorCreated.bind(this);
-    this.onMirrorDestroy = this.onMirrorDestroy.bind(this);
-    this.onDragOver = this.onDragOver.bind(this);
   }
 
   /**
@@ -93,6 +89,7 @@ export default class ResizeMirror extends AbstractPlugin {
    * @param {MirrorCreatedEvent} mirrorEvent
    * @private
    */
+  @AutoBind
   private onMirrorCreated({mirror}: MirrorCreatedEvent) {
     this.mirror = mirror;
   }
@@ -102,6 +99,7 @@ export default class ResizeMirror extends AbstractPlugin {
    * @param {MirrorDestroyEvent} mirrorEvent
    * @private
    */
+  @AutoBind
   private onMirrorDestroy() {
     this.mirror = null;
   }
@@ -111,6 +109,7 @@ export default class ResizeMirror extends AbstractPlugin {
    * @param {DragOverEvent | DragOverContainer} dragEvent
    * @private
    */
+  @AutoBind
   private onDragOver(dragEvent: DragOverEvent | DragOverContainerEvent) {
     this.resize(dragEvent);
   }

diff --git a/src/Plugins/SwapAnimation/SwapAnimation.ts b/src/Plugins/SwapAnimation/SwapAnimation.ts
@@ -1,5 +1,6 @@
 import AbstractPlugin from 'shared/AbstractPlugin';
 import {FixMeAny} from 'shared/types';
+import {AutoBind} from 'shared/utils';
 
 interface Options {
   duration: number;
@@ -56,8 +57,6 @@ export default class SwapAnimation extends AbstractPlugin {
      * @type {Number}
      */
     this.lastAnimationFrame = null;
-
-    this.onSortableSorted = this.onSortableSorted.bind(this);
   }
 
   /**
@@ -87,6 +86,7 @@ export default class SwapAnimation extends AbstractPlugin {
    * @param {SortableSortedEvent} sortableEvent
    * @private
    */
+  @AutoBind
   onSortableSorted({oldIndex, newIndex, dragEvent}: FixMeAny) {
     const {source, over} = dragEvent;
 

diff --git a/src/shared/utils/decorators/AutoBind.ts b/src/shared/utils/decorators/AutoBind.ts
@@ -0,0 +1,11 @@
+export function AutoBind<T extends (...args: any[]) => any>(
+  originalMethod: T,
+  {name, addInitializer}: ClassMethodDecoratorContext<ThisParameterType<T>, T>,
+) {
+  addInitializer(function (this: ThisParameterType<T>) {
+    /* eslint-disable @typescript-eslint/ban-ts-comment */
+    // @ts-ignore
+    this[name as PropertyKey] = originalMethod.bind(this);
+    /* eslint-enable @typescript-eslint/ban-ts-comment */
+  });
+}
diff --git a/src/shared/utils/decorators/index.ts b/src/shared/utils/decorators/index.ts
@@ -0,0 +1 @@
+export {AutoBind} from './AutoBind';
diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
@@ -1,4 +1,5 @@
 export {default as closest} from './closest';
+export {AutoBind} from './decorators';
 export {default as requestNextAnimationFrame} from './requestNextAnimationFrame';
 export {default as distance} from './distance';
 export {default as touchCoords} from './touchCoords';
diff --git a/tsconfig.json b/tsconfig.json
@@ -6,6 +6,8 @@
     "outDir": "build/ts",
     "rootDir": "./",
     "strictFunctionTypes": false,
+    "emitDecoratorMetadata": false,
+    "experimentalDecorators": false,
     "paths": {
       "shared/*": ["./src/shared/*"],
       "helper": ["./test/helper.ts"]

diff --git a/yarn.lock b/yarn.lock
@@ -201,7 +201,7 @@
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-wrap-function" "^7.22.20"
 
-"@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
+"@babel/helper-replace-supers@^7.22.20", "@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
   integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
@@ -294,6 +294,17 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
     "@babel/plugin-transform-optional-chaining" "^7.22.15"
 
+"@babel/plugin-proposal-decorators@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.23.0.tgz#66d9014173b3267a9ced3e69935138bc64ffb5c8"
+  integrity sha512-kYsT+f5ARWF6AdFmqoEEp+hpqxEB8vGmRWfw2aj78M2vTwS2uHW91EF58iFm1Z9U8Y/RrLu2XKJn46P9ca1b0w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/helper-replace-supers" "^7.22.20"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/plugin-syntax-decorators" "^7.22.10"
+
 "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
   version "7.21.0-placeholder-for-preset-env.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
@@ -327,6 +338,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-syntax-decorators@^7.22.10":
+  version "7.22.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.22.10.tgz#7d83ea04d893c442b78ebf4c3cbac59a7211deff"
+  integrity sha512-z1KTVemBjnz+kSEilAsI4lbkPOl5TvJH7YDSY1CTIzvLWJ+KHXp+mRe8VPmfnyvqOPqar1V2gid2PleKzRUstQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.22.5"
+
 "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"