revert back to the old JSX transform (#2122)

.changeset/wild-bags-begin.md

@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+The new JSX transform added in [v3.12.0](https://github.com/iTwin/iTwinUI/releases/tag/%40itwin%2Fitwinui-react%403.12.0) has been reverted, because React 17 [doesn't properly support it](https://github.com/facebook/react/issues/20235).

packages/itwinui-react/.eslintrc.cjs

@@ -13,5 +13,8 @@ module.exports = {
   rules: {
     ...preset.rules,
     '@typescript-eslint/no-explicit-any': 'off',
+    'react/jsx-uses-react': 1,
+    'react/react-in-jsx-scope': 1,
   },
+  ignorePatterns: ['**/esm/**', '**/cjs/**', '**.test.*', '**.types-test.*'],
 };

packages/itwinui-react/scripts/build.mjs

@@ -18,7 +18,11 @@ const swcOptions = {
     'jsc.parser.syntax=typescript',
     'jsc.parser.tsx=true',
     'jsc.transform.react.useBuiltins=true',
-    'jsc.transform.react.runtime=automatic',
+
+    // We cannot (currently) use the new JSX transform, because it relies on ESM exports
+    // which are not available in React 17. See https://github.com/facebook/react/issues/20235
+    // 'jsc.transform.react.runtime=automatic',
+
     'jsc.target=es2020',
     'jsc.minify.format.comments=false',
     'jsc.externalHelpers=true',

packages/itwinui-react/src/core/Table/columns/selectionColumn.tsx

@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
 import type {
   CellProps,
   CellRendererProps,

packages/itwinui-react/src/utils/icons/StatusIconMap.tsx

@@ -2,17 +2,23 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
 import { SvgInfoCircular } from './SvgInfoCircular.js';
 import { SvgStatusError } from './SvgStatusError.js';
 import { SvgStatusSuccess } from './SvgStatusSuccess.js';
 import { SvgStatusWarning } from './SvgStatusWarning.js';
-import type { CommonProps } from '../props.js';
 
 export const StatusIconMap = {
-  negative: (args?: CommonProps) => <SvgStatusError aria-hidden {...args} />,
-  positive: (args?: CommonProps) => <SvgStatusSuccess aria-hidden {...args} />,
-  warning: (args?: CommonProps) => <SvgStatusWarning aria-hidden {...args} />,
-  informational: (args?: CommonProps) => (
+  negative: (args?: React.ComponentPropsWithoutRef<'svg'>) => (
+    <SvgStatusError aria-hidden {...args} />
+  ),
+  positive: (args?: React.ComponentPropsWithoutRef<'svg'>) => (
+    <SvgStatusSuccess aria-hidden {...args} />
+  ),
+  warning: (args?: React.ComponentPropsWithoutRef<'svg'>) => (
+    <SvgStatusWarning aria-hidden {...args} />
+  ),
+  informational: (args?: React.ComponentPropsWithoutRef<'svg'>) => (
     <SvgInfoCircular aria-hidden {...args} />
   ),
 };

packages/itwinui-react/tsconfig.json

@@ -8,7 +8,7 @@
     "esModuleInterop": true,
     "sourceMap": false,
     "allowJs": false,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "moduleResolution": "NodeNext",
     "traceResolution": false,
     "forceConsistentCasingInFileNames": true,

packages/itwinui-react/tsconfig.test.json

@@ -1,5 +1,8 @@
 {
   "extends": "./tsconfig.json",
-  // TODO: Test all the files, and not just the Table files or just the build files.
-  "include": ["src/**/*.test.*", "src/**/*.types-test.*"]
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "noUnusedLocals": false
+  },
+  "include": ["**/*.test.*", "**/*.types-test.*"]
 }

packages/itwinui-react/vitest.config.ts

@@ -38,4 +38,7 @@ export default defineConfig({
       },
     },
   ],
+  esbuild: {
+    jsx: 'automatic',
+  },
 });