Use a temp directory to install the compat test fixtures

This is a way to run `npm install` on the compat test fixtures without the node_modules at the root of the repo interfering with the node's module resolution (and that of parcel/webpack/etc).

It's hacky because ideally we'd just put each test in its own docker container for simplicity. We tried that in the private repo, but the complexity is not worth the benefit.

.github/actions/yarn-nm-install/action.yml

@@ -53,6 +53,6 @@ runs:
       shell: bash
       run: yarn workspace playground run playwright install --with-deps
 
-    - name: Update browserlist
+    # - name: Update browserlist
-      shell: bash
+    #   shell: bash
-      run: npx browserslist@latest --update-db
+    #   run: npx browserslist@latest --update-db

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

@@ -29,17 +29,10 @@
     "web-vitals": "^1.0.1"
   },
   "eslintConfig": {
-    "extends": [
+    "extends": ["react-app", "react-app/jest"]
-      "react-app",
-      "react-app/jest"
-    ]
   },
   "browserslist": {
-    "production": [
+    "production": [">0.2%", "not dead", "not op_mini all"],
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

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

@@ -1,5 +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/next-latest/package/tsconfig.json

@@ -17,12 +17,19 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    ".next/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"

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

@@ -11,12 +11,9 @@
     "@theatre/core": "0.0.1-COMPAT.1",
     "@theatre/r3f": "0.0.1-COMPAT.1",
     "@theatre/studio": "0.0.1-COMPAT.1",
-    "parcel": "^2.5.0",
+    "parcel": "^2.9.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "serve": "14.2.0"
-  },
-  "devDependencies": {
-    "buffer": "^5.7.1"
   }
 }

compat-tests/package.json

@@ -11,9 +11,9 @@
     "node-cleanup": "^2.1.2",
     "playwright": "^1.29.1",
     "prettier": "^2.6.2",
-    "verdaccio": "^5.10.2",
+    "verdaccio": "^5.26.1",
-    "verdaccio-auth-memory": "^10.2.0",
+    "verdaccio-auth-memory": "^10.2.2",
-    "verdaccio-memory": "^10.2.0",
+    "verdaccio-memory": "^10.3.2",
     "zx": "^7.1.1"
   },
   "version": "0.0.1-COMPAT.1"

compat-tests/scripts/scripts.mjs

@@ -7,7 +7,6 @@ import path from 'path'
 import {globby, argv, YAML, $, fs, cd, os, within} from 'zx'
 import onCleanup from 'node-cleanup'
 import * as verdaccioPackage from 'verdaccio'
-import {chromium, devices} from 'playwright'
 
 /**
  * @param {string} pkg
@@ -55,6 +54,8 @@ const tempVersion =
     : // a random integer between 1 and 50000
       (Math.floor(Math.random() * 50000) + 1).toString())
 
+const keepAlive = !!argv['keep-alive']
+
 /**
  * This script starts verdaccio and publishes all the packages in the monorepo to it, then
  * it runs `npm install` on all the test packages, and finally it closes verdaccio.
@@ -83,8 +84,15 @@ export async function installFixtures() {
   console.log('Running `$ npm install` on test packages')
   await runNpmInstallOnTestPackages()
   console.log('All fixtures installed successfully')
-  await verdaccioServer.close()
+  if (keepAlive) {
+    console.log('Keeping verdaccio alive. Press Ctrl+C to exit.')
+    // wait for ctrl+c
+    await new Promise((resolve) => {})
+  } else {
+    console.log('Closing verdaccio. Use --keep-alive to keep it running.')
     restoreTestPackageJsons()
+    await verdaccioServer.close()
+  }
   console.log('Done')
 }
 
@@ -92,18 +100,39 @@ async function runNpmInstallOnTestPackages() {
   const packagePaths = await getCompatibilityTestSetups()
 
   for (const pathToPackageDir of packagePaths) {
-    cd(pathToPackageDir)
+    await fs.remove(path.join(pathToPackageDir, 'node_modules'))
+    await fs.remove(path.join(pathToPackageDir, 'package-lock.json'))
+    cd(path.join(pathToPackageDir, '../'))
+    const tempPath = fs.mkdtempSync(
+      path.join(os.tmpdir(), 'theatre-compat-test-'),
+    )
+    await fs.copy(pathToPackageDir, tempPath)
+
+    cd(path.join(tempPath))
     try {
       console.log('Running npm install on ' + pathToPackageDir + '...')
       await $`npm install --registry ${config.VERDACCIO_URL} --loglevel ${
         verbose ? 'warn' : 'error'
       } --fund false`
+
+      console.log('npm install finished successfully in' + tempPath)
+
+      await fs.move(
+        path.join(tempPath, 'node_modules'),
+        path.join(pathToPackageDir, 'node_modules'),
+      )
+      await fs.move(
+        path.join(tempPath, 'package-lock.json'),
+        path.join(pathToPackageDir, 'package-lock.json'),
+      )
     } catch (error) {
       console.error(`Failed to install dependencies for ${pathToPackageDir}
 Try running \`npm install\` in that directory manually via:
 cd ${pathToPackageDir}
 npm install --registry ${config.VERDACCIO_URL}
 Original error: ${error}`)
+    } finally {
+      await fs.remove(tempPath)
     }
   }
 }
@@ -187,6 +216,10 @@ const startVerdaccio = (port) => {
         config.logs.level = 'warn'
       }
 
+      const cache = path.join(__dirname, '../.verdaccio-cache')
+
+      config.self_path = cache
+
       const onReady = (webServer) => {
         webServer.listen(port, () => {
           resolved = true
@@ -194,14 +227,7 @@ const startVerdaccio = (port) => {
         })
       }
 
-      startVerdaccioServer(
+      startVerdaccioServer(config, 6000, cache, '1.0.0', 'verdaccio', onReady)
-        config,
-        6000,
-        undefined,
-        '1.0.0',
-        'verdaccio',
-        onReady,
-      )
     }),
     new Promise((_, rej) => {
       setTimeout(() => {

compat-tests/verdaccio.yml

@@ -1,6 +1,6 @@
 store:
   memory:
-    limit: 1000
+    limit: 10000
 auth:
   auth-memory:
     users: