Confusion about TypeScript support

Grafana Plugin Development
1

I’m trying to get started with plugin (panel) development, and I feel I’ve hit a bit of an immediate stumbling block.

When I look at one of the native panels, such as singlestat, I see that it’s written in TypeScript, and I don’t find any evidence that it ever gets compiled/transpiled to ES6 or anything else before it made available on the server. Is that native TS support a special privilege given to the panels that ship with Grafana? It seems like anything I try to do to recreate that yields busted panels.

Copying singlestat entirely (in the public/app dir), and only changing the ID in plugin.json breaks the panel. Copying singlestat to the conf plugin directory also gives a broken panel. Changing the id of the existing singlestat plugin (without making a copy) breaks the panel. Even just moving the singlestat plugin from public/app to the conf plugin dir breaks it.

Why is it that these plugins function only under very specific circumstances? Sorry if this is a totally obvious answer, but I can’t find anything in the docs that talks about TypeScript sometimes being supported, or an intrinsic link between the plugin ID and other parts of the code (classes, icons, etc). I just can’t figure out why changing one character of the plugin’s id would cause it to break.

I appreciate any help!

2

Also something I’m curious about: why is that when I change the version number for singlestat (e.g., from 5.0.0 to 5.0.1) that is immediately reflected in the app, but if I totally wipe out module.html or editor.html the app seems to have a memory of what those files are?

3

Typescript gets converted to javascript during the webpack process, the browser doesn’t natively parse typescript.

The plugins that are in core grafana are both in typescript and refer to paths in grafana source.

The best way to get started is to use something like this as a template: https://github.com/grafana/clock-panel

There is also a fork of singlestat here: https://github.com/black-mirror-1/singlestat-math
(that one does not use webpack though)

I’ve been wanting to create a “model” panel and datasource plugin for a while now to be used as starter, or a generator of some kind.

4

regarding changing versions, your browser will be caching files. If you open up chrome dev tools and use force reload with no cache, it won’t behave that way.

5

The docs really go out of their way at the moment to make it seem like plugins can be written and distributed in TypeScript. Getting over the initial hump with developing for Grafana has been really challenging. Between inconsistent and incorrect docs, lack of docs for the API, and lots of esoteric sample code without comments, it hasn’t been a fun or easy process to get even the most basic things done.