react-idle-timer - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

CHANGELOG.md

@@ -1,26 +0,23 @@
-# Change Log
+# 4.0.0
+Version 4.0 contains a rewrite of the build system and a refactor of the source code for IdleTimer.  After accepting many pull requests, the projects code style was destroyed.  We added in some forced styling and will not be accepting PRs that don't respect this style. Contribution guide now on the README.  
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## Breaking Changes
+- The property `startOnLoad` has been renamed to `startOnMount` to make more sense in a react context.
+- The property `activeAction` has been renamed to `onActive`.
+- The property `idleAction` has been renamed to `onIdle`.
 
-<a name="1.3.2"></a>
-## [1.3.2](https://github.com/supremetechnopriest/react-idle-timer/compare/v1.3.1...v1.3.2) (2016-08-26)
+## Enhancements
+- Added [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) property.  Defaults to `true`, bind events with passive mode enabled
+- Added [capture](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) property.  Defaults to `true`, bind events with capture mode enabled
+- Pass event through to `idle` and `active` handler functions
 
+## Bugfixes
+- Fixed installation bug on windows machines. This was due to the use of environment variables in the build scripts. The new build system does not rely on environment variables defined at the cli level
 
-### Bug Fixes
+# 3.0.0
+We dropped support for date formatting in version 3.  React idle timer returns raw date objects and you can use which ever library you like to format it. If you would like to continue using the built in formatter, stick with version 2.
 
-* **dependencies:** made peer dependencies only care about major version ([0fd087d](https://github.com/supremetechnopriest/react-idle-timer/commit/0fd087d))
+## Breaking Changes
+- Removed built in date formatter.
 
-
-
-<a name="1.3.1"></a>
-## [1.3.1](https://github.com/supremetechnopriest/react-idle-timer/compare/v1.3.0...v1.3.1) (2016-08-26)
-
-
-
-<a name="1.3.0"></a>
-# [1.3.0](https://github.com/supremetechnopriest/react-idle-timer/compare/v1.2.16...v1.3.0) (2016-08-26)
-
-
-### Bug Fixes
-
-* **dependencies:** made react a peer dependency ([5e1d844](https://github.com/supremetechnopriest/react-idle-timer/commit/5e1d844))
+# 2.0.0

package.json

 {
   "name": "react-idle-timer",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Activity detection for React.js",
   "main": "build/index.js",
-  "files": [
-    "build",
-    "examples"
-  ],
+  "module": "build/index.es.js",
   "scripts": {
-    "clean": "rimraf build && rimraf examples/App.js && rimraf examples/init.js && rimraf examples/server.js",
-    "build": "NODE_ENV=production babel src -d build && babel src_examples -d examples",
-    "rebuild": "npm run clean && npm run build",
-    "start": "NODE_ENV=development node examples/server",
-    "test": "eslint src",
-    "release": "standard-version",
-    "package": "npm run rebuild && npm version patch && npm publish --tag latest"
+    "build": "rollup -c",
+    "watch": "rollup -c -w",
+    "clean": "rimraf dist example/src/dist docs coverage",
+    "lint": "standard lint",
+    "fix": "standard --fix",
+    "test": "yarn lint && jest",
+    "docs": "./scripts/docs",
+    "prepackage": "yarn clean && yarn test && yarn build && yarn docs",
+    "package": "./scripts/package",
+    "example": "./scripts/example"
   },
@@ -27,6 +27,3 @@ "keywords": [
   ],
-  "author": "Randy Lebeau",
-  "contributors": [
-    "Cole Chamberlain <[e-mail]> (https://github.com/cchamberlain)"
-  ],
+  "author": "Randy Lebeau <[e-mail]> (https://github.com/supremetechnopriest)",
   "license": "MIT",
@@ -37,42 +34,56 @@ "repository": {
   },
-  "dependencies": {
-    "prop-types": "^15.5.10",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
-  },
   "peerDependencies": {
+    "prop-types": "^15.x.x",
     "react": "^16.x.x",
-    "react-dom": "^16.x.x",
-    "prop-types": "^15.x.x"
+    "react-dom": "^16.x.x"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.3.15",
-    "babel-eslint": "^5.0.0-beta4",
-    "babel-loader": "^6.2.0",
-    "babel-plugin-react-transform": "^2.0.0-beta1",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.5.0",
-    "date-fns": "^1.28.5",
-    "del": "^1.2.0",
-    "eslint": "^1.10.3",
-    "eslint-plugin-babel": "^3.0.0",
-    "eslint-plugin-react": "^3.11.3",
-    "express": "^4.13.3",
-    "gulp": "^3.9.0",
-    "gulp-babel": "^5.1.0",
-    "gulp-eslint": "^0.14.0",
-    "gulp-shell": "^0.4.2",
-    "gulp-uglify": "^1.2.0",
-    "gulp-util": "^3.0.6",
-    "react-transform-catch-errors": "^1.0.2",
-    "react-transform-hmr": "^1.0.4",
-    "redbox-react": "^1.3.0",
-    "rimraf": "^2.4.3",
-    "standard-version": "^2.4.0",
-    "webpack": "^1.12.9",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0"
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.5",
+    "babel-jest": "^23.2.0",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "date-fns": "^1.29.0",
+    "docco": "^0.8.0",
+    "documentation": "^8.0.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "jest": "^23.2.0",
+    "prompt-list": "^3.2.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.4.1",
+    "react-dom": "^16.4.1",
+    "rimraf": "^2.6.2",
+    "rollup": "^0.61.2",
+    "rollup-plugin-babel": "^3.0.5",
+    "rollup-plugin-minify-es": "^1.1.1",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-globals": "^1.2.1",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-progress": "^0.4.0",
+    "simulant": "^0.2.2",
+    "sinon": "^6.0.1",
+    "standard": "^11.0.1"
+  },
+  "jest": {
+    "testPathIgnorePatterns": [
+      "/example/"
+    ],
+    "setupFiles": [
+      "./test.setup.js"
+    ],
+    "collectCoverage": true
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "globals": [
+      "beforeEach",
+      "describe",
+      "it",
+      "expect"
+    ]
   }
 }

README.md

 # React Idle Timer
-> React.js port of jQuery.idleTimer with some extras.
 
-⚠️ We dropped support for date formatting in version 3.  React idle timer returns raw date objects and you can use which ever library you like to format it. If you would like to continue using the built in formatter, stick with version 2.
+![npm](https://img.shields.io/npm/v/react-idle-timer.svg)
+![Travis](https://img.shields.io/travis/SupremeTechnopriest/react-idle-timer.svg)
+![Code Climate](https://img.shields.io/codeclimate/coverage/SupremeTechnopriest/react-idle-timer.svg)
+![Code Climate](https://img.shields.io/codeclimate/maintainability/SupremeTechnopriest/react-idle-timer.svg)
+![Code Climate](https://img.shields.io/codeclimate/tech-debt/SupremeTechnopriest/react-idle-timer.svg)
 
-⚡️ **Updated for React 16**<br/>
-🚀 **Now Supports Isomorphic React!**
-
 [![NPM](https://nodei.co/npm/react-idle-timer.png?downloads=true&stars=true)](https://npmjs.org/package/react-idle-timer/)
+[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)
 
-# Installation
-`npm install react-idle-timer`
+⚡️ **Support for React 16**<br/>
+🚀 **Support for Isomorphic React**
 
-# Usage
+## Latest News
 
-> Run `npm run build` to build the examples found in `src_examples`
+Welcome to version 4 of IdleTimer! We have performed a complete rewrite of our build system and a refactor/ clean up of the source code. After accepting many pull requests things started to get ugly. We added test coverage and continuous integration tools (travis and codeclimate) that will automatically enforce style and test future pull requests.  
 
+There are a few breaking changes in version 4:
+
+- The property `startOnLoad` has been renamed to `startOnMount` in order to make more sense in a react context.
+- The property `activeAction` has been renamed to `onActive`.
+- The property `idleAction` has been renamed to `onIdle`.
+
+For the full patch notes please refer to the [CHANGELOG](https://github.com/SupremeTechnopriest/react-idle-timer/blob/master/example/src/CHANGELOG.md)
+
+## Installation
+`yarn add react-idle-timer`
+or
+`npm install react-idle-timer --save`
+
+## Usage
+
+> Run `yarn example` to build and run the example `example`. The example is a [create-react-app](https://github.com/facebook/create-react-app) project. IdleTimer is implemented in the [App Component](https://github.com/SupremeTechnopriest/react-idle-timer/blob/master/example/src/App.js).
+
 ```javascript
-import React from 'react'
-import IdleTimer from 'react-idle-timer';
+import React, { Component } from 'react'
+import IdleTimer from 'react-idle-timer'
 
-class YourApp extends React.Component {
+export default class YourApp extends Component {
   constructor(props) {
     super(props)
+    this.idleTimer = null
+    this.onActive = this._onActive.bind(this)
+    this.onIdle = this._onIdle.bind(this)
   }
@@ -30,9 +51,9 @@
       <IdleTimer
-        ref="idleTimer"
+        ref={ref => { this.idleTimer = ref }}
         element={document}
-        activeAction={this._onActive}
-        idleAction={this._onIdle}
-        timeout={this.state.timeout}>
+        onActive={this.onActive}
+        onIdle={this.onIdle}
+        timeout={1000 * 60 * 15}>
 
-        <h1>All your children</h1>
+        <h1>Child Components</h1>
 
@@ -42,20 +63,43 @@ </IdleTimer>
   }
+
+  _onActive(e) {
+    console.log('user is active', e)
+    console.log('time remaining', this.idleTimer.getRemainingTime())
+  }
+
+  _onIdle(e) {
+    console.log('user is idle', e)
+    console.log('last active', this.idleTimer.getLastActiveTime())
+  }
 }
-module.exports = YourApp
-
 ```
 
-# Documentation
+## Documentation
 
-## Props
+> To build the source code generated html docs run `yarn docs` and open `docs/index.html` in any browser.  A markdown version is available [here](https://github.com/SupremeTechnopriest/react-idle-timer/blob/master/example/src/DOCS.md).
 
+### Default Events
+These events are bound by default:
+- mousemove
+- keydown
+- wheel
+- DOMMouseScroll
+- mouseWheel
+- mousedown
+- touchstart
+- touchmove
+- MSPointerDown
+- MSPointerMove
+
+### Props
 - **timeout** {*Number*} - Idle timeout in milliseconds
-- **events** {*Array*} - Events to bind
+- **events** {*Array*} - Events to bind. See [default events](https://)
 - **idleAction** {*Function*} - Function to call on idle
 - **activeAction** {*Function*} - Function to call on active
 - **element** {*Object*} - Defaults to document, may pass a ref to another element
-- **startOnLoad** {*Boolean*} - Start the timer on component load.  Defaults to `true`. Set to false to wait for user action before starting timer.
+- **startOnMount** {*Boolean*} - Start the timer on component load.  Defaults to `true`. Set to false to wait for user action before starting timer.
+- **passive** {*Boolean*} - Bind events in passive mode. Defaults to `true`. Set to false to explicitly set to active mode.
+- **capture** {*Boolean*} - Capture events. Defaults to `true`
 
-## Methods
-
+### Methods
 - **reset()** *{Void}* - Resets the idleTimer
@@ -66,3 +110,3 @@ - **pause()** *{Void}* - Pauses the idleTimer
 - **getElapsedTime()** *{Number}* - Returns the elapsed time in milliseconds
-- **lastActiveTime()** *{String}* - Returns the `Date` the user was last active
-- **isIdle()** {*Boolean*} - Returns whether or not user is idle
+- **getLastActiveTime()** *{String}* - Returns the `Date` the user was last active
+- **isIdle()** *{Boolean}* - Returns whether or not user is idle

New alerts

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45855

60.67%

Dependency count

3

-50%

Number of lines in readme file

110

66.67%

Worsened metrics

Dev dependency count

29

3.57%

Lines of code

39

-91.89%

Number of low quality alerts

2

100%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• - Removed

  prop-types@^15.5.10

• - Removed

  react@^16.0.0

• - Removed

  react-dom@^16.0.0