vue-screen - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

dist/vue-screen.js

@@ -73,2 +73,3 @@ 'use strict';
 var bootstrap = {
+  xs: 0,
   sm: 576,
@@ -81,2 +82,3 @@ md: 768,
 var bulma = {
+  mobile: 0,
   tablet: 769,
@@ -89,2 +91,3 @@ desktop: 1024,
 var foundation = {
+  small: 0,
   medium: 640,
@@ -95,2 +98,3 @@ large: 1024
 var semantic = {
+  mobile: 0,
   tablet: 768,
@@ -102,2 +106,3 @@ computer: 992,
 var tailwind = {
+  xs: 0,
   sm: 576,
@@ -124,3 +129,12 @@ md: 768,
 var DEBOUNCE_MS = 100;
-var RESERVED_KEYS = ['width', 'height', 'touch', 'portrait', 'landscape'];
+var RESERVED_KEYS = ['width', 'height', 'touch', 'portrait', 'landscape', 'breakpoint'];
+var CUSTOM_FRAMEWORK_NAME = '__CUSTOM__';
+var DEFAULT_ORDERS = {
+  bootstrap: ['xs', 'sm', 'md', 'lg', 'xl'],
+  bulma: ['mobile', 'tablet', 'desktop', 'widescreen', 'fullhd'],
+  foundation: ['small', 'medium', 'large'],
+  materialize: ['s', 'm', 'l', 'xl'],
+  'semantic-ui': ['mobile', 'tablet', 'computer', 'large'],
+  tailwind: ['xs', 'sm', 'md', 'lg', 'xl']
+};
 var Plugin =
@@ -140,2 +154,3 @@ /*#__PURE__*/
     this.callbacks = {};
+    this.framework = '';
     this.createScreen(Plugin.parseBreakpoints(breakpoints));
@@ -185,2 +200,3 @@ this.init();
         this.runCallbacks();
+        this.findCurrentBreakpoint();
       }
@@ -202,2 +218,19 @@ }
     /**
+     * Calculate the current breakpoint name based on "order" property
+     */
+
+  }, {
+    key: "findCurrentBreakpoint",
+    value: function findCurrentBreakpoint() {
+      var _this2 = this;
+
+      this.screen.breakpoint = this.screen.breakpointsOrder.reduce(function (activeBreakpoint, currentBreakpoint) {
+        if (_this2.screen[currentBreakpoint]) {
+          return currentBreakpoint;
+        }
+
+        return activeBreakpoint;
+      }, this.screen.breakpointsOrder[0]);
+    }
+    /**
      * Check touch screen capability
@@ -222,4 +255,5 @@ */
     value: function createScreen(breakpoints) {
-      var _this2 = this;
+      var _this3 = this;
 
+      var breakpointKeys = Object.keys(breakpoints);
       this.screen = Vue.observable({
@@ -230,5 +264,7 @@ width: DEFAULT_WIDTH,
         portrait: true,
-        landscape: false
+        landscape: false,
+        breakpointsOrder: DEFAULT_ORDERS[this.framework] || breakpointKeys
       });
-      Object.keys(breakpoints).forEach(function (name) {
+      this.screen.breakpoint = this.findCurrentBreakpoint();
+      breakpointKeys.forEach(function (name) {
         if (RESERVED_KEYS.indexOf(name) >= 0) {
@@ -238,3 +274,3 @@ throw new Error("Invalid breakpoint name: \"".concat(name, "\". This key is reserved."));
 
-        Vue.set(_this2.screen, name, false);
+        Vue.set(_this3.screen, name, false);
       });
@@ -255,3 +291,3 @@
     value: function initMediaQueries(breakpoints) {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -263,7 +299,9 @@ Object.keys(breakpoints).forEach(function (name) {
         if (typeof width === 'function') {
-          _this3.callbacks[name] = width;
+          _this4.callbacks[name] = width;
         } else if (typeof width === 'number') {
           w = "".concat(width, "px");
+        } else if (typeof width === 'string') {
+          w = width;
         } else {
-          w = width;
+          _this4.screen[name] = width;
         }
@@ -275,6 +313,6 @@
           _query.addListener(function (e) {
-            return _this3.mediaStateChanged(name, e.matches);
+            return _this4.mediaStateChanged(name, e.matches);
           });
 
-          _this3.mediaStateChanged(name, _query.matches);
+          _this4.mediaStateChanged(name, _query.matches);
         }
@@ -284,5 +322,5 @@ });
       query.addListener(function (e) {
-        _this3.mediaStateChanged('portrait', e.matches);
+        _this4.mediaStateChanged('portrait', e.matches);
 
-        _this3.mediaStateChanged('landscape', !e.matches);
+        _this4.mediaStateChanged('landscape', !e.matches);
       });
@@ -316,12 +354,14 @@ this.mediaStateChanged('portrait', query.matches);
         if (breakpoints.extend) {
-          var framework = breakpoints.extend.toString(); // eslint-disable-next-line no-param-reassign
+          this.framework = breakpoints.extend.toString(); // eslint-disable-next-line no-param-reassign
 
           delete breakpoints.extend;
-          return Object.assign({}, breakpoints, Plugin.getBreakpoints(framework));
+          return Object.assign({}, breakpoints, Plugin.getBreakpoints());
         }
 
+        this.framework = CUSTOM_FRAMEWORK_NAME;
         return breakpoints;
       }
 
-      return Plugin.getBreakpoints(breakpoints.toString());
+      this.framework = breakpoints.toString();
+      return Plugin.getBreakpoints();
     }
@@ -338,14 +378,12 @@ /**
     value: function getBreakpoints() {
-      var framework = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-
-      if (!framework) {
+      if (!this.framework) {
         // eslint-disable-next-line no-param-reassign
-        framework = DEFAULT_FRAMEWORK;
+        this.framework = DEFAULT_FRAMEWORK;
       }
 
-      if (!grids[framework]) {
-        throw new Error("Cannot find grid breakpoints for framework \"".concat(framework, "\""));
+      if (!grids[this.framework]) {
+        throw new Error("Cannot find grid breakpoints for framework \"".concat(this.framework, "\""));
       }
 
-      return grids[framework];
+      return grids[this.framework];
     }
@@ -352,0 +390,0 @@ }, {

dist/vue-screen.min.js

@@ -1,1 +0,1 @@
-var VueScreen=function(){"use strict";function i(e){return(i="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 a(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function r(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}}var o,c="undefined"!=typeof window,t={bootstrap:{sm:576,md:768,lg:992,xl:1200},bulma:{tablet:769,desktop:1024,widescreen:1216,fullhd:1408},foundation:{medium:640,large:1024},"semantic-ui":{tablet:768,computer:992,large:1201},tailwind:{sm:576,md:768,lg:992,xl:1200}},s="2.6.0",u=["width","height","touch","portrait","landscape"],e=function(){function n(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.callbacks={},this.createScreen(n.parseBreakpoints(e)),this.init()}return function(e,t,n){t&&a(e.prototype,t),n&&a(e,n)}(n,[{key:"init",value:function(){this.attachResize(),this.setScreenSize(),this.checkTouch()}},{key:"attachResize",value:function(){c&&window.addEventListener("resize",function(n,i){var a;return function(){var e=this,t=arguments;clearTimeout(a),a=setTimeout(function(){a=null,n.apply(e,t)},i)}}(this.setScreenSize.bind(this),100))}},{key:"setScreenSize",value:function(){c&&(this.screen.width=window.innerWidth,this.screen.height=window.innerHeight,this.runCallbacks())}},{key:"runCallbacks",value:function(){var t=this;Object.keys(this.callbacks).forEach(function(e){t.screen[e]=t.callbacks[e].call(null,t.screen)})}},{key:"checkTouch",value:function(){c&&(this.screen.touch="ontouchstart"in window)}},{key:"createScreen",value:function(e){var t=this;this.screen=o.observable({width:410,height:730,touch:!0,portrait:!0,landscape:!1}),Object.keys(e).forEach(function(e){if(0<=u.indexOf(e))throw new Error('Invalid breakpoint name: "'.concat(e,'". This key is reserved.'));o.set(t.screen,e,!1)}),c&&this.initMediaQueries(e)}},{key:"initMediaQueries",value:function(a){var r=this;Object.keys(a).forEach(function(t){var e=a[t],n=null;if("function"==typeof e?r.callbacks[t]=e:n="number"==typeof e?"".concat(e,"px"):e,n){var i=window.matchMedia("(min-width: ".concat(n,")"));i.addListener(function(e){return r.mediaStateChanged(t,e.matches)}),r.mediaStateChanged(t,i.matches)}});var e=window.matchMedia("(orientation: portrait)");e.addListener(function(e){r.mediaStateChanged("portrait",e.matches),r.mediaStateChanged("landscape",!e.matches)}),this.mediaStateChanged("portrait",e.matches),this.mediaStateChanged("landscape",!e.matches)}},{key:"mediaStateChanged",value:function(e,t){o.set(this.screen,e,t)}}],[{key:"parseBreakpoints",value:function(e){if("object"!==i(e))return n.getBreakpoints(e.toString());if(e.extend){var t=e.extend.toString();return delete e.extend,Object.assign({},e,n.getBreakpoints(t))}return e}},{key:"getBreakpoints",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";if(e||(e="tailwind"),!t[e])throw new Error('Cannot find grid breakpoints for framework "'.concat(e,'"'));return t[e]}},{key:"install",value:function(e,t){if(!function(e,t){var n=r(e),i=r(t);return n.major>i.major||n.major===i.major&&n.minor>i.minor||n.major===i.major&&n.minor===i.minor&&n.patch>=i.patch}((o=e).version,s))throw Error("VueScreen requires at least Vue ".concat(s));o.prototype.$screen=new n(t).screen}}]),n}();return c&&window.Vue&&window.Vue.use(e),e}();
+var VueScreen=function(){"use strict";function t(e){return(t="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 r(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)}}function i(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}}var a,o="undefined"!=typeof window,e={bootstrap:{xs:0,sm:576,md:768,lg:992,xl:1200},bulma:{mobile:0,tablet:769,desktop:1024,widescreen:1216,fullhd:1408},foundation:{small:0,medium:640,large:1024},"semantic-ui":{mobile:0,tablet:768,computer:992,large:1201},tailwind:{xs:0,sm:576,md:768,lg:992,xl:1200}},s="2.6.0",c=["width","height","touch","portrait","landscape","breakpoint"],u={bootstrap:["xs","sm","md","lg","xl"],bulma:["mobile","tablet","desktop","widescreen","fullhd"],foundation:["small","medium","large"],materialize:["s","m","l","xl"],"semantic-ui":["mobile","tablet","computer","large"],tailwind:["xs","sm","md","lg","xl"]},n=function(){function n(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.callbacks={},this.framework="",this.createScreen(n.parseBreakpoints(e)),this.init()}return function(e,t,n){t&&r(e.prototype,t),n&&r(e,n)}(n,[{key:"init",value:function(){this.attachResize(),this.setScreenSize(),this.checkTouch()}},{key:"attachResize",value:function(){o&&window.addEventListener("resize",function(n,r){var i;return function(){var e=this,t=arguments;clearTimeout(i),i=setTimeout(function(){i=null,n.apply(e,t)},r)}}(this.setScreenSize.bind(this),100))}},{key:"setScreenSize",value:function(){o&&(this.screen.width=window.innerWidth,this.screen.height=window.innerHeight,this.runCallbacks(),this.findCurrentBreakpoint())}},{key:"runCallbacks",value:function(){var t=this;Object.keys(this.callbacks).forEach(function(e){t.screen[e]=t.callbacks[e].call(null,t.screen)})}},{key:"findCurrentBreakpoint",value:function(){var n=this;this.screen.breakpoint=this.screen.breakpointsOrder.reduce(function(e,t){return n.screen[t]?t:e},this.screen.breakpointsOrder[0])}},{key:"checkTouch",value:function(){o&&(this.screen.touch="ontouchstart"in window)}},{key:"createScreen",value:function(e){var t=this,n=Object.keys(e);this.screen=a.observable({width:410,height:730,touch:!0,portrait:!0,landscape:!1,breakpointsOrder:u[this.framework]||n}),this.screen.breakpoint=this.findCurrentBreakpoint(),n.forEach(function(e){if(0<=c.indexOf(e))throw new Error('Invalid breakpoint name: "'.concat(e,'". This key is reserved.'));a.set(t.screen,e,!1)}),o&&this.initMediaQueries(e)}},{key:"initMediaQueries",value:function(i){var a=this;Object.keys(i).forEach(function(t){var e=i[t],n=null;if("function"==typeof e?a.callbacks[t]=e:"number"==typeof e?n="".concat(e,"px"):"string"==typeof e?n=e:a.screen[t]=e,n){var r=window.matchMedia("(min-width: ".concat(n,")"));r.addListener(function(e){return a.mediaStateChanged(t,e.matches)}),a.mediaStateChanged(t,r.matches)}});var e=window.matchMedia("(orientation: portrait)");e.addListener(function(e){a.mediaStateChanged("portrait",e.matches),a.mediaStateChanged("landscape",!e.matches)}),this.mediaStateChanged("portrait",e.matches),this.mediaStateChanged("landscape",!e.matches)}},{key:"mediaStateChanged",value:function(e,t){a.set(this.screen,e,t)}}],[{key:"parseBreakpoints",value:function(e){return"object"===t(e)?e.extend?(this.framework=e.extend.toString(),delete e.extend,Object.assign({},e,n.getBreakpoints())):(this.framework="__CUSTOM__",e):(this.framework=e.toString(),n.getBreakpoints())}},{key:"getBreakpoints",value:function(){if(this.framework||(this.framework="tailwind"),!e[this.framework])throw new Error('Cannot find grid breakpoints for framework "'.concat(this.framework,'"'));return e[this.framework]}},{key:"install",value:function(e,t){if(!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}((a=e).version,s))throw Error("VueScreen requires at least Vue ".concat(s));a.prototype.$screen=new n(t).screen}}]),n}();return o&&window.Vue&&window.Vue.use(n),n}();

examples/grid/app.js

@@ -10,26 +10,5 @@ import Vue from 'vue';
     <div class="width">Width: <span>{{ $screen.width }}</span></div>
-    <div class="breakpoint">Breakpoint: <span>{{ breakpoint }}</span></div>
+    <div class="breakpoint">Breakpoint: <span>{{ $screen.breakpoint }}</span></div>
   </div>
   `,
-  computed: {
-    breakpoint() {
-      if (this.$screen.xl) {
-        return 'XL';
-      }
-
-      if (this.$screen.lg) {
-        return 'LG';
-      }
-
-      if (this.$screen.md) {
-        return 'MD';
-      }
-
-      if (this.$screen.sm) {
-        return 'SM';
-      }
-
-      return 'XS';
-    }
-  },
 };
@@ -36,0 +15,0 @@

package.json

 {
   "name": "vue-screen",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "Reactive window size and media query states for Vue components. Integrates with most UI frameworks.",
-  "keywords": ["vuejs", "window", "reactive window", "media query", "matchMedia", "innerWidth", "innerHeight"],
+  "keywords": [
+    "vuejs",
+    "window",
+    "reactive window",
+    "media query",
+    "matchMedia",
+    "innerWidth",
+    "innerHeight",
+    "grid",
+    "breakpoints"
+  ],
   "main": "dist/vue-screen.js",
   "scripts": {
     "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:unit": "mocha --require @babel/register --timeout 10000 --exit 'tests/units/*.spec.js'",
     "test:e2e": "node tests/e2e/runner.js",
@@ -11,0 +21,0 @@ "build:browser": "rollup -c rollup.config.browser.js",

README.md

@@ -35,2 +35,8 @@ [![npm version](https://badge.fury.io/js/vue-screen.svg)](https://badge.fury.io/js/vue-screen)
 
+Via yarn:
+```bash
+yarn add vue-screen
+```
+
+## Setup
 ```js
@@ -122,2 +128,3 @@ import Vue from 'vue';
         <p>Page height is {{ $screen.height }} px</p>
+        <p>Current breakpoint is {{ $screen.breakpoint }} px</p>
     </div>
@@ -143,2 +150,3 @@ </template>
                 'can-touch': this.$screen.touch,
+                'breakpoint': this.$screen.breakpoint,
             };
@@ -187,2 +195,24 @@ }
 <br><br>
+#### breakpoint 
+*String*<br>
+Returns the currently active breakpoint. If you use custom breakpoint names, you must also provide the `breakpointsOrder` property (see below).
+<br><br>
+#### breakpointsOrder 
+*Array*<br>
+Contains the order of the custom breakpoints provided in the configuration. This is required for the `breakpoint` property to work with custom breakpoint names.
+<br>
+Example:
+```js
+Vue.use(VueScreen, {
+    phonePortrait: 0,
+    phoneLandscape: 520,
+    tabletPortrait: 768,
+    tabletLandscape: 1024,
+    desktop: 1200,
+    breakpointsOrder: ['phonePortrait', 'phoneLandscape', 'tabletPortrait', 'tabletLandscape', 'desktop']
+});
+```
+> If you extend one of the default frameworks, `breakpointsOrder` is provided automatically.
+
+<br><br>
 #### &lt;breakpoint key&gt;
@@ -189,0 +219,0 @@ *Boolean*<br>

src/grids/bootstrap.js

 export default {
+  xs: 0,
   sm: 576,
@@ -3,0 +4,0 @@ md: 768,

src/grids/bulma.js

 export default {
+  mobile: 0,
   tablet: 769,
@@ -3,0 +4,0 @@ desktop: 1024,

src/grids/foundation.js

 export default {
+  small: 0,
   medium: 640,
   large: 1024,
 };

src/grids/materialize.js

 export default {
+  s: 0,
   m: 601,
@@ -3,0 +4,0 @@ l: 993,

src/grids/semantic-ui.js

 export default {
+  mobile: 0,
   tablet: 768,
@@ -3,0 +4,0 @@ computer: 992,

src/grids/tailwind.js

 export default {
+  xs: 0,
   sm: 576,
@@ -3,0 +4,0 @@ md: 768,

src/plugin.js

@@ -22,4 +22,16 @@ import { debounce, inBrowser, checkVersion } from './utils';
   'landscape',
+  'breakpoint',
 ];
 
+const CUSTOM_FRAMEWORK_NAME = '__CUSTOM__';
+
+export const DEFAULT_ORDERS = {
+  bootstrap: ['xs', 'sm', 'md', 'lg', 'xl'],
+  bulma: ['mobile', 'tablet', 'desktop', 'widescreen', 'fullhd'],
+  foundation: ['small', 'medium', 'large'],
+  materialize: ['s', 'm', 'l', 'xl'],
+  'semantic-ui': ['mobile', 'tablet', 'computer', 'large'],
+  tailwind: ['xs', 'sm', 'md', 'lg', 'xl'],
+};
+
 export class Plugin {
@@ -33,3 +45,3 @@ /**
     this.callbacks = {};
-
+    this.framework = '';
     this.createScreen(
@@ -50,3 +62,3 @@ Plugin.parseBreakpoints(breakpoints),
       if (breakpoints.extend) {
-        const framework = breakpoints.extend.toString();
+        this.framework = breakpoints.extend.toString();
         // eslint-disable-next-line no-param-reassign
@@ -58,10 +70,14 @@ delete breakpoints.extend;
           breakpoints,
-          Plugin.getBreakpoints(framework)
+          Plugin.getBreakpoints()
         );
       }
 
+      this.framework = CUSTOM_FRAMEWORK_NAME;
+
       return breakpoints;
     }
 
-    return Plugin.getBreakpoints(breakpoints.toString());
+    this.framework = breakpoints.toString();
+
+    return Plugin.getBreakpoints();
   }
@@ -75,13 +91,13 @@
    */
-  static getBreakpoints(framework = '') {
-    if (!framework) {
+  static getBreakpoints() {
+    if (!this.framework) {
       // eslint-disable-next-line no-param-reassign
-      framework = DEFAULT_FRAMEWORK;
+      this.framework = DEFAULT_FRAMEWORK;
     }
 
-    if (!grids[framework]) {
-      throw new Error(`Cannot find grid breakpoints for framework "${framework}"`);
+    if (!grids[this.framework]) {
+      throw new Error(`Cannot find grid breakpoints for framework "${this.framework}"`);
     }
 
-    return grids[framework];
+    return grids[this.framework];
   }
@@ -119,2 +135,3 @@
       this.runCallbacks();
+      this.findCurrentBreakpoint();
     }
@@ -133,2 +150,18 @@ }
   /**
+   * Calculate the current breakpoint name based on "order" property
+   */
+  findCurrentBreakpoint() {
+    this.screen.breakpoint = this.screen.breakpointsOrder.reduce(
+      (activeBreakpoint, currentBreakpoint) => {
+        if (this.screen[currentBreakpoint]) {
+          return currentBreakpoint;
+        }
+
+        return activeBreakpoint;
+      },
+      this.screen.breakpointsOrder[0]
+    );
+  }
+
+  /**
    * Check touch screen capability
@@ -148,2 +181,4 @@ */
   createScreen(breakpoints) {
+    const breakpointKeys = Object.keys(breakpoints);
+
     this.screen = Vue.observable({
@@ -155,5 +190,8 @@ width: DEFAULT_WIDTH,
       landscape: false,
+      breakpointsOrder: DEFAULT_ORDERS[this.framework] || breakpointKeys,
     });
 
-    Object.keys(breakpoints).forEach((name) => {
+    this.screen.breakpoint = this.findCurrentBreakpoint();
+
+    breakpointKeys.forEach((name) => {
       if (RESERVED_KEYS.indexOf(name) >= 0) {
@@ -185,4 +223,6 @@ throw new Error(`Invalid breakpoint name: "${name}". This key is reserved.`);
         w = `${width}px`;
+      } else if (typeof width === 'string') {
+        w = width;
       } else {
-        w = width;
+        this.screen[name] = width;
       }
@@ -189,0 +229,0 @@

tests/e2e/grid.spec.js

@@ -8,7 +8,7 @@ const { expect } = require('chai');
     const page = await loadExample('grid');
-    await testBreakpoint(page, 400, 700, 'XS');
-    await testBreakpoint(page, 600, 700, 'SM');
-    await testBreakpoint(page, 800, 700, 'MD');
-    await testBreakpoint(page, 1000, 700, 'LG');
-    await testBreakpoint(page, 1300, 700, 'XL');
+    await testBreakpoint(page, 400, 700, 'xs');
+    await testBreakpoint(page, 600, 700, 'sm');
+    await testBreakpoint(page, 800, 700, 'md');
+    await testBreakpoint(page, 1000, 700, 'lg');
+    await testBreakpoint(page, 1300, 700, 'xl');
   });
@@ -15,0 +15,0 @@

tests/e2e/runner.js

@@ -9,3 +9,3 @@ const spawn = require('cross-spawn');
   '--timeout',
-  '5000',
+  '10000',
   '--exit',
@@ -12,0 +12,0 @@ '"tests/e2e/**.spec.js"',

tests/units/helpers.js

@@ -26,4 +26,6 @@ require('@babel/polyfill');
   delete screen.landscape;
+  delete screen.breakpoint;
+  delete screen.breakpointsOrder;
 
   return screen;
 }

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

Improved metrics

Total package byte prevSize

650115

increased by182.95%

Number of package files

71

increased by1.43%

Lines of code

13459

increased by528.63%

Number of lines in readme file

238

increased by14.42%

Worsened metrics

Number of medium supply chain risk alerts

3

increased by50%

No dependency changes