Thanks for your interest to contribute to Ladle. Please take a moment and read through this guide:
Ladle is a monorepo using pnpm workspaces. The package manager used to install and link dependencies must be pnpm v9. It can be installed as:
npm install -g pnpm@9
Install the dependencies after forking and cloning the repository
pnpm install
Install playwright
dependencies used in testing
pnpm exec playwright install
NOTE: this project has a VS Code Devcontainer configuration which enables development in a Docker container, as well as on GitHub Codespaces. This is a great option if you want to contribute to the project, but don't necessarily want to install this project's toolset and dependencies globally on your computer.
The main @ladle/react
package can be found in packages/ladle
. You can quickly test and debug your changes in @ladle/react
by running packages/example
(it's a toy project so feel free to add more stories there):
cd packages/example
pnpm ladle serve
pnpm ladle build
Before creating a PR you should make sure all tests are still passing:
# root
pnpm typecheck
pnpm lint
# root or individual packages
pnpm build
pnpm test
There are unit tests and end-to-end tests powered by Playwright in e2e/
folder. If you are adding a new feature, you will be almost always asked to add a new e2e test. You can add it to one of the existing suites / test applications or create new one.
NOTE When you want to debug by launching a browser in E2E testing, you can move to the
e2e/{ANY_FOLDER}
and usepnpm run test-dev --headed
. You can also run a specific test only by usingtest.only
.-test("a11y addon works", async ({ page }) => { +test.only("a11y addon works", async ({ page }) => {
If applicable, your changes should be also documented on ladle.dev. The doc site can be started as:
cd packages/website
pnpm start
Ladle uses changesets to manage the changelog and releases. If you are changing @ladle/react
you need to add a changeset (or you will be prompted in your PR):
pnpm changeset
You will be asked to select the scope (pick @ladle/react
) and version (patch, minor, major). Then you should describe it:
- WHAT the change is
- WHY the change was made
- HOW a consumer should update their code (if applicable)
This will create an .changeset/*.md
file that gets merged with your PR and attached to the release by admins later.
You can create a new package in packages
or e2e
(playwright apps+tests). It needs to be added to:
package.json#workspaces
pnpm-workspace.yaml#packages