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: [
|
||||
{
|
||||
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
|
||||
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 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
|
||||
# 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 }}/ecosystem-tests/*/.yarn/cache
|
||||
${{ github.workspace }}/compatibility-tests/*/.yarn/cache
|
||||
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-yarn-
|
||||
|
||||
- run: yarn install
|
||||
- run: yarn typecheck
|
||||
- run: yarn lint:all --max-warnings 0
|
||||
- run: yarn test
|
||||
- run: yarn typecheck
|
||||
- run: yarn build
|
||||
- run: yarn test:ecosystem
|
||||
- name: Download playwright
|
||||
run: yarn workspace playground run playwright install
|
||||
- name: Run e2e tests with percy
|
||||
|
|
9
.gitignore
vendored
|
@ -20,11 +20,8 @@
|
|||
!.yarn/versions
|
||||
|
||||
# Required by the `parcel_v2`
|
||||
# ecosystem tests
|
||||
# compatibility tests
|
||||
.parcel-cache
|
||||
|
||||
yalc.lock
|
||||
|
||||
/ecosystem-tests/*/.yalc
|
||||
/ecosystem-tests/*/.yarn
|
||||
/ecosystem-tests/*/build
|
||||
/compatibility-tests/*/.yarn
|
||||
/compatibility-tests/*/build
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
nodeLinker: node-modules
|
||||
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-compat.cjs
|
||||
spec: '@yarnpkg/plugin-compat'
|
||||
spec: "@yarnpkg/plugin-compat"
|
||||
- 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
|
||||
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 {colorize, getEcosystemTestSetups} from './utils.mjs'
|
||||
import {colorize, getCompatibilityTestSetups} from './utils.mjs'
|
||||
|
||||
const root = path.resolve(__dirname, '../..')
|
||||
const absPathOfEcosystemTestSetups = getEcosystemTestSetups(root)
|
||||
const absPathOfCompatibilityTestSetups = getCompatibilityTestSetups(root)
|
||||
|
||||
const setupsWithErros = []
|
||||
|
||||
// Try building the setups
|
||||
;(async function () {
|
||||
for (const setupDir of absPathOfEcosystemTestSetups) {
|
||||
for (const setupDir of absPathOfCompatibilityTestSetups) {
|
||||
try {
|
||||
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) {
|
||||
console.error(err)
|
||||
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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-three/drei": "^7.2.2",
|
||||
"@react-three/drei": ">7.2.2",
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@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",
|
||||
"three": "^0.130.1",
|
||||
"three": ">0.132.0",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"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": [
|
||||
"packages/*",
|
||||
"examples/*",
|
||||
"theatre"
|
||||
"theatre",
|
||||
"compatibility-tests"
|
||||
],
|
||||
"scripts": {
|
||||
"playground": "yarn workspace playground run serve",
|
||||
"test:e2e": "yarn workspace playground run test",
|
||||
"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",
|
||||
"build": "zx scripts/build.mjs",
|
||||
"clean": "zx scripts/clean.mjs",
|
||||
|
@ -56,7 +57,6 @@
|
|||
"node-gyp": "^8.1.0",
|
||||
"prettier": "^2.3.2",
|
||||
"typescript": "^4.4.2",
|
||||
"yalc": "^1.0.0-pre.53",
|
||||
"zx": "^2.0.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}`
|
||||
}
|
||||
})()
|