Thank you for taking an interest in contributing to Qwik! We appreciate you! 🫶🏽
Below are the guidelines on how to help in the best possible way.
Before creating a new issue, please search through open issues using the GitHub issue search bar. You might find the solution to your problem, or can verify that it is an already known issue.
We want a bug-free and best-performing project. That's why we take all reported issues to heart. But please be aware that if we can't reproduce the problem, we won't have a way of locating and adequately fixing it.
Therefore, to solve the problem in the best possible way, please create a minimal repository that reproduces the problem with the least possible code explaining and demonstrating the error.
Without enough information to reproduce the issue, we will close it because we can't recreate and solve it.
We adopt trunk-based development therefore all Pull Requests are made against the main branch because we do not use separate branches for development or for the versions we release.
The issues marked with Good first issue are a good starting point to familiarize yourself with the project.
Before solving the problem, please check with the maintainers that the issue is still relevant. Feel free to leave a comment on the issue to show your intention to work on it and prevent other people from unintentionally duplicating your effort.
Before submitting a pull request, consider the following guidelines:
- Fork the repository into your own account.
- In your forked repository, create a new branch:
git checkout -b my-branch main
- Make your changes/fixes.
- Run
pnpm fmt
to lint the code. - Commit your code with a good commit message using "Commitizen".
- Push your branch to GitHub:
git push origin my-branch
- In GitHub, send a pull request to
BuilderIO:main
.
If you aren't sure your PR is ready, open it as a draft to make it clear to the maintainer.
Every PR is being automatically merged with main
before the CI Github actions run.
That's why if the CI checks aren't passing your PR branch is probably not up to date.
For non documentation PRs please do the following:
- Merge
main
into your PR branch - Run
pnpm api.update
- Run
pnpm build.full
- Commit and push any changes as a result of the above steps
This is the best approach because all required dependencies will be installed in the docker container for you and won't affect your personal configuration in any way.
You need to have these tools up and running in your local machine:
- Install the Dev Containers extension in your VSCode.
- Once installed you will be prompted to 'Reopen the folder to develop in a container learn more or Clone repository in Docker volume for better I/O performance'. If you're not prompted, you can run the
Dev Containers: Open Folder in Container
command from the VSCode Command Palette.
If you would like to make use of the devlopment container solution, but don't use VSCode or Dev Containers, you still can do so, by following steps:
- Build development container locally:
cd .devcontainers; docker build -t qwik-container .
- Run development container from Qwik project root, binding the directory to container:
cd ..; docker run --rm -d --name qwik-container -p 3300:3300 -p 9229:9299 -v $PWD:/home/circleci/project -t qwik-container
Docker command does:
- Create a new container that is removed once stopped,
- In daemon mode,
- With name
qwik-container
, - That exposes the ports
3300
and9229
, and - Binds
qwik
project directory to container working directory.
This section is highly influenced by SO answer: https://serverfault.com/a/1075838/352338 If you use Podman instead of Docker as your containers engine, then you need to know the following:
- Container runs as user
circleci
with UID1001
and GID1002
. - As you are accustomed to using Podman, you will need to append
:Z
tovolumes | -v
parameter so the command becomes:
$ subuid_size=65536
$ subgid_size=65536
$ container_uid=1001
$ container_gid=1002
$ podman run --rm \
--user $container_uid:$container_gid \
--uidmap=0:1:$container_uid \
--uidmap=$((container_uid + 1)):$((container_uid + 1)):$((subuid_size - $container_uid)) \
--uidmap=$container_uid:0:1 \
--gidmap=0:1:$container_gid \
--gidmap=$((container_gid + 1)):$((container_gid + 1)):$((subgid_size - $container_gid)) \
--gidmap=$container_gid:0:1 \
-d --name qwik-container \
-p 3300:3300 -p 9229:9299 \
-v .:/home/circleci/project:Z \
-t qwik-container
If you're not able to use the dev container, follow these instructions:
These are for a full build that includes Rust binaries.
- Make sure Rust is installed.
- Install wasm-pack with
cargo install wasm-pack
. - Node version >=
16.8.0
. - Make sure you have pnpm installed.
- run
pnpm install
On Windows, Rust requires C++ build tools. You can also select Desktop development with C++ while installing Visual Studio.
Alternatively, if Rust is not available you can run
pnpm build.platform.copy
to download bindings from CDN
To build Qwik for local development, install the dev dependencies using pnpm:
pnpm install
It will build all JS and all packages, but not Rust.
pnpm build
It will build everything, including Rust packages and WASM.
First build might be very slow.
- Builds each submodule
- Generates bundled
.d.ts
files for each submodule with API Extractor - Checks the public API hasn't changed
- Builds a minified
core.min.mjs
file - Generates the publishing
package.json
pnpm build.full
The build output will be written to packages/qwik/dist
, which will be the directory that is published to @builder.io/qwik.
Say you made changes to the repo. After you finished you'd need to run the build command (pnpm build.full
/pnpm build
).
To use your build in your project, follow these steps:
-
Inside the root of the
qwik
project run:pnpm link.dist
-
Inside the root of your project run:
npm install npm link @builder.io/qwik @builder.io/qwik-city
or
pnpm install pnpm link --global @builder.io/qwik @builder.io/qwik-city
If you can't use package linking (npm link) just copy the contents of package/qwik/dist
into your projects' node_modules/@builder.io/qwik
folder.
-
Go to
packages/docs/package.json
and update:-- "@builder.io/qwik": "0.17.4", -- "@builder.io/qwik-city": "0.1.0-beta13", ++ "@builder.io/qwik": "workspace:*", ++ "@builder.io/qwik-city": "workspace:*",
-
At the root of the Qwik repo folder run:
pnpm install
- Run the docs site:
cd packages/docs && pnpm start
pnpm serve
Unit tests use uvu
pnpm test.unit
To keep uvu open with the watch mode, run:
pnpm test.watch
Note that the
test.watch
command isn't necessary if you're running thepnpm start
command, sincestart
will also concurrently run the uvu watch process.
E2E tests use Playwright.
To run the Playwright tests headless, from start to finish, run:
pnpm test.e2e.chromium
Finally, you can use pnpm --filter
command to run packages' commands, for example:
pnpm --filter qwik-docs start
More commands can be found in each package's package.json scripts section.
- Open Qwik in StackBlitz Codeflow
- Review PR in StackBlitz
Instead of using git commit
please use the following command:
pnpm commit
You'll be asked guiding questions which will eventually create a descriptive commit message and necessary to generate meaningful release notes / CHANGELOG automatically.
The project has pre-submit hooks, which ensure that your code is correctly formatted. You can run them manually like so:
pnpm lint
Some issues can be fixed automatically by using:
pnpm fmt
- Run
pnpm release.prepare
, which will test, lint and build. - Use the interactive UI to select the next version, which will update the
package.json
version
property, add the git change, and start a commit message. - Create a PR with the
package.json
change to merge tomain
. - After the
package.json
with the updated version is inmain
, click the Run Workflow button from the "Qwik CI" GitHub Action workflow. - Select the NPM dist-tag that should be used for this version, then click "Run Workflow".
- The GitHub Action will dispatch the workflow to build
@builder.io/qwik
,@builder.io/qwik-city
and each of their submodules, build WASM and native bindings, and validate the package before publishing to NPM. - If the build is successful and all tests and validation passes, the workflow will automatically publish to NPM, commit a git tag to the repo, and create a GitHub release.
- ⚡️