react-speed-reader - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

 {
   "name": "react-speed-reader",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Speed Reader component for React",
-  "author": "Reslav Hollos <[e-mail]> (https://twitter.com/Radivarig)",
+  "author": "Reslav Hollos <[e-mail]> (http://radivarig.github.io)",
   "license": "MIT",
-  "main": "./exports.js",
+  "main": "./dist/main.js",
   "scripts": {
-    "dev": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.js --progress --colors"
+    "start": "webpack-dev-server --mode development --open",
+    "build": "webpack --mode production"
   },
@@ -23,22 +24,19 @@ "repository": {
   "devDependencies": {
-    "babel": "^5.8.23",
-    "babel-loader": "^5.3.2",
-    "babel-plugin-typecheck": "^1.3.0",
-    "css-loader": "^0.19.0",
-    "flowcheck": "^0.2.7",
-    "flowcheck-loader": "^1.0.0",
-    "history": "^1.13.0",
-    "react-router": "^1.0.0-rc3",
-    "style-loader": "^0.12.4",
-    "webpack": "^1.8.11",
-    "webpack-dev-server": "^1.8.2"
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.4",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.10",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.0.6",
+    "react-dom": "^16.2.0",
+    "style-loader": "^0.20.2",
+    "webpack": "^4.1.0",
+    "webpack-cli": "^2.0.10",
+    "webpack-dev-server": "^3.1.0"
   },
   "peerDependencies": {
-    "react": ">=0.14.1",
-    "react-dom": ">=0.14.1"
-  },
-  "dependencies": {
-    "jsx-loader": "^0.13.2",
-    "react-timer-mixin": "^0.13.3"
+    "react": "^16.2.0"
   }
 }

README.md

@@ -9,6 +9,4 @@ # react-speed-reader
 
-`npm install react-speed-reader` (peer dependencies: `react react-dom`)
+`npm install react-speed-reader`
 
-for React **v0.13.3** `npm install react-speed-reader@1.0.3`
-
 ### Demo
@@ -20,5 +18,4 @@
 npm install
-npm run dev 
+npm start
 ```
-open `localhost:8080`
 
@@ -25,0 +22,0 @@ ### Updates

src/SpeedReader.jsx

@@ -1,22 +0,27 @@
-var React = require('react')
-var TimerMixin = require('react-timer-mixin')
+import React from 'react'
+import PropTypes from 'prop-types'
 
-var SpeedReader = React.createClass({
-  mixins: [ TimerMixin ]
-, propTypes: {
-    inputText: React.PropTypes.string.isRequired
-  , renderReader: React.PropTypes.func.isRequired
-  , isPlaying: React.PropTypes.bool.isRequired
-  , speed: React.PropTypes.number.isRequired
-  , chunk: React.PropTypes.number
+class SpeedReader extends React.Component {
+  static propTypes = {
+    inputText: PropTypes.string.isRequired,
+    renderReader: PropTypes.func.isRequired,
+    isPlaying: PropTypes.bool.isRequired,
+    speed: PropTypes.number.isRequired,
+    chunk: PropTypes.number,
   }
-, getDefaultProps: function() {
-    return {
-      chunk: 1
-    }
+
+  static defaultProps = {
+    chunk: 1,
   }
-, getInitialState: function() {
-    var words = this.getWords(this.props.inputText)
-    var currentText = words.slice(0, this.props.chunk).join(' ')
 
+  constructor (props) {
+    super (props)
+
+    this.state = this.getDefaultState (props)
+  }
+
+  getDefaultState = (props) => {
+    var words = this.getWords(props.inputText)
+    var currentText = words.slice(0, props.chunk).join(' ')
+
     return Object.assign(this.getWordParts(currentText), {
@@ -28,3 +33,4 @@ current: 0
   }
-, componentWillReceiveProps: function(nextProps) {
+
+  componentWillReceiveProps = (nextProps) => {
     if (!this.props.isPlaying && nextProps.isPlaying)
@@ -39,3 +45,3 @@ this.loop()
     if(this.props.reset !== nextProps.reset) {
-      this.setState(this.getInitialState)
+      this.setState(this.getDefaultState(nextProps))
 
@@ -51,3 +57,4 @@ if (this.props.progressCallback)
   }
-, handleSetProgress: function(setProgress) {
+
+  handleSetProgress = (setProgress) => {
     var l = this.state.words.length -1
@@ -76,12 +83,18 @@ if (setProgress.skipFor) {
   }
-, getWords: function(sentence) {
+
+  getWords = (sentence) => {
     return sentence.split(/\s+/).filter(Boolean)
   }
-, componentDidMount: function() {
+
+  componentDidMount = () => {
     this.loop()
   }
-, offset: 0
-, blank: 0
-, lastLoopId: undefined
-, getWordParts: function(currentText) {
+
+  offset: 0
+
+  blank: 0
+
+  lastLoopId: undefined
+
+  getWordParts = (currentText) => {
     var word = currentText.split('')
@@ -95,3 +108,4 @@ var pivot = this.pivot(currentText)
   }
-, loop: function(opts) {
+
+  loop = (opts) => {
     opts = opts || {}
@@ -101,3 +115,3 @@ var self = this
     clearTimeout(this.lastLoopId)
-    this.lastLoopId = this.setTimeout(function() {
+    this.lastLoopId = setTimeout(function() {
       if( !opts.skip &&!opts.skipFor && !self.props.isPlaying ) return
@@ -163,11 +177,13 @@
   }
-, pivot: function(x) {
+
+  pivot = (x) => {
     return (x.length != 1) ? Math.floor(x.length/7 +1) : 0
   }
-, render: function() {
+
+  render = () => {
     return this.props.renderReader(this.props, this.state)
   }
 
-})
+}
 
-module.exports = SpeedReader
+export default SpeedReader

src/SpeedReaderViewer.jsx

@@ -1,7 +0,6 @@
-var React = require('react')
+import React from 'react'
+import SpeedReader from './SpeedReader.jsx'
 
-var SpeedReader = require('./SpeedReader.jsx')
-
-var SpeedReaderViewer = React.createClass({
-  getInitialState: function() {
+class SpeedReaderViewer extends React.Component {
+  getDefaultState = (props) => {
     return {
@@ -16,3 +15,6 @@ inputText: 'Science, what is it all about?\nTechmology, what is that all about?\nIs it good?\nIs it wacked?\nIs it good, is it wacked?\nWhat is it all about?\n'
   }
-, toggleIsPlaying: function() {
+
+  state = this.getDefaultState()
+
+  toggleIsPlaying = () => {
     document.activeElement.blur()
@@ -22,3 +24,4 @@ var isPlaying = this.state.isPlaying
   }
-, reset: function(opts) {
+
+  reset = (opts) => {
     if ( !(opts || {}).skipBlur )
@@ -31,9 +34,12 @@ document.activeElement.blur()
   }
-, increaseChunk: function() {
+
+  increaseChunk = () => {
     this.alterChunk(1)
   }
-, decreaseChunk: function() {
+
+  decreaseChunk = () => {
     this.alterChunk(-1)
   }
-, setInputText: function(e) {
+
+  setInputText = (e) => {
     var self = this
@@ -43,8 +49,10 @@ this.setState({inputText: e.target.value},
   }
-, setSpeed: function(e) {
+
+  setSpeed = (e) => {
     var v = e.target ? e.target.value : e
     if(isNaN(v) || v < 0) return
-    this.setState({speed: parseInt(v || 0)}, this.reset)
+    this.setState({speed: parseInt(v || 0)}, ()=>this.reset ({skipBlur:true}))
   }
-, alterChunk: function(x) {
+
+  alterChunk = (x) => {
     document.activeElement.blur()
@@ -54,3 +62,4 @@ var chunk = this.clamp(this.state.chunk +x, 1, 3)
   }
-, clamp: function(x, min, max) {
+
+  clamp = (x, min, max) => {
     if(x < min) return min
@@ -60,7 +69,10 @@ if(x > max) return max
   }
-, progress: function(x) {
+
+  progress = (x) => {
     this.setState({progress: x})
   }
-, dragTarget: undefined
-, setProgressPercent: function(e) {
+
+  dragTarget: undefined
+
+  setProgressPercent = (e) => {
     if (this.dragTarget) {
@@ -77,3 +89,4 @@ window.getSelection().removeAllRanges()
   }
-, setProgressSkipFor: function(x) {
+
+  setProgressSkipFor = (x) => {
     var setProgress = {
@@ -85,3 +98,4 @@ skipFor: x
   }
-, progressBar: function(progress) {
+
+  progressBar = (progress) => {
     var chunks = 25
@@ -97,3 +111,4 @@ var ratio = progress ? progress.at/progress.of : 0
   }
-, componentDidMount: function() {
+
+  componentDidMount = () => {
     document.addEventListener('mousemove', this.setProgressPercent)
@@ -103,3 +118,4 @@ document.addEventListener('click', this.removeDragTarget)
   }
-, componentWillUnmount: function() {
+
+  componentWillUnmount = () => {
     document.removeEventListener('mousemove', this.setProgressPercent)
@@ -109,3 +125,4 @@ document.removeEventListener('click', this.removeDragTarget)
   }
-, handleShortcuts: function(e) {
+
+  handleShortcuts = (e) => {
     if (document.activeElement.tagName !== 'BODY') return
@@ -132,10 +149,13 @@
   }
-, removeDragTarget: function() {
+
+  removeDragTarget = () => {
     this.dragTarget = undefined
   }
-, setDragTarget: function(e) {
+
+  setDragTarget = (e) => {
     this.dragTarget = e.target
     this.setProgressPercent(e)
   }
-, renderReader: function(props, state) {
+
+  renderReader = (props, state) => {
     if ( !state.currentText )
@@ -161,3 +181,4 @@ return <span>&nbsp;</span>
   }
-, render: function() {
+
+  render = () => {
     var self = this
@@ -196,3 +217,3 @@
                 inputText={this.state.inputText}
-                speed={this.state.speed || this.getInitialState().speed}
+                speed={this.state.speed || this.getDefaultState().speed}
                 isPlaying={this.state.isPlaying}
@@ -232,3 +253,3 @@ setProgress={this.state.setProgress}
             value={this.state.speed || ''}
-            placeholder={this.getInitialState().speed}
+            placeholder={this.getDefaultState().speed}
             onChange={this.setSpeed}
@@ -254,4 +275,4 @@ />
   }
-})
+}
 
-module.exports = SpeedReaderViewer
+export default SpeedReaderViewer

webpack.config.js

@@ -0,14 +1,45 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin")
+
 module.exports = {
-  entry: "./src/entry.js",
+  entry: {
+    main: __dirname + "/src/SpeedReader.jsx",
+    viewer: __dirname + "/src/index.js",
+  },
+
   output: {
-    path: "./",
-    filename: "bundle.js"
+    filename: "[name].js",
+    path: __dirname + "/dist",
+    library: "react-speed-reader",
+    libraryTarget: "umd",
   },
+
   devtool: "source-map",
+
   module: {
-    loaders: [
-      { test: /\.jsx?$/, loaders: ['babel', 'flowcheck', 'babel?blacklist=flow'], exclude: /node_modules/ }
-    , { test: /\.css$/, loaders: ['style-loader', 'css-loader'], exclude: /node_modules/ }
-    ]
-  }
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: [/node_modules/],
+        use: {
+          loader: "babel-loader",
+        }
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: "html-loader",
+            options: { minimize: true },
+          }
+        ]
+      },
+    ],
+  },
+
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: "./src/index.html",
+      filename: "./index.html",
+    })
+  ],
 }

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

Fixed alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

-75%

Number of high supply chain risk alerts

0

-100%

Number of low supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

28500

-87.01%

Dev dependency count

13

18.18%

Number of package files

11

-83.58%

Lines of code

459

-89.82%

Number of lines in readme file

86

-3.37%

Dependency changes

• + Added

  js-tokens@4.0.0
  (transitive)

• + Added

  loose-envify@1.4.0
  (transitive)

• + Added

  prop-types@15.8.1
  (transitive)

• + Added

  react@16.14.0
  (transitive)

• + Added

  react-is@16.13.1
  (transitive)

• - Removed

  jsx-loader@^0.13.2

• - Removed

  react-timer-mixin@^0.13.3

• - Removed

  acorn@5.7.4
  (transitive)

• - Removed

  amdefine@1.0.1
  (transitive)

• - Removed

  ast-types@0.9.6
  (transitive)

• - Removed

  balanced-match@1.0.2
  (transitive)

• - Removed

  base62@1.2.8
  (transitive)

• - Removed

  big.js@3.2.0
  (transitive)

• - Removed

  brace-expansion@1.1.12
  (transitive)

• - Removed

  commander@2.20.3
  (transitive)

• - Removed

  commoner@0.10.8
  (transitive)

• - Removed

  concat-map@0.0.1
  (transitive)

• - Removed

  defined@1.0.1
  (transitive)

• - Removed

  detective@4.7.1
  (transitive)

• - Removed

  emojis-list@2.1.0
  (transitive)

• - Removed

  esprima@3.1.3
  (transitive)

• - Removed

  esprima-fb@15001.1.0-dev-harmony-fb
  (transitive)

• - Removed

  glob@5.0.15
  (transitive)

• - Removed

  graceful-fs@4.2.11
  (transitive)

• - Removed

  iconv-lite@0.4.24
  (transitive)

• - Removed

  inflight@1.0.6
  (transitive)

• - Removed

  inherits@2.0.4
  (transitive)

• - Removed

  json5@0.5.1
  (transitive)

• - Removed

  jstransform@11.0.3
  (transitive)

• - Removed

  jsx-loader@0.13.2
  (transitive)

• - Removed

  loader-utils@0.2.17
  (transitive)

• - Removed

  minimatch@3.1.2
  (transitive)

• - Removed

  minimist@1.2.8
  (transitive)

• - Removed

  mkdirp@0.5.6
  (transitive)

• - Removed

  object-assign@2.1.1
  (transitive)

• - Removed

  once@1.4.0
  (transitive)

• - Removed

  path-is-absolute@1.0.1
  (transitive)

• - Removed

  private@0.1.8
  (transitive)

• - Removed

  q@1.5.1
  (transitive)

• - Removed

  react@19.1.0
  (transitive)

• - Removed

  react-dom@19.1.0
  (transitive)

• - Removed

  react-timer-mixin@0.13.4
  (transitive)

• - Removed

  recast@0.11.23
  (transitive)

• - Removed

  safer-buffer@2.1.2
  (transitive)

• - Removed

  scheduler@0.26.0
  (transitive)

• - Removed

  source-map@0.4.40.5.7
  (transitive)

• - Removed

  wrappy@1.0.2
  (transitive)