JS tooling: upgrade to babel 7

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+		  "targets": { "browsers": "last 3 versions" },
+		  "useBuiltIns": "entry"
+      }
+    ]
+  ]
+}

package.json

@@ -10,6 +10,12 @@
     "url": "http://github.com/grafana/grafana.git"
   },
   "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.1.0",
     "@types/d3": "^4.10.1",
     "@types/enzyme": "^3.1.13",
     "@types/jest": "^23.3.2",
@@ -21,10 +27,10 @@
     "angular-mocks": "1.6.6",
     "autoprefixer": "^6.4.0",
     "axios": "^0.17.1",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "babel-preset-es2015": "^6.24.1",
+    "babel-core": "^7.0.0-bridge",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-angularjs-annotate": "^0.9.0",
     "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^0.28.7",
     "enzyme": "^3.6.0",
@@ -128,13 +134,12 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
+    "@babel/polyfill": "^7.0.0",
     "angular": "1.6.6",
     "angular-bindonce": "0.3.1",
     "angular-native-dragdrop": "1.2.2",
     "angular-route": "1.6.6",
     "angular-sanitize": "1.6.6",
-    "babel-jest": "^23.6.0",
-    "babel-polyfill": "^6.26.0",
     "baron": "^3.0.3",
     "brace": "^0.10.0",
     "classnames": "^2.2.5",

public/app/app.ts

@@ -1,4 +1,4 @@
-import 'babel-polyfill';
+import '@babel/polyfill';
 import 'file-saver';
 import 'lodash';
 import 'jquery';

public/app/features/teams/CreateTeamCtrl.ts

@@ -1,6 +1,6 @@
 import coreModule from 'app/core/core_module';
 
-export default class CreateTeamCtrl {
+export class CreateTeamCtrl {
   name: string;
   email: string;
   navModel: any;

public/test/index.ts

@@ -2,7 +2,7 @@
 // context.keys().forEach(context);
 // module.exports = context;
 
-import 'babel-polyfill';
+import '@babel/polyfill';
 import 'jquery';
 import angular from 'angular';
 import 'angular-mocks';

scripts/webpack/webpack.hot.js

@@ -4,22 +4,19 @@ const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
 const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 module.exports = merge(common, {
   entry: {
-    app: [
-      'webpack-dev-server/client?http://localhost:3333',
-      './public/app/dev.ts',
-    ],
+    app: ['webpack-dev-server/client?http://localhost:3333', './public/app/dev.ts'],
   },
 
   output: {
     path: path.resolve(__dirname, '../../public/build'),
     filename: '[name].[hash].js',
-    publicPath: "/public/build/",
+    publicPath: '/public/build/',
     pathinfo: false,
   },
 
@@ -34,8 +31,8 @@ module.exports = merge(common, {
     hot: true,
     port: 3333,
     proxy: {
-      '!/public/build': 'http://localhost:3000'
-    }
+      '!/public/build': 'http://localhost:3000',
+    },
   },
 
   optimization: {
@@ -49,38 +46,46 @@ module.exports = merge(common, {
       {
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: [{
-          loader: 'babel-loader',
-          options: {
-            cacheDirectory: true,
-            babelrc: false,
-            plugins: [
-              'syntax-dynamic-import',
-              'react-hot-loader/babel'
-            ]
-          }
-        },
-        {
-          loader: 'ts-loader',
-          options: {
-            transpileOnly: true,
-            experimentalWatchApi: true
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              cacheDirectory: true,
+              babelrc: false,
+              plugins: [
+                [require('@rtsao/plugin-proposal-class-properties'), { loose: true }],
+                'angularjs-annotate',
+                'syntax-dynamic-import', // needed for `() => import()` in routes.ts
+                'react-hot-loader/babel',
+              ],
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    targets: { browsers: 'last 3 versions' },
+                    useBuiltIns: 'entry',
+                  },
+                ],
+                '@babel/preset-typescript',
+                '@babel/preset-react',
+              ],
+            },
           },
-        }],
+        ],
       },
       {
         test: /\.scss$/,
         use: [
-          "style-loader", // creates style nodes from JS strings
-          "css-loader", // translates CSS into CommonJS
-          "sass-loader" // compiles Sass to CSS
-        ]
+          'style-loader', // creates style nodes from JS strings
+          'css-loader', // translates CSS into CommonJS
+          'sass-loader', // compiles Sass to CSS
+        ],
       },
       {
         test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-        loader: 'file-loader'
+        loader: 'file-loader',
       },
-    ]
+    ],
   },
 
   plugins: [
@@ -89,16 +94,16 @@ module.exports = merge(common, {
       filename: path.resolve(__dirname, '../../public/views/index.html'),
       template: path.resolve(__dirname, '../../public/views/index-template.html'),
       inject: 'body',
-      alwaysWriteToDisk: true
+      alwaysWriteToDisk: true,
     }),
     new HtmlWebpackHarddiskPlugin(),
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
-      'GRAFANA_THEME': JSON.stringify(process.env.GRAFANA_THEME || 'dark'),
+      GRAFANA_THEME: JSON.stringify(process.env.GRAFANA_THEME || 'dark'),
       'process.env': {
-        'NODE_ENV': JSON.stringify('development')
-      }
+        NODE_ENV: JSON.stringify('development'),
+      },
     }),
-  ]
+  ],
 });