grafana / grafana/plugin-tools
Feat: Add option for using react-jsx transform
- Dominant language
- TypeScript
- Stars
- 89
- Forks
- 57
- Avg merge
- 3d 17h
- Merged PRs (30d)
- 37
Description
### Which areas does this feature request relate to
- [x] Create Plugin
- [ ] Sign Plugin
- [ ] Plugin E2E
- [ ] Plugin Meta Extractor
- [ ] Documentation
### Problem
👋 I'd like to use the [newer react-jsx transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) for our JSX, removing the need for having a `React` import in every JSX/TSX file. This currently requires me to modify quite a few of the default configs in our repository, and I'd prefer to use a create-plugin option. It is also worth noting that using the newer transform will be required for plugins to [update to React 19](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#new-jsx-transform-is-now-required).
### Solution
Add a new flag similar to `useReactRouterV6`, `useReactJsxRuntime`.
Omit https://github.com/grafana/plugin-tools/blob/5d8e7c42ee95a284f21e44cacc2bb06f668ec42c/packages/create-plugin/templates/common/.config/jest/mocks/react-inlinesvg.tsx#L5
#### swc
https://swc.rs/docs/configuration/compilation#jsctransformreactruntime
https://github.com/grafana/plugin-tools/blob/5d8e7c42ee95a284f21e44cacc2bb06f668ec42c/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts#L126
```ts
jsc: {
// ...
transform: {
react: {
runtime: 'automatic',
},
},
},
```
https://github.com/grafana/plugin-tools/blob/5d8e7c42ee95a284f21e44cacc2bb06f668ec42c/packages/create-plugin/templates/common/.config/rspack/rspack.config.ts#L113
```ts
jsc: {
// ...
transform: {
// ...
react: {
// ...
runtime: 'automatic',
},
},
},
```
`react` is marked as an external, need to confirm if this will include `react/jsx-runtime` or if that needs to be listed separately.
https://github.com/grafana/plugin-tools/blob/5d8e7c42ee95a284f21e44cacc2bb06f668ec42c/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts#L70
https://github.com/grafana/plugin-tools/blob/5d8e7c42ee95a284f21e44cacc2bb06f668ec42c/packages/create-plugin/templates/common/.config/rspack/rspack.config.ts#L56
https://github.com/grafana/plugin-tools/blob/5d8e7c42ee95a284f21e44cacc2bb06f668ec42c/packages/create-plugin/templates/common/.config/jest.config.js#L29
```ts
jsc: {
// ...
transform: {
react: {
runtime: 'automatic',
},
},
},
```
#### tsconfig
https://github.com/grafana/plugin-tools/blob/5d8e7c42ee95a284f21e44cacc2bb06f668ec42c/packages/create-plugin/templates/common/.config/tsconfig.json#L8
```jsonc
"compilerOptions": {
// ...
"jsx": "react-jsx"
}
```
### Alternatives
_No response_
### Additional context
_No response_
### Are you interested in contributing the solution?
- [x] Yes
- [ ] No
Contributor guide
Assessment
This issue has not been assessed yet.