@jscutlery/swc-angular 0.12.0 → 0.13.1

package/CHANGELOG.md

@@ -1,60 +1,63 @@
-## 0.12.0 (2024-04-12)
+## 0.13.1 (2024-05-03)
 
 
-### 🚀 Features
+### 🩹 Fixes
 
-- **swc-angular:** ✨ rename swc-angular packages ([#324](https://github.com/jscutlery/devkit/pull/324))
+- **swc-angular:** 🐞 fix stackblitz support ([#364](https://github.com/jscutlery/devkit/pull/364))
 
 
 ### ❤️  Thank You
 
 - Younes Jaaidi
 
-## 0.3.0 (2024-04-11)
-
+## 0.12.0 (2024-04-12)
 
 ### 🚀 Features
 
-- **swc-angular-preset:** ✨ fail gracefully if @swc/core is incompatible ([#322](https://github.com/jscutlery/devkit/pull/322))
+- **swc-angular:** ✨ rename swc-angular packages ([#324](https://github.com/jscutlery/devkit/pull/324))
+
+### ❤️ Thank You
 
+- Younes Jaaidi
 
-### ❤️  Thank You
+## 0.3.0 (2024-04-11)
+
+### 🚀 Features
+
+- **swc-angular-preset:** ✨ fail gracefully if @swc/core is
+  incompatible ([#322](https://github.com/jscutlery/devkit/pull/322))
+
+### ❤️ Thank You
 
 - Younes Jaaidi
 
 ## 0.2.2 (2024-04-09)
 
-
 ### 🩹 Fixes
 
 - **swc-angular-preset:** 🐞 fix jest preset typing ([9c6de1c](https://github.com/jscutlery/devkit/commit/9c6de1c))
 
-
-### ❤️  Thank You
+### ❤️ Thank You
 
 - Younes Jaaidi
 
 ## 0.2.1 (2024-04-08)
 
-
 ### 🩹 Fixes
 
 - **swc-plugin-angular:** 🐞 transform async/await ([#313](https://github.com/jscutlery/devkit/pull/313))
 
-
-### ❤️  Thank You
+### ❤️ Thank You
 
 - Younes Jaaidi
 
 ## 0.2.0 (2024-04-04)
 
-
 ### 🚀 Features
 
 - **swc-angular-preset:** ✨ add vite support ([#307](https://github.com/jscutlery/devkit/pull/307))
 
-
-### ❤️  Thank You
+### ❤️ Thank You
 
 - Younes Jaaidi
 
@@ -64,28 +67,24 @@
 
 - **swc-angular-preset:** 🐞 publish dist artefact
 
-
 ## 0.1.1 (2024-03-29)
 
-
 ### 🩹 Fixes
 
-- **swc-angular-preset:** 🐞 allow recent versions of swc-plugin-angular ([c715414](https://github.com/jscutlery/devkit/commit/c715414))
-
+- **swc-angular-preset:** 🐞 allow recent versions of
+  swc-plugin-angular ([c715414](https://github.com/jscutlery/devkit/commit/c715414))
 
-### ❤️  Thank You
+### ❤️ Thank You
 
 - Edouard Bozon @edbzn
 - Younes Jaaidi
 
 ## 0.1.0 (2024-03-26)
 
-
 ### 🚀 Features
 
 - ✨ add swc-angular-preset and swc-plugin-angular ([#273](https://github.com/jscutlery/devkit/pull/273))
 
-
-### ❤️  Thank You
+### ❤️ Thank You
 
 - Edouard Bozon @edbzn

package/README.md

@@ -1,11 +1,34 @@
 # ⚡️ Speed Up Angular Testing with SWC 🦀
 
+<!-- TOC -->
+
+* [⚡️ Speed Up Angular Testing with SWC 🦀](#-speed-up-angular-testing-with-swc-)
+    * [👀 What is this?](#-what-is-this)
+    * [🤔 Context](#-context)
+    * [🥇 Benchmark Summary](#-benchmark-summary)
+    * [🎭 Setup with Jest](#-setup-with-jest)
+        * [1. Install](#1-install)
+        * [2. Configure](#2-configure)
+        * [3. Add `reflect-metadata`](#3-add-reflect-metadata)
+    * [⚡️Setup with Vitest](#setup-with-vitest)
+        * [1. Install](#1-install-1)
+        * [2. Configure](#2-configure-1)
+        * [3. Add `reflect-metadata`](#3-add-reflect-metadata-1)
+    * [🥇 Benchmark Data](#-benchmark-data)
+        * [🔥 No Cache](#-no-cache)
+        * [⚡️ With Cache](#-with-cache)
+        * [🥱 Cold Start](#-cold-start)
+        * [Configurations](#configurations)
+        * [Source](#source)
+
+<!-- TOC -->
+
 ## 👀 What is this?
 
 This is a set of Angular presets that enable you to use [SWC (Speedy Web Compiler)](https://swc.rs/) with Jest or
 Vitest.
 
-**Switching to SWC can speed up your tests by 2x to 5x.**
+**Switching to SWC can speed up your tests by 2x to 12x.**
 
 ## 🤔 Context
 
@@ -18,13 +41,16 @@ fast.
 This package enables you to use SWC with Angular projects by setting the right configuration for SWC and using
 our Angular plugin for SWC [`@jscutlery/swc-angular-plugin`](../swc-angular-plugin)
 
-## 🥇 Benchmark
+## 🥇 Benchmark Summary
 
-| ts-jest | @swc/jest           |
-|---------|---------------------|
-| 85s     | 35s _(2.4x faster)_ |
+![Benchmark](benchmark.svg)
 
-💻 try it yourself: https://github.com/yjaaidi/experiments/tree/angular-jest-swc-benchmark
+_This chart is based on the [benchmark where all caches were disabled](#-no-cache) as in most cases we will still have
+to transform the code that we changed and which is affecting our tests._
+_In addition to that, incremental build tools like [Nx](https://nx.dev) (or jest/vitest `changedSince`/`changed`
+options) will reduce the amount of transforms._
+
+_Cf. [Detailed Benchmark Data](#-no-cache)_
 
 ## 🎭 Setup with Jest
 
@@ -49,14 +75,13 @@ export default {
   // ...
   transform: {
     '^.+\\.(ts|mjs|js)$': swcAngularJestTransformer(),
-    '^.+\\.(html)$':
-      [
-        'jest-preset-angular',
-        {
-          tsconfig: '<rootDir>/tsconfig.spec.json',
-          stringifyContentPathRegex: '\\.(html|svg)$',
-        },
-      ],
+    '^.+\\.(html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
   },
   transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
   // ...
@@ -108,3 +133,78 @@ located at `src/test-setup.ts`.
 ```ts
 import 'reflect-metadata';
 ```
+
+## 🥇 Benchmark Data
+
+### 🔥 No Cache
+
+All caches are cleared before each benchmark run.
+
+| Configuration                 |     Relative |       Mean [s] | Min [s] | Max [s] |
+|:------------------------------|-------------:|---------------:|--------:|--------:|
+| 🥇`vitest-swc-no-isolate`     |         1.00 |  3.137 ± 0.061 |   3.042 |   3.227 |
+| 🥈`jest-swc`                  |  3.31 ± 0.15 | 10.393 ± 0.429 |   9.745 |  10.994 |
+| 🥉`angular-cli-karma`         |  3.52 ± 0.53 | 11.041 ± 1.642 |  10.218 |  15.690 |
+| `angular-cli-web-test-runner` |  5.46 ± 0.45 | 17.118 ± 1.362 |  16.473 |  20.911 |
+| `jest`                        |  5.78 ± 0.25 | 18.132 ± 0.716 |  17.553 |  19.998 |
+| `angular-cli-jest`            |  8.61 ± 0.63 | 27.009 ± 1.902 |  24.938 |  30.450 |
+| `vitest-swc`                  |  8.94 ± 0.21 | 28.038 ± 0.402 |  27.539 |  28.617 |
+| `vitest`                      | 11.43 ± 0.32 | 35.872 ± 0.727 |  34.452 |  37.340 |
+| `vitest-no-isolate`           | 11.49 ± 0.25 | 36.061 ± 0.369 |  35.414 |  36.502 |
+
+### ⚡️ With Cache
+
+All tests are ran once to warm up the cache before running the benchmark.
+
+| Configuration                 |     Relative |       Mean [s] | Min [s] | Max [s] |
+|:------------------------------|-------------:|---------------:|--------:|--------:|
+| 🥇`vitest-swc-no-isolate`     |         1.00 |  3.092 ± 0.090 |   3.030 |   3.301 |
+| 🥈`angular-cli-karma`         |  1.91 ± 0.07 |  5.901 ± 0.139 |   5.718 |   6.131 |
+| 🥉`jest-swc`                  |  2.93 ± 0.18 |  9.045 ± 0.494 |   8.513 |  10.065 |
+| `jest`                        |  4.07 ± 0.25 | 12.581 ± 0.663 |  11.572 |  13.915 |
+| `angular-cli-web-test-runner` |  5.96 ± 0.29 | 18.428 ± 0.711 |  17.497 |  19.262 |
+| `angular-cli-jest`            |  8.46 ± 1.04 | 26.170 ± 3.117 |  23.350 |  31.983 |
+| `vitest-swc`                  |  9.28 ± 0.36 | 28.691 ± 0.728 |  27.977 |  30.488 |
+| `vitest-no-isolate`           | 11.74 ± 0.45 | 36.286 ± 0.880 |  35.107 |  38.018 |
+| `vitest`                      | 12.18 ± 0.63 | 37.666 ± 1.625 |  35.563 |  41.503 |
+
+- _Note that, as of
+  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)._
+
+### 🥱 Cold Start
+
+Run a single test module just and try to measure the bootstrap time.
+
+| Configuration                 |    Relative |      Mean [s] | Min [s] | Max [s] |
+|:------------------------------|------------:|--------------:|--------:|--------:|
+| 🥇`vitest-swc-no-isolate`     |        1.00 | 1.260 ± 0.024 |   1.241 |   1.314 |
+| 🥈`vitest-swc`                | 1.00 ± 0.03 | 1.262 ± 0.026 |   1.225 |   1.305 |
+| 🥉`jest-swc`                  | 1.44 ± 0.15 | 1.812 ± 0.186 |   1.714 |   2.310 |
+| `vitest-no-isolate`           | 1.47 ± 0.05 | 1.846 ± 0.056 |   1.797 |   1.949 |
+| `vitest`                      | 1.61 ± 0.16 | 2.030 ± 0.198 |   1.814 |   2.423 |
+| `jest`                        | 1.69 ± 0.08 | 2.136 ± 0.094 |   2.017 |   2.356 |
+| `angular-cli-jest`            | 1.73 ± 0.39 | 2.186 ± 0.495 |   1.869 |   3.119 |
+| `angular-cli-web-test-runner` | 2.06 ± 1.15 | 2.602 ± 1.451 |   2.080 |   6.730 |
+| `angular-cli-karma`           | 5.08 ± 1.30 | 6.400 ± 1.636 |   5.377 |  10.177 |
+
+### Configurations
+
+|                               | Configuration                  | Test Isolation\* |
+|-------------------------------|:-------------------------------|-----------------:|
+| `angular-cli-karma`           | Angular CLI's Karma            |            false |
+| `angular-cli-jest`            | Angular CLI's Jest             |             true |
+| `angular-cli-web-test-runner` | Angular CLI's @web/test-runner |             true |
+| `jest`                        | Jest                           |             true |
+| `jest-swc`                    | Jest + SWC                     |             true |
+| `vitest`                      | Vitest                         |             true |
+| `vitest-no-isolate`           | Vitest + No Isolation          |            false |
+| `vitest-swc`                  | Vitest + SWC                   |             true |
+| `vitest-swc-no-isolate`       | Vitest + SWC + No Isolation    |            false |
+
+- _Test Isolation: this tells whether each test module has its own testing environment or if each one is isolated. (i.e.
+  globals like the DOM are shared, asynchronous code might bleed between tests, etc...)_
+
+### Source
+
+💻 try it yourself: https://github.com/yjaaidi/experiments/tree/angular-jest-swc-benchmark
+or checkout the last benchmark results: https://github.com/yjaaidi/experiments/actions/workflows/benchmark.yml

package/index.cjs.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@swc/core');
+var node_fs = require('node:fs');
+var node_path = require('node:path');
 
 function _extends() {
     _extends = Object.assign || function assign(target) {
@@ -15,7 +17,15 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 
-assertCompatibleSwcCoreVersion();
+class FileSystem {
+    readJsonFile(path) {
+        const content = node_fs.readFileSync(path, 'utf-8');
+        return JSON.parse(content);
+    }
+}
+const fileSystem = new FileSystem();
+
+assertCompatibleSwcCoreVersion(core.version);
 function swcAngularPreset(options = {}) {
     return {
         jsc: {
@@ -72,10 +82,15 @@ function swcAngularUnpluginOptions() {
 /**
  * @deprecated Use {@link swcAngularVitePreset}, {@link swcAngularJestTransformer} or {@link swcAngularPreset} instead.
  */ var index = swcAngularPreset();
-function assertCompatibleSwcCoreVersion() {
-    if (!core.version.startsWith('1.4.')) {
-        console.warn(`
-    @swc/core version ${core.version} is incompatible with @jscutlery/swc-angular.
+function assertCompatibleSwcCoreVersion(version) {
+    /* Fallback to reading version from package.json when not exported.
+   * This happens on Stackblitz. */ if (version == undefined) {
+        const packageJsonPath = node_path.join(node_path.dirname(require.resolve('@swc/core')), 'package.json');
+        version = fileSystem.readJsonFile(packageJsonPath).version;
+    }
+    if (!version.startsWith('1.4.')) {
+        console.error(`
+    @swc/core version ${version} is incompatible with @jscutlery/swc-angular.
     Please use @swc/core version 1.4.x.
     > npm add -D @swc/core@~1.4.0
     `);

package/index.esm.js

@@ -1,4 +1,6 @@
 import { version } from '@swc/core';
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
 
 function _extends() {
     _extends = Object.assign || function assign(target) {
@@ -11,7 +13,15 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 
-assertCompatibleSwcCoreVersion();
+class FileSystem {
+    readJsonFile(path) {
+        const content = readFileSync(path, 'utf-8');
+        return JSON.parse(content);
+    }
+}
+const fileSystem = new FileSystem();
+
+assertCompatibleSwcCoreVersion(version);
 function swcAngularPreset(options = {}) {
     return {
         jsc: {
@@ -68,9 +78,14 @@ function swcAngularUnpluginOptions() {
 /**
  * @deprecated Use {@link swcAngularVitePreset}, {@link swcAngularJestTransformer} or {@link swcAngularPreset} instead.
  */ var index = swcAngularPreset();
-function assertCompatibleSwcCoreVersion() {
+function assertCompatibleSwcCoreVersion(version) {
+    /* Fallback to reading version from package.json when not exported.
+   * This happens on Stackblitz. */ if (version == undefined) {
+        const packageJsonPath = join(dirname(require.resolve('@swc/core')), 'package.json');
+        version = fileSystem.readJsonFile(packageJsonPath).version;
+    }
     if (!version.startsWith('1.4.')) {
-        console.warn(`
+        console.error(`
     @swc/core version ${version} is incompatible with @jscutlery/swc-angular.
     Please use @swc/core version 1.4.x.
     > npm add -D @swc/core@~1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscutlery/swc-angular",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "repository": {
     "url": "https://github.com/jscutlery/devkit"
   },

package/src/utils.d.ts

@@ -0,0 +1,4 @@
+export declare class FileSystem {
+    readJsonFile<T>(path: string): T;
+}
+export declare const fileSystem: FileSystem;