-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tests for Theatre.js + popular setups in the ecosystem (#165)
This implements some basic infra for testing Theatre.js with popular setups such as npm/yarn/pnpm, webpack/vite/parcel, js/ts, etc. So far, the only existing setup has been with create-react-app. Will add more in the future. Co-authored-by: Fülöp <[email protected]> Co-authored-by: Aria Minaei <[email protected]>
- Loading branch information
1 parent
2324218
commit 3d10325
Showing
43 changed files
with
13,811 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
# 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# Theatre.js project with `create-react-app` using the `r3f extension` | ||
|
||
## Setup | ||
|
||
Please refer to [this guide](../README.md#testing-the-configurations-locally). | ||
|
||
## Usage | ||
|
||
- start the development server: | ||
```sh | ||
yarn start | ||
``` | ||
- build the project: | ||
```sh | ||
yarn build | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
{ | ||
"name": "@theatre-build-tests/react-app", | ||
"version": "0.1.0", | ||
"private": true, | ||
"scripts": { | ||
"start": "react-scripts start", | ||
"build": "react-scripts build", | ||
"test": "react-scripts test", | ||
"eject": "react-scripts eject" | ||
}, | ||
"dependencies": { | ||
"@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", | ||
"react-scripts": "^5.0.1", | ||
"three": "^0.130.1", | ||
"web-vitals": "^1.0.1" | ||
}, | ||
"eslintConfig": { | ||
"extends": [ | ||
"react-app", | ||
"react-app/jest" | ||
] | ||
}, | ||
"browserslist": { | ||
"production": [ | ||
">0.2%", | ||
"not dead", | ||
"not op_mini all" | ||
], | ||
"development": [ | ||
"last 1 chrome version", | ||
"last 1 firefox version", | ||
"last 1 safari version" | ||
] | ||
} | ||
} |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
<meta name="theme-color" content="#000000" /> | ||
<meta | ||
name="description" | ||
content="Web site created using create-react-app" | ||
/> | ||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> | ||
<!-- | ||
manifest.json provides metadata used when your web app is installed on a | ||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ | ||
--> | ||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> | ||
<!-- | ||
Notice the use of %PUBLIC_URL% in the tags above. | ||
It will be replaced with the URL of the `public` folder during the build. | ||
Only files inside the `public` folder can be referenced from the HTML. | ||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will | ||
work correctly both with client-side routing and a non-root public URL. | ||
Learn how to configure a non-root public URL by running `npm run build`. | ||
--> | ||
<title>React App</title> | ||
</head> | ||
<body> | ||
<noscript>You need to enable JavaScript to run this app.</noscript> | ||
<div id="root"></div> | ||
<!-- | ||
This HTML file is a template. | ||
If you open it directly in the browser, you will see an empty page. | ||
You can add webfonts, meta tags, or analytics to this file. | ||
The build step will place the bundled scripts into the <body> tag. | ||
To begin the development, run `npm start` or `yarn start`. | ||
To create a production bundle, use `npm run build` or `yarn build`. | ||
--> | ||
</body> | ||
</html> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
{ | ||
"short_name": "React App", | ||
"name": "Create React App Sample", | ||
"icons": [ | ||
{ | ||
"src": "favicon.ico", | ||
"sizes": "64x64 32x32 24x24 16x16", | ||
"type": "image/x-icon" | ||
}, | ||
{ | ||
"src": "logo192.png", | ||
"type": "image/png", | ||
"sizes": "192x192" | ||
}, | ||
{ | ||
"src": "logo512.png", | ||
"type": "image/png", | ||
"sizes": "512x512" | ||
} | ||
], | ||
"start_url": ".", | ||
"display": "standalone", | ||
"theme_color": "#000000", | ||
"background_color": "#ffffff" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
# https://www.robotstxt.org/robotstxt.html | ||
User-agent: * | ||
Disallow: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
.App { | ||
text-align: center; | ||
} | ||
|
||
.App-logo { | ||
height: 40vmin; | ||
pointer-events: none; | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
.App-logo { | ||
animation: App-logo-spin infinite 20s linear; | ||
} | ||
} | ||
|
||
.App-header { | ||
background-color: #282c34; | ||
min-height: 100vh; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
font-size: calc(10px + 2vmin); | ||
color: white; | ||
} | ||
|
||
.App-link { | ||
color: #61dafb; | ||
} | ||
|
||
@keyframes App-logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
} |
Oops, something went wrong.
3d10325
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
theatre-playground – ./
theatre-playground.vercel.app
theatre-playground-theatrejs.vercel.app
theatre-playground-git-main-theatrejs.vercel.app