chore: use new JSX transform

Closes #9289 Signed-off-by: Jon Koops <[email protected]>
patternfly · Dec 6, 2024 · ebcfac4 · ebcfac4
1 parent c1ab963
commit ebcfac4
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 9 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,4 +1,4 @@
 module.exports = {
-  presets: ['@babel/preset-typescript', '@babel/preset-react'],
+  presets: ['@babel/preset-typescript', ['@babel/preset-react', { runtime: 'automatic' }]],
   plugins: ['@babel/plugin-transform-modules-commonjs']
 };
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -4,7 +4,7 @@ import patternflyReact from 'eslint-plugin-patternfly-react';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import reactCompiler from 'eslint-plugin-react-compiler';
 import reactHooks from 'eslint-plugin-react-hooks';
-import reactRecommended from 'eslint-plugin-react/configs/recommended.js';
+import react from 'eslint-plugin-react';
 import testingLibrary from 'eslint-plugin-testing-library';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
@@ -23,7 +23,8 @@ export default [
   },
   js.configs.recommended,
   ...tseslint.configs.recommended,
-  reactRecommended,
+  react.configs.flat.recommended,
+  react.configs.flat['jsx-runtime'],
   eslintPluginPrettierRecommended,
   {
     plugins: {
@@ -98,6 +99,18 @@ export default [
       'no-eval': 'error',
       'no-new-wrappers': 'error',
       'no-prototype-builtins': 'off',
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'react',
+              importNames: ['default'],
+              message: 'Please use named imports when importing from React.'
+            }
+          ]
+        }
+      ],
       'no-shadow': 'off',
       'no-throw-literal': 'error',
       'no-trailing-spaces': 'off',

diff --git a/packages/react-core/tsconfig.json b/packages/react-core/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
     "rootDir": "./src",
     "outDir": "./dist/esm",
     "tsBuildInfoFile": "dist/esm.tsbuildinfo",

diff --git a/packages/react-icons/scripts/writeIcons.mjs b/packages/react-icons/scripts/writeIcons.mjs
@@ -51,7 +51,7 @@ export default ${jsName};
 };
 
 const writeDTSExport = (fname, jsName, icon) => {
-  const text = `import * as React from 'react';
+  const text = `import { ComponentClass } from 'react';
 import { SVGIconProps } from '../createIcon';
 export declare const ${jsName}Config: {
   name: '${jsName}',
@@ -61,7 +61,7 @@ export declare const ${jsName}Config: {
   yOffset: ${icon.yOffset || 0},
   xOffset: ${icon.xOffset || 0},
 };
-export declare const ${jsName}: React.ComponentClass<SVGIconProps>;
+export declare const ${jsName}: ComponentClass<SVGIconProps>;
 export default ${jsName};
     `.trim();
   const filename = `${fname}.d.ts`;

diff --git a/packages/react-integration/tsconfig.json b/packages/react-integration/tsconfig.json
@@ -4,7 +4,6 @@
     "noImplicitAny": true,
     "module": "es6",
     "target": "es5",
-    "jsx": "react",
     "lib": ["dom", "es6"],
     "allowJs": true,
     "types": ["cypress"]

diff --git a/packages/react-table/tsconfig.json b/packages/react-table/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "jsx": "react",
     "rootDir": "./src",
     "outDir": "./dist/esm",
     "tsBuildInfoFile": "dist/esm.tsbuildinfo",

diff --git a/packages/tsconfig.base.json b/packages/tsconfig.base.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "assumeChangesOnlyAffectDirectDependencies": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "lib": [
       "es2015",
       "dom"