Update compat tests to use THREE.r155

compat-tests/fixtures/r3f-next-latest/next-latest.compat-test.ts

@@ -0,0 +1,42 @@
+// @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(`next`, () => {
+  describe(`build`, () => {
+    test(`command runs without error`, async () => {
+      cd(PATH_TO_PACKAGE)
+      const {exitCode} = await $`npm run build`
+      // at this point, the build should have succeeded
+      expect(exitCode).toEqual(0)
+    })
+
+    describe(`next start`, () => {
+      testServerAndPage({
+        startServerOnPort: (port: number) => {
+          cd(PATH_TO_PACKAGE)
+
+          return $`npm run start -- --port ${port}`
+        },
+
+        checkServerStdoutToSeeIfItsReady: (chunk) =>
+          chunk.includes('started server'),
+      })
+    })
+  })
+
+  // this test is not ready yet, so we'll skip it
+  describe(`$ next dev`, () => {
+    testServerAndPage({
+      startServerOnPort: (port: number) => {
+        cd(PATH_TO_PACKAGE)
+
+        return $`npm run dev -- --port ${port}`
+      },
+      checkServerStdoutToSeeIfItsReady: (chunk) =>
+        chunk.includes('compiled client and server successfully'),
+    })
+  })
+})

compat-tests/fixtures/r3f-next-latest/package/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+

compat-tests/fixtures/r3f-next-latest/package/README.md

@@ -0,0 +1 @@
+This is a starter template for [Learn Next.js](https://nextjs.org/learn).

compat-tests/fixtures/r3f-next-latest/package/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

compat-tests/fixtures/r3f-next-latest/package/package.json

@@ -0,0 +1,20 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "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",
+    "theatric": "0.0.1-COMPAT.1",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

compat-tests/fixtures/r3f-next-latest/package/pages/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import studio from '@theatre/studio'
+import extension from '@theatre/r3f/dist/extension'
+import App from '../src/App/App'
+
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+export default function Home() {
+  return <App></App>
+}

compat-tests/fixtures/r3f-next-latest/package/src/App/App.tsx

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

compat-tests/fixtures/r3f-next-latest/package/src/App/state.json

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

compat-tests/fixtures/r3f-next-latest/package/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}