Make the vite compat test more comprehensive

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

@@ -0,0 +1,79 @@
+import {getProject} from '@theatre/core'
+import React 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() {
+  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')}
+      >
+        <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}
+          intensity={2}
+          color="#e4be00"
+          theatreKey="Light 2"
+        />
+
+        <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/vite-react18/package/src/main.tsx

@@ -1,92 +1,13 @@
-import {getProject} from '@theatre/core'
 import ReactDOM from 'react-dom/client'
-import React 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'
+import App from './App'
 
 if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
   studio.extend(extension)
   studio.initialize({usePersistentStorage: false})
 }
 
-// credit: https://codesandbox.io/s/camera-pan-nsb7f
+const container = document.getElementById('root')!
-
-function Plane({color, theatreKey, ...props}: any) {
-  return (
-    <e.mesh {...props} theatreKey={theatreKey}>
-      <boxBufferGeometry />
-      <meshStandardMaterial color={color} />
-    </e.mesh>
-  )
-}
-
-function App() {
-  return (
-    <Canvas
-      gl={{preserveDrawingBuffer: true}}
-      linear
-      frameloop="demand"
-      dpr={[1.5, 2]}
-      style={{position: 'absolute', top: 0, left: 0}}
-    >
-      <SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
-        {/* @ts-ignore */}
-        <e.orthographicCamera 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}
-          intensity={2}
-          color="#e4be00"
-          theatreKey="Light 2"
-        />
-        <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>
-  )
-}
-
-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>)
+root.render(<App />)

compat-tests/fixtures/vite-react18/package/src/state.json

@@ -0,0 +1,26 @@
+{
+  "sheetsById": {
+    "R3F-Canvas": {
+      "staticOverrides": {
+        "byObject": {
+          "Camera": {
+            "position": {
+              "x": -1.9718646329873923,
+              "y": 0,
+              "z": 5.6728262108991725
+            }
+          },
+          "plane3": {
+            "rotation": {
+              "x": -1.5707963267948966,
+              "y": -1.6653345369377348e-16,
+              "z": -0.9115259508891379
+            }
+          }
+        }
+      }
+    }
+  },
+  "definitionVersion": "0.4.0",
+  "revisionHistory": ["-NXkC2GceSVBoVqa", "Bw7ng1kdcWmMO5DN"]
+}