@planet/react-globe - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

example/main.js

@@ -10,3 +10,3 @@ import Globe from '../src/index';
       center: [0, 0],
-      diameter: 60
+      diameter: 60,
     };
@@ -83,5 +83,5 @@ },
     );
-  }
+  },
 });
 
 ReactDOM.render(<Example />, document.getElementById('example'));

example/webpack.config.js

@@ -1,2 +0,2 @@
-const BabiliPlugin = require('babili-webpack-plugin');
+const MinifyPlugin = require('babel-minify-webpack-plugin');
 const HtmlPlugin = require('html-webpack-plugin');
@@ -12,3 +12,3 @@ const merge = require('webpack-merge');
   entry: {
-    main: './main.js'
+    main: './main.js',
   },
@@ -20,7 +20,5 @@ module: {
         exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader'
-        }
-      }
-    ]
+        use: ['babel-loader'],
+      },
+    ],
   },
@@ -30,11 +28,12 @@ devtool: 'source-map',
     new HtmlPlugin({
-      template: 'index.html'
-    })
-  ]
+      template: 'index.html',
+    }),
+  ],
 };
 
 const prod = {
+  mode: 'production',
   output: {
     filename: '[name].[chunkhash].js',
-    path: buildDir
+    path: buildDir,
   },
@@ -44,13 +43,14 @@ plugins: [
       Object.assign({
-        NODE_ENV: 'production'
+        NODE_ENV: 'production',
       })
     ),
-    new BabiliPlugin()
-  ]
+    new MinifyPlugin(),
+  ],
 };
 
 const dev = {
+  mode: 'development',
   output: {
     filename: '[name].js',
-    path: buildDir
+    path: buildDir,
   },
@@ -61,9 +61,9 @@ devtool: 'source-map',
       Object.assign({
-        NODE_ENV: 'development'
+        NODE_ENV: 'development',
       })
-    )
+    ),
   ],
   devServer: {
-    contentBase: buildDir
-  }
+    contentBase: buildDir,
+  },
 };
@@ -73,3 +73,2 @@
   let config;
-
   switch (env) {
@@ -76,0 +75,0 @@ case 'prod': {

lib/index.js

@@ -9,8 +9,5 @@ import PropTypes from 'prop-types';
 import {interpolate} from 'd3-interpolate';
-
-var land = feature(data, data.objects.land);
-
-var Globe = createReactClass({
+const land = feature(data, data.objects.land);
+const Globe = createReactClass({
   displayName: 'Globe',
-
   propTypes: {
@@ -24,5 +21,4 @@ center: PropTypes.array.isRequired,
     onClick: PropTypes.func,
-    rotationTime: PropTypes.number.isRequired
+    rotationTime: PropTypes.number.isRequired,
   },
-
   getDefaultProps: function getDefaultProps() {
@@ -36,3 +32,3 @@ return {
       oceanColor: '#f2f2f2',
-      rotationTime: 1000
+      rotationTime: 1000,
     };
@@ -43,3 +39,3 @@ },
   },
-  componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate: function componentDidUpdate(prevProps) {
     if (
@@ -54,2 +50,3 @@ prevProps.diameter !== this.props.diameter ||
     }
+
     if (prevProps.center !== this.props.center) {
@@ -60,6 +57,5 @@ this.recenter();
   update: function update() {
-    var diameter = this.props.diameter;
-    var radius = diameter / 2;
-
-    var projection = geoOrthographic()
+    const diameter = this.props.diameter;
+    const radius = diameter / 2;
+    const projection = geoOrthographic()
       .scale(radius - 2)
@@ -73,18 +69,14 @@ .translate([radius, radius])
       .clipAngle(90);
-
     this.renderPath = geoPath()
       .projection(projection)
       .context(this.canvas.getContext('2d'));
-
     this.projection = projection;
-
     this.renderGlobe();
   },
   recenter: function recenter() {
-    var _this = this;
+    const _this = this;
 
-    var start = Date.now();
-    var duration = this.props.rotationTime;
-
-    var getRotation = interpolate(
+    const start = Date.now();
+    const duration = this.props.rotationTime;
+    const getRotation = interpolate(
       this.projection.rotate(),
@@ -96,6 +88,9 @@ this.props.center.map(function(value) {
 
-    var updateRotation = function updateRotation() {
-      var progress = Math.min(1, (Date.now() - start) / duration);
+    const updateRotation = function updateRotation() {
+      const progress = Math.min(1, (Date.now() - start) / duration);
+
       _this.projection.rotate(getRotation(easeCubicInOut(progress)));
+
       _this.renderGlobe();
+
       if (progress < 1) {
@@ -118,13 +113,14 @@ _this.transition = requestAnimationFrame(updateRotation);
       }
+
       return;
     }
 
-    var context = this.canvas.getContext('2d');
+    const context = this.canvas.getContext('2d');
     context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
     context.fillStyle = this.props.oceanColor;
     context.beginPath();
-    this.renderPath({type: 'Sphere'});
+    this.renderPath({
+      type: 'Sphere',
+    });
     context.fill();
-
     context.fillStyle = this.props.landColor;
@@ -134,4 +130,3 @@ context.beginPath();
     context.fill();
-
-    var circle = geoCircle()
+    const circle = geoCircle()
       .center(this.props.center)
@@ -145,9 +140,14 @@ .radius(this.props.markerRadius)();
   render: function render() {
-    var _this2 = this;
+    const _this2 = this;
 
-    var style = {cursor: this.props.onClick ? 'pointer' : 'auto'};
-
+    const style = {
+      cursor: this.props.onClick ? 'pointer' : 'auto',
+    };
     return React.createElement(
       'div',
-      {className: 'pl-globe', onClick: this.props.onClick, style: style},
+      {
+        className: 'pl-globe',
+        onClick: this.props.onClick,
+        style: style,
+      },
       React.createElement('canvas', {
@@ -158,8 +158,7 @@ height: this.props.diameter,
         },
-        width: this.props.diameter
+        width: this.props.diameter,
       })
     );
-  }
+  },
 });
-
 export default Globe;

package.json

 {
   "name": "@planet/react-globe",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A React Globe Component",
@@ -26,29 +26,31 @@ "license": "Apache-2.0",
   "dependencies": {
-    "create-react-class": "^15.6.0",
-    "d3-ease": "^1.0.3",
-    "d3-geo": "^1.9.0",
-    "d3-interpolate": "^1.1.5",
-    "prop-types": "^15.5.10",
-    "topojson-client": "^3.0.0"
+    "create-react-class": "^15.6.3",
+    "d3-ease": "^1.0.6",
+    "d3-geo": "^1.11.9",
+    "d3-interpolate": "^1.4.0",
+    "prop-types": "^15.7.2",
+    "topojson-client": "^3.1.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "babili-webpack-plugin": "^0.1.2",
-    "detect-port": "^1.2.1",
-    "eslint": "^4.7.2",
-    "eslint-config-planet": "^15.1.0",
-    "eslint-plugin-react": "^7.4.0",
-    "html-webpack-plugin": "^2.30.1",
-    "node-static": "^0.7.10",
-    "pixelmatch": "^4.0.2",
-    "pngjs": "^3.3.0",
-    "puppeteer": "^0.11.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "@babel/cli": "^7.7.7",
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "@babel/preset-react": "^7.7.4",
+    "babel-loader": "^8.0.6",
+    "babel-minify-webpack-plugin": "^0.3.1",
+    "detect-port": "^1.3.0",
+    "eslint": "^6.8.0",
+    "eslint-config-planet": "^18.1.2",
+    "eslint-plugin-react": "^7.17.0",
+    "html-webpack-plugin": "^3.2.0",
+    "node-static": "^0.7.11",
+    "pixelmatch": "^5.1.0",
+    "pngjs": "^3.4.0",
+    "puppeteer": "^2.0.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1",
+    "webpack-merge": "^4.2.2"
   },
@@ -55,0 +57,0 @@ "peerDependencies": {

src/index.js

@@ -21,3 +21,3 @@ import PropTypes from 'prop-types';
     onClick: PropTypes.func,
-    rotationTime: PropTypes.number.isRequired
+    rotationTime: PropTypes.number.isRequired,
   },
@@ -33,3 +33,3 @@
       oceanColor: '#f2f2f2',
-      rotationTime: 1000
+      rotationTime: 1000,
     };
@@ -42,3 +42,3 @@ },
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (
@@ -147,5 +147,5 @@ prevProps.diameter !== this.props.diameter ||
     );
-  }
+  },
 });
 
 export default Globe;

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

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

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

156035

increased by151.67%

Number of package files

20

increased by66.67%

Lines of code

649

increased by19.52%

Worsened metrics

Dev dependency count

21

increased by10.53%

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• Updatedcreate-react-class@^15.6.3

• Updatedd3-ease@^1.0.6

• Updatedd3-geo@^1.11.9

• Updatedd3-interpolate@^1.4.0

• Updatedprop-types@^15.7.2

• Updatedtopojson-client@^3.1.0