grafana / grafana/plugin-tools

Feat: Add option for using react-jsx transform

Open
#1,955 2 comments 0 reactions 0 assignees View on GitHub
enhancement no stalebot
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.