Skip to content

Commit c1df3a5

Browse files
committed
Adds AutoBind decorator
1 parent 82c3679 commit c1df3a5

File tree

10 files changed

+47
-11
lines changed

10 files changed

+47
-11
lines changed

.changeset/flat-doors-worry.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/draggable': patch
3+
---
4+
5+
Adds AutoBind decorator

babel.config.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
/**
2-
* @type {import('@babel/core').TransformOptions}
3-
*/
41
module.exports = function (api) {
52
api.cache(true);
63

@@ -12,6 +9,7 @@ module.exports = function (api) {
129
],
1310
['@babel/preset-typescript'],
1411
],
12+
plugins: [['@babel/plugin-proposal-decorators', {version: '2023-05'}]],
1513
assumptions: {
1614
setPublicClassFields: true,
1715
privateFieldsAsProperties: true,

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
],
5050
"devDependencies": {
5151
"@babel/core": "^7.22.20",
52+
"@babel/plugin-proposal-decorators": "^7.23.0",
5253
"@babel/preset-env": "^7.22.20",
5354
"@babel/preset-typescript": "^7.23.0",
5455
"@changesets/changelog-github": "^0.4.8",

src/Plugins/ResizeMirror/ResizeMirror.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import AbstractPlugin from 'shared/AbstractPlugin';
2-
import {requestNextAnimationFrame} from 'shared/utils';
2+
import {requestNextAnimationFrame, AutoBind} from 'shared/utils';
33
import {FixMeAny} from 'shared/types';
44

55
import {MirrorCreatedEvent} from '../../Draggable/Plugins/Mirror/MirrorEvent';
@@ -53,10 +53,6 @@ export default class ResizeMirror extends AbstractPlugin {
5353
* @property {HTMLElement} mirror
5454
*/
5555
this.mirror = null;
56-
57-
this.onMirrorCreated = this.onMirrorCreated.bind(this);
58-
this.onMirrorDestroy = this.onMirrorDestroy.bind(this);
59-
this.onDragOver = this.onDragOver.bind(this);
6056
}
6157

6258
/**
@@ -93,6 +89,7 @@ export default class ResizeMirror extends AbstractPlugin {
9389
* @param {MirrorCreatedEvent} mirrorEvent
9490
* @private
9591
*/
92+
@AutoBind
9693
private onMirrorCreated({mirror}: MirrorCreatedEvent) {
9794
this.mirror = mirror;
9895
}
@@ -102,6 +99,7 @@ export default class ResizeMirror extends AbstractPlugin {
10299
* @param {MirrorDestroyEvent} mirrorEvent
103100
* @private
104101
*/
102+
@AutoBind
105103
private onMirrorDestroy() {
106104
this.mirror = null;
107105
}
@@ -111,6 +109,7 @@ export default class ResizeMirror extends AbstractPlugin {
111109
* @param {DragOverEvent | DragOverContainer} dragEvent
112110
* @private
113111
*/
112+
@AutoBind
114113
private onDragOver(dragEvent: DragOverEvent | DragOverContainerEvent) {
115114
this.resize(dragEvent);
116115
}

src/Plugins/SwapAnimation/SwapAnimation.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import AbstractPlugin from 'shared/AbstractPlugin';
22
import {FixMeAny} from 'shared/types';
3+
import {AutoBind} from 'shared/utils';
34

45
interface Options {
56
duration: number;
@@ -56,8 +57,6 @@ export default class SwapAnimation extends AbstractPlugin {
5657
* @type {Number}
5758
*/
5859
this.lastAnimationFrame = null;
59-
60-
this.onSortableSorted = this.onSortableSorted.bind(this);
6160
}
6261

6362
/**
@@ -87,6 +86,7 @@ export default class SwapAnimation extends AbstractPlugin {
8786
* @param {SortableSortedEvent} sortableEvent
8887
* @private
8988
*/
89+
@AutoBind
9090
onSortableSorted({oldIndex, newIndex, dragEvent}: FixMeAny) {
9191
const {source, over} = dragEvent;
9292

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export function AutoBind<T extends (...args: any[]) => any>(
2+
originalMethod: T,
3+
{name, addInitializer}: ClassMethodDecoratorContext<ThisParameterType<T>, T>,
4+
) {
5+
addInitializer(function (this: ThisParameterType<T>) {
6+
/* eslint-disable @typescript-eslint/ban-ts-comment */
7+
// @ts-ignore
8+
this[name as PropertyKey] = originalMethod.bind(this);
9+
/* eslint-enable @typescript-eslint/ban-ts-comment */
10+
});
11+
}

src/shared/utils/decorators/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {AutoBind} from './AutoBind';

src/shared/utils/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export {default as closest} from './closest';
2+
export {AutoBind} from './decorators';
23
export {default as requestNextAnimationFrame} from './requestNextAnimationFrame';
34
export {default as distance} from './distance';
45
export {default as touchCoords} from './touchCoords';

tsconfig.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
"outDir": "build/ts",
77
"rootDir": "./",
88
"strictFunctionTypes": false,
9+
"emitDecoratorMetadata": false,
10+
"experimentalDecorators": false,
911
"paths": {
1012
"shared/*": ["./src/shared/*"],
1113
"helper": ["./test/helper.ts"]

yarn.lock

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@
201201
"@babel/helper-environment-visitor" "^7.22.20"
202202
"@babel/helper-wrap-function" "^7.22.20"
203203

204-
"@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
204+
"@babel/helper-replace-supers@^7.22.20", "@babel/helper-replace-supers@^7.22.5", "@babel/helper-replace-supers@^7.22.9":
205205
version "7.22.20"
206206
resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz#e37d367123ca98fe455a9887734ed2e16eb7a793"
207207
integrity sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==
@@ -294,6 +294,17 @@
294294
"@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
295295
"@babel/plugin-transform-optional-chaining" "^7.22.15"
296296

297+
"@babel/plugin-proposal-decorators@^7.23.0":
298+
version "7.23.0"
299+
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.23.0.tgz#66d9014173b3267a9ced3e69935138bc64ffb5c8"
300+
integrity sha512-kYsT+f5ARWF6AdFmqoEEp+hpqxEB8vGmRWfw2aj78M2vTwS2uHW91EF58iFm1Z9U8Y/RrLu2XKJn46P9ca1b0w==
301+
dependencies:
302+
"@babel/helper-create-class-features-plugin" "^7.22.15"
303+
"@babel/helper-plugin-utils" "^7.22.5"
304+
"@babel/helper-replace-supers" "^7.22.20"
305+
"@babel/helper-split-export-declaration" "^7.22.6"
306+
"@babel/plugin-syntax-decorators" "^7.22.10"
307+
297308
"@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
298309
version "7.21.0-placeholder-for-preset-env.2"
299310
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 @@
327338
dependencies:
328339
"@babel/helper-plugin-utils" "^7.14.5"
329340

341+
"@babel/plugin-syntax-decorators@^7.22.10":
342+
version "7.22.10"
343+
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.22.10.tgz#7d83ea04d893c442b78ebf4c3cbac59a7211deff"
344+
integrity sha512-z1KTVemBjnz+kSEilAsI4lbkPOl5TvJH7YDSY1CTIzvLWJ+KHXp+mRe8VPmfnyvqOPqar1V2gid2PleKzRUstQ==
345+
dependencies:
346+
"@babel/helper-plugin-utils" "^7.22.5"
347+
330348
"@babel/plugin-syntax-dynamic-import@^7.8.3":
331349
version "7.8.3"
332350
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"

0 commit comments

Comments
 (0)