variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make the vite compat test more comprehensive

Browse source
This commit is contained in:
Aria Minaei 2023-07-28 20:46:57 +02:00 committed by Aria
parent 5192c42548
commit c288ab9ffe
3 changed files with 108 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
compat-tests/fixtures/vite-react18/package/src/App.tsx Normal file
View file

@ -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>
)
}

85
compat-tests/fixtures/vite-react18/package/src/main.tsx
View file

@ -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
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 container = document.getElementById('root')!
const root = ReactDOM.createRoot(container)
root.render(<App obj={obj}>hi</App>)
root.render(<App />)

26
compat-tests/fixtures/vite-react18/package/src/state.json Normal file
View file

@ -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"]
}