2021-06-21 14:06:23 +02:00
# Contributing to Theatre.js
2021-10-05 13:56:42 +02:00
## The quick version
Have `node 14+` and `yarn 1.22+` installed. Then `git clone` and `yarn install` . Then `cd packages/playground` and `yarn run serve` . Happy hacking!
## The long version
2021-06-21 14:06:23 +02:00
2021-10-02 00:25:03 +02:00
### Prerequisites
Make sure you have [Node ](https://nodejs.org/ ) installed at v14.0.0+
```sh
2021-10-05 13:56:42 +02:00
$ node -v
> v14.0.0
2021-10-02 00:25:03 +02:00
```
2021-10-05 13:56:42 +02:00
and [Yarn ](https://classic.yarnpkg.com/en/ ) at v1.22.10+.
2021-10-02 00:25:03 +02:00
```sh
2021-10-05 13:56:42 +02:00
$ yarn -v
> 1.22.10
2021-10-02 00:25:03 +02:00
```
2021-10-05 13:56:42 +02:00
> **Note about Yarn v2**: This repo uses Yarn v2. You don't have to install yarn v2 globally. If you do have yarn 1.22.10+ installed, and `cd` into `/path/to/theatre`, yarn will automatically switch to v2. Read more about Yarn v2 [here](https://yarnpkg.com/).
2021-10-02 00:25:03 +02:00
### Fork, Clone & Install
2021-10-05 13:56:42 +02:00
Start by forking Theatre.js to your GitHub account. Then clone your fork and install dependencies:
2021-10-02 00:25:03 +02:00
```sh
2021-10-05 13:56:42 +02:00
$ git clone git@github.com:< your-user > /theatre.git
$ cd theatre
$ yarn
2021-10-02 00:25:03 +02:00
```
> ⚠ theatre relies on
2021-10-05 13:56:42 +02:00
> [yarn workspaces](https://yarnpkg.com/features/workspaces) so
2021-10-02 00:25:03 +02:00
> `npm install` will not work in this repository.
Add our repo as a git remote so you can pull/rebase your fork with our latest
updates:
2021-10-05 13:56:42 +02:00
```sh
$ git remote add upstream git@github.com:AriaMinaei/theatre.git
2021-10-02 00:25:03 +02:00
```
2021-10-05 13:56:42 +02:00
## Start hacking with `playground`
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
The quickest way to start tweaking things is to run the `playground` package.
```sh
$ cd ./packages/playground
$ yarn serve
```
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
The playground is a bunch of ready-made projects that you can run to experiment with Theatre.js.
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
It uses a single ESBuild config to build all of the related packages in one go, so you don't have to run a bunch of build commands.
2021-10-02 00:42:34 +02:00
2021-10-05 13:56:42 +02:00
Read more at [`./packages/playground/README.md` ](./packages/playground/README.md ).
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
## Project structure
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
* `@theatre/core` – The core animation library.
* Location: [`./theatre/core` ](./theatre/core )
* `@theatre/studio` – The visual editor.
* Location: [`./theatre/studio` ](./theatre/studio )
* `@theatre/dataverse` – The reactive dataflow library.
* Location: [`./packagtes/dataverse` ](./packages/dataverse )
* `@theatre/react` – Utilities for using Theatre with React.
* Location: [`./packagtes/react` ](./packages/react )
* `@theatre/r3f` – The react-three-fiber extension.
* Location: [`./packagtes/r3f` ](./packages/r3f )
* `playground` – The quickest way to hack on the internals of Theatre. It bundles all the related packages together with one ESBuild setup.
* Location: [`./packagtes/playground` ](./packages/playground )
* `examples/`
* A bunch of examples, using Theatre with [parcel ](https://parceljs.org ) or [Create react app ](create-react-app.dev ).
2021-10-02 00:42:34 +02:00
2021-10-02 00:25:03 +02:00
### Commands
#### Root commands
```sh
2021-10-05 13:56:42 +02:00
# Run the playground. It's a shortcut for `cd ./playground; yarn run serve`
yarn playground
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
# Run all the tests.
yarn test
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
# Run tests in watch mode.
yarn test --watch
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
# Typecheck all the packages
yarn typecheck
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
# Run eslint on the repo
yarn lint:all
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
# Run eslint and auto fix
yarn lint:all --fix
```
2021-10-02 00:25:03 +02:00
2021-10-05 13:56:42 +02:00
> Yarn passes all extra parameters to the internal scripts. So, for example, if you wish to run the tests in watch more, you can run `yarn test --watch`.
2021-10-02 00:25:03 +02:00
## Workflow
> This section is lacking in instructions (PRs welcome!).
1. Find (or create) an issue you would like to look at
2. Implement the changes & test it against
3. Run the tests to ensure that nothing has been broken
4. Create a PR & reference the issue 🎉
If you have any questions or issues along the way, drop a message in the
[discord community ](https://discord.gg/bm9f8F9Y9N ) and maybe someone can help!
## Documentation
> This section is lacking in instructions (PRs welcome!).
2021-10-05 13:56:42 +02:00
The libraries come bundled with typescript definitions with TSDoc comments. You can explore the API if your editor is configured to display TSDoc comments.
2021-10-02 00:25:03 +02:00
Other references
- [Documentation: https://docs.theatrejs.com ](https://docs.theatrejs.com/getting-started/ )
- [Video: Theatre.js Crash Course ](https://www.youtube.com/watch?v=icR9EIS1q34 )
## Testing
2021-10-05 13:56:42 +02:00
Run tests during development with `yarn test --watch` to re-run tests on file changes.
2021-10-02 00:25:03 +02:00
### Examples
> This section is lacking in instructions (PRs welcome!).
## Releasing
> This section is lacking in instructions (PRs welcome!).