Switch to modern JSX runtime

Author: colinrotherham

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
   },
   extends: [
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:@typescript-eslint/recommended',
     'prettier',
     'plugin:import/errors',

README.md

@@ -21,6 +21,7 @@ module.exports = {
       '@babel/preset-react',
       {
         development: NODE_ENV === 'development',
+        runtime: 'automatic',
         useBuiltIns: true,
       },
     ],

babel.config.js

@@ -28,7 +28,8 @@ export default defineConfig(
           sourcemapExcludeSources: true,
         },
       ],
-      external,
+      external: ['react/jsx-runtime', ...external],
+      jsx: /** @type {const} */ ('react-jsx'),
       treeshake: false,
       plugins: [
         nodeResolve({

rollup.config.mjs

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
 
 export interface DetailsProps extends ComponentPropsWithoutRef<'details'> {
   expander?: boolean;

src/components/content-presentation/details/Details.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { Details } from '..';
 import { renderClient, renderServer } from '#util/components';
 

src/components/content-presentation/details/__tests__/Details.test.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {
+import {
   createContext,
   forwardRef,
   useContext,

src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { DoAndDontList } from '..';
 import { renderClient, renderServer } from '#util/components';
 

src/components/content-presentation/do-and-dont-list/__tests__/DoAndDontList.test.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
 import { Col, Container, Row } from '#components/layout';
 import { HeadingLevel, type HeadingLevelProps } from '#components/utils';
 

src/components/content-presentation/hero/Hero.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import React, { createRef } from 'react';
+import { createRef } from 'react';
 import { Hero } from '..';
 
 describe('Hero', () => {