Merge pull request #4065 from indirectlylit/vue-beta

set vue to a beta version for testing

kolibri/core/assets/src/mixins/responsive-window.js

@@ -115,38 +115,29 @@ export default {
     return {
       windowWidth: undefined,
       windowHeight: undefined,
-      windowBreakpoint: undefined,
     };
   },
-  // Implementing this as a watcher to work around
-  // optimization issue: https://github.com/vuejs/vue/issues/8540
-  watch: {
-    windowWidth() {
-      let newBreakpoint = undefined;
+  computed: {
+    windowBreakpoint() {
       const SCROLL_BAR = 16;
       if (this.windowWidth < 480) {
-        newBreakpoint = 0;
+        return 0;
       } else if (this.windowWidth < 600) {
-        newBreakpoint = 1;
+        return 1;
       } else if (this.windowWidth < 840) {
-        newBreakpoint = 2;
+        return 2;
       } else if (this.windowWidth < 960 - SCROLL_BAR) {
-        newBreakpoint = 3;
+        return 3;
       } else if (this.windowWidth < 1280 - SCROLL_BAR) {
-        newBreakpoint = 4;
+        return 4;
       } else if (this.windowWidth < 1440 - SCROLL_BAR) {
-        newBreakpoint = 5;
+        return 5;
       } else if (this.windowWidth < 1600 - SCROLL_BAR) {
-        newBreakpoint = 6;
+        return 6;
       } else {
-        newBreakpoint = 7;
-      }
-      if (this.windowBreakpoint !== newBreakpoint) {
-        this.windowBreakpoint = newBreakpoint;
+        return 7;
       }
     },
-  },
-  computed: {
     windowIsLarge() {
       return this.windowBreakpoint > 2;
     },
@@ -170,14 +161,10 @@ export default {
       if (this.windowIsSmall) {
         return 16;
       }
-      /*
-      commenting this logic out for now due to https://github.com/vuejs/vue/issues/8540
-
       // 16px when the smallest width of the device is < 600
       if (this.windowBreakpoint < 4 && Math.min(this.windowWidth, this.windowHeight) < 600) {
         return 16;
       }
-      */
       return 24;
     },
   },

kolibri/core/assets/test/views/k-grid.spec.js

@@ -28,17 +28,13 @@ describe('KGrid component', () => {
     expect(getGrid(wrapper).element.style['margin-left']).toEqual('-8px');
     expect(getGrid(wrapper).element.style['margin-right']).toEqual('-8px');
   });
-  /*
-  Removing this test until functionality is re-enabled in responsive-window
-
   it('grid should have a -8px offset on wide, short screens', () => {
     const wrapper = makeWrapper({ propsData: {} });
     wrapper.vm._updateWindow({ width: 900, height: 500 });
     expect(wrapper.vm.actualGutterSize).toEqual(16);
     expect(getGrid(wrapper).element.style['margin-left']).toEqual('-8px');
     expect(getGrid(wrapper).element.style['margin-right']).toEqual('-8px');
   });
-  */
   it('grid should have a -5px offset when 10px gutters are specified', () => {
     const wrapper = makeWrapper({ propsData: { gutter: 10 } });
     expect(wrapper.vm.actualGutterSize).toEqual(10);

package.json

@@ -52,7 +52,7 @@
     "seededshuffle": "^0.1.1",
     "shave": "^2.1.3",
     "typeface-noto-sans": "^0.0.54",
-    "vue": "^2.3.3",
+    "vue": "2.5.17-beta.0",
     "vue-intl": "2.1.1",
     "vue-markdown": "^2.1.3",
     "vue-meta": "^1.5.0",
@@ -122,7 +122,7 @@
     "vue-jest": "^2.6.0",
     "vue-loader": "15.0.0",
     "vue-style-loader": "^3.0.3",
-    "vue-template-compiler": "^2.3.3",
+    "vue-template-compiler": "^2.5.17-beta.0",
     "webpack": "^4.6.0",
     "webpack-bundle-size-analyzer": "^2.0.2",
     "webpack-bundle-tracker": "https://github.com/learningequality/webpack-bundle-tracker",

yarn.lock

@@ -9791,9 +9791,9 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.3.3:
-  version "2.5.16"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.16.tgz#93b48570e56c720cdf3f051cc15287c26fbd04cb"
+vue-template-compiler@^2.5.17-beta.0:
+  version "2.5.17-beta.0"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.17-beta.0.tgz#6653d4029bd6fc427de616ce626e7f1db63e615c"
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -9802,9 +9802,9 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue@^2.3.3:
-  version "2.5.16"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
+vue@2.5.17-beta.0:
+  version "2.5.17-beta.0"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17-beta.0.tgz#b9985447818827306beee146923a1bd64f1bb834"
 
 [email protected]:
   version "3.0.1"