vue-screen - npm Package Compare versions

Comparing version 1.1.0-rc1 to 1.1.0

demo/package.json

@@ -12,3 +12,3 @@ {
     "vue": "^2.6.10",
-    "vue-screen": "^1.0.0"
+    "vue-screen": "^1.1.0"
   },
@@ -15,0 +15,0 @@ "devDependencies": {

demo/src/main.js

 import Vue from 'vue';
-import VueScreen from 'vue-screen';
+import VueScreen from '../../src/index';
 import App from './App.vue';
@@ -4,0 +4,0 @@

demo/vue.config.js

 module.exports = {
   publicPath: process.env.NODE_ENV === 'production'
-    ? '/'
+    ? '/vue-screen/'
     : '/',
 };

dist/vue-screen.min.js

@@ -1,1 +0,1 @@
-!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.checkVersion=t.parseSemver=t.debounce=t.inBrowser=void 0;var r="undefined"!=typeof window;t.inBrowser=r;t.debounce=function(e,t){var n;return function(){var r=this,i=arguments;clearTimeout(n),n=setTimeout(function(){n=null,e.apply(r,i)},t)}};var i=function(e){var t=e.split("."),n=parseInt(t[0],10);return{major:"number"==typeof n?n:1,minor:parseInt(t[1],10)||0,patch:parseInt(t[2],10)||0}};t.parseSemver=i;t.checkVersion=function(e,t){var n=i(e),r=i(t);return n.major>r.major||n.major===r.major&&n.minor>r.minor||n.major===r.major&&n.minor===r.minor&&n.patch>=r.patch}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=n(2),i=n(0),o=r.Plugin;t.default=o,i.inBrowser&&window.Vue&&window.Vue.use(r.Plugin)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Plugin=t.DEBOUNCE_MS=t.DEFAULT_FRAMEWORK=void 0;var r=a(n(3)),i=n(0),o=a(n(4));function a(e){return e&&e.__esModule?e:{default:e}}function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(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)}}t.DEFAULT_FRAMEWORK="tailwind";t.DEBOUNCE_MS=100;var s=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.createScreen(e.parseBreakpoints(t)),this.init()}var t,n,a;return t=e,a=[{key:"parseBreakpoints",value:function(e){if("object"===u(e))return e;var t=e.toString()||"tailwind";if(!o.default[t])throw new Error('Cannot find grid breakpoints for framework "'.concat(t,'"'));return o.default[t]}},{key:"install",value:function(t,n){if(!(0,i.checkVersion)(t.version,"2.6.0"))throw Error("vue-screen requires at least Vue ".concat("2.6.0"));t.prototype.$screen=new e(n).screen}}],(n=[{key:"init",value:function(){this.attachResize(),this.setScreenSize(),this.checkTouch()}},{key:"attachResize",value:function(){i.inBrowser&&window.addEventListener("resize",(0,i.debounce)(this.setScreenSize.bind(this),100))}},{key:"setScreenSize",value:function(){i.inBrowser&&(this.screen.width=window.innerWidth,this.screen.height=window.innerHeight)}},{key:"checkTouch",value:function(){i.inBrowser&&(this.screen.touch="ontouchstart"in window)}},{key:"createScreen",value:function(e){var t=this;this.screen=r.default.observable({height:730,touch:!0,width:410,portrait:!0,landscape:!1}),Object.keys(e).forEach(function(e){return r.default.set(t.screen,e,!1)}),i.inBrowser&&this.initMediaQueries(e)}},{key:"initMediaQueries",value:function(e){var t=this;Object.keys(e).forEach(function(n){var r,i=e[n];r="number"==typeof i?"".concat(i,"px"):i;var o=window.matchMedia("(min-width: ".concat(r,")"));o.addListener(function(e){return t.mediaStateChanged(n,e.matches)}),t.mediaStateChanged(n,o.matches)});var n=window.matchMedia("(orientation: portrait)");n.addListener(function(e){t.mediaStateChanged("portrait",e.matches),t.mediaStateChanged("landscape",!e.matches)}),this.mediaStateChanged("portrait",n.matches),this.mediaStateChanged("landscape",!n.matches)}},{key:"mediaStateChanged",value:function(e,t){r.default.set(this.screen,e,t)}}])&&c(t.prototype,n),a&&c(t,a),e}();t.Plugin=s},function(e,t){e.exports=Vue},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=c(n(5)),i=c(n(6)),o=c(n(7)),a=c(n(8)),u=c(n(9));function c(e){return e&&e.__esModule?e:{default:e}}var s={bootstrap:r.default,bulma:i.default,foundation:o.default,"semantic-ui":a.default,tailwind:u.default};t.default=s},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={sm:576,md:768,lg:992,xl:1200}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={tablet:769,desktop:1024,widescreen:1216,fullhd:1408}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={medium:640,large:1024}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={tablet:768,computer:992,large:1201}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={sm:576,md:768,lg:992,xl:1200}}]);
+!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.checkVersion=t.parseSemver=t.debounce=t.inBrowser=void 0;var r="undefined"!=typeof window;t.inBrowser=r;t.debounce=function(e,t){var n;return function(){var r=this,i=arguments;clearTimeout(n),n=setTimeout(function(){n=null,e.apply(r,i)},t)}};var i=function(e){var t=e.split("."),n=parseInt(t[0],10);return{major:"number"==typeof n?n:1,minor:parseInt(t[1],10)||0,patch:parseInt(t[2],10)||0}};t.parseSemver=i;t.checkVersion=function(e,t){var n=i(e),r=i(t);return n.major>r.major||n.major===r.major&&n.minor>r.minor||n.major===r.major&&n.minor===r.minor&&n.patch>=r.patch}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=n(2),i=n(0),o=r.Plugin;t.default=o,i.inBrowser&&window.Vue&&window.Vue.use(r.Plugin)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Plugin=t.RESERVED_KEYS=t.DEBOUNCE_MS=t.DEFAULT_FRAMEWORK=void 0;var r,i,o=n(0),a=(r=n(3))&&r.__esModule?r:{default:r};function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(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)}}t.DEFAULT_FRAMEWORK="tailwind";t.DEBOUNCE_MS=100;var s=["width","height","touch","portrait","landscape"];t.RESERVED_KEYS=s;var l=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.callbacks={},this.createScreen(e.parseBreakpoints(t)),this.init()}var t,n,r;return t=e,r=[{key:"parseBreakpoints",value:function(e){if("object"===u(e))return e;var t=e.toString()||"tailwind";if(!a.default[t])throw new Error('Cannot find grid breakpoints for framework "'.concat(t,'"'));return a.default[t]}},{key:"install",value:function(t,n){if(i=t,!(0,o.checkVersion)(i.version,"2.6.0"))throw Error("VueScreen requires at least Vue ".concat("2.6.0"));i.prototype.$screen=new e(n).screen}}],(n=[{key:"init",value:function(){this.attachResize(),this.setScreenSize(),this.checkTouch()}},{key:"attachResize",value:function(){o.inBrowser&&window.addEventListener("resize",(0,o.debounce)(this.setScreenSize.bind(this),100))}},{key:"setScreenSize",value:function(){o.inBrowser&&(this.screen.width=window.innerWidth,this.screen.height=window.innerHeight,this.runCallbacks())}},{key:"runCallbacks",value:function(){var e=this;Object.keys(this.callbacks).forEach(function(t){e.screen[t]=e.callbacks[t].call(null,e.screen)})}},{key:"checkTouch",value:function(){o.inBrowser&&(this.screen.touch="ontouchstart"in window)}},{key:"createScreen",value:function(e){var t=this;this.screen=i.observable({width:410,height:730,touch:!0,portrait:!0,landscape:!1}),Object.keys(e).forEach(function(e){if(s.indexOf(e)>=0)throw new Error('Invalid breakpoint name: "'.concat(e,'". This key is reserved.'));i.set(t.screen,e,!1)}),o.inBrowser&&this.initMediaQueries(e)}},{key:"initMediaQueries",value:function(e){var t=this;Object.keys(e).forEach(function(n){var r=e[n],i=null;if("function"==typeof r?t.callbacks[n]=r:i="number"==typeof r?"".concat(r,"px"):r,i){var o=window.matchMedia("(min-width: ".concat(i,")"));o.addListener(function(e){return t.mediaStateChanged(n,e.matches)}),t.mediaStateChanged(n,o.matches)}});var n=window.matchMedia("(orientation: portrait)");n.addListener(function(e){t.mediaStateChanged("portrait",e.matches),t.mediaStateChanged("landscape",!e.matches)}),this.mediaStateChanged("portrait",n.matches),this.mediaStateChanged("landscape",!n.matches)}},{key:"mediaStateChanged",value:function(e,t){i.set(this.screen,e,t)}}])&&c(t.prototype,n),r&&c(t,r),e}();t.Plugin=l},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=c(n(4)),i=c(n(5)),o=c(n(6)),a=c(n(7)),u=c(n(8));function c(e){return e&&e.__esModule?e:{default:e}}var s={bootstrap:r.default,bulma:i.default,foundation:o.default,"semantic-ui":a.default,tailwind:u.default};t.default=s},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={sm:576,md:768,lg:992,xl:1200}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={tablet:769,desktop:1024,widescreen:1216,fullhd:1408}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={medium:640,large:1024}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={tablet:768,computer:992,large:1201}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;t.default={sm:576,md:768,lg:992,xl:1200}}]);

package.json

 {
   "name": "vue-screen",
-  "version": "1.1.0-rc1",
+  "version": "1.1.0",
   "description": "Reactive window size and media query states for Vue components. Integrates with most UI frameworks.",
   "main": "src/index.js",
   "scripts": {
-    "test": "mocha --require @babel/register --timeout 5000 --exit 'tests/**/*.spec.js'",
+    "test": "npm run lint && npm run test:unit && npm run test:e2e",
+    "test:unit": "mocha --require @babel/register --timeout 5000 --exit 'tests/units/*.spec.js'",
+    "test:e2e": "node tests/e2e/runner.js",
     "build": "webpack",
@@ -22,3 +24,3 @@ "lint": "eslint src/**.js",
   "homepage": "https://github.com/matteo-rigon/vue-screen#readme",
-  "module": "index.js",
+  "module": "src/index.js",
   "devDependencies": {
@@ -32,2 +34,3 @@ "@babel/core": "^7.4.3",
     "chai": "^4.2.0",
+    "cross-spawn": "^6.0.5",
     "eslint": "^5.3.0",
@@ -38,12 +41,13 @@ "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-react": "^7.12.4",
+    "express": "^4.16.4",
+    "express-urlrewrite": "^1.2.0",
     "husky": "^2.2.0",
     "install-peers": "^1.0.3",
     "mocha": "^6.1.4",
-    "puppeteer": "^1.14.0",
+    "puppeteer": "^1.15.0",
+    "vue": "^2.6.10",
     "webpack": "^4.30.0",
-    "webpack-cli": "^3.3.1"
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-middleware": "^3.6.2"
   },
-  "peerDependencies": {
-    "vue": ">= 2.6.0"
-  },
   "husky": {
@@ -50,0 +54,0 @@ "hooks": {

README.md

@@ -12,3 +12,3 @@ [![npm version](https://badge.fury.io/js/vue-screen.svg)](https://badge.fury.io/js/vue-screen)
 - reactive and debounced window innerWidth and innerHeight
-- reactive media query states
+- reactive media query states and device orientation
 - detect touch screen capability 
@@ -80,3 +80,3 @@ - breakpoints for most common ui frameworks provided out of the box: Tailwind, Bootstrap, Bulma, Foundation, Materialize, Semantic UI
 
-Provide custom breakpoints:
+#### Custom breakpoints:
 
@@ -93,2 +93,16 @@ ```js
 
+#### Callbacks
+You can provide custom callbacks that will be run every time the debounced window resize event is triggered
+```js
+Vue.use(VueScreen, {
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    tablet(screen) {
+        return screen.md && !screen.xl && screen.touch;
+    },
+});
+```
+
+
 ## Basic usage
@@ -159,2 +173,10 @@
 <br><br>
+#### portrait 
+*Boolean*<br>
+Tells if the device is in portrait mode
+<br><br>
+#### landscape 
+*Boolean*<br>
+Tells if the device is in landscape mode
+<br><br>
 #### &lt;breakpoint key&gt;
@@ -165,4 +187,7 @@ *Boolean*<br>
 To view default breakpoint keys and values for each framework, [click here](https://github.com/matteo-rigon/vue-screen/tree/master/src/grids). 
+<br><br>
+#### &lt;callback name&gt;
+*any*<br>
+Every callback specified in the configuration will have a corresponding property indicating the result of the callback.
 
-
 ## Browser support
@@ -169,0 +194,0 @@

src/plugin.js

@@ -1,5 +0,6 @@
-import Vue from 'vue';
 import { debounce, inBrowser, checkVersion } from './utils';
 import grids from './grids';
 
+let Vue;
+
 const MIN_VUE_VERSION = '2.6.0';
@@ -15,2 +16,10 @@
 
+export const RESERVED_KEYS = [
+  'width',
+  'height',
+  'touch',
+  'portrait',
+  'landscape',
+];
+
 export class Plugin {
@@ -23,2 +32,4 @@ /**
   constructor(breakpoints = '') {
+    this.callbacks = {};
+
     this.createScreen(
@@ -77,2 +88,4 @@ Plugin.parseBreakpoints(breakpoints),
       this.screen.height = window.innerHeight;
+
+      this.runCallbacks();
     }
@@ -82,2 +95,11 @@ }
   /**
+   * Run callbacks
+   */
+  runCallbacks() {
+    Object.keys(this.callbacks).forEach((key) => {
+      this.screen[key] = this.callbacks[key].call(null, this.screen);
+    });
+  }
+
+  /**
    * Check touch screen capability
@@ -97,14 +119,18 @@ */
   createScreen(breakpoints) {
-    this.$screen = {
+    this.screen = Vue.observable({
+      width: DEFAULT_WIDTH,
       height: DEFAULT_HEIGHT,
       touch: true,
-      width: DEFAULT_WIDTH,
       portrait: true,
       landscape: false,
-    };
-    this.screen = Vue.observable(this.$screen);
-    console.log('asd', this.screen);
+    });
 
-    Object.keys(breakpoints).forEach(name => Vue.set(this.screen, name, false));
+    Object.keys(breakpoints).forEach((name) => {
+      if (RESERVED_KEYS.indexOf(name) >= 0) {
+        throw new Error(`Invalid breakpoint name: "${name}". This key is reserved.`);
+      }
 
+      Vue.set(this.screen, name, false);
+    });
+
     if (inBrowser) {
@@ -123,4 +149,7 @@ this.initMediaQueries(breakpoints);
       const width = breakpoints[name];
-      let w;
-      if (typeof width === 'number') {
+      let w = null;
+
+      if (typeof width === 'function') {
+        this.callbacks[name] = width;
+      } else if (typeof width === 'number') {
         w = `${width}px`;
@@ -131,5 +160,7 @@ } else {
 
-      const query = window.matchMedia(`(min-width: ${w})`);
-      query.addListener(e => this.mediaStateChanged(name, e.matches));
-      this.mediaStateChanged(name, query.matches);
+      if (w) {
+        const query = window.matchMedia(`(min-width: ${w})`);
+        query.addListener(e => this.mediaStateChanged(name, e.matches));
+        this.mediaStateChanged(name, query.matches);
+      }
     });
@@ -164,9 +195,11 @@
   static install(vue, options) {
-    if (!checkVersion(vue.version, MIN_VUE_VERSION)) {
-      throw Error(`vue-screen requires at least Vue ${MIN_VUE_VERSION}`);
+    Vue = vue;
+
+    if (!checkVersion(Vue.version, MIN_VUE_VERSION)) {
+      throw Error(`VueScreen requires at least Vue ${MIN_VUE_VERSION}`);
     }
 
     // eslint-disable-next-line no-param-reassign
-    vue.prototype.$screen = new Plugin(options).screen;
+    Vue.prototype.$screen = new Plugin(options).screen;
   }
 }

webpack.config.js

@@ -29,3 +29,4 @@ const path = require('path');
     colors: true,
+    chunks: false,
   },
 };

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Number of package files

70

increased by48.94%

Lines of code

2163

increased by68.46%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

202

increased by14.12%

Worsened metrics

Total package byte prevSize

756002

decreased by-38.28%

Dev dependency count

23

increased by27.78%

Number of low supply chain risk alerts

4

increased byInfinity%

No dependency changes