Merge pull request #3117 from tchak/update-babel

Update webpacker (babel7)

.babelrc

@@ -1,28 +1,54 @@
 {
   "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        // See config/browser.rb
-        "browsers": [
-          "> 1%",
-          "Chrome >= 50",
-          "IE >= 11",
-          "Edge >= 14",
-          "Firefox >= 50",
-          "Opera >= 40",
-          "Safari >= 8",
-          "iOS >= 8"
-        ],
-        "uglify": true
-      },
-      "useBuiltIns": true
-    }]
+    [
+      "@babel/env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": [
+            "> 1%",
+            "Chrome >= 50",
+            "IE >= 11",
+            "Edge >= 14",
+            "Firefox >= 50",
+            "Opera >= 40",
+            "Safari >= 8",
+            "iOS >= 8"
+          ],
+          "uglify": true
+        },
+        "forceAllTransforms": true,
+        "useBuiltIns": "entry"
+      }
+    ]
   ],
-
   "plugins": [
-    "syntax-dynamic-import",
-    "transform-object-rest-spread",
-    ["transform-class-properties", { "spec": true }]
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-syntax-dynamic-import",
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      {
+        "useBuiltIns": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": false,
+        "regenerator": true
+      }
+    ],
+    [
+      "@babel/plugin-transform-regenerator",
+      {
+        "async": false
+      }
+    ],
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ]
   ]
 }

app/javascript/packs/application-old.js

@@ -1,9 +1,10 @@
 import '../shared/polyfills';
 import Turbolinks from 'turbolinks';
 import Rails from 'rails-ujs';
-import ActiveStorage from '../shared/activestorage/ujs';
+import * as ActiveStorage from 'activestorage';
 import jQuery from 'jquery';
 
+import '../shared/activestorage/progress';
 import '../shared/sentry';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';

app/javascript/packs/application.js

@@ -1,10 +1,11 @@
 import '../shared/polyfills';
 import Turbolinks from 'turbolinks';
 import Rails from 'rails-ujs';
-import ActiveStorage from '../shared/activestorage/ujs';
+import * as ActiveStorage from 'activestorage';
 import Chartkick from 'chartkick';
 import Highcharts from 'highcharts';
 
+import '../shared/activestorage/progress';
 import '../shared/sentry';
 import '../shared/rails-ujs-fix';
 import '../shared/safari-11-file-xhr-workaround';

app/javascript/packs/mailjet.js

@@ -1,7 +1,7 @@
 // Include runtime-polyfills for older browsers.
 // Due to .babelrc's 'useBuiltIns', only polyfills actually
 // required by the browsers we support will be included.
-import 'babel-polyfill';
+import '@babel/polyfill';
 
 // This file is copied from mailjet. We serve here a copy of it ourselves
 // to avoid loading javascript files from other domains on the frontpage.

app/javascript/shared/activestorage/ujs.js

@@ -1,105 +0,0 @@
-import { DirectUploadsController } from 'activestorage/src/direct_uploads_controller';
-import { findElement } from 'activestorage/src/helpers';
-import './progress';
-
-// This is a patched copy of https://github.com/rails/rails/blob/master/activestorage/app/javascript/activestorage/ujs.js
-// It fixes support for multiple input/button elements on direct upload forms
-
-const processingAttribute = 'data-direct-uploads-processing';
-let started = false;
-
-export function start() {
-  if (!started) {
-    started = true;
-    document.addEventListener('submit', didSubmitForm);
-    document.addEventListener('click', didSubmitFormElement);
-    document.addEventListener('ajax:before', didSubmitRemoteElement);
-  }
-}
-
-export default { start };
-
-function didSubmitForm(event) {
-  handleFormSubmissionEvent(event);
-}
-
-function didSubmitFormElement(event) {
-  const { target } = event;
-  if (isSubmitElement(target)) {
-    handleFormSubmissionEvent(formSubmitEvent(event), target);
-  }
-}
-
-function didSubmitRemoteElement(event) {
-  if (event.target.tagName == 'FORM') {
-    handleFormSubmissionEvent(event);
-  }
-}
-
-function formSubmitEvent(event) {
-  return {
-    target: event.target.form,
-    preventDefault() {
-      event.preventDefault();
-    }
-  };
-}
-
-function isSubmitElement({ tagName, type, form }) {
-  if (form && (tagName === 'BUTTON' || tagName === 'INPUT')) {
-    return type === 'submit';
-  }
-  return false;
-}
-
-function handleFormSubmissionEvent(event, button) {
-  const form = event.target;
-
-  if (form.hasAttribute(processingAttribute)) {
-    event.preventDefault();
-    return;
-  }
-
-  const controller = new DirectUploadsController(form);
-  const { inputs } = controller;
-
-  if (inputs.length) {
-    event.preventDefault();
-    form.setAttribute(processingAttribute, '');
-    inputs.forEach(disable);
-    controller.start(error => {
-      form.removeAttribute(processingAttribute);
-      if (error) {
-        inputs.forEach(enable);
-      } else {
-        submitForm(form, button);
-      }
-    });
-  }
-}
-
-function submitForm(form, button) {
-  button = button || findElement(form, 'input[type=submit]');
-  if (button) {
-    const { disabled } = button;
-    button.disabled = false;
-    button.focus();
-    button.click();
-    button.disabled = disabled;
-  } else {
-    button = document.createElement('input');
-    button.type = 'submit';
-    button.style.display = 'none';
-    form.appendChild(button);
-    button.click();
-    form.removeChild(button);
-  }
-}
-
-function disable(input) {
-  input.disabled = true;
-}
-
-function enable(input) {
-  input.disabled = false;
-}

app/javascript/shared/polyfills.js

@@ -1,5 +1,5 @@
 // Include runtime-polyfills for older browsers.
 // Due to .babelrc's 'useBuiltIns', only polyfills actually
 // required by the browsers we support will be included.
-import 'babel-polyfill';
+import '@babel/polyfill';
 import 'dom4';

config/webpack/environment.js

@@ -1,20 +1,6 @@
 const path = require('path');
 const { environment } = require('@rails/webpacker');
 
-// By default don't transpile JS files in ./node_modules – except for some specific modules.
-const babelLoader = environment.loaders.get('babel');
-babelLoader.exclude = function(modulePath) {
-  let forcedModules = [
-    'activestorage' // ActiveStorage uses 'class', which is not supported by IE 11 and older Safari version
-  ];
-  return (
-    modulePath.includes('node_modules') &&
-    forcedModules.every(
-      forcedModule => !modulePath.includes('node_modules/' + forcedModule)
-    )
-  );
-};
-
 const resolve = {
   alias: {
     '@utils': path.resolve(__dirname, '..', '..', 'app/javascript/shared/utils')

package.json

@@ -1,9 +1,9 @@
 {
   "dependencies": {
-    "@rails/webpacker": "4.0.0-pre.2",
+    "@rails/webpacker": "4.0.0-pre.3",
     "@sentry/browser": "^4.0.4",
     "@turf/area": "^6.0.1",
-    "activestorage": "^5.2.1",
+    "activestorage": "^5.2.2-rc1",
     "autocomplete.js": "^0.31.0",
     "chartkick": "^3.0.1",
     "debounce": "^1.2.0",
@@ -19,10 +19,10 @@
   },
   "devDependencies": {
     "eclint": "^2.8.0",
-    "eslint": "^5.6.0",
-    "eslint-config-prettier": "^3.1.0",
-    "eslint-plugin-prettier": "^2.6.2",
-    "prettier": "^1.14.3",
+    "eslint": "^5.9.0",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-plugin-prettier": "^3.0.0",
+    "prettier": "^1.15.3",
     "webpack-dev-server": "^3.1.9"
   },
   "scripts": {