From 5387fda5171033ea7f66657320be932e9961df77 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Thu, 3 Aug 2023 21:02:05 +0200
Subject: [PATCH] Use react18 in playground

---
 .eslintrc.js                                             | 9 +++++++--
 examples/basic-dom/index.tsx                             | 5 ++---
 packages/playground/src/index.tsx                        | 5 ++---
 packages/playground/src/shared/camera/index.tsx          | 2 +-
 .../src/shared/custom-editable-components/index.tsx      | 4 ++--
 .../playground/src/shared/custom-raf-driver/index.tsx    | 6 ++++--
 packages/playground/src/shared/dom-basic/index.tsx       | 5 ++---
 packages/playground/src/shared/dom/index.tsx             | 2 +-
 .../src/shared/hello-world-extension-dataverse/index.tsx | 4 ++--
 .../hello-world-extension-using-sheet-object/index.tsx   | 4 ++--
 .../src/shared/hello-world-extension/index.tsx           | 4 ++--
 packages/playground/src/shared/image/index.tsx           | 2 +-
 packages/playground/src/shared/instances/index.tsx       | 5 ++---
 packages/playground/src/shared/notifications/index.tsx   | 5 ++---
 packages/playground/src/shared/r3f-rocket/index.tsx      | 2 +-
 packages/playground/src/shared/remote/index.tsx          | 4 ++--
 packages/playground/src/shared/theatric/index.tsx        | 2 +-
 packages/playground/src/shared/three-basic/index.tsx     | 5 ++---
 packages/playground/src/shared/turtle/index.tsx          | 2 +-
 packages/playground/src/tests/r3f-dynamic-tree/index.tsx | 4 ++--
 packages/playground/src/tests/r3f-stress-test/index.tsx  | 4 ++--
 packages/r3f/src/extension/index.ts                      | 8 ++++----
 22 files changed, 47 insertions(+), 46 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index ec357d1..98a7ff2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,13 +23,18 @@
  */
 module.exports = {
   root: true,
-  plugins: ['unused-imports', 'eslint-plugin-tsdoc', 'import'],
-  settings: {},
+  plugins: ['unused-imports', 'eslint-plugin-tsdoc', 'import', 'react'],
+  settings: {
+    react: {
+      version: '18.2',
+    },
+  },
   extends: [],
   rules: {
     'unused-imports/no-unused-imports': 'warn',
     'tsdoc/syntax': 'warn',
     'no-debugger': 'error',
+    'react/no-deprecated': 'error',
 
     'no-restricted-imports': [
       'error',
diff --git a/examples/basic-dom/index.tsx b/examples/basic-dom/index.tsx
index e2aaf7a..6405c63 100644
--- a/examples/basic-dom/index.tsx
+++ b/examples/basic-dom/index.tsx
@@ -1,12 +1,11 @@
 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'
 
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene project={getProject('Sample project')} />,
-  document.getElementById('root'),
 )
diff --git a/packages/playground/src/index.tsx b/packages/playground/src/index.tsx
index b07d9c8..b5fe607 100644
--- a/packages/playground/src/index.tsx
+++ b/packages/playground/src/index.tsx
@@ -1,5 +1,5 @@
 import {PlaygroundPage} from './home/PlaygroundPage'
-import ReactDom from 'react-dom'
+import ReactDom from 'react-dom/client'
 import React from 'react'
 
 // like [{'./shared/hello/index.html': () => import('./shared/hello/index.html')}]
@@ -16,7 +16,6 @@ const groups = (Object.keys(modules) as string[]).reduce((acc, path) => {
   return acc
 }, {} as {[groupName: string]: string[]})
 
-ReactDom.render(
+ReactDom.createRoot(document.getElementById('root')!).render(
   <PlaygroundPage groups={groups} />,
-  document.getElementById('root'),
 )
diff --git a/packages/playground/src/shared/camera/index.tsx b/packages/playground/src/shared/camera/index.tsx
index 1cb90c2..28d9cee 100644
--- a/packages/playground/src/shared/camera/index.tsx
+++ b/packages/playground/src/shared/camera/index.tsx
@@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.createRoot(document.getElementById('root')).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/playground/src/shared/custom-editable-components/index.tsx b/packages/playground/src/shared/custom-editable-components/index.tsx
index 5507263..28d9cee 100644
--- a/packages/playground/src/shared/custom-editable-components/index.tsx
+++ b/packages/playground/src/shared/custom-editable-components/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 />)
diff --git a/packages/playground/src/shared/custom-raf-driver/index.tsx b/packages/playground/src/shared/custom-raf-driver/index.tsx
index 00a0f46..630ee15 100644
--- a/packages/playground/src/shared/custom-raf-driver/index.tsx
+++ b/packages/playground/src/shared/custom-raf-driver/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'
@@ -15,4 +15,6 @@ studio.initialize({
   __experimental_rafDriver: rafDriver,
 })
 
-ReactDOM.render(<App rafDriver={rafDriver} />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <App rafDriver={rafDriver} />,
+)
diff --git a/packages/playground/src/shared/dom-basic/index.tsx b/packages/playground/src/shared/dom-basic/index.tsx
index 3d1ddf0..5eb6911 100644
--- a/packages/playground/src/shared/dom-basic/index.tsx
+++ b/packages/playground/src/shared/dom-basic/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'
@@ -9,7 +9,6 @@ import {Scene} from './Scene'
 
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene project={getProject('Sample project')} />,
-  document.getElementById('root'),
 )
diff --git a/packages/playground/src/shared/dom/index.tsx b/packages/playground/src/shared/dom/index.tsx
index 42eb39a..209a785 100644
--- a/packages/playground/src/shared/dom/index.tsx
+++ b/packages/playground/src/shared/dom/index.tsx
@@ -12,7 +12,7 @@ import {Scene} from './Scene'
 
 studio.initialize()
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene
     project={getProject('Sample project', {
       // experiments: {
diff --git a/packages/playground/src/shared/hello-world-extension-dataverse/index.tsx b/packages/playground/src/shared/hello-world-extension-dataverse/index.tsx
index 2fd63be..1fdea94 100644
--- a/packages/playground/src/shared/hello-world-extension-dataverse/index.tsx
+++ b/packages/playground/src/shared/hello-world-extension-dataverse/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 type {ToolsetConfig} from '@theatre/studio'
 import studio from '@theatre/studio'
@@ -70,4 +70,4 @@ studio.extend({
 })
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/playground/src/shared/hello-world-extension-using-sheet-object/index.tsx b/packages/playground/src/shared/hello-world-extension-using-sheet-object/index.tsx
index 88ce27a..8f4b2a3 100644
--- a/packages/playground/src/shared/hello-world-extension-using-sheet-object/index.tsx
+++ b/packages/playground/src/shared/hello-world-extension-using-sheet-object/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 type {ISheetObject} from '@theatre/core'
 import {onChange, types, val} from '@theatre/core'
@@ -60,4 +60,4 @@ studio.extend({
 })
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/playground/src/shared/hello-world-extension/index.tsx b/packages/playground/src/shared/hello-world-extension/index.tsx
index 2cebd3b..1fa3f37 100644
--- a/packages/playground/src/shared/hello-world-extension/index.tsx
+++ b/packages/playground/src/shared/hello-world-extension/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'
@@ -92,4 +92,4 @@ studio.extend({
 })
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/playground/src/shared/image/index.tsx b/packages/playground/src/shared/image/index.tsx
index e216aa1..9cca1eb 100644
--- a/packages/playground/src/shared/image/index.tsx
+++ b/packages/playground/src/shared/image/index.tsx
@@ -5,7 +5,7 @@
 import {getProject, types} from '@theatre/core'
 import studio from '@theatre/studio'
 import React, {useEffect, useState} from 'react'
-import {render} from 'react-dom'
+import {render} from 'react-dom/client'
 import styled from 'styled-components'
 
 const project = getProject('Image type playground', {
diff --git a/packages/playground/src/shared/instances/index.tsx b/packages/playground/src/shared/instances/index.tsx
index cae2285..7adb6ad 100644
--- a/packages/playground/src/shared/instances/index.tsx
+++ b/packages/playground/src/shared/instances/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,9 +7,8 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 )
diff --git a/packages/playground/src/shared/notifications/index.tsx b/packages/playground/src/shared/notifications/index.tsx
index 5d2f0d8..ac3fe4a 100644
--- a/packages/playground/src/shared/notifications/index.tsx
+++ b/packages/playground/src/shared/notifications/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, notify} from '@theatre/core'
 import {Scene} from './Scene'
@@ -24,7 +24,7 @@ void getProject('Sample project').ready.then(() => {
   )
 })
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene
     project={getProject('Sample project', {
       // experiments: {
@@ -36,5 +36,4 @@ ReactDOM.render(
       // },
     })}
   />,
-  document.getElementById('root'),
 )
diff --git a/packages/playground/src/shared/r3f-rocket/index.tsx b/packages/playground/src/shared/r3f-rocket/index.tsx
index 1cb90c2..28d9cee 100644
--- a/packages/playground/src/shared/r3f-rocket/index.tsx
+++ b/packages/playground/src/shared/r3f-rocket/index.tsx
@@ -7,4 +7,4 @@ import extension from '@theatre/r3f/dist/extension'
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.createRoot(document.getElementById('root')).render(<App />)
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/playground/src/shared/remote/index.tsx b/packages/playground/src/shared/remote/index.tsx
index 0a2f05f..9c40bd5 100644
--- a/packages/playground/src/shared/remote/index.tsx
+++ b/packages/playground/src/shared/remote/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'
@@ -9,4 +9,4 @@ const project = getProject('Sample project')
 studio.initialize()
 RemoteController(project)
 
-ReactDOM.render(<Scene />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<Scene />)
diff --git a/packages/playground/src/shared/theatric/index.tsx b/packages/playground/src/shared/theatric/index.tsx
index 6d2b273..210a652 100644
--- a/packages/playground/src/shared/theatric/index.tsx
+++ b/packages/playground/src/shared/theatric/index.tsx
@@ -1,5 +1,5 @@
 import {button, initialize, types, useControls} from 'theatric'
-import {render} from 'react-dom'
+import {render} from 'react-dom/client'
 import React, {useState} from 'react'
 import state from './state.json'
 
diff --git a/packages/playground/src/shared/three-basic/index.tsx b/packages/playground/src/shared/three-basic/index.tsx
index 2d83893..daf7ebd 100644
--- a/packages/playground/src/shared/three-basic/index.tsx
+++ b/packages/playground/src/shared/three-basic/index.tsx
@@ -1,12 +1,11 @@
 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 ThreeScene from './ThreeScene'
 
 studio.initialize()
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <ThreeScene project={getProject('Three Basic')} />,
-  document.getElementById('root'),
 )
diff --git a/packages/playground/src/shared/turtle/index.tsx b/packages/playground/src/shared/turtle/index.tsx
index bd4509a..a0f3fc1 100644
--- a/packages/playground/src/shared/turtle/index.tsx
+++ b/packages/playground/src/shared/turtle/index.tsx
@@ -3,7 +3,7 @@
  * can be tweaked and animated.
  */
 import React, {useMemo, useState} from 'react'
-import {render} from 'react-dom'
+import {render} from 'react-dom/client'
 import {getProject} from '@theatre/core'
 import type {ITurtle} from './turtle'
 import TurtleRenderer from './TurtleRenderer'
diff --git a/packages/playground/src/tests/r3f-dynamic-tree/index.tsx b/packages/playground/src/tests/r3f-dynamic-tree/index.tsx
index 74f759d..113e730 100644
--- a/packages/playground/src/tests/r3f-dynamic-tree/index.tsx
+++ b/packages/playground/src/tests/r3f-dynamic-tree/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({usePersistentStorage: false})
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
diff --git a/packages/playground/src/tests/r3f-stress-test/index.tsx b/packages/playground/src/tests/r3f-stress-test/index.tsx
index 22b9a11..2efe8bb 100644
--- a/packages/playground/src/tests/r3f-stress-test/index.tsx
+++ b/packages/playground/src/tests/r3f-stress-test/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'
@@ -10,7 +10,7 @@ const studioPrivate = getStudio()
 studio.extend(extension)
 studio.initialize()
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
 
 const raf = studioPrivate.ticker
 
diff --git a/packages/r3f/src/extension/index.ts b/packages/r3f/src/extension/index.ts
index fba1723..6e9839a 100644
--- a/packages/r3f/src/extension/index.ts
+++ b/packages/r3f/src/extension/index.ts
@@ -146,11 +146,11 @@ const r3fExtension: IExtension = {
     {
       class: 'snapshot',
       mount: ({paneId, node}) => {
-        ReactDOM.createRoot(node).render(
-          React.createElement(SnapshotEditor, {paneId}),
-        )
+        const root = ReactDOM.createRoot(node)
+
+        root.render(React.createElement(SnapshotEditor, {paneId}))
         function unmount() {
-          ReactDOM.unmountComponentAtNode(node)
+          root.unmount()
         }
         return unmount
       },