Support react 18 (#64)

* Cleanup deps * Support react 18
TanStack · May 27, 2023 · e6d75fb · e6d75fb
1 parent 2380e42
commit e6d75fb
Show file tree

Hide file tree

Showing 15 changed files with 1,516 additions and 1,587 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v14.17.6
+v16.20.0
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
@@ -1,6 +1,5 @@
 {
   "name": "basic",
-  "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "vite --port=3000",
@@ -10,12 +9,12 @@
   },
   "dependencies": {
     "@tanstack/react-ranger": "0.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
     "vite": "^3.2.3"
   }

diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { useRanger, Ranger } from '@tanstack/react-ranger'
 
 function App() {
@@ -93,9 +93,10 @@ function App() {
   )
 }
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root')!)
+
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )
diff --git a/examples/react/custom-steps/package.json b/examples/react/custom-steps/package.json
@@ -1,6 +1,5 @@
 {
   "name": "custom-steps",
-  "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "vite --port=3000",
@@ -10,12 +9,12 @@
   },
   "dependencies": {
     "@tanstack/react-ranger": "0.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
     "vite": "^3.2.3"
   }

diff --git a/examples/react/custom-steps/src/main.tsx b/examples/react/custom-steps/src/main.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
-import ReactDOM from 'react-dom'
 import { useRanger, Ranger } from '@tanstack/react-ranger'
+import { createRoot } from 'react-dom/client'
 
 function App() {
   const [values, setValues] = React.useState<ReadonlyArray<number>>([0, 500000])
@@ -106,9 +106,10 @@ function App() {
   )
 }
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root')!)
+
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )
diff --git a/examples/react/custom-styles/package.json b/examples/react/custom-styles/package.json
@@ -9,13 +9,12 @@
   },
   "dependencies": {
     "@tanstack/react-ranger": "0.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "styled-components": "^5.3.6"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
     "vite": "^3.2.3"
   }

diff --git a/examples/react/custom-styles/src/main.tsx b/examples/react/custom-styles/src/main.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
-import ReactDOM from 'react-dom'
 import styled, { createGlobalStyle } from 'styled-components'
 import { useRanger, Ranger } from '@tanstack/react-ranger'
+import { createRoot } from 'react-dom/client'
 
 const GlobalStyles = createGlobalStyle`
   body {
@@ -167,9 +167,10 @@ function App() {
   )
 }
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root')!)
+
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )
diff --git a/examples/react/logarithmic-interpolator/package.json b/examples/react/logarithmic-interpolator/package.json
@@ -1,6 +1,5 @@
 {
   "name": "logarithmic-interpolator",
-  "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "vite --port=3000",
@@ -10,12 +9,12 @@
   },
   "dependencies": {
     "@tanstack/react-ranger": "0.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
     "vite": "^3.2.3"
   }

diff --git a/examples/react/update-on-drag/package.json b/examples/react/update-on-drag/package.json
@@ -1,6 +1,5 @@
 {
   "name": "update-on-drag",
-  "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "vite --port=3000",
@@ -10,12 +9,12 @@
   },
   "dependencies": {
     "@tanstack/react-ranger": "0.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.52",
-    "@types/react-dom": "^17.0.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
     "vite": "^3.2.3"
   }

diff --git a/examples/react/update-on-drag/src/main.tsx b/examples/react/update-on-drag/src/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 import { useRanger, Ranger } from '@tanstack/react-ranger'
+import { createRoot } from 'react-dom/client'
 
 function App() {
   const [values, setValues] = React.useState<ReadonlyArray<number>>([10])
@@ -90,9 +90,10 @@ function App() {
   )
 }
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root')!)
+
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )
diff --git a/jest.config.ts b/jest.config.ts
@@ -27,7 +27,7 @@ module.exports = {
       testEnvironment: 'jsdom',
       testMatch: ['<rootDir>/packages/ranger/**/*.test.[jt]s?(x)'],
       setupFilesAfterEnv: [
-        '<rootDir>/packages/virtual-core/__tests__/jest.setup.js',
+        '<rootDir>/packages/ranger-core/__tests__/jest.setup.js',
       ],
       snapshotFormat: {
         printBasicPrototype: false,
@@ -39,7 +39,7 @@ module.exports = {
       testEnvironment: 'jsdom',
       testMatch: ['<rootDir>/packages/react-ranger/**/*.test.[jt]s?(x)'],
       setupFilesAfterEnv: [
-        '<rootDir>/packages/react-virtual/__tests__/jest.setup.js',
+        '<rootDir>/packages/react-ranger/__tests__/jest.setup.js',
       ],
       snapshotFormat: {
         printBasicPrototype: false,

diff --git a/package.json b/package.json
@@ -58,7 +58,6 @@
     "prettier": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-virtual": "^2.10.4",
     "rollup": "^2.70.2",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-size": "^0.2.2",

diff --git a/packages/ranger/package.json b/packages/ranger/package.json
@@ -31,9 +31,5 @@
   "files": [
     "build/**",
     "src"
-  ],
-  "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
-  }
+  ]
 }
diff --git a/packages/react-ranger/package.json b/packages/react-ranger/package.json
@@ -42,6 +42,6 @@
     "@tanstack/ranger": "workspace:*"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }
 }