Add more compat tests

compat-tests/fixtures/parcel1/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/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 />)