react-popups - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

package.json

 {
   "name": "react-popups",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Reactjs component for spawning custom popups at mouse position.",
-  "author": "Reslav Hollos",
+  "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"
   },
@@ -15,5 +16,2 @@ "repository": {
   },
-  "devDependencies": {
-    "webpack-dev-server": "^1.9.0"
-  },
   "keywords": [
@@ -28,10 +26,23 @@ "react",
   ],
+  "devDependencies": {
+    "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"
+    "react": "^16.2.0"
   },
   "dependencies": {
-    "jsx-loader": "^0.13.x",
-    "react-onclickoutside": "^4.0.1"
+    "react-onclickoutside": "^6.7.1"
   }
 }

README.md

@@ -9,6 +9,4 @@ # react-popups
 
-`npm install react-popups` (peer dependencies: `react react-dom`)
+`npm install --save react-popups`
 
-for React **v0.13.3** `npm install react-popups@1.1.1`
-
 ### Demo
@@ -20,5 +18,5 @@
 npm install
-npm run dev 
+npm run build
+npm run start
 ```
-navigate to `localhost:8080`
 
@@ -25,0 +23,0 @@ ### Features

src/Popups.jsx

@@ -1,21 +0,22 @@
-var React = require('react')
-var OnClickOutside = require('react-onclickoutside')
+import React from 'react'
+import onClickOutside from 'react-onclickoutside'
 
-var Popups = React.createClass({
-  mixins: [ OnClickOutside ]
-, getInitialState: function () {
-    return { popups: [] }
-  }
-, componentDidMount: function () {
+class Popups extends React.Component {
+  state = { popups: [] }
+
+  componentDidMount = () => {
     if (this.props.clickButtons) document.addEventListener('click', this.spawnLinkedDiv)
     if (this.props.event) document.addEventListener(this.props.event, this.spawnLinkedDiv)
   }
-, componentWillUnmount: function () {
+
+  componentWillUnmount = () => {
     if (this.props.clickButtons) document.removeEventListener('click', this.spawnLinkedDiv)
     if (this.props.event) document.removeEventListener(this.props.event, this.spawnLinkedDiv)
   }
-, handleClickOutside: function(e) {
+
+  handleClickOutside = (e) => {
     this.setState({ popups: [] })
   }
-, handleClickInside: function(e){
+
+  handleClickInside = (e) => {
     var t = e.target
@@ -38,3 +39,4 @@ while (t) {
   }
-, spawnLinkedDiv: function (e) {
+
+  spawnLinkedDiv = (e) => {
     this.handleClickInside(e)
@@ -78,9 +80,10 @@
     )
-    this.setState({popups: popups})
+    this.setState({popups})
   }
-, render: function() {
+
+  render = () => {
     return (<div>{this.state.popups}</div>)
   }
-})
+}
 
-module.exports = Popups
+export default onClickOutside(Popups)

src/PopupsViewer.jsx

@@ -1,6 +0,6 @@
-var React = require('react')
-var Popups = require('./Popups.jsx')
+import React from 'react'
+import Popups from './Popups.jsx'
 
-var Popup = React.createClass({
-  render: function() {
+class Popup extends React.Component {
+  render = () => {
     var popup_style = {
@@ -22,66 +22,53 @@ height: 'auto'
   }
-})
+}
 
-var PopupLink = React.createClass({
-  render: function(){
-    var link_style = {
-      cursor: 'pointer'
-      , color: '#00F'
-    }
-    return (
-      <span data={this.props.data} style={link_style}>
-        {this.props.children}
-      </span>
-    )
+const PopupLink = (props) => {
+  var link_style = {
+    cursor: 'pointer'
+    , color: '#00F'
   }
-})
+  return (
+    <span data={props.data} style={link_style}>
+      {props.children}
+    </span>
+  )
+}
 
-var DefaultPopup = React.createClass({
-  render: function(){
-    return (
-      <div >
-        <div>info: {this.props.info}</div>
-        <div>other:</div>
-        <ul>
-          <li><PopupLink data='universe'>Universe</PopupLink></li>
-          <li><PopupLink data='planets'>planets</PopupLink></li>
-          <li><PopupLink data='stars'>stars</PopupLink></li>
-          <li><PopupLink data='galaxies'>galaxies</PopupLink></li>
-          <li><PopupLink data='intergalactic space'>intergalactic space</PopupLink></li>
-          <li><PopupLink data='dark matter'>dark matter</PopupLink></li>
-          <li><PopupLink data='dark energy'>dark energy</PopupLink></li>
-        </ul>
-      </div>
-    )
-  }
-})
+const DefaultPopup = (props) => {
+  return (
+    <div >
+      <div>info: {props.info}</div>
+      <div>other:</div>
+      <ul>
+        <li><PopupLink data='universe'>Universe</PopupLink></li>
+        <li><PopupLink data='planets'>planets</PopupLink></li>
+        <li><PopupLink data='stars'>stars</PopupLink></li>
+        <li><PopupLink data='galaxies'>galaxies</PopupLink></li>
+        <li><PopupLink data='intergalactic space'>intergalactic space</PopupLink></li>
+        <li><PopupLink data='dark matter'>dark matter</PopupLink></li>
+        <li><PopupLink data='dark energy'>dark energy</PopupLink></li>
+      </ul>
+    </div>
+  )
+}
 
-var Universe = React.createClass({
-  render: function() {
-    return (
-      <p>
-        The <PopupLink data={'universe'}>Universe</PopupLink> is all of time and space and its contents.
-        The Universe includes <PopupLink data={'planets'}>planets</PopupLink>
-        , <PopupLink data={'stars'}>stars</PopupLink>
-        , <PopupLink data={'galaxies'}>galaxies</PopupLink>
-        , the contents of <PopupLink data={'intergalactic space'}>intergalactic space</PopupLink>
-        , the smallest subatomic particles, and all matter and energy.
-        The majority of matter and energy is most likely in the form
-        of <PopupLink data={'dark matter'}>dark matter</PopupLink> and <PopupLink data={'dark energy'}>dark energy</PopupLink>.
-      </p>
-    )
-  }
-})
+const Universe = () => {
+  return (
+    <p>
+      The <PopupLink data={'universe'}>Universe</PopupLink> is all of time and space and its contents.
+      The Universe includes <PopupLink data={'planets'}>planets</PopupLink>
+      , <PopupLink data={'stars'}>stars</PopupLink>
+      , <PopupLink data={'galaxies'}>galaxies</PopupLink>
+      , the contents of <PopupLink data={'intergalactic space'}>intergalactic space</PopupLink>
+      , the smallest subatomic particles, and all matter and energy.
+      The majority of matter and energy is most likely in the form
+      of <PopupLink data={'dark matter'}>dark matter</PopupLink> and <PopupLink data={'dark energy'}>dark energy</PopupLink>.
+    </p>
+  )
+}
 
-var App = React.createClass({
-  render: function() {
-    return (
-      <div>
-        <Popups handler={Popup} clickButtons={[0]} />
-        <Universe/>
-      </div>
-    )
-  }
-})
-
-module.exports = App
+export default () =>
+  <div>
+    <Popups handler={Popup} clickButtons={[0]} />
+    <Universe/>
+  </div>

webpack.config.js

@@ -0,13 +1,45 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin")
+
 module.exports = {
-    entry: "./src/entry.jsx",
-    output: {
-        path: "./",
-        filename: "bundle.js"
-    },
-    devtool: "source-map",
-    module: {
-        loaders: [
-            { test: /\.jsx?$/, loaders: ['jsx-loader'], exclude: /node_modules/ }
+  entry: {
+    main: __dirname + "/src/Popups.jsx",
+    viewer: __dirname + "/src/index.js",
+  },
+
+  output: {
+    filename: "[name].js",
+    path: __dirname + "/dist",
+    library: "react-popups",
+    libraryTarget: "umd",
+  },
+
+  devtool: "source-map",
+
+  module: {
+    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

Improved metrics

Total package byte prevSize

115689

increased by1128.64%

Dependency count

2

decreased by-50%

Number of package files

11

increased by10%

Lines of code

591

increased by241.62%

Worsened metrics

Dev dependency count

13

increased by1200%

Number of lines in readme file

71

decreased by-2.74%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@16.14.018.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedreact-onclickoutside@6.13.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removedjsx-loader@^0.13.x

• - Removedacorn@5.7.4(transitive)

• - Removedamdefine@1.0.1(transitive)

• - Removedast-types@0.9.6(transitive)

• - Removedbalanced-match@1.0.2(transitive)

• - Removedbase62@1.2.8(transitive)

• - Removedbig.js@3.2.0(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedcommoner@0.10.8(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removeddefined@1.0.1(transitive)

• - Removeddetective@4.7.1(transitive)

• - Removedemojis-list@2.1.0(transitive)

• - Removedesprima@3.1.3(transitive)

• - Removedesprima-fb@15001.1.0-dev-harmony-fb(transitive)

• - Removedglob@5.0.15(transitive)

• - Removedgraceful-fs@4.2.11(transitive)

• - Removediconv-lite@0.4.24(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedinherits@2.0.4(transitive)

• - Removedjson5@0.5.1(transitive)

• - Removedjstransform@11.0.3(transitive)

• - Removedjsx-loader@0.13.2(transitive)

• - Removedloader-utils@0.2.17(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedobject-assign@2.1.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedprivate@0.1.8(transitive)

• - Removedq@1.5.1(transitive)

• - Removedreact@19.0.0(transitive)

• - Removedreact-dom@19.0.0(transitive)

• - Removedreact-onclickoutside@4.9.0(transitive)

• - Removedrecast@0.11.23(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedscheduler@0.25.0(transitive)

• - Removedsource-map@0.4.40.5.7(transitive)

• - Removedwrappy@1.0.2(transitive)

• Updatedreact-onclickoutside@^6.7.1