diff --git a/.changeset/flat-doors-worry.md b/.changeset/flat-doors-worry.md new file mode 100644 index 00000000..4c44563f --- /dev/null +++ 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 index 589b66db..20ac2dbe 100644 --- 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 index 80df80d8..09d6c17a 100644 --- 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 index 44f1b4e6..0a79705a 100644 --- 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 index 5501a4db..87acf298 100644 --- 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 new file mode 100644 index 00000000..ce8d12b0 --- /dev/null +++ b/src/shared/utils/decorators/AutoBind.ts @@ -0,0 +1,11 @@ +export function AutoBind any>( + originalMethod: T, + {name, addInitializer}: ClassMethodDecoratorContext, T>, +) { + addInitializer(function (this: ThisParameterType) { + /* 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 new file mode 100644 index 00000000..fa310b03 --- /dev/null +++ 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 index 37fca539..b675520b 100644 --- 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 index 49b56eea..74bba9a2 100644 --- 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 index 9b66576f..2fdd6af9 100644 --- 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"