Feature: Custom RAFDrivers (#374)

Co-authored-by: Pete Feltham <dev@felthy.com>
Co-authored-by: Andrew Prifer <andrew.prifer@gmail.com>

packages/playground/src/shared/custom-raf-driver/App.tsx

@@ -0,0 +1,36 @@
+import {editable as e, RafDriverProvider, SheetProvider} from '@theatre/r3f'
+import type {IRafDriver} from '@theatre/core'
+import {getProject} from '@theatre/core'
+import React from 'react'
+import {Canvas} from '@react-three/fiber'
+
+const EditablePoints = e('points', 'mesh')
+
+function App(props: {rafDriver: IRafDriver}) {
+  return (
+    <div
+      style={{
+        height: '100vh',
+      }}
+    >
+      <Canvas
+        dpr={[1.5, 2]}
+        linear
+        gl={{preserveDrawingBuffer: true}}
+        frameloop="demand"
+      >
+        <SheetProvider sheet={getProject('Space').sheet('Scene')}>
+          <RafDriverProvider driver={props.rafDriver}>
+            <ambientLight intensity={0.75} />
+            <EditablePoints theatreKey="points">
+              <torusKnotGeometry args={[1, 0.3, 128, 64]} />
+              <meshNormalMaterial />
+            </EditablePoints>
+          </RafDriverProvider>
+        </SheetProvider>
+      </Canvas>
+    </div>
+  )
+}
+
+export default App

packages/playground/src/shared/custom-raf-driver/index.tsx

@@ -0,0 +1,18 @@
+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'
+import {createRafDriver} from '@theatre/core'
+
+const rafDriver = createRafDriver({name: 'a custom 5fps raf driver'})
+setInterval(() => {
+  rafDriver.tick(performance.now())
+}, 200)
+
+studio.extend(extension)
+studio.initialize({
+  __experimental_rafDriver: rafDriver,
+})
+
+ReactDOM.render(<App rafDriver={rafDriver} />, document.getElementById('root'))

packages/playground/src/shared/hello-world-extension-dataverse/index.tsx

@@ -4,7 +4,8 @@ import App from './App'
 import type {ToolsetConfig} from '@theatre/studio'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
-import {Atom, prism, Ticker, val} from '@theatre/dataverse'
+import {Atom, prism, val} from '@theatre/dataverse'
+import {onChange} from '@theatre/core'
 
 /**
  * Let's take a look at how we can use `prism`, `Ticker`, and `val` from Theatre.js's Dataverse library
@@ -28,41 +29,39 @@ studio.extend({
     global(set, studio) {
       const exampleBox = new Atom('mobile')
 
-      const untapFn = prism<ToolsetConfig>(() => [
-        {
-          type: 'Switch',
-          value: val(exampleBox.prism),
-          onChange: (value) => exampleBox.set(value),
-          options: [
-            {
-              value: 'mobile',
-              label: 'view mobile version',
-              svgSource: '😀',
-            },
-            {
-              value: 'desktop',
-              label: 'view desktop version',
-              svgSource: '🪢',
-            },
-          ],
-        },
-        {
-          type: 'Icon',
-          title: 'Example Icon',
-          svgSource: '👁‍🗨',
-          onClick: () => {
-            console.log('hello')
+      const untapFn = onChange(
+        prism<ToolsetConfig>(() => [
+          {
+            type: 'Switch',
+            value: val(exampleBox.prism),
+            onChange: (value) => exampleBox.set(value),
+            options: [
+              {
+                value: 'mobile',
+                label: 'view mobile version',
+                svgSource: '😀',
+              },
+              {
+                value: 'desktop',
+                label: 'view desktop version',
+                svgSource: '🪢',
+              },
+            ],
           },
-        },
-      ])
-        // listen to changes to this prism using the requestAnimationFrame shared ticker
-        .onChange(
-          Ticker.raf,
-          (value) => {
-            set(value)
+          {
+            type: 'Icon',
+            title: 'Example Icon',
+            svgSource: '👁‍🗨',
+            onClick: () => {
+              console.log('hello')
+            },
           },
-          true,
-        )
+        ]),
+        (value) => {
+          set(value)
+        },
+      )
+      // listen to changes to this prism using the requestAnimationFrame shared ticker
 
       return untapFn
     },

packages/playground/src/tests/r3f-stress-test/index.tsx

@@ -3,14 +3,16 @@ import ReactDOM from 'react-dom'
 import App from './App'
 import studio from '@theatre/studio'
 import extension from '@theatre/r3f/dist/extension'
-import {Ticker} from '@theatre/dataverse'
+import getStudio from '@theatre/studio/getStudio'
+
+const studioPrivate = getStudio()
 
 studio.extend(extension)
 studio.initialize()
 
 ReactDOM.render(<App />, document.getElementById('root'))
 
-const raf = Ticker.raf
+const raf = studioPrivate.ticker
 
 // Show "ticks per second" information in performance measurements using the User Timing API
 // See https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API