react-progress-bar-plus - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

bower.json

 {
   "name": "react-progress-bar-plus",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Progress bar component for ReactJS.",
-  "main": "lib/index.js",
+  "main": ["dist/progress-bar.css", "dist/react-progress-bar-plus.js"],
   "keywords": [
@@ -7,0 +7,0 @@ "react-component",

gulpfile.js

@@ -11,2 +11,3 @@ 'use strict';
 var autoprefixer = require('gulp-autoprefixer');
+var minifyCss = require('gulp-minify-css');
 var runSequence = require('run-sequence');
@@ -18,7 +19,8 @@ var webpackStatsHelper = require('./example/helper/webpack-stats-helper');
 var webpackStream = require('webpack-stream');
-var webpackConfig = require('./example/webpack.build.config');
+var webpackConfig = require('./webpack.config');
+var exampleWebpackConfig = require('./example/webpack.build.config');
 var webpack = require('webpack');
 
 gulp.task('clean', function () {
-  del.sync(['lib']);
+  del.sync(['lib', 'dist']);
 });
@@ -34,3 +36,2 @@
 
-
 gulp.task('babel', function () {
@@ -43,2 +44,9 @@ return gulp
 
+gulp.task('umd', function () {
+  return gulp
+    .src(['src/index.js'])
+    .pipe(webpackStream(webpackConfig, webpack))
+    .pipe(gulp.dest('dist'));
+});
+
 gulp.task('sass', function () {
@@ -63,3 +71,5 @@ var cssFilter = filter('**/*.css');
     }))
-    .pipe(gulp.dest('lib'));
+    .pipe(gulp.dest('lib'))
+    .pipe(minifyCss())
+    .pipe(gulp.dest('dist'));
 });
@@ -70,7 +80,8 @@
     .src(['src/**/*', '!src/**/*.{scss,js}'])
-    .pipe(gulp.dest('lib'));
+    .pipe(gulp.dest('lib'))
+    .pipe(gulp.dest('dist'));
 });
 
 gulp.task('build:lib', function (callback) {
-  runSequence('clean', 'lint', 'babel', 'sass', 'copy', callback);
+  runSequence('clean', 'lint', 'babel', 'umd', 'sass', 'copy', callback);
 });
@@ -86,3 +97,3 @@
     .src(['example/app/app.js'])
-    .pipe(webpackStream(webpackConfig, webpack))
+    .pipe(webpackStream(exampleWebpackConfig, webpack))
     .pipe(gulp.dest('example/dist'));
@@ -89,0 +100,0 @@ });

lib/ProgressBar.js

@@ -68,3 +68,3 @@ 'use strict';
             _this.setState({
-              percent: 100
+              percent: -1
             });
@@ -89,3 +89,3 @@ }, 400);
       });
-      var style = { width: this.state.percent + '%' };
+      var style = { width: (this.state.percent < 0 ? 0 : this.state.percent) + '%' };
       return _react2['default'].createElement(
@@ -92,0 +92,0 @@ 'div',

package.json

 {
   "name": "react-progress-bar-plus",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Progress bar component for ReactJS.",
@@ -29,2 +29,3 @@ "main": "lib/index.js",
     "babel-loader": "^5.3.2",
+    "camelcase": "^1.2.1",
     "css-loader": "^0.19.0",
@@ -43,2 +44,3 @@ "del": "^2.0.2",
     "gulp-frep": "^0.1.3",
+    "gulp-minify-css": "^1.2.1",
     "gulp-minify-html": "^1.0.4",
@@ -45,0 +47,0 @@ "gulp-sass": "^2.0.4",

README.md

@@ -9,2 +9,3 @@ # React Progress Bar Plus
 
+### NPM
 ```bash
@@ -14,2 +15,7 @@ npm install --save react-progress-bar-plus
 
+### Bower
+```bash
+bower install --save react-progress-bar-plus
+```
+
 ## Usage
@@ -39,2 +45,17 @@
 
+### UMD
+
+```html
+<link rel="stylesheet" type="text/css" href="path/to/react-progress-bar-plus/dist/progress-bar.css">
+<script src="path/to/react-progress-bar-plus/dist/react-progress-bar-plus.js"></script>
+```
+
+```js
+...
+var ProgressBar = window.ReactProgressBarPlus;
+...
+```
+
+Example [here](http://codepen.io/vn38minhtran/pen/QjaZrm)
+
 ## Props
@@ -41,0 +62,0 @@ | Name | Type | Default | Description |

src/ProgressBar.js

@@ -52,3 +52,3 @@ import React from 'react';
           this.setState({
-            percent: 100
+            percent: -1
           });
@@ -70,3 +70,3 @@ }, 400);
     });
-    let style = {width: this.state.percent + '%'};
+    let style = {width: (this.state.percent < 0 ? 0 : this.state.percent) + '%'};
     return (
@@ -76,3 +76,3 @@ <div className={className}>
         <div className='react-progress-bar-spinner'>
-          <div className='react-progress-bar-spinner-icon'></div>
+          <div className='react-progress-bar-spinner-icon'/>
         </div>
@@ -79,0 +79,0 @@ </div>

New alerts

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

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

Fixed 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

31731

27.79%

Number of package files

19

18.75%

Lines of code

437

20.72%

Number of lines in readme file

69

43.75%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

37

5.71%

Number of low quality alerts

2

100%

Number of low supply chain risk alerts

2

Infinity%

No dependency changes