Made the extension mechanism in r3f explicit

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

@@ -1,4 +1,9 @@
-import {editable as e, RefreshSnapshot, Wrapper} from '@theatre/plugin-r3f'
+import {
+  editable as e,
+  RefreshSnapshot,
+  Wrapper,
+  extension,
+} from '@theatre/plugin-r3f'
 import {OrbitControls, Stars} from '@react-three/drei'
 import {getProject} from '@theatre/core'
 import React, {Suspense, useState} from 'react'
@@ -7,6 +12,7 @@ import {useGLTF} from '@react-three/drei'
 import sceneGLB from './scene.glb'
 import studio from '@theatre/studio'
 
+studio.extend(extension)
 studio.initialize()
 
 document.body.style.backgroundColor = '#171717'

packages/plugin-r3f/src/extension.ts

@@ -0,0 +1,18 @@
+import SnapshotEditor from './components/SnapshotEditor'
+import type {IExtension} from '@theatre/studio'
+import Toolbar from './components/Toolbar/Toolbar'
+
+const r3fExtension: IExtension = {
+  id: '@theatre/plugin-r3f',
+  globalToolbar: {
+    component: Toolbar,
+  },
+  panes: [
+    {
+      class: 'snapshotEditor',
+      component: SnapshotEditor,
+    },
+  ],
+}
+
+export default r3fExtension

packages/plugin-r3f/src/index.tsx

@@ -1,4 +1,4 @@
-import setupPlugin from './setupPlugin'
+export {default as extension} from './extension'
 export {default as EditorHelper} from './components/EditorHelper'
 export type {EditorHelperProps} from './components/EditorHelper'
 export {default as editable} from './components/editable'
@@ -6,7 +6,3 @@ 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()
-}

packages/plugin-r3f/src/setupPlugin.ts

@@ -1,18 +0,0 @@
-import SnapshotEditor from './components/SnapshotEditor'
-import studio from '@theatre/studio'
-import Toolbar from './components/Toolbar/Toolbar'
-
-export default function setupPlugin() {
-  studio.extend({
-    id: '@theatre/plugin-r3f',
-    globalToolbar: {
-      component: Toolbar,
-    },
-    panes: [
-      {
-        class: 'snapshotEditor',
-        component: SnapshotEditor,
-      },
-    ],
-  })
-}