WIP: Upgrade to react 18

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

.eslintrc.js

@@ -23,7 +23,8 @@
  */
 module.exports = {
   root: true,
-  plugins: ['unused-imports', 'eslint-plugin-tsdoc'],
+  plugins: ['unused-imports', 'eslint-plugin-tsdoc', 'import'],
+  settings: {},
   extends: [],
   rules: {
     'unused-imports/no-unused-imports': 'warn',
@@ -88,5 +89,18 @@ module.exports = {
         },
       },
     },
+    {
+      files: [
+        `packages/*/**/*.ts`,
+        `packages/*/**/*.tsx`,
+        `packages/*/**/*.js`,
+      ],
+      rules: {
+        'import/no-extraneous-dependencies': [
+          'error',
+          // {optionalDependencies: false, peerDependencies: false},
+        ],
+      },
+    },
   ],
 }

package.json

@@ -35,13 +35,15 @@
   "devDependencies": {
     "@microsoft/api-documenter": "^7.19.0",
     "@microsoft/api-extractor": "^7.28.6",
+    "@types/eslint": "^8.44.1",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
     "esbuild": "^0.18.13",
     "eslint": "^8.20.0",
+    "eslint-plugin-import": "2.28.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react": "^7.33.1",
-    "eslint-plugin-tsdoc": "^0.2.16",
+    "eslint-plugin-tsdoc": "^0.2.17",
     "eslint-plugin-unused-imports": "^2.0.0",
     "fast-glob": "^3.3.0",
     "husky": "^6.0.0",
@@ -56,10 +58,6 @@
     "zx": "^2.0.0"
   },
   "packageManager": "yarn@3.2.0",
-  "resolutions": {
-    "@types/react": "^17.0.9",
-    "@types/react-dom": "^17.0.9"
-  },
   "dependencies": {
     "@actions/core": "^1.10.0"
   }

packages/dataverse/src/Atom.test.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {Atom} from '@theatre/dataverse'
 
 describe(`Atom`, () => {

packages/dataverse/src/Ticker.test.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {Ticker} from '@theatre/dataverse'
 import {EMPTY_TICKS_BEFORE_GOING_DORMANT} from './Ticker'
 

packages/dataverse/src/dataverse.test.ts

@@ -1,4 +1,5 @@
 import type {Pointer, Prism} from '@theatre/dataverse'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {
   isPointer,
   isPrism,
@@ -10,8 +11,7 @@ import {
   Ticker,
   val,
 } from '@theatre/dataverse'
-// eslint-disable-next-line no-restricted-imports
+import {set as lodashSet} from 'lodash-es'
-import {set as lodashSet} from 'lodash'
 import {isPointerToPrismProvider} from './pointerToPrism'
 
 describe(`The exhaustive guide to dataverse`, () => {

packages/dataverse/src/pointer.test.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import {pointer, getPointerParts, Atom} from '@theatre/dataverse'
 
 describe(`pointer`, () => {

packages/playground/package.json

@@ -20,19 +20,26 @@
     "@percy/cli": "^1.16.0",
     "@percy/playwright": "^1.0.4",
     "@playwright/test": "^1.36.2",
-    "@react-three/drei": "^7.2.2",
+    "@react-three/drei": "^9.80.1",
-    "@react-three/fiber": "^7.0.6",
+    "@react-three/fiber": "^8.13.6",
-    "@rollup/plugin-virtual": "^3.0.1",
     "@theatre/core": "workspace:*",
+    "@theatre/dataverse": "workspace:*",
     "@theatre/r3f": "workspace:*",
     "@theatre/studio": "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",
     "@vitejs/plugin-react": "^4.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "three": "^0.130.1",
+    "fast-glob": "^3.3.0",
+    "lodash-es": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.5",
+    "theatric": "workspace:*",
+    "three": "^0.155.0",
     "typescript": "^4.4.2",
     "vite": "^4.3.9"
   }

packages/playground/src/shared/camera/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
@@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)

packages/playground/src/shared/dom/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import studio from '@theatre/studio'
 import {getProject} from '@theatre/core'
 import {Scene} from './Scene'
@@ -12,7 +12,7 @@ import {Scene} from './Scene'
 
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Scene
     project={getProject('Sample project', {
       // experiments: {
@@ -24,5 +24,4 @@ ReactDOM.render(
       // },
     })}
   />,
-  document.getElementById('root'),
 )

packages/playground/src/shared/r3f-rocket/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
@@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)

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'
 

packages/theatric/package.json

@@ -29,10 +29,10 @@
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.18.11",
+    "@theatre/dataverse": "workspace:*",
     "@types/jest": "^26.0.23",
     "@types/node": "^15.6.2",
-    "@types/react": "^17.0.9",
+    "@types/react": "^18.2.18",
-    "@types/react-dom": "^17.0.6",
     "esbuild": "^0.12.15",
     "esbuild-register": "^2.5.0",
     "lodash-es": "^4.17.21",
@@ -45,7 +45,6 @@
     "@theatre/studio": "workspace:*"
   },
   "peerDependencies": {
-    "react": "*",
+    "react": "*"
-    "react-dom": "*"
   }
 }

theatre/globals.d.ts

@@ -57,17 +57,8 @@ declare module 'timing-function/lib/UnitBezier' {
     solveSimple(progression: number)
   }
 }
-declare module 'clean-webpack-plugin'
-declare module 'webpack-notifier'
-declare module 'case-sensitive-paths-webpack-plugin'
-declare module 'tsconfig-paths-webpack-plugin'
-declare module 'webpack-deep-scope-plugin'
-declare module 'error-overlay-webpack-plugin'
 declare module 'circular-dependency-plugin'
-declare module 'lodash-webpack-plugin'
-declare module 'webpack-bundle-analyzer'
 declare module 'merge-deep'
-declare module 'exec-loader!./commitHash'
 declare module 'blob-compare' {
   const compare: (left: File | Blob, right: File | Blob) => Promise<boolean>
   export default compare

theatre/package.json

@@ -34,23 +34,20 @@
     "@types/lodash-es": "^4.17.4",
     "@types/marked": "^4.0.7",
     "@types/node": "^15.12.3",
-    "@types/react": "^17.0.9",
+    "@types/prop-types": "^15.7.5",
-    "@types/react-dom": "^17.0.6",
+    "@types/react": "^18.2.18",
+    "@types/react-dom": "^18.2.7",
     "@types/react-icons": "^3.0.0",
     "@types/redux-actions": "^2.6.1",
+    "@types/rollup": "0.54.0",
     "@types/shallowequal": "^1.1.1",
     "@types/styled-components": "^5.1.9",
     "@types/uuid": "^8.3.0",
     "blob-compare": "1.1.0",
-    "circular-dependency-plugin": "^5.2.2",
     "cross-env": "^7.0.3",
     "esbuild": "^0.18.17",
-    "esbuild-loader": "^2.13.1",
     "esbuild-register": "^2.5.0",
-    "exec-loader": "^4.0.0",
-    "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
-    "html-loader": "^2.1.2",
     "idb-keyval": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
     "immer": "^9.0.6",
@@ -62,13 +59,12 @@
     "marked": "^4.1.1",
     "nanoid": "^3.3.1",
     "npm-run-all": "^4.1.5",
-    "null-loader": "^4.0.1",
     "polished": "^4.1.3",
     "prop-types": "^15.7.2",
     "propose": "^0.0.5",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-colorful": "^5.5.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.3",
     "react-hot-toast": "^2.4.0",
     "react-icons": "^4.2.0",
@@ -85,12 +81,8 @@
     "rollup-plugin-dts": "^4.0.0",
     "shallowequal": "^1.1.0",
     "styled-components": "^5.3.5",
-    "svg-inline-loader": "^0.8.2",
     "timing-function": "^0.2.3",
-    "ts-node": "^10.0.0",
-    "tslib": "^2.2.0",
     "typescript": "^4.4.2",
-    "url-loader": "^4.1.1",
     "uuid": "^8.3.2"
   },
   "dependencies": {

theatre/studio/src/UI/UINonSSRBits.ts

@@ -1,7 +1,7 @@
 import UIRoot from '@theatre/studio/UIRoot/UIRoot'
 import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import {getMounter} from '@theatre/studio/utils/renderInPortalInContext'
 import {withStyledShadow} from '@theatre/studio/css'
 import ExtensionToolbar from '@theatre/studio/toolbars/ExtensionToolbar/ExtensionToolbar'
@@ -54,9 +54,8 @@ export default class UINonSSRBits {
       this._renderTimeout = undefined
       this._documentBodyUIIsRenderedIn = document.body
       this._documentBodyUIIsRenderedIn.appendChild(this.containerEl)
-      ReactDOM.render(
+      ReactDOM.createRoot(this.containerShadow).render(
         React.createElement(UIRoot, {containerShadow: this.containerShadow}),
-        this.containerShadow,
       )
     }
     this._renderTimeout = setTimeout(renderCallback, 10)