TS rewrite

.babelrc

@@ -8,12 +8,13 @@
         "targets": ">1%, not dead, not ie 11, not op_mini all"
       }
     ],
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@babel/preset-typescript"
   ],
-  "plugins": [["@babel/proposal-class-properties", { "loose": true }]],
+  "plugins": [["@babel/proposal-class-properties", { "loose": true }], ["@babel/plugin-proposal-object-rest-spread", { "loose": true }]],
   "env": {
     "test": {
-      "plugins": ["@babel/transform-modules-commonjs", "@babel/plugin-transform-runtime"]
+      "plugins": ["@babel/transform-modules-commonjs"]
     }
   }
 }

.travis.yml

@@ -7,4 +7,3 @@ cache:
     - /home/travis/.dts/typescript-installs/
 script:
   - 'yarn test'
-  - 'yarn dtslint'

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## 5.1.0 Release
 
-**Summary:** important release introducing trackpad gestures. There has been some important refactoring involved.
+**Summary:** important release introducing trackpad gestures. The library has been fully rewritten in TypeScript with some important refactoring involved.
 
 ### Added
 
@@ -15,6 +15,10 @@
 
 1. Drag gesture will interrupt if a move event has no button pressed (that could happen if triggering a right click) and then moving the mouse around.
 
+### Breaking changes
+
+1. `config` object must be passed as a second argument.
+
 ## 5.0.1 Release
 
 **Summary:** release updating dev dependencies and fixing minor bugs.
@@ -62,7 +66,7 @@ const bind = useGesture({
   onDrag: ({ first }) => {
     if (first) setDragCount(dragCount + 1)
     console.log(count) //<-- count will be up to date
-  }
+  },
 })
 ```
 
@@ -183,7 +187,7 @@ const bind = useGesture({
   onDrag: ({ first }) => {
     if (first) setDragCount(dragCount + 1)
     console.log(count) //<-- count will be up to date
-  }
+  },
 })
 ```
 

package.json

@@ -2,9 +2,8 @@
   "name": "react-use-gesture",
   "version": "5.1.0-beta.6",
   "description": "hook for receiving gestures",
-  "main": "dist/react-use-gesture.js",
-  "module": "dist/react-use-gesture.es.js",
-  "types": "types",
+  "main": "dist/react-use-gesture.cjs.js",
+  "module": "dist/react-use-gesture.js",
   "sideEffects": false,
   "husky": {
     "hooks": {
@@ -17,8 +16,7 @@
     "prepare": "npm run build",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage --silent",
-    "dtslint": "dtslint types"
+    "test:coverage": "jest --coverage --silent"
   },
   "repository": {
     "type": "git",
@@ -46,25 +44,25 @@
     "url": "https://github.com/react-spring/react-use-gesture/issues"
   },
   "homepage": "https://github.com/react-spring/react-use-gesture#readme",
+  "prettier": {
+    "semi": false,
+    "trailingComma": "es5",
+    "singleQuote": true,
+    "jsxBracketSameLine": true,
+    "tabWidth": 2,
+    "printWidth": 140
+  },
   "devDependencies": {
     "@babel/core": "7.4.4",
     "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/plugin-transform-modules-commonjs": "^7.4.3",
     "@babel/plugin-transform-runtime": "7.4.4",
     "@babel/preset-env": "^7.4.3",
     "@babel/preset-react": "^7.0.0",
-    "@types/react": "^16.4.18",
+    "@babel/preset-typescript": "^7.3.3",
+    "@types/react": "^16.8.18",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.x",
     "babel-jest": "^24.7.1",
-    "dtslint": "^0.7.1",
-    "eslint": "5.x",
-    "eslint-config-react-app": "^4.0.1",
-    "eslint-plugin-flowtype": "2.x",
-    "eslint-plugin-import": "2.x",
-    "eslint-plugin-jsx-a11y": "6.x",
-    "eslint-plugin-react": "7.x",
-    "eslint-plugin-react-hooks": "^1.6.0",
     "husky": "^2.2.0",
     "jest": "^24.7.1",
     "jest-dom": "^3.1.3",
@@ -76,16 +74,16 @@
     "rimraf": "^2.6.2",
     "rollup": "^1.10.0",
     "rollup-plugin-babel": "^4.3.2",
-    "typescript": "^3.4.3"
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.0.0",
+    "rollup-plugin-uglify": "^6.0.2",
+    "typescript": "^3.4.5"
   },
   "peerDependencies": {
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0"
   },
   "jest": {
-    "testPathIgnorePatterns": [
-      "components/",
-      "types/"
-    ]
+    "testRegex": "test.(js|ts|tsx)$"
   }
 }

rollup.config.js

@@ -1,9 +1,42 @@
-import babel from 'rollup-plugin-babel'
 import pkg from './package.json'
+const babel = require('rollup-plugin-babel')
+const resolve = require('rollup-plugin-node-resolve')
+const commonjs = require('rollup-plugin-commonjs')
 
-export default {
-  input: './src/index.js',
-  output: [{ file: pkg.main, format: 'cjs' }, { file: pkg.module, format: 'es' }],
-  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
-  plugins: [babel()]
-}
+const extensions = ['.js', '.jsx', '.ts']
+
+const getBabelOptions = ({ useESModules }, targets) => ({
+  babelrc: false,
+  comments: false,
+  extensions,
+  exclude: '**/node_modules/**',
+  runtimeHelpers: true,
+  presets: [['@babel/preset-env', { loose: true, modules: false, targets }], '@babel/preset-react', '@babel/preset-typescript'],
+  plugins: [
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
+    ['@babel/plugin-transform-runtime', { regenerator: false, useESModules }],
+  ],
+})
+
+export default [
+  {
+    input: `./src/index`,
+    output: { file: pkg.module, format: 'esm' },
+    external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+    plugins: [babel(getBabelOptions({ useESModules: true }, '>1%, not dead, not ie 11, not op_mini all')), resolve({ extensions })],
+  },
+  {
+    input: `./src/index`,
+    output: { file: pkg.main, format: 'cjs' },
+    external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+    plugins: [babel(getBabelOptions({ useESModules: false })), commonjs(), resolve({ extensions })],
+  },
+]
+
+// export default {
+//   input: './src/index',
+//   output: [{ file: pkg.main, format: 'cjs' }, { file: pkg.module, format: 'es' }],
+//   external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
+//   plugins: [babel()]
+// }

src/__tests__/Drag.test.js

@@ -13,7 +13,7 @@ describe.each([['attached to component', Interactive, false], ['attached to node
   'testing onDrag %s)',
   (testName, Component, domTarget) => {
     const prefix = domTarget ? 'dom-' : ''
-    const { getByTestId, queryByTestId, rerender } = render(<Component gesture="Drag" tempArg="temp" />)
+    const { getByTestId, queryByTestId, rerender } = render(<Component gestures={['Drag']} tempArg="temp" />)
     const element = getByTestId(`${prefix}drag-el`)
     let delta_t
 
@@ -76,31 +76,31 @@ describe.each([['attached to component', Interactive, false], ['attached to node
     })
 
     test('disabling all gestures should prevent state from updating', () => {
-      rerender(<Component gesture="Drag" config={{ enabled: false }} />)
+      rerender(<Component gestures={['Drag']} config={{ enabled: false }} />)
       fireEvent.mouseDown(element)
       expect(getByTestId(`${prefix}drag-dragging`)).toHaveTextContent('false')
     })
 
     test('disabling the drag gesture should prevent state from updating', () => {
-      rerender(<Component gesture="Drag" config={{ drag: false }} />)
+      rerender(<Component gestures={['Drag']} config={{ drag: false }} />)
       fireEvent.mouseDown(element)
       expect(getByTestId(`${prefix}drag-dragging`)).toHaveTextContent('false')
     })
 
     test('restarting the gesture should book-keep local and reset delta', () => {
-      rerender(<Component gesture="Drag" />)
+      rerender(<Component gestures={['Drag']} />)
       fireEvent.mouseDown(element, { clientX: 30, clientY: 60 })
       fireEvent.mouseMove(document, { clientX: 20, clientY: 50, buttons: 1 })
       expect(getByTestId(`${prefix}drag-local`)).toHaveTextContent('0,20')
       expect(getByTestId(`${prefix}drag-delta`)).toHaveTextContent('-10,-10')
     })
 
     test('canceling the gesture should cancel the gesture in the next RAF tick', async () => {
-      rerender(<Component gesture="Drag" canceled />)
+      rerender(<Component gestures={['Drag']} canceled />)
       fireEvent.mouseDown(element, { clientX: 30, clientY: 60 })
       await wait(() => [
         expect(getByTestId(`${prefix}drag-canceled`)).toHaveTextContent('true'),
-        expect(getByTestId(`${prefix}drag-dragging`)).toHaveTextContent('false')
+        expect(getByTestId(`${prefix}drag-dragging`)).toHaveTextContent('false'),
       ])
     })
   }

src/__tests__/Hover.test.js

@@ -10,11 +10,11 @@ afterAll(cleanup)
 // but for some reason, the tests don't work with mouseEnter/mouseLeave
 
 describe.each([
-  ['attached to component', Interactive, false]
+  ['attached to component', Interactive, false],
   // ['attached to node', InteractiveDom, true]
 ])('testing onHover %s)', (testName, Component, domTarget) => {
   const prefix = domTarget ? 'dom-' : ''
-  const { getByTestId, rerender } = render(<Component gesture="Hover" />)
+  const { getByTestId, rerender } = render(<Component gestures={['Hover']} />)
   const element = getByTestId(`${prefix}hover-el`)
 
   test('mouseEnter should initiate hover', () => {
@@ -30,13 +30,13 @@ describe.each([
   })
 
   test('disabling all gestures should prevent state from updating', () => {
-    rerender(<Component gesture="Hover" config={{ enabled: false }} />)
+    rerender(<Component gestures={['Hover']} config={{ enabled: false }} />)
     fireEvent.mouseEnter(element)
     expect(getByTestId(`${prefix}hover-hovering`)).toHaveTextContent('false')
   })
 
   test('disabling the hover gesture should prevent state from updating', () => {
-    rerender(<Component gesture="Hover" config={{ hover: false }} />)
+    rerender(<Component gestures={['Hover']} config={{ hover: false }} />)
     fireEvent.mouseEnter(element)
     expect(getByTestId(`${prefix}hover-hovering`)).toHaveTextContent('false')
   })

src/__tests__/Move.test.js

@@ -10,7 +10,7 @@ describe.each([['attached to component', Interactive, false], ['attached to node
   'testing onMove %s)',
   (testName, Component, domTarget) => {
     const prefix = domTarget ? 'dom-' : ''
-    const { getByTestId, rerender } = render(<Component gesture="Move" tempArg="temp" />)
+    const { getByTestId, rerender } = render(<Component gestures={['Move']} tempArg="temp" />)
     const element = getByTestId(`${prefix}move-el`)
     let delta_t
 
@@ -58,7 +58,7 @@ describe.each([['attached to component', Interactive, false], ['attached to node
       await wait(() => [
         expect(getByTestId(`${prefix}move-last`)).toHaveTextContent('true'),
         expect(getByTestId(`${prefix}move-active`)).toHaveTextContent('false'),
-        expect(getByTestId(`${prefix}move-moving`)).toHaveTextContent('false')
+        expect(getByTestId(`${prefix}move-moving`)).toHaveTextContent('false'),
       ])
     })
 
@@ -67,13 +67,13 @@ describe.each([['attached to component', Interactive, false], ['attached to node
     })
 
     test('disabling all gestures should prevent state from updating', () => {
-      rerender(<Component gesture="Move" config={{ enabled: false }} />)
+      rerender(<Component gestures={['Move']} config={{ enabled: false }} />)
       fireEvent.mouseMove(element)
       expect(getByTestId(`${prefix}move-moving`)).toHaveTextContent('false')
     })
 
     test('disabling the move gesture should prevent state from updating', () => {
-      rerender(<Component gesture="Move" config={{ move: false }} />)
+      rerender(<Component gestures={['Move']} config={{ move: false }} />)
       fireEvent.mouseMove(element)
       expect(getByTestId(`${prefix}move-moving`)).toHaveTextContent('false')
     })

src/__tests__/MoveHover.test..js

@@ -10,11 +10,11 @@ afterAll(cleanup)
 // but for some reason, the tests don't work with mouseEnter/mouseLeave
 
 describe.each([
-  ['attached to component', Interactive, false]
+  ['attached to component', Interactive, false],
   // ['attached to node', InteractiveDom, true]
 ])('testing onMove and onHover %s)', (testName, Component, domTarget) => {
   const prefix = domTarget ? 'dom-' : ''
-  const { getByTestId } = render(<Component gesture={['Move', 'Hover']} />)
+  const { getByTestId } = render(<Component gestures={['Move', 'Hover']} />)
   const element = getByTestId(`${prefix}movehover-el`)
 
   test('mouseEnter/mouseMove should initiate the move gesture', () => {

src/__tests__/Pinch.test.js

@@ -12,7 +12,7 @@ describe.each([['attached to component', Interactive, false], ['attached to node
   'testing onPinch %s)',
   (testName, Component, domTarget) => {
     const prefix = domTarget ? 'dom-' : ''
-    const { getByTestId, queryByTestId, rerender } = render(<Component gesture="Pinch" tempArg="temp" />)
+    const { getByTestId, queryByTestId, rerender } = render(<Component gestures={['Pinch']} tempArg="temp" />)
     const element = getByTestId(`${prefix}pinch-el`)
     let delta_t
 
@@ -94,7 +94,7 @@ describe.each([['attached to component', Interactive, false], ['attached to node
     })
 
     test('canceling the gesture should cancel the gesture in the next RAF tick', async () => {
-      rerender(<Component gesture="Pinch" canceled />)
+      rerender(<Component gestures={['Pinch']} canceled />)
       fireEvent.touchMove(element, { touches: [{}, {}] })
       await wait(() => {
         expect(getByTestId(`${prefix}pinch-canceled`)).toHaveTextContent('true')
@@ -103,13 +103,13 @@ describe.each([['attached to component', Interactive, false], ['attached to node
     })
 
     test('disabling all gestures should prevent state from updating', () => {
-      rerender(<Component gesture="Pinch" config={{ enabled: false }} />)
+      rerender(<Component gestures={['Pinch']} config={{ enabled: false }} />)
       fireEvent.touchStart(element, { touches: [{ clientX: 0, clientY: 0 }, { clientX: 0, clientY: 40 }] })
       expect(getByTestId(`${prefix}pinch-pinching`)).toHaveTextContent('false')
     })
 
     test('disabling the pinch gesture should prevent state from updating', () => {
-      rerender(<Component gesture="Pinch" config={{ pinch: false }} />)
+      rerender(<Component gestures={['Pinch']} config={{ pinch: false }} />)
       fireEvent.touchStart(element, { touches: [{ clientX: 0, clientY: 0 }, { clientX: 0, clientY: 40 }] })
       expect(getByTestId(`${prefix}pinch-pinching`)).toHaveTextContent('false')
     })