Add more compat tests

compat-tests/fixtures/cra/package/src/App/App.tsx

@@ -1,19 +1,12 @@
 import {getProject} from '@theatre/core'
-import ReactDOM from 'react-dom/client'
-import React from 'react'
+import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
-import studio from '@theatre/studio'
-import {editable as e, SheetProvider} from '@theatre/r3f'
-import extension from '@theatre/r3f/dist/extension'
-
-if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
-  studio.extend(extension)
-  studio.initialize({usePersistentStorage: false})
-}
+import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
+import state from './state.json'
 
 // credit: https://codesandbox.io/s/camera-pan-nsb7f
 
-function Plane({color, theatreKey, ...props}) {
+function Plane({color, theatreKey, ...props}: any) {
   return (
     <e.mesh {...props} theatreKey={theatreKey}>
       <boxBufferGeometry />
@@ -22,7 +15,26 @@ function Plane({color, theatreKey, ...props}) {
   )
 }
 
-function App() {
+export default function App() {
+  const light2Ref = useRef<any>()
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!light2Ref.current) return
+
+      clearInterval(interval)
+
+      const intensityInStateJson = 3
+      const currentIntensity = light2Ref.current.intensity
+      if (currentIntensity !== intensityInStateJson) {
+        console.error(`Test failed: light2.intensity is ${currentIntensity}`)
+      } else {
+        console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
+      }
+    }, 50)
+    // see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
+  }, [])
+
   return (
     <Canvas
       gl={{preserveDrawingBuffer: true}}
@@ -31,9 +43,11 @@ function App() {
       dpr={[1.5, 2]}
       style={{position: 'absolute', top: 0, left: 0}}
     >
-      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+      <SheetProvider
+        sheet={getProject('Playground - R3F', {state}).sheet('R3F-Canvas')}
+      >
         {/* @ts-ignore */}
-        <e.orthographicCamera makeDefault theatreKey="Camera" />
+        <PerspectiveCamera makeDefault theatreKey="Camera" />
         <ambientLight intensity={0.4} />
         <e.pointLight
           position={[-10, -10, 5]}
@@ -44,10 +58,14 @@ function App() {
         <e.pointLight
           position={[0, 0.5, -1]}
           distance={1}
+          // the intensity is statically set to 2, but in the state.json file we'll set it to 3,
+          // and we'll use that as a test to make sure the state is being loaded correctly
           intensity={2}
           color="#e4be00"
           theatreKey="Light 2"
+          ref={light2Ref}
         />
+
         <group position={[0, -0.9, -3]}>
           <Plane
             color="hotpink"
@@ -82,11 +100,3 @@ function App() {
     </Canvas>
   )
 }
-
-const project = getProject('Project')
-const sheet = project.sheet('Sheet')
-const obj = sheet.object('Obj', {str: 'some string', num: 0})
-
-const container = document.getElementById('root')
-const root = ReactDOM.createRoot(container)
-root.render(<App obj={obj}>hi</App>)

compat-tests/fixtures/cra/package/src/App/state.json

@@ -0,0 +1,19 @@
+{
+  "sheetsById": {
+    "R3F-Canvas": {
+      "staticOverrides": {
+        "byObject": {
+          "Light 2": {
+            "intensity": 3
+          }
+        }
+      }
+    }
+  },
+  "definitionVersion": "0.4.0",
+  "revisionHistory": [
+    "jVNB3VWU34BIQK7M",
+    "-NXkC2GceSVBoVqa",
+    "Bw7ng1kdcWmMO5DN"
+  ]
+}

compat-tests/fixtures/next-latest/next-latest.compat-test.ts

@@ -2,8 +2,6 @@
 import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
 import {testServerAndPage} from '../../utils/testUtils'
 
-$.verbose = false
-
 const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
 
 describe(`next`, () => {
@@ -22,21 +20,9 @@ describe(`next`, () => {
 
           return $`npm run start -- --port ${port}`
         },
-        waitTilServerIsReady: async (
-          process: ProcessPromise<unknown>,
-          port: number,
-        ) => {
-          for await (const chunk of process.stdout) {
-            const chunkString = chunk.toString()
 
-            if (chunkString.includes(`started server`)) {
-              // next's server is running now
-              break
-            }
-          }
-
-          return {url: `http://localhost:${port}`}
-        },
+        checkServerStdoutToSeeIfItsReady: (chunk) =>
+          chunk.includes('started server'),
       })
     })
   })
@@ -49,21 +35,8 @@ describe(`next`, () => {
 
         return $`npm run dev -- --port ${port}`
       },
-      waitTilServerIsReady: async (
-        process: ProcessPromise<unknown>,
-        port: number,
-      ) => {
-        for await (const chunk of process.stdout) {
-          const chunkString = chunk.toString()
-
-          if (chunkString.includes(`compiled client and server successfully`)) {
-            // next's server is running now
-            break
-          }
-        }
-
-        return {url: `http://localhost:${port}`}
-      },
+      checkServerStdoutToSeeIfItsReady: (chunk) =>
+        chunk.includes('compiled client and server successfully'),
     })
   })
 })

compat-tests/fixtures/next-latest/package/src/App/App.tsx

@@ -1,5 +1,5 @@
 import {getProject} from '@theatre/core'
-import React, {useEffect} from 'react'
+import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
 import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
 import state from './state.json'
@@ -16,19 +16,24 @@ function Plane({color, theatreKey, ...props}: any) {
 }
 
 export default function App() {
-  const [light2, setLight2] = React.useState<any>(null)
+  const light2Ref = useRef<any>()
 
   useEffect(() => {
-    if (!light2) return
+    const interval = setInterval(() => {
+      if (!light2Ref.current) return
+
+      clearInterval(interval)
+
+      const intensityInStateJson = 3
+      const currentIntensity = light2Ref.current.intensity
+      if (currentIntensity !== intensityInStateJson) {
+        console.error(`Test failed: light2.intensity is ${currentIntensity}`)
+      } else {
+        console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
+      }
+    }, 50)
     // see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
-    const intensityInStateJson = 3
-    const currentIntensity = light2.intensity
-    if (currentIntensity !== intensityInStateJson) {
-      console.error(`Test failed: light2.intensity is ${currentIntensity}`)
-    } else {
-      console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
-    }
-  }, [light2])
+  }, [])
 
   return (
     <Canvas
@@ -58,7 +63,7 @@ export default function App() {
           intensity={2}
           color="#e4be00"
           theatreKey="Light 2"
-          ref={setLight2}
+          ref={light2Ref}
         />
 
         <group position={[0, -0.9, -3]}>

compat-tests/fixtures/parcel1/package/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="./src/index.js"></script>
+    <script src="./src/index.tsx"></script>
   </body>
 </html>

compat-tests/fixtures/parcel1/package/package.json

@@ -1,13 +1,16 @@
 {
   "scripts": {
-    "dev": "parcel serve ./index.html"
+    "dev": "parcel serve ./index.html",
+    "build": "NODE_ENV=production parcel build ./index.html --no-minify",
+    "start": "serve dist"
   },
   "dependencies": {
     "@theatre/core": "0.0.1-COMPAT.1",
     "@theatre/r3f": "0.0.1-COMPAT.1",
     "@theatre/studio": "0.0.1-COMPAT.1",
     "parcel-bundler": "^1.12.5",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "serve": "14.2.0"
   }
 }

compat-tests/fixtures/parcel1/package/src/App/App.tsx

@@ -1,19 +1,12 @@
 import {getProject} from '@theatre/core'
-import ReactDOM from 'react-dom'
-import React from 'react'
+import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
-import studio from '@theatre/studio'
-import {editable as e, SheetProvider} from '@theatre/r3f'
-import extension from '@theatre/r3f/dist/extension'
-
-if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
-  studio.extend(extension)
-  studio.initialize({usePersistentStorage: false})
-}
+import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
+import state from './state.json'
 
 // credit: https://codesandbox.io/s/camera-pan-nsb7f
 
-function Plane({color, theatreKey, ...props}) {
+function Plane({color, theatreKey, ...props}: any) {
   return (
     <e.mesh {...props} theatreKey={theatreKey}>
       <boxBufferGeometry />
@@ -22,7 +15,26 @@ function Plane({color, theatreKey, ...props}) {
   )
 }
 
-function App() {
+export default function App() {
+  const light2Ref = useRef<any>()
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!light2Ref.current) return
+
+      clearInterval(interval)
+
+      const intensityInStateJson = 3
+      const currentIntensity = light2Ref.current.intensity
+      if (currentIntensity !== intensityInStateJson) {
+        console.error(`Test failed: light2.intensity is ${currentIntensity}`)
+      } else {
+        console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
+      }
+    }, 50)
+    // see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
+  }, [])
+
   return (
     <Canvas
       gl={{preserveDrawingBuffer: true}}
@@ -31,9 +43,11 @@ function App() {
       dpr={[1.5, 2]}
       style={{position: 'absolute', top: 0, left: 0}}
     >
-      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
+      <SheetProvider
+        sheet={getProject('Playground - R3F', {state}).sheet('R3F-Canvas')}
+      >
         {/* @ts-ignore */}
-        <e.orthographicCamera makeDefault theatreKey="Camera" />
+        <PerspectiveCamera makeDefault theatreKey="Camera" />
         <ambientLight intensity={0.4} />
         <e.pointLight
           position={[-10, -10, 5]}
@@ -44,10 +58,14 @@ function App() {
         <e.pointLight
           position={[0, 0.5, -1]}
           distance={1}
+          // the intensity is statically set to 2, but in the state.json file we'll set it to 3,
+          // and we'll use that as a test to make sure the state is being loaded correctly
           intensity={2}
           color="#e4be00"
           theatreKey="Light 2"
+          ref={light2Ref}
         />
+
         <group position={[0, -0.9, -3]}>
           <Plane
             color="hotpink"
@@ -82,10 +100,3 @@ function App() {
     </Canvas>
   )
 }
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root'),
-)

compat-tests/fixtures/parcel1/package/src/App/state.json

@@ -0,0 +1,19 @@
+{
+  "sheetsById": {
+    "R3F-Canvas": {
+      "staticOverrides": {
+        "byObject": {
+          "Light 2": {
+            "intensity": 3
+          }
+        }
+      }
+    }
+  },
+  "definitionVersion": "0.4.0",
+  "revisionHistory": [
+    "jVNB3VWU34BIQK7M",
+    "-NXkC2GceSVBoVqa",
+    "Bw7ng1kdcWmMO5DN"
+  ]
+}

compat-tests/fixtures/parcel1/package/src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import studio from '@theatre/studio'
+import extension from '@theatre/r3f/dist/extension'
+import App from './App/App'
+
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+console.log('React', React)
+
+const container = document.getElementById('root')
+const root = ReactDOM.createRoot(container)
+root.render(<App />)

compat-tests/fixtures/parcel1/package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}

compat-tests/fixtures/parcel1/parcel1.compat-test.ts

@@ -0,0 +1,42 @@
+// @cspotcode/zx is zx in CommonJS
+import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
+import {defer, testServerAndPage} from '../../utils/testUtils'
+
+const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
+
+describe(`parcel1`, () => {
+  test(`build succeeds`, async () => {
+    cd(PATH_TO_PACKAGE)
+    const {exitCode} = await $`npm run build`
+    // at this point, the build should have succeeded
+    expect(exitCode).toEqual(0)
+  })
+
+  describe(`build`, () => {
+    function startServerOnPort(port: number): ProcessPromise<unknown> {
+      cd(PATH_TO_PACKAGE)
+
+      return $`npm start -- -p ${port}`
+    }
+
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) =>
+        chunk.includes('Accepting connections'),
+    })
+  })
+
+  describe(`dev`, () => {
+    function startServerOnPort(port: number): ProcessPromise<unknown> {
+      cd(PATH_TO_PACKAGE)
+
+      return $`npm run dev -- -p ${port}`
+    }
+
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) =>
+        chunk.includes('Server running at'),
+    })
+  })
+})

compat-tests/fixtures/react17/package/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="./src/index.js"></script>
+    <script src="./src/index.tsx"></script>
   </body>
 </html>

compat-tests/fixtures/react17/package/package.json

@@ -1,6 +1,8 @@
 {
   "scripts": {
-    "dev": "parcel serve ./index.html"
+    "dev": "parcel serve ./index.html",
+    "build": "NODE_ENV=production parcel build ./index.html --no-minify",
+    "start": "serve dist"
   },
   "dependencies": {
     "@react-three/drei": "^7.3.1",
@@ -11,6 +13,7 @@
     "parcel-bundler": "^1.12.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "three": "^0.137.0"
+    "three": "^0.137.0",
+    "serve": "14.2.0"
   }
 }

compat-tests/fixtures/react17/package/src/App/App.tsx

@@ -0,0 +1,102 @@
+import {getProject} from '@theatre/core'
+import React, {useEffect, useRef} from 'react'
+import {Canvas} from '@react-three/fiber'
+import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
+import state from './state.json'
+
+// credit: https://codesandbox.io/s/camera-pan-nsb7f
+
+function Plane({color, theatreKey, ...props}: any) {
+  return (
+    <e.mesh {...props} theatreKey={theatreKey}>
+      <boxBufferGeometry />
+      <meshStandardMaterial color={color} />
+    </e.mesh>
+  )
+}
+
+export default function App() {
+  const light2Ref = useRef<any>()
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!light2Ref.current) return
+
+      clearInterval(interval)
+
+      const intensityInStateJson = 3
+      const currentIntensity = light2Ref.current.intensity
+      if (currentIntensity !== intensityInStateJson) {
+        console.error(`Test failed: light2.intensity is ${currentIntensity}`)
+      } else {
+        console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
+      }
+    }, 50)
+    // see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
+  }, [])
+
+  return (
+    <Canvas
+      gl={{preserveDrawingBuffer: true}}
+      linear
+      frameloop="demand"
+      dpr={[1.5, 2]}
+      style={{position: 'absolute', top: 0, left: 0}}
+    >
+      <SheetProvider
+        sheet={getProject('Playground - R3F', {state}).sheet('R3F-Canvas')}
+      >
+        {/* @ts-ignore */}
+        <PerspectiveCamera makeDefault theatreKey="Camera" />
+        <ambientLight intensity={0.4} />
+        <e.pointLight
+          position={[-10, -10, 5]}
+          intensity={2}
+          color="#ff20f0"
+          theatreKey="Light 1"
+        />
+        <e.pointLight
+          position={[0, 0.5, -1]}
+          distance={1}
+          // the intensity is statically set to 2, but in the state.json file we'll set it to 3,
+          // and we'll use that as a test to make sure the state is being loaded correctly
+          intensity={2}
+          color="#e4be00"
+          theatreKey="Light 2"
+          ref={light2Ref}
+        />
+
+        <group position={[0, -0.9, -3]}>
+          <Plane
+            color="hotpink"
+            rotation-x={-Math.PI / 2}
+            position-z={2}
+            scale={[4, 20, 0.2]}
+            theatreKey="plane1"
+          />
+          <Plane
+            color="#e4be00"
+            rotation-x={-Math.PI / 2}
+            position-y={1}
+            scale={[4.2, 0.2, 4]}
+            theatreKey="plane2"
+          />
+          <Plane
+            color="#736fbd"
+            rotation-x={-Math.PI / 2}
+            position={[-1.7, 1, 3.5]}
+            scale={[0.5, 4, 4]}
+            theatreKey="plane3"
+          />
+          <Plane
+            color="white"
+            rotation-x={-Math.PI / 2}
+            position={[0, 4.5, 3]}
+            scale={[2, 0.03, 4]}
+            theatreKey="plane4"
+          />
+        </group>
+      </SheetProvider>
+    </Canvas>
+  )
+}

compat-tests/fixtures/react17/package/src/App/state.json

@@ -0,0 +1,19 @@
+{
+  "sheetsById": {
+    "R3F-Canvas": {
+      "staticOverrides": {
+        "byObject": {
+          "Light 2": {
+            "intensity": 3
+          }
+        }
+      }
+    }
+  },
+  "definitionVersion": "0.4.0",
+  "revisionHistory": [
+    "jVNB3VWU34BIQK7M",
+    "-NXkC2GceSVBoVqa",
+    "Bw7ng1kdcWmMO5DN"
+  ]
+}

compat-tests/fixtures/react17/package/src/index.tsx

@@ -0,0 +1,19 @@
+import ReactDOM from 'react-dom'
+import React from 'react'
+import studio from '@theatre/studio'
+import extension from '@theatre/r3f/dist/extension'
+import App from './App/App'
+
+console.log(React)
+
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+)

compat-tests/fixtures/react17/package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}

compat-tests/fixtures/react17/react17.compat-test.ts

@@ -0,0 +1,29 @@
+// @cspotcode/zx is zx in CommonJS
+import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
+import {defer, testServerAndPage} from '../../utils/testUtils'
+
+const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
+
+describe(`react17`, () => {
+  test(`build succeeds`, async () => {
+    cd(PATH_TO_PACKAGE)
+    const {exitCode} = await $`npm run build`
+    // at this point, the build should have succeeded
+    expect(exitCode).toEqual(0)
+  })
+
+  // this one is failing for some reason, but manually running the server works fine
+  describe(`build`, () => {
+    function startServerOnPort(port: number): ProcessPromise<unknown> {
+      cd(PATH_TO_PACKAGE)
+
+      return $`npm start -- -p ${port}`
+    }
+
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) =>
+        chunk.includes('Accepting connections'),
+    })
+  })
+})

compat-tests/fixtures/react18/package/src/App/App.tsx

@@ -1,5 +1,5 @@
 import {getProject} from '@theatre/core'
-import React, {useEffect} from 'react'
+import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
 import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
 import state from './state.json'
@@ -16,19 +16,24 @@ function Plane({color, theatreKey, ...props}: any) {
 }
 
 export default function App() {
-  const [light2, setLight2] = React.useState<any>(null)
+  const light2Ref = useRef<any>()
 
   useEffect(() => {
-    if (!light2) return
+    const interval = setInterval(() => {
+      if (!light2Ref.current) return
+
+      clearInterval(interval)
+
+      const intensityInStateJson = 3
+      const currentIntensity = light2Ref.current.intensity
+      if (currentIntensity !== intensityInStateJson) {
+        console.error(`Test failed: light2.intensity is ${currentIntensity}`)
+      } else {
+        console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
+      }
+    }, 50)
     // see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
-    const intensityInStateJson = 3
-    const currentIntensity = light2.intensity
-    if (currentIntensity !== intensityInStateJson) {
-      console.error(`Test failed: light2.intensity is ${currentIntensity}`)
-    } else {
-      console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
-    }
-  }, [light2])
+  }, [])
 
   return (
     <Canvas
@@ -58,7 +63,7 @@ export default function App() {
           intensity={2}
           color="#e4be00"
           theatreKey="Light 2"
-          ref={setLight2}
+          ref={light2Ref}
         />
 
         <group position={[0, -0.9, -3]}>

compat-tests/fixtures/react18/react18.compat-test.ts

@@ -2,8 +2,6 @@
 import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
 import {defer, testServerAndPage} from '../../utils/testUtils'
 
-$.verbose = false
-
 const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
 
 describe(`react18`, () => {
@@ -33,7 +31,7 @@ describe(`react18`, () => {
       const url = `http://localhost:${port}`
 
       process.stdout.on('data', (chunk) => {
-        if (chunk.toString().includes('Accepting connections')) {
+        if (chunk.includes('Accepting connections')) {
           //  server is running now
           d.resolve({url})
         }
@@ -42,6 +40,24 @@ describe(`react18`, () => {
       return d.promise
     }
 
-    testServerAndPage({startServerOnPort, waitTilServerIsReady})
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) =>
+        chunk.includes('Accepting connections'),
+    })
+  })
+
+  describe(`dev`, () => {
+    function startServerOnPort(port: number): ProcessPromise<unknown> {
+      cd(PATH_TO_PACKAGE)
+
+      return $`npm run dev -- --port ${port}`
+    }
+
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) =>
+        chunk.includes('Server running'),
+    })
   })
 })

compat-tests/fixtures/vite2/package/src/App/App.tsx

@@ -1,5 +1,5 @@
 import {getProject} from '@theatre/core'
-import React, {useEffect} from 'react'
+import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
 import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
 import state from './state.json'
@@ -16,19 +16,24 @@ function Plane({color, theatreKey, ...props}: any) {
 }
 
 export default function App() {
-  const [light2, setLight2] = React.useState<any>(null)
+  const light2Ref = useRef<any>()
 
   useEffect(() => {
-    if (!light2) return
+    const interval = setInterval(() => {
+      if (!light2Ref.current) return
+
+      clearInterval(interval)
+
+      const intensityInStateJson = 3
+      const currentIntensity = light2Ref.current.intensity
+      if (currentIntensity !== intensityInStateJson) {
+        console.error(`Test failed: light2.intensity is ${currentIntensity}`)
+      } else {
+        console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
+      }
+    }, 50)
     // see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
-    const intensityInStateJson = 3
-    const currentIntensity = light2.intensity
-    if (currentIntensity !== intensityInStateJson) {
-      console.error(`Test failed: light2.intensity is ${currentIntensity}`)
-    } else {
-      console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
-    }
-  }, [light2])
+  }, [])
 
   return (
     <Canvas
@@ -58,7 +63,7 @@ export default function App() {
           intensity={2}
           color="#e4be00"
           theatreKey="Light 2"
-          ref={setLight2}
+          ref={light2Ref}
         />
 
         <group position={[0, -0.9, -3]}>

compat-tests/fixtures/vite2/vite2.compat-test.ts

@@ -2,8 +2,6 @@
 import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
 import {testServerAndPage} from '../../utils/testUtils'
 
-$.verbose = false
-
 const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
 
 describe(`vite2`, () => {
@@ -21,22 +19,22 @@ describe(`vite2`, () => {
       return $`npm run preview -- --port ${port}`
     }
 
-    async function waitTilServerIsReady(
-      process: ProcessPromise<unknown>,
-      port: number,
-    ): Promise<{
-      url: string
-    }> {
-      for await (const chunk of process.stdout) {
-        if (chunk.toString().includes('--host')) {
-          // vite's server is running now
-          break
-        }
-      }
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) => chunk.includes('--host'),
+    })
+  })
 
-      return {url: `http://localhost:${port}`}
+  describe(`vite dev`, () => {
+    function startServerOnPort(port: number): ProcessPromise<unknown> {
+      cd(PATH_TO_PACKAGE)
+
+      return $`npm run dev -- --port ${port}`
     }
 
-    testServerAndPage({startServerOnPort, waitTilServerIsReady})
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) => chunk.includes('--host'),
+    })
   })
 })

compat-tests/fixtures/vite4/package/src/App/App.tsx

@@ -1,5 +1,5 @@
 import {getProject} from '@theatre/core'
-import React, {useEffect} from 'react'
+import React, {useEffect, useRef} from 'react'
 import {Canvas} from '@react-three/fiber'
 import {editable as e, SheetProvider, PerspectiveCamera} from '@theatre/r3f'
 import state from './state.json'
@@ -16,19 +16,24 @@ function Plane({color, theatreKey, ...props}: any) {
 }
 
 export default function App() {
-  const [light2, setLight2] = React.useState<any>(null)
+  const light2Ref = useRef<any>()
 
   useEffect(() => {
-    if (!light2) return
+    const interval = setInterval(() => {
+      if (!light2Ref.current) return
+
+      clearInterval(interval)
+
+      const intensityInStateJson = 3
+      const currentIntensity = light2Ref.current.intensity
+      if (currentIntensity !== intensityInStateJson) {
+        console.error(`Test failed: light2.intensity is ${currentIntensity}`)
+      } else {
+        console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
+      }
+    }, 50)
     // see the note on <e.pointLight theatreKey="Light 2" /> below to understand why we're doing this
-    const intensityInStateJson = 3
-    const currentIntensity = light2.intensity
-    if (currentIntensity !== intensityInStateJson) {
-      console.error(`Test failed: light2.intensity is ${currentIntensity}`)
-    } else {
-      console.log(`Test passed: light2.intensity is ${intensityInStateJson}`)
-    }
-  }, [light2])
+  }, [])
 
   return (
     <Canvas
@@ -58,7 +63,7 @@ export default function App() {
           intensity={2}
           color="#e4be00"
           theatreKey="Light 2"
-          ref={setLight2}
+          ref={light2Ref}
         />
 
         <group position={[0, -0.9, -3]}>

compat-tests/fixtures/vite4/vite4.compat-test.ts

@@ -2,8 +2,6 @@
 import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
 import {testServerAndPage} from '../../utils/testUtils'
 
-$.verbose = false
-
 const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
 
 describe(`vite4`, () => {
@@ -21,22 +19,22 @@ describe(`vite4`, () => {
       return $`npm run preview -- --port ${port}`
     }
 
-    async function waitTilServerIsReady(
-      process: ProcessPromise<unknown>,
-      port: number,
-    ): Promise<{
-      url: string
-    }> {
-      for await (const chunk of process.stdout) {
-        if (chunk.toString().includes('--host')) {
-          // vite's server is running now
-          break
-        }
-      }
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) => chunk.includes('--host'),
+    })
+  })
 
-      return {url: `http://localhost:${port}`}
+  describe(`vite dev`, () => {
+    function startServerOnPort(port: number): ProcessPromise<unknown> {
+      cd(PATH_TO_PACKAGE)
+
+      return $`npm run dev -- --port ${port}`
     }
 
-    testServerAndPage({startServerOnPort, waitTilServerIsReady})
+    testServerAndPage({
+      startServerOnPort,
+      checkServerStdoutToSeeIfItsReady: (chunk) => chunk.includes('--host'),
+    })
   })
 })