Set up manual compatibility tests (#171)
|
@ -39,7 +39,7 @@ module.exports = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
ignorePatterns: ['*.d.ts', '*.ignore.ts', 'ecosystem-tests/*'],
|
ignorePatterns: ['*.d.ts', '*.ignore.ts', 'compatibility-tests/*'],
|
||||||
overrides: [
|
overrides: [
|
||||||
{
|
{
|
||||||
files: ['*.ts', '*.tsx'],
|
files: ['*.ts', '*.tsx'],
|
||||||
|
|
43
.github/workflows/compatibility-tests.yml
vendored
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
name: Compatibility tests
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [main]
|
||||||
|
pull_request:
|
||||||
|
branches: [main]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
Test:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
strategy:
|
||||||
|
matrix:
|
||||||
|
node-version: [16.x]
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v2
|
||||||
|
- name: Use Node.js ${{ matrix.node-version }}
|
||||||
|
uses: actions/setup-node@v1
|
||||||
|
with:
|
||||||
|
node-version: ${{ matrix.node-version }}
|
||||||
|
|
||||||
|
- name: Get yarn cache directory path
|
||||||
|
id: yarn-cache-dir-path
|
||||||
|
run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
|
||||||
|
|
||||||
|
- uses: actions/cache@v2
|
||||||
|
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
|
||||||
|
with:
|
||||||
|
# Note that we assume the following things about the compatibility tests here:
|
||||||
|
# 1. Every directory in `build_test` is a project managed with yarn
|
||||||
|
# 2. All these projects store their cache in `<project>/.yarn/cache`
|
||||||
|
# It's not that robust, but should be sufficient for us for now.
|
||||||
|
path: |
|
||||||
|
${{ steps.yarn-cache-dir-path.outputs.dir }}
|
||||||
|
${{ github.workspace }}/compatibility-tests/*/.yarn/cache
|
||||||
|
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||||
|
restore-keys: |
|
||||||
|
${{ runner.os }}-yarn-
|
||||||
|
|
||||||
|
- run: yarn install
|
||||||
|
- run: yarn test:compatibility:ci
|
7
.github/workflows/main.yml
vendored
|
@ -28,23 +28,22 @@ jobs:
|
||||||
- uses: actions/cache@v2
|
- uses: actions/cache@v2
|
||||||
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
|
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
|
||||||
with:
|
with:
|
||||||
# Note that we assume the following things about the ecosystem tests here:
|
# Note that we assume the following things about the compatibility tests here:
|
||||||
# 1. Every directory in `build_test` is a project managed with yarn
|
# 1. Every directory in `build_test` is a project managed with yarn
|
||||||
# 2. All these projects store their cache in `<project>/.yarn/cache`
|
# 2. All these projects store their cache in `<project>/.yarn/cache`
|
||||||
# It's not that robust, but should be sufficient for us for now.
|
# It's not that robust, but should be sufficient for us for now.
|
||||||
path: |
|
path: |
|
||||||
${{ steps.yarn-cache-dir-path.outputs.dir }}
|
${{ steps.yarn-cache-dir-path.outputs.dir }}
|
||||||
${{ github.workspace }}/ecosystem-tests/*/.yarn/cache
|
${{ github.workspace }}/compatibility-tests/*/.yarn/cache
|
||||||
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||||
restore-keys: |
|
restore-keys: |
|
||||||
${{ runner.os }}-yarn-
|
${{ runner.os }}-yarn-
|
||||||
|
|
||||||
- run: yarn install
|
- run: yarn install
|
||||||
- run: yarn typecheck
|
|
||||||
- run: yarn lint:all --max-warnings 0
|
- run: yarn lint:all --max-warnings 0
|
||||||
- run: yarn test
|
- run: yarn test
|
||||||
|
- run: yarn typecheck
|
||||||
- run: yarn build
|
- run: yarn build
|
||||||
- run: yarn test:ecosystem
|
|
||||||
- name: Download playwright
|
- name: Download playwright
|
||||||
run: yarn workspace playground run playwright install
|
run: yarn workspace playground run playwright install
|
||||||
- name: Run e2e tests with percy
|
- name: Run e2e tests with percy
|
||||||
|
|
9
.gitignore
vendored
|
@ -20,11 +20,8 @@
|
||||||
!.yarn/versions
|
!.yarn/versions
|
||||||
|
|
||||||
# Required by the `parcel_v2`
|
# Required by the `parcel_v2`
|
||||||
# ecosystem tests
|
# compatibility tests
|
||||||
.parcel-cache
|
.parcel-cache
|
||||||
|
|
||||||
yalc.lock
|
/compatibility-tests/*/.yarn
|
||||||
|
/compatibility-tests/*/build
|
||||||
/ecosystem-tests/*/.yalc
|
|
||||||
/ecosystem-tests/*/.yarn
|
|
||||||
/ecosystem-tests/*/build
|
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
nodeLinker: node-modules
|
nodeLinker: node-modules
|
||||||
|
|
||||||
plugins:
|
plugins:
|
||||||
- path: .yarn/plugins/@yarnpkg/plugin-compat.cjs
|
- path: .yarn/plugins/@yarnpkg/plugin-compat.cjs
|
||||||
spec: '@yarnpkg/plugin-compat'
|
spec: "@yarnpkg/plugin-compat"
|
||||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||||
spec: '@yarnpkg/plugin-interactive-tools'
|
spec: "@yarnpkg/plugin-interactive-tools"
|
||||||
|
|
||||||
yarnPath: .yarn/releases/yarn-3.2.0.cjs
|
yarnPath: .yarn/releases/yarn-3.2.0.cjs
|
||||||
|
unsafeHttpWhitelist:
|
||||||
|
- localhost
|
||||||
|
npmPublishRegistry: http://localhost:4823/
|
||||||
|
|
34
compatibility-tests/README.md
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
# Compatibility tests
|
||||||
|
|
||||||
|
This setup helps us test whether Theatre.js is compatible with popular tools in the JS ecosystem, such as Vite, webpack, react, vue, etc.
|
||||||
|
|
||||||
|
> This setup is 3/10 complete.
|
||||||
|
|
||||||
|
The currentr workflow is:
|
||||||
|
|
||||||
|
1. Run a local npm registry, and build and publish the @theatre/* packages to it. All packages will have the 0.0.1-COMPAT.1 version
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn workspace @theatre/compatibility-tests run registry:start
|
||||||
|
```
|
||||||
|
|
||||||
|
This script will keep running until it is terminated. While running, npm will be configured to point to the local registry that contains the `@theatre/*@0.0.1-COMPAT.1` packages.
|
||||||
|
|
||||||
|
2. `cd` into any test project (either use those in `./test-*` or make a new npm package elsewhere via `npm init`.)
|
||||||
|
3. Install `@theatre/*` from the local registry:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install @theatre/core@0.0.1-COMPAT.1 @theatre/studio@0.0.1-COMPAT.1 @theatre/r3f@0.0.1-COMPAT.1
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Test your local build of Thatre.js against your setup by manually building, running a dev server, and using Theatre.js on a browser pointing to the dev server.
|
||||||
|
|
||||||
|
|
||||||
|
Inspired by the
|
||||||
|
[#help channel on our Discord](https://discord.com/channels/870988717190426644/870988717190426647)
|
||||||
|
we collect examples for including `Theatre.js` in project that use different
|
||||||
|
tools (`parcel`, `Next.js`, `vanilla Rollup`, etc...) to build them in the CI
|
||||||
|
(these are the _compatibility tests_).
|
||||||
|
|
||||||
|
> **Gotchas**
|
||||||
|
> Some bundlers like webpack are not configured to work well with yarn workspaces by default. For example, the webpack config of create-react-app, tries to look up the node_modules chain to find missing dependencies, which is not a behavior that we want in build-tests setups. So if a setup doesn't work, try running it outside the monorepo to see if being in the monorepo is what's causing it to fail.
|
16
compatibility-tests/package.json
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
{
|
||||||
|
"name": "@theatre/compatibility-tests",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"registry:start": "zx ./scripts/start-registry.mjs",
|
||||||
|
"test:ci": "zx ./scripts/ci.mjs"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"node-cleanup": "^2.1.2",
|
||||||
|
"prettier": "^2.6.2",
|
||||||
|
"verdaccio": "^5.10.2",
|
||||||
|
"verdaccio-auth-memory": "^10.2.0",
|
||||||
|
"verdaccio-memory": "^10.2.0",
|
||||||
|
"zx": "^6.1.0"
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,19 +3,24 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
import {colorize, getEcosystemTestSetups} from './utils.mjs'
|
import {colorize, getCompatibilityTestSetups} from './utils.mjs'
|
||||||
|
|
||||||
const root = path.resolve(__dirname, '../..')
|
const root = path.resolve(__dirname, '../..')
|
||||||
const absPathOfEcosystemTestSetups = getEcosystemTestSetups(root)
|
const absPathOfCompatibilityTestSetups = getCompatibilityTestSetups(root)
|
||||||
|
|
||||||
const setupsWithErros = []
|
const setupsWithErros = []
|
||||||
|
|
||||||
// Try building the setups
|
// Try building the setups
|
||||||
;(async function () {
|
;(async function () {
|
||||||
for (const setupDir of absPathOfEcosystemTestSetups) {
|
for (const setupDir of absPathOfCompatibilityTestSetups) {
|
||||||
try {
|
try {
|
||||||
cd(setupDir)
|
cd(setupDir)
|
||||||
await $`yarn build`
|
const pathToSetup = path.join(absPathOfCompatibilityTestSetups, setupDir)
|
||||||
|
fs.removeSync(path.join(pathToSetup, 'node_modules'))
|
||||||
|
fs.removeSync(path.join(pathToSetup, 'package-lock.json'))
|
||||||
|
fs.removeSync(path.join(pathToSetup, 'yarn.lock'))
|
||||||
|
await $`npm install`
|
||||||
|
await $`npm run build`
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
setupsWithErros.push(setupDir)
|
setupsWithErros.push(setupDir)
|
5
compatibility-tests/scripts/ci.mjs
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import {startRegistry} from './utils.mjs'
|
||||||
|
;(async function runCI() {
|
||||||
|
await startRegistry()
|
||||||
|
process.exit(0)
|
||||||
|
})()
|
3
compatibility-tests/scripts/start-registry.mjs
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
import {startRegistry} from './utils.mjs'
|
||||||
|
|
||||||
|
startRegistry()
|
261
compatibility-tests/scripts/utils.mjs
Normal file
|
@ -0,0 +1,261 @@
|
||||||
|
/**
|
||||||
|
* Utility functions for the compatibility tests
|
||||||
|
*/
|
||||||
|
|
||||||
|
import fs from 'fs'
|
||||||
|
import path from 'path'
|
||||||
|
import {YAML} from 'zx'
|
||||||
|
import onCleanup from 'node-cleanup'
|
||||||
|
import * as verdaccioPackage from 'verdaccio'
|
||||||
|
|
||||||
|
// 'verdaccio' is not an es module so we have to do this:
|
||||||
|
const startVerdaccioServer = verdaccioPackage.default.default
|
||||||
|
|
||||||
|
export const VERDACCIO_PORT = 4823
|
||||||
|
export const VERDACCIO_HOST = `localhost`
|
||||||
|
export const VERDACCIO_URL = `http://${VERDACCIO_HOST}:${VERDACCIO_PORT}/`
|
||||||
|
export const MONOREPO_ROOT = path.join(__dirname, '../..')
|
||||||
|
export const PATH_TO_YARNRC = path.join(MONOREPO_ROOT, '.yarnrc.yml')
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This script will:
|
||||||
|
* 1. Start verdaccio (a local npm registry),
|
||||||
|
* 2. Configure npm (and _not_ yarn) to use verdaccio as its registry
|
||||||
|
* 3. It will _not_ affect the global yarn installation yet. That is a TODO
|
||||||
|
* 4. It does _not_ affect the monorepo yarnrc file.
|
||||||
|
*
|
||||||
|
* If the script is interrupted, it'll attempt to restore the npm/yarn
|
||||||
|
* registry config to its original state, but that's not guaranteed.
|
||||||
|
*/
|
||||||
|
export async function startRegistry() {
|
||||||
|
const npmOriginalRegistry = (
|
||||||
|
await $`npm config get registry --location=global`
|
||||||
|
).stdout.trim()
|
||||||
|
onCleanup((exitCode, signal) => {
|
||||||
|
onCleanup.uninstall()
|
||||||
|
$`npm config set registry ${npmOriginalRegistry} --location=global`.then(
|
||||||
|
() => {
|
||||||
|
process.kill(process.pid, signal)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
|
||||||
|
await $`echo "Setting npm registry url to verdaccio's"`
|
||||||
|
await $`npm config set registry ${VERDACCIO_URL} --location=global`
|
||||||
|
|
||||||
|
await $`echo Running verdaccio on ${VERDACCIO_URL}`
|
||||||
|
const verdaccioServer = await startVerdaccio(VERDACCIO_PORT)
|
||||||
|
|
||||||
|
await releaseToVerdaccio()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Starts the verdaccio server and returns a promise that resolves when the serve is up and ready
|
||||||
|
*
|
||||||
|
* Credid: https://github.com/storybookjs/storybook/blob/92b23c080d03433765cbc7a60553d036a612a501/scripts/run-registry.ts
|
||||||
|
*/
|
||||||
|
const startVerdaccio = (port) => {
|
||||||
|
let resolved = false
|
||||||
|
return Promise.race([
|
||||||
|
new Promise((resolve) => {
|
||||||
|
const config = {
|
||||||
|
...YAML.parse(
|
||||||
|
fs.readFileSync(path.join(__dirname, '../verdaccio.yml'), 'utf8'),
|
||||||
|
),
|
||||||
|
}
|
||||||
|
|
||||||
|
const onReady = (webServer) => {
|
||||||
|
webServer.listen(port, () => {
|
||||||
|
resolved = true
|
||||||
|
resolve(webServer)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
startVerdaccioServer(
|
||||||
|
config,
|
||||||
|
6000,
|
||||||
|
undefined,
|
||||||
|
'1.0.0',
|
||||||
|
'verdaccio',
|
||||||
|
onReady,
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
new Promise((_, rej) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!resolved) {
|
||||||
|
resolved = true
|
||||||
|
rej(new Error(`TIMEOUT - verdaccio didn't start within 10s`))
|
||||||
|
}
|
||||||
|
}, 10000)
|
||||||
|
}),
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
const packagesToPublish = [
|
||||||
|
'@theatre/core',
|
||||||
|
'@theatre/studio',
|
||||||
|
'@theatre/dataverse',
|
||||||
|
'@theatre/react',
|
||||||
|
'@theatre/browser-bundles',
|
||||||
|
'@theatre/r3f',
|
||||||
|
]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Assigns a new version to each of @theatre/* packages. If there a package depends on another package in this monorepo,
|
||||||
|
* this function makes sure the dependency version is fixed at "hash"
|
||||||
|
*
|
||||||
|
* @param {{name: string, location: string}[]} workspacesListObjects - An Array of objects containing information about the workspaces
|
||||||
|
* @param {string} hash - Hash of the latest commit (or any other string)
|
||||||
|
* @returns {Promise<() => void>} - An async function that restores the package.json files to their original version
|
||||||
|
*/
|
||||||
|
async function assignVersions(workspacesListObjects, hash) {
|
||||||
|
/**
|
||||||
|
* An array of functions each of which restores a certain package.json to its original state
|
||||||
|
* @type {Array<() => void>}
|
||||||
|
*/
|
||||||
|
const restores = []
|
||||||
|
for (const workspaceData of workspacesListObjects) {
|
||||||
|
const pathToPackage = path.resolve(
|
||||||
|
MONOREPO_ROOT,
|
||||||
|
workspaceData.location,
|
||||||
|
'./package.json',
|
||||||
|
)
|
||||||
|
|
||||||
|
const originalFileContent = fs.readFileSync(pathToPackage, {
|
||||||
|
encoding: 'utf-8',
|
||||||
|
})
|
||||||
|
const originalJson = JSON.parse(originalFileContent)
|
||||||
|
|
||||||
|
restores.push(() => {
|
||||||
|
fs.writeFileSync(pathToPackage, originalFileContent, {encoding: 'utf-8'})
|
||||||
|
})
|
||||||
|
|
||||||
|
let {dependencies, peerDependencies, devDependencies} = originalJson
|
||||||
|
const version = hash
|
||||||
|
|
||||||
|
// Normally we don't have to override the package versions in dependencies because yarn would already convert
|
||||||
|
// all the "workspace:*" versions to a fixed version before publishing. However, packages like @theatre/studio
|
||||||
|
// have a peerDependency on @theatre/core set to "*" (meaning they would work with any version of @theatre/core).
|
||||||
|
// This is not the desired behavior in pre-release versions, so here, we'll fix those "*" versions to the set version.
|
||||||
|
for (const deps of [dependencies, peerDependencies, devDependencies]) {
|
||||||
|
if (!deps) continue
|
||||||
|
for (const wpObject of workspacesListObjects) {
|
||||||
|
if (deps[wpObject.name]) {
|
||||||
|
deps[wpObject.name] = hash
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const newJson = {
|
||||||
|
...originalJson,
|
||||||
|
version,
|
||||||
|
dependencies,
|
||||||
|
peerDependencies,
|
||||||
|
devDependencies,
|
||||||
|
}
|
||||||
|
fs.writeFileSync(pathToPackage, JSON.stringify(newJson, undefined, 2), {
|
||||||
|
encoding: 'utf-8',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return () =>
|
||||||
|
restores.forEach((fn) => {
|
||||||
|
fn()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Builds all the @theatre/* packages with version number 0.0.1-COMPAT.1 and publishes
|
||||||
|
* them all to the verdaccio registry
|
||||||
|
*/
|
||||||
|
async function releaseToVerdaccio() {
|
||||||
|
const version = '0.0.1-COMPAT.1'
|
||||||
|
cd(MONOREPO_ROOT)
|
||||||
|
|
||||||
|
// @ts-ignore ignore
|
||||||
|
process.env.THEATRE_IS_PUBLISHING = true
|
||||||
|
|
||||||
|
const workspacesListString = await $`yarn workspaces list --json`
|
||||||
|
const workspacesListObjects = workspacesListString.stdout
|
||||||
|
.split(os.EOL)
|
||||||
|
// strip out empty lines
|
||||||
|
.filter(Boolean)
|
||||||
|
.map((x) => JSON.parse(x))
|
||||||
|
|
||||||
|
const restorePackages = await assignVersions(workspacesListObjects, version)
|
||||||
|
|
||||||
|
process.on('SIGINT', async function cleanup(a) {
|
||||||
|
restorePackages()
|
||||||
|
process.exit(0)
|
||||||
|
})
|
||||||
|
|
||||||
|
// set verdaccio as the publish registry, and add it to the whitelist
|
||||||
|
const restoreYarnRc = patchYarnRcToUseVerdaccio()
|
||||||
|
|
||||||
|
await $`yarn clean`
|
||||||
|
await $`yarn build`
|
||||||
|
|
||||||
|
await Promise.all(
|
||||||
|
packagesToPublish.map(async (workspaceName) => {
|
||||||
|
const npmTag = 'compat'
|
||||||
|
await $`yarn workspace ${workspaceName} npm publish --access public --tag ${npmTag}`
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
|
||||||
|
restorePackages()
|
||||||
|
restoreYarnRc()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Temporarily patches the yarnrc file to sue verdaccio as its publish registry.
|
||||||
|
*
|
||||||
|
* Restores yarnrc to the old version when restoreYarnRc() is called.
|
||||||
|
*/
|
||||||
|
function patchYarnRcToUseVerdaccio() {
|
||||||
|
const originalYarnrcContent = fs.readFileSync(PATH_TO_YARNRC, {
|
||||||
|
encoding: 'utf-8',
|
||||||
|
})
|
||||||
|
|
||||||
|
const newYarnRcContent = YAML.stringify({
|
||||||
|
...YAML.parse(originalYarnrcContent),
|
||||||
|
unsafeHttpWhitelist: [VERDACCIO_HOST],
|
||||||
|
npmPublishRegistry: VERDACCIO_URL,
|
||||||
|
npmAuthIdent: 'test:test',
|
||||||
|
})
|
||||||
|
|
||||||
|
fs.writeFileSync(PATH_TO_YARNRC, newYarnRcContent, {encoding: 'utf-8'})
|
||||||
|
|
||||||
|
return function restoreYarnRc() {
|
||||||
|
fs.writeFileSync(PATH_TO_YARNRC, originalYarnrcContent, {encoding: 'utf-8'})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all the setups from `./compatibility-tests/`
|
||||||
|
*
|
||||||
|
* @returns {Array<string>} An array containing the absolute paths to the compatibility test setups
|
||||||
|
*/
|
||||||
|
export function getCompatibilityTestSetups() {
|
||||||
|
const buildTestsDir = path.join(MONOREPO_ROOT, 'compatibility-tests')
|
||||||
|
let buildTestsDirEntries
|
||||||
|
|
||||||
|
try {
|
||||||
|
buildTestsDirEntries = fs.readdirSync(buildTestsDir)
|
||||||
|
} catch {
|
||||||
|
throw new Error(
|
||||||
|
`Could not list directory: "${buildTestsDir}" Is it an existing directory?`,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
const setupsAbsPaths = []
|
||||||
|
|
||||||
|
// NOTE: We assume that every directory matching `compatibility-tests/test-*` is
|
||||||
|
// a test package
|
||||||
|
for (const entry of buildTestsDirEntries) {
|
||||||
|
if (!entry.startsWith('test-')) continue
|
||||||
|
const entryAbsPath = path.join(buildTestsDir, entry)
|
||||||
|
if (fs.lstatSync(entryAbsPath).isDirectory()) {
|
||||||
|
setupsAbsPaths.push(entryAbsPath)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return setupsAbsPaths
|
||||||
|
}
|
|
@ -9,12 +9,15 @@
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@react-three/drei": "^7.2.2",
|
"@react-three/drei": ">7.2.2",
|
||||||
"@testing-library/jest-dom": "^5.11.4",
|
"@testing-library/jest-dom": "^5.11.4",
|
||||||
"@testing-library/react": "^11.1.0",
|
"@testing-library/react": "^11.1.0",
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
|
"@theatre/core": "^0.0.1-COMPAT.1",
|
||||||
|
"@theatre/studio": "^0.0.1-COMPAT.1",
|
||||||
|
"@theatre/r3f": "^0.0.1-COMPAT.1",
|
||||||
"react-scripts": "^5.0.1",
|
"react-scripts": "^5.0.1",
|
||||||
"three": "^0.130.1",
|
"three": ">0.132.0",
|
||||||
"web-vitals": "^1.0.1"
|
"web-vitals": "^1.0.1"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
24
compatibility-tests/verdaccio.yml
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
store:
|
||||||
|
memory:
|
||||||
|
limit: 1000
|
||||||
|
auth:
|
||||||
|
auth-memory:
|
||||||
|
users:
|
||||||
|
test:
|
||||||
|
name: test
|
||||||
|
password: test
|
||||||
|
uplinks:
|
||||||
|
npmjs:
|
||||||
|
url: https://registry.npmjs.org/
|
||||||
|
packages:
|
||||||
|
'@theatre/*':
|
||||||
|
access: $all
|
||||||
|
publish: $all
|
||||||
|
'@*/*':
|
||||||
|
access: $all
|
||||||
|
publish: $all
|
||||||
|
proxy: npmjs
|
||||||
|
'**':
|
||||||
|
access: $all
|
||||||
|
proxy: npmjs
|
||||||
|
log: {type: stdout, format: pretty, level: http}
|
|
@ -1,110 +0,0 @@
|
||||||
# Ecosystem tests
|
|
||||||
|
|
||||||
Inspired by the
|
|
||||||
[#help channel on our Discord](https://discord.com/channels/870988717190426644/870988717190426647)
|
|
||||||
we collect examples for including `Theatre.js` in project that use different
|
|
||||||
tools (`parcel`, `Next.js`, `vanilla Rollup`, etc...) to build them in the CI
|
|
||||||
(these are the _ecosystem tests_).
|
|
||||||
|
|
||||||
## The currently tested setups
|
|
||||||
|
|
||||||
| setup | tools | `package.json` |
|
|
||||||
| ---------------------------- | ----------------------------------- | ------------------------------------- |
|
|
||||||
| ecosystem-tests/create-react-app | `create-react-app`, `r3f extension` | [link](create-react-app/package.json) |
|
|
||||||
|
|
||||||
## Testing the configurations locally
|
|
||||||
|
|
||||||
```sh
|
|
||||||
# clean existing build artifacts
|
|
||||||
yarn clean
|
|
||||||
# this will build all packages, publish them to yalc, link them to each setup, and run the `yarn build` command on that setup
|
|
||||||
yarn test:ecosystem
|
|
||||||
```
|
|
||||||
|
|
||||||
After running the above, you can also start the dev server of each setup to try it manually:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd ecosystem-tests/[setup-name]
|
|
||||||
yarn start
|
|
||||||
```
|
|
||||||
|
|
||||||
## Adding a new setup
|
|
||||||
|
|
||||||
If you wish to test a new setup (say Vite, or cool-new-bundler), here is how to
|
|
||||||
do it:
|
|
||||||
|
|
||||||
1. Build the monorepo packages and publish them to the local npm registry,
|
|
||||||
[yalc](https://github.com/wclr/yalc).
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cd /path/to/theatre-monorepo
|
|
||||||
# build all the packages
|
|
||||||
yarn build
|
|
||||||
# publish them to yalc (the local npm registry)
|
|
||||||
zx scripts/publish-to-yalc.mjs
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Start your new setup in a directory outside of the monorepo
|
|
||||||
|
|
||||||
```sh
|
|
||||||
# start a project outside the monorepo we'll copy it in later
|
|
||||||
cd /path/---------outside---------/theatre-monorepo
|
|
||||||
# make a new setup folder
|
|
||||||
mkdir new-setup .
|
|
||||||
cd new-setup
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Bootstrap your setup using npm, yarn, or other bootstrapping scripts (like
|
|
||||||
`npx create-react-app`)
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm init --yes
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Make sure there is a `yarn.lock` or `package-lock.json` file in this
|
|
||||||
directory. Otherwise, when we move it back into the monorepo, yarn will
|
|
||||||
complain that this package is not listed in the monorepo as a workspace.
|
|
||||||
|
|
||||||
```sh
|
|
||||||
touch yarn.lock
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Copy the new directory back to the monorepo and `cd` into it
|
|
||||||
|
|
||||||
```sh
|
|
||||||
cp -r ./path/---------outside---------/theatre-monorepo/new-setup /path/to/theatre/monorepo/build-tests/new-setup
|
|
||||||
cd /path/to/theatre/monorepo/build-tests/new-setup
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Let yarn/npm run an install
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn install
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Install `@theatre/core` and `@theatre/studio`, and possibly `@theatre/r3f`
|
|
||||||
from the local registry:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npx yalc link @theatre/core @theatre/studio @theatre/r3f
|
|
||||||
```
|
|
||||||
|
|
||||||
1. Copy the source (`src/*`) of one of the other setups into `new-setup` so you
|
|
||||||
don't have to start from scratch.
|
|
||||||
|
|
||||||
1. Make sure that you add a `yarn build` script to `new-setup/package.json`,
|
|
||||||
because it
|
|
||||||
[will be used](https://github.com/theatre-js/theatre/blob/db7dadc0c997316f2027736e2ecba0ea4acda2d4/scripts/build-tests/build-setups.mjs#L18)
|
|
||||||
to build the setup in the CI.
|
|
||||||
|
|
||||||
1. Test your setup by running its dev server or doing a build
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn start
|
|
||||||
```
|
|
||||||
|
|
||||||
> **Gotchas**
|
|
||||||
> Some bundlers like webpack are not configured to work well with yarn workspaces by default. For example, the webpack config of create-react-app, tries to look up the node_modules chain to find missing dependencies, which is not a behavior that we want in build-tests setups. So if a setup doesn't work, try running it outside the monorepo to see if being in the monorepo is what's causing it to fail.
|
|
||||||
|
|
||||||
Feel free to check out [the existing setups](#the-currently-tested-setups) in
|
|
||||||
`ecosystem-tests` if you get stuck.
|
|
|
@ -5,13 +5,14 @@
|
||||||
"workspaces": [
|
"workspaces": [
|
||||||
"packages/*",
|
"packages/*",
|
||||||
"examples/*",
|
"examples/*",
|
||||||
"theatre"
|
"theatre",
|
||||||
|
"compatibility-tests"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"playground": "yarn workspace playground run serve",
|
"playground": "yarn workspace playground run serve",
|
||||||
"test:e2e": "yarn workspace playground run test",
|
"test:e2e": "yarn workspace playground run test",
|
||||||
"test:e2e:ci": "yarn workspace playground run test:ci",
|
"test:e2e:ci": "yarn workspace playground run test:ci",
|
||||||
"test:ecosystem": "zx scripts/ecosystem-tests/ci.mjs",
|
"test:compatibility:ci": "yarn workspace @theatre/compatibility-tests run test:ci",
|
||||||
"typecheck": "yarn run build:ts",
|
"typecheck": "yarn run build:ts",
|
||||||
"build": "zx scripts/build.mjs",
|
"build": "zx scripts/build.mjs",
|
||||||
"clean": "zx scripts/clean.mjs",
|
"clean": "zx scripts/clean.mjs",
|
||||||
|
@ -56,7 +57,6 @@
|
||||||
"node-gyp": "^8.1.0",
|
"node-gyp": "^8.1.0",
|
||||||
"prettier": "^2.3.2",
|
"prettier": "^2.3.2",
|
||||||
"typescript": "^4.4.2",
|
"typescript": "^4.4.2",
|
||||||
"yalc": "^1.0.0-pre.53",
|
|
||||||
"zx": "^2.0.0"
|
"zx": "^2.0.0"
|
||||||
},
|
},
|
||||||
"packageManager": "yarn@3.2.0",
|
"packageManager": "yarn@3.2.0",
|
||||||
|
|
|
@ -1,6 +0,0 @@
|
||||||
;(async function () {
|
|
||||||
await $`zx scripts/publish-to-yalc.mjs`
|
|
||||||
await $`zx scripts/ecosystem-tests/install-dependencies.mjs`
|
|
||||||
await $`zx scripts/ecosystem-tests/link-theatre-packages.mjs`
|
|
||||||
await $`zx scripts/ecosystem-tests/build-setups.mjs`
|
|
||||||
})()
|
|
|
@ -1,35 +0,0 @@
|
||||||
/**
|
|
||||||
* Install the dependencies of the ecosystem test setups
|
|
||||||
*/
|
|
||||||
|
|
||||||
import path from 'path'
|
|
||||||
import {colorize, getEcosystemTestSetups} from './utils.mjs'
|
|
||||||
|
|
||||||
const root = path.resolve(__dirname, '../..')
|
|
||||||
|
|
||||||
const absPathOfTestSetups = getEcosystemTestSetups(root)
|
|
||||||
|
|
||||||
const setupsWithErrors = []
|
|
||||||
|
|
||||||
// Try installing the dependencies of the test setups
|
|
||||||
;(async function () {
|
|
||||||
for (const dirOfSetup of absPathOfTestSetups) {
|
|
||||||
try {
|
|
||||||
cd(dirOfSetup)
|
|
||||||
await $`yarn`
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err)
|
|
||||||
setupsWithErrors.push(dirOfSetup)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stop if there were any errors during the linking process,
|
|
||||||
// and print all of them to the console.
|
|
||||||
if (setupsWithErrors.length !== 0) {
|
|
||||||
throw new Error(
|
|
||||||
`The following setups had problems when their dependencies were being installed:\n${colorize.red(
|
|
||||||
setupsWithErrors.join('\n'),
|
|
||||||
)}`,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})()
|
|
|
@ -1,46 +0,0 @@
|
||||||
/**
|
|
||||||
* Add the theatre packages to the ecosystem test setups with `yalc link`
|
|
||||||
*/
|
|
||||||
|
|
||||||
import path from 'path'
|
|
||||||
import {colorize, getEcosystemTestSetups} from './utils.mjs'
|
|
||||||
|
|
||||||
const root = path.resolve(__dirname, '../..')
|
|
||||||
const absPathsOfSetups = getEcosystemTestSetups(root)
|
|
||||||
|
|
||||||
// The packages that should be linked with `yalc`
|
|
||||||
const packagesToLink = [
|
|
||||||
'@theatre/core',
|
|
||||||
'@theatre/studio',
|
|
||||||
'@theatre/dataverse',
|
|
||||||
'@theatre/react',
|
|
||||||
'@theatre/r3f',
|
|
||||||
]
|
|
||||||
|
|
||||||
const setupsWithErrors = []
|
|
||||||
|
|
||||||
;(async function () {
|
|
||||||
for (const setupDir of absPathsOfSetups) {
|
|
||||||
try {
|
|
||||||
cd(setupDir)
|
|
||||||
for (let pkg of packagesToLink) {
|
|
||||||
// Add the specified package to the setup's dependencies
|
|
||||||
// with `yalc link`.
|
|
||||||
await $`npx yalc link ${pkg}`
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
console.error(err)
|
|
||||||
setupsWithErrors.push(setupDir)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stop if there were any errors during the linking process,
|
|
||||||
// and print all of them to the console.
|
|
||||||
if (setupsWithErrors.length !== 0) {
|
|
||||||
throw new Error(
|
|
||||||
`The following setups had problems when their dependencies were being linked:\n${colorize.red(
|
|
||||||
setupsWithErrors.join('\n'),
|
|
||||||
)}`,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})()
|
|
|
@ -1,49 +0,0 @@
|
||||||
/**
|
|
||||||
* Utility functions for the ecosystem tests
|
|
||||||
*/
|
|
||||||
|
|
||||||
import fs from 'fs'
|
|
||||||
import path from 'path'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Colorize a message
|
|
||||||
*/
|
|
||||||
export const colorize = {
|
|
||||||
/** @param {string} message */
|
|
||||||
red: (message) => '\x1b[31m' + message + '\x1b[0m',
|
|
||||||
/** @param {string} message */
|
|
||||||
green: (message) => '\x1b[32m' + message + '\x1b[0m',
|
|
||||||
/** @param {string} message */
|
|
||||||
yellow: (message) => '\x1b[33m' + message + '\x1b[0m',
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get all the setups from `./ecosystem-tests/`
|
|
||||||
*
|
|
||||||
* @param {string} root - Absolute path to the theatre monorepo
|
|
||||||
* @returns An array containing the absolute paths to the ecosystem test setups
|
|
||||||
*/
|
|
||||||
export function getEcosystemTestSetups(root) {
|
|
||||||
const buildTestsDir = path.join(root, 'ecosystem-tests')
|
|
||||||
let buildTestsDirEntries
|
|
||||||
|
|
||||||
try {
|
|
||||||
buildTestsDirEntries = fs.readdirSync(buildTestsDir)
|
|
||||||
} catch {
|
|
||||||
throw new Error(
|
|
||||||
`Could not list directory: "${buildTestsDir}" Is it an existing directory?`,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
const setupsAbsPaths = []
|
|
||||||
|
|
||||||
// NOTE: We assume that every directory in `ecosystem-tests` is
|
|
||||||
// an ecosystem test setup!
|
|
||||||
for (const entry of buildTestsDirEntries) {
|
|
||||||
const entryAbsPath = path.join(buildTestsDir, entry)
|
|
||||||
if (fs.lstatSync(entryAbsPath).isDirectory()) {
|
|
||||||
setupsAbsPaths.push(entryAbsPath)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return setupsAbsPaths
|
|
||||||
}
|
|
|
@ -1,26 +0,0 @@
|
||||||
/**
|
|
||||||
* Publish the theatre packages to a local registry with yalc for the ecosystem tests.
|
|
||||||
*/
|
|
||||||
import path from 'path'
|
|
||||||
|
|
||||||
const root = path.resolve(__dirname, '..')
|
|
||||||
|
|
||||||
// Make sure the script runs in the root of the monorepo
|
|
||||||
cd(root)
|
|
||||||
|
|
||||||
process.env.USING_YALC = 'true'
|
|
||||||
|
|
||||||
const packagesToPublish = [
|
|
||||||
'theatre/core',
|
|
||||||
'theatre/studio',
|
|
||||||
'packages/dataverse',
|
|
||||||
'packages/r3f',
|
|
||||||
'packages/react',
|
|
||||||
]
|
|
||||||
|
|
||||||
;(async function () {
|
|
||||||
// Publish the packages to the local `yalc` registry
|
|
||||||
for (const pkg of packagesToPublish) {
|
|
||||||
await $`npx yalc publish ${pkg}`
|
|
||||||
}
|
|
||||||
})()
|
|