refactor: improve R17-R18 interop, drop jsx-runtime

.eslintrc.js

@@ -26,11 +26,9 @@ module.exports = {
     es6: true,
   },
   parserOptions: {
+    project: './tsconfig.json',
     ecmaVersion: 2018,
     sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
   },
   rules: {
     eqeqeq: 'error',
@@ -92,8 +90,9 @@ module.exports = {
         pathGroupsExcludedImportTypes: ['builtin'],
       },
     ],
-    'react/jsx-uses-react': 'off',
-    'react/react-in-jsx-scope': 'off',
+    // Disable it until we start supporting `react-jsx` again.
+    // 'react/jsx-uses-react': 'off',
+    // 'react/react-in-jsx-scope': 'off',
     'sort-imports': [
       'error',
       {

src/DevTools/DevTools.tsx

@@ -1,4 +1,4 @@
-import { StrictMode, useEffect, useState } from 'react';
+import * as React from 'react';
 import {
   ColorScheme,
   ColorSchemeProvider,
@@ -53,17 +53,18 @@ const DevTools_ = ({
   theme: userColorScheme = 'light',
   options,
 }: DevToolsProps): JSX.Element => {
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(userColorScheme);
+  const [colorScheme, setColorScheme] =
+    React.useState<ColorScheme>(userColorScheme);
   const setDevToolsOptions = useSetDevToolsOptions();
 
   const toggleColorScheme = (value?: ColorScheme) =>
     setColorScheme(value || (colorScheme === 'dark' ? 'light' : 'dark'));
 
-  useEffect(() => {
+  React.useEffect(() => {
     setColorScheme(userColorScheme);
   }, [userColorScheme]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     // Should we consider caching these options in the future instead of allowing users to change these?
     setDevToolsOptions(options);
   }, [setDevToolsOptions, options]);
@@ -74,7 +75,7 @@ const DevTools_ = ({
   };
 
   return (
-    <StrictMode>
+    <React.StrictMode>
       <ColorSchemeProvider
         colorScheme={colorScheme}
         toggleColorScheme={toggleColorScheme}
@@ -85,7 +86,7 @@ const DevTools_ = ({
           </InternalDevToolsContext.Provider>
         </MantineProvider>
       </ColorSchemeProvider>
-    </StrictMode>
+    </React.StrictMode>
   );
 };
 

src/DevTools/Extension/Extension.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect } from 'react';
+import * as React from 'react';
 import { ActionIcon, Sx } from '@mantine/core';
 import { useAtom, useSetAtom } from 'jotai/react';
 import { Store } from 'src/types';
@@ -23,7 +23,7 @@ const shellTriggerButtonStyles: Sx = () => ({
   },
 });
 
-const ShellTriggerButton = forwardRef<HTMLButtonElement>((_, ref) => {
+const ShellTriggerButton = React.forwardRef<HTMLButtonElement>((_, ref) => {
   const setIsShellOpen = useSetAtom(isShellOpenAtom, devtoolsJotaiStoreOptions);
 
   return (
@@ -55,7 +55,7 @@ export const Extension = ({
     useDevtoolsJotaiStoreOptions(),
   );
 
-  useEffect(() => {
+  React.useEffect(() => {
     // Avoid setting the initial value if the value is found in the local storage
     if (typeof isShellOpen !== 'boolean') {
       setIsShellOpen(isInitialOpen);

src/DevTools/Extension/components/Shell/Shell.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Tabs } from '@mantine/core';
 import { useAtomValue } from 'jotai/react';
 import { Store } from 'src/types';

src/stories/Default/Demos/Random.tsx

@@ -36,8 +36,8 @@ export const Random = () => {
   // We're not displaying these values on the UI
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const nestedObject = useAtomValue(nestedObjectAtom, demoStoreOptions);
-  const text = useAtomValue(textAtom, demoStoreOptions);
-  const bigint = useAtomValue(bigintAtom, demoStoreOptions);
+  const _text = useAtomValue(textAtom, demoStoreOptions);
+  const _bigint = useAtomValue(bigintAtom, demoStoreOptions);
   // const circular = useAtomValue(circularAtom, demoStoreOptions);
   // console.log(circular);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

tsconfig.build.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "strict": true,
     "target": "ESNext",
-    "jsx": "react-jsx",
+    "jsx": "react",
     "module": "es2015",
     "downlevelIteration": true,
     "esModuleInterop": true,

tsup.config.ts

@@ -26,7 +26,7 @@ const baseConfig: Options = {
   splitting: true,
   tsconfig: './tsconfig.build.json',
   dts: true,
-  external: ['jotai', 'React'],
+  external: ['jotai', 'react', 'react-dom'],
   platform: 'node',
   outExtension: defaultOutExtension,
   esbuildPlugins: defaultEsBuildPlugins,