Repository: pmndrs/valtio
Pull request #214 (2021-08-14 03:49:01)

chore: update eslintrc and use react-jsx
follow https://github.com/pmndrs/jotai/pull/656
and use react-jsx now.

codesandbox[bot]: This pull request is automatically built and testable in [CodeSandbox](https://codesandbox.io).

  To see build info of the built libraries, click [here](https://ci.codesandbox.io/status/pmndrs/valtio/pr/214/builds/159574) or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 675ece83eb80bf1560bdb64c63d7450233d1b8e9:

|Sandbox| Source |
|--|--|
|[React](https://codesandbox.io/s/react-hxqky)| Configuration |
|[React Typescript](https://codesandbox.io/s/react-typescript-3ntuh)| Configuration |
|[React Browserify](https://codesandbox.io/s/react-browserify-s0kyx)| Configuration |
|[React Snowpack](https://codesandbox.io/s/react-snowpack-nm59r)| Configuration |
|[React Parcel](https://codesandbox.io/s/react-parcel-b7rfy)| Configuration |


Patch:
diff --git a/.eslintrc.json b/.eslintrc.json
index 6bac002..4aef607 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -12,34 +12,74 @@
     "plugin:import/errors",
     "plugin:import/warnings"
   ],
-  "plugins": ["@typescript-eslint", "react", "prettier", "react-hooks", "import", "jest"],
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "prettier",
+    "react-hooks",
+    "import",
+    "jest"
+  ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
-    },
-    "rules": {
-      "curly": ["warn", "multi-line", "consistent"],
-      "no-console": "off",
-      "no-empty-pattern": "warn",
-      "no-duplicate-imports": "error",
-      "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
-      "import/export": "error",
-      "import/named": "off",
-      "import/namespace": "off",
-      "import/default": "off",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
-      "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
-      "@typescript-eslint/no-use-before-define": "off",
-      "@typescript-eslint/no-empty-function": "off",
-      "@typescript-eslint/no-empty-interface": "off",
-      "@typescript-eslint/no-explicit-any": "off",
-      "jest/consistent-test-it": ["error", { "fn": "it", "withinDescribe": "it" }]
     }
   },
+  "rules": {
+    "curly": ["warn", "multi-line", "consistent"],
+    "no-console": "off",
+    "import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
+    "import/export": "error",
+    "@typescript-eslint/no-duplicate-imports": ["error"],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "jest/consistent-test-it": [
+      "error",
+      { "fn": "it", "withinDescribe": "it" }
+    ],
+    "import/order": [
+      "error",
+      {
+        "alphabetize": { "order": "asc", "caseInsensitive": true },
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object"
+        ],
+        "newlines-between": "never",
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "builtin",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["builtin"]
+      }
+    ],
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "sort-imports": [
+      "error",
+      {
+        "ignoreDeclarationSort": true
+      }
+    ]
+  },
   "settings": {
     "react": {
       "version": "detect"
diff --git a/babel.config.js b/babel.config.js
index 4b71b56..5029a18 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -15,6 +15,13 @@ module.exports = (api, targets) => {
         },
       ],
     ],
-    plugins: ['@babel/plugin-transform-react-jsx'],
+    plugins: [
+      [
+        '@babel/plugin-transform-react-jsx',
+        {
+          runtime: 'automatic',
+        },
+      ],
+    ],
   }
 }
diff --git a/package.json b/package.json
index d3ecabf..b23fbc9 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
       "ts-jest": {
         "tsconfig": {
           "target": "es2015",
-          "jsx": "react"
+          "jsx": "react-jsx"
         }
       }
     },
diff --git a/src/macro.ts b/src/macro.ts
index e1153c1..4dc63aa 100644
--- a/src/macro.ts
+++ b/src/macro.ts
@@ -1,8 +1,8 @@
-import type { NodePath } from '@babel/traverse'
-import * as t from '@babel/types'
-import { createMacro, MacroError } from 'babel-plugin-macros'
 // @ts-ignore
 import { addNamed } from '@babel/helper-module-imports'
+import type { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+import { MacroError, createMacro } from 'babel-plugin-macros'
 
 const macro = ({ references }: any) => {
   references.useProxy?.forEach((path: NodePath) => {
diff --git a/src/react.ts b/src/react.ts
index 986d2ff..b6d572a 100644
--- a/src/react.ts
+++ b/src/react.ts
@@ -8,13 +8,12 @@ import {
   useRef,
 } from 'react'
 import {
+  affectedToPathList,
   createProxy as createProxyToCompare,
   isChanged,
-  affectedToPathList,
 } from 'proxy-compare'
-
-import { getVersion, subscribe, snapshot } from './vanilla'
 import { createMutableSource, useMutableSource } from './useMutableSource'
+import { getVersion, snapshot, subscribe } from './vanilla'
 import type { DeepResolveType } from './vanilla'
 
 const isSSR =
diff --git a/src/utils/derive.ts b/src/utils/derive.ts
index 774324a..e23ec1a 100644
--- a/src/utils/derive.ts
+++ b/src/utils/derive.ts
@@ -1,4 +1,4 @@
-import { proxy, subscribe, getVersion } from '../vanilla'
+import { getVersion, proxy, subscribe } from '../vanilla'
 
 type DeriveGet = <T extends object>(proxyObject: T) => T
 
diff --git a/src/utils/devtools.ts b/src/utils/devtools.ts
index d547f13..2cf3951 100644
--- a/src/utils/devtools.ts
+++ b/src/utils/devtools.ts
@@ -1,4 +1,4 @@
-import { subscribe, snapshot } from '../vanilla'
+import { snapshot, subscribe } from '../vanilla'
 
 /**
  * devtools
diff --git a/src/utils/proxyWithHistory.ts b/src/utils/proxyWithHistory.ts
index 8aa7933..6ba15ed 100644
--- a/src/utils/proxyWithHistory.ts
+++ b/src/utils/proxyWithHistory.ts
@@ -1,4 +1,4 @@
-import { proxy, subscribe, snapshot, ref } from '../vanilla'
+import { proxy, ref, snapshot, subscribe } from '../vanilla'
 
 /**
  * proxyWithHistory
diff --git a/tsconfig.json b/tsconfig.json
index 7b8631d..15077ce 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "esnext",
     "strict": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "moduleResolution": "node",


Test patch:
diff --git a/tests/async.test.tsx b/tests/async.test.tsx
index 56378d1..78401e5 100644
--- a/tests/async.test.tsx
+++ b/tests/async.test.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode, Suspense } from 'react'
+import { StrictMode, Suspense } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { proxy, useSnapshot } from '../src/index'
 
@@ -30,7 +30,7 @@ it('delayed increment', async () => {
     state.count = sleep(10).then(() => nextCount)
   }
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(state)
     return (
       <>
@@ -61,7 +61,7 @@ it('delayed object', async () => {
     state.object = sleep(10).then(() => ({ text: 'hello' }))
   }
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(state)
     return (
       <>
@@ -94,7 +94,7 @@ it('delayed object update fullfilled', async () => {
     state.object = state.object.then((v: any) => ({ ...v, count: v.count + 1 }))
   }
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(state)
     return (
       <>
@@ -130,7 +130,7 @@ it('delayed falsy value', async () => {
     state.value = sleep(10).then(() => null)
   }
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(state)
     return (
       <>
diff --git a/tests/basic.test.tsx b/tests/basic.test.tsx
index a0d263a..654d65b 100644
--- a/tests/basic.test.tsx
+++ b/tests/basic.test.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode, useRef, useEffect, useState } from 'react'
+import { StrictMode, useEffect, useRef, useState } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { proxy, useSnapshot } from '../src/index'
 
@@ -21,7 +21,7 @@ afterEach(() => {
 it('simple counter', async () => {
   const obj = proxy({ count: 0 })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     return (
       <>
@@ -46,7 +46,7 @@ it('simple counter', async () => {
 it('no extra re-renders (commits)', async () => {
   const obj = proxy({ count: 0, count2: 0 })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(1)
     useEffect(() => {
@@ -62,7 +62,7 @@ it('no extra re-renders (commits)', async () => {
     )
   }
 
-  const Counter2: React.FC = () => {
+  const Counter2 = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(1)
     useEffect(() => {
@@ -107,7 +107,7 @@ it('no extra re-renders (render func calls in non strict mode)', async () => {
   const obj = proxy({ count: 0, count2: 0 })
 
   const renderFn = jest.fn()
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     renderFn(snap.count)
     return (
@@ -119,7 +119,7 @@ it('no extra re-renders (render func calls in non strict mode)', async () => {
   }
 
   const renderFn2 = jest.fn()
-  const Counter2: React.FC = () => {
+  const Counter2 = () => {
     const snap = useSnapshot(obj)
     renderFn2(snap.count2)
     return (
@@ -190,7 +190,7 @@ it('no extra re-renders (render func calls in non strict mode)', async () => {
 it('object in object', async () => {
   const obj = proxy({ object: { count: 0 } })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     return (
       <>
@@ -215,7 +215,7 @@ it('object in object', async () => {
 it('array in object', async () => {
   const obj = proxy({ counts: [0, 1, 2] })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     return (
       <>
@@ -242,7 +242,7 @@ it('array in object', async () => {
 it('array pop and splice', async () => {
   const arr = proxy([0, 1, 2])
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(arr)
     return (
       <>
@@ -271,7 +271,7 @@ it('array pop and splice', async () => {
 it('array length after direct assignment', async () => {
   const obj = proxy({ counts: [0, 1, 2] })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     return (
       <>
@@ -309,7 +309,7 @@ it('array length after direct assignment', async () => {
 it('deleting property', async () => {
   const obj = proxy<{ count?: number }>({ count: 1 })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     return (
       <>
@@ -336,7 +336,7 @@ it('circular object', async () => {
   obj.object = obj
   obj.object.count = 0
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj) as any
     return (
       <>
@@ -361,7 +361,7 @@ it('circular object', async () => {
 it('render from outside', async () => {
   const obj = proxy({ count: 0, anotherCount: 0 })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const [show, setShow] = useState(false)
     const snap = useSnapshot(obj)
     return (
diff --git a/tests/class.test.tsx b/tests/class.test.tsx
index a3ed673..70b9527 100644
--- a/tests/class.test.tsx
+++ b/tests/class.test.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode, useRef, useEffect } from 'react'
+import { StrictMode, useEffect, useRef } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { proxy, useSnapshot } from '../src/index'
 
@@ -28,7 +28,7 @@ it('simple class without methods', async () => {
 
   const obj = proxy(new CountClass())
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     return (
       <>
@@ -62,7 +62,7 @@ it('no extra re-renders with class', async () => {
 
   const obj = proxy(new CountClass())
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
@@ -78,7 +78,7 @@ it('no extra re-renders with class', async () => {
     )
   }
 
-  const Counter2: React.FC = () => {
+  const Counter2 = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
@@ -136,7 +136,7 @@ it('inherited class without methods', async () => {
 
   const obj = proxy(new CountClass())
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     return (
       <>
@@ -171,7 +171,7 @@ it('class with a method', async () => {
 
   const obj = proxy(new CountClass())
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
@@ -187,7 +187,7 @@ it('class with a method', async () => {
     )
   }
 
-  const Counter2: React.FC = () => {
+  const Counter2 = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
@@ -239,7 +239,7 @@ it('inherited class with a method', async () => {
 
   const obj = proxy(new CountClass())
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
@@ -255,7 +255,7 @@ it('inherited class with a method', async () => {
     )
   }
 
-  const Counter2: React.FC = () => {
+  const Counter2 = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
@@ -314,7 +314,7 @@ it('no extra re-renders with getters', async () => {
 
   const obj = proxy(new CountClass())
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
@@ -330,7 +330,7 @@ it('no extra re-renders with getters', async () => {
     )
   }
 
-  const Counter2: React.FC = () => {
+  const Counter2 = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(0)
     useEffect(() => {
diff --git a/tests/computed.test.tsx b/tests/computed.test.tsx
index 36a5861..a78917d 100644
--- a/tests/computed.test.tsx
+++ b/tests/computed.test.tsx
@@ -1,7 +1,7 @@
-import React, { StrictMode, Suspense } from 'react'
+import { StrictMode, Suspense } from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import { proxy, useSnapshot, snapshot, subscribe } from '../src/index'
-import { proxyWithComputed, addComputed } from '../src/utils'
+import { proxy, snapshot, subscribe, useSnapshot } from '../src/index'
+import { addComputed, proxyWithComputed } from '../src/utils'
 
 const consoleError = console.error
 beforeEach(() => {
@@ -185,7 +185,7 @@ it('async addComputed', async () => {
     },
   })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(
       state as { count: number; delayedCount: Promise<number> }
     )
diff --git a/tests/derive.test.tsx b/tests/derive.test.tsx
index 4e7450c..9751483 100644
--- a/tests/derive.test.tsx
+++ b/tests/derive.test.tsx
@@ -1,6 +1,6 @@
-import React, { StrictMode, Suspense } from 'react'
+import { StrictMode, Suspense } from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import { proxy, useSnapshot, snapshot, subscribe } from '../src/index'
+import { proxy, snapshot, subscribe, useSnapshot } from '../src/index'
 import { derive, underive } from '../src/utils'
 
 const consoleError = console.error
@@ -174,7 +174,7 @@ it('async derive', async () => {
     { proxy: state }
   )
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(
       state as { count: number; delayedCount: Promise<number> }
     )
diff --git a/tests/getter.test.tsx b/tests/getter.test.tsx
index 301d3bf..bd2890a 100644
--- a/tests/getter.test.tsx
+++ b/tests/getter.test.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode } from 'react'
+import { StrictMode } from 'react'
 import { fireEvent, render, waitFor } from '@testing-library/react'
 import { proxy, useSnapshot } from '../src/index'
 
@@ -27,7 +27,7 @@ it('simple object getters', async () => {
     },
   })
 
-  const Counter: React.FC<{ name: string }> = ({ name }) => {
+  const Counter = ({ name }: { name: string }) => {
     const snap = useSnapshot(state)
     return (
       <>
@@ -69,7 +69,7 @@ it('object getters returning object', async () => {
     },
   })
 
-  const Counter: React.FC<{ name: string }> = ({ name }) => {
+  const Counter = ({ name }: { name: string }) => {
     const snap = useSnapshot(state)
     return (
       <>
diff --git a/tests/history.test.tsx b/tests/history.test.tsx
index 015c72d..34d587f 100644
--- a/tests/history.test.tsx
+++ b/tests/history.test.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode } from 'react'
+import { StrictMode } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { useSnapshot } from '../src/index'
 import { proxyWithHistory } from '../src/utils'
@@ -22,7 +22,7 @@ afterEach(() => {
 it('simple count', async () => {
   const state = proxyWithHistory(0)
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(state)
     return (
       <>
@@ -76,7 +76,7 @@ it('simple count', async () => {
 it('count in object', async () => {
   const state = proxyWithHistory({ count: 0 })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(state)
     return (
       <>
@@ -130,7 +130,7 @@ it('count in object', async () => {
 it('count in nested object', async () => {
   const state = proxyWithHistory({ nested: { count: 0 } })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(state)
     return (
       <>
diff --git a/tests/macro.test.ts b/tests/macro.test.ts
index 5bafd07..e185e49 100644
--- a/tests/macro.test.ts
+++ b/tests/macro.test.ts
@@ -1,5 +1,5 @@
-import pluginTester from 'babel-plugin-tester'
 import plugin from 'babel-plugin-macros'
+import pluginTester from 'babel-plugin-tester'
 
 pluginTester({
   pluginName: 'valtio/macro',
diff --git a/tests/mapset.test.tsx b/tests/mapset.test.tsx
index 1999bc3..a66e912 100644
--- a/tests/mapset.test.tsx
+++ b/tests/mapset.test.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode } from 'react'
+import { StrictMode } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { proxy, useSnapshot } from '../src/index'
 
@@ -21,7 +21,7 @@ afterEach(() => {
 it('unsupported map', async () => {
   const obj = proxy({ map: new Map([['count', 0]]) })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj) as any
     return (
       <>
@@ -47,7 +47,7 @@ it('unsupported map', async () => {
 it('unsupported set', async () => {
   const obj = proxy({ set: new Set([1, 2, 3]) })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj) as any
     return (
       <>
diff --git a/tests/ref.test.tsx b/tests/ref.test.tsx
index c8f27d9..045cbf3 100644
--- a/tests/ref.test.tsx
+++ b/tests/ref.test.tsx
@@ -1,4 +1,4 @@
-import React, { StrictMode, useRef, useEffect } from 'react'
+import { StrictMode, useEffect, useRef } from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { proxy, ref, useSnapshot } from '../src/index'
 
@@ -21,7 +21,7 @@ afterEach(() => {
 it('should trigger re-render setting objects with ref wrapper', async () => {
   const obj = proxy({ nested: ref({ count: 0 }) })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     const commitsRef = useRef(1)
     useEffect(() => {
@@ -52,7 +52,7 @@ it('should trigger re-render setting objects with ref wrapper', async () => {
 it('should not track object wrapped in ref assigned to proxy state', async () => {
   const obj = proxy<{ ui: JSX.Element | null }>({ ui: null })
 
-  const Component: React.FC = () => {
+  const Component = () => {
     const snap = useSnapshot(obj)
     return (
       <>
@@ -79,7 +79,7 @@ it('should not track object wrapped in ref assigned to proxy state', async () =>
 it('should not trigger re-render when mutating object wrapped in ref', async () => {
   const obj = proxy({ nested: ref({ count: 0 }) })
 
-  const Counter: React.FC = () => {
+  const Counter = () => {
     const snap = useSnapshot(obj)
     return (
       <>
diff --git a/tests/watch.test.tsx b/tests/watch.test.tsx
index 872c332..4e6dcfe 100644
--- a/tests/watch.test.tsx
+++ b/tests/watch.test.tsx
@@ -1,5 +1,5 @@
-import { proxy } from '../src/vanilla'
 import { watch } from '../src/utils'
+import { proxy } from '../src/vanilla'
 
 describe('watch', () => {
   it('should re-run for individual proxy updates', async () => {