Switches to createRoot, increases React minimum to v18 to support v19

lourd · lourd · commit 89db3d454474 · 2024-08-17T11:15:35.000-04:00
diff --git a/demo/package.json b/demo/package.json
@@ -14,15 +14,15 @@
     "@stitches/react": "1.2.8",
     "leva": "*",
     "noisejs": "^2.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-use": "^17.3.2",
     "three": "^0.143.0",
     "wouter": "^2.7.5"
   },
   "devDependencies": {
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react-refresh": "^1.3.6",
     "typescript": "^4.5.5",
     "vite": "2.7.13"
diff --git a/demo/src/sandboxes/leva-advanced-panels/package.json b/demo/src/sandboxes/leva-advanced-panels/package.json
@@ -4,8 +4,8 @@
   "main": "src/index.jsx",
   "dependencies": {
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-busy/package.json b/demo/src/sandboxes/leva-busy/package.json
@@ -6,8 +6,8 @@
     "@radix-ui/react-icons": "^1.0.2",
     "leva": "*",
     "noisejs": "2.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3",
     "react-use": "^17.2.4"
   },
@@ -24,8 +24,8 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "typescript": "^4.1.5"
   }
 }
diff --git a/demo/src/sandboxes/leva-custom-plugin/package.json b/demo/src/sandboxes/leva-custom-plugin/package.json
@@ -4,13 +4,13 @@
   "main": "src/index.tsx",
   "dependencies": {
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "typescript": "^4.1.5"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-minimal/package.json b/demo/src/sandboxes/leva-minimal/package.json
@@ -5,8 +5,8 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.0.2",
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-plugin-bezier/package.json b/demo/src/sandboxes/leva-plugin-bezier/package.json
@@ -6,13 +6,13 @@
   "dependencies": {
     "@leva-ui/plugin-bezier": "*",
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "typescript": "^4.1.5"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-plugin-dates/package.json b/demo/src/sandboxes/leva-plugin-dates/package.json
@@ -6,13 +6,13 @@
   "dependencies": {
     "@leva-ui/plugin-dates": "*",
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "typescript": "^4.1.5"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-plugin-plot/package.json b/demo/src/sandboxes/leva-plugin-plot/package.json
@@ -6,13 +6,13 @@
   "dependencies": {
     "@leva-ui/plugin-plot": "*",
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "typescript": "^4.1.5"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-plugin-spring/package.json b/demo/src/sandboxes/leva-plugin-spring/package.json
@@ -6,13 +6,13 @@
   "dependencies": {
     "@leva-ui/plugin-spring": "*",
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "devDependencies": {
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "typescript": "^4.1.5"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-scroll/package.json b/demo/src/sandboxes/leva-scroll/package.json
@@ -7,8 +7,8 @@
   "dependencies": {
     "leva": "*",
     "noisejs": "2.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-theme/package.json b/demo/src/sandboxes/leva-theme/package.json
@@ -6,8 +6,8 @@
     "leva": "*",
     "@leva-ui/plugin-spring": "*",
     "noisejs": "2.1.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3"
   },
   "scripts": {
diff --git a/demo/src/sandboxes/leva-transient/package.json b/demo/src/sandboxes/leva-transient/package.json
@@ -6,8 +6,8 @@
     "@react-three/drei": "^4.3.3",
     "@react-three/fiber": "^6.0.21",
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-scripts": "4.0.3",
     "three": "^0.143.0"
   },
diff --git a/demo/src/sandboxes/leva-ui/package.json b/demo/src/sandboxes/leva-ui/package.json
@@ -6,8 +6,8 @@
   "main": "src/index.jsx",
   "dependencies": {
     "leva": "*",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-dropzone": "11.3.1",
     "react-scripts": "4.0.3",
     "react-use-gesture": "^9.0.0"
diff --git a/package.json b/package.json
@@ -58,8 +58,8 @@
   },
   "bugs": "https://github.com/pmndrs/leva/issues",
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",
@@ -70,15 +70,15 @@
     "@emotion/react": "^11.7.1",
     "@preconstruct/cli": "^2.1.5",
     "@radix-ui/react-icons": "^1.0.3",
-    "@size-limit/preset-big-lib": "^8.1.0",
+    "@size-limit/preset-big-lib": "^11.0.0",
     "@storybook/addon-actions": "^6.4.18",
     "@storybook/addon-essentials": "^6.4.18",
     "@storybook/addon-links": "^6.4.18",
     "@storybook/addon-storysource": "^6.4.18",
     "@storybook/react": "^6.4.18",
     "@testing-library/cypress": "^8.0.2",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
     "all-contributors-cli": "^6.20.0",
@@ -97,8 +97,8 @@
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.5.1",
     "pretty-quick": "^3.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "size-limit": "^8.1.0",
     "start-server-and-test": "^1.14.0",
     "tsd": "^0.19.1",
diff --git a/packages/leva/package.json b/packages/leva/package.json
@@ -18,8 +18,8 @@
     ]
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
     "@radix-ui/react-portal": "^1.0.2",
diff --git a/packages/leva/src/components/Leva/Leva.tsx b/packages/leva/src/components/Leva/Leva.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
 import { levaStore } from '../../store'
 import { LevaRoot, LevaRootProps } from './LevaRoot'
-import { render } from '../../utils/react'
 
 let rootInitialized = false
 let rootEl: HTMLElement | null = null
@@ -40,7 +40,7 @@ export function useRenderRoot(isGlobalPanel: boolean) {
           document.getElementById('leva__root') || Object.assign(document.createElement('div'), { id: 'leva__root' })
         if (document.body) {
           document.body.appendChild(rootEl)
-          render(<Leva isRoot />, rootEl)
+          createRoot(rootEl).render(<Leva isRoot />)
         }
       }
       rootInitialized = true
diff --git a/packages/leva/src/utils/react.ts b/packages/leva/src/utils/react.ts
@@ -1,20 +1,4 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
-
-/**
- * With React 18, renderers will warn when not using the new createRoot signature to opt-in to concurrent mode.
- * We're okay with creating a (blocking) legacy root to support older versions, so we disable the warning.
- * @see https://github.com/facebook/react/pull/21652
- */
-export function render<P>(element: React.ReactElement<P>, container: HTMLElement): void {
-  // eslint-disable-next-line no-console
-  const error = console.error
-  // eslint-disable-next-line no-console
-  console.error = () => {}
-  ReactDOM.render(element, container)
-  // eslint-disable-next-line no-console
-  console.error = error
-}
 
 /*
  * https://github.com/gregberge/react-merge-refs
diff --git a/yarn.lock b/yarn.lock
