@svelte-plugins/viewable - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/index.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self)["@svelte-plugins/viewable"]=e()}(this,(function(){"use strict";function t(){}function e(t){return t()}function n(){return Object.create(null)}function o(t){t.forEach(e)}function r(t){return"function"==typeof t}function i(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function c(t,e,n,o){return t[1]&&o?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](o(e))):n.ctx}function s(t,e,n,o,r,i,s){const l=function(t,e,n,o){if(t[2]&&o){const r=t[2](o(n));if(void 0===e.dirty)return r;if("object"==typeof r){const t=[],n=Math.max(e.dirty.length,r.length);for(let o=0;o<n;o+=1)t[o]=e.dirty[o]|r[o];return t}return e.dirty|r}return e.dirty}(e,o,r,i);if(l){const r=c(e,n,o,s);t.p(r,l)}}function l(t){t.parentNode.removeChild(t)}let u;function a(t){u=t}function f(){if(!u)throw new Error("Function called outside component initialization");return u}const d=[],h=[],p=[],g=[],$=Promise.resolve();let m=!1;function b(){m||(m=!0,$.then(w))}function y(t){p.push(t)}let v=!1;const x=new Set;function w(){if(!v){v=!0;do{for(let t=0;t<d.length;t+=1){const e=d[t];a(e),_(e.$$)}for(a(null),d.length=0;h.length;)h.pop()();for(let t=0;t<p.length;t+=1){const e=p[t];x.has(e)||(x.add(e),e())}p.length=0}while(d.length);for(;g.length;)g.pop()();m=!1,v=!1,x.clear()}}function _(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(y)}}const M=new Set;function k(t,e){t&&t.i&&(M.delete(t),t.i(e))}function O(i,c,s,f,h,p,g=[-1]){const $=u;a(i);const m=i.$$={fragment:null,ctx:null,props:p,update:t,not_equal:h,bound:n(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map($?$.$$.context:[]),callbacks:n(),dirty:g,skip_bound:!1};let v=!1;if(m.ctx=s?s(i,c.props||{},((t,e,...n)=>{const o=n.length?n[0]:e;return m.ctx&&h(m.ctx[t],m.ctx[t]=o)&&(!m.skip_bound&&m.bound[t]&&m.bound[t](o),v&&function(t,e){-1===t.$$.dirty[0]&&(d.push(t),b(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}(i,t)),e})):[],m.update(),v=!0,o(m.before_update),m.fragment=!!f&&f(m.ctx),c.target){if(c.hydrate){const t=(x=c.target,Array.from(x.childNodes));m.fragment&&m.fragment.l(t),t.forEach(l)}else m.fragment&&m.fragment.c();c.intro&&k(i.$$.fragment),function(t,n,i,c){const{fragment:s,on_mount:l,on_destroy:u,after_update:a}=t.$$;s&&s.m(n,i),c||y((()=>{const n=l.map(e).filter(r);u?u.push(...n):o(n),t.$$.on_mount=[]})),a.forEach(y)}(i,c.target,c.anchor,c.customElement),w()}var x;a($)}function E(t){let e;const n=t[11].default,o=function(t,e,n,o){if(t){const r=c(t,e,n,o);return t[0](r)}}(n,t,t[10],null);return{c(){o&&o.c()},m(t,n){o&&o.m(t,n),e=!0},p(t,[e]){o&&o.p&&1024&e&&s(o,n,t,t[10],e,null,null)},i(t){e||(k(o,t),e=!0)},o(t){!function(t,e,n,o){if(t&&t.o){if(M.has(t))return;M.add(t),(void 0).c.push((()=>{M.delete(t),o&&(n&&t.d(1),o())})),t.o(e)}}(o,t),e=!1},d(t){o&&o.d(t)}}}function D(t,e,n){let{$$slots:o={},$$scope:r}=e,{element:i}=e,{rules:c}=e,{debug:s=!1}=e,{duration:l=0}=e,{percent:u=0}=e,{percentX:a=0}=e,{percentY:d=0}=e,{intervalRate:h=200}=e,{gridSize:p=20}=e,{disableObstructionDetection:g=!1}=e,m=null,y=null;const v=[],x=(...t)=>s&&console.log(...t),w=(t,e)=>{const o=(t=>{const e=p+1,n=Math.floor(t.width/e),o=Math.floor(t.height/e),r=Math.max(0,t.left),i=t.top,c=[];for(let t=1;t<e;t++){const s=r+n*t;for(let t=1;t<e;t++){const e=i+o*t;c[c.length]=[s,e]}}return c})(t);let r=0;for(let t=0,e=o.length;t<e;t++){const e=o[t][0],n=o[t][1],c=document.elementFromPoint(e,n);c===i||i.contains(c)||r++}const c=100*e,s=100-r/o.length*100;return n(1,u=Math.round(Math.ceil(s))),!(s>=c)},_=t=>{const e=(()=>{const t=document.body,e=document.documentElement;return{height:window.innerHeight||e.clientHeight||t&&t.clientHeight,width:window.innerWidth||e.clientWidth||t&&t.clientWidth}})(),o=i.getBoundingClientRect(),r=Math.max(0,Math.min(o.bottom,e.height)-Math.max(o.top,0)),c=Math.max(0,Math.min(o.right,e.width)-Math.max(o.left,0)),s=r/(o.height||i.offsetHeight)||0,l=c/(o.width||i.offsetWidth)||0,f=Math.max(0,s+l-1);return n(2,a=Math.round(Math.ceil(100*l))),n(3,d=Math.round(Math.ceil(100*s))),n(1,u=Math.round(Math.ceil(100*f))),!g&&w(o,t)?0:f},M=()=>{const t=v.length;for(let e=0;e<t;e++){const t=v[e];if(t)if(_(t.threshold)<t.threshold)t.history=null;else if(t.history||(n(0,l=0),t.history=Date.now()),n(0,l=(Date.now()-t.history)/1e3),x(`[ Tracking - ${l} - ${t.rule}]`),l>=t.duration&&(t.observer&&t.observer.unobserve(i),t.callback(t),t.history=Date.now(),v.splice(e,1),e-=1,x(v),!v.length)){x(`[ Finished - ${t.history} ]`),y&&(clearInterval(y),y=null);break}}},k=t=>{const e=e=>{const n=e[0];n.isIntersecting?n.isIntersecting&&!y&&(y=setInterval(M,h),M()):t.history=null};if(!t.observer){const n=new IntersectionObserver(e,{threshold:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]});n.observe(i),t.observer=n}};var O;return O=async()=>{await(b(),$),null===i||m||((()=>{for(let t in c){const e=c[t],{duration:n=0,percentage:o=0,fn:r,...i}=e,s={...i,percentage:o,threshold:o/100,duration:n,callback:function(t){r(t),x("[ Viewable Rule ]\n"+JSON.stringify({...t},null,2))},rule:t,history:null};v.push(s),k(s)}})(),m=!0)},f().$$.after_update.push(O),function(t){f().$$.on_destroy.push(t)}((()=>{v.forEach((t=>{t.observer&&t.observer.disconnect()}))})),t.$$set=t=>{"element"in t&&n(4,i=t.element),"rules"in t&&n(5,c=t.rules),"debug"in t&&n(6,s=t.debug),"duration"in t&&n(0,l=t.duration),"percent"in t&&n(1,u=t.percent),"percentX"in t&&n(2,a=t.percentX),"percentY"in t&&n(3,d=t.percentY),"intervalRate"in t&&n(7,h=t.intervalRate),"gridSize"in t&&n(8,p=t.gridSize),"disableObstructionDetection"in t&&n(9,g=t.disableObstructionDetection),"$$scope"in t&&n(10,r=t.$$scope)},[l,u,a,d,i,c,s,h,p,g,r,o]}return class extends class{$destroy(){!function(t,e){const n=t.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}(this,1),this.$destroy=t}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}{constructor(t){super(),O(this,t,D,E,i,{element:4,rules:5,debug:6,duration:0,percent:1,percentX:2,percentY:3,intervalRate:7,gridSize:8,disableObstructionDetection:9})}}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self)["@svelte-plugins/viewable"]=e()}(this,(function(){"use strict";function t(){}function e(t){return t()}function n(){return Object.create(null)}function o(t){t.forEach(e)}function r(t){return"function"==typeof t}function i(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function c(t,e,n,o){return t[1]&&o?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](o(e))):n.ctx}function s(t,e,n,o,r,i,s){const l=function(t,e,n,o){if(t[2]&&o){const r=t[2](o(n));if(void 0===e.dirty)return r;if("object"==typeof r){const t=[],n=Math.max(e.dirty.length,r.length);for(let o=0;o<n;o+=1)t[o]=e.dirty[o]|r[o];return t}return e.dirty|r}return e.dirty}(e,o,r,i);if(l){const r=c(e,n,o,s);t.p(r,l)}}function l(t){t.parentNode.removeChild(t)}let u;function a(t){u=t}function f(){if(!u)throw new Error("Function called outside component initialization");return u}const d=[],h=[],p=[],g=[],$=Promise.resolve();let m=!1;function b(){m||(m=!0,$.then(w))}function y(t){p.push(t)}let x=!1;const v=new Set;function w(){if(!x){x=!0;do{for(let t=0;t<d.length;t+=1){const e=d[t];a(e),_(e.$$)}for(a(null),d.length=0;h.length;)h.pop()();for(let t=0;t<p.length;t+=1){const e=p[t];v.has(e)||(v.add(e),e())}p.length=0}while(d.length);for(;g.length;)g.pop()();m=!1,x=!1,v.clear()}}function _(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(y)}}const k=new Set;function M(t,e){t&&t.i&&(k.delete(t),t.i(e))}function O(i,c,s,f,h,p,g=[-1]){const $=u;a(i);const m=i.$$={fragment:null,ctx:null,props:p,update:t,not_equal:h,bound:n(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map($?$.$$.context:[]),callbacks:n(),dirty:g,skip_bound:!1};let x=!1;if(m.ctx=s?s(i,c.props||{},((t,e,...n)=>{const o=n.length?n[0]:e;return m.ctx&&h(m.ctx[t],m.ctx[t]=o)&&(!m.skip_bound&&m.bound[t]&&m.bound[t](o),x&&function(t,e){-1===t.$$.dirty[0]&&(d.push(t),b(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}(i,t)),e})):[],m.update(),x=!0,o(m.before_update),m.fragment=!!f&&f(m.ctx),c.target){if(c.hydrate){const t=(v=c.target,Array.from(v.childNodes));m.fragment&&m.fragment.l(t),t.forEach(l)}else m.fragment&&m.fragment.c();c.intro&&M(i.$$.fragment),function(t,n,i,c){const{fragment:s,on_mount:l,on_destroy:u,after_update:a}=t.$$;s&&s.m(n,i),c||y((()=>{const n=l.map(e).filter(r);u?u.push(...n):o(n),t.$$.on_mount=[]})),a.forEach(y)}(i,c.target,c.anchor,c.customElement),w()}var v;a($)}function E(t){let e;const n=t[11].default,o=function(t,e,n,o){if(t){const r=c(t,e,n,o);return t[0](r)}}(n,t,t[10],null);return{c(){o&&o.c()},m(t,n){o&&o.m(t,n),e=!0},p(t,[e]){o&&o.p&&1024&e&&s(o,n,t,t[10],e,null,null)},i(t){e||(M(o,t),e=!0)},o(t){!function(t,e,n,o){if(t&&t.o){if(k.has(t))return;k.add(t),(void 0).c.push((()=>{k.delete(t),o&&(n&&t.d(1),o())})),t.o(e)}}(o,t),e=!1},d(t){o&&o.d(t)}}}function D(t,e,n){let{$$slots:o={},$$scope:r}=e,{element:i}=e,{rules:c}=e,{debug:s=!1}=e,{duration:l=0}=e,{percent:u=0}=e,{percentX:a=0}=e,{percentY:d=0}=e,{intervalRate:h=200}=e,{gridSize:p=20}=e,{enableObstructionDetection:g=!1}=e,m=null,y=null;const x=[],v=(...t)=>s&&console.log(...t),w=(t,e)=>{const o=(t=>{const e=p+1,n=Math.floor(t.width/e),o=Math.floor(t.height/e),r=Math.max(0,t.left),i=t.top,c=[];for(let t=1;t<e;t++){const s=r+n*t;for(let t=1;t<e;t++){const e=i+o*t;c[c.length]=[s,e]}}return c})(t);let r=0;for(let t=0,e=o.length;t<e;t++){const e=o[t][0],n=o[t][1],c=document.elementFromPoint(e,n);c===i||i.contains(c)||r++}const c=100*e,s=100-r/o.length*100,l=s<c;return l&&n(1,u=s.toFixed(0)),l},_=t=>{const e=(()=>{const t=document.body,e=document.documentElement;return{height:window.innerHeight||e.clientHeight||t&&t.clientHeight,width:window.innerWidth||e.clientWidth||t&&t.clientWidth}})(),o=i.getBoundingClientRect(),r=Math.max(0,Math.min(o.bottom,e.height)-Math.max(o.top,0)),c=Math.max(0,Math.min(o.right,e.width)-Math.max(o.left,0)),s=r/(o.height||i.offsetHeight)||0,l=c/(o.width||i.offsetWidth)||0,f=Math.max(0,s+l-1);return n(2,a=(100*l).toFixed(0)),n(3,d=(100*s).toFixed(0)),n(1,u=(100*f).toFixed(0)),g&&w(o,t)?0:f},k=()=>{const t=x.length;for(let e=0;e<t;e++){const t=x[e];if(t)if(_(t.threshold)<t.threshold)t.history=null;else if(t.history||(n(0,l=0),t.history=Date.now()),n(0,l=(Date.now()-t.history)/1e3),v(`[ Tracking - ${l} - ${t.rule}]`),l>=t.duration&&(t.observer&&t.observer.unobserve(i),t.callback(t),t.history=Date.now(),x.splice(e,1),e-=1,v(x),!x.length)){v(`[ Finished - ${t.history} ]`),y&&(clearInterval(y),y=null);break}}},M=t=>{const e=e=>{const n=e[0];n.isIntersecting?n.isIntersecting&&!y&&(y=setInterval(k,h),k()):t.history=null};if(!t.observer){const n=new IntersectionObserver(e,{threshold:[0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1]});n.observe(i),t.observer=n}};var O;return O=async()=>{await(b(),$),null===i||m||((()=>{for(let t in c){const e=c[t],{duration:n=0,percentage:o=0,fn:r,...i}=e,s={...i,percentage:o,threshold:o/100,duration:n,callback:function(t){r(t),v("[ Viewable Rule ]\n"+JSON.stringify({...t},null,2))},rule:t,history:null};x.push(s),M(s)}})(),m=!0)},f().$$.after_update.push(O),function(t){f().$$.on_destroy.push(t)}((()=>{x.forEach((t=>{t.observer&&t.observer.disconnect()}))})),t.$$set=t=>{"element"in t&&n(4,i=t.element),"rules"in t&&n(5,c=t.rules),"debug"in t&&n(6,s=t.debug),"duration"in t&&n(0,l=t.duration),"percent"in t&&n(1,u=t.percent),"percentX"in t&&n(2,a=t.percentX),"percentY"in t&&n(3,d=t.percentY),"intervalRate"in t&&n(7,h=t.intervalRate),"gridSize"in t&&n(8,p=t.gridSize),"enableObstructionDetection"in t&&n(9,g=t.enableObstructionDetection),"$$scope"in t&&n(10,r=t.$$scope)},[l,u,a,d,i,c,s,h,p,g,r,o]}return class extends class{$destroy(){!function(t,e){const n=t.$$;null!==n.fragment&&(o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}(this,1),this.$destroy=t}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}{constructor(t){super(),O(this,t,D,E,i,{element:4,rules:5,debug:6,duration:0,percent:1,percentX:2,percentY:3,intervalRate:7,gridSize:8,enableObstructionDetection:9})}}}));

package.json

 {
   "name": "@svelte-plugins/viewable",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
@@ -42,8 +42,8 @@ "description": "A simple rule-based approach to tracking element viewability.",
     "deploy": "npx gh-pages -d dist",
-    "prepack": "BUNDLE=true rollup -c",
     "lint": "eslint --fix \"src/**/*.{.js,svelte}\"",
     "format": "prettier --write \"src/**/*.{js,json,svelte}\"",
+    "install:docs": "yarn --cwd ./docs",
     "test": "jest --coverage",
     "test:coverage": "jest --coverage && open ./coverage/lcov-report/index.html",
-    "test:integration": "mkdir -p ./tests/artifacts/cdplogs && yarn bundle && yarn --cwd ./docs && yarn --cwd ./docs dev & cypress run --browser chrome --headless",
+    "test:integration": "mkdir -p ./tests/artifacts/cdplogs && yarn bundle && yarn --cwd ./docs dev & cypress run --browser chrome --headless",
     "test:integration:debug": "cypress open"
@@ -50,0 +50,0 @@ },

src/Viewable.test.js

@@ -57,3 +57,3 @@ import { render } from '@testing-library/svelte';
 
-    await TestHarness({ debug: true, rules: { immediate: { fn: mock } } });
+    await TestHarness({ debug: true, enableObstructionDetection: true, rules: { immediate: { fn: mock } } });
 
@@ -65,4 +65,2 @@ onIntersectionMock([{ isIntersecting: true }]);
     expect(mock).toHaveBeenCalled();
-
-    expect(document.elementFromPoint).toHaveBeenCalled();
   });
@@ -78,2 +76,3 @@
     const { container } = await TestHarness({
+      enableObstructionDetection: true,
       rules: {
@@ -80,0 +79,0 @@ fifty4six: {

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

Worsened metrics

Total package byte prevSize

29870

decreased by-0.01%

Lines of code

140

decreased by-0.71%

No dependency changes