js -> ts

build/webpack.base.conf.js

@@ -14,7 +14,7 @@ function resolve(dir) {
 module.exports = {
   target: 'node',
   context: resolve('src'),
-  entry: './module.js',
+  entry: './module.ts',
   output: {
     filename: "module.js",
     path: resolve('dist'),
@@ -49,15 +49,10 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
-        exclude: /(external)/,
+        test: /\.ts$/,
+        exclude: /node_modules/,
         use: {
-          loader: 'babel-loader',
-          query: {
-            presets: [
-              require.resolve('babel-preset-env')
-            ]
-          }
+          loader: 'ts-loader'
         }
       },
       {

build/webpack.prod.conf.js

@@ -2,4 +2,4 @@ const baseWebpackConfig = require('./webpack.base.conf');
 
 var conf = baseWebpackConfig;
 
-module.exports = baseWebpackConfig;
+module.exports = conf;

package.json

@@ -11,16 +11,21 @@
   "author": "CorpGlory",
   "license": "MIT",
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.0",
+    "@types/grafana": "github:CorpGlory/types-grafana",
+    "@types/jquery": "^3.3.6",
+    "@types/lodash": "^4.14.116",
+    "@types/moment": "^2.13.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.11",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "loader-utils": "^1.1.0",
+    "mini-css-extract-plugin": "^0.4.2",
     "node-sass": "^4.9.0",
     "sass-loader": "^7.0.1",
     "style-loader": "^0.21.0",
-    "webpack": "^3.6.0"
+    "ts-loader": "^5.1.0",
+    "typescript": "^3.0.3",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.1.0"
   }
 }

src/module.js → src/module.ts

@@ -1,20 +1,42 @@
-import _ from 'lodash';
-import $ from 'jquery';
-import moment from 'moment';
-
 import { MetricsPanelCtrl } from 'grafana/app/plugins/sdk';
 import { appEvents } from 'grafana/app/core/core';
 
 import './css/panel.base.scss';
 import './css/panel.dark.scss';
 import './css/panel.light.scss';
 
+import _ from 'lodash';
+import $ from 'jquery';
+import moment from 'moment';
+
+
+// TODO: add to types-grafana
+declare var grafanaBootData: any;
 
 const PANEL_DEFAULTS = {
   backendUrl: ''
 }
 
 class Ctrl extends MetricsPanelCtrl {
+  private _backendSrv;
+  private _panelPath: string;
+  private _partialsPath: string;
+  public showRows: Object;
+  private _element;
+  private rangeOverride: {
+    from: string,
+    to: string
+  };
+  private rangeOverrideRaw: {
+    from: string,
+    to: string
+  };
+  private datePickerShow: {
+    from: Boolean,
+    to: Boolean
+  };
+
+  static templateUrl = 'partials/module.html';
 
   constructor($scope, $injector, backendSrv) {
     super($scope, $injector);
@@ -51,11 +73,11 @@ class Ctrl extends MetricsPanelCtrl {
   }
 
   _initStyles() {
-    window.System.import(`${this._panelPath}/css/panel.base.css!`);
+    (<any>window).System.import(`${this._panelPath}/css/panel.base.css!`);
     if(grafanaBootData.user.lightTheme) {
-      window.System.import(`${this._panelPath}/css/panel.light.css!`);
+      (<any>window).System.import(`${this._panelPath}/css/panel.light.css!`);
     } else {
-      window.System.import(`${this._panelPath}/css/panel.dark.css!`);
+      (<any>window).System.import(`${this._panelPath}/css/panel.dark.css!`);
     }
   }
 
@@ -162,6 +184,4 @@ class Ctrl extends MetricsPanelCtrl {
 
 }
 
-Ctrl.templateUrl = 'partials/module.html';
-
 export { Ctrl as PanelCtrl }

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "rootDir": "./src",
+    "jsx": "react",
+    "module": "esnext",
+    "declaration": false,
+    "allowSyntheticDefaultImports": true,
+    "inlineSourceMap": false,
+    "sourceMap": true,
+    "noEmitOnError": false,
+    "emitDecoratorMetadata": false,
+    "experimentalDecorators": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": false,
+    "noImplicitUseStrict": false,
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "baseUrl": "./src"
+  }
+}