DEV: updates js transpiler to use babel 7 (#10627)

Updates our js transpiler code to use Babel 7.11.6

List of changes in this commit:

- Updates plugins, babel plugins all have a new version which doesn't contain -es2015- anymore
- Drops [transform-es2015-classes](https://babeljs.io/docs/en/babel-plugin-transform-classes) this plugin shouldn't be needed now that we don't support IE
- Drops check-es2015-constants, checking constants is now part of babel and the check-constants plugin is deprecated. As a result the behavior slightly changed, and is now wrapping every const call in a readOnlyError function which would throw if assigned a new value. This explains the modified spec.
- Adds [proposal-optional-chaining](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining)

```javascript
const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42
```

- Adds [proposal-json-strings](https://babeljs.io/docs/en/babel-plugin-proposal-json-strings)

```javascript
// IN
const ex = "before
after";
//                ^ There's a U+2028 char between 'before' and 'after'


// OUT
const ex = "before\u2028after";
//                ^ There's a U+2028 char between 'before' and 'after'
```

- Adds [proposal-nullish-coalescing-operator](https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator)

```javascript
var object = {};
var foo = object.foo ?? "default"; // default
```

- Adds [proposal-logical-assignment-operators](https://babeljs.io/docs/en/babel-plugin-proposal-logical-assignment-operators)

```javascript
let a;
let b = 2;
a ||= b; // 2
```

- Adds [proposal-numeric-separator](https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator)

```javascript
let budget = 1_000_000_000_000;
console.log(budget === 10 ** 12); // true
```

- Adds proposal-object-rest-spread https://babeljs.io/docs/en/babel-plugin-proposal-object-rest-spread

```javascript
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
```

- Adds proposal-optional-catch-binding https://babeljs.io/docs/en/babel-plugin-proposal-optional-catch-binding

```javascript
try {

} catch {

} finally {
  // ensures finally is available in every browsers
}
```

- Adds improved regex support for firefox through (transform-dotall-regex](https://babeljs.io/docs/en/next/babel-plugin-transform-dotall-regex.html) and (proposal-unicode-property-regex](https://babeljs.io/docs/en/babel-plugin-proposal-unicode-property-regex)

- Drops async/generator stuff, the browser we target should allow to use this (excepts iterable async)

lib/discourse_js_processor.rb

@@ -95,7 +95,7 @@ class DiscourseJsProcessor
 JS
       source = File.read("#{Rails.root}/lib/javascripts/widget-hbs-compiler.js")
       js_source = ::JSON.generate(source, quirks_mode: true)
-      js = ctx.eval("Babel.transform(#{js_source}, { ast: false, plugins: ['check-es2015-constants', 'transform-es2015-arrow-functions', 'transform-es2015-block-scoped-functions', 'transform-es2015-block-scoping', 'transform-es2015-classes', 'transform-es2015-computed-properties', 'transform-es2015-destructuring', 'transform-es2015-duplicate-keys', 'transform-es2015-for-of', 'transform-es2015-function-name', 'transform-es2015-literals', 'transform-es2015-object-super', 'transform-es2015-parameters', 'transform-es2015-shorthand-properties', 'transform-es2015-spread', 'transform-es2015-sticky-regex', 'transform-es2015-template-literals', 'transform-es2015-typeof-symbol', 'transform-es2015-unicode-regex'] }).code")
+      js = ctx.eval("Babel.transform(#{js_source}, { ast: false, plugins: ['transform-arrow-functions', 'transform-block-scoped-functions', 'transform-block-scoping', 'transform-computed-properties', 'transform-destructuring', 'transform-duplicate-keys', 'transform-for-of', 'transform-function-name', 'transform-literals', 'transform-object-super', 'transform-parameters', 'transform-shorthand-properties', 'transform-spread', 'transform-sticky-regex', 'transform-template-literals', 'transform-typeof-symbol', 'transform-unicode-regex'] }).code")
       ctx.eval(js)
 
       ctx
@@ -142,9 +142,9 @@ JS
 
       if opts[:module_name] && !@skip_module
         filename = opts[:filename] || 'unknown'
-        "Babel.transform(#{js_source}, { moduleId: '#{opts[:module_name]}', filename: '#{filename}', ast: false, presets: ['es2015'], plugins: [['transform-es2015-modules-amd', {noInterop: true}], 'transform-decorators-legacy', exports.WidgetHbsCompiler] }).code"
+        "Babel.transform(#{js_source}, { moduleId: '#{opts[:module_name]}', filename: '#{filename}', ast: false, presets: ['es2015'], plugins: [['transform-modules-amd', {noInterop: true}], ['proposal-decorators', {legacy: true} ], exports.WidgetHbsCompiler] }).code"
       else
-        "Babel.transform(#{js_source}, { ast: false, plugins: ['check-es2015-constants', 'transform-es2015-arrow-functions', 'transform-es2015-block-scoped-functions', 'transform-es2015-block-scoping', 'transform-es2015-classes', 'transform-es2015-computed-properties', 'transform-es2015-destructuring', 'transform-es2015-duplicate-keys', 'transform-es2015-for-of', 'transform-es2015-function-name', 'transform-es2015-literals', 'transform-es2015-object-super', 'transform-es2015-parameters', 'transform-es2015-shorthand-properties', 'transform-es2015-spread', 'transform-es2015-sticky-regex', 'transform-es2015-template-literals', 'transform-es2015-typeof-symbol', 'transform-es2015-unicode-regex', 'transform-regenerator', 'transform-decorators-legacy', exports.WidgetHbsCompiler] }).code"
+        "Babel.transform(#{js_source}, { ast: false, plugins: ['proposal-json-strings', 'proposal-nullish-coalescing-operator', 'proposal-logical-assignment-operators', 'proposal-numeric-separator', 'proposal-optional-catch-binding', 'transform-dotall-regex', 'proposal-unicode-property-regex', 'transform-named-capturing-groups-regex', 'proposal-object-rest-spread', 'proposal-optional-chaining', 'transform-arrow-functions', 'transform-block-scoped-functions', 'transform-block-scoping', 'transform-computed-properties', 'transform-destructuring', 'transform-duplicate-keys', 'transform-for-of', 'transform-function-name', 'transform-literals', 'transform-object-super', 'transform-parameters', 'transform-shorthand-properties', 'transform-spread', 'transform-sticky-regex', 'transform-template-literals', 'transform-typeof-symbol', 'transform-unicode-regex', ['proposal-decorators', {legacy: true}], exports.WidgetHbsCompiler] }).code"
       end
     end
 

spec/models/theme_field_spec.rb

@@ -186,14 +186,17 @@ HTML
     theme.save!
 
     expected_js = <<~JS
-      define("discourse/controllers/discovery", ["discourse/lib/ajax"], function () {
+      define("discourse/controllers/discovery", ["discourse/lib/ajax"], function (_ajax) {
         "use strict";
 
         var __theme_name__ = "#{theme.name}";
+
         var settings = Discourse.__container__.lookup("service:theme-settings").getObjectForTheme(#{theme.id});
+
         var themePrefix = function themePrefix(key) {
-          return "theme_translations.#{theme.id}." + key;
+          return "theme_translations.#{theme.id}.".concat(key);
         };
+
         console.log('hello from .js.es6');
       });
     JS

spec/models/theme_spec.rb

@@ -292,7 +292,7 @@ HTML
       expect(javascript_cache.content).to include("_registerPluginCode('0.1'")
     end
 
-    it "converts errors to a script type that is not evaluated" do
+    it "wraps constants calls in a readOnlyError function" do
       html = <<HTML
         <script type='text/discourse-plugin' version='0.1'>
           const x = 1;
@@ -302,8 +302,8 @@ HTML
 
       baked, javascript_cache = transpile(html)
       expect(baked).to include(javascript_cache.url)
-      expect(javascript_cache.content).to include('Theme Transpilation Error')
+      expect(javascript_cache.content).to include('var x = 1;')
-      expect(javascript_cache.content).to include('read-only')
+      expect(javascript_cache.content).to include('x = (_readOnlyError("x"), 2);')
     end
   end
 
@@ -380,16 +380,21 @@ HTML
       (function () {
         if ('Discourse' in window && typeof Discourse._registerPluginCode === 'function') {
           var __theme_name__ = "awesome theme\\\"";
+
           var settings = Discourse.__container__.lookup("service:theme-settings").getObjectForTheme(#{theme.id});
+
           var themePrefix = function themePrefix(key) {
-            return 'theme_translations.#{theme.id}.' + key;
+            return "theme_translations.#{theme.id}.".concat(key);
           };
 
           Discourse._registerPluginCode('1.0', function (api) {
             try {
-              alert(settings.name);var a = function a() {};
+              alert(settings.name);
+
+              var a = function a() {};
             } catch (err) {
               var rescue = require("discourse/lib/utilities").rescueThemeError;
+
               rescue(__theme_name__, err, api);
             }
           });
@@ -416,16 +421,21 @@ HTML
       (function () {
         if ('Discourse' in window && typeof Discourse._registerPluginCode === 'function') {
           var __theme_name__ = "awesome theme\\\"";
+
           var settings = Discourse.__container__.lookup("service:theme-settings").getObjectForTheme(#{theme.id});
+
           var themePrefix = function themePrefix(key) {
-            return 'theme_translations.#{theme.id}.' + key;
+            return "theme_translations.#{theme.id}.".concat(key);
           };
 
           Discourse._registerPluginCode('1.0', function (api) {
             try {
-              alert(settings.name);var a = function a() {};
+              alert(settings.name);
+
+              var a = function a() {};
             } catch (err) {
               var rescue = require("discourse/lib/utilities").rescueThemeError;
+
               rescue(__theme_name__, err, api);
             }
           });