vue-confetti - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

.eslintrc.js

@@ -1,16 +0,6 @@
-// http://eslint.org/docs/user-guide/configuring
-
 module.exports = {
-  root: true,
-  parser: 'babel-eslint',
-  parserOptions: {
-    sourceType: 'module'
-  },
+  extends: 'airbnb-base',
   env: {
     browser: true,
   },
-  extends: 'standard',
-  'rules': {
-    'arrow-parens': 0
-  }
-}
+};

package.json

 {
   "name": "vue-confetti",
   "description": "A Vue component for dropping confetti.",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "main": "dist/vue-confetti.js",
@@ -10,5 +10,6 @@ "author": "Alex Mendes <[e-mail]>",
     "lint": "eslint src",
-    "clean": "rimraf dist",
-    "build": "npm run clean && webpack --config webpack.config.js",
-    "prepublish": "npm run lint && npm run build"
+    "pretest": "npm run lint",
+    "test": "jest",
+    "coverage": "jest --coverage",
+    "build": "webpack"
   },
@@ -23,19 +24,32 @@ "repository": {
   "homepage": "https://github.com/alexandermendes/vue-confetti",
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
   "dependencies": {},
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.2",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "eslint": "^4.12.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-node": "^5.2.1",
-    "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "rimraf": "^2.6.2",
-    "vue": "^2.5.17",
-    "webpack": "^3.8.1"
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@commitlint/cli": "^7.5.1",
+    "@commitlint/config-conventional": "^7.5.0",
+    "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^1.0.1",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-template": "^6.2.0",
+    "husky": "^1.3.1",
+    "jest": "^24.1.0",
+    "jest-canvas-mock": "^2.0.0-alpha.3",
+    "semantic-release": "^15.13.3",
+    "terser-webpack-plugin": "^1.2.2",
+    "vue": "^2.6.4",
+    "vue-loader": "^15.6.2",
+    "vue-template-compiler": "^2.6.4",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3"
   }
 }

README.md

 # vue-confetti
 
 [![npm version](https://badge.fury.io/js/vue-confetti.svg)](https://badge.fury.io/js/vue-confetti)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
@@ -9,2 +10,4 @@ :tada: A Vue component for dropping confetti :tada:
 
+[View the demo](https://alexandermendes.github.io/vue-confetti/)
+
 ## Installation
@@ -50,6 +53,7 @@
 
-| Property | Type   | Description                                                     | Default |
-|----------|--------|-----------------------------------------------------------------|---------|
-| colors   | Array  | The confetti colors.                                            | ['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson']
-| shape    | String | The shape of the confetti (`'circle'`, `'rect'`, or `'heart'`). | 'circle'|
+| Property | Type   | Description                                                     | Default  |
+|----------|--------|-----------------------------------------------------------------|----------|
+| colors   | Array  | The confetti colors.                                            | ['DodgerBlue', 'OliveDrab', 'Gold', 'pink', 'SlateBlue', 'lightblue', 'Violet', 'PaleGreen', 'SteelBlue', 'SandyBrown', 'Chocolate', 'Crimson'] |
+| shape    | String | The shape of the confetti (`'circle'`, `'rect'`, or `'heart'`). | 'circle' |
+| size     | Number | The size of the particles (should be a positive number).        | 10       |
 
@@ -56,0 +60,0 @@ ### Example

src/confetti.js

@@ -1,7 +0,10 @@
-import Particles from './particles'
+import Particles from './particles';
 
 class Confetti {
-  constructor () {
-    this.initialize()
-    this.onResizeCallback = this.updateDimensions.bind(this)
+  /**
+   * Initialise.
+   */
+  constructor() {
+    this.setDefaults();
+    this.onResizeCallback = this.updateDimensions.bind(this);
   }
@@ -12,29 +15,25 @@
    */
-  initialize () {
-    this.canvas = null
-    this.ctx = null
-    this.W = 0
-    this.H = 0
-    this.particles = {}
-    this.droppedCount = 0
-    this.particlesPerFrame = 1.5
-    this.wind = 0
-    this.windSpeed = 1
-    this.windSpeedMax = 1
-    this.windChange = 0.01
-    this.windPosCoef = 0.002
-    this.maxParticlesPerFrame = 2 // max particles dropped per frame
-    this.animationId = null
+  setDefaults() {
+    this.canvas = null;
+    this.ctx = null;
+    this.W = 0;
+    this.H = 0;
+    this.particles = {};
+    this.droppedCount = 0;
+    this.particlesPerFrame = 1.5;
+    this.wind = 0;
+    this.windSpeed = 1;
+    this.windSpeedMax = 1;
+    this.windChange = 0.01;
+    this.windPosCoef = 0.002;
+    this.maxParticlesPerFrame = 2; // max particles dropped per frame
+    this.animationId = null;
   }
 
-  /**
-   * Create the confetti particles.
-   * @param {Object} opts
-   *   The particle options.
-   */
-  createParticles (opts = {}) {
-    this.particles = new Particles({
+  particleOptions(opts) {
+    return {
       ctx: this.ctx,
       W: this.W,
       H: this.H,
+      size: opts.size || 10,
       wind: this.wind,
@@ -58,27 +57,38 @@ windPosCoef: this.windPosCoef,
           'Chocolate',
-          'Crimson'
+          'Crimson',
         ],
         idx: 0,
         step: 10,
-        get color () {
-          return this.opts[((this.idx++) / this.step | 0) % this.opts.length]
-        }
-      }
-    })
+        get color() {
+          this.idx += 1;
+          return this.opts[((this.idx) / this.step | 0) % this.opts.length]; // eslint-disable-line
+        },
+      },
+    };
   }
 
   /**
+   * Create the confetti particles.
+   * @param {Object} opts
+   *   The particle options.
+   */
+  createParticles(opts = {}) {
+    const particleOpts = this.particleOptions(opts);
+    this.particles = new Particles(particleOpts);
+  }
+
+  /**
    * Add a fixed, full-screen canvas to the page.
    */
-  createContext () {
-    this.canvas = document.createElement('canvas')
-    this.ctx = this.canvas.getContext('2d')
-    this.canvas.style.display = 'block'
-    this.canvas.style.position = 'fixed'
-    this.canvas.style.pointerEvents = 'none'
-    this.canvas.style.top = 0
-    this.canvas.style.width = '100vw'
-    this.canvas.style.height = '100vh'
-    this.canvas.id = 'confetti-canvas'
-    document.querySelector('body').appendChild(this.canvas)
+  createContext() {
+    this.canvas = document.createElement('canvas');
+    this.ctx = this.canvas.getContext('2d');
+    this.canvas.style.display = 'block';
+    this.canvas.style.position = 'fixed';
+    this.canvas.style.pointerEvents = 'none';
+    this.canvas.style.top = 0;
+    this.canvas.style.width = '100vw';
+    this.canvas.style.height = '100vh';
+    this.canvas.id = 'confetti-canvas';
+    document.querySelector('body').appendChild(this.canvas);
   }
@@ -91,14 +101,16 @@
    */
-  start (opts) {
+  start(opts) {
     if (!this.ctx) {
-      this.createContext()
+      this.createContext();
     }
+
     if (this.animationId) {
-      cancelAnimationFrame(this.animationId) // Cancel any previous loop
+      cancelAnimationFrame(this.animationId); // Cancel any previous loop
     }
-    this.createParticles(opts)
-    this.updateDimensions()
-    this.particlesPerFrame = this.maxParticlesPerFrame
-    this.animationId = requestAnimationFrame(this.mainLoop.bind(this))
-    window.addEventListener('resize', this.onResizeCallback)
+
+    this.createParticles(opts);
+    this.updateDimensions();
+    this.particlesPerFrame = this.maxParticlesPerFrame;
+    this.animationId = requestAnimationFrame(this.mainLoop.bind(this));
+    window.addEventListener('resize', this.onResizeCallback);
   }
@@ -109,19 +121,26 @@
    */
-  stop () {
-    this.particlesPerFrame = 0
-    window.removeEventListener('resize', this.onResizeCallback)
+  stop() {
+    this.particlesPerFrame = 0;
+    window.removeEventListener('resize', this.onResizeCallback);
   }
 
   /**
+   * Update the confetti options.
+   */
+  update(opts) {
+    this.particles.opts = this.particleOptions(opts);
+  }
+
+  /**
    * Remove confetti.
    */
-  remove () {
-    this.stop()
+  remove() {
+    this.stop();
     if (this.animationId) {
-      cancelAnimationFrame(this.animationId)
+      cancelAnimationFrame(this.animationId);
     }
     if (this.canvas) {
-      document.body.removeChild(this.canvas)
+      document.body.removeChild(this.canvas);
     }
-    this.initialize()
+    this.setDefaults();
   }
@@ -132,6 +151,6 @@
    */
-  updateDimensions () {
+  updateDimensions() {
     if (this.W !== window.innerWidth || this.H !== window.innerHeight) {
-      this.W = this.particles.opts.W = this.canvas.width = window.innerWidth
-      this.H = this.particles.opts.H = this.canvas.height = window.innerHeight
+      this.W = this.particles.opts.W = this.canvas.width = window.innerWidth; // eslint-disable-line
+      this.H = this.particles.opts.H = this.canvas.height = window.innerHeight; // eslint-disable-line
     }
@@ -143,19 +162,21 @@ }
    */
-  mainLoop (time) {
-    this.updateDimensions()
-    this.ctx.setTransform(1, 0, 0, 1, 0, 0)
-    this.ctx.clearRect(0, 0, this.W, this.H)
-    this.windSpeed = Math.sin(time / 8000) * this.windSpeedMax
-    this.wind = this.particles.opts.wind += this.windChange
+  mainLoop(time) {
+    this.updateDimensions();
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+    this.ctx.clearRect(0, 0, this.W, this.H);
+    this.windSpeed = Math.sin(time / 8000) * this.windSpeedMax;
+    this.wind = this.particles.opts.wind += this.windChange; // eslint-disable-line
+
     while (this.droppedCount < this.particlesPerFrame) {
-      this.droppedCount += 1
-      this.particles.add()
+      this.droppedCount += 1;
+      this.particles.add();
     }
-    this.droppedCount -= this.particlesPerFrame
-    this.particles.update()
-    this.particles.draw()
 
+    this.droppedCount -= this.particlesPerFrame;
+    this.particles.update();
+    this.particles.draw();
+
     // Stop calling if no particles left in view (i.e. it's been stopped)
     if (this.particles.items.length) {
-      this.animationId = requestAnimationFrame(this.mainLoop.bind(this))
+      this.animationId = requestAnimationFrame(this.mainLoop.bind(this));
     }
@@ -165,2 +186,2 @@ }
 
-export default Confetti
+export default Confetti;

src/index.js

@@ -1,13 +0,13 @@
-import Confetti from './confetti'
+import Confetti from './confetti';
 
-export { Confetti }
+export { Confetti };
 
 export default {
-  install (Vue, options) {
+  install(Vue, options) {
     if (this.installed) {
-      return
+      return;
     }
-    this.installed = true
-    Vue.prototype.$confetti = new Confetti(options)
-  }
-}
+    this.installed = true;
+    Vue.prototype.$confetti = new Confetti(options); // eslint-disable-line no-param-reassign
+  },
+};

src/particle.js

@@ -7,23 +7,34 @@ class Particle {
    */
-  setup ({ ctx, W, H, colors, wind, windPosCoef, windSpeedMax, count, shape }) {
-    this.ctx = ctx
-    this.W = W
-    this.H = H
-    this.wind = wind
-    this.shape = shape
-    this.windPosCoef = windPosCoef
-    this.windSpeedMax = windSpeedMax
-    this.x = this.rand(-35, W + 35)
-    this.y = this.rand(-30, -35)
-    this.d = this.rand(150) + 10 // density
-    this.r = this.rand(10, 30)
-    this.color = colors.color // get the next color
-    this.tilt = this.randI(10)
+  setup({
+    ctx,
+    W,
+    H,
+    colors,
+    wind,
+    windPosCoef,
+    windSpeedMax,
+    count,
+    shape,
+    size,
+  }) {
+    this.ctx = ctx;
+    this.W = W;
+    this.H = H;
+    this.wind = wind;
+    this.shape = shape;
+    this.windPosCoef = windPosCoef;
+    this.windSpeedMax = windSpeedMax;
+    this.x = Particle.rand(-35, W + 35);
+    this.y = Particle.rand(-30, -35);
+    this.d = Particle.rand(150) + 10; // density
+    this.r = Particle.rand(size, size * 2);
+    this.color = colors.color; // get the next color
+    this.tilt = Particle.rand(10);
     this.tiltAngleIncremental = (
-      (this.rand(0.08) + 0.04) * (this.rand() < 0.5 ? -1 : 1)
-    )
-    this.tiltAngle = 0
-    this.angle = this.rand(Math.PI * 2)
-    this.count = count++
-    return this
+      (Particle.rand(0.08) + 0.04) * (Particle.rand() < 0.5 ? -1 : 1)
+    );
+    this.tiltAngle = 0;
+    this.angle = Particle.rand(Math.PI * 2);
+    this.count = count + 1;
+    return this;
   }
@@ -33,40 +44,29 @@
    * Return a random number.
-   * @param {Number} min
-   *   The minimum number.
-   * @param {Number} max
+   * @param {Number} [min]
+   *   The minimum number (default 1).
+   * @param {Number} [max]
    *   The maximum number.
    */
-  randI (min, max = min + (min = 0)) {
-    return (Math.random() * (max - min) + min) | 0
+  static rand(min = 1, max = min + (min = 0)) { // eslint-disable-line no-param-reassign
+    return Math.random() * (max - min) + min;
   }
 
   /**
-   * Return a random number with a minimum of one.
-   * @param {Number} min
-   *   The minimum number.
-   * @param {Number} max
-   *   The maximum number.
-   */
-  rand (min = 1, max = min + (min = 0)) {
-    return Math.random() * (max - min) + min
-  }
-
-  /**
    * Update the particle.
    */
-  update () {
+  update() {
     this.tiltAngle += (this.tiltAngleIncremental * (
-      Math.cos(this.wind + (this.d + this.x + this.y) * this.windPosCoef) *
-      0.2 + 1
-    ))
-    this.y += (Math.cos(this.angle + this.d) + 3 + this.r / 2) / 2
-    this.x += Math.sin(this.angle)
+      Math.cos(this.wind + (this.d + this.x + this.y) * this.windPosCoef)
+      * 0.2 + 1
+    ));
+    this.y += (Math.cos(this.angle + this.d) + 3 + this.r / 2) / 2;
+    this.x += Math.sin(this.angle);
     this.x += Math.cos(
-      this.wind + (this.d + this.x + this.y) * this.windPosCoef
-    ) * this.windSpeedMax
+      this.wind + (this.d + this.x + this.y) * this.windPosCoef,
+    ) * this.windSpeedMax;
     this.y += Math.sin(
-      this.wind + (this.d + this.x + this.y) * this.windPosCoef
-    ) * this.windSpeedMax
-    this.tilt = (Math.sin(this.tiltAngle - (this.count / 3))) * 15
-    return this.y > this.H // returns true if particle is past bottom
+      this.wind + (this.d + this.x + this.y) * this.windPosCoef,
+    ) * this.windSpeedMax;
+    this.tilt = (Math.sin(this.tiltAngle - (this.count / 3))) * 15;
+    return this.y > this.H; // returns true if particle is past bottom
   }
@@ -77,5 +77,5 @@
    */
-  drawCircle () {
-    this.ctx.arc(0, 0, (this.r / 2), 0, Math.PI * 2, false)
-    this.ctx.fill()
+  drawCircle() {
+    this.ctx.arc(0, 0, (this.r / 2), 0, Math.PI * 2, false);
+    this.ctx.fill();
   }
@@ -86,4 +86,4 @@
    */
-  drawRect () {
-    this.ctx.fillRect(0, 0, this.r, this.r / 2)
+  drawRect() {
+    this.ctx.fillRect(0, 0, this.r, this.r / 2);
   }
@@ -94,3 +94,3 @@
    */
-  drawHeart () {
+  drawHeart() {
     const curveTo = (cp1x, cp1y, cp2x, cp2y, x, y) => {
@@ -103,13 +103,13 @@ this.ctx.bezierCurveTo(
         x / this.r * 2,
-        y / this.r * 2
-      )
-    }
-    this.ctx.moveTo(37.5 / this.r, 20 / this.r)
-    curveTo(75, 37, 70, 25, 50, 25)
-    curveTo(20, 25, 20, 62.5, 20, 62.5)
-    curveTo(20, 80, 40, 102, 75, 120)
-    curveTo(110, 102, 130, 80, 130, 62.5)
-    curveTo(130, 62.5, 130, 25, 100, 25)
-    curveTo(85, 25, 75, 37, 75, 40)
-    this.ctx.fill()
+        y / this.r * 2,
+      );
+    };
+    this.ctx.moveTo(37.5 / this.r, 20 / this.r);
+    curveTo(75, 37, 70, 25, 50, 25);
+    curveTo(20, 25, 20, 62.5, 20, 62.5);
+    curveTo(20, 80, 40, 102, 75, 120);
+    curveTo(110, 102, 130, 80, 130, 62.5);
+    curveTo(130, 62.5, 130, 25, 100, 25);
+    curveTo(85, 25, 75, 37, 75, 40);
+    this.ctx.fill();
   }
@@ -120,5 +120,5 @@
    */
-  draw () {
-    this.ctx.fillStyle = this.color
-    this.ctx.beginPath()
+  draw() {
+    this.ctx.fillStyle = this.color;
+    this.ctx.beginPath();
     this.ctx.setTransform(
@@ -128,10 +128,10 @@ Math.cos(this.tiltAngle), // set the x axis to the tilt angle
       0, 1,
-      this.x, this.y // set the origin
-    )
+      this.x, this.y, // set the origin
+    );
     if (this.shape === 'circle') {
-      this.drawCircle()
+      this.drawCircle();
     } else if (this.shape === 'rect') {
-      this.drawRect()
+      this.drawRect();
     } else if (this.shape === 'heart') {
-      this.drawHeart()
+      this.drawHeart();
     }
@@ -141,2 +141,2 @@ }
 
-export default Particle
+export default Particle;

src/particles.js

@@ -1,8 +0,8 @@
-import Particle from './particle'
+import Particle from './particle';
 
 class Particles {
-  constructor (opts) {
-    this.items = []
-    this.pool = []
-    this.opts = opts
+  constructor(opts) {
+    this.items = [];
+    this.pool = [];
+    this.opts = opts;
   }
@@ -13,8 +13,6 @@
    */
-  update () {
-    for (var i = 0; i < this.items.length; i++) {
-      if (this.items[i].update() === true) {
-        this.pool.push(this.items.splice(i--, 1)[0])
-      }
-    }
+  update() {
+    this.items.filter(item => item.update()).forEach((item, index) => {
+      this.pool.push(this.items.splice(index - 1, 1)[0]);
+    });
   }
@@ -25,6 +23,4 @@
    */
-  draw () {
-    for (var i = 0; i < this.items.length; i++) {
-      this.items[i].draw()
-    }
+  draw() {
+    this.items.forEach(item => item.draw());
   }
@@ -35,7 +31,7 @@
    */
-  add () {
+  add() {
     if (this.pool.length > 0) {
-      this.items.push(this.pool.pop().setup(this.opts))
+      this.items.push(this.pool.pop().setup(this.opts));
     } else {
-      this.items.push(new Particle().setup(this.opts))
+      this.items.push(new Particle().setup(this.opts));
     }
@@ -45,2 +41,2 @@ }
 
-export default Particles
+export default Particles;

webpack.config.js

@@ -1,24 +0,64 @@
-const path = require('path')
-const webpack = require('webpack')
+const path = require('path');
+const TerserWebpackPlugin = require('terser-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 module.exports = {
-  entry: path.resolve(__dirname, 'src', 'index.js'),
+  entry: {
+    'vue-confetti': [
+      path.resolve(__dirname, 'src', 'index.js')
+    ],
+    demo: [
+      path.resolve(__dirname, 'demo', 'demo.js'),
+    ]
+  },
+
+  mode: 'production',
+
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'vue-confetti.js',
+    filename: '[name].js',
     library: 'vue-confetti',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
   },
+
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        exclude: /node_modules/
-      }
-    ]
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+    ],
   },
+
+  optimization: {
+    minimizer: [
+      new TerserWebpackPlugin({
+        cache: true,
+        parallel: true,
+      }),
+    ],
+  },
+
   plugins: [
-    new webpack.optimize.UglifyJsPlugin()
-  ]
-}
+    new CleanWebpackPlugin(
+      [ 'dist' ],
+      {
+        root: __dirname,
+      }
+    ),
+
+    new HtmlWebpackPlugin({
+      template: require('html-webpack-template'),
+      appMountId: 'app',
+    }),
+
+    new VueLoaderPlugin(),
+  ],
+};

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

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

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

Number of package files

18

increased by63.64%

Lines of code

473

increased by31.75%

Number of lines in readme file

66

increased by6.45%

Worsened metrics

Total package byte prevSize

18685

decreased by-7.58%

Dev dependency count

22

increased by57.14%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes