deprecate bindToCanvas() in favor of <Wrapper>

packages/playground/src/r3f/App.tsx

@@ -1,4 +1,4 @@
-import {editable as e, bindToCanvas} from '@theatre/plugin-r3f'
+import {editable as e, Wrapper} from '@theatre/plugin-r3f'
 import {PerspectiveCamera} from '@react-three/drei'
 import {getProject} from '@theatre/core'
 import * as THREE from 'three'
@@ -97,9 +97,9 @@ function App() {
       <Canvas
         // @ts-ignore
         shadowMap
-        onCreated={bindToCanvas({
+      >
-          sheet: getProject('Example project').sheet('R3F-Canvas'),
+        <Wrapper
-        })}
+          getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
         >
           <ECamera makeDefault uniqueName="Camera" />
           <ambientLight intensity={0.4} />
@@ -147,6 +147,7 @@ function App() {
             />
           </group>
           <Button />
+        </Wrapper>
       </Canvas>
     </div>
   )

packages/playground/src/space-exploration/App.tsx

@@ -1,5 +1,5 @@
-import {editable as e, bindToCanvas} from '@theatre/plugin-r3f'
+import {editable as e, Wrapper} from '@theatre/plugin-r3f'
-import {Stars} from '@react-three/drei'
+import {OrbitControls, Stars} from '@react-three/drei'
 import {getProject} from '@theatre/core'
 import React, {Suspense} from 'react'
 import {Canvas} from '@react-three/fiber'
@@ -49,13 +49,9 @@ function App() {
   const bg = '#272730'
   return (
     <div>
-      <Canvas
+      <Canvas dpr={[1.5, 2]} linear shadows>
-        dpr={[1.5, 2]}
+        <Wrapper
-        linear
+          getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
-        shadows
-        onCreated={bindToCanvas({
-          sheet: getProject('Example project').sheet('R3F-Canvas'),
-        })}
         >
           <fog attach="fog" args={[bg, 16, 30]} />
           <color attach="background" args={[bg]} />
@@ -86,13 +82,14 @@ function App() {
           <Suspense fallback={null}>
             <Model url={sceneGLB} />
           </Suspense>
-        {/* <OrbitControls
+          <OrbitControls
             enablePan={false}
             enableZoom={true}
             maxPolarAngle={Math.PI / 2}
             minPolarAngle={Math.PI / 2}
-        /> */}
+          />
           <Stars radius={500} depth={50} count={1000} factor={10} />
+        </Wrapper>
       </Canvas>
     </div>
   )

packages/plugin-r3f/src/index.tsx

@@ -4,11 +4,32 @@ export {default as EditorHelper} from './components/EditorHelper'
 export type {EditorHelperProps} from './components/EditorHelper'
 
 export {default as editable} from './components/editable'
-export {bindToCanvas} from './store'
 export type {EditableState, BindFunction} from './store'
 import studio from '@theatre/studio'
 import Toolbar from './components/Toolbar/Toolbar'
 import {types} from '@theatre/core'
+import React, {useLayoutEffect} from 'react'
+import {useThree} from '@react-three/fiber'
+import type {ISheet} from '@theatre/core'
+import {bindToCanvas} from './store'
+
+export const Wrapper: React.FC<{
+  getSheet: () => ISheet
+}> = (props) => {
+  const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl}))
+
+  useLayoutEffect(() => {
+    const sheet = props.getSheet()
+    if (!sheet || sheet.type !== 'Theatre_Sheet_PublicAPI') {
+      throw new Error(
+        `getSheet() in <Wrapper getSheet={getSheet}> has returned an invalid value`,
+      )
+    }
+    bindToCanvas({sheet})({gl, scene})
+  }, [scene, gl])
+
+  return <>{props.children}</>
+}
 
 if (process.env.NODE_ENV === 'development') {
   studio.extend({