@jscutlery/swc-angular 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/README.md +114 -14
- package/index.cjs.js +1 -1
- package/index.esm.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,11 +1,34 @@
|
|
|
1
1
|
# ⚡️ Speed Up Angular Testing with SWC 🦀
|
|
2
2
|
|
|
3
|
+
<!-- TOC -->
|
|
4
|
+
|
|
5
|
+
* [⚡️ Speed Up Angular Testing with SWC 🦀](#-speed-up-angular-testing-with-swc-)
|
|
6
|
+
* [👀 What is this?](#-what-is-this)
|
|
7
|
+
* [🤔 Context](#-context)
|
|
8
|
+
* [🥇 Benchmark Summary](#-benchmark-summary)
|
|
9
|
+
* [🎭 Setup with Jest](#-setup-with-jest)
|
|
10
|
+
* [1. Install](#1-install)
|
|
11
|
+
* [2. Configure](#2-configure)
|
|
12
|
+
* [3. Add `reflect-metadata`](#3-add-reflect-metadata)
|
|
13
|
+
* [⚡️Setup with Vitest](#setup-with-vitest)
|
|
14
|
+
* [1. Install](#1-install-1)
|
|
15
|
+
* [2. Configure](#2-configure-1)
|
|
16
|
+
* [3. Add `reflect-metadata`](#3-add-reflect-metadata-1)
|
|
17
|
+
* [🥇 Benchmark Data](#-benchmark-data)
|
|
18
|
+
* [🔥 No Cache](#-no-cache)
|
|
19
|
+
* [⚡️ With Cache](#-with-cache)
|
|
20
|
+
* [🥱 Cold Start](#-cold-start)
|
|
21
|
+
* [Configurations](#configurations)
|
|
22
|
+
* [Source](#source)
|
|
23
|
+
|
|
24
|
+
<!-- TOC -->
|
|
25
|
+
|
|
3
26
|
## 👀 What is this?
|
|
4
27
|
|
|
5
28
|
This is a set of Angular presets that enable you to use [SWC (Speedy Web Compiler)](https://swc.rs/) with Jest or
|
|
6
29
|
Vitest.
|
|
7
30
|
|
|
8
|
-
**Switching to SWC can speed up your tests by 2x to
|
|
31
|
+
**Switching to SWC can speed up your tests by 2x to 12x.**
|
|
9
32
|
|
|
10
33
|
## 🤔 Context
|
|
11
34
|
|
|
@@ -18,13 +41,16 @@ fast.
|
|
|
18
41
|
This package enables you to use SWC with Angular projects by setting the right configuration for SWC and using
|
|
19
42
|
our Angular plugin for SWC [`@jscutlery/swc-angular-plugin`](../swc-angular-plugin)
|
|
20
43
|
|
|
21
|
-
## 🥇 Benchmark
|
|
44
|
+
## 🥇 Benchmark Summary
|
|
22
45
|
|
|
23
|
-
|
|
24
|
-
|---------|---------------------|
|
|
25
|
-
| 85s | 35s _(2.4x faster)_ |
|
|
46
|
+
|
|
26
47
|
|
|
27
|
-
|
|
48
|
+
_This chart is based on the [benchmark where all caches were disabled](#-no-cache) as in most cases we will still have
|
|
49
|
+
to transform the code that we changed and which is affecting our tests._
|
|
50
|
+
_In addition to that, incremental build tools like [Nx](https://nx.dev) (or jest/vitest `changedSince`/`changed`
|
|
51
|
+
options) will reduce the amount of transforms._
|
|
52
|
+
|
|
53
|
+
_Cf. [Detailed Benchmark Data](#-no-cache)_
|
|
28
54
|
|
|
29
55
|
## 🎭 Setup with Jest
|
|
30
56
|
|
|
@@ -49,14 +75,13 @@ export default {
|
|
|
49
75
|
// ...
|
|
50
76
|
transform: {
|
|
51
77
|
'^.+\\.(ts|mjs|js)$': swcAngularJestTransformer(),
|
|
52
|
-
'^.+\\.(html)$':
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
],
|
|
78
|
+
'^.+\\.(html)$': [
|
|
79
|
+
'jest-preset-angular',
|
|
80
|
+
{
|
|
81
|
+
tsconfig: '<rootDir>/tsconfig.spec.json',
|
|
82
|
+
stringifyContentPathRegex: '\\.(html|svg)$',
|
|
83
|
+
},
|
|
84
|
+
],
|
|
60
85
|
},
|
|
61
86
|
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
|
|
62
87
|
// ...
|
|
@@ -108,3 +133,78 @@ located at `src/test-setup.ts`.
|
|
|
108
133
|
```ts
|
|
109
134
|
import 'reflect-metadata';
|
|
110
135
|
```
|
|
136
|
+
|
|
137
|
+
## 🥇 Benchmark Data
|
|
138
|
+
|
|
139
|
+
### 🔥 No Cache
|
|
140
|
+
|
|
141
|
+
All caches are cleared before each benchmark run.
|
|
142
|
+
|
|
143
|
+
| Configuration | Relative | Mean [s] | Min [s] | Max [s] |
|
|
144
|
+
|:------------------------------|-------------:|---------------:|--------:|--------:|
|
|
145
|
+
| 🥇`vitest-swc-no-isolate` | 1.00 | 3.137 ± 0.061 | 3.042 | 3.227 |
|
|
146
|
+
| 🥈`jest-swc` | 3.31 ± 0.15 | 10.393 ± 0.429 | 9.745 | 10.994 |
|
|
147
|
+
| 🥉`angular-cli-karma` | 3.52 ± 0.53 | 11.041 ± 1.642 | 10.218 | 15.690 |
|
|
148
|
+
| `angular-cli-web-test-runner` | 5.46 ± 0.45 | 17.118 ± 1.362 | 16.473 | 20.911 |
|
|
149
|
+
| `jest` | 5.78 ± 0.25 | 18.132 ± 0.716 | 17.553 | 19.998 |
|
|
150
|
+
| `angular-cli-jest` | 8.61 ± 0.63 | 27.009 ± 1.902 | 24.938 | 30.450 |
|
|
151
|
+
| `vitest-swc` | 8.94 ± 0.21 | 28.038 ± 0.402 | 27.539 | 28.617 |
|
|
152
|
+
| `vitest` | 11.43 ± 0.32 | 35.872 ± 0.727 | 34.452 | 37.340 |
|
|
153
|
+
| `vitest-no-isolate` | 11.49 ± 0.25 | 36.061 ± 0.369 | 35.414 | 36.502 |
|
|
154
|
+
|
|
155
|
+
### ⚡️ With Cache
|
|
156
|
+
|
|
157
|
+
All tests are ran once to warm up the cache before running the benchmark.
|
|
158
|
+
|
|
159
|
+
| Configuration | Relative | Mean [s] | Min [s] | Max [s] |
|
|
160
|
+
|:------------------------------|-------------:|---------------:|--------:|--------:|
|
|
161
|
+
| 🥇`vitest-swc-no-isolate` | 1.00 | 3.092 ± 0.090 | 3.030 | 3.301 |
|
|
162
|
+
| 🥈`angular-cli-karma` | 1.91 ± 0.07 | 5.901 ± 0.139 | 5.718 | 6.131 |
|
|
163
|
+
| 🥉`jest-swc` | 2.93 ± 0.18 | 9.045 ± 0.494 | 8.513 | 10.065 |
|
|
164
|
+
| `jest` | 4.07 ± 0.25 | 12.581 ± 0.663 | 11.572 | 13.915 |
|
|
165
|
+
| `angular-cli-web-test-runner` | 5.96 ± 0.29 | 18.428 ± 0.711 | 17.497 | 19.262 |
|
|
166
|
+
| `angular-cli-jest` | 8.46 ± 1.04 | 26.170 ± 3.117 | 23.350 | 31.983 |
|
|
167
|
+
| `vitest-swc` | 9.28 ± 0.36 | 28.691 ± 0.728 | 27.977 | 30.488 |
|
|
168
|
+
| `vitest-no-isolate` | 11.74 ± 0.45 | 36.286 ± 0.880 | 35.107 | 38.018 |
|
|
169
|
+
| `vitest` | 12.18 ± 0.63 | 37.666 ± 1.625 | 35.563 | 41.503 |
|
|
170
|
+
|
|
171
|
+
- _Note that, as of
|
|
172
|
+
today, [vitest doesn't cache transformed files](https://vitest.dev/config/#cache:~:text=At%20the%20moment%20Vitest%20stores%20cache%20for%20test%20results%20to%20run%20the%20longer%20and%20failed%20tests%20first)._
|
|
173
|
+
|
|
174
|
+
### 🥱 Cold Start
|
|
175
|
+
|
|
176
|
+
Run a single test module just and try to measure the bootstrap time.
|
|
177
|
+
|
|
178
|
+
| Configuration | Relative | Mean [s] | Min [s] | Max [s] |
|
|
179
|
+
|:------------------------------|------------:|--------------:|--------:|--------:|
|
|
180
|
+
| 🥇`vitest-swc-no-isolate` | 1.00 | 1.260 ± 0.024 | 1.241 | 1.314 |
|
|
181
|
+
| 🥈`vitest-swc` | 1.00 ± 0.03 | 1.262 ± 0.026 | 1.225 | 1.305 |
|
|
182
|
+
| 🥉`jest-swc` | 1.44 ± 0.15 | 1.812 ± 0.186 | 1.714 | 2.310 |
|
|
183
|
+
| `vitest-no-isolate` | 1.47 ± 0.05 | 1.846 ± 0.056 | 1.797 | 1.949 |
|
|
184
|
+
| `vitest` | 1.61 ± 0.16 | 2.030 ± 0.198 | 1.814 | 2.423 |
|
|
185
|
+
| `jest` | 1.69 ± 0.08 | 2.136 ± 0.094 | 2.017 | 2.356 |
|
|
186
|
+
| `angular-cli-jest` | 1.73 ± 0.39 | 2.186 ± 0.495 | 1.869 | 3.119 |
|
|
187
|
+
| `angular-cli-web-test-runner` | 2.06 ± 1.15 | 2.602 ± 1.451 | 2.080 | 6.730 |
|
|
188
|
+
| `angular-cli-karma` | 5.08 ± 1.30 | 6.400 ± 1.636 | 5.377 | 10.177 |
|
|
189
|
+
|
|
190
|
+
### Configurations
|
|
191
|
+
|
|
192
|
+
| | Configuration | Test Isolation\* |
|
|
193
|
+
|-------------------------------|:-------------------------------|-----------------:|
|
|
194
|
+
| `angular-cli-karma` | Angular CLI's Karma | false |
|
|
195
|
+
| `angular-cli-jest` | Angular CLI's Jest | true |
|
|
196
|
+
| `angular-cli-web-test-runner` | Angular CLI's @web/test-runner | true |
|
|
197
|
+
| `jest` | Jest | true |
|
|
198
|
+
| `jest-swc` | Jest + SWC | true |
|
|
199
|
+
| `vitest` | Vitest | true |
|
|
200
|
+
| `vitest-no-isolate` | Vitest + No Isolation | false |
|
|
201
|
+
| `vitest-swc` | Vitest + SWC | true |
|
|
202
|
+
| `vitest-swc-no-isolate` | Vitest + SWC + No Isolation | false |
|
|
203
|
+
|
|
204
|
+
- _Test Isolation: this tells whether each test module has its own testing environment or if each one is isolated. (i.e.
|
|
205
|
+
globals like the DOM are shared, asynchronous code might bleed between tests, etc...)_
|
|
206
|
+
|
|
207
|
+
### Source
|
|
208
|
+
|
|
209
|
+
💻 try it yourself: https://github.com/yjaaidi/experiments/tree/angular-jest-swc-benchmark
|
|
210
|
+
or checkout the last benchmark results: https://github.com/yjaaidi/experiments/actions/workflows/benchmark.yml
|
package/index.cjs.js
CHANGED
|
@@ -74,7 +74,7 @@ function swcAngularUnpluginOptions() {
|
|
|
74
74
|
*/ var index = swcAngularPreset();
|
|
75
75
|
function assertCompatibleSwcCoreVersion() {
|
|
76
76
|
if (!core.version.startsWith('1.4.')) {
|
|
77
|
-
console.
|
|
77
|
+
console.error(`
|
|
78
78
|
@swc/core version ${core.version} is incompatible with @jscutlery/swc-angular.
|
|
79
79
|
Please use @swc/core version 1.4.x.
|
|
80
80
|
> npm add -D @swc/core@~1.4.0
|
package/index.esm.js
CHANGED
|
@@ -70,7 +70,7 @@ function swcAngularUnpluginOptions() {
|
|
|
70
70
|
*/ var index = swcAngularPreset();
|
|
71
71
|
function assertCompatibleSwcCoreVersion() {
|
|
72
72
|
if (!version.startsWith('1.4.')) {
|
|
73
|
-
console.
|
|
73
|
+
console.error(`
|
|
74
74
|
@swc/core version ${version} is incompatible with @jscutlery/swc-angular.
|
|
75
75
|
Please use @swc/core version 1.4.x.
|
|
76
76
|
> npm add -D @swc/core@~1.4.0
|