Plugins: Support es5 plugins extending es6 core classes (#32664)

* Plugins: Support es5 plugins extending es6 core classes

* Make all base classes backward compatible

packages/grafana-data/src/types/datasource.ts

@@ -11,6 +11,7 @@ import { ScopedVars } from './ScopedVars';
 import { CoreApp } from './app';
 import { LiveChannelSupport } from './live';
 import { CustomVariableSupport, DataSourceVariableSupport, StandardVariableSupport } from './variables';
+import { makeClassES5Compatible } from '../utils/makeClassES5Compatible';
 
 export interface DataSourcePluginOptionsEditorProps<JSONData = DataSourceJsonData, SecureJSONData = {}> {
   options: DataSourceSettings<JSONData, SecureJSONData>;
@@ -167,7 +168,7 @@ export interface DataSourceConstructor<
  * Although this is a class, datasource implementations do not *yet* need to extend it.
  * As such, we can not yet add functions with default implementations.
  */
-export abstract class DataSourceApi<
+abstract class DataSourceApi<
   TQuery extends DataQuery = DataQuery,
   TOptions extends DataSourceJsonData = DataSourceJsonData
 > {
@@ -631,3 +632,8 @@ export abstract class LanguageProvider {
   abstract start: () => Promise<Array<Promise<any>>>;
   startTask?: Promise<any[]>;
 }
+
+//@ts-ignore
+DataSourceApi = makeClassES5Compatible(DataSourceApi);
+
+export { DataSourceApi };

packages/grafana-data/src/utils/index.ts

@@ -17,3 +17,4 @@ export { locationUtil } from './location';
 export { urlUtil, UrlQueryMap, UrlQueryValue, serializeStateToUrlParam } from './url';
 export { DataLinkBuiltInVars, mapInternalLinkToExplore } from './dataLinks';
 export { DocsId } from './docs';
+export { makeClassES5Compatible } from './makeClassES5Compatible';

packages/grafana-data/src/utils/makeClassES5Compatible.ts

@@ -0,0 +1,16 @@
+/**
+ * @beta
+ * Proxies a ES6 class so that it can be used as a base class for an ES5 class
+ */
+export function makeClassES5Compatible<T>(ES6Class: T): T {
+  return (new Proxy(ES6Class as any, {
+    // ES5 code will call it like a function using super
+    apply(target, self, argumentsList) {
+      if (typeof Reflect === 'undefined' || !Reflect.construct) {
+        alert('Browser is too old');
+      }
+
+      return Reflect.construct(target, argumentsList, self.constructor);
+    },
+  }) as unknown) as T;
+}

packages/grafana-runtime/src/utils/DataSourceWithBackend.ts

@@ -6,6 +6,7 @@ import {
   DataQuery,
   DataSourceJsonData,
   ScopedVars,
+  makeClassES5Compatible,
 } from '@grafana/data';
 import { Observable, of } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
@@ -43,7 +44,7 @@ export interface HealthCheckResult {
  *
  * @public
  */
-export class DataSourceWithBackend<
+class DataSourceWithBackend<
   TQuery extends DataQuery = DataQuery,
   TOptions extends DataSourceJsonData = DataSourceJsonData
 > extends DataSourceApi<TQuery, TOptions> {
@@ -186,3 +187,8 @@ export class DataSourceWithBackend<
     });
   }
 }
+
+//@ts-ignore
+DataSourceWithBackend = makeClassES5Compatible(DataSourceWithBackend);
+
+export { DataSourceWithBackend };

public/app/features/annotations/event_editor.ts

@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import { coreModule } from 'app/core/core';
-import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { AnnotationEvent, dateTime } from '@grafana/data';
 import { AnnotationsSrv } from './all';
+import { MetricsPanelCtrl } from '../panel/metrics_panel_ctrl';
 
 export class EventEditorCtrl {
   panelCtrl: MetricsPanelCtrl;

public/app/features/annotations/event_manager.ts

@@ -8,8 +8,8 @@ import {
   DEFAULT_ANNOTATION_COLOR,
   REGION_FILL_ALPHA,
 } from '@grafana/ui';
+import { MetricsPanelCtrl } from '../panel/metrics_panel_ctrl';
 
-import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { AnnotationEvent } from '@grafana/data';
 
 export class EventManager {

public/app/features/dashboard/components/PanelEditor/AngularPanelOptions.tsx

@@ -8,10 +8,10 @@ import { AngularComponent, getAngularLoader } from '@grafana/runtime';
 // Types
 import { PanelModel, DashboardModel } from '../../state';
 import { PanelPlugin, PanelPluginMeta } from '@grafana/data';
-import { PanelCtrl } from 'app/plugins/sdk';
 import { changePanelPlugin } from '../../state/actions';
 import { StoreState } from 'app/types';
 import { getSectionOpenState, saveSectionOpenState } from './state/utils';
+import { PanelCtrl } from 'app/features/panel/panel_ctrl';
 
 interface OwnProps {
   panel: PanelModel;
@@ -89,7 +89,7 @@ export class AngularPanelOptionsUnconnected extends PureComponent<Props> {
       tab.isOpen = getSectionOpenState(tab.title, i === 0);
 
       template += `
-      <div class="panel-options-group" ng-cloak>        
+      <div class="panel-options-group" ng-cloak>
         <div class="panel-options-group__header" ng-click="toggleOptionGroup(${i})" aria-label="${tab.title} section">
           <div class="panel-options-group__icon">
             <icon name="ctrl.editorTabs[${i}].isOpen ? 'angle-down' : 'angle-right'"></icon>

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

@@ -6,7 +6,6 @@ import './time_regions_form';
 import template from './template';
 import _ from 'lodash';
 
-import { MetricsPanelCtrl } from 'app/plugins/sdk';
 import { DataProcessor } from './data_processor';
 import { axesEditorComponent } from './axes_editor';
 import config from 'app/core/config';
@@ -28,6 +27,7 @@ import { ThresholdMapper } from 'app/features/alerting/state/ThresholdMapper';
 import { getAnnotationsFromData } from 'app/features/annotations/standardAnnotationSupport';
 import { appEvents } from '../../../core/core';
 import { ZoomOutEvent } from '../../../types/events';
+import { MetricsPanelCtrl } from 'app/features/panel/metrics_panel_ctrl';
 
 export class GraphCtrl extends MetricsPanelCtrl {
   static template = template;

public/app/plugins/sdk.ts

@@ -1,7 +1,12 @@
-import { PanelCtrl } from 'app/features/panel/panel_ctrl';
-import { MetricsPanelCtrl } from 'app/features/panel/metrics_panel_ctrl';
-import { QueryCtrl } from 'app/features/panel/query_ctrl';
-import { alertTab } from 'app/features/alerting/AlertTabCtrl';
+import { makeClassES5Compatible } from '@grafana/data';
 import { loadPluginCss } from '@grafana/runtime';
+import { PanelCtrl as PanelCtrlES6 } from 'app/features/panel/panel_ctrl';
+import { MetricsPanelCtrl as MetricsPanelCtrlES6 } from 'app/features/panel/metrics_panel_ctrl';
+import { QueryCtrl as QueryCtrlES6 } from 'app/features/panel/query_ctrl';
+import { alertTab } from 'app/features/alerting/AlertTabCtrl';
+
+const PanelCtrl = makeClassES5Compatible(PanelCtrlES6);
+const MetricsPanelCtrl = makeClassES5Compatible(MetricsPanelCtrlES6);
+const QueryCtrl = makeClassES5Compatible(QueryCtrlES6);
 
 export { PanelCtrl, MetricsPanelCtrl, QueryCtrl, alertTab, loadPluginCss };

scripts/webpack/webpack.dev.js

@@ -58,9 +58,11 @@ module.exports = (env = {}) =>
               options: {
                 cache: true,
               },
+              memoryLimit: 4096,
             },
             typescript: {
               mode: 'write-references',
+              memoryLimit: 4096,
               diagnosticOptions: {
                 semantic: true,
                 syntactic: true,