Babel: Target more modern browsers, updates browserlistrc (#32573)

* Babel: Target more modern browsers, updates browserlistrc

* Updates

* Fixed circular dependencies, grafana booted

.babelrc

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

.browserslistrc

@@ -1,4 +1,15 @@
->1%,
-Chrome > 20
-last 4 versions,
-Firefox ESR
+[dev]
+last 1 chrome versions
+last 1 firefox versions
+last 1 safari versions
+
+[production]
+last 2 Firefox versions
+last 2 Chrome versions
+last 2 Safari versions
+last 2 Edge versions
+last 1 ios_saf versions
+last 1 and_chr versions
+last 1 samsung versions
+
+

package.json

@@ -67,13 +67,12 @@
   },
   "devDependencies": {
     "@babel/core": "7.13.14",
-    "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.13.8",
+    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
     "@babel/plugin-proposal-optional-chaining": "7.13.12",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-proposal-private-methods": "7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
+    "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-react-constant-elements": "7.13.13",
     "@babel/preset-env": "7.13.12",
     "@babel/preset-react": "7.13.13",
@@ -81,6 +80,7 @@
     "@grafana/api-documenter": "7.11.2",
     "@grafana/api-extractor": "7.10.1",
     "@grafana/eslint-config": "2.3.0",
+    "@rtsao/plugin-proposal-class-properties": "7.0.1-patch.1",
     "@testing-library/jest-dom": "5.11.5",
     "@testing-library/react": "11.1.2",
     "@testing-library/react-hooks": "^3.2.1",
@@ -203,6 +203,7 @@
     "zone.js": "0.7.8"
   },
   "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.13.10",
     "@emotion/core": "10.0.27",
     "@grafana/aws-sdk": "0.0.3",
     "@grafana/slate-react": "0.22.9-grafana",
@@ -222,7 +223,6 @@
     "@types/react-virtualized-auto-sizer": "1.0.0",
     "@types/uuid": "8.3.0",
     "@welldone-software/why-did-you-render": "4.0.6",
-    "history": "4.10.1",
     "abortcontroller-polyfill": "1.4.0",
     "angular": "1.8.2",
     "angular-bindonce": "0.3.1",
@@ -236,7 +236,7 @@
     "classnames": "2.2.6",
     "clipboard": "2.0.4",
     "common-tags": "^1.8.0",
-    "core-js": "3.6.4",
+    "core-js": "3.10.0",
     "d3": "5.15.0",
     "d3-force": "^2.1.1",
     "d3-scale-chromatic": "1.5.0",
@@ -247,6 +247,7 @@
     "fast-json-patch": "2.2.1",
     "fast-text-encoding": "^1.0.0",
     "file-saver": "2.0.2",
+    "history": "4.10.1",
     "hoist-non-react-statics": "3.3.2",
     "immutable": "3.8.2",
     "is-hotkey": "0.1.6",

public/app/app.ts

@@ -1,5 +1,5 @@
 import 'symbol-observable';
-import 'core-js/stable';
+import 'core-js';
 import 'regenerator-runtime/runtime';
 
 import 'whatwg-fetch'; // fetch polyfill needed for PhantomJs rendering

public/app/features/panel/panel_directive.ts

@@ -1,4 +1,3 @@
-import angular from 'angular';
 // @ts-ignore
 import baron from 'baron';
 import { PanelEvents } from '@grafana/data';
@@ -6,14 +5,13 @@ import { PanelModel } from '../dashboard/state';
 import { PanelCtrl } from './panel_ctrl';
 import { Subscription } from 'rxjs';
 import { RefreshEvent, RenderEvent } from 'app/types/events';
-
-const module = angular.module('grafana.directives');
+import { coreModule } from 'app/core/core_module';
 
 const panelTemplate = `
   <ng-transclude class="panel-height-helper"></ng-transclude>
 `;
 
-module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
+coreModule.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
   return {
     restrict: 'E',
     template: panelTemplate,

public/app/features/panel/query_editor_row.ts

@@ -1,6 +1,4 @@
-import angular from 'angular';
-
-const module = angular.module('grafana.directives');
+import { coreModule } from 'app/core/core_module';
 
 export class QueryRowCtrl {
   target: any;
@@ -43,4 +41,4 @@ function queryEditorRowDirective() {
   };
 }
 
-module.directive('queryEditorRow', queryEditorRowDirective);
+coreModule.directive('queryEditorRow', queryEditorRowDirective);

public/app/features/variables/adapters.ts

@@ -4,7 +4,6 @@ import { Registry, UrlQueryValue, VariableType } from '@grafana/data';
 
 import { VariableModel, VariableOption } from './types';
 import { VariableEditorProps } from './editor/types';
-import { VariablesState } from './state/variablesReducer';
 import { VariablePickerProps } from './pickers/types';
 import { createQueryVariableAdapter } from './query/adapter';
 import { createCustomVariableAdapter } from './custom/adapter';
@@ -14,6 +13,7 @@ import { createDataSourceVariableAdapter } from './datasource/adapter';
 import { createIntervalVariableAdapter } from './interval/adapter';
 import { createAdHocVariableAdapter } from './adhoc/adapter';
 import { createSystemVariableAdapter } from './system/adapter';
+import { VariablesState } from './state/types';
 
 export interface VariableAdapter<Model extends VariableModel> {
   id: VariableType;

public/app/features/variables/adhoc/reducer.test.ts

@@ -1,9 +1,8 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import cloneDeep from 'lodash/cloneDeep';
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { adHocVariableReducer, filterAdded, filterRemoved, filtersRestored, filterUpdated } from './reducer';
-import { VariablesState } from '../state/variablesReducer';
 import { AdHocVariableFilter, AdHocVariableModel } from '../types';
 import { createAdHocVariableAdapter } from './adapter';
 

public/app/features/variables/adhoc/reducer.ts

@@ -1,7 +1,6 @@
 import { AdHocVariableFilter, AdHocVariableModel, initialVariableModelState } from 'app/features/variables/types';
-import { getInstanceState, VariablePayload } from '../state/types';
+import { getInstanceState, VariablePayload, initialVariablesState, VariablesState } from '../state/types';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
 
 export interface AdHocVariabelFilterUpdate {
   index: number;

public/app/features/variables/constant/reducer.test.ts

@@ -1,9 +1,8 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import cloneDeep from 'lodash/cloneDeep';
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { constantVariableReducer, createConstantOptionsFromQuery } from './reducer';
-import { VariablesState } from '../state/variablesReducer';
 import { ConstantVariableModel } from '../types';
 import { createConstantVariableAdapter } from './adapter';
 

public/app/features/variables/constant/reducer.ts

@@ -1,7 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ConstantVariableModel, initialVariableModelState, VariableHide, VariableOption } from '../types';
-import { getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import { getInstanceState, VariablePayload, initialVariablesState, VariablesState } from '../state/types';
 
 export const initialConstantVariableModelState: ConstantVariableModel = {
   ...initialVariableModelState,

public/app/features/variables/custom/reducer.test.ts

@@ -1,10 +1,9 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import cloneDeep from 'lodash/cloneDeep';
 import { getVariableTestContext } from '../state/helpers';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload } from '../state/types';
+import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload, VariablesState } from '../state/types';
 import { createCustomOptionsFromQuery, customVariableReducer } from './reducer';
 import { createCustomVariableAdapter } from './adapter';
-import { VariablesState } from '../state/variablesReducer';
 import { CustomVariableModel } from '../types';
 
 describe('customVariableReducer', () => {

public/app/features/variables/custom/reducer.ts

@@ -1,8 +1,14 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { CustomVariableModel, initialVariableModelState, VariableOption } from '../types';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import {
+  ALL_VARIABLE_TEXT,
+  ALL_VARIABLE_VALUE,
+  getInstanceState,
+  VariablePayload,
+  initialVariablesState,
+  VariablesState,
+} from '../state/types';
 
 export const initialCustomVariableModelState: CustomVariableModel = {
   ...initialVariableModelState,

public/app/features/variables/datasource/reducer.test.ts

@@ -1,13 +1,12 @@
 import { DataSourceInstanceSettings } from '@grafana/data';
 
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
-import { VariablesState } from '../state/variablesReducer';
 import { createDataSourceOptions, dataSourceVariableReducer } from './reducer';
 import { DataSourceVariableModel } from '../types';
 import { getVariableTestContext } from '../state/helpers';
 import cloneDeep from 'lodash/cloneDeep';
 import { createDataSourceVariableAdapter } from './adapter';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { getMockPlugins } from '../../plugins/__mocks__/pluginMocks';
 import { getDataSourceInstanceSetting } from '../shared/testing/helpers';
 

public/app/features/variables/datasource/reducer.ts

@@ -2,8 +2,14 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { DataSourceInstanceSettings } from '@grafana/data';
 
 import { DataSourceVariableModel, initialVariableModelState, VariableOption, VariableRefresh } from '../types';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import {
+  ALL_VARIABLE_TEXT,
+  ALL_VARIABLE_VALUE,
+  getInstanceState,
+  VariablePayload,
+  initialVariablesState,
+  VariablesState,
+} from '../state/types';
 
 export interface DataSourceVariableEditorState {
   dataSourceTypes: Array<{ text: string; value: string }>;

public/app/features/variables/interval/reducer.test.ts

@@ -1,11 +1,10 @@
 import cloneDeep from 'lodash/cloneDeep';
 
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { createIntervalVariableAdapter } from './adapter';
 import { IntervalVariableModel } from '../types';
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
-import { VariablesState } from '../state/variablesReducer';
 import { createIntervalOptions, intervalVariableReducer } from './reducer';
 
 describe('intervalVariableReducer', () => {

public/app/features/variables/interval/reducer.ts

@@ -1,7 +1,6 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { initialVariableModelState, IntervalVariableModel, VariableOption, VariableRefresh } from '../types';
-import { getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import { getInstanceState, VariablePayload, initialVariablesState, VariablesState } from '../state/types';
 import _ from 'lodash';
 
 export const initialIntervalVariableModelState: IntervalVariableModel = {

public/app/features/variables/query/reducer.test.ts

@@ -8,9 +8,8 @@ import {
 } from './reducer';
 import { QueryVariableModel, VariableSort } from '../types';
 import cloneDeep from 'lodash/cloneDeep';
-import { VariablesState } from '../state/variablesReducer';
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { createQueryVariableAdapter } from './adapter';
 import { MetricFindValue } from '@grafana/data';
 

public/app/features/variables/query/reducer.ts

@@ -19,8 +19,9 @@ import {
   NONE_VARIABLE_TEXT,
   NONE_VARIABLE_VALUE,
   VariablePayload,
+  initialVariablesState,
+  VariablesState,
 } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
 
 interface VariableOptionsUpdate {
   templatedRegex: string;

public/app/features/variables/state/helpers.ts

@@ -1,9 +1,9 @@
 import { combineReducers } from '@reduxjs/toolkit';
 import { LoadingState } from '@grafana/data';
 
-import { NEW_VARIABLE_ID } from './types';
+import { NEW_VARIABLE_ID, VariablesState } from './types';
 import { VariableHide, VariableModel } from '../types';
-import { VariablesState } from './variablesReducer';
+
 import { VariableAdapter } from '../adapters';
 import { dashboardReducer } from 'app/features/dashboard/state/reducers';
 import { templatingReducers, TemplatingState } from './reducers';

public/app/features/variables/state/reducers.test.ts

@@ -2,8 +2,8 @@ import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import { initialVariableModelState, QueryVariableModel } from '../types';
 import { VariableAdapter, variableAdapters } from '../adapters';
 import { createAction } from '@reduxjs/toolkit';
-import { cleanVariables, variablesReducer, VariablesState } from './variablesReducer';
-import { toVariablePayload, VariablePayload } from './types';
+import { cleanVariables, variablesReducer } from './variablesReducer';
+import { VariablesState, toVariablePayload, VariablePayload } from './types';
 import { VariableType } from '@grafana/data';
 
 const variableAdapter: VariableAdapter<QueryVariableModel> = {

public/app/features/variables/state/sharedReducer.test.ts

@@ -17,12 +17,18 @@ import {
   variableStateNotStarted,
 } from './sharedReducer';
 import { ConstantVariableModel, QueryVariableModel, VariableHide, VariableOption } from '../types';
-import { ALL_VARIABLE_TEXT, ALL_VARIABLE_VALUE, toVariablePayload, VariableIdentifier } from './types';
+import {
+  ALL_VARIABLE_TEXT,
+  ALL_VARIABLE_VALUE,
+  toVariablePayload,
+  VariableIdentifier,
+  initialVariablesState,
+  VariablesState,
+} from './types';
 import { variableAdapters } from '../adapters';
 import { createQueryVariableAdapter } from '../query/adapter';
 import { initialQueryVariableModelState } from '../query/reducer';
 import { getVariableState, getVariableTestContext } from './helpers';
-import { initialVariablesState, VariablesState } from './variablesReducer';
 import { changeVariableNameSucceeded } from '../editor/reducer';
 import { createConstantVariableAdapter } from '../constant/adapter';
 import { initialConstantVariableModelState } from '../constant/reducer';

public/app/features/variables/state/sharedReducer.ts

@@ -1,13 +1,11 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import cloneDeep from 'lodash/cloneDeep';
 import { default as lodashDefaults } from 'lodash/defaults';
-
 import { LoadingState, VariableType } from '@grafana/data';
 import { VariableModel, VariableOption, VariableWithOptions } from '../types';
-import { AddVariable, getInstanceState, VariablePayload } from './types';
+import { AddVariable, getInstanceState, VariablePayload, initialVariablesState, VariablesState } from './types';
 import { variableAdapters } from '../adapters';
 import { changeVariableNameSucceeded } from '../editor/reducer';
-import { initialVariablesState, VariablesState } from './variablesReducer';
 import { isQuery } from '../guard';
 import { ensureStringValues } from '../utils';
 

public/app/features/variables/state/types.ts

@@ -1,5 +1,4 @@
 import { VariableModel } from '../types';
-import { VariablesState } from './variablesReducer';
 import { VariableType } from '@grafana/data';
 
 export const NEW_VARIABLE_ID = '00000000-0000-0000-0000-000000000000';
@@ -8,6 +7,10 @@ export const ALL_VARIABLE_VALUE = '$__all';
 export const NONE_VARIABLE_TEXT = 'None';
 export const NONE_VARIABLE_VALUE = '';
 
+export interface VariablesState extends Record<string, VariableModel> {}
+
+export const initialVariablesState: VariablesState = {};
+
 export const getInstanceState = <Model extends VariableModel = VariableModel>(state: VariablesState, id: string) => {
   return state[id] as Model;
 };

public/app/features/variables/state/variablesReducer.ts

@@ -3,10 +3,7 @@ import { variableAdapters } from '../adapters';
 import { sharedReducer } from './sharedReducer';
 import { VariableModel } from '../types';
 import { AnyAction } from 'redux';
-
-export interface VariablesState extends Record<string, VariableModel> {}
-
-export const initialVariablesState: VariablesState = {};
+import { initialVariablesState, VariablesState } from './types';
 
 export const cleanVariables = createAction<undefined>('templating/cleanVariables');
 

public/app/features/variables/textbox/reducer.test.ts

@@ -1,9 +1,8 @@
 import { reducerTester } from '../../../../test/core/redux/reducerTester';
 import cloneDeep from 'lodash/cloneDeep';
 import { getVariableTestContext } from '../state/helpers';
-import { toVariablePayload } from '../state/types';
+import { toVariablePayload, VariablesState } from '../state/types';
 import { createTextBoxOptions, textBoxVariableReducer } from './reducer';
-import { VariablesState } from '../state/variablesReducer';
 import { TextBoxVariableModel } from '../types';
 import { createTextBoxVariableAdapter } from './adapter';
 

public/app/features/variables/textbox/reducer.ts

@@ -1,8 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { initialVariableModelState, TextBoxVariableModel, VariableOption } from '../types';
-import { getInstanceState, VariablePayload } from '../state/types';
-import { initialVariablesState, VariablesState } from '../state/variablesReducer';
+import { getInstanceState, VariablePayload, initialVariablesState, VariablesState } from '../state/types';
 
 export const initialTextBoxVariableModelState: TextBoxVariableModel = {
   ...initialVariableModelState,

scripts/webpack/babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function getBabelConfig() {
+module.exports = function getBabelConfig(options = {}) {
   return {
     cacheDirectory: true,
     babelrc: false,
@@ -8,12 +8,10 @@ module.exports = function getBabelConfig() {
       [
         '@babel/preset-env',
         {
-          targets: {
-            browsers: 'last 3 versions',
-          },
+          bugfixes: true,
+          browserslistEnv: process.env.BABEL_ENV || options.BABEL_ENV || 'production',
           useBuiltIns: 'entry',
-          corejs: 3,
-          modules: false,
+          corejs: '3.10',
         },
       ],
       [

scripts/webpack/webpack.common.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const getBabelConfig = require('./babel.config');
 
 // https://github.com/visionmedia/debug/issues/701#issuecomment-505487361
 function shouldExclude(filename) {
@@ -129,9 +130,7 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
-            options: {
-              presets: [['@babel/preset-env']],
-            },
+            options: getBabelConfig(),
           },
         ],
       },

scripts/webpack/webpack.dev.js

@@ -36,7 +36,7 @@ module.exports = (env = {}) =>
           use: [
             {
               loader: 'babel-loader',
-              options: getBabelConfig(),
+              options: getBabelConfig({ BABEL_ENV: 'dev' }),
             },
           ],
         },

yarn.lock

@@ -2180,6 +2180,18 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-runtime@^7.13.10":
+  version "7.13.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.13.10.tgz#a1e40d22e2bf570c591c9c7e5ab42d6bf1e419e1"
+  integrity sha512-Y5k8ipgfvz5d/76tx7JYbKQTcgFSU6VgJ3kKQv4zGTKr+a9T/KBvfRvGtSFgKDQGt/DBykQixV0vNWKIdzWErA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
+    babel-plugin-polyfill-corejs2 "^0.1.4"
+    babel-plugin-polyfill-corejs3 "^0.1.3"
+    babel-plugin-polyfill-regenerator "^0.1.2"
+    semver "^6.3.0"
+
 "@babel/plugin-transform-shorthand-properties@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz#0bf9cac5550fce0cfdf043420f661d645fdc75e3"
@@ -10418,10 +10430,10 @@ core-js-pure@^3.0.1:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.8.3.tgz#10e9e3b2592ecaede4283e8f3ad7020811587c02"
   integrity sha512-V5qQZVAr9K0xu7jXg1M7qTEwuxUgqr7dUOezGaNa7i+Xn9oXAU/d1fzqD9ObuwpVQOaorO5s70ckyi1woP9lVA==
 
-core-js@3.6.4:
-  version "3.6.4"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
-  integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
+core-js@3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.10.0.tgz#9a020547c8b6879f929306949e31496bbe2ae9b3"
+  integrity sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==
 
 core-js@^1.0.0:
   version "1.2.7"