vue-observe-visibility - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

build/rollup.config.base.js

 import babel from 'rollup-plugin-babel'
 import resolve from 'rollup-plugin-node-resolve'
-import vue from 'rollup-plugin-vue'
 import cjs from 'rollup-plugin-commonjs'
@@ -19,5 +18,2 @@ import replace from 'rollup-plugin-replace'
 		cjs(),
-		vue({
-			css: 'dist/vue-observe-visibility.css',
-		}),
 		babel({
@@ -24,0 +20,0 @@ exclude: 'node_modules/**',

dist/vue-observe-visibility.esm.js

@@ -230,2 +230,12 @@ var asyncGenerator = function () {
 
+function deepEqual(val1, val2) {
+	if (val1 === val2) return true;
+	for (var key in val1) {
+		if (deepEqual(val1[key], val2[key])) {
+			return true;
+		}
+	}
+	return false;
+}
+
 var VisibilityState = function () {
@@ -257,2 +267,4 @@ function VisibilityState(el, options, vnode) {
 
+			this.oldResult = undefined;
+
 			this.observer = new IntersectionObserver(function (entries) {
@@ -262,3 +274,6 @@ var entry = entries[0];
 					// Use isIntersecting if possible because browsers can report isIntersecting as true, but intersectionRatio as 0, when something very slowly enters the viewport.
-					_this.callback(entry.isIntersecting && entry.intersectionRatio >= _this.threshold, entry);
+					var result = entry.isIntersecting && entry.intersectionRatio >= _this.threshold;
+					if (result === _this.oldResult) return;
+					_this.oldResult = result;
+					_this.callback(result, entry);
 				}
@@ -293,30 +308,38 @@ }, this.options.intersection);
 
-var ObserveVisibility = {
-	bind: function bind(el, _ref, vnode) {
-		var value = _ref.value;
+function bind(el, _ref, vnode) {
+	var value = _ref.value;
 
-		if (typeof IntersectionObserver === 'undefined') {
-			console.warn('[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill');
-		} else {
-			var state = new VisibilityState(el, value, vnode);
-			el._vue_visibilityState = state;
-		}
-	},
-	update: function update(el, _ref2, vnode) {
-		var value = _ref2.value;
+	if (typeof IntersectionObserver === 'undefined') {
+		console.warn('[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill');
+	} else {
+		var state = new VisibilityState(el, value, vnode);
+		el._vue_visibilityState = state;
+	}
+}
 
-		var state = el._vue_visibilityState;
-		if (state) {
-			state.createObserver(value, vnode);
-		} else {
-			this.bind(el, { value: value }, vnode);
-		}
-	},
-	unbind: function unbind(el) {
-		var state = el._vue_visibilityState;
-		if (state) {
-			state.destroyObserver();
-			delete el._vue_visibilityState;
-		}
+function update(el, _ref2, vnode) {
+	var value = _ref2.value,
+	    oldValue = _ref2.oldValue;
+
+	if (deepEqual(value, oldValue)) return;
+	var state = el._vue_visibilityState;
+	if (state) {
+		state.createObserver(value, vnode);
+	} else {
+		bind(el, { value: value }, vnode);
 	}
+}
+
+function unbind(el) {
+	var state = el._vue_visibilityState;
+	if (state) {
+		state.destroyObserver();
+		delete el._vue_visibilityState;
+	}
+}
+
+var ObserveVisibility = {
+	bind: bind,
+	update: update,
+	unbind: unbind
 };
@@ -336,3 +359,3 @@
 	// eslint-disable-next-line no-undef
-	version: "0.4.1",
+	version: "0.4.2",
 	install: install
@@ -339,0 +362,0 @@ };

dist/vue-observe-visibility.min.js

@@ -1,1 +0,1 @@
-var VueObserveVisibility=function(e){"use strict";function t(e){return"function"==typeof e?{callback:e}:e}function n(e,t){var n=void 0,r=void 0,i=void 0,o=function(o){for(var a=arguments.length,l=Array(a>1?a-1:0),c=1;c<a;c++)l[c-1]=arguments[c];i=l,n&&o===r||(r=o,clearTimeout(n),n=setTimeout(function(){e.apply(void 0,[o].concat(s(i))),n=0},t))};return o._clear=function(){clearTimeout(n)},o}function r(e){e.directive("observe-visibility",l)}!function(){function e(e){this.value=e}function t(t){function n(i,o){try{var s=t[i](o),a=s.value;a instanceof e?Promise.resolve(a.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(s.done?"return":"normal",s.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":i.resolve({value:t,done:!0});break;case"throw":i.reject(t);break;default:i.resolve({value:t,done:!1})}(i=i.next)?n(i.key,i.arg):o=null}var i,o;this._invoke=function(e,t){return new Promise(function(r,s){var a={key:e,arg:t,resolve:r,reject:s,next:null};o?o=o.next=a:(i=o=a,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},o=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),s=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},a=function(){function e(t,n,r){i(this,e),this.el=t,this.observer=null,this.createObserver(n,r)}return o(e,[{key:"createObserver",value:function(e,r){var i=this;this.observer&&this.destroyObserver(),this.options=t(e),this.callback=this.options.callback,this.callback&&this.options.throttle&&(this.callback=n(this.callback,this.options.throttle)),this.observer=new IntersectionObserver(function(e){var t=e[0];i.callback&&i.callback(t.isIntersecting&&t.intersectionRatio>=i.threshold,t)},this.options.intersection),r.context.$nextTick(function(){i.observer.observe(i.el)})}},{key:"destroyObserver",value:function(){this.observer&&this.observer.disconnect(),this.callback&&this.callback._clear&&this.callback._clear()}},{key:"threshold",get:function(){return this.options.intersection&&this.options.intersection.threshold||0}}]),e}(),l={bind:function(e,t,n){var r=t.value;if("undefined"==typeof IntersectionObserver)console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");else{var i=new a(e,r,n);e._vue_visibilityState=i}},update:function(e,t,n){var r=t.value,i=e._vue_visibilityState;i?i.createObserver(r,n):this.bind(e,{value:r},n)},unbind:function(e){var t=e._vue_visibilityState;t&&(t.destroyObserver(),delete e._vue_visibilityState)}},c={version:"0.4.1",install:r},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(c),e.install=r,e.ObserveVisibility=l,e.default=c,e}({});
+var VueObserveVisibility=function(e){"use strict";!function(){function e(e){this.value=e}function t(t){var r,n;function i(r,n){try{var s=t[r](n),a=s.value;a instanceof e?Promise.resolve(a.value).then(function(e){i("next",e)},function(e){i("throw",e)}):o(s.done?"return":"normal",s.value)}catch(e){o("throw",e)}}function o(e,t){switch(e){case"return":r.resolve({value:t,done:!0});break;case"throw":r.reject(t);break;default:r.resolve({value:t,done:!1})}(r=r.next)?i(r.key,r.arg):n=null}this._invoke=function(e,t){return new Promise(function(o,s){var a={key:e,arg:t,resolve:o,reject:s,next:null};n?n=n.next=a:(r=n=a,i(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),n=function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)};var i=function(){function e(r,n,i){t(this,e),this.el=r,this.observer=null,this.createObserver(n,i)}return r(e,[{key:"createObserver",value:function(e,t){var r,i,o,s,a,l,u,c=this;this.observer&&this.destroyObserver(),this.options="function"==typeof(r=e)?{callback:r}:r,this.callback=this.options.callback,this.callback&&this.options.throttle&&(this.callback=(i=this.callback,o=this.options.throttle,s=void 0,a=void 0,l=void 0,(u=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),u=1;u<t;u++)r[u-1]=arguments[u];l=r,s&&e===a||(a=e,clearTimeout(s),s=setTimeout(function(){i.apply(void 0,[e].concat(n(l))),s=0},o))})._clear=function(){clearTimeout(s)},u)),this.oldResult=void 0,this.observer=new IntersectionObserver(function(e){var t=e[0];if(c.callback){var r=t.isIntersecting&&t.intersectionRatio>=c.threshold;if(r===c.oldResult)return;c.oldResult=r,c.callback(r,t)}},this.options.intersection),t.context.$nextTick(function(){c.observer.observe(c.el)})}},{key:"destroyObserver",value:function(){this.observer&&this.observer.disconnect(),this.callback&&this.callback._clear&&this.callback._clear()}},{key:"threshold",get:function(){return this.options.intersection&&this.options.intersection.threshold||0}}]),e}();function o(e,t,r){var n=t.value;if("undefined"==typeof IntersectionObserver)console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");else{var o=new i(e,n,r);e._vue_visibilityState=o}}var s={bind:o,update:function(e,t,r){var n=t.value;if(!function e(t,r){if(t===r)return!0;for(var n in t)if(e(t[n],r[n]))return!0;return!1}(n,t.oldValue)){var i=e._vue_visibilityState;i?i.createObserver(n,r):o(e,{value:n},r)}},unbind:function(e){var t=e._vue_visibilityState;t&&(t.destroyObserver(),delete e._vue_visibilityState)}};function a(e){e.directive("observe-visibility",s)}var l={version:"0.4.2",install:a},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(l),e.install=a,e.ObserveVisibility=s,e.default=l,e}({});

dist/vue-observe-visibility.umd.js

@@ -236,2 +236,12 @@ (function (global, factory) {
 
+function deepEqual(val1, val2) {
+	if (val1 === val2) return true;
+	for (var key in val1) {
+		if (deepEqual(val1[key], val2[key])) {
+			return true;
+		}
+	}
+	return false;
+}
+
 var VisibilityState = function () {
@@ -263,2 +273,4 @@ function VisibilityState(el, options, vnode) {
 
+			this.oldResult = undefined;
+
 			this.observer = new IntersectionObserver(function (entries) {
@@ -268,3 +280,6 @@ var entry = entries[0];
 					// Use isIntersecting if possible because browsers can report isIntersecting as true, but intersectionRatio as 0, when something very slowly enters the viewport.
-					_this.callback(entry.isIntersecting && entry.intersectionRatio >= _this.threshold, entry);
+					var result = entry.isIntersecting && entry.intersectionRatio >= _this.threshold;
+					if (result === _this.oldResult) return;
+					_this.oldResult = result;
+					_this.callback(result, entry);
 				}
@@ -299,30 +314,38 @@ }, this.options.intersection);
 
-var ObserveVisibility = {
-	bind: function bind(el, _ref, vnode) {
-		var value = _ref.value;
+function bind(el, _ref, vnode) {
+	var value = _ref.value;
 
-		if (typeof IntersectionObserver === 'undefined') {
-			console.warn('[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill');
-		} else {
-			var state = new VisibilityState(el, value, vnode);
-			el._vue_visibilityState = state;
-		}
-	},
-	update: function update(el, _ref2, vnode) {
-		var value = _ref2.value;
+	if (typeof IntersectionObserver === 'undefined') {
+		console.warn('[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill');
+	} else {
+		var state = new VisibilityState(el, value, vnode);
+		el._vue_visibilityState = state;
+	}
+}
 
-		var state = el._vue_visibilityState;
-		if (state) {
-			state.createObserver(value, vnode);
-		} else {
-			this.bind(el, { value: value }, vnode);
-		}
-	},
-	unbind: function unbind(el) {
-		var state = el._vue_visibilityState;
-		if (state) {
-			state.destroyObserver();
-			delete el._vue_visibilityState;
-		}
+function update(el, _ref2, vnode) {
+	var value = _ref2.value,
+	    oldValue = _ref2.oldValue;
+
+	if (deepEqual(value, oldValue)) return;
+	var state = el._vue_visibilityState;
+	if (state) {
+		state.createObserver(value, vnode);
+	} else {
+		bind(el, { value: value }, vnode);
 	}
+}
+
+function unbind(el) {
+	var state = el._vue_visibilityState;
+	if (state) {
+		state.destroyObserver();
+		delete el._vue_visibilityState;
+	}
+}
+
+var ObserveVisibility = {
+	bind: bind,
+	update: update,
+	unbind: unbind
 };
@@ -342,3 +365,3 @@
 	// eslint-disable-next-line no-undef
-	version: "0.4.1",
+	version: "0.4.2",
 	install: install
@@ -345,0 +368,0 @@ };

package.json

 {
   "name": "vue-observe-visibility",
   "description": "Detect when an element is becoming visible or hidden on the page. ",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "author": {
@@ -54,8 +54,5 @@ "name": "Guillaume Chau",
     "rollup-plugin-css-only": "^0.2.0",
-    "rollup-plugin-css-porter": "^0.1.2",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-stylus-css-modules": "^1.5.0",
     "rollup-plugin-uglify": "^2.0.1",
-    "rollup-plugin-vue": "^2.4.1",
     "serve": "^6.5.8",
@@ -62,0 +59,0 @@ "uglify-es": "^3.0.28"

README.md

@@ -10,2 +10,11 @@ # vue-observe-visibility
 
+
+<p>
+  <a href="https://www.patreon.com/akryum" target="_blank">
+    <img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patreon">
+  </a>
+</p>
+
+<br>
+
 ## Table of contents
@@ -12,0 +21,0 @@

src/directives/observe-visibility.js

@@ -1,2 +0,2 @@
-import { processOptions, throttle } from '../utils'
+import { processOptions, throttle, deepEqual } from '../utils'
 
@@ -27,2 +27,4 @@ class VisibilityState {
 
+		this.oldResult = undefined
+
 		this.observer = new IntersectionObserver(entries => {
@@ -32,3 +34,6 @@ var entry = entries[0]
 				// Use isIntersecting if possible because browsers can report isIntersecting as true, but intersectionRatio as 0, when something very slowly enters the viewport.
-				this.callback(entry.isIntersecting && entry.intersectionRatio >= this.threshold, entry)
+				const result = entry.isIntersecting && entry.intersectionRatio >= this.threshold
+				if (result === this.oldResult) return
+				this.oldResult = result
+				this.callback(result, entry)
 			}
@@ -55,28 +60,33 @@ }, this.options.intersection)
 
-export default {
-	bind (el, { value }, vnode) {
-		if (typeof IntersectionObserver === 'undefined') {
-			console.warn('[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill')
-		} else {
-			const state = new VisibilityState(el, value, vnode)
-			el._vue_visibilityState = state
-		}
-	},
+function bind (el, { value }, vnode) {
+  if (typeof IntersectionObserver === 'undefined') {
+    console.warn('[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill')
+  } else {
+    const state = new VisibilityState(el, value, vnode)
+    el._vue_visibilityState = state
+  }
+};
 
-	update (el, { value }, vnode) {
-		const state = el._vue_visibilityState
-		if (state) {
-			state.createObserver(value, vnode)
-		} else {
-			this.bind(el, { value }, vnode)
-		}
-	},
+function update (el, { value, oldValue }, vnode) {
+	if (deepEqual(value, oldValue)) return
+	const state = el._vue_visibilityState
+  if (state) {
+    state.createObserver(value, vnode)
+  } else {
+    bind(el, { value }, vnode)
+  }
+};
 
-	unbind (el) {
-		const state = el._vue_visibilityState
-		if (state) {
-			state.destroyObserver()
-			delete el._vue_visibilityState
-		}
-	},
+function unbind (el) {
+  const state = el._vue_visibilityState
+  if (state) {
+    state.destroyObserver()
+    delete el._vue_visibilityState
+  }
+};
+
+export default {
+	bind,
+	update,
+	unbind,
 }

src/utils.js

@@ -34,1 +34,11 @@ export function processOptions (value) {
 }
+
+export function deepEqual (val1, val2) {
+	if (val1 === val2) return true
+	for (const key in val1) {
+		if (deepEqual(val1[key], val2[key])) {
+			return true
+		}
+	}
+	return false
+}

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

Total package byte prevSize

214297

increased by0.02%

Dev dependency count

23

decreased by-11.54%

Number of package files

17

increased by6.25%

Lines of code

789

increased by7.64%

Number of lines in readme file

166

increased by5.73%

No dependency changes