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

Update compat tests to use THREE.r155

Browse source
This commit is contained in:
Aria Minaei 2023-08-06 17:18:35 +02:00
parent 4fefee863e
commit f612108e18
70 changed files with 534 additions and 374 deletions
Download patch file Download diff file Expand all files Collapse all files

4
compat-tests/fixtures/r3f-react18/package/.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
/.parcel-cache
/.cache
/dist
/package-lock.json

13
compat-tests/fixtures/r3f-react18/package/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Theatre.js Example - DOM</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.js"></script>
</body>
</html>

19
compat-tests/fixtures/r3f-react18/package/package.json Normal file
View file

@ -0,0 +1,19 @@
{
"scripts": {
"dev": "parcel serve ./index.html",
"build": "parcel build ./index.html",
"start": "serve dist"
},
"dependencies": {
"@react-three/drei": "^9.80.1",
"@react-three/fiber": "^8.13.6",
"three": "^0.155.0",
"@theatre/core": "0.0.1-COMPAT.1",
"@theatre/r3f": "0.0.1-COMPAT.1",
"@theatre/studio": "0.0.1-COMPAT.1",
"parcel": "^2.9.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"serve": "14.2.0"
}
}

102
compat-tests/fixtures/r3f-react18/package/src/App/App.tsx Normal file
View file

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

19
compat-tests/fixtures/r3f-react18/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"
]
}

13
compat-tests/fixtures/r3f-react18/package/src/index.js Normal file
View file

@ -0,0 +1,13 @@
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})
}
const container = document.getElementById('root')
const root = ReactDOM.createRoot(container)
root.render(<App />)

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

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

63
compat-tests/fixtures/r3f-react18/react18.compat-test.ts Normal file
View file

@ -0,0 +1,63 @@
// @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(`react18`, () => {
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}`
}
function waitTilServerIsReady(
process: ProcessPromise<unknown>,
port: number,
): Promise<{
url: string
}> {
const d = defer<{url: string}>()
const url = `http://localhost:${port}`
process.stdout.on('data', (chunk) => {
if (chunk.includes('Accepting connections')) {
// server is running now
d.resolve({url})
}
})
return d.promise
}
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'),
})
})
})