Add cra to compat tests

compat-tests/fixtures/cra/cra.compat-test.ts

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

compat-tests/fixtures/cra/package/package.json

@@ -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": {

compat-tests/fixtures/cra/package/src/index.js

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

compat-tests/fixtures/cra/package/src/index.tsx

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