react-swipeable - npm Package Compare versions

Comparing version 5.5.1 to 6.0.0-alpha.0

CHANGELOG.md

@@ -0,1 +1,12 @@
+# Unreleased
+**Features:**
+
+**Breaking changes:**
+- removal of `<Swipeable>` component
+  - _TODO_ add example for creating one and migrating
+
+**Infrastructure:**
+- Converted tests to `@testing-library/react`, [react testing library](https://github.com/testing-library/react-testing-library)
+- Bundle with `microbundle`. [microbundle](https://github.com/developit/microbundle)
+
 # 5.5.0
@@ -2,0 +13,0 @@ * Add `first` property to `eventData` that is `true` for first swipe event [issue #160](https://github.com/formidablelabs/react-swipeable/issues/160) and [PR #162](https://github.com/formidablelabs/react-swipeable/pull/162)

package.json

 {
   "name": "react-swipeable",
-  "version": "5.5.1",
-  "description": "React Swipe event handler component & hook",
-  "main": "./lib/index.js",
-  "module": "es/index.js",
+  "version": "6.0.0-alpha.0",
+  "description": "React Swipe event handler hook",
+  "main": "./dist/react-swipeable.js",
+  "browser": "./dist/react-swipeable.umd.js",
+  "umd:main": "./dist/react-swipeable.umd.js",
+  "jsnext:main": "./dist/react-swipeable.modern.js",
+  "module": "./dist/react-swipeable.module.js",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "scripts": {
-    "build": "rollup -c",
-    "build:examples": "cd ./examples && npm install && npm run build",
+    "build": "microbundle --no-compress --name swipeable --output dist",
+    "build:examples": "webpack -p --config ./examples/webpack.config.min.js",
     "build:publish:examples": "npm run build:examples && rimraf examples/node_modules && gh-pages -d examples",
-    "clean": "rimraf lib es",
-    "format": "prettier --write '{src,__{tests,mocks}__}/**/*.js'",
-    "lint": "eslint .",
+    "clean": "rimraf dist",
+    "format": "prettier --write src __tests__",
+    "lint": "eslint . --ext .ts,.tsx",
     "prebuild": "npm run clean",
@@ -18,19 +24,18 @@ "prepare": "npm run build",
     "size": "size-limit",
-    "start:examples": "cd ./examples && npm install && npm run start:dev",
-    "test": "npm run test:unit && npm run dtslint && npm run build && npm run size",
+    "start:examples": "cd ./examples && webpack-dev-server",
+    "test": "yarn run test:unit && npm run build && npm run size",
     "test:unit": "jest",
-    "test:cover": "jest --coverage",
-    "dtslint": "dtslint types"
+    "test:unit:watch": "jest --watch",
+    "test:cover": "jest --coverage"
   },
   "size-limit": [
     {
-      "limit": "1.875 KB",
-      "path": "es/index.js"
+      "limit": "1.15 KB",
+      "path": "dist/react-swipeable.js"
     }
   ],
   "jest": {
-    "testPathIgnorePatterns": [
-      "/node_modules/",
-      "/types/",
-      "/__tests__/helpers/"
+    "preset": "ts-jest",
+    "testMatch": [
+      "<rootDir>/__tests__/**/*.(test|spec).ts?(x)"
     ]
@@ -46,4 +51,3 @@ },
     "react",
-    "hook",
-    "react-component"
+    "hook"
   ],
@@ -63,49 +67,41 @@ "authors": [
   "files": [
-    "lib",
-    "es",
-    "src",
-    "types/index.d.ts"
+    "dist",
+    "src"
   ],
   "license": "MIT",
-  "types": "types",
   "devDependencies": {
-    "@babel/cli": "^7.2.0",
-    "@babel/core": "^7.2.0",
-    "@babel/plugin-proposal-class-properties": "^7.2.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.2.0",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.1.2",
+    "@size-limit/preset-small-lib": "^4.6.0",
+    "@testing-library/react": "^10.4.3",
+    "@types/jest": "^26.0.4",
     "@types/react": "^16.8.12",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.8.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.19",
+    "@types/react-dom": "^16.9.8",
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
     "coveralls": "^3.0.3",
-    "dtslint": "^2.0.2",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.12.1",
-    "eslint": "^5.9.0",
-    "eslint-config-prettier": "^3.3.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-prettier": "^3.0.0",
-    "eslint-plugin-react": "^7.11.1",
-    "eslint-plugin-react-hooks": "^1.6.0",
+    "eslint": "^7.4.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.5",
     "gh-pages": "^1.0.0",
-    "jest": "^24.8.0",
-    "prettier": "1.15.3",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
+    "jest": "^26.1.0",
+    "microbundle": "^0.12.3",
+    "prettier": "^2.0.5",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
+    "react-scroll-up": "^1.3.3",
     "rimraf": "^2.6.1",
     "rollup": "^1.1.2",
     "rollup-plugin-babel": "^4.3.2",
-    "size-limit": "^1.3.5"
+    "size-limit": "^4.6.0",
+    "ts-jest": "^26.1.2",
+    "ts-loader": "^8.0.1",
+    "typescript": "^3.9.6",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
   },
-  "dependencies": {
-    "prop-types": "^15.6.2"
-  },
+  "dependencies": {},
   "peerDependencies": {
-    "react": "^16.0.0-0"
+    "react": ">= 16.8.0"
   }
 }

README.md

@@ -1,6 +0,7 @@
-React Swipeable
-=========================
+# React Swipeable
 
-React swipe event handler component & hook
+React swipe event handler hook
 
+## WIP - This is the v6.0.0 working branch
+
 [![build status](https://img.shields.io/travis/FormidableLabs/react-swipeable/master.svg?style=flat-square)](https://travis-ci.org/FormidableLabs/react-swipeable) [![Coverage Status](https://img.shields.io/coveralls/FormidableLabs/react-swipeable/master.svg?style=flat-square)](https://coveralls.io/github/FormidableLabs/react-swipeable?branch=master) [![npm version](https://img.shields.io/npm/v/react-swipeable.svg?style=flat-square)](https://www.npmjs.com/package/react-swipeable) [![npm downloads](https://img.shields.io/npm/dm/react-swipeable.svg?style=flat-square)](https://www.npmjs.com/package/react-swipeable) [![gzip size](https://flat.badgen.net/bundlephobia/minzip/react-swipeable)](https://bundlephobia.com/result?p=react-swipeable)
@@ -13,22 +14,14 @@
 ### Api
-Use React-hooks or a Component and set your swipe(d) handlers.
-```js
-import { useSwipeable, Swipeable } from 'react-swipeable'
-```
 
-#### Hook
-```jsx
-const handlers = useSwipeable({ onSwiped: (eventData) => eventHandler, ...config })
-return (<div {...handlers}> You can swipe here </div>)
-```
-Spread `handlers` onto the element you wish to track swipes inside of. [Details below](#hook-details).
+Use the hook and set your swipe(d) handlers.
 
-#### Component
 ```jsx
-<Swipeable onSwiped={(eventData) => eventHandler} {...config} >
-  You can swipe here!
-</Swipeable>
+const handlers = useSwipeable({
+  onSwiped: (eventData) => eventHandler,
+  ...config,
+});
+return <div {...handlers}> You can swipe here </div>;
 ```
 
-The Component `<Swipeable>` uses a `<div>` by default under the hood to attach event handlers to.
+Spread `handlers` onto the element you wish to track swipes inside of. [Details below](#hook-details).
 
@@ -47,2 +40,3 @@ ## Props / Config Options
   onSwiping,         // Fired during any swipe
+  onTap,             // Fired after a tap
 }
@@ -52,3 +46,5 @@ ```
 ### Event data
+
 All Event Handlers are called with the below event data.
+
 ```
@@ -59,7 +55,8 @@ {
   first,          // true for first event
-  deltaX,         // x offset (initial.x - current.x)
-  deltaY,         // y offset (initial.y - current.y)
+  deltaX,         // x offset (current.x - initial.x)
+  deltaY,         // y offset (current.y - initial.y)
   absX,           // absolute deltaX
   absY,           // absolute deltaY
-  velocity,       // √(absX^2 + absY^2) / time
+  velocity,       // √(absX^2 + absY^2) / time - "absolute velocity" (speed)
+  vxvy,           // [ deltaX/time, deltaY/time] - velocity per axis
   dir,            // direction of swipe (Left|Right|Up|Down)
@@ -81,14 +78,6 @@ }
 
-### Component Specific Props
-
-```
-{
-  nodeName: 'div',    // internally rendered component dom node
-  innerRef            // callback ref for internal component dom node
-}
-```
-
 **None of the props/config options are required.**
 
 ### Hook details
+
 - Hook use requires **react >= 16.8.0**
@@ -102,27 +91,37 @@ - The props contained in `handlers` are currently `ref` and `onMouseDown`
 **`preventDefaultTouchmoveEvent`** prevents the browser's [touchmove](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event. Use this to stop the browser from scrolling while a user swipes.
-* `e.preventDefault()` is only called when:
-  * `preventDefaultTouchmoveEvent: true`
-  * `trackTouch: true`
-  * the users current swipe has an associated `onSwiping` or `onSwiped` handler/prop
 
+- `e.preventDefault()` is only called when:
+  - `preventDefaultTouchmoveEvent: true`
+  - `trackTouch: true`
+  - the users current swipe has an associated `onSwiping` or `onSwiped` handler/prop
+
 Example:
-   * If a user is swiping right with `<Swipable onSwipedRight={this.userSwipedRight} preventDefaultTouchmoveEvent={true} >` then `e.preventDefault()` will be called, but if the user was swiping left then `e.preventDefault()` would **not** be called.
 
+- If a user is swiping right with `<Swipable onSwipedRight={this.userSwipedRight} preventDefaultTouchmoveEvent={true} >` then `e.preventDefault()` will be called, but if the user was swiping left then `e.preventDefault()` would **not** be called.
+
 Please experiment with the [example](http://stack.formidable.com/react-swipeable/) to test `preventDefaultTouchmoveEvent`.
 
+### passive listener issue
 
-### Version 5 Updates
-[React hooks](https://reactjs.org/docs/hooks-reference.html) have been released with [16.8.0](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) 🎉
+At the moment, the lighthouse audit is deducting 7 points from the best practices
+metric for "Does not use passive listeners to improve scrolling performance".
 
-v5 of `react-swipeable` includes a hook, `useSwipeable`, that provides the same great functionality as `<Swipeable>`. See the `useSwipeable` hook in action with this [codesandbox](https://codesandbox.io/s/lrk6955l79?module=%2Fsrc%2FCarousel.js).
+This will not affect behavior in the application, merely the score on the lighthouse
+audit.
 
-The component is still included and migration to v5 is straightforward. Please see the [migration doc](./migration.md) for more details including more info on the simplified api.
+This is currently being tracked in [issue 167](https://github.com/FormidableLabs/react-swipeable/issues/167).
 
+### Version 6 Updates and migration
+
+v6 of `react-swipeable` only exports a hook now, `useSwipeable`. See the `useSwipeable` hook in action with this [codesandbox](https://codesandbox.io/s/lrk6955l79?module=%2Fsrc%2FCarousel.js).
+
+If would like something similar to the old `<Swipeable>` component you can recreate it from the hook. There is an example in the [migration doc](./migration.md).
+
 ## Development
 
-Initial set up, with `node 10+`, run `npm install`.
+Initial set up, with `node 10+` & `yarn v1`, run `yarn`.
 
 Make changes/updates to the `src/index.js` file.
 
-***Please add tests if PR adds/changes functionality.***
+**_Please add tests if PR adds/changes functionality._**
 
@@ -132,3 +131,3 @@ #### Verify updates with the examples
 Build, run, and test examples locally:
-`npm run start:examples`
+`yarn run start:examples`
 
@@ -135,0 +134,0 @@ After the server starts you can then view the examples page with your changes at `http://localhost:3000`.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

143859

increased by85.9%

Dependency count

1

decreased by-50%

Dev dependency count

29

decreased by-9.37%

Number of package files

16

increased by33.33%

Lines of code

1389

increased by3.89%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

134

decreased by-0.74%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact@19.0.0(transitive)

• - Removedprop-types@^15.6.2

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)