revert back to the old JSX transform

[mayank99]

Changes

This reverts the new JSX transform added in #2102 that shipped with 3.12.0.

This is because we immediately started receiving reports that it doesn't work for React 17 users that use Webpack 5. I did some digging and found that the React team was made aware of this issue back in 2020, and they willingly decided not to fix it until v18 (bad decision from them imo). And yes, this means their lofty claims about the new transform being supported in older React versions are untrue.

The main reason for using the new JSX transform was that it was "required" for React 19. However, upon reading closely, it seems like it will only raise a warning, not an error, so it is in fact not "required". Further, I tested iTwinUI 3.11.3 (which uses the old JSX transform) with React 19 RC and did not even see any warnings.

This does mean that we are stuck with the older, less performant JSX runtime for the foreseeable future. I'm making this change reluctantly, but it seems to work in React 17-19 and is the least frustrating outcome for our users (the majority of whom are still using React 17). I also tried to find a "best of both worlds" solution for the last couple days, with no luck.

I've strategically made the smallest change possible instead of fully reverting #2102. Only two source files (StatusIconMap.tsx and selectionColumn.tsx) needed to be changed to add a missing React import. Everything else (mainly test files) continue to use the new transform, since these are not relevant for our users. I also made some small unrelated changes along the way.

Testing

Veridied that the build output now contains React.createElement everywhere.

Docs

N/A. Added patch changeset to be released in 3.12.1

[Ben-Pusey-Bentley]

I think the vitest.config.ts file needs esbuild.jsx to be set to 'auotmatic' in order to build our test.tsx unit test files with the new JSX transform. Docs: https://vitejs.dev/config/shared-options.html#esbuild https://esbuild.github.io/api/#jsx.

[mayank99]

I think the vitest.config.ts file needs esbuild.jsx to be set to 'auotmatic' in order to build our test.tsx unit test files with the new JSX transform.

Thanks, fixed. I was trying to figure out how to make it use the tsconfig.test.json file but it seems like that's not possible.

[Ben-Pusey-Bentley]

Nit: The Docs section of the PR description should acknowledge the changeset. Otherwise, LGTM.