How to add jsx-control-statements

[silvanaweb]

Clear and concise description of the problem

There is a plugin used in Babel to add control statements (If, etc) namned: jsx-control-statements.
Is there a way to add the same feature in Vite?

Suggested solution

Have a plugin in Vite that does the same work.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

It can be achieved by using babel.plugin options in plugin-react if you are using plugin-react.
https://stackblitz.com/edit/vitejs-vite-kaynvt?file=vite.config.js&terminal=dev

[silvanaweb]

Thank you, that is what we have done. We hoped there was another solution because the idea was to move out from babel ;)

[sapphi-red]

It is possible to create one with swc but I do not think it will improve perf.
Also esbuild does not provide a way to modify AST, so it is not possible to use esbuild's AST.

[jeron-diovis]

This doesn't seem to work. Statement is transformed, but it happens before rest of jsx is processed. That is, transformed js expressions is rendered as text.

[sapphi-red]

@jeron-diovis plugin-react now uses esbuild to transpile JSX. It seems jsx-control-statements requires JSX to be transformed by babel.
https://stackblitz.com/edit/vitejs-vite-qzd3ww?file=vite.config.js&terminal=dev
It looks like adding JSX transform works.

[ArnaudBarre]

Related to this vitejs/vite-plugin-react#73, this is a limitation of the plugin.

To make this works with tools that need a development transformation, you should use https://vitejs.dev/config/#conditional-config and use https://www.npmjs.com/package/@babel/plugin-transform-react-jsx-development in development.

Note: This will make your build a lot slower because you will need to run Babel for production.

[kirankunigiri]

I just wrote a native Vite plugin that solves this issue with react and typescript. It has the If, Choose, When, and Otherwise components from jsx-control-statements (the others couldn't be made due to typescript issues). The plugin does code transformation on those components to turn them into actual ternary operators. Feel free to use it and give any feedback.

https://github.com/kirankunigiri/vite-plugin-react-control-statements

[jeron-diovis]

Tried it, and it works like a charm. Thank you!

Can you give an advice what is the proper way to declare those components types globally without copy-pasting them? Like, "export types from package to global scope".
I went with this:

// jcs.d.ts
import * as JCS from 'vite-plugin-react-control-statements'

declare global {
  const { If, Choose, When, Otherwise } = JCS
}

Which works, but I'm curious is there a better way?

[kirankunigiri]

That's probably the best way to do it. I also just added a new package @types/vite-plugin-react-control-statements that adds the global types automatically so you don't have to declare it yourself. I've added documentation about it to the README docs.