r3f fixes (#222)

* Minify r3f extension bundle, because it is expected by the React dead code elimination check, since we bundle React in it

* Add children to props, since it is required by React 18 types

* Fix getting context attributes for gl in ReferenceWindow

* Don't bundle threejs in extension

* Fix editor not responding to scene initialization

* Fix SnapshotEditor css

packages/r3f/devEnv/bundle.ts

@@ -58,7 +58,7 @@ async function createBundles() {
         '@theatre/studio',
         '@theatre/dataverse',
         '@theatre/r3f',
-        // 'three',
+        'three',
         // '@react-three/fiber',
         // '@react-three/drei',
         // 'three-stdlib',
@@ -69,6 +69,7 @@ async function createBundles() {
       outfile: path.join(__dirname, '../dist/extension/index.js'),
       format: 'cjs',
       metafile: true,
+      minify: true,
     }
 
     const result = await build(esbuildConfig)

packages/r3f/src/extension/components/ReferenceWindow/ReferenceWindow.tsx

@@ -95,9 +95,7 @@ const ReferenceWindow: VFC<ReferenceWindowProps> = ({maxHeight, maxWidth}) => {
   const [ref, bounds] = useMeasure()
 
   const preserveDrawingBuffer =
-    (
-      gl?.domElement.getContext('webgl') ?? gl?.domElement.getContext('webgl2')
-    )?.getContextAttributes()?.preserveDrawingBuffer ?? false
+    gl?.getContextAttributes()?.preserveDrawingBuffer ?? false
 
   useLayoutEffect(() => {
     if (gl) {

packages/r3f/src/extension/components/SnapshotEditor.tsx

@@ -31,7 +31,6 @@ const GlobalStyle = createGlobalStyle`
   * {
     padding: 0;
     margin: 0;
-    font-size: 100%;
     font: inherit;
     vertical-align: baseline;
     list-style: none;
@@ -91,15 +90,15 @@ const Wrapper = styled.div`
   margin: 0;
 
   position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   overflow: hidden;
 `
 
 const CanvasWrapper = styled.div`
-  display: relative;
+  position: relative;
   z-index: 0;
   height: 100%;
   overflow: hidden;
@@ -126,6 +125,25 @@ const ReferenceWindowContainer = styled.div`
   justify-content: center;
 `
 
+const WaitForSceneInitMessage = styled.div<{active?: boolean}>`
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  width: 300px;
+  top: 12px;
+  padding: 16px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+
+  backdrop-filter: blur(14px);
+  background: rgba(40, 43, 47, 0.8);
+
+  @supports not (backdrop-filter: blur()) {
+    background-color: rgba(40, 43, 47, 0.95);
+  }
+`
+
 const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
   const snapshotEditorSheet = getEditorSheet()
   const paneId = props.paneId
@@ -137,20 +155,10 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
     shallow,
   )
 
-  const editorOpen = true
   useLayoutEffect(() => {
-    let timeout: NodeJS.Timeout | undefined
-    if (editorOpen) {
-      // a hack to make sure all the scene's props are
-      // applied before we take a snapshot
-      timeout = setTimeout(createSnapshot, 100)
-    }
-    return () => {
-      if (timeout !== undefined) {
-        clearTimeout(timeout)
-      }
-    }
-  }, [editorOpen])
+    // Create a fresh snapshot when the editor is opened
+    createSnapshot()
+  }, [])
 
   const onPointerMissed = useCallback(() => {
     // This callback runs when the user clicks in an empty space inside a SnapshotEditor.
@@ -190,28 +198,30 @@ const SnapshotEditor: React.FC<{paneId: string}> = (props) => {
                   maxWidth={Math.min(bounds.width * 0.4, 200)}
                 />
               </ReferenceWindowContainer>
+              {!sceneSnapshot && (
+                <WaitForSceneInitMessage>
+                  The scene hasn't been initialized yet. It will appear in the
+                  editor as soon as it is.
+                </WaitForSceneInitMessage>
+              )}
             </Overlay>
 
-            {sceneSnapshot ? (
-              <>
-                <CanvasWrapper ref={ref}>
-                  <Canvas
-                    onCreated={({gl}) => {
-                      gl.setClearColor('white')
-                    }}
-                    shadows
-                    dpr={[1, 2]}
-                    frameloop="demand"
-                    onPointerMissed={onPointerMissed}
-                  >
-                    <EditorScene
-                      snapshotEditorSheet={snapshotEditorSheet}
-                      paneId={paneId}
-                    />
-                  </Canvas>
-                </CanvasWrapper>
-              </>
-            ) : null}
+            <CanvasWrapper ref={ref}>
+              <Canvas
+                onCreated={({gl}) => {
+                  gl.setClearColor('white')
+                }}
+                shadows
+                dpr={[1, 2]}
+                frameloop="demand"
+                onPointerMissed={onPointerMissed}
+              >
+                <EditorScene
+                  snapshotEditorSheet={snapshotEditorSheet}
+                  paneId={paneId}
+                />
+              </Canvas>
+            </CanvasWrapper>
           </Wrapper>
         </>
       </StyleSheetManager>

packages/r3f/src/main/SheetProvider.tsx

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react'
 import React, {
   createContext,
   useContext,
@@ -26,6 +27,7 @@ export const useCurrentSheet = (): ISheet | undefined => {
 
 const SheetProvider: React.FC<{
   sheet: ISheet
+  children: ReactNode
 }> = ({sheet, children}) => {
   const {scene, gl} = useThree((s) => ({scene: s.scene, gl: s.gl}))
 

packages/r3f/src/main/store.ts

@@ -52,7 +52,7 @@ export type EditorStore = {
   ) => void
 }
 
-const config: StateCreator<EditorStore> = (set) => {
+const config: StateCreator<EditorStore> = (set, get) => {
   return {
     sheet: null,
     editorObject: null,
@@ -70,6 +70,10 @@ const config: StateCreator<EditorStore> = (set) => {
         scene,
         gl,
       })
+
+      // Create a snapshot, so that if the editor is already open, it gets refreshed
+      // when the scene is initialized
+      get().createSnapshot()
     },
 
     addEditable: (uniqueName, editable) => {