feat(react): new automatic runtime

.eslintrc

@@ -12,15 +12,21 @@
       {
         "devDependencies": ["**/__tests__/*", "rollup.config.mjs"]
       }
-    ]
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
   },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
       "parserOptions": {
         "project": ["tsconfig.json"]
       },
-      "extends": ["./packages/eslint-config-react/typescript.js"]
+      "extends": ["./packages/eslint-config-react/typescript.js"],
+      "rules": {
+        "react/jsx-uses-react": "off",
+        "react/react-in-jsx-scope": "off"
+      }
     }
   ]
 }

babel.config.json

@@ -1,7 +1,12 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
     ["@babel/preset-typescript", { "allowDeclareFields": true }]
   ],
   "plugins": ["@babel/plugin-transform-runtime"]

packages/jest-helpers/src/__tests__/index.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import makeHelpers from '..'
 import { RenderWithThemeFn } from '../helpers/renderWithTheme'
 import { ShouldMatchEmotionSnapshotFn } from '../helpers/shouldMatchEmotionSnapshot'

packages/jest-helpers/src/helpers/renderWithTheme.tsx

@@ -1,7 +1,7 @@
 import createCache from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
 import { RenderOptions, render } from '@testing-library/react'
-import React, { FC, ReactNode } from 'react'
+import { FC, ReactNode } from 'react'
 
 const emotionCache = createCache({
   key: 'cache',

packages/use-dataloader/.eslintrc.cjs

@@ -5,6 +5,6 @@ module.exports = {
     'import/no-extraneous-dependencies': [
       'error',
       { packageDir: [__dirname, join(__dirname, '../../')] }
-    ]
+    ],
   }
 };

packages/use-dataloader/src/DataLoaderProvider.tsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, {
+import {
   ReactElement,
   ReactNode,
   createContext,

packages/use-dataloader/src/__tests__/DataLoaderProvider.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import { act, renderHook } from '@testing-library/react-hooks'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import DataLoaderProvider, { useDataLoaderContext } from '../DataLoaderProvider'
 import { KEY_IS_NOT_STRING_ERROR, StatusEnum } from '../constants'
 

packages/use-dataloader/src/__tests__/useDataLoader.test.tsx

@@ -1,5 +1,4 @@
 import { act, renderHook } from '@testing-library/react-hooks'
-import React from 'react'
 import DataLoaderProvider, { useDataLoaderContext } from '../DataLoaderProvider'
 import { KEY_IS_NOT_STRING_ERROR } from '../constants'
 import { PromiseType, UseDataLoaderConfig, UseDataLoaderResult } from '../types'

packages/use-dataloader/src/__tests__/usePaginatedDataLoader.test.tsx

@@ -1,6 +1,5 @@
 import { act } from '@testing-library/react'
 import { renderHook } from '@testing-library/react-hooks'
-import React from 'react'
 import DataLoaderProvider from '../DataLoaderProvider'
 import { KEY_IS_NOT_STRING_ERROR } from '../constants'
 import {

packages/use-i18n/.eslintrc.cjs

@@ -5,6 +5,6 @@ module.exports = {
     'import/no-extraneous-dependencies': [
       'error',
       { packageDir: [__dirname, join(__dirname, '../../')] }
-    ]
+    ],
   }
 };

packages/use-i18n/src/__tests__/usei18n.tsx

@@ -1,6 +1,5 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 import mockdate from 'mockdate'
-import React from 'react'
 import I18n, { useI18n, useTranslation } from '..'
 import en from './locales/en.json'
 import es from './locales/es.json'

packages/use-i18n/src/usei18n.tsx

@@ -5,7 +5,7 @@ import {
   formatDistanceToNowStrict,
 } from 'date-fns'
 import PropTypes from 'prop-types'
-import React, {
+import {
   ReactElement,
   ReactNode,
   createContext,

packages/use-query-params/.eslintrc.cjs

@@ -5,6 +5,6 @@ module.exports = {
     'import/no-extraneous-dependencies': [
       'error',
       { packageDir: [__dirname, join(__dirname, '../../')] }
-    ]
+    ],
   }
 };

packages/use-query-params/src/__tests__/index.tsx

@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 import { History, createMemoryHistory } from 'history'
-import React, { ReactNode, useLayoutEffect, useState } from 'react'
+import { ReactNode, useLayoutEffect, useState } from 'react'
 import { MemoryRouter, Router } from 'react-router-dom'
 import useQueryParams from '..'
 

packages/use-segment/src/__tests__/index.tsx

@@ -1,6 +1,6 @@
 import { AnalyticsBrowser, Context } from '@segment/analytics-next'
 import { renderHook } from '@testing-library/react-hooks'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import waitForExpect from 'wait-for-expect'
 import SegmentProvider, { useSegment } from '..'
 import type { Analytics, OnEventError, SegmentProviderProps } from '..'

packages/use-segment/src/useSegment.tsx

@@ -4,7 +4,7 @@ import type {
   AnalyticsSettings,
   InitOptions,
 } from '@segment/analytics-next'
-import React, {
+import {
   ReactNode,
   createContext,
   useContext,

rollup.config.mjs

@@ -39,11 +39,16 @@ const getConfig = (pkg, isBrowser = false) => {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.es', '.mjs'],
         plugins: [
           '@babel/plugin-transform-runtime',
-          '@babel/plugin-transform-react-jsx',
         ],
         presets: [
           ['@babel/env', { modules: false, targets }],
           '@babel/preset-typescript',
+          [
+            '@babel/preset-react',
+            {
+              runtime: 'automatic',
+            },
+          ],
         ],
       }),
       nodeResolve({