Add cra to compat tests
This commit is contained in:
Aria Minaei
Aria
parent
2670c670f6
commit
bded6e9240
4 changed files with 64 additions and 94 deletions
42
compat-tests/fixtures/cra/cra.compat-test.ts
Normal file
42
compat-tests/fixtures/cra/cra.compat-test.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
// @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(`Create React App`, () => {
|
||||
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)
|
||||
})
|
||||
|
||||
describe(`build`, () => {
|
||||
function startServerOnPort(port: number): ProcessPromise<unknown> {
|
||||
cd(PATH_TO_PACKAGE)
|
||||
|
||||
return $`npm run serve -- -p ${port}`
|
||||
}
|
||||
|
||||
testServerAndPage({
|
||||
startServerOnPort,
|
||||
checkServerStdoutToSeeIfItsReady: (chunk) =>
|
||||
chunk.includes('Accepting connections'),
|
||||
})
|
||||
})
|
||||
|
||||
describe(`dev`, () => {
|
||||
function startServerOnPort(port: number): ProcessPromise<unknown> {
|
||||
cd(PATH_TO_PACKAGE)
|
||||
|
||||
return $`BROWSER=none PORT=${port} npm run start`
|
||||
}
|
||||
|
||||
testServerAndPage({
|
||||
startServerOnPort,
|
||||
checkServerStdoutToSeeIfItsReady: (chunk) =>
|
||||
chunk.includes('You can now view'),
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -6,7 +6,8 @@
|
|||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
"eject": "react-scripts eject",
|
||||
"serve": "serve -s build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": ">7.2.2",
|
||||
|
|
@ -16,8 +17,14 @@
|
|||
"@theatre/core": "0.0.1-COMPAT.1",
|
||||
"@theatre/r3f": "0.0.1-COMPAT.1",
|
||||
"@theatre/studio": "0.0.1-COMPAT.1",
|
||||
"@types/jest": "^29.5.3",
|
||||
"@types/node": "^20.4.5",
|
||||
"@types/react": "^18.2.17",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"react-scripts": "^5.0.1",
|
||||
"three": ">0.132.0",
|
||||
"three": "0.133.0",
|
||||
"typescript": "^3.2.1",
|
||||
"serve": "14.2.0",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"eslintConfig": {
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
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'
|
||||
|
||||
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}) {
|
||||
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>)
|
||||
13
compat-tests/fixtures/cra/package/src/index.tsx
Normal file
13
compat-tests/fixtures/cra/package/src/index.tsx
Normal 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.tsx'
|
||||
|
||||
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 />)
|
||||
Loading…
Reference in a new issue