sweetalert - npm Package Compare versions

Comparing version 0.5.0 to 1.0.0-beta

gulpfile.js

 var gulp = require('gulp'); 
 
-var glob      = require('glob');
-var path      = require('path');
-var jshint    = require('gulp-jshint');
-var sass      = require('gulp-sass');
-var concat    = require('gulp-concat');
-var uglify    = require('gulp-uglify');
-var rename    = require('gulp-rename');
-var minifyCSS = require('gulp-minify-css');
+var glob       = require('glob');
+var path       = require('path');
+var jshint     = require('gulp-jshint');
+var sass       = require('gulp-sass');
+var concat     = require('gulp-concat');
+var uglify     = require('gulp-uglify');
+var rename     = require('gulp-rename');
+var minifyCSS  = require('gulp-minify-css');
+var babelify   = require('babelify');
+var browserify = require('browserify');
+var source     = require('vinyl-source-stream');
+var buffer     = require('vinyl-buffer');
+var wrap       = require('gulp-wrap');
 
 // Lint Task
 gulp.task('lint', function() {
-  return gulp.src('lib/sweet-alert.js')
+  gulp.src('dev/sweetalert.es6.js')
     .pipe(jshint())
     .pipe(jshint.reporter('default'));
+
+  return gulp.src('dev/*/*.js')
+    .pipe(jshint())
+    .pipe(jshint.reporter('default'));
 });
@@ -27,12 +36,12 @@
 
-  return gulp.src(['lib/sweet-alert.scss', 'lib/ie9.css'])
+  // (We don't use minifyCSS since it breaks the ie9 file for some reason)
+  gulp.src(['dev/sweetalert.scss', 'dev/ie9.css'])
     .pipe(sass())
-    .pipe(concat('sweet-alert.css'))
-    .pipe(minifyCSS())
-    .pipe(gulp.dest('lib'));
+    .pipe(concat('sweetalert.css'))
+    .pipe(gulp.dest('dist'));
 });
 
+
 // Compile theme CSS
-var themes = glob.sync('lib/themes/*').map(function(themeDir) {
-  console.log(themeDir);
+var themes = glob.sync('themes/*').map(function(themeDir) {
   return path.basename(themeDir);
@@ -43,6 +52,6 @@ });
   gulp.task(name + '-theme', function() {
-    return gulp.src('lib/themes/' + name + '/' + name + '.scss')
+    return gulp.src('themes/' + name + '/' + name + '.scss')
       .pipe(sass()) // etc
       .pipe(rename(name + '.css'))
-      .pipe(gulp.dest('lib/themes/' + name))
+      .pipe(gulp.dest('themes/' + name))
   });
@@ -56,7 +65,16 @@ });
 gulp.task('scripts', function() {
-  return gulp.src('lib/sweet-alert.js')
-    .pipe(gulp.dest('lib'))
-    .pipe(rename('sweet-alert.min.js'))
+  return browserify({
+      entries: './dev/sweetalert.es6.js',
+      debug: true
+    })
+    .transform(babelify)
+    .bundle()
+    .pipe(source('sweetalert-dev.js'))
+    .pipe(wrap(';(function(window, document, undefined) {\n"use strict";\n<%= contents %>\n})(window, document);'))
+    .pipe(gulp.dest('dist')) // Developer version
+
+    .pipe(rename('sweetalert.min.js'))
+    .pipe(buffer())
     .pipe(uglify())
-    .pipe(gulp.dest('lib'));
+    .pipe(gulp.dest('dist')); // User version
 });
@@ -66,8 +84,8 @@
 gulp.task('watch', function() {
-  gulp.watch('lib/*.js', ['lint', 'scripts']);
-  gulp.watch(['lib/*.scss', 'lib/*.css'], ['sass']);
-  gulp.watch('lib/themes/*/*.scss', ['themes']);
+  gulp.watch(['dev/*.js', 'dev/*/*.js'], ['lint', 'scripts']);
+  gulp.watch(['dev/*.scss', 'dev/*.css'], ['sass']);
+  gulp.watch('themes/*/*.scss', ['themes']);
 });
 
 // Default Task
-gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);
+gulp.task('default', ['lint', 'sass', 'scripts', 'watch']);

package.json

 {
   "name": "sweetalert",
-  "version": "0.5.0",
+  "version": "1.0.0-beta",
   "description": "A beautiful replacement for JavaScript's \"Alert\"",
-  "main": "lib/sweet-alert.js",
+  "main": "dist/sweetalert.min.js",
   "directories": {
@@ -29,4 +29,6 @@ "example": "example"
   "devDependencies": {
+    "babelify": "^6.0.2",
+    "browserify": "^9.0.8",
     "glob": "^5.0.3",
-    "gulp": "^3.8.10",
+    "gulp": "^3.8.11",
     "gulp-concat": "^2.4.3",
@@ -38,4 +40,7 @@ "gulp-jshint": "^1.9.0",
     "gulp-uglify": "^1.0.2",
-    "path": "^0.11.14"
+    "gulp-wrap": "^0.11.0",
+    "path": "^0.11.14",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
   }
 }

README.md

@@ -1,11 +0,16 @@
-#SweetAlert
+SweetAlert
+==========
 
 An awesome replacement for JavaScript's alert.
 
-[See it in action!](http://tristanedwards.me/sweetalert)
-
 ![A success modal](https://raw.github.com/t4t5/sweetalert/master/sweetalert.gif)
 
-#Usage
+[See it in action!](http://t4t5.github.io/sweetalert)
 
+[Learn how to use it!](https://www.ludu.co/lesson/how-to-use-sweetalert)
+
+
+Usage
+-----
+
 You can install SweetAlert through bower:
@@ -26,8 +31,17 @@
 ```html
-<script src="lib/sweet-alert.min.js"></script>
-<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">
+<script src="dist/sweetalert.min.js"></script>
+<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
 ```
+**Note:** If you're using an older version than v1.0.0, the files are `lib/sweet-alert.min.js` and `lib/sweet-alert.css`
 
-#Examples
 
+Tutorial
+--------
+
+The easiest way to get started is follow the [SweetAlert tutorial on Ludu](https://www.ludu.co/lesson/how-to-use-sweetalert)!
+
+
+Examples
+--------
+
 The most basic message:
@@ -45,3 +59,3 @@
 
-A warning message, with a function attached to the "Confirm"-button..
+A warning message, with a function attached to the "Confirm"-button:
 
@@ -65,10 +79,36 @@ ```javascript
 
-[View more examples](http://tristanedwards.me/sweetalert)
+A prompt modal where the user's input is logged:
 
+```javascript
+sweerAlert({
+  title: "An input!",
+  text: 'Write something interesting:',
+  type: 'input',
+  showCancelButton: true,
+  closeOnConfirm: false,
+  animation: "slide-from-top"
+}, function(inputValue){
+  console.log("You wrote", inputValue);   
+});
+```
 
-#Browser compatibility
+[View more examples](http://t4t5.github.io/sweetalert)
 
-SweetAlert works in all major browsers (yes, even IE). Some details:
 
-- **IE8**: Works, but icons (checkmark, x-mark...) are hidden.
+Themes
+------
+
+SweetAlert can easily be themed to fit your site's design. SweetAlert comes with three example themes that you can try out: **facebook**, **twitter** and **google**. They can be referenced right after the intial sweetalert-CSS:
+```html
+<link rel="stylesheet" href="dist/sweetalert.css">
+<link rel="stylesheet" href="themes/twitter/twitter.css">
+```
+
+
+Browser compatibility
+---------------------
+
+SweetAlert works in most major browsers (yes, even IE). Some details:
+
+- **IE8**: (Dropped since v1.0.0-beta)
 - **IE9**: Works, but icons are not animated.
@@ -82,3 +122,4 @@ - **IE10+**: Works!
 
-#Contributing
+Contributing
+------------
 
@@ -89,14 +130,12 @@ If you want to contribute:
 
-- Make sure you have [Node](http://nodejs.org/), [NPM](https://www.npmjs.com/) and [Gulp](http://gulpjs.com/) installed. When in the SweetAlert directory, run the command:
-```
-npm install
-```
-to install the dependencies and make Gulp automatically minify the SCSS and JS-files.
+- Make sure you have [Node](http://nodejs.org/), [NPM](https://www.npmjs.com/) and [Gulp](http://gulpjs.com/) installed. When in the SweetAlert directory, run `npm install` to install the dependencies. Then run `gulp` while working to automatically minify the SCSS and JS-files.
 
+- Keep in min that SweetAlert uses Browserify in order to compile ES6-files. For easy debugging, make sure you reference the file `dist/sweetalert-dev.js` instead of `sweetalert.js`.
+
 - After you're done, make a pull request and wait for approval! :)
 
 
+Related projects
+----------------
 
-#Related projects
-
 * [SweetAlert for Android](https://github.com/pedant/sweet-alert-dialog)
@@ -103,0 +142,0 @@ * [SweetAlert for Bootstrap](https://github.com/lipis/bootstrap-sweetalert)

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

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

872338

increased by18.32%

Number of package files

40

increased by25%

Lines of code

3784

increased by131.44%

Number of lines in readme file

140

increased by38.61%

Worsened metrics

Dev dependency count

14

increased by55.56%

Number of low quality alerts

3

increased by50%

Number of low supply chain risk alerts

5

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes