Thoughts about wrapping js in React for Panel Plugins?

Hi All,

So I maintain a handful of community panel plugins and about half of them were originally Angular plugins so when Grafana switched to React, I pulled out the vanillaJS and wrapped it in a React canvas so that it would continue to work in newer versions of Grafana.

I know that probably Grafana would prefer everything to just be written in Typescript React, but I guess I’m wondering what are the downsides to just leaving it in plain JS. It’s much easier to write/understand what’s going on imo. I’m not trying to start a vanillaJS vs React war here, just asking about this specific case. Do the plugin reviewers care/have a preference?

There are legit cases where writing things in plain web apis is necessary. React is a complication for “lower level” cases. A simple example is drag and drop. you can write it in react, but, it’ll be a big complication. Popular libraries for drag and drop implement the whole thing in Plain APIs and mainly offer an abstraction for this with some react utilities.

It is the same with charting. drawing things in canvas with react is harder than with Plain APIs

In a legit case like this It’s best to migrate the JS code to typescript and keep the canvas wrapper if it works without hacking direct dom apis that can go outside of react rendering scope (use portals?).

Other regular visual parts such as forms, information display not done via canvas or complex web APIs should be done with React components.