Implemented useRefreshSnapshot() and <RefreshSnapshot />

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

@@ -1,4 +1,4 @@
-import {editable as e, Wrapper} from '@theatre/plugin-r3f'
+import {editable as e, RefreshSnapshot, Wrapper} from '@theatre/plugin-r3f'
 import {OrbitControls, Stars} from '@react-three/drei'
 import {getProject} from '@theatre/core'
 import React, {Suspense} from 'react'
@@ -80,6 +80,7 @@ function App() {
             />
           </e.perspectiveCamera>
           <Suspense fallback={null}>
+            <RefreshSnapshot />
             <Model url={sceneGLB} />
           </Suspense>
           <OrbitControls

packages/plugin-r3f/src/components/RefreshSnapshot.tsx

@@ -0,0 +1,27 @@
+import React, {useEffect} from 'react'
+import useRefreshSnapshot from './useRefreshSnapshot'
+
+/**
+ * Putting this element in a suspense tree makes sure the snapshot editor
+ * gets refreshed once the tree renders.
+ *
+ * Alternatively you can use
+ * @link useRefreshSnapshot()
+ *
+ * @example
+ * ```jsx
+ * <Suspense fallback={null}>
+ *  <RefreshSnapshot />
+ *  <Model url={sceneGLB} />
+ * </Suspense>
+ * ```
+ */
+const RefreshSnapshot: React.FC<{}> = (props) => {
+  const refreshSnapshot = useRefreshSnapshot()
+  useEffect(() => {
+    refreshSnapshot()
+  }, [])
+  return <></>
+}
+
+export default RefreshSnapshot

packages/plugin-r3f/src/components/useRefreshSnapshot.ts

@@ -0,0 +1,11 @@
+import {useCallback} from 'react'
+import {useEditorStore} from '../store'
+
+/**
+ * Returns a function that can be called to refresh the snapshot in the snapshot editor.
+ */
+export default function useRefreshSnapshot() {
+  return useCallback(() => {
+    useEditorStore.getState().createSnapshot()
+  }, [])
+}

packages/plugin-r3f/src/index.tsx

@@ -4,6 +4,8 @@ export type {EditorHelperProps} from './components/EditorHelper'
 export {default as editable} from './components/editable'
 export type {EditableState, BindFunction} from './store'
 export {default as Wrapper} from './Wrapper'
+export {default as useRefreshSnapshot} from './components/useRefreshSnapshot'
+export {default as RefreshSnapshot} from './components/RefreshSnapshot'
 
 if (process.env.NODE_ENV === 'development') {
   setupPlugin()