modernize js and use babel (#8973)

* modernize js and use babel

- add babel toolchain to transform modern JS to ES5
- extend eslint config for modern rules
- fixes linting issues via `eslint --fix` and manual fixes

* run 'make css' to satisfy CI

* code style tweaks and set js indendation to 2 in .editorconfig

* regenerate js

.editorconfig

@@ -24,7 +24,7 @@ indent_size = 2
 
 [*.js]
 indent_style = space
-indent_size = 4
+indent_size = 2
 
 [Makefile]
 indent_style = tab

.eslintrc

@@ -1,28 +1,51 @@
 root: true
 
 extends:
+  - eslint-config-airbnb-base
   - eslint:recommended
 
 parserOptions:
-  ecmaVersion: 2015
+  ecmaVersion: 2020
 
 env:
   browser: true
-  jquery: true
   es6: true
+  jquery: true
   node: true
 
 globals:
   Clipboard: false
   CodeMirror: false
-  emojify: false
-  SimpleMDE: false
-  Vue: false
   Dropzone: false
-  u2fApi: false
+  emojify: false
   hljs: false
+  SimpleMDE: false
+  u2fApi: false
+  Vue: false
 
 rules:
-  no-unused-vars: [error, {args: all, argsIgnorePattern: ^_, varsIgnorePattern: ^_, ignoreRestSiblings: true}]
+  camelcase: [0]
-  prefer-const: [2, {destructuring: all}]
+  comma-dangle: [2, only-multiline]
+  consistent-return: [0]
+  default-case: [0]
+  func-names: [0]
+  max-len: [0]
+  newline-per-chained-call: [0]
+  arrow-body-style: [0]
+  no-alert: [0]
+  no-continue: [0]
+  no-mixed-operators: [0]
+  no-multi-assign: [0]
+  no-new: [0]
+  no-param-reassign: [0]
+  no-plusplus: [0]
+  no-restricted-syntax: [0]
+  no-shadow: [0]
+  no-unused-vars: [2, {args: all, argsIgnorePattern: ^_, varsIgnorePattern: ^_, ignoreRestSiblings: true}]
+  no-use-before-define: [0]
   no-var: [2]
+  one-var-declaration-per-line: [0]
+  one-var: [0]
+  prefer-const: [2, {destructuring: all}]
+  prefer-destructuring: [0]
+  radix: [2, as-needed]

package.json

@@ -5,14 +5,21 @@
     "node": ">=8"
   },
   "devDependencies": {
-    "autoprefixer": "9.6.1",
+    "@babel/core": "7.7.2",
-    "eslint": "6.3.0",
+    "@babel/preset-env": "7.7.1",
+    "autoprefixer": "9.7.1",
+    "babel-loader": "8.0.6",
+    "core-js": "3.4.1",
+    "eslint": "6.6.0",
+    "eslint-config-airbnb-base": "14.0.0",
+    "eslint-plugin-import": "2.18.2",
     "less": "3.10.3",
     "less-plugin-clean-css": "1.5.1",
     "postcss-cli": "6.1.3",
-    "stylelint": "10.1.0",
+    "stylelint": "11.1.1",
-    "stylelint-config-standard": "18.3.0",
+    "stylelint-config-standard": "19.0.0",
-    "updates": "8.5.3",
+    "terser-webpack-plugin": "2.2.1",
+    "updates": "9.0.1",
     "webpack": "4.41.2",
     "webpack-cli": "3.3.10"
   },

public/css/index.css

@@ -73,7 +73,7 @@ a{cursor:pointer}
 .right.stackable.menu{margin-left:auto;display:flex;align-items:inherit;flex-direction:inherit}
 .ui.left{float:left}
 .ui.right{float:right}
-.ui.button,.ui.menu .item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}
+.ui.button,.ui.menu .item{-webkit-user-select:auto;-ms-user-select:auto;user-select:auto}
 .ui.container.fluid.padded{padding:0 10px 0 10px}
 .ui.form .ui.button{font-weight:400}
 .ui.floating.label{z-index:10}
@@ -233,14 +233,14 @@ i.icons .icon:first-child{margin-right:0}
 i.icon.centerlock{top:1.5em}
 .ui.label>.detail .icons{margin-right:.25em}
 .ui.label>.detail .icons .icon{margin-right:0}
-.lines-num{vertical-align:top;text-align:right!important;color:#999;background:#f5f5f5;width:1%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.lines-num{vertical-align:top;text-align:right!important;color:#999;background:#f5f5f5;width:1%;-webkit-user-select:none;-ms-user-select:none;user-select:none}
 .lines-num span:before{content:attr(data-line-number);line-height:20px!important;padding:0 10px;cursor:pointer;display:block}
 .lines-code,.lines-num{padding:0!important}
 .lines-code .hljs,.lines-code ol,.lines-code pre,.lines-num .hljs,.lines-num ol,.lines-num pre{background-color:#fff;margin:0;padding:0!important}
 .lines-code .hljs li,.lines-code ol li,.lines-code pre li,.lines-num .hljs li,.lines-num ol li,.lines-num pre li{display:block;width:100%}
 .lines-code .hljs li:before,.lines-code ol li:before,.lines-code pre li:before,.lines-num .hljs li:before,.lines-num ol li:before,.lines-num pre li:before{content:' '}
-.lines-commit{vertical-align:top;color:#999;padding:0!important;background:#f5f5f5;width:1%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
+.lines-commit{vertical-align:top;color:#999;padding:0!important;background:#f5f5f5;width:1%;-ms-user-select:none;-webkit-user-select:none;user-select:none}
-.lines-commit .blame-info{width:350px;max-width:350px;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 0 0 10px}
+.lines-commit .blame-info{width:350px;max-width:350px;display:block;-webkit-user-select:none;-ms-user-select:none;user-select:none;padding:0 0 0 10px}
 .lines-commit .blame-info .blame-data{display:flex;font-family:-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,Helvetica,Arial}
 .lines-commit .blame-info .blame-data .blame-message{flex-grow:2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:20px}
 .lines-commit .blame-info .blame-data .blame-avatar,.lines-commit .blame-info .blame-data .blame-time{flex-shrink:0}
@@ -333,7 +333,7 @@ i.icon.centerlock{top:1.5em}
 .repository.wiki.revisions .ui.container>.ui.stackable.grid>.header{margin-top:0}
 .repository.wiki.revisions .ui.container>.ui.stackable.grid>.header .sub.header{padding-left:52px;word-break:break-word}
 .file-revisions-btn{display:block;float:left;margin-bottom:2px!important;padding:11px!important;margin-right:10px!important}
-.file-revisions-btn i{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.file-revisions-btn i{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}
 .home .logo{max-width:220px}
 @media only screen and (max-width:767px){.home .hero h1{font-size:3.5em}
 .home .hero h2{font-size:2em}
@@ -687,7 +687,7 @@ i.icon.centerlock{top:1.5em}
 .repository .diff-box .header .file{flex:1;color:#888;word-break:break-all}
 .repository .diff-box .header .button{margin:-5px 0 -5px 12px;padding:8px 10px;flex:0 0 auto}
 .repository .diff-file-box .header{background-color:#f7f7f7}
-.repository .diff-file-box .file-body.file-code .lines-num{text-align:right;color:#a6a6a6;background:#fafafa;width:1%;min-width:50px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top}
+.repository .diff-file-box .file-body.file-code .lines-num{text-align:right;color:#a6a6a6;background:#fafafa;width:1%;min-width:50px;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top}
 .repository .diff-file-box .file-body.file-code .lines-num span.fold{display:block;text-align:center}
 .repository .diff-file-box .file-body.file-code .lines-num-old{border-right:1px solid #ddd}
 .repository .diff-file-box .code-diff{font-size:12px}
@@ -698,7 +698,7 @@ i.icon.centerlock{top:1.5em}
 .repository .diff-file-box .code-diff tbody tr .removed-code{background-color:#f99}
 .repository .diff-file-box .code-diff tbody tr .added-code{background-color:#9f9}
 .repository .diff-file-box .code-diff tbody tr [data-line-num]::before{content:attr(data-line-num);text-align:right}
-.repository .diff-file-box .code-diff tbody tr .lines-type-marker{width:10px;min-width:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.repository .diff-file-box .code-diff tbody tr .lines-type-marker{width:10px;min-width:10px;-webkit-user-select:none;-ms-user-select:none;user-select:none}
 .repository .diff-file-box .code-diff tbody tr [data-type-marker]::before{content:attr(data-type-marker);text-align:right;display:inline-block}
 .repository .diff-file-box .code-diff-unified tbody tr.del-code td{background-color:#ffe0e0!important;border-color:#f1c0c0!important}
 .repository .diff-file-box .code-diff-unified tbody tr.add-code td{background-color:#d6fcd6!important;border-color:#c1e9c1!important}

public/css/theme-arc-green.css

@@ -14,7 +14,7 @@ body{background:#383c4a;color:#9e9e9e}
 *{scrollbar-width:thin;scrollbar-color:#87ab63 rgba(255,255,255,.1)}
 ::-webkit-scrollbar{-webkit-appearance:none!important;width:10px!important;height:10px!important}
 ::-webkit-scrollbar-track{border-radius:0!important;background:rgba(255,255,255,.1)!important}
-::-webkit-scrollbar-thumb{cursor:pointer!important;border-radius:5px!important;transition:color .2s ease!important;background:#87ab63!important}
+::-webkit-scrollbar-thumb{cursor:pointer!important;border-radius:5px!important;-webkit-transition:color .2s ease!important;transition:color .2s ease!important;background:#87ab63!important}
 ::-webkit-scrollbar-thumb:window-inactive{background:#87ab63!important}
 ::-webkit-scrollbar-thumb:hover{background:#87ab63!important}
 a{color:#87ab63}

webpack.config.js

@@ -9,12 +9,34 @@ module.exports = {
   devtool: 'source-map',
   output: {
     path: path.resolve(__dirname, 'public/js'),
-    filename: "[name].js"
+    filename: '[name].js'
   },
   optimization: {
     minimize: true,
     minimizer: [new TerserPlugin({
-        sourceMap: true
+      sourceMap: true,
-     })],
+    })],
   },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  useBuiltIns: 'entry',
+                  corejs: 3,
+                }
+              ]
+            ]
+          }
+        }
+      }
+    ]
+  }
 };