Implement the new init method

examples/basic-dom/Scene.tsx

@@ -1,11 +1,11 @@
 import type {IScrub} from '@theatre/core'
-import studio from '@theatre/studio'
 import React, {useLayoutEffect, useMemo, useState} from 'react'
 import type {ISheet, ISheetObject, IProject} from '@theatre/core'
 import type {UseDragOpts} from './useDrag'
 import useDrag from './useDrag'
+import theatre from '@theatre/core'
 
-studio.initialize()
+theatre.init({studio: true})
 
 const boxObjectConfig = {
   x: 0,
@@ -39,12 +39,14 @@ const Box: React.FC<{
     let firstOnDragCalled = false
     return {
       onDragStart() {
+        const studio = theatre.getStudioSync()!
         scrub = studio.scrub()
         initial = obj.value
         firstOnDragCalled = false
       },
       onDrag(x, y) {
         if (!firstOnDragCalled) {
+          const studio = theatre.getStudioSync()!
           studio.setSelection([obj])
           firstOnDragCalled = true
         }
@@ -68,6 +70,7 @@ const Box: React.FC<{
   return (
     <div
       onClick={() => {
+        const studio = theatre.getStudioSync()!
         studio.setSelection([obj])
       }}
       ref={setDivRef}
@@ -95,6 +98,7 @@ export const Scene: React.FC<{project: IProject}> = ({project}) => {
   const [selection, _setSelection] = useState<Array<ISheetObject>>([])
 
   useLayoutEffect(() => {
+    const studio = theatre.getStudioSync()!
     return studio.onSelectionChange((newSelection) => {
       _setSelection(
         newSelection.filter(

examples/basic-dom/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import studio from '@theatre/studio'
-import {getProject} from '@theatre/core'
+import theatre, {getProject} from '@theatre/core'
 import {Scene} from './Scene'
 
-studio.initialize()
+theatre.init({studio: true})
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene project={getProject('Sample project')} />,

packages/benchmarks/src/index.tsx

@@ -1,4 +1,4 @@
-// import studio from '@theatre/studio'
+// import theatre from '@theatre/core'
 import {createRafDriver, getProject} from '@theatre/core'
 import type {
   UnknownShorthandCompoundProps,
@@ -13,7 +13,7 @@ const driver = createRafDriver({name: 'BenchmarkRafDriver'})
 
 setCoreRafDriver(driver)
 
-// studio.initialize({})
+// theatre.init({studio: true, })
 
 /**
  * This test will create a project with `numberOfInstances` instances of the same sheet. Each instance

packages/browser-bundles/src/core-and-studio.ts

@@ -1,5 +1,4 @@
 import * as core from '@theatre/core'
-import studio from '@theatre/studio'
 
 // @ts-ignore
 window.Theatre = {

packages/core/src/CoreBundle.ts

@@ -16,7 +16,7 @@ export type CoreBits = {
 
 export default class CoreBundle {
   private _studio: Studio | undefined = undefined
-  constructor() {}
+  constructor(private _opts: {onAttach: (studio: Studio) => void}) {}
 
   get type(): 'Theatre_CoreBundle' {
     return 'Theatre_CoreBundle'
@@ -39,5 +39,6 @@ export default class CoreBundle {
     }
 
     callback(bits)
+    this._opts.onAttach(studio)
   }
 }

packages/core/src/index.ts

@@ -6,6 +6,7 @@
 
 export * from './coreExports'
 export * from './types/public'
+import {defer} from '@theatre/utils/defer'
 // export type {IProject, IProjectConfig} from './projects/TheatreProject'
 // export type {ISequence} from './sequences/TheatreSequence'
 // export type {ISheetObject} from './sheetObjects/TheatreSheetObject'
@@ -14,6 +15,37 @@ export * from './types/public'
 import CoreBundle from './CoreBundle'
 import {globalVariableNames} from './globals'
 import type {$____FixmeStudio} from '@theatre/utils/types'
+import type {IStudio, InitOpts} from './types/public'
+
+const studioDeferred = defer<$____FixmeStudio>()
+
+export async function getStudio(): Promise<IStudio> {
+  return (await studioDeferred.promise).publicApi
+}
+
+export function getStudioSync(
+  errorIfNotReady: boolean = false,
+): IStudio | undefined {
+  if (studioDeferred.status !== 'resolved') {
+    if (errorIfNotReady) throw new Error(`Studio is not ready yet.`)
+    return undefined
+  }
+  return studioDeferred.currentValue!.publicApi
+}
+
+let initCalled = false
+const initOptsDeferred = defer<InitOpts | undefined>()
+
+export async function init(opts?: InitOpts) {
+  if (initCalled) {
+    return
+  }
+  initCalled = true
+  initOptsDeferred.resolve(opts)
+}
+
+const theatre = {getStudio, getStudioSync, init}
+export default theatre
 
 type StudioBundle = $____FixmeStudio // todo
 
@@ -97,7 +129,14 @@ function registerCoreBundle() {
     }
   }
 
-  const coreBundle = new CoreBundle()
+  const coreBundle = new CoreBundle({
+    onAttach: (s) => {
+      initOptsDeferred.promise.then((opts) => {
+        s.initialize(opts)
+        studioDeferred.resolve(s)
+      })
+    },
+  })
 
   // @ts-ignore ignore
   globalContext[globalVariableNames.coreBundle] = coreBundle

packages/core/src/rafDrivers.ts

@@ -59,7 +59,7 @@ let lastDriverId = 0
  * You can optionally make studio use this `rafDriver`. This means the parts of the studio that tick based on raf, will now tick at 5fps. This is only useful if you're doing something crazy like running the studio (and not the core) in an XR frame.
  *
  * ```js
- * studio.initialize({
+ * theatre.init({studio: true,
  *   __experimental_rafDriver: rafDriver,
  * })
  * ```

packages/core/src/types/public.ts

@@ -1169,7 +1169,8 @@ export interface IStudioUI {
   renderToolset(toolsetId: string, htmlNode: HTMLElement): () => void
 }
 
-export interface _StudioInitializeOpts {
+export interface InitOpts {
+  studio?: boolean
   /**
    * The local storage key to use to persist the state.
    *
@@ -1195,30 +1196,24 @@ export interface _StudioInitializeOpts {
  * @example
  * Basic usage:
  * ```ts
- * import studio from '@theatre/studio'
+ * import theatre from '@theatre/core'
  *
- * studio.initialize()
+ * theatre.init({studio: true})
  * ```
  *
  * @example
  * Usage with **tree-shaking**:
  * ```ts
- * import studio from '@theatre/studio'
+ * import theatre from '@theatre/core'
  *
  * if (process.env.NODE_ENV !== 'production') {
- *   studio.initialize()
+ *   theatre.init({studio: true})
  * }
  * ```
  */
 export interface IStudio {
   readonly ui: IStudioUI
 
-  /**
-   * Initializes the studio. Call it once in your index.js/index.ts module.
-   * It silently ignores subsequent calls.
-   */
-  initialize(opts?: _StudioInitializeOpts): void
-
   /**
    * Runs an undo-able transaction. Creates a single undo level for all
    * the operations inside the transaction.

packages/playground/src/shared/camera/index.tsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import studio from '@theatre/studio'
+import theatre from '@theatre/core'
 import extension from '@theatre/r3f/dist/extension'
 
-studio.extend(extension)
-studio.initialize({serverUrl: 'http://localhost:3000'})
+theatre.getStudio().then((studio) => {
+  studio.extend(extension)
+})
+theatre.init({serverUrl: 'http://localhost:3000'})
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

packages/playground/src/shared/custom-editable-components/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import studio from '@theatre/studio'
+import theatre from '@theatre/core'
 import extension from '@theatre/r3f/dist/extension'
 
-studio.extend(extension)
-studio.initialize({serverUrl: 'http://localhost:3000'})
+theatre.getStudio().then((studio) => studio.extend(extension))
+theatre.init({studio: true, serverUrl: 'http://localhost:3000'})
 
 ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import studio from '@theatre/studio'
+import theatre from '@theatre/core'
 import extension from '@theatre/r3f/dist/extension'
 import {createRafDriver} from '@theatre/core'
 
@@ -10,10 +10,8 @@ setInterval(() => {
   rafDriver.tick(performance.now())
 }, 200)
 
-studio.extend(extension)
-studio.initialize({
-  __experimental_rafDriver: rafDriver,
-})
+theatre.getStudio().then((studio) => studio.extend(extension))
+theatre.init({studio: true, __experimental_rafDriver: rafDriver})
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <App rafDriver={rafDriver} />,

packages/playground/src/shared/dom-basic/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import studio from '@theatre/studio'
+import theatre from '@theatre/core'
 import {getProject} from '@theatre/core'
 import {Scene} from './Scene'
 /**
  * This is a basic example of using Theatre.js for manipulating the DOM.
  */
 
-studio.initialize()
+theatre.init({studio: true})
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene project={getProject('Sample project')} />,

packages/playground/src/shared/dom/Scene.tsx

@@ -1,4 +1,4 @@
-import studio from '@theatre/studio'
+import { getStudioSync} from '@theatre/core'
 import type {UseDragOpts} from './useDrag'
 import useDrag from './useDrag'
 import React, {useLayoutEffect, useMemo, useRef, useState} from 'react'
@@ -117,13 +117,13 @@ const Box: React.FC<{
     let firstOnDragCalled = false
     return {
       onDragStart() {
-        scrub = studio.scrub()
+        scrub = getStudioSync()!.scrub()
         initial = obj.value.pos
         firstOnDragCalled = false
       },
       onDrag(x, y) {
         if (!firstOnDragCalled) {
-          studio.setSelection([obj])
+          getStudioSync()!.setSelection([obj])
           firstOnDragCalled = true
         }
         scrub!.capture(({set}) => {
@@ -150,7 +150,7 @@ const Box: React.FC<{
   return (
     <div
       onClick={() => {
-        studio.setSelection([obj])
+        getStudioSync()!.setSelection([obj])
       }}
       ref={boxRef}
       style={{
@@ -183,7 +183,7 @@ export const Scene: React.FC<{project: IProject}> = ({project}) => {
   const [selection, setSelection] = useState<IStudio['selection']>()
 
   useLayoutEffect(() => {
-    return studio.onSelectionChange((newState) => {
+    return getStudioSync()!.onSelectionChange((newState) => {
       setSelection(newState)
     })
   }, [])

packages/playground/src/shared/dom/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import studio from '@theatre/studio'
+import theatre from '@theatre/core'
 import {getProject} from '@theatre/core'
 import {Scene} from './Scene'
 
@@ -11,7 +11,7 @@ import {Scene} from './Scene'
  * the selection behavior.
  */
 
-studio.initialize()
+theatre.init({studio: true})
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <Scene

packages/playground/src/shared/file/index.tsx

@@ -1,5 +1,5 @@
 import {getProject, types} from '@theatre/core'
-import studio from '@theatre/studio'
+import theatre from '@theatre/core'
 import React, {useEffect, useState} from 'react'
 import ReactDom from 'react-dom/client'
 import styled from 'styled-components'
@@ -9,7 +9,7 @@ const project = getProject('Image type playground', {
     baseUrl: '/',
   },
 })
-studio.initialize()
+theatre.init({studio: true})
 const sheet = project.sheet('Image type')
 
 const Wrapper = styled.div`