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,56 +97,57 @@ function App() {
       <Canvas
         // @ts-ignore
         shadowMap
-        onCreated={bindToCanvas({
-          sheet: getProject('Example project').sheet('R3F-Canvas'),
-        })}
       >
-        <ECamera makeDefault uniqueName="Camera" />
+        <Wrapper
-        <ambientLight intensity={0.4} />
+          getSheet={() => getProject('Example project').sheet('R3F-Canvas')}
-        <e.pointLight
+        >
-          position={[-10, -10, 5]}
+          <ECamera makeDefault uniqueName="Camera" />
-          intensity={2}
+          <ambientLight intensity={0.4} />
-          color="#ff20f0"
+          <e.pointLight
-          uniqueName="Light 1"
+            position={[-10, -10, 5]}
-        />
+            intensity={2}
-        <e.pointLight
+            color="#ff20f0"
-          position={[0, 0.5, -1]}
+            uniqueName="Light 1"
-          distance={1}
-          intensity={2}
-          color="#e4be00"
-          uniqueName="Light 2"
-        />
-        <group position={[0, -0.9, -3]}>
-          <Plane
-            color="hotpink"
-            rotation-x={-Math.PI / 2}
-            position-z={2}
-            scale={[4, 20, 0.2]}
-            uniqueName="plane1"
           />
-          <Plane
+          <e.pointLight
+            position={[0, 0.5, -1]}
+            distance={1}
+            intensity={2}
             color="#e4be00"
-            rotation-x={-Math.PI / 2}
+            uniqueName="Light 2"
-            position-y={1}
-            scale={[4.2, 0.2, 4]}
-            uniqueName="plane2"
           />
-          <Plane
+          <group position={[0, -0.9, -3]}>
-            color="#736fbd"
+            <Plane
-            rotation-x={-Math.PI / 2}
+              color="hotpink"
-            position={[-1.7, 1, 3.5]}
+              rotation-x={-Math.PI / 2}
-            scale={[0.5, 4, 4]}
+              position-z={2}
-            uniqueName="plane3"
+              scale={[4, 20, 0.2]}
-          />
+              uniqueName="plane1"
-          <Plane
+            />
-            color="white"
+            <Plane
-            rotation-x={-Math.PI / 2}
+              color="#e4be00"
-            position={[0, 4.5, 3]}
+              rotation-x={-Math.PI / 2}
-            scale={[2, 0.03, 4]}
+              position-y={1}
-            uniqueName="plane4"
+              scale={[4.2, 0.2, 4]}
-          />
+              uniqueName="plane2"
-        </group>
+            />
-        <Button />
+            <Plane
+              color="#736fbd"
+              rotation-x={-Math.PI / 2}
+              position={[-1.7, 1, 3.5]}
+              scale={[0.5, 4, 4]}
+              uniqueName="plane3"
+            />
+            <Plane
+              color="white"
+              rotation-x={-Math.PI / 2}
+              position={[0, 4.5, 3]}
+              scale={[2, 0.03, 4]}
+              uniqueName="plane4"
+            />
+          </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,50 +49,47 @@ 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]} />
-        <ambientLight intensity={0.75} />
-        <e.perspectiveCamera
-          uniqueName="Camera"
-          // @ts-ignore
-          makeDefault
-          position={[0, 0, 16]}
-          fov={75}
         >
-          <e.pointLight
+          <fog attach="fog" args={[bg, 16, 30]} />
-            uniqueName="Light 1"
+          <color attach="background" args={[bg]} />
-            intensity={1}
+          <ambientLight intensity={0.75} />
-            position={[-10, -25, -10]}
+          <e.perspectiveCamera
+            uniqueName="Camera"
+            // @ts-ignore
+            makeDefault
+            position={[0, 0, 16]}
+            fov={75}
+          >
+            <e.pointLight
+              uniqueName="Light 1"
+              intensity={1}
+              position={[-10, -25, -10]}
+            />
+            <e.spotLight
+              uniqueName="Light 2"
+              castShadow
+              intensity={2.25}
+              angle={0.2}
+              penumbra={1}
+              position={[-25, 20, -15]}
+              shadow-mapSize={[1024, 1024]}
+              shadow-bias={-0.0001}
+            />
+          </e.perspectiveCamera>
+          <Suspense fallback={null}>
+            <Model url={sceneGLB} />
+          </Suspense>
+          <OrbitControls
+            enablePan={false}
+            enableZoom={true}
+            maxPolarAngle={Math.PI / 2}
+            minPolarAngle={Math.PI / 2}
           />
-          <e.spotLight
+          <Stars radius={500} depth={50} count={1000} factor={10} />
-            uniqueName="Light 2"
+        </Wrapper>
-            castShadow
-            intensity={2.25}
-            angle={0.2}
-            penumbra={1}
-            position={[-25, 20, -15]}
-            shadow-mapSize={[1024, 1024]}
-            shadow-bias={-0.0001}
-          />
-        </e.perspectiveCamera>
-        <Suspense fallback={null}>
-          <Model url={sceneGLB} />
-        </Suspense>
-        {/* <OrbitControls
-          enablePan={false}
-          enableZoom={true}
-          maxPolarAngle={Math.PI / 2}
-          minPolarAngle={Math.PI / 2}
-        /> */}
-        <Stars radius={500} depth={50} count={1000} factor={10} />
       </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({