Revert "Babel: use babel-loader instead of ts-loader, ng-annotate with babel-plugin-angularjs-annotate (grafana#21554)" (grafana#21570)

This reverts grafana#21554 which caused problems with e2e.
This reverts commit e7e0d18.

Author: dprokop

package.json

@@ -9,13 +9,11 @@
     "url": "http://github.com/grafana/grafana.git"
   },
   "devDependencies": {
-    "@babel/core": "7.8.3",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.3",
-    "@babel/plugin-proposal-optional-chaining": "7.8.3",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
+    "@babel/core": "7.6.4",
+    "@babel/plugin-syntax-dynamic-import": "7.2.0",
     "@babel/preset-env": "7.6.3",
     "@babel/preset-react": "7.6.3",
-    "@babel/preset-typescript": "7.8.3",
+    "@babel/preset-typescript": "7.6.0",
     "@emotion/core": "10.0.10",
     "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
     "@testing-library/react-hooks": "^3.2.1",
@@ -107,6 +105,8 @@
     "mocha": "4.1.0",
     "module-alias": "2.2.0",
     "monaco-editor": "0.15.6",
+    "ng-annotate-loader": "0.6.1",
+    "ng-annotate-webpack-plugin": "0.3.0",
     "ngtemplate-loader": "2.0.1",
     "node-sass": "4.12.0",
     "npm": "6.13.4",

packages/grafana-ui/src/components/Select/Select.tsx

@@ -6,6 +6,8 @@ import React, { PureComponent } from 'react';
 // @ts-ignore
 import { default as ReactSelect, Creatable } from '@torkelo/react-select';
 // @ts-ignore
+import { Creatable } from '@torkelo/react-select/lib/creatable';
+// @ts-ignore
 import { default as ReactAsyncSelect } from '@torkelo/react-select/lib/Async';
 // @ts-ignore
 import { components } from '@torkelo/react-select';

scripts/webpack/webpack.dev.js

@@ -27,99 +27,73 @@ module.exports = (env = {}) =>
     },
 
     module: {
-      rules: [
+      rules: [{
+          test: /\.tsx?$/,
+          enforce: 'pre',
+          exclude: /node_modules/,
+          use: {
+            loader: 'tslint-loader',
+            options: {
+              emitErrors: true,
+              typeCheck: false,
+            }
+          }
+        },
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: {
-                cacheDirectory: true,
-                babelrc: false,
-                // Note: order is top-to-bottom and/or left-to-right
-                plugins: [
-                  [
-                    require('@rtsao/plugin-proposal-class-properties'),
-                    {
-                      loose: true,
-                    },
-                  ],
-                  '@babel/plugin-proposal-nullish-coalescing-operator',
-                  '@babel/plugin-proposal-optional-chaining',
-                  '@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
-                  'angularjs-annotate',
-                ],
-                // Note: order is bottom-to-top and/or right-to-left
-                presets: [
-                  [
-                    '@babel/preset-env',
-                    {
-                      targets: {
-                        browsers: 'last 3 versions',
-                      },
-                      useBuiltIns: 'entry',
-                      modules: false,
-                    },
-                  ],
-                  '@babel/preset-typescript',
-                  '@babel/preset-react',
-                ],
-              },
+          use: {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true
             },
-            {
-              loader: 'tslint-loader',
-              options: {
-                emitErrors: true,
-                typeCheck: false,
-              },
-            },
-          ],
+          },
         },
         require('./sass.rule.js')({
           sourceMap: false,
-          preserveUrl: false,
+          preserveUrl: false
         }),
         {
           test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
-          loader: 'file-loader',
+          loader: 'file-loader'
         },
-      ],
+      ]
     },
 
     plugins: [
       new CleanWebpackPlugin(),
-      env.noTsCheck
-        ? new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
-        : new ForkTsCheckerWebpackPlugin({
-            checkSyntacticErrors: true,
-          }),
+      env.noTsCheck ?
+      new webpack.DefinePlugin({}) // bogus plugin to satisfy webpack API
+      :
+      new ForkTsCheckerWebpackPlugin({
+        checkSyntacticErrors: true,
+      }),
       new MiniCssExtractPlugin({
-        filename: 'grafana.[name].[hash].css',
+        filename: 'grafana.[name].[hash].css'
       }),
       new HtmlWebpackPlugin({
         filename: path.resolve(__dirname, '../../public/views/error.html'),
         template: path.resolve(__dirname, '../../public/views/error-template.html'),
         inject: false,
         chunksSortMode: 'none',
-        excludeChunks: ['dark', 'light'],
+        excludeChunks: ['dark', 'light']
       }),
       new HtmlWebpackPlugin({
         filename: path.resolve(__dirname, '../../public/views/index.html'),
         template: path.resolve(__dirname, '../../public/views/index-template.html'),
         inject: false,
         chunksSortMode: 'none',
-        excludeChunks: ['dark', 'light'],
+        excludeChunks: ['dark', 'light']
       }),
       new webpack.NamedModulesPlugin(),
       new webpack.HotModuleReplacementPlugin(),
       new webpack.DefinePlugin({
         'process.env': {
-          NODE_ENV: JSON.stringify('development'),
-        },
+          NODE_ENV: JSON.stringify('development')
+        }
       }),
       // new BundleAnalyzerPlugin({
       //   analyzerPort: 8889
       // })
-    ],
+    ]
   });

scripts/webpack/webpack.hot.js

@@ -7,7 +7,7 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
-const IgnoreNotFoundExportPlugin = require('./IgnoreNotFoundExportPlugin.js');
+const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js");
 
 module.exports = merge(common, {
   mode: 'development',
@@ -36,56 +36,50 @@ module.exports = merge(common, {
       '!/public/build': 'http://localhost:3000',
     },
     watchOptions: {
-      ignored: /node_modules/,
-    },
+      ignored: /node_modules/
+    }
   },
 
   optimization: {
     removeAvailableModules: false,
     runtimeChunk: false,
     removeEmptyChunks: false,
-    splitChunks: false,
+    splitChunks: false
   },
 
   module: {
-    rules: [
-      {
+    rules: [{
         test: /\.tsx?$/,
         exclude: /node_modules/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              cacheDirectory: true,
-              babelrc: false,
-              plugins: [
-                [
-                  require('@rtsao/plugin-proposal-class-properties'),
-                  {
-                    loose: true,
+        use: [{
+          loader: 'babel-loader',
+          options: {
+            cacheDirectory: true,
+            babelrc: false,
+            plugins: [
+              [require('@rtsao/plugin-proposal-class-properties'), {
+                loose: true
+              }],
+              'angularjs-annotate',
+              '@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
+              'react-hot-loader/babel',
+            ],
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: {
+                    browsers: 'last 3 versions'
                   },
-                ],
-                'angularjs-annotate',
-                '@babel/plugin-syntax-dynamic-import', // needed for `() => import()` in routes.ts
-                'react-hot-loader/babel',
+                  useBuiltIns: 'entry',
+                  modules: false
+                },
               ],
-              presets: [
-                [
-                  '@babel/preset-env',
-                  {
-                    targets: {
-                      browsers: 'last 3 versions',
-                    },
-                    useBuiltIns: 'entry',
-                    modules: false,
-                  },
-                ],
-                '@babel/preset-typescript',
-                '@babel/preset-react',
-              ],
-            },
+              '@babel/preset-typescript',
+              '@babel/preset-react',
+            ],
           },
-        ],
+        }, ],
       },
       {
         test: /\.scss$/,
@@ -96,13 +90,13 @@ module.exports = merge(common, {
             loader: 'postcss-loader',
             options: {
               config: {
-                path: __dirname + '/postcss.config.js',
+                path: __dirname + '/postcss.config.js'
               },
             },
           },
           {
-            loader: 'sass-loader',
-          },
+            loader: 'sass-loader'
+          }
         ],
       },
       {
@@ -119,7 +113,7 @@ module.exports = merge(common, {
       template: path.resolve(__dirname, '../../public/views/index-template.html'),
       inject: 'body',
       alwaysWriteToDisk: true,
-      chunksSortMode: 'none',
+      chunksSortMode: 'none'
     }),
     new HtmlWebpackHarddiskPlugin(),
     new webpack.NamedModulesPlugin(),