Develop plugins with TypeScript

Grafana Plugin Development
1

Hi, Did someone try develop plugins with TypeScript instead of JS / ES6?
I did try to write some plugins based on ES6 and it was pretty straightforward and working fine.
Howerver when I tried to do the same with TypeScript it got pretty messy…
It seems like the TS Compiler tries to compile every and each module that imported in the plugin and every module that imported in the imported modules and so on…
The problem that the compiler does not manage to resolve all the imported module locations and all the transpiling process fails
I’m not that familiar yet with TS and its compiler so I maybe missing some confiugrations.

Did anyone managed to create working plugin using TypeScript?

2

There is only one plugin written in TypeScript so far: https://github.com/Vertamedia/clickhouse-grafana However, it is a bit messy with TS and JS files mixed together.

You can control a lot of settings (where files are generated etc.) with tsconfig.json file. For reference, here is Grafana’s tsconfig.json file

3

Hey.
There is another TypeScript plugin developed by me: progress-list

It is a proper typescript project based on webpack with grafana typings. No pure js code inside.

If you need to use require() to load a lib without typings, then you need to add
"types": ["node"] to tsconfig.json. example

4

I will be documenting this more soon but here is a starter repo to get started writing a data source with TypeScript. It has Karma configured to work with TypeScript and uses a mocks package for the Grafana SDK that allows unit testing. The mocks package contains a common.d.ts that can be used for Typings.

@jonyrock nice work, I will dig a bit deeper into your stuff and try and get that into the documentation as well.

1 Like
5

Hey @daniellee
We can make nice typings together.

6

haha! Your typings are probably much nicer than mine. I created the mocks project for a plugin I’m working on and on purpose didn’t want typings for the whole of Grafana.

We are thinking about creating a more restricted interface to Grafana for plugins. Right now a plugin has access to everything which makes Grafana development a bit harder as we never know if we are going to break plugins. I will be looking more into this next week and then I’ll let you know more.

P.S are you going to submit those plugins to Grafana.com? You can send a PR or create an issue on https://github.com/grafana/grafana-plugin-repository.

1 Like
7

Hi daniellee,
I follow the the same instructions that described for the template, but when i change some sources, changes not affected in the UI. How can i solve this problem?
instaructions that i followed:
-install grafana(v5.2)
-clone the the template into data/plugins directory(i want to develop built-in table plugin, thus table plugin source files copied to the src directory of template)
-yarn install
-grunt
-grunt watch

but when i login into grafana changes didnt affected in the ui. what is go wrong?is there any other configs that i missed? i also created a custom.ini file with app_mode = development in the conf directory.