vue-progressive-image - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

config/build.js

@@ -6,37 +6,8 @@ var fs = require('fs')
 var uglify = require('uglify-js')
-var babel = require('rollup-plugin-babel')
-var html = require('rollup-plugin-html')
 var pack = require('../package.json')
-var postcss = require('rollup-plugin-postcss')
-var postcssModules = require('postcss-modules')
+var plugins = require('./plugins')
 
-const cssExportMap = {}
-
-// CommonJS build.
-// this is used as the "main" field in package.json
-// and used by bundlers like Webpack and Browserify.
 rollup.rollup({
   entry: 'src/index.js',
-  plugins: [
-    postcss({
-      extensions: [ '.css' ],
-      plugins: [
-        postcssModules({
-          getJSON (id, exportTokens) {
-            cssExportMap[id] = exportTokens;
-          }
-        }),
-      ],
-      getExport (id) {
-        return cssExportMap[id];
-      }
-    }),
-    html({
-      include: '**/*.html'
-    }),
-    babel({
-      babelrc: false,
-      presets: ['es2015-rollup', 'stage-2']
-    })
-  ]
+  plugins: plugins
 })
@@ -49,28 +20,7 @@ .then(function (bundle) {
 })
-// Standalone Dev Build
+
 .then(function () {
   return rollup.rollup({
     entry: 'src/index.js',
-    plugins: [
-      postcss({
-        extensions: [ '.css' ],
-        plugins: [
-          postcssModules({
-            getJSON (id, exportTokens) {
-              cssExportMap[id] = exportTokens;
-            }
-          }),
-        ],
-        getExport (id) {
-          return cssExportMap[id];
-        }
-      }),
-      html({
-        include: '**/*.html'
-      }),
-      babel({
-        babelrc: false,
-        presets: ['es2015-rollup', 'stage-2']
-      })
-    ]
+    plugins: plugins
   })
@@ -86,27 +36,5 @@ .then(function (bundle) {
 .then(function () {
-  // Standalone Production Build
   return rollup.rollup({
     entry: 'src/index.js',
-    plugins: [
-      postcss({
-        extensions: [ '.css' ],
-        plugins: [
-          postcssModules({
-            getJSON (id, exportTokens) {
-              cssExportMap[id] = exportTokens;
-            }
-          }),
-        ],
-        getExport (id) {
-          return cssExportMap[id];
-        }
-      }),
-      html({
-        include: '**/*.html'
-      }),
-      babel({
-        babelrc: false,
-        presets: ['es2015-rollup', 'stage-2']
-      })
-    ]
+    plugins: plugins
   })
@@ -140,3 +68,3 @@ .then(function (bundle) {
       if (err) return reject(err)
-      console.log(blue(dest) + ' ' + getSize(code))
+      console.log(dest + ' ' + getSize(code))
       resolve()
@@ -166,5 +94,1 @@ })
 }
-
-function blue (str) {
-  return '\x1b[1m\x1b[34m' + str + '\x1b[39m\x1b[22m'
-}

dist/vue-progressive-image.common.js

 /*!
- * vue-progressive-image v1.2.1
+ * vue-progressive-image v1.2.2
  * (c) 2017 Matteo Gabriele
@@ -26,3 +26,3 @@ * Released under the ISC License.
 
-var style = __$styleInject("._component_1rttq_1 {\n  position: relative;\n  overflow: hidden;\n}\n\n._image_1rttq_6 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  transition: opacity 1s;\n  backface-visibility: hidden;\n}\n\n._before_1rttq_16 {\n  opacity: 1;\n}\n\n._enter_1rttq_20 {\n  opacity: 0;\n}\n\n._placeholder_1rttq_24 {\n  z-index: 0;\n\n  /* this is needed so Safari keeps sharp edges */\n  transform: scale(1)\n}\n", { "component": "_component_1rttq_1", "image": "_image_1rttq_6", "before": "_before_1rttq_16", "enter": "_enter_1rttq_20", "placeholder": "_placeholder_1rttq_24 _image_1rttq_6" });
+var style = __$styleInject("._component_t6cre_1 {\n  position: relative;\n  overflow: hidden;\n}\n\n._image_t6cre_6 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  transition: opacity 1s;\n}\n\n._before_t6cre_15 {\n  opacity: 1;\n}\n\n._enter_t6cre_19 {\n  opacity: 0;\n}\n\n._placeholder_t6cre_23 {\n  z-index: 0;\n\n  /* this is needed so Safari keeps sharp edges */\n  transform: scale(1)\n}\n", { "component": "_component_t6cre_1", "image": "_image_t6cre_6", "before": "_before_t6cre_15", "enter": "_enter_t6cre_19", "placeholder": "_placeholder_t6cre_23 _image_t6cre_6" });
 
@@ -133,3 +133,3 @@ /**
           _this.aspectRatio = naturalHeight / naturalWidth * 100;
-        }, 100);
+        }, 20);
       },
@@ -161,8 +161,2 @@ loadImage: function loadImage() {
 
-        /**
-         * It no local placeholder is provided and a global placeholder is passed in the plugin
-         * options, then the global placeholder is loaded
-         *
-         * The local placeholder always wins
-         */
         if (this.options.placeholder && !this.placeholder) {
@@ -169,0 +163,0 @@ src = this.options.placeholder;

dist/vue-progressive-image.js

 /*!
- * vue-progressive-image v1.2.1
+ * vue-progressive-image v1.2.2
  * (c) 2017 Matteo Gabriele
@@ -30,3 +30,3 @@ * Released under the ISC License.
 
-var style = __$styleInject("._component_1rttq_1 {\n  position: relative;\n  overflow: hidden;\n}\n\n._image_1rttq_6 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  transition: opacity 1s;\n  backface-visibility: hidden;\n}\n\n._before_1rttq_16 {\n  opacity: 1;\n}\n\n._enter_1rttq_20 {\n  opacity: 0;\n}\n\n._placeholder_1rttq_24 {\n  z-index: 0;\n\n  /* this is needed so Safari keeps sharp edges */\n  transform: scale(1)\n}\n", { "component": "_component_1rttq_1", "image": "_image_1rttq_6", "before": "_before_1rttq_16", "enter": "_enter_1rttq_20", "placeholder": "_placeholder_1rttq_24 _image_1rttq_6" });
+var style = __$styleInject("._component_t6cre_1 {\n  position: relative;\n  overflow: hidden;\n}\n\n._image_t6cre_6 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  transition: opacity 1s;\n}\n\n._before_t6cre_15 {\n  opacity: 1;\n}\n\n._enter_t6cre_19 {\n  opacity: 0;\n}\n\n._placeholder_t6cre_23 {\n  z-index: 0;\n\n  /* this is needed so Safari keeps sharp edges */\n  transform: scale(1)\n}\n", { "component": "_component_t6cre_1", "image": "_image_t6cre_6", "before": "_before_t6cre_15", "enter": "_enter_t6cre_19", "placeholder": "_placeholder_t6cre_23 _image_t6cre_6" });
 
@@ -137,3 +137,3 @@ /**
           _this.aspectRatio = naturalHeight / naturalWidth * 100;
-        }, 100);
+        }, 20);
       },
@@ -165,8 +165,2 @@ loadImage: function loadImage() {
 
-        /**
-         * It no local placeholder is provided and a global placeholder is passed in the plugin
-         * options, then the global placeholder is loaded
-         *
-         * The local placeholder always wins
-         */
         if (this.options.placeholder && !this.placeholder) {
@@ -173,0 +167,0 @@ src = this.options.placeholder;

dist/vue-progressive-image.min.js

 /*!
- * vue-progressive-image v1.2.1
+ * vue-progressive-image v1.2.2
  * (c) 2017 Matteo Gabriele
  * Released under the ISC License.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueProgressiveImage=t()}(this,function(){"use strict";function e(e,t){if("undefined"==typeof document)return t;e=e||"";var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");return r.type="text/css",r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e)),n.appendChild(r),t}var t='<div :class="style.component">\n  <div :style="wrapperStyle">\n    <transition :enter-class="style.enter" :enter-active-class="style.before">\n      <img v-if="shouldImageRender" :class="style.image" :src="image" :alt="alt">\n    </transition>\n    <img v-if="shouldPlaceholderRender" :class="style.placeholder" :style="placeholderStyle" :src="placeholderImage">\n  </div>\n</div>\n',n=e("._component_1rttq_1 {\n  position: relative;\n  overflow: hidden;\n}\n\n._image_1rttq_6 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  transition: opacity 1s;\n  backface-visibility: hidden;\n}\n\n._before_1rttq_16 {\n  opacity: 1;\n}\n\n._enter_1rttq_20 {\n  opacity: 0;\n}\n\n._placeholder_1rttq_24 {\n  z-index: 0;\n\n  /* this is needed so Safari keeps sharp edges */\n  transform: scale(1)\n}\n",{component:"_component_1rttq_1",image:"_image_1rttq_6",before:"_before_1rttq_16",enter:"_enter_1rttq_20",placeholder:"_placeholder_1rttq_24 _image_1rttq_6"}),r=function(e){return"undefined"!=typeof e&&null!==e},i=function(e,i){return{name:"progressive-img",template:t,props:{src:{type:String,required:!0},placeholder:{type:String,required:!1},blur:{type:Number,required:!1},alt:{type:String,required:!1}},data:function(){return{options:i,style:n,defaultBlur:5,image:null,placeholderImage:null,aspectRatio:56.25}},computed:{shouldPlaceholderRender:function(){return this.placeholderImage},shouldImageRender:function(){return this.image},wrapperStyle:function(){return{paddingBottom:this.aspectRatio+"%"}},placeholderStyle:function(){var e=this.defaultBlur;return r(this.blur)?this.getBlurStyle(this.blur):r(this.options.blur)?this.getBlurStyle(this.options.blur):this.getBlurStyle(e)}},created:function(){this.handleImageLoading()},methods:{getBlurStyle:function(e){return 0===e?{}:{filter:"blur("+e+"px)"}},defineAspectRatio:function(e){var t=this,n=setInterval(function(){if(e.naturalWidth){clearInterval(n);var r=e.naturalHeight,i=e.naturalWidth;t.aspectRatio=r/i*100}},100)},loadImage:function(){var e=this,t=new Image;this.defineAspectRatio(t),t.onload=function(){setTimeout(function(){e.image=e.src},e.options.delay||0)},t.src=this.src},loadPlaceholder:function(){var e=this;if(this.placeholder||this.options.placeholder){var t=new Image,n=this.placeholder;this.options.placeholder&&!this.placeholder&&(n=this.options.placeholder),t.onload=function(){e.placeholderImage=n},t.src=n}},handleImageLoading:function(){this.loadPlaceholder(),this.loadImage()}}}},o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i(e,t);e.component("progressive-img",n),e.component("progressive-image",n)},a={install:o};return a});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.VueProgressiveImage=t()}(this,function(){"use strict";function e(e,t){if("undefined"==typeof document)return t;e=e||"";var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");return r.type="text/css",r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e)),n.appendChild(r),t}var t='<div :class="style.component">\n  <div :style="wrapperStyle">\n    <transition :enter-class="style.enter" :enter-active-class="style.before">\n      <img v-if="shouldImageRender" :class="style.image" :src="image" :alt="alt">\n    </transition>\n    <img v-if="shouldPlaceholderRender" :class="style.placeholder" :style="placeholderStyle" :src="placeholderImage">\n  </div>\n</div>\n',n=e("._component_t6cre_1 {\n  position: relative;\n  overflow: hidden;\n}\n\n._image_t6cre_6 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  transition: opacity 1s;\n}\n\n._before_t6cre_15 {\n  opacity: 1;\n}\n\n._enter_t6cre_19 {\n  opacity: 0;\n}\n\n._placeholder_t6cre_23 {\n  z-index: 0;\n\n  /* this is needed so Safari keeps sharp edges */\n  transform: scale(1)\n}\n",{component:"_component_t6cre_1",image:"_image_t6cre_6",before:"_before_t6cre_15",enter:"_enter_t6cre_19",placeholder:"_placeholder_t6cre_23 _image_t6cre_6"}),r=function(e){return"undefined"!=typeof e&&null!==e},i=function(e,i){return{name:"progressive-img",template:t,props:{src:{type:String,required:!0},placeholder:{type:String,required:!1},blur:{type:Number,required:!1},alt:{type:String,required:!1}},data:function(){return{options:i,style:n,defaultBlur:5,image:null,placeholderImage:null,aspectRatio:56.25}},computed:{shouldPlaceholderRender:function(){return this.placeholderImage},shouldImageRender:function(){return this.image},wrapperStyle:function(){return{paddingBottom:this.aspectRatio+"%"}},placeholderStyle:function(){var e=this.defaultBlur;return r(this.blur)?this.getBlurStyle(this.blur):r(this.options.blur)?this.getBlurStyle(this.options.blur):this.getBlurStyle(e)}},created:function(){this.handleImageLoading()},methods:{getBlurStyle:function(e){return 0===e?{}:{filter:"blur("+e+"px)"}},defineAspectRatio:function(e){var t=this,n=setInterval(function(){if(e.naturalWidth){clearInterval(n);var r=e.naturalHeight,i=e.naturalWidth;t.aspectRatio=r/i*100}},20)},loadImage:function(){var e=this,t=new Image;this.defineAspectRatio(t),t.onload=function(){setTimeout(function(){e.image=e.src},e.options.delay||0)},t.src=this.src},loadPlaceholder:function(){var e=this;if(this.placeholder||this.options.placeholder){var t=new Image,n=this.placeholder;this.options.placeholder&&!this.placeholder&&(n=this.options.placeholder),t.onload=function(){e.placeholderImage=n},t.src=n}},handleImageLoading:function(){this.loadPlaceholder(),this.loadImage()}}}},o=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i(e,t);e.component("progressive-img",n),e.component("progressive-image",n)},l={install:o};return l});

package.json

 {
   "name": "vue-progressive-image",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Vue progressive image loading plugin",
@@ -5,0 +5,0 @@ "main": "dist/vue-progressive-image.js",

src/component/progressive-img.js

@@ -97,3 +97,3 @@ import template from './progressive-img.html'
           this.aspectRatio = (naturalHeight / naturalWidth) * 100
-        }, 100)
+        }, 20)
       },
@@ -123,8 +123,2 @@
 
-        /**
-         * It no local placeholder is provided and a global placeholder is passed in the plugin
-         * options, then the global placeholder is loaded
-         *
-         * The local placeholder always wins
-         */
         if (this.options.placeholder && !this.placeholder) {
@@ -131,0 +125,0 @@ src = this.options.placeholder

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

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

27

increased by8%

Worsened metrics

Total package byte prevSize

1400132

decreased by-0.14%

Lines of code

727

decreased by-8.44%

No dependency changes