Extensions can now use studio's project for editing-related objects.

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

@@ -9,8 +9,7 @@ import studio, {ToolbarIconButton} from '@theatre/studio'
 import {useVal} from '@theatre/dataverse-react'
 import styled, {createGlobalStyle, StyleSheetManager} from 'styled-components'
 import {IoCameraReverseOutline} from 'react-icons/all'
-import type {ISheetObject, ISheet} from '@theatre/core'
+import type {ISheet} from '@theatre/core'
-import type {$FixMe} from '../types'
 import useSnapshotEditorCamera from './useSnapshotEditorCamera'
 
 const GlobalStyle = createGlobalStyle`
@@ -95,9 +94,8 @@ const Tools = styled.div`
   pointer-events: auto;
 `
 
-const SnapshotEditor: React.FC<{object: ISheetObject<$FixMe>; paneId: string}> =
+const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
-  (props) => {
+  const snapshotEditorSheet = studio.getStudioProject().sheet('Plugin-R3F')
-    const snapshotEditorSheet = props.object.sheet
   const paneId = props.paneId
 
   const [editorObject, sceneSnapshot, createSnapshot, sheet] = useEditorStore(
@@ -176,6 +174,6 @@ const SnapshotEditor: React.FC<{object: ISheetObject<$FixMe>; paneId: string}> =
       </StyleSheetManager>
     </root.div>
   )
-  }
+}
 
 export default SnapshotEditor

theatre/studio/src/PaneManager.ts

@@ -1,7 +1,7 @@
 import {prism, val} from '@theatre/dataverse'
 import {emptyArray} from '@theatre/shared/utils'
 import SimpleCache from '@theatre/shared/utils/SimpleCache'
-import type {$FixMe, $IntentionalAny} from '@theatre/shared/utils/types'
+import type {$IntentionalAny} from '@theatre/shared/utils/types'
 import type {Studio} from './Studio'
 import type {PaneInstance} from './TheatreStudio'
 
@@ -43,20 +43,9 @@ export default class PaneManager {
           const instance = prism.memo(
             `instance-${instanceDescriptor!.instanceId}`,
             () => {
-              const object = this._studio
-                .getExtensionSheet(extensionId, core)
-                .object(
-                  'Pane: ' + instanceId,
-                  null,
-                  core.types.compound({
-                    panelThingy: core.types.boolean(false),
-                  }),
-                ) as $FixMe
-
               const inst: PaneInstance<$IntentionalAny> = {
                 extensionId,
                 instanceId,
-                object,
                 definition,
               }
               return inst

theatre/studio/src/TheatreStudio.ts

@@ -1,4 +1,4 @@
-import type {ISheet, ISheetObject} from '@theatre/core'
+import type {IProject, ISheet, ISheetObject} from '@theatre/core'
 import studioTicker from '@theatre/studio/studioTicker'
 import type {IDerivation, Pointer} from '@theatre/dataverse'
 import {prism} from '@theatre/dataverse'
@@ -15,10 +15,7 @@ import {getOutlineSelection} from './selectors'
 import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import getStudio from './getStudio'
 import type React from 'react'
-import type {
+import type {PropTypeConfig_Compound} from '@theatre/core/propTypes'
-  PropTypeConfig_Boolean,
-  PropTypeConfig_Compound,
-} from '@theatre/core/propTypes'
 import {debounce} from 'lodash-es'
 
 export interface ITransactionAPI {
@@ -33,12 +30,6 @@ export interface PaneClassDefinition<
   dataType: DataType
   component: React.ComponentType<{
     paneId: string
-    object: ISheetObject<
-      PropTypeConfig_Compound<{
-        visible: PropTypeConfig_Boolean
-        data: DataType
-      }>
-    >
   }>
 }
 
@@ -53,9 +44,6 @@ export type IExtension = {
 export type PaneInstance<ClassName extends string> = {
   extensionId: string
   instanceId: string
-  object: ISheetObject<
-    PropTypeConfig_Compound<{data: $FixMe; visible: PropTypeConfig_Boolean}>
-  >
   definition: PaneClassDefinition<$FixMe>
 }
 
@@ -87,6 +75,8 @@ export interface IStudio {
   createPane<PaneClass extends string>(
     paneClass: PaneClass,
   ): PaneInstance<PaneClass>
+
+  getStudioProject(): IProject
 }
 
 export default class TheatreStudio implements IStudio {
@@ -163,6 +153,16 @@ export default class TheatreStudio implements IStudio {
     return getStudio().scrub()
   }
 
+  getStudioProject() {
+    const core = getStudio().core
+    if (!core) {
+      throw new Error(`You're calling studio.getStudioProject() before \`@theatre/core\` is loaded. To fix this:
+1. Check if \`@theatre/core\` is import/required in your bundle.
+2. Check the stack trace of this error and make sure the funciton that calls getStudioProject() is run after \`@theatre/core\` is loaded.`)
+    }
+    return getStudio().getStudioProject(core)
+  }
+
   debouncedScrub(threshold: number = 1000): Pick<IScrub, 'capture'> {
     let currentScrub: IScrub | undefined
     const scheduleCommit = debounce(() => {

theatre/studio/src/panels/BasePanel/PaneWrapper.tsx

@@ -152,7 +152,7 @@ const Content: React.FC<{paneInstance: PaneInstance<$FixMe>}> = ({
       </PanelDragZone>
       <F2>
         <ErrorBoundary FallbackComponent={ErrorFallback}>
-          <Comp paneId={paneInstance.instanceId} object={paneInstance.object} />
+          <Comp paneId={paneInstance.instanceId} />
         </ErrorBoundary>
       </F2>
     </Container>