IE11 compatibility fixes

kolibri/core/package.json

@@ -9,7 +9,7 @@
     "@vueuse/core": "^4.11.1",
     "axios": "^0.19.2",
     "clipboard": "^2.0.1",
-    "core-js": "^3.2.1",
+    "core-js": "^3.13",
     "csv-generator-client": "^2.1.1",
     "date-fns": "^1.28.2",
     "fontfaceobserver": "^2.0.13",

kolibri/plugins/learn/assets/src/modules/topicsRoot/handlers.js

@@ -58,12 +58,15 @@ export function showChannels(store) {
               });
             });
 
-        // Whether we've updated the rootNodes with progress or not, we need to updat the store
-        Promise.all(progressPromises).finally(() => {
+        // Whether we've updated the rootNodes with progress or not, we need to update the store
+        const updateStore = () => {
           store.commit('topicsRoot/SET_STATE', { rootNodes });
           store.commit('CORE_SET_PAGE_LOADING', false);
           store.commit('CORE_SET_ERROR', null);
-        });
+        };
+        Promise.all(progressPromises)
+          .then(updateStore)
+          .catch(updateStore);
       });
     },
     error => {

package.json

@@ -60,5 +60,8 @@
   "engines": {
     "node": "10.x",
     "yarn": ">= 1.12.3"
-  }
+  },
+  "browserslist": [
+    "extends browserslist-config-kolibri"
+  ]
 }

packages/browserslist-config-kolibri/index.js

@@ -0,0 +1,21 @@
+module.exports = [
+  // Exclude the following because their market share is no > 0.1%
+  // Baidu for Baidu Browser.
+  // BlackBerry or bb for Blackberry browser.
+  // kaios for KaiOS Browser.
+  // OperaMobile or op_mob for Opera Mobile.
+  // We exclude OperaMini explicitly as it does not support basic functionality
+  'Android > 4.4.3',
+  'Chrome >= 49',
+  'ChromeAndroid >= 49',
+  'Edge >= 18',
+  'IE >= 11',
+  'Firefox >= 52',
+  'FirefoxAndroid >= 68',
+  'iOS >= 9.3',
+  'Opera >= 67',
+  'QQAndroid >= 10.4',
+  'Safari >= 11.1',
+  'Samsung >= 4',
+  'UCAndroid >= 12.12',
+];

packages/browserslist-config-kolibri/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "browserslist-config-kolibri",
+  "version": "0.13.0-dev.10",
+  "description": "Browsers list configuration for Kolibri",
+  "main": "index.js",
+  "repository": "github.com/learningequality/kolibri",
+  "author": "Learning Equality",
+  "license": "MIT",
+  "private": true
+}

packages/hashi/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: false,
+      },
+    ],
+  ],
+  plugins: ['@babel/plugin-proposal-object-rest-spread'],
+};

packages/hashi/compat.js

@@ -0,0 +1,13 @@
+// Eslint configuration to check browser compatibility
+module.exports = {
+  env: {
+    browser: true,
+  },
+  plugins: ['compat'],
+  rules: {
+    'compat/compat': 'error',
+  },
+  settings: {
+    polyfills: ['Object.values', 'Object.assign', 'Object.entries', 'array-includes', 'Promise'],
+  },
+};

packages/hashi/package.json

@@ -16,10 +16,14 @@
     "@babel/core": "^7.13.15",
     "@babel/preset-env": "^7.13.15",
     "babel-loader": "^8.2.2",
+    "eslint-plugin-compat": "^3.0.0",
     "webpack": "4.6.0",
     "webpack-cli": "^3.1.2"
   },
   "dependencies": {
-    "core-js": "^3.4.8"
-  }
+    "core-js": "3.13"
+  },
+  "browserslist": [
+    "extends browserslist-config-kolibri"
+  ]
 }

packages/hashi/src/iframe.js

@@ -1,3 +1,8 @@
+import 'core-js/es/array/includes';
+import 'core-js/es/object/assign';
+import 'core-js/es/object/entries';
+import 'core-js/es/object/values';
+import 'core-js/es/promise';
 import Hashi from './iframeClient';
 
 const hashi = new Hashi();

packages/hashi/webpack.config.js

@@ -47,6 +47,10 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
+        exclude: {
+          test: /(uuid|core-js)/,
+          not: [/\.(esm\.js|mjs)$/],
+        },
       },
     ],
   },

packages/kolibri-tools/jest.conf/index.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const apiSpecAliases = require('../lib/apiSpecExportTools').coreAliases();
-const babelConfig = require('../.babelrc.js');
+const babelConfig = require('../babel.config');
 
 const moduleNameMapper = {
   '^testUtils$': path.resolve(__dirname, './testUtils'),
@@ -28,7 +28,7 @@ module.exports = {
   moduleNameMapper,
   testURL: 'http://kolibri.time',
   transform: {
-    '^.+\\.js$': path.resolve(__dirname, './babel-jest-transform'),
+    '^.+\\.js$': 'babel-jest',
     '^.+\\.vue$': 'vue-jest',
   },
   transformIgnorePatterns: ['/node_modules/(?!(kolibri-tools|kolibri)/).*/'],

packages/kolibri-tools/jest.conf/setup.js

@@ -1,3 +1,4 @@
+import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom';
 import 'intl';
 import 'intl/locale-data/jsonp/en.js';

packages/kolibri-tools/lib/webpack.config.base.js

@@ -88,14 +88,16 @@ module.exports = (data, { mode = 'development', hot = false } = {}) => {
   const postCSSLoader = {
     loader: 'postcss-loader',
     options: {
-      config: { path: path.resolve(__dirname, '../postcss.config.js') },
+      postcssOptions: {
+        plugins: [['autoprefixer']],
+      },
       sourceMap: !production,
     },
   };
 
   const cssLoader = {
     loader: 'css-loader',
-    options: { minimize: production, sourceMap: !production },
+    options: { sourceMap: !production },
   };
 
   // for scss blocks

packages/kolibri-tools/package.json

@@ -20,18 +20,21 @@
     "@testing-library/jest-dom": "^5.11.0",
     "@vue/test-utils": "^1.0.3",
     "ast-traverse": "^0.1.1",
-    "autoprefixer": "^7.1.4",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^23.6.0",
+    "autoprefixer": "9.8.6",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^27.0.2",
+    "babel-loader": "^8.2.2",
+    "browserslist-config-kolibri": "0.13.0-dev.10",
     "check-node-version": "^3.3.0",
     "chokidar": "^2.0.4",
     "colors": "^1.1.2",
     "commander": "^2.9.0",
     "core-js": "3",
-    "css-loader": "^0.28.7",
+    "css-loader": "4.3.0",
     "csv-parse": "^4.14.1",
     "csv-parser": "^2.3.3",
     "csv-writer": "^1.3.0",
+    "del": "^6.0.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.9.0",
     "eslint-config-vue": "^2.0.2",
@@ -50,13 +53,14 @@
     "jest-serializer-vue": "^2.0.2",
     "json-loader": "^0.5.4",
     "launch-editor-middleware": "^2.2.1",
-    "mini-css-extract-plugin": "^0.4.0",
+    "mini-css-extract-plugin": "0.12.0",
     "mkdirp": "^0.5.1",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
-    "postcss-loader": "^2.0.6",
+    "postcss-loader": "4.3.0",
     "prettier": "^1.18.2",
     "query-ast": "^1.0.1",
+    "readline-sync": "^1.4.9",
     "rewire": "^2.5.2",
     "sass-loader": "^8.0.0",
     "scss-parser": "^1.0.0",
@@ -75,7 +79,7 @@
     "terser-webpack-plugin": "^1.2.2",
     "url-loader": "^1.0.1",
     "vue-compiler": "^4.2.0",
-    "vue-jest": "^3.0.0",
+    "vue-jest": "2.6.0",
     "vue-loader": "^15.7.0",
     "vue-style-loader": "^3.0.3",
     "vue-template-compiler": "^2.6.11",
@@ -93,14 +97,6 @@
     "node": "10.x",
     "npm": ">= 3"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.13.14",
-    "@babel/core": "^7.13.15",
-    "@babel/preset-env": "^7.13.15",
-    "babel-loader": "^8.2.2",
-    "del": "^6.0.0",
-    "readline-sync": "^1.4.9"
-  },
   "optionalDependencies": {
     "kolibri": "0.13.0-dev.10"
   }

packages/publish.js

@@ -23,7 +23,16 @@ versionTools.setVersion(path.resolve(__dirname, 'kolibri-tools/package.json'), v
 versionTools.setVersion(path.resolve(__dirname, 'eslint-plugin-kolibri/package.json'), version);
 
 /*
- * Step 4 - Set version of the kolibri-tools dev dependency
+ * Step 4 - Set version of the browserslist-config-kolibri package by the current Kolibri version
+ */
+
+versionTools.setVersion(
+  path.resolve(__dirname, 'browserslist-config-kolibri/package.json'),
+  version
+);
+
+/*
+ * Step 5 - Set version of the kolibri-tools dev dependency
  */
 
 versionTools.setDependencyVersion(
@@ -45,7 +54,8 @@ versionTools.setDependencyVersion(
 );
 
 /*
- * Step 6 - Set version of kolibri-tools' kolibri dependency and eslint-plugin-kolibri dependency
+ * Step 6 - Set version of kolibri-tools' kolibri dependency, eslint-plugin-kolibri dependency,
+ * and browserslist-config-kolibri dependency
  */
 
 versionTools.setDependencyVersion(
@@ -59,6 +69,21 @@ versionTools.setDependencyVersion(
   version
 );
 
+versionTools.setDependencyVersion(
+  'browserslist-config-kolibri',
+  path.resolve(__dirname, 'kolibri-tools/package.json'),
+  version
+);
+
+/*
+ * Step 7 - Set the version of hashi's browserslist-config-kolibri dependency
+ */
+versionTools.setDependencyVersion(
+  'browserslist-config-kolibri',
+  path.resolve(__dirname, 'hashi/package.json'),
+  version
+);
+
 // If the version is a prerelease use the 'next' tag to prevent auto upgrades, otherwise use latest.
 const tag = versionTools.isPrerelease(version) ? 'next' : 'latest';
 
@@ -72,6 +97,8 @@ function publishCommand(workspace) {
   });
 }
 
-['eslint-plugin-kolibri', 'kolibri', 'kolibri-tools'].forEach(publishCommand);
+['browserslist-config-kolibri', 'eslint-plugin-kolibri', 'kolibri', 'kolibri-tools'].forEach(
+  publishCommand
+);
 
 process.chdir(currentCwd);