WIP: Upgrade to react 18

At this point, the studio and core work with react 18, but r3f doesn't.

packages/r3f/package.json

@@ -47,12 +47,15 @@
     "clean": "rm -rf ./dist && rm -f tsconfig.tsbuildinfo"
   },
   "devDependencies": {
-    "@react-three/drei": "^7.3.1",
+    "@react-three/drei": "^9.80.1",
+    "@react-three/fiber": "^8.13.6",
+    "@theatre/dataverse": "workspace:*",
     "@theatre/react": "workspace:*",
     "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.6.2",
-    "@types/react": "^17.0.9",
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
     "@types/styled-components": "^5.1.9",
     "@types/three": "0.131.0",
     "esbuild": "^0.18.17",
@@ -60,13 +63,16 @@
     "lodash-es": "^4.17.21",
     "npm-run-all": "^4.1.5",
     "polished": "^4.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.2.0",
     "react-merge-refs": "^1.1.0",
     "react-shadow": "^19.0.3",
     "react-use-measure": "^2.0.4",
     "reakit": "^1.3.8",
     "styled-components": "^5.3.5",
-    "three": "0.131.3",
+    "three": "0.155.0",
+    "three-stdlib": "^2.24.1",
     "typescript": "^4.4.2",
     "zustand": "^3.5.1"
   },
@@ -76,6 +82,6 @@
     "@theatre/studio": "*",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
-    "three": ">=0.131.3"
+    "three": ">=0.155.0"
   }
 }

packages/r3f/src/extension/components/SnapshotEditor.tsx

@@ -2,6 +2,7 @@ import {useCallback, useEffect, useLayoutEffect, useMemo, useState} from 'react'
 import React from 'react'
 import {Canvas, useThree} from '@react-three/fiber'
 import type {BaseSheetObjectType} from '../../main/store'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {__private_allRegisteredObjects as allRegisteredObjects} from '@theatre/r3f'
 import shallow from 'zustand/shallow'
 import root from 'react-shadow/styled-components'

packages/r3f/src/extension/components/useSelected.tsx

@@ -1,4 +1,5 @@
 import {useLayoutEffect, useRef, useState} from 'react'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {
   __private_allRegisteredObjects as allRegisteredObjects,
   __private_makeStoreKey as makeStoreKey,

packages/r3f/src/extension/index.ts

@@ -2,7 +2,7 @@ import SnapshotEditor from './components/SnapshotEditor'
 import type {IExtension} from '@theatre/studio'
 import {prism, val} from '@theatre/dataverse'
 import {getEditorSheetObject} from './editorStuff'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import React from 'react'
 import type {ToolsetConfig} from '@theatre/studio'
 import useExtensionStore from './useExtensionStore'
@@ -146,7 +146,9 @@ const r3fExtension: IExtension = {
     {
       class: 'snapshot',
       mount: ({paneId, node}) => {
-        ReactDOM.render(React.createElement(SnapshotEditor, {paneId}), node)
+        ReactDOM.createRoot(node).render(
+          React.createElement(SnapshotEditor, {paneId}),
+        )
         function unmount() {
           ReactDOM.unmountComponentAtNode(node)
         }

packages/r3f/src/extension/useExtensionStore.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {____private_editorStore} from '@theatre/r3f'
 import create from 'zustand'