Add a playground for dynamic trees in r3f

packages/playground/src/tests/r3f-dynamic-tree/App.tsx

@@ -0,0 +1,88 @@
+import {editable as e, SheetProvider} from '@theatre/r3f'
+import {getProject} from '@theatre/core'
+import React, {useEffect, useState} from 'react'
+import {Canvas} from '@react-three/fiber'
+import {PerspectiveCamera} from '@react-three/drei'
+import {useExtensionButton} from '../../shared/utils/useExtensionButton'
+
+document.body.style.backgroundColor = '#171717'
+
+const EditableCamera = e(PerspectiveCamera, 'perspectiveCamera')
+
+function App() {
+  const project = getProject('R3F Hot Reload Test')
+  const sheet = project.sheet('Scene')
+
+  return (
+    <div
+      style={{
+        height: '100vh',
+      }}
+    >
+      <Canvas
+        dpr={[1.5, 2]}
+        linear
+        shadows
+        gl={{preserveDrawingBuffer: true}}
+        frameloop="demand"
+      >
+        <SheetProvider sheet={sheet}>
+          <EditableCamera
+            theatreKey="Camera"
+            makeDefault
+            position={[0, 0, 16]}
+            fov={75}
+          >
+            <Scene />
+          </EditableCamera>
+        </SheetProvider>
+      </Canvas>
+    </div>
+  )
+}
+
+// initial config of "Cube 1"
+const cube1Config1 = {a: 1}
+// we change the default value of a, and add a new prop
+const cube1Config2 = {a: 2, b: 2}
+// we re-use the previous config
+const cube1Config3 = cube1Config2
+
+function Scene() {
+  const [state, setState] = useState(1)
+
+  useExtensionButton('Step forward', () => {
+    setState((s) => s + 1)
+  })
+
+  useEffect(() => {}, [])
+
+  if (state === 1) {
+    return (
+      <e.mesh theatreKey="Cube 1" additionalProps={cube1Config1}>
+        <boxGeometry args={[10, 10, 10]} />
+      </e.mesh>
+    )
+  } else if (state === 2) {
+    return (
+      <>
+        <e.mesh theatreKey="Cube 1" additionalProps={cube1Config2}>
+          <boxGeometry args={[10, 10, 10]} />
+        </e.mesh>
+        <e.mesh theatreKey="Cube 2">
+          <boxGeometry args={[20, 20, 10]} />
+        </e.mesh>
+      </>
+    )
+  } else if (state === 3) {
+    return (
+      <e.mesh theatreKey="Cube 1" additionalProps={cube1Config3}>
+        <boxGeometry args={[10, 10, 10]} />
+      </e.mesh>
+    )
+  } else {
+    return null
+  }
+}
+
+export default App

packages/playground/src/tests/r3f-dynamic-tree/index.tsx

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

packages/r3f/src/main/editable.tsx

@@ -1,11 +1,5 @@
-import {
-  ComponentProps,
-  ComponentType,
-  Ref,
-  RefAttributes,
-  useMemo,
-  useState,
-} from 'react'
+import type {ComponentProps, ComponentType, Ref, RefAttributes} from 'react'
+import {useMemo, useState} from 'react'
 import React, {forwardRef, useEffect, useLayoutEffect, useRef} from 'react'
 import {allRegisteredObjects, editorStore} from './store'
 import mergeRefs from 'react-merge-refs'