Support IE11 on front end :(

Author: richie-blake

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env", {
+        "modules": false,
+        "useBuiltIns": "usage",
+        "corejs": "3"
+      }
+    ]
+  ],
+  "env": {
+    "test": {
+      "presets": [["@babel/preset-env"]]
+    }
+  },
+}

.browserslistrc

@@ -0,0 +1,12 @@
+# Browsers that we support
+
+> 99%
+last 2 versions
+last 5 Chrome versions
+last 5 Firefox versions
+last 5 Edge versions
+last 5 Safari versions
+Firefox ESR
+not op_mini all
+not ie < 10
+not dead

package-lock.json

@@ -9,6 +9,12 @@
     "clean": "rm -rf wagtail_advanced_form_builder/static"
   },
   "devDependencies": {
+    "core-js": "^3.6.5",
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "babel-loader": "^8.1.0",
+    "browserslist": "^4.12.0",
+    "cache-loader": "^4.1.0",
     "css-loader": "^3.3.2",
     "file-loader": "^5.0.2",
     "mini-css-extract-plugin": "^0.8.0",

package.json

@@ -16,7 +16,7 @@
 
 setup(
     name="wagtail-advanced-form-builder",
-    version="0.2.2",
+    version="0.2.3",
     description="Wagtail Advanced Form Builder",
     long_description=long_description,
     author="Richard Blake (Octave)",

setup.py

@@ -1,3 +1,21 @@
+if (!Element.prototype.matches) {
+  Element.prototype.matches =
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
+
 function findFieldsFromName(name, returnOneOnly = false) {
     const fields = document.getElementsByName(name);
     if (fields.length) {

wagtail_advanced_form_builder/static_src/wagtail_advanced_form_builder/js/formbuilder.js

@@ -7,6 +7,19 @@ const WebpackOnBuildPlugin = require('on-build-webpack');
 const entryPath = path.resolve(__dirname, 'wagtail_advanced_form_builder/static_src/wagtail_advanced_form_builder');
 const outputPath = path.resolve(__dirname, 'wagtail_advanced_form_builder/static/wagtail_advanced_form_builder');
 
+const configureBabelLoader = () => {
+    return {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+            'cache-loader',
+            {
+                loader: 'babel-loader',
+            },
+        ],
+    };
+};
+
 module.exports = {
   mode: 'production',
   entry: {
@@ -28,7 +41,8 @@ module.exports = {
           'css-loader',
           'sass-loader'
         ]
-      }
+      },
+      configureBabelLoader(),
     ]
   },
   plugins: [