Made the extension mechanism in r3f explicit

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,
-      },
-    ],
-  })
-}