Build: Replace babel-loader with esbuild-loader (#57837)

* build(webpack): replace babel-loader with esbuild-loader

* build(webpack): add esbuild minifier to production builds

* Wip

* Removed ngInject and replaced with manual inject params

* chore: bump esbuild to 0.15.13

* Fixed angular issues

* build(frontend): update esbuild to 0.16.16

* chore(webpack): support browserslist for esbuild

* build(esbuild): unify versions of esbuild to 0.16.17 and esbuild-loader to 2.21.0

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

package.json

@@ -6,9 +6,9 @@
   "version": "9.4.0-pre",
   "repository": "github:grafana/grafana",
   "scripts": {
-    "build": "yarn i18n:compile && NODE_ENV=production webpack --config scripts/webpack/webpack.prod.js",
+    "build": "yarn i18n:compile && NODE_ENV=production webpack --progress --config scripts/webpack/webpack.prod.js",
     "build:nominify": "yarn run build --env noMinify=1",
-    "dev": "yarn i18n:compile && webpack --progress --color --config scripts/webpack/webpack.dev.js",
+    "dev": "yarn i18n:compile && NODE_ENV=dev webpack --progress --color --config scripts/webpack/webpack.dev.js",
     "e2e": "./e2e/start-and-run-suite",
     "e2e:debug": "./e2e/start-and-run-suite debug",
     "e2e:dev": "./e2e/start-and-run-suite dev",
@@ -168,12 +168,16 @@
     "babel-plugin-angularjs-annotate": "0.10.0",
     "babel-plugin-macros": "3.1.0",
     "blob-polyfill": "7.0.20220408",
+    "browserslist": "^4.21.4",
     "copy-webpack-plugin": "9.0.1",
     "css-loader": "6.7.1",
     "css-minimizer-webpack-plugin": "4.2.2",
     "cypress": "9.5.1",
     "enzyme": "3.11.0",
     "enzyme-to-json": "3.6.2",
+    "esbuild": "0.16.17",
+    "esbuild-loader": "2.21.0",
+    "esbuild-plugin-browserslist": "^0.6.0",
     "eslint": "8.31.0",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-import": "^2.26.0",

packages/grafana-data/package.json

@@ -80,7 +80,7 @@
     "@types/sinon": "10.0.13",
     "@types/testing-library__jest-dom": "5.14.5",
     "@types/tinycolor2": "1.4.3",
-    "esbuild": "0.16.7",
+    "esbuild": "0.16.17",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",

packages/grafana-e2e-selectors/package.json

@@ -42,7 +42,7 @@
     "@rollup/plugin-commonjs": "23.0.2",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@types/node": "18.11.9",
-    "esbuild": "0.16.7",
+    "esbuild": "0.16.17",
     "rimraf": "3.0.2",
     "rollup": "2.79.1",
     "rollup-plugin-dts": "^5.0.0",

packages/grafana-e2e/package.json

@@ -52,7 +52,7 @@
     "@types/lodash": "4.14.187",
     "@types/node": "18.11.9",
     "@types/uuid": "8.3.4",
-    "esbuild": "0.16.7",
+    "esbuild": "0.16.17",
     "rollup": "2.79.1",
     "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-esbuild": "5.0.0",

packages/grafana-runtime/package.json

@@ -63,7 +63,7 @@
     "@types/react": "17.0.42",
     "@types/react-dom": "17.0.14",
     "@types/systemjs": "^0.20.6",
-    "esbuild": "0.16.7",
+    "esbuild": "0.16.17",
     "lodash": "4.17.21",
     "react": "17.0.2",
     "react-dom": "17.0.2",

packages/grafana-schema/package.json

@@ -41,7 +41,7 @@
     "@rollup/plugin-json": "5.0.1",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@swc/helpers": "0.4.12",
-    "esbuild": "0.16.7",
+    "esbuild": "0.16.17",
     "rimraf": "3.0.2",
     "rollup": "2.79.1",
     "rollup-plugin-dts": "^5.0.0",

packages/grafana-ui/package.json

@@ -173,7 +173,7 @@
     "css-loader": "6.7.1",
     "csstype": "3.1.1",
     "enzyme": "3.11.0",
-    "esbuild": "0.16.7",
+    "esbuild": "0.16.17",
     "expose-loader": "4.0.0",
     "mock-raf": "1.0.1",
     "process": "^0.11.10",

public/app/angular/AngularApp.ts

@@ -37,7 +37,12 @@ export class AngularApp {
   init() {
     const app = angular.module('grafana', []);
 
-    app.config(
+    app.config([
+      '$controllerProvider',
+      '$compileProvider',
+      '$filterProvider',
+      '$httpProvider',
+      '$provide',
       (
         $controllerProvider: angular.IControllerProvider,
         $compileProvider: angular.ICompileProvider,
@@ -74,8 +79,8 @@ export class AngularApp {
             return $delegate;
           },
         ]);
-      }
+      },
-    );
+    ]);
 
     this.ngModuleDependencies = ['grafana.core', 'ngSanitize', 'grafana', 'pasvaz.bindonce', 'react'];
 

public/app/angular/GrafanaCtrl.ts

@@ -18,7 +18,8 @@ import { UtilSrv } from './services/UtilSrv';
 export type GrafanaRootScope = IRootScopeService & AppEventEmitter & AppEventConsumer & { colors: string[] };
 
 export class GrafanaCtrl {
-  /** @ngInject */
+  static $inject = ['$scope', 'utilSrv', '$rootScope', 'contextSrv', 'angularLoader', '$injector'];
+
   constructor(
     $scope: any,
     utilSrv: UtilSrv,
@@ -79,7 +80,6 @@ export class GrafanaCtrl {
   }
 }
 
-/** @ngInject */
 export function grafanaAppDirective() {
   return {
     restrict: 'E',

public/app/angular/autofill_event_fix.ts

@@ -1,6 +1,5 @@
 import coreModule from './core_module';
 
-/** @ngInject */
 export function autofillEventFix($compile: any) {
   return {
     link: ($scope: any, elem: any) => {
@@ -32,4 +31,4 @@ export function autofillEventFix($compile: any) {
   };
 }
 
-coreModule.directive('autofillEventFix', autofillEventFix);
+coreModule.directive('autofillEventFix', ['$compile', autofillEventFix]);

public/app/angular/components/form_dropdown/form_dropdown.ts

@@ -39,7 +39,8 @@ export class FormDropdownCtrl {
   startOpen: any;
   debounce: boolean;
 
-  /** @ngInject */
+  static $inject = ['$scope', '$element', '$sce', 'templateSrv'];
+
   constructor(private $scope: any, $element: JQLite, private $sce: ISCEService, private templateSrv: any) {
     this.inputElement = $element.find('input').first();
     this.linkElement = $element.find('a').first();

public/app/angular/components/plugin_component.ts

@@ -8,7 +8,8 @@ import config from 'app/core/config';
 import { importPanelPlugin } from '../../features/plugins/importPanelPlugin';
 import { importDataSourcePlugin, importAppPlugin } from '../../features/plugins/plugin_loader';
 
-/** @ngInject */
+coreModule.directive('pluginComponent', ['$compile', '$http', '$templateCache', '$location', pluginDirectiveLoader]);
+
 function pluginDirectiveLoader($compile: any, $http: any, $templateCache: any, $location: ILocationService) {
   function getTemplate(component: { template: any; templateUrl: any }) {
     if (component.template) {
@@ -245,5 +246,3 @@ function pluginDirectiveLoader($compile: any, $http: any, $templateCache: any, $
     },
   };
 }
-
-coreModule.directive('pluginComponent', pluginDirectiveLoader);

public/app/angular/components/query_part_editor.ts

@@ -16,7 +16,8 @@ const template = `
 </ul>
 `;
 
-/** @ngInject */
+coreModule.directive('queryPartEditor', ['templateSrv', queryPartEditorDirective]);
+
 export function queryPartEditorDirective(templateSrv: any) {
   const paramTemplate = '<input type="text" class="hide input-mini tight-form-func-param"></input>';
 
@@ -183,5 +184,3 @@ export function queryPartEditorDirective(templateSrv: any) {
     },
   };
 }
-
-coreModule.directive('queryPartEditor', queryPartEditorDirective);

public/app/angular/components/spectrum_picker.ts

@@ -5,7 +5,8 @@
  */
 import coreModule from '../core_module';
 
-/** @ngInject */
+coreModule.directive('spectrumPicker', spectrumPicker);
+
 export function spectrumPicker() {
   return {
     restrict: 'E',
@@ -21,4 +22,3 @@ export function spectrumPicker() {
     },
   };
 }
-coreModule.directive('spectrumPicker', spectrumPicker);

public/app/angular/components/sql_part/sql_part_editor.ts

@@ -14,7 +14,8 @@ const template = `
 </ul>
 `;
 
-/** @ngInject */
+coreModule.directive('sqlPartEditor', ['templateSrv', sqlPartEditorDirective]);
+
 export function sqlPartEditorDirective(templateSrv: any) {
   const paramTemplate = '<input type="text" class="hide input-mini"></input>';
 
@@ -193,5 +194,3 @@ export function sqlPartEditorDirective(templateSrv: any) {
     },
   };
 }
-
-coreModule.directive('sqlPartEditor', sqlPartEditorDirective);

public/app/angular/components/switch.ts

@@ -37,7 +37,8 @@ export class SwitchCtrl {
   id: any;
   label?: string;
 
-  /** @ngInject */
+  static $inject = ['$scope', '$timeout'];
+
   constructor($scope: any, private $timeout: any) {
     this.show = true;
     this.id = $scope.$id;

public/app/angular/diff-view.ts

@@ -7,7 +7,6 @@ import coreModule from './core_module';
 export class DeltaCtrl {
   observer: any;
 
-  /** @ngInject */
   constructor() {
     const waitForCompile = () => {};
 
@@ -36,11 +35,13 @@ export function delta() {
     restrict: 'A',
   };
 }
+
 coreModule.directive('diffDelta', delta);
 
 // Link to JSON line number
 export class LinkJSONCtrl {
-  /** @ngInject */
+  static $inject = ['$scope', '$rootScope', '$anchorScroll'];
+
   constructor(private $scope: any, private $rootScope: GrafanaRootScope, private $anchorScroll: any) {}
 
   goToLine(line: number) {
@@ -71,4 +72,5 @@ export function linkJson() {
     template: `<a class="diff-linenum btn btn-inverse btn-small" ng-click="ctrl.goToLine(link)">Line {{ line }}</a>`,
   };
 }
+
 coreModule.directive('diffLinkJson', linkJson);

public/app/angular/dropdown_typeahead.ts

@@ -3,7 +3,6 @@ import { each, reduce } from 'lodash';
 
 import coreModule from './core_module';
 
-/** @ngInject */
 export function dropdownTypeahead($compile: any) {
   const inputTemplate =
     '<input type="text"' +
@@ -136,7 +135,6 @@ export function dropdownTypeahead($compile: any) {
   };
 }
 
-/** @ngInject */
 export function dropdownTypeahead2($compile: any) {
   const inputTemplate =
     '<input type="text"' + ' class="gf-form-input"' + ' spellcheck="false" style="display:none"></input>';
@@ -271,5 +269,5 @@ export function dropdownTypeahead2($compile: any) {
   };
 }
 
-coreModule.directive('dropdownTypeahead', dropdownTypeahead);
+coreModule.directive('dropdownTypeahead', ['$compile', dropdownTypeahead]);
-coreModule.directive('dropdownTypeahead2', dropdownTypeahead2);
+coreModule.directive('dropdownTypeahead2', ['$compile', dropdownTypeahead2]);

public/app/angular/metric_segment.ts

@@ -5,7 +5,6 @@ import { TemplateSrv } from 'app/features/templating/template_srv';
 
 import coreModule from './core_module';
 
-/** @ngInject */
 export function metricSegment($compile: any, $sce: any, templateSrv: TemplateSrv) {
   const inputTemplate =
     '<input type="text" data-provide="typeahead" ' +
@@ -188,7 +187,6 @@ export function metricSegment($compile: any, $sce: any, templateSrv: TemplateSrv
   };
 }
 
-/** @ngInject */
 export function metricSegmentModel(uiSegmentSrv: any) {
   return {
     template:
@@ -264,5 +262,5 @@ export function metricSegmentModel(uiSegmentSrv: any) {
   };
 }
 
-coreModule.directive('metricSegment', metricSegment);
+coreModule.directive('metricSegment', ['$compile', '$sce', 'templateSrv', metricSegment]);
-coreModule.directive('metricSegmentModel', metricSegmentModel);
+coreModule.directive('metricSegmentModel', ['uiSegmentSrv', metricSegmentModel]);

public/app/angular/misc.ts

@@ -2,7 +2,8 @@ import angular from 'angular';
 
 import coreModule from './core_module';
 
-/** @ngInject */
+coreModule.directive('tip', ['$compile', tip]);
+
 function tip($compile: any) {
   return {
     restrict: 'E',
@@ -21,7 +22,8 @@ function tip($compile: any) {
   };
 }
 
-/** @ngInject */
+coreModule.directive('compile', ['$compile', compile]);
+
 function compile($compile: any) {
   return {
     restrict: 'A',
@@ -39,6 +41,8 @@ function compile($compile: any) {
   };
 }
 
+coreModule.directive('watchChange', watchChange);
+
 function watchChange() {
   return {
     scope: { onchange: '&watchChange' },
@@ -52,7 +56,8 @@ function watchChange() {
   };
 }
 
-/** @ngInject */
+coreModule.directive('editorOptBool', ['$compile', editorOptBool]);
+
 function editorOptBool($compile: any) {
   return {
     restrict: 'E',
@@ -89,7 +94,8 @@ function editorOptBool($compile: any) {
   };
 }
 
-/** @ngInject */
+coreModule.directive('editorCheckbox', ['$compile, $interpolate', editorCheckbox]);
+
 function editorCheckbox($compile: any, $interpolate: any) {
   return {
     restrict: 'E',
@@ -124,7 +130,8 @@ function editorCheckbox($compile: any, $interpolate: any) {
   };
 }
 
-/** @ngInject */
+coreModule.directive('gfDropdown', ['$parse', '$compile', '$timeout', gfDropdown]);
+
 function gfDropdown($parse: any, $compile: any, $timeout: any) {
   function buildTemplate(items: any, placement?: any) {
     const upclass = placement === 'top' ? 'dropup' : '';
@@ -180,10 +187,3 @@ function gfDropdown($parse: any, $compile: any, $timeout: any) {
     },
   };
 }
-
-coreModule.directive('tip', tip);
-coreModule.directive('compile', compile);
-coreModule.directive('watchChange', watchChange);
-coreModule.directive('editorOptBool', editorOptBool);
-coreModule.directive('editorCheckbox', editorCheckbox);
-coreModule.directive('gfDropdown', gfDropdown);

public/app/angular/panel/panel_directive.ts

@@ -15,110 +15,113 @@ const panelTemplate = `
   <ng-transclude class="panel-height-helper"></ng-transclude>
 `;
 
-coreModule.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
+coreModule.directive('grafanaPanel', [
-  return {
+  '$timeout',
-    restrict: 'E',
+  ($timeout) => {
-    template: panelTemplate,
+    return {
-    transclude: true,
+      restrict: 'E',
-    scope: { ctrl: '=' },
+      template: panelTemplate,
-    link: (scope: any, elem) => {
+      transclude: true,
-      const ctrl: PanelCtrl = scope.ctrl;
+      scope: { ctrl: '=' },
-      const panel: PanelModel = scope.ctrl.panel;
+      link: (scope: any, elem) => {
-      const subs = new Subscription();
+        const ctrl: PanelCtrl = scope.ctrl;
+        const panel: PanelModel = scope.ctrl.panel;
+        const subs = new Subscription();
 
-      let panelScrollbar: any;
+        let panelScrollbar: any;
 
-      function resizeScrollableContent() {
+        function resizeScrollableContent() {
-        if (panelScrollbar) {
+          if (panelScrollbar) {
-          panelScrollbar.update();
+            panelScrollbar.update();
+          }
         }
-      }
 
-      ctrl.events.on(PanelEvents.componentDidMount, () => {
+        ctrl.events.on(PanelEvents.componentDidMount, () => {
-        if ((ctrl as any).__proto__.constructor.scrollable) {
+          if ((ctrl as any).__proto__.constructor.scrollable) {
-          const scrollRootClass = 'baron baron__root baron__clipper panel-content--scrollable';
+            const scrollRootClass = 'baron baron__root baron__clipper panel-content--scrollable';
-          const scrollerClass = 'baron__scroller';
+            const scrollerClass = 'baron__scroller';
-          const scrollBarHTML = `
+            const scrollBarHTML = `
             <div class="baron__track">
               <div class="baron__bar"></div>
             </div>
           `;
 
-          const scrollRoot = elem;
+            const scrollRoot = elem;
-          const scroller = elem.find(':first').find(':first');
+            const scroller = elem.find(':first').find(':first');
 
-          scrollRoot.addClass(scrollRootClass);
+            scrollRoot.addClass(scrollRootClass);
-          $(scrollBarHTML).appendTo(scrollRoot);
+            $(scrollBarHTML).appendTo(scrollRoot);
-          scroller.addClass(scrollerClass);
+            scroller.addClass(scrollerClass);
 
-          panelScrollbar = baron({
+            panelScrollbar = baron({
-            root: scrollRoot[0],
+              root: scrollRoot[0],
-            scroller: scroller[0],
+              scroller: scroller[0],
-            bar: '.baron__bar',
+              bar: '.baron__bar',
-            barOnCls: '_scrollbar',
+              barOnCls: '_scrollbar',
-            scrollingCls: '_scrolling',
+              scrollingCls: '_scrolling',
-          });
+            });
 
-          panelScrollbar.scroll();
+            panelScrollbar.scroll();
-        }
-      });
-
-      function updateDimensionsFromParentScope() {
-        ctrl.height = scope.$parent.$parent.size.height;
-        ctrl.width = scope.$parent.$parent.size.width;
-      }
-
-      updateDimensionsFromParentScope();
-
-      // Pass PanelModel events down to angular controller event emitter
-      subs.add(
-        panel.events.subscribe(RefreshEvent, () => {
-          updateDimensionsFromParentScope();
-          ctrl.events.emit('refresh');
-        })
-      );
-
-      subs.add(
-        panel.events.subscribe(RenderEvent, (event) => {
-          // this event originated from angular so no need to bubble it back
-          if (event.payload?.fromAngular) {
-            return;
           }
+        });
 
-          updateDimensionsFromParentScope();
+        function updateDimensionsFromParentScope() {
-
+          ctrl.height = scope.$parent.$parent.size.height;
-          $timeout(() => {
+          ctrl.width = scope.$parent.$parent.size.width;
-            resizeScrollableContent();
-            ctrl.events.emit('render');
-          });
-        })
-      );
-
-      subs.add(
-        ctrl.events.subscribe(RenderEvent, (event) => {
-          // this event originated from angular so bubble it to react so the PanelChromeAngular can update the panel header alert state
-          if (event.payload) {
-            event.payload.fromAngular = true;
-            panel.events.publish(event);
-          }
-        })
-      );
-
-      scope.$on('$destroy', () => {
-        elem.off();
-
-        // Remove PanelModel.event subs
-        subs.unsubscribe();
-        // Remove Angular controller event subs
-        ctrl.events.emit(PanelEvents.panelTeardown);
-        ctrl.events.removeAllListeners();
-
-        if (panelScrollbar) {
-          panelScrollbar.dispose();
         }
-      });
 
-      panel.events.publish(PanelDirectiveReadyEvent);
+        updateDimensionsFromParentScope();
-    },
+
-  };
+        // Pass PanelModel events down to angular controller event emitter
-});
+        subs.add(
+          panel.events.subscribe(RefreshEvent, () => {
+            updateDimensionsFromParentScope();
+            ctrl.events.emit('refresh');
+          })
+        );
+
+        subs.add(
+          panel.events.subscribe(RenderEvent, (event) => {
+            // this event originated from angular so no need to bubble it back
+            if (event.payload?.fromAngular) {
+              return;
+            }
+
+            updateDimensionsFromParentScope();
+
+            $timeout(() => {
+              resizeScrollableContent();
+              ctrl.events.emit('render');
+            });
+          })
+        );
+
+        subs.add(
+          ctrl.events.subscribe(RenderEvent, (event) => {
+            // this event originated from angular so bubble it to react so the PanelChromeAngular can update the panel header alert state
+            if (event.payload) {
+              event.payload.fromAngular = true;
+              panel.events.publish(event);
+            }
+          })
+        );
+
+        scope.$on('$destroy', () => {
+          elem.off();
+
+          // Remove PanelModel.event subs
+          subs.unsubscribe();
+          // Remove Angular controller event subs
+          ctrl.events.emit(PanelEvents.panelTeardown);
+          ctrl.events.removeAllListeners();
+
+          if (panelScrollbar) {
+            panelScrollbar.dispose();
+          }
+        });
+
+        panel.events.publish(PanelDirectiveReadyEvent);
+      },
+    };
+  },
+]);

public/app/angular/panel/panel_editor_tab.ts

@@ -3,7 +3,8 @@ import angular from 'angular';
 const directiveModule = angular.module('grafana.directives');
 const directiveCache: any = {};
 
-/** @ngInject */
+directiveModule.directive('panelEditorTab', ['dynamicDirectiveSrv', panelEditorTab]);
+
 function panelEditorTab(dynamicDirectiveSrv: any) {
   return dynamicDirectiveSrv.create({
     scope: {
@@ -38,5 +39,3 @@ function panelEditorTab(dynamicDirectiveSrv: any) {
     },
   });
 }
-
-directiveModule.directive('panelEditorTab', panelEditorTab);

public/app/angular/panel/query_editor_row.ts

@@ -24,7 +24,8 @@ export class QueryRowCtrl {
   }
 }
 
-/** @ngInject */
+coreModule.directive('queryEditorRow', queryEditorRowDirective);
+
 function queryEditorRowDirective() {
   return {
     restrict: 'E',
@@ -40,5 +41,3 @@ function queryEditorRowDirective() {
     },
   };
 }
-
-coreModule.directive('queryEditorRow', queryEditorRowDirective);

public/app/angular/rebuild_on_change.ts

@@ -22,7 +22,8 @@ function getBlockNodes(nodes: any[]) {
   return blockNodes || nodes;
 }
 
-/** @ngInject */
+coreModule.directive('rebuildOnChange', ['$animate', rebuildOnChange]);
+
 function rebuildOnChange($animate: any) {
   return {
     multiElement: true,
@@ -70,5 +71,3 @@ function rebuildOnChange($animate: any) {
     },
   };
 }
-
-coreModule.directive('rebuildOnChange', rebuildOnChange);

public/app/angular/services/AngularLoader.ts

@@ -6,7 +6,8 @@ import { GrafanaRootScope } from 'app/angular/GrafanaCtrl';
 import coreModule from 'app/angular/core_module';
 
 export class AngularLoader implements AngularLoaderInterface {
-  /** @ngInject */
+  static $inject = ['$compile', '$rootScope'];
+
   constructor(private $compile: any, private $rootScope: GrafanaRootScope) {}
 
   load(elem: any, scopeProps: any, template: string): AngularComponent {

public/app/angular/services/UtilSrv.ts

@@ -10,7 +10,6 @@ import { HideModalEvent, ShowModalEvent } from '../../types/events';
 export class UtilSrv {
   modalScope: any;
 
-  /** @ngInject */
   constructor() {}
 
   init() {

public/app/angular/services/dynamic_directive_srv.ts

@@ -3,7 +3,8 @@ import angular from 'angular';
 import coreModule from '../core_module';
 
 class DynamicDirectiveSrv {
-  /** @ngInject */
+  static $inject = ['$compile'];
+
   constructor(private $compile: angular.ICompileService) {}
 
   addDirective(element: any, name: string, scope: any) {

public/app/angular/services/popover_srv.ts

@@ -5,7 +5,8 @@ import Drop from 'tether-drop';
 import { GrafanaRootScope } from 'app/angular/GrafanaCtrl';
 import coreModule from 'app/angular/core_module';
 
-/** @ngInject */
+coreModule.service('popoverSrv', ['$compile', '$rootScope', '$timeout', popoverSrv]);
+
 function popoverSrv(this: any, $compile: any, $rootScope: GrafanaRootScope, $timeout: any) {
   let openDrop: any = null;
 
@@ -78,5 +79,3 @@ function popoverSrv(this: any, $compile: any, $rootScope: GrafanaRootScope, $tim
     };
   };
 }
-
-coreModule.service('popoverSrv', popoverSrv);

public/app/angular/services/segment_srv.ts

@@ -2,7 +2,8 @@ import { each, isString, map } from 'lodash';
 
 import coreModule from '../core_module';
 
-/** @ngInject */
+coreModule.service('uiSegmentSrv', ['$sce', 'templateSrv', uiSegmentSrv]);
+
 export function uiSegmentSrv(this: any, $sce: any, templateSrv: any) {
   const self = this;
 
@@ -119,5 +120,3 @@ export function uiSegmentSrv(this: any, $sce: any, templateSrv: any) {
     });
   };
 }
-
-coreModule.service('uiSegmentSrv', uiSegmentSrv);

public/app/angular/services/timer.ts

@@ -8,7 +8,8 @@ import coreModule from 'app/angular/core_module';
 export class Timer {
   timers: Array<angular.IPromise<any>> = [];
 
-  /** @ngInject */
+  static $inject = ['$timeout'];
+
   constructor(private $timeout: ITimeoutService) {}
 
   register(promise: angular.IPromise<any>) {

public/app/features/alerting/AlertTabCtrl.ts

@@ -40,7 +40,8 @@ export class AlertTabCtrl {
   alertingMinInterval: string;
   frequencyWarning: any;
 
-  /** @ngInject */
+  static $inject = ['$scope', 'dashboardSrv', 'uiSegmentSrv', 'datasourceSrv'];
+
   constructor(
     private $scope: any,
     private dashboardSrv: DashboardSrv,
@@ -512,7 +513,6 @@ export class AlertTabCtrl {
   }
 }
 
-/** @ngInject */
 export function alertTab() {
   'use strict';
   return {

public/app/plugins/panel/graph/annotation_tooltip.ts

@@ -2,17 +2,12 @@ import $ from 'jquery';
 import { isString, escape } from 'lodash';
 
 import coreModule from 'app/angular/core_module';
-import { ContextSrv } from 'app/core/services/context_srv';
 import alertDef from 'app/features/alerting/state/alertDef';
 import { DashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 
-/** @ngInject */
+coreModule.directive('annotationTooltip', ['$sanitize', 'dashboardSrv', '$compile', annotationTooltipDirective]);
-export function annotationTooltipDirective(
+
-  $sanitize: any,
+export function annotationTooltipDirective($sanitize: any, dashboardSrv: DashboardSrv, $compile: any) {
-  dashboardSrv: DashboardSrv,
-  contextSrv: ContextSrv,
-  $compile: any
-) {
   function sanitizeString(str: string) {
     try {
       return $sanitize(str);
@@ -94,5 +89,3 @@ export function annotationTooltipDirective(
     },
   };
 }
-
-coreModule.directive('annotationTooltip', annotationTooltipDirective);

public/app/plugins/panel/graph/axes_editor.ts

@@ -11,7 +11,8 @@ export class AxesEditorCtrl {
   xNameSegment: any;
   selectors: typeof selectors.components.Panels.Visualization.Graph.VisualizationTab;
 
-  /** @ngInject */
+  static $inject = ['$scope'];
+
   constructor(private $scope: any) {
     this.panelCtrl = $scope.ctrl as GraphCtrl;
     this.panel = this.panelCtrl.panel;
@@ -76,7 +77,6 @@ export class AxesEditorCtrl {
   }
 }
 
-/** @ngInject */
 export function axesEditorComponent() {
   'use strict';
   return {

public/app/plugins/panel/graph/event_editor.ts

@@ -18,7 +18,6 @@ export class EventEditorCtrl {
   close: any;
   timeFormated?: string;
 
-  /** @ngInject */
   constructor() {}
 
   $onInit() {

public/app/plugins/panel/graph/graph.ts

@@ -959,7 +959,8 @@ class GraphElement {
   }
 }
 
-/** @ngInject */
+coreModule.directive('grafanaGraph', ['timeSrv', 'popoverSrv', 'contextSrv', graphDirective]);
+
 function graphDirective(timeSrv: TimeSrv, popoverSrv: any, contextSrv: ContextSrv) {
   return {
     restrict: 'A',
@@ -970,5 +971,4 @@ function graphDirective(timeSrv: TimeSrv, popoverSrv: any, contextSrv: ContextSr
   };
 }
 
-coreModule.directive('grafanaGraph', graphDirective);
 export { GraphElement, graphDirective };

public/app/plugins/panel/graph/jquery.flot.events.ts

@@ -6,7 +6,6 @@ import Drop from 'tether-drop';
 import { CreatePlotOverlay } from '@grafana/data';
 import { getLegacyAngularInjector } from '@grafana/runtime';
 
-/** @ngInject */
 const createAnnotationToolip: CreatePlotOverlay = (element, event, plot) => {
   const injector = getLegacyAngularInjector();
   const content = document.createElement('div');
@@ -52,7 +51,6 @@ const createAnnotationToolip: CreatePlotOverlay = (element, event, plot) => {
 
 let markerElementToAttachTo: any = null;
 
-/** @ngInject */
 const createEditPopover: CreatePlotOverlay = (element, event, plot) => {
   const eventManager = plot.getOptions().events.manager;
   if (eventManager.editorOpen) {
@@ -145,7 +143,6 @@ export class DrawableEvent {
   _width: any;
   _height: any;
 
-  /** @ngInject */
   constructor(
     object: JQuery,
     drawFunc: any,
@@ -198,7 +195,6 @@ export class VisualEvent {
   _drawableEvent: any;
   _hidden: any;
 
-  /** @ngInject */
   constructor(options: any, drawableEvent: DrawableEvent) {
     this._options = options;
     this._drawableEvent = drawableEvent;
@@ -234,7 +230,6 @@ export class EventMarkers {
   _plot: any;
   eventsEnabled: any;
 
-  /** @ngInject */
   constructor(plot: any) {
     this._events = [];
     this._types = [];
@@ -632,8 +627,6 @@ export class EventMarkers {
 /**
  * initialize the plugin for the given plot
  */
-
-/** @ngInject */
 export function init(this: any, plot: any) {
   const that = this;
   const eventMarkers = new EventMarkers(plot);

public/app/plugins/panel/graph/module.ts

@@ -144,7 +144,8 @@ export class GraphCtrl extends MetricsPanelCtrl {
     },
   };
 
-  /** @ngInject */
+  static $inject = ['$scope', '$injector'];
+
   constructor($scope: any, $injector: auto.IInjectorService) {
     super($scope, $injector);
 

public/app/plugins/panel/graph/series_overrides_ctrl.ts

@@ -3,7 +3,8 @@ import { map, each, isUndefined } from 'lodash';
 import { textUtil } from '@grafana/data';
 import coreModule from 'app/angular/core_module';
 
-/** @ngInject */
+coreModule.controller('SeriesOverridesCtrl', ['$scope', '$element', 'popoverSrv', SeriesOverridesCtrl]);
+
 export function SeriesOverridesCtrl($scope: any, $element: JQuery, popoverSrv: any) {
   $scope.overrideMenu = [];
   $scope.currentOverrides = [];
@@ -131,5 +132,3 @@ export function SeriesOverridesCtrl($scope: any, $element: JQuery, popoverSrv: a
   $scope.addOverrideOption('Hide in tooltip', 'hideTooltip', [true, false]);
   $scope.updateCurrentOverrides();
 }
-
-coreModule.controller('SeriesOverridesCtrl', SeriesOverridesCtrl);

public/app/plugins/panel/graph/thresholds_form.ts

@@ -7,7 +7,8 @@ export class ThresholdFormCtrl {
   panel: any;
   disabled = false;
 
-  /** @ngInject */
+  static $inject = ['$scope'];
+
   constructor(private $scope: any) {}
 
   $onInit() {

public/app/plugins/panel/graph/time_regions_form.ts

@@ -8,7 +8,8 @@ export class TimeRegionFormCtrl {
   disabled = false;
   colorModes: any;
 
-  /** @ngInject */
+  static $inject = ['$scope'];
+
   constructor(private $scope: any) {}
 
   $onInit() {

public/app/plugins/panel/table-old/column_options.ts

@@ -24,7 +24,8 @@ export class ColumnOptionsCtrl {
     { text: 'right', value: 'right' },
   ];
 
-  /** @ngInject */
+  static $inject = ['$scope'];
+
   constructor($scope: any) {
     $scope.editor = this;
 

public/app/plugins/panel/table-old/editor.ts

@@ -13,7 +13,8 @@ export class TablePanelEditorCtrl {
   canSetColumns = false;
   columnsHelpMessage = '';
 
-  /** @ngInject */
+  static $inject = ['$scope', 'uiSegmentSrv'];
+
   constructor($scope: any, private uiSegmentSrv: any) {
     $scope.editor = this;
     this.panelCtrl = $scope.ctrl;

public/app/plugins/panel/table-old/module.ts

@@ -54,7 +54,8 @@ export class TablePanelCtrl extends MetricsPanelCtrl {
     sort: { col: 0, desc: true },
   };
 
-  /** @ngInject */
+  static $inject = ['$scope', '$injector', 'annotationsSrv', '$sanitize'];
+
   constructor($scope: any, $injector: any, private annotationsSrv: any, private $sanitize: any) {
     super($scope, $injector);
 

scripts/webpack/webpack.dev.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const browserslist = require('browserslist');
+const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -10,7 +12,7 @@ const { merge } = require('webpack-merge');
 
 const HTMLWebpackCSSChunks = require('./plugins/HTMLWebpackCSSChunks');
 const common = require('./webpack.common.js');
-// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
 
 module.exports = (env = {}) =>
   merge(common, {
@@ -34,10 +36,10 @@ module.exports = (env = {}) =>
         {
           test: /\.tsx?$/,
           use: {
-            loader: 'babel-loader',
+            loader: 'esbuild-loader',
             options: {
-              cacheDirectory: true,
+              loader: 'tsx',
-              cacheCompression: false,
+              target: esbuildTargets,
             },
           },
           exclude: /node_modules/,
@@ -114,8 +116,5 @@ module.exports = (env = {}) =>
           NODE_ENV: JSON.stringify('development'),
         },
       }),
-      // new BundleAnalyzerPlugin({
-      //   analyzerPort: 8889
-      // })
     ],
   });

scripts/webpack/webpack.prod.js

@@ -1,15 +1,18 @@
 'use strict';
 
+const browserslist = require('browserslist');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
+const { resolveToEsbuildTarget } = require('esbuild-plugin-browserslist');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const { merge } = require('webpack-merge');
 
 const HTMLWebpackCSSChunks = require('./plugins/HTMLWebpackCSSChunks');
 const common = require('./webpack.common.js');
+const esbuildTargets = resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false });
 
 module.exports = (env = {}) =>
   merge(common, {
@@ -27,15 +30,13 @@ module.exports = (env = {}) =>
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
-          use: [
+          use: {
-            {
+            loader: 'esbuild-loader',
-              loader: 'babel-loader',
+            options: {
-              options: {
+              loader: 'tsx',
-                cacheDirectory: true,
+              target: esbuildTargets,
-                cacheCompression: false,
-              },
             },
-          ],
+          },
         },
         require('./sass.rule.js')({
           sourceMap: false,
@@ -47,8 +48,8 @@ module.exports = (env = {}) =>
       nodeEnv: 'production',
       minimize: parseInt(env.noMinify, 10) !== 1,
       minimizer: [
-        new TerserPlugin({
+        new ESBuildMinifyPlugin({
-          parallel: false,
+          target: esbuildTargets,
         }),
         new CssMinimizerPlugin(),
       ],

yarn.lock

@@ -4274,170 +4274,156 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.16.7":
+"@esbuild/android-arm64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/android-arm64@npm:0.16.7"
+  resolution: "@esbuild/android-arm64@npm:0.16.17"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.15.12":
+"@esbuild/android-arm@npm:0.16.17":
-  version: 0.15.12
+  version: 0.16.17
-  resolution: "@esbuild/android-arm@npm:0.15.12"
+  resolution: "@esbuild/android-arm@npm:0.16.17"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.16.7":
+"@esbuild/android-x64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/android-arm@npm:0.16.7"
+  resolution: "@esbuild/android-x64@npm:0.16.17"
-  conditions: os=android & cpu=arm
-  languageName: node
-  linkType: hard
-
-"@esbuild/android-x64@npm:0.16.7":
-  version: 0.16.7
-  resolution: "@esbuild/android-x64@npm:0.16.7"
   conditions: os=android & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.16.7":
+"@esbuild/darwin-arm64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/darwin-arm64@npm:0.16.7"
+  resolution: "@esbuild/darwin-arm64@npm:0.16.17"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.16.7":
+"@esbuild/darwin-x64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/darwin-x64@npm:0.16.7"
+  resolution: "@esbuild/darwin-x64@npm:0.16.17"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.16.7":
+"@esbuild/freebsd-arm64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/freebsd-arm64@npm:0.16.7"
+  resolution: "@esbuild/freebsd-arm64@npm:0.16.17"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.16.7":
+"@esbuild/freebsd-x64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/freebsd-x64@npm:0.16.7"
+  resolution: "@esbuild/freebsd-x64@npm:0.16.17"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.16.7":
+"@esbuild/linux-arm64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/linux-arm64@npm:0.16.7"
+  resolution: "@esbuild/linux-arm64@npm:0.16.17"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.16.7":
+"@esbuild/linux-arm@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/linux-arm@npm:0.16.7"
+  resolution: "@esbuild/linux-arm@npm:0.16.17"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.16.7":
+"@esbuild/linux-ia32@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/linux-ia32@npm:0.16.7"
+  resolution: "@esbuild/linux-ia32@npm:0.16.17"
   conditions: os=linux & cpu=ia32
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.15.12":
+"@esbuild/linux-loong64@npm:0.16.17":
-  version: 0.15.12
+  version: 0.16.17
-  resolution: "@esbuild/linux-loong64@npm:0.15.12"
+  resolution: "@esbuild/linux-loong64@npm:0.16.17"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.16.7":
+"@esbuild/linux-mips64el@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/linux-loong64@npm:0.16.7"
+  resolution: "@esbuild/linux-mips64el@npm:0.16.17"
-  conditions: os=linux & cpu=loong64
-  languageName: node
-  linkType: hard
-
-"@esbuild/linux-mips64el@npm:0.16.7":
-  version: 0.16.7
-  resolution: "@esbuild/linux-mips64el@npm:0.16.7"
   conditions: os=linux & cpu=mips64el
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.16.7":
+"@esbuild/linux-ppc64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/linux-ppc64@npm:0.16.7"
+  resolution: "@esbuild/linux-ppc64@npm:0.16.17"
   conditions: os=linux & cpu=ppc64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.16.7":
+"@esbuild/linux-riscv64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/linux-riscv64@npm:0.16.7"
+  resolution: "@esbuild/linux-riscv64@npm:0.16.17"
   conditions: os=linux & cpu=riscv64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.16.7":
+"@esbuild/linux-s390x@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/linux-s390x@npm:0.16.7"
+  resolution: "@esbuild/linux-s390x@npm:0.16.17"
   conditions: os=linux & cpu=s390x
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.16.7":
+"@esbuild/linux-x64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/linux-x64@npm:0.16.7"
+  resolution: "@esbuild/linux-x64@npm:0.16.17"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.16.7":
+"@esbuild/netbsd-x64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/netbsd-x64@npm:0.16.7"
+  resolution: "@esbuild/netbsd-x64@npm:0.16.17"
   conditions: os=netbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.16.7":
+"@esbuild/openbsd-x64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/openbsd-x64@npm:0.16.7"
+  resolution: "@esbuild/openbsd-x64@npm:0.16.17"
   conditions: os=openbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.16.7":
+"@esbuild/sunos-x64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/sunos-x64@npm:0.16.7"
+  resolution: "@esbuild/sunos-x64@npm:0.16.17"
   conditions: os=sunos & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.16.7":
+"@esbuild/win32-arm64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/win32-arm64@npm:0.16.7"
+  resolution: "@esbuild/win32-arm64@npm:0.16.17"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.16.7":
+"@esbuild/win32-ia32@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/win32-ia32@npm:0.16.7"
+  resolution: "@esbuild/win32-ia32@npm:0.16.17"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.16.7":
+"@esbuild/win32-x64@npm:0.16.17":
-  version: 0.16.7
+  version: 0.16.17
-  resolution: "@esbuild/win32-x64@npm:0.16.7"
+  resolution: "@esbuild/win32-x64@npm:0.16.17"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -4630,7 +4616,7 @@ __metadata:
     "@types/tinycolor2": 1.4.3
     d3-interpolate: 1.4.0
     date-fns: 2.29.3
-    esbuild: 0.16.7
+    esbuild: 0.16.17
     eventemitter3: 4.0.7
     fast_array_intersect: 1.1.0
     history: 4.10.1
@@ -4671,7 +4657,7 @@ __metadata:
     "@rollup/plugin-commonjs": 23.0.2
     "@rollup/plugin-node-resolve": 15.0.1
     "@types/node": 18.11.9
-    esbuild: 0.16.7
+    esbuild: 0.16.17
     rimraf: 3.0.2
     rollup: 2.79.1
     rollup-plugin-dts: ^5.0.0
@@ -4715,7 +4701,7 @@ __metadata:
     cypress: 9.5.1
     cypress-file-upload: 5.0.8
     devtools-protocol: 0.0.1065144
-    esbuild: 0.16.7
+    esbuild: 0.16.17
     execa: 5.1.1
     lodash: 4.17.21
     mocha: 10.2.0
@@ -4891,7 +4877,7 @@ __metadata:
     "@types/react": 17.0.42
     "@types/react-dom": 17.0.14
     "@types/systemjs": ^0.20.6
-    esbuild: 0.16.7
+    esbuild: 0.16.17
     history: 4.10.1
     lodash: 4.17.21
     react: 17.0.2
@@ -4936,7 +4922,7 @@ __metadata:
     "@rollup/plugin-json": 5.0.1
     "@rollup/plugin-node-resolve": 15.0.1
     "@swc/helpers": 0.4.12
-    esbuild: 0.16.7
+    esbuild: 0.16.17
     rimraf: 3.0.2
     rollup: 2.79.1
     rollup-plugin-dts: ^5.0.0
@@ -5133,7 +5119,7 @@ __metadata:
     d3: 5.15.0
     date-fns: 2.29.3
     enzyme: 3.11.0
-    esbuild: 0.16.7
+    esbuild: 0.16.17
     expose-loader: 4.0.0
     hoist-non-react-statics: 3.3.2
     i18next: ^22.0.0
@@ -5216,18 +5202,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.6":
+"@humanwhocodes/config-array@npm:^0.11.6, @humanwhocodes/config-array@npm:^0.11.8":
-  version: 0.11.7
-  resolution: "@humanwhocodes/config-array@npm:0.11.7"
-  dependencies:
-    "@humanwhocodes/object-schema": ^1.2.1
-    debug: ^4.1.1
-    minimatch: ^3.0.5
-  checksum: cf506dc45d9488af7fbf108ea6ac2151ba1a25e6d2b94b9b4fc36d2c1e4099b89ff560296dbfa13947e44604d4ca4a90d97a4fb167370bf8dd01a6ca2b6d83ac
-  languageName: node
-  linkType: hard
-
-"@humanwhocodes/config-array@npm:^0.11.8":
   version: 0.11.8
   resolution: "@humanwhocodes/config-array@npm:0.11.8"
   dependencies:
@@ -19187,188 +19162,61 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-android-64@npm:0.15.12":
+"esbuild-loader@npm:2.21.0, esbuild-loader@npm:^2.10.0":
-  version: 0.15.12
+  version: 2.21.0
-  resolution: "esbuild-android-64@npm:0.15.12"
+  resolution: "esbuild-loader@npm:2.21.0"
-  conditions: os=android & cpu=x64
-  languageName: node
-  linkType: hard
-
-"esbuild-android-arm64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-android-arm64@npm:0.15.12"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"esbuild-darwin-64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-darwin-64@npm:0.15.12"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
-"esbuild-darwin-arm64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-darwin-arm64@npm:0.15.12"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"esbuild-freebsd-64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-freebsd-64@npm:0.15.12"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"esbuild-freebsd-arm64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-freebsd-arm64@npm:0.15.12"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"esbuild-linux-32@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-linux-32@npm:0.15.12"
-  conditions: os=linux & cpu=ia32
-  languageName: node
-  linkType: hard
-
-"esbuild-linux-64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-linux-64@npm:0.15.12"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
-"esbuild-linux-arm64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-linux-arm64@npm:0.15.12"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"esbuild-linux-arm@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-linux-arm@npm:0.15.12"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
-"esbuild-linux-mips64le@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-linux-mips64le@npm:0.15.12"
-  conditions: os=linux & cpu=mips64el
-  languageName: node
-  linkType: hard
-
-"esbuild-linux-ppc64le@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-linux-ppc64le@npm:0.15.12"
-  conditions: os=linux & cpu=ppc64
-  languageName: node
-  linkType: hard
-
-"esbuild-linux-riscv64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-linux-riscv64@npm:0.15.12"
-  conditions: os=linux & cpu=riscv64
-  languageName: node
-  linkType: hard
-
-"esbuild-linux-s390x@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-linux-s390x@npm:0.15.12"
-  conditions: os=linux & cpu=s390x
-  languageName: node
-  linkType: hard
-
-"esbuild-loader@npm:^2.10.0":
-  version: 2.20.0
-  resolution: "esbuild-loader@npm:2.20.0"
   dependencies:
-    esbuild: ^0.15.6
+    esbuild: ^0.16.17
     joycon: ^3.0.1
     json5: ^2.2.0
     loader-utils: ^2.0.0
     tapable: ^2.2.0
-    webpack-sources: ^2.2.0
+    webpack-sources: ^1.4.3
   peerDependencies:
     webpack: ^4.40.0 || ^5.0.0
-  checksum: 81faee7155b35af1fdef3dffa273a14ec83e56b9efa1efb76cb1eb64964dd738809c147a87ab9d3507de11946eed51fd1ee42d476b2c9654cbda145da0d9479b
+  checksum: a0456ed7794e2c220a6068e92d739bc19765bff352bf7e44442aa8127631cc517ecd02a3ee969e31fa6b6a91befeac928296488c95e3818a776cd3b11d46348c
   languageName: node
   linkType: hard
 
-"esbuild-netbsd-64@npm:0.15.12":
+"esbuild-plugin-browserslist@npm:^0.6.0":
-  version: 0.15.12
+  version: 0.6.0
-  resolution: "esbuild-netbsd-64@npm:0.15.12"
+  resolution: "esbuild-plugin-browserslist@npm:0.6.0"
-  conditions: os=netbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"esbuild-openbsd-64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-openbsd-64@npm:0.15.12"
-  conditions: os=openbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"esbuild-sunos-64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-sunos-64@npm:0.15.12"
-  conditions: os=sunos & cpu=x64
-  languageName: node
-  linkType: hard
-
-"esbuild-windows-32@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-windows-32@npm:0.15.12"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
-"esbuild-windows-64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-windows-64@npm:0.15.12"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
-"esbuild-windows-arm64@npm:0.15.12":
-  version: 0.15.12
-  resolution: "esbuild-windows-arm64@npm:0.15.12"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"esbuild@npm:0.16.7":
-  version: 0.16.7
-  resolution: "esbuild@npm:0.16.7"
   dependencies:
-    "@esbuild/android-arm": 0.16.7
+    debug: ^4.3.4
-    "@esbuild/android-arm64": 0.16.7
+    zod: ^3.19.1
-    "@esbuild/android-x64": 0.16.7
+  peerDependencies:
-    "@esbuild/darwin-arm64": 0.16.7
+    browserslist: ^4.21.4
-    "@esbuild/darwin-x64": 0.16.7
+    esbuild: ~0.16.1
-    "@esbuild/freebsd-arm64": 0.16.7
+  checksum: 8642d107e9f9f6f7216e819794084f6d512dbbbeec77fcafa9fdbd185a2831dcd6524e796c8e770a66974fc7210534ed6857e1705bf600e1dea14e8ca5941f50
-    "@esbuild/freebsd-x64": 0.16.7
+  languageName: node
-    "@esbuild/linux-arm": 0.16.7
+  linkType: hard
-    "@esbuild/linux-arm64": 0.16.7
+
-    "@esbuild/linux-ia32": 0.16.7
+"esbuild@npm:0.16.17, esbuild@npm:^0.16.17":
-    "@esbuild/linux-loong64": 0.16.7
+  version: 0.16.17
-    "@esbuild/linux-mips64el": 0.16.7
+  resolution: "esbuild@npm:0.16.17"
-    "@esbuild/linux-ppc64": 0.16.7
+  dependencies:
-    "@esbuild/linux-riscv64": 0.16.7
+    "@esbuild/android-arm": 0.16.17
-    "@esbuild/linux-s390x": 0.16.7
+    "@esbuild/android-arm64": 0.16.17
-    "@esbuild/linux-x64": 0.16.7
+    "@esbuild/android-x64": 0.16.17
-    "@esbuild/netbsd-x64": 0.16.7
+    "@esbuild/darwin-arm64": 0.16.17
-    "@esbuild/openbsd-x64": 0.16.7
+    "@esbuild/darwin-x64": 0.16.17
-    "@esbuild/sunos-x64": 0.16.7
+    "@esbuild/freebsd-arm64": 0.16.17
-    "@esbuild/win32-arm64": 0.16.7
+    "@esbuild/freebsd-x64": 0.16.17
-    "@esbuild/win32-ia32": 0.16.7
+    "@esbuild/linux-arm": 0.16.17
-    "@esbuild/win32-x64": 0.16.7
+    "@esbuild/linux-arm64": 0.16.17
+    "@esbuild/linux-ia32": 0.16.17
+    "@esbuild/linux-loong64": 0.16.17
+    "@esbuild/linux-mips64el": 0.16.17
+    "@esbuild/linux-ppc64": 0.16.17
+    "@esbuild/linux-riscv64": 0.16.17
+    "@esbuild/linux-s390x": 0.16.17
+    "@esbuild/linux-x64": 0.16.17
+    "@esbuild/netbsd-x64": 0.16.17
+    "@esbuild/openbsd-x64": 0.16.17
+    "@esbuild/sunos-x64": 0.16.17
+    "@esbuild/win32-arm64": 0.16.17
+    "@esbuild/win32-ia32": 0.16.17
+    "@esbuild/win32-x64": 0.16.17
   dependenciesMeta:
     "@esbuild/android-arm":
       optional: true
@@ -19416,84 +19264,7 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 53732942109a8a22d647810d90623dd48418f49fd9d1613688585a6f81677fd8525f53658778a7b92f1124cdfbf73e6efb74385be52cf6aa11aa97f8397ec93c
+  checksum: 4c2cc609ecfb426554bc3f75beb92d89eb2d0c515cfceebaa36c7599d7dcaab7056b70f6d6b51e72b45951ddf9021ee28e356cf205f8e42cc055d522312ea30c
-  languageName: node
-  linkType: hard
-
-"esbuild@npm:^0.15.6":
-  version: 0.15.12
-  resolution: "esbuild@npm:0.15.12"
-  dependencies:
-    "@esbuild/android-arm": 0.15.12
-    "@esbuild/linux-loong64": 0.15.12
-    esbuild-android-64: 0.15.12
-    esbuild-android-arm64: 0.15.12
-    esbuild-darwin-64: 0.15.12
-    esbuild-darwin-arm64: 0.15.12
-    esbuild-freebsd-64: 0.15.12
-    esbuild-freebsd-arm64: 0.15.12
-    esbuild-linux-32: 0.15.12
-    esbuild-linux-64: 0.15.12
-    esbuild-linux-arm: 0.15.12
-    esbuild-linux-arm64: 0.15.12
-    esbuild-linux-mips64le: 0.15.12
-    esbuild-linux-ppc64le: 0.15.12
-    esbuild-linux-riscv64: 0.15.12
-    esbuild-linux-s390x: 0.15.12
-    esbuild-netbsd-64: 0.15.12
-    esbuild-openbsd-64: 0.15.12
-    esbuild-sunos-64: 0.15.12
-    esbuild-windows-32: 0.15.12
-    esbuild-windows-64: 0.15.12
-    esbuild-windows-arm64: 0.15.12
-  dependenciesMeta:
-    "@esbuild/android-arm":
-      optional: true
-    "@esbuild/linux-loong64":
-      optional: true
-    esbuild-android-64:
-      optional: true
-    esbuild-android-arm64:
-      optional: true
-    esbuild-darwin-64:
-      optional: true
-    esbuild-darwin-arm64:
-      optional: true
-    esbuild-freebsd-64:
-      optional: true
-    esbuild-freebsd-arm64:
-      optional: true
-    esbuild-linux-32:
-      optional: true
-    esbuild-linux-64:
-      optional: true
-    esbuild-linux-arm:
-      optional: true
-    esbuild-linux-arm64:
-      optional: true
-    esbuild-linux-mips64le:
-      optional: true
-    esbuild-linux-ppc64le:
-      optional: true
-    esbuild-linux-riscv64:
-      optional: true
-    esbuild-linux-s390x:
-      optional: true
-    esbuild-netbsd-64:
-      optional: true
-    esbuild-openbsd-64:
-      optional: true
-    esbuild-sunos-64:
-      optional: true
-    esbuild-windows-32:
-      optional: true
-    esbuild-windows-64:
-      optional: true
-    esbuild-windows-arm64:
-      optional: true
-  bin:
-    esbuild: bin/esbuild
-  checksum: b344d52c57616917719ac2fa38a58eba7d3c9d2a295116272b3e16a4f6327dc42549274c06560d301f9235a6fe31ccb45499b31d04820dfb8527d89d9766a2ad
   languageName: node
   linkType: hard
 
@@ -22150,6 +21921,7 @@ __metadata:
     baron: 3.0.3
     blob-polyfill: 7.0.20220408
     brace: 0.11.1
+    browserslist: ^4.21.4
     calculate-size: 1.1.1
     centrifuge: 3.1.0
     classnames: 2.3.2
@@ -22169,6 +21941,9 @@ __metadata:
     emotion: 11.0.0
     enzyme: 3.11.0
     enzyme-to-json: 3.6.2
+    esbuild: 0.16.17
+    esbuild-loader: 2.21.0
+    esbuild-plugin-browserslist: ^0.6.0
     eslint: 8.31.0
     eslint-config-prettier: 8.6.0
     eslint-plugin-import: ^2.26.0
@@ -39875,6 +39650,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"zod@npm:^3.19.1":
+  version: 3.20.2
+  resolution: "zod@npm:3.20.2"
+  checksum: 04172f7e9350372684ccd298d4716908edc9113751295b6c4e1b3ea84e2af8997e504b33ba36f4741417bb2a5dc90bfd40501f6b0e7389df10e42a63d6d8366c
+  languageName: node
+  linkType: hard
+
 "zwitch@npm:^1.0.0":
   version: 1.0.5
   resolution: "zwitch@npm:1.0.5"