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

24
compat-tests/fixtures/r3f-vite2/package/.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

12
compat-tests/fixtures/r3f-vite2/package/index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

26
compat-tests/fixtures/r3f-vite2/package/package.json Normal file
View file

@ -0,0 +1,26 @@
{
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"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",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"typescript": "^4.6.3",
"vite": "^2.9.9"
}
}

102
compat-tests/fixtures/r3f-vite2/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-vite2/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-vite2/package/src/main.tsx 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 />)

1
compat-tests/fixtures/r3f-vite2/package/src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
compat-tests/fixtures/r3f-vite2/package/tsconfig.json Normal file
View file

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{"path": "./tsconfig.node.json"}]
}

8
compat-tests/fixtures/r3f-vite2/package/tsconfig.node.json Normal file
View file

@ -0,0 +1,8 @@
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": ["vite.config.ts"]
}

7
compat-tests/fixtures/r3f-vite2/package/vite.config.ts Normal file
View file

@ -0,0 +1,7 @@
import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})

40
compat-tests/fixtures/r3f-vite2/vite2.compat-test.ts Normal file
View file

@ -0,0 +1,40 @@
// @cspotcode/zx is zx in CommonJS
import {$, cd, path, ProcessPromise} from '@cspotcode/zx'
import {testServerAndPage} from '../../utils/testUtils'
const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
describe(`vite2`, () => {
test(`\`$ vite build\` should succeed`, async () => {
cd(PATH_TO_PACKAGE)
const {exitCode} = await $`npm run build`
// at this point, the build should have succeeded
expect(exitCode).toEqual(0)
})
describe(`vite preview`, () => {
function startServerOnPort(port: number): ProcessPromise<unknown> {
cd(PATH_TO_PACKAGE)
return $`npm run preview -- --port ${port}`
}
testServerAndPage({
startServerOnPort,
checkServerStdoutToSeeIfItsReady: (chunk) => chunk.includes('--host'),
})
})
describe(`vite dev`, () => {
function startServerOnPort(port: number): ProcessPromise<unknown> {
cd(PATH_TO_PACKAGE)
return $`npm run dev -- --port ${port}`
}
testServerAndPage({
startServerOnPort,
checkServerStdoutToSeeIfItsReady: (chunk) => chunk.includes('--host'),
})
})
})