Catch more SSR issues and improve compat tests (#353)

This will cause the build to fail, as this will catch an SSR issue, which will be fixed after merging #369

compatibility-tests/fixtures/next/__snapshots__/production.compat-test.ts.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`next / production \`$ next build\` should succeed and have a predictable output 1`] = `
+"
+> build
+> next build
+
+info  - Linting and checking validity of types...
+info  - Creating an optimized production build...
+info  - Compiled successfully
+info  - Collecting page data...
+info  - Generating static pages (0/3)
+info  - Generating static pages (3/3)
+info  - Finalizing page optimization...
+
+"
+`;

compatibility-tests/fixtures/next/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
+

compatibility-tests/fixtures/next/package/README.md

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

compatibility-tests/fixtures/next/package/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@theatre/core": "0.0.1-COMPAT.1",
+    "@theatre/r3f": "0.0.1-COMPAT.1",
+    "@theatre/studio": "0.0.1-COMPAT.1",
+    "next": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

compatibility-tests/fixtures/next/package/pages/index.js

@@ -0,0 +1,92 @@
+import {getProject} from '@theatre/core'
+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'
+import playgroundState from './playgroundState.json'
+
+if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
+  studio.extend(extension)
+  studio.initialize({usePersistentStorage: false})
+}
+
+const sheet = getProject('Playground - R3F', {state: playgroundState}).sheet(
+  'R3F-Canvas',
+)
+
+// 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={sheet}>
+        {/* @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>
+  )
+}
+
+export default function Home() {
+  return <App></App>
+}

compatibility-tests/fixtures/next/package/pages/playgroundState.json

@@ -0,0 +1,24 @@
+{
+  "sheetsById": {
+    "R3F-Canvas": {
+      "staticOverrides": {
+        "byObject": {
+          "plane1": {
+            "position": {
+              "x": -0.06000000000000002
+            }
+          },
+          "plane2": {
+            "position": {
+              "x": 0,
+              "y": -1.1043953439330743,
+              "z": 6.322692591942688
+            }
+          }
+        }
+      }
+    }
+  },
+  "definitionVersion": "0.4.0",
+  "revisionHistory": ["lSnZ_QVusR3qNnVN"]
+}

compatibility-tests/fixtures/next/production.compat-test.ts

@@ -0,0 +1,67 @@
+// @cspotcode/zx is zx in CommonJS
+import {$, cd, path} from '@cspotcode/zx'
+import {chromium, devices} from 'playwright'
+
+$.verbose = true
+
+const PATH_TO_PACKAGE = path.join(__dirname, `./package`)
+
+describe(`next / production`, () => {
+  test(`\`$ next build\` should succeed and have a predictable output`, async () => {
+    cd(PATH_TO_PACKAGE)
+    const {exitCode, stdout} = await $`npm run build`
+    // at this point, the build should have succeeded
+    expect(exitCode).toEqual(0)
+    // now let's check the output to make sure it's what we expect
+
+    // all of stdout until the line that contains "Route (pages)". That's because what comes after that
+    // line is a list of all the pages that were built, and we don't want to snapshot that because it changes every time.
+    const stdoutUntilRoutePages = stdout.split(`Route (pages)`)[0]
+
+    // This test will fail if `next build` outputs anything unexpected.
+    expect(stdoutUntilRoutePages).toMatchSnapshot()
+  })
+
+  // this test is not ready yet, so we'll skip it
+  describe.skip(`$ next start`, () => {
+    let browser, page
+    beforeAll(async () => {
+      browser = await chromium.launch()
+    })
+    afterAll(async () => {
+      await browser.close()
+    })
+    beforeEach(async () => {
+      page = await browser.newPage()
+    })
+    afterEach(async () => {
+      await page.close()
+    })
+
+    // just a random port I'm hoping is free everywhere.
+    const port = 30978
+
+    test('`$ next start` serves the app, and the app works', async () => {
+      // run the production server but don't wait for it to finish
+      cd(PATH_TO_PACKAGE)
+      const p = $`npm run start -- --port ${port}`
+      // await p
+
+      try {
+        page.on('console', (msg) => console.log('PAGE LOG:', msg.text()))
+        await page.goto(`http://localhost:${port}`)
+        // wait three seconds
+        await page.waitForTimeout(3000)
+      } finally {
+        p.kill()
+      }
+      try {
+        await p
+      } catch (e) {
+        if (e.signal !== 'SIGKILL' && e.signal !== 'SIGTERM') {
+          throw e
+        }
+      }
+    })
+  })
+})