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

Add more compat tests

Browse source
This commit is contained in:
Aria Minaei 2023-07-30 15:41:09 +02:00 • committed by Aria
parent 29905d951f
commit dc2338bb83
32 changed files with 577 additions and 221 deletions
Download patch file Download diff file Expand all files Collapse all files

2
compat-tests/fixtures/react17/package/index.html
View file

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

7
compat-tests/fixtures/react17/package/package.json
View file

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

53
compat-tests/fixtures/react17/package/src/index.js → compat-tests/fixtures/react17/package/src/App/App.tsx
View file

@ -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'),
)

19
compat-tests/fixtures/react17/package/src/App/state.json Normal file
View file

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

19
compat-tests/fixtures/react17/package/src/index.tsx Normal file
View file

@ -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'),
)

5
compat-tests/fixtures/react17/package/tsconfig.json Normal file
View file

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