|
1 | 1 | # DEVELOPER |
2 | 2 |
|
3 | | -# Setting up the environment |
| 3 | +To build Qwik for local development, first [npm](https://docs.npmjs.com/) (or [yarn](https://yarnpkg.com/)) install the dev dependencies: |
4 | 4 |
|
5 | | -## Setting up the environment |
| 5 | +``` |
| 6 | +npm install |
| 7 | +``` |
6 | 8 |
|
7 | | -> NOTE: This repo is currently in the transition to the `bazel` build system. Only `bazel` developer information is documented here. |
| 9 | +Next the `start` command will: |
8 | 10 |
|
9 | | -The repo uses `bazel` for building. Best way to run `bazel` is with [`bazelisk`](https://github.com/bazelbuild/bazelisk) which will automatically download and execute the right version of `bazel`. |
| 11 | +- Build the source files |
| 12 | +- Begin the watch process so any changes will rebuild |
| 13 | +- Run the type checking watch process with [tsc](https://www.typescriptlang.org/docs/handbook/compiler-options.html) |
| 14 | +- Run the unit test (Jest) watch process |
10 | 15 |
|
11 | | -_preferred way_ |
| 16 | +``` |
| 17 | +npm start |
| 18 | +``` |
| 19 | + |
| 20 | +## Running Dev Server Integration Tests |
| 21 | + |
| 22 | +The `integration/` directory is for this local repo's end-to-end and integration testing (and not necessarily app demos). Its dev server is setup to always point to the local build and stay current with the watch process. |
| 23 | + |
| 24 | +First start the integration dev server, which will also ensure a build was completed: |
12 | 25 |
|
13 | 26 | ``` |
14 | | -brew install bazelisk |
| 27 | +npm run integration.server |
15 | 28 | ``` |
16 | 29 |
|
17 | | -or |
| 30 | +Then navigate to http://localhost:8080/ |
| 31 | + |
| 32 | +The `npm run integration.server` comands runs the server in `development` mode, where files are not minified, source maps are inlined, and there's additional logging. To run code minified with external source maps and without extra logs, run `npm run integration.server.prod`, which is what the end-to-end tests use. |
| 33 | + |
| 34 | +## Running All Tests |
| 35 | + |
| 36 | +To run all Unit tests ([Jest](https://jestjs.io/)) and E2E/Integration tests ([Cypress](https://www.cypress.io/)), run: |
18 | 37 |
|
19 | 38 | ``` |
20 | | -npm install -g @bazel/bazelisk |
| 39 | +npm test |
21 | 40 | ``` |
22 | 41 |
|
23 | | -`Bazel` will invoke `Yarn` and manage all dependencies. |
| 42 | +The `test` command will also ensure a build was completed. |
24 | 43 |
|
25 | | -## `bazel` vs `ibazel` |
| 44 | +### Unit Tests Only |
26 | 45 |
|
27 | | -The difference between `bazel` and `ibazel` is that `ibazel` will re-invoke `bazel` if any relevant files change. This is useful for constantly updating the server and or tests as they are being developed. All commands are listed as `bazel`, but can be replaced for `ibazel` as needed. |
| 46 | +Unit tests use [Jest](https://jestjs.io/). |
28 | 47 |
|
29 | | -# Running demos (`integration`) |
| 48 | +``` |
| 49 | +npm run test.unit |
| 50 | +``` |
| 51 | + |
| 52 | +To keep Jest open with the watch mode, run: |
30 | 53 |
|
31 | 54 | ``` |
32 | | -bazel run integration:server |
| 55 | +npm run test.watch |
33 | 56 | ``` |
34 | 57 |
|
35 | | -Then open: |
| 58 | +> Note that the `test.watch` command isn't necessary if you're running the `npm start` command, since `start` will also concurrently run the Jest watch process. |
| 59 | +
|
| 60 | +To debug and step through unit tests, within VSCode you can use the "Integration Dev Server" Debug launch task. |
36 | 61 |
|
37 | | -- http://localhost:8080/ |
| 62 | +### E2E Tests Only |
38 | 63 |
|
39 | | -## Running Tests |
| 64 | +E2E and Integration tests use [Cypress](https://www.cypress.io/). |
40 | 65 |
|
41 | | -All tests: |
| 66 | +To run the Cypress tests headless, from start to finish, run: |
42 | 67 |
|
43 | 68 | ``` |
44 | | -bazel test //... |
| 69 | +npm run test.e2e |
45 | 70 | ``` |
46 | 71 |
|
47 | | -### Unit tests only |
| 72 | +To open Cypress in interactive mode and control through a browser, run: |
48 | 73 |
|
49 | 74 | ``` |
50 | | -bazel test --test_tag_filters=unit //... |
| 75 | +npm run test.e2e.open |
51 | 76 | ``` |
52 | 77 |
|
53 | | -### E2e tests only |
| 78 | +## Production Build |
54 | 79 |
|
55 | | -Before running the e2e tests, ensure that the `integration` server is running. (`bazel run integration:server`) |
| 80 | +The `npm start` command will run development builds, type check, watch unit tests, and watch the files for changes. |
| 81 | + |
| 82 | +A full production build will: |
| 83 | + |
| 84 | +- Builds each submodule |
| 85 | +- Generates bundled `.d.ts` files for each submodule with [API Extractor](https://api-extractor.com/) |
| 86 | +- Checks the public API hasn't changed |
| 87 | +- Builds a minified `core.min.mjs` file |
| 88 | +- Generates the publishing `package.json` |
56 | 89 |
|
57 | 90 | ``` |
58 | | -bazel test --test_tag_filters=e2e //... |
| 91 | +npm run build |
59 | 92 | ``` |
60 | 93 |
|
61 | | -Running cypress manually |
| 94 | +The build output will be written to `dist-dev/@builder.io-qwik`, which will be the directory that is published |
| 95 | +to [@builder.io/qwik](https://www.npmjs.com/package/@builder.io/qwik). |
| 96 | + |
| 97 | +## Publishing |
| 98 | + |
| 99 | +1. Run `npm run release` |
| 100 | +2. Use the [interactive UI](https://www.npmjs.com/package/np) to select the version/tag. |
| 101 | +3. The selected version number will become the commit message. |
| 102 | +4. After publishing it'll open a prefilled GitHub Releases draft. |
| 103 | +5. 🚀 |
| 104 | + |
| 105 | +## Bazel |
| 106 | + |
| 107 | +Bazel is currently used for further testing and builds between internal repos. However, it is not required for local development and contribution to Qwik. |
| 108 | + |
| 109 | +### Setting up the Bazel environment |
| 110 | + |
| 111 | +Best way to run `bazel` is with [`bazelisk`](https://github.com/bazelbuild/bazelisk) which will automatically download and execute the right version of `bazel`. |
| 112 | + |
| 113 | +_preferred way_ |
62 | 114 |
|
63 | 115 | ``` |
64 | | -./node_modules/.bin/cypress open |
| 116 | +brew install bazelisk |
65 | 117 | ``` |
66 | 118 |
|
67 | | -## Publishing |
| 119 | +or |
68 | 120 |
|
69 | 121 | ``` |
70 | | -git fetch upstream |
71 | | -git checkout main |
72 | | -git reset --hard upstream/main |
73 | | -# edit src/package.json wtih new version number |
74 | | -VERSION=`node -e 'console.log(require("./src/package.json").version)'` |
75 | | -echo "About to publish v$VERSION" |
76 | | -bazel run src:pkg.publish -- --tag=latest --access=public |
77 | | -git commit -a -m "release: v$VERSION" |
78 | | -git tag v$VERSION |
79 | | -git push upstream main:main v$VERSION |
| 122 | +npm install -g @bazel/bazelisk |
80 | 123 | ``` |
81 | 124 |
|
| 125 | +`Bazel` will invoke `Yarn` and manage all dependencies. |
| 126 | + |
| 127 | +### `bazel` vs `ibazel` |
| 128 | + |
| 129 | +The difference between `bazel` and `ibazel` is that `ibazel` will re-invoke `bazel` if any relevant files change. This is useful for constantly updating the server and or tests as they are being developed. All commands are listed as `bazel`, but can be replaced for `ibazel` as needed. |
| 130 | + |
82 | 131 | ## Pre-submit hooks |
83 | 132 |
|
84 | 133 | The project has pre-submit hooks, which ensure that your code is correctly formatted. You can run them manually like so: |
|
0 commit comments