tsconf and "jsx": "react-jsxdev"

[stevenroussey-privicy]

Is your proposal related to a problem?

Some options for Typescript you want for production and some for development. The one that will need support soon is "jsx": "react-jsxdev" compiler option for React 17. You want "react-jsx" for production though.

Describe the solution you'd like

One solution is to look for tsconfig.dev.json and use that in development if it exists.

Second solution is to set these values directly and ignore whatever jsx directive is in tsconf.json

Additional context

Typescript 4.1 RC announcement

[karlhorky]

Just found this one now too, due to the final version of TypeScript 4.1 being released: https://devblogs.microsoft.com/typescript/announcing-typescript-4-1/

My question would be: what are the exact functional differences between react-jsxdev and react-jsx? Maybe cc @gaearon ?

Edit: Oh, reading through the RFC, it looks like the DEV mode passes some additional information seemingly for the reason "That way we can easily error if the transform doesn't match.":

• Pass a flag determining if it was static or not.
• Pass __source and __self separately from other props.

I tried reading through Introducing the New JSX Transform on the React blog and similar resources, but was unable to quickly find an answer to this.

[srigi]

I found that with Webpack, you can set this dynamically in webpack.config.js using ts-loader. Just ommit jsx in tsconfig.json and...

  {
    test: /\.tsx?$/,
    exclude: 'node_modules',
    use: {
      loader: 'ts-loader',
      options: {
        compilerOptions: {
          jsx:
            process.env.NODE_ENV === 'development'
              ? 'react-jsxdev'
              : 'react-jsx',
        },
      },
    },
  },