feat(angular): adding initial support (#3009)

* chore: 🤖 init

* chore: 🤖 compatible webpack

* chore: 🤖 change to esm

* chore: 🤖 ignore the window

* chore: 🤖 change notation ts ignore

* fix: 🐛 make it compile

* feat: starting from new cut, replaying Ed's changes

* feat: fixing incorrect copy over

* fix: loader hook

* fix: make it work

* feat: add easy way to compare rspack to webpack

* feat: add compilation params to compilation hook

* feat: adding back more features that are available now.

* feat: adding back more features that are available now.

* feat: add EntryPlugin as a workaround

* feat: adding get chunks

* feat: making the error pass through without a name?

* feat: correctly push errors from child compiler

* fix: deduplicate error

* fix: angular css and html builtin

* feat: angular HMR

* chore: add fix for angular rspack

* feat: updating angular to 16 to compare against esbuild

* feat: updating against main and also commenting out hmr

* feat: updating to production and minimize true

* fix: revert unneeded code

* chore: re-add new line

* fix: use title instead of name for JsStatsError

* Fix type error and binding.d.ts conflicts

* Fix typings

* chore: 🤖 remove jasmine-core related, that are unused

---------

Co-authored-by: IWANABETHATGUY <iwanabethatguy@qq.com>
Co-authored-by: Eduardo Speroni <edusperoni@gmail.com>
Co-authored-by: Hana <andywangsy@gmail.com>
Co-authored-by: Dmitriy Shekhovtsovvalorkin <valorkin@gmail.com>
Co-authored-by: YunfeiHe <i.heyunfei@gmail.com>

.gitignore

@@ -169,7 +169,7 @@ packages/playground/temp
 # Ignore local integrate debug file
 packages/rspack/tests/*.debug.[tj]s
 
-# Benchmark 
+# Benchmark
 /github/
 /benchcases/three
 
@@ -197,7 +197,8 @@ npm/**/*.node
 packages/rspack/src/config/schema.check.js
 justfile
 
-
+## Angular Incremental Build Cache
+**/.angular/
 # align to webpack
 /webpack-test/js
 /webpack-test/browsertest/js

.vscode/launch.json

@@ -17,15 +17,33 @@
         "--inspect",
         "bin/rspack",
         "-c",
-        "../../examples/basic/rspack.config.js"
+        "../../examples/angular/rspack.config.js"
       ],
       "cwd": "${workspaceFolder}/packages/rspack-cli"
+    },
+    {
+      "type": "lldb",
+      "request": "launch",
+      "sourceLanguages": ["rust"],
+      "name": "debug-rust-2",
+      "program": "node",
+      "args": [
+        "--inspect",
+        "../../packages/rspack-cli/bin/rspack",
+        "-c",
+        "./rspack.config.js"
+      ],
+      "cwd": "${workspaceFolder}/examples/angular"
     }
   ],
   "compounds": [
     {
       "name": "debug-rspack",
       "configurations": ["debug-js", "debug-rust"]
+    },
+    {
+      "name": "debug-rspack-2",
+      "configurations": ["debug-js", "debug-rust-2"]
     }
   ]
 }

crates/node_binding/binding.d.ts

@@ -171,6 +171,7 @@ export interface JsHooks {
   make: (...args: any[]) => any
   optimizeModules: (...args: any[]) => any
   optimizeChunkModule: (...args: any[]) => any
+  beforeCompile: (...args: any[]) => any
   finishModules: (...args: any[]) => any
   beforeResolve: (...args: any[]) => any
   contextModuleBeforeResolve: (...args: any[]) => any
@@ -282,6 +283,7 @@ export interface JsStatsChunkGroupAsset {
 export interface JsStatsError {
   message: string
   formatted: string
+  title: string
 }
 
 export interface JsStatsGetAssets {

crates/node_binding/src/hook.rs

@@ -17,6 +17,7 @@ pub enum Hook {
   Emit,
   AfterEmit,
   OptimizeChunkModules,
+  BeforeCompile,
   FinishModules,
   OptimizeModules,
   /// webpack `compilation.hooks.chunkAsset`
@@ -40,6 +41,7 @@ impl From<String> for Hook {
       "emit" => Hook::Emit,
       "afterEmit" => Hook::AfterEmit,
       "optimizeChunkModules" => Hook::OptimizeChunkModules,
+      "beforeCompile" => Hook::BeforeCompile,
       "finishModules" => Hook::FinishModules,
       "optimizeModules" => Hook::OptimizeModules,
       "chunkAsset" => Hook::ChunkAsset,

crates/node_binding/src/js_values/hooks.rs

@@ -17,6 +17,7 @@ pub struct JsHooks {
   pub make: JsFunction,
   pub optimize_modules: JsFunction,
   pub optimize_chunk_module: JsFunction,
+  pub before_compile: JsFunction,
   pub finish_modules: JsFunction,
   pub before_resolve: JsFunction,
   pub context_module_before_resolve: JsFunction,

crates/node_binding/src/js_values/stats.rs

@@ -8,13 +8,15 @@ use super::JsCompilation;
 pub struct JsStatsError {
   pub message: String,
   pub formatted: String,
+  pub title: String,
 }
 
 impl From<rspack_core::StatsError> for JsStatsError {
   fn from(stats: rspack_core::StatsError) -> Self {
     Self {
       message: stats.message,
       formatted: stats.formatted,
+      title: stats.title,
     }
   }
 }

crates/node_binding/src/plugins/mod.rs

@@ -37,6 +37,7 @@ pub struct JsHooksAdapter {
   pub after_emit_tsfn: ThreadsafeFunction<(), ()>,
   pub optimize_modules_tsfn: ThreadsafeFunction<JsCompilation, ()>,
   pub optimize_chunk_modules_tsfn: ThreadsafeFunction<JsCompilation, ()>,
+  pub before_compile_tsfn: ThreadsafeFunction<(), ()>,
   pub finish_modules_tsfn: ThreadsafeFunction<JsCompilation, ()>,
   pub chunk_asset_tsfn: ThreadsafeFunction<JsChunkAssetArgs, ()>,
   pub before_resolve: ThreadsafeFunction<BeforeResolveData, Option<bool>>,
@@ -365,6 +366,22 @@ impl rspack_core::Plugin for JsHooksAdapter {
       .map_err(|err| internal_error!("Failed to compilation: {err}"))?
   }
 
+  async fn before_compile(
+    &mut self,
+    // args: &mut rspack_core::CompilationArgs<'_>
+  ) -> rspack_error::Result<()> {
+    if self.is_hook_disabled(&Hook::BeforeCompile) {
+      return Ok(());
+    }
+
+    self
+      .before_compile_tsfn
+      .call({}, ThreadsafeFunctionCallMode::NonBlocking)
+      .into_rspack_result()?
+      .await
+      .map_err(|err| internal_error!("Failed to call before compile: {err}",))?
+  }
+
   async fn finish_modules(
     &mut self,
     compilation: &mut rspack_core::Compilation,
@@ -435,6 +452,7 @@ impl JsHooksAdapter {
       before_resolve,
       context_module_before_resolve,
       normal_module_factory_resolve_for_scheme,
+      before_compile,
       finish_modules,
       chunk_asset,
     } = js_hooks;
@@ -466,6 +484,8 @@ impl JsHooksAdapter {
       js_fn_into_theadsafe_fn!(optimize_modules, env);
     let optimize_chunk_modules_tsfn: ThreadsafeFunction<JsCompilation, ()> =
       js_fn_into_theadsafe_fn!(optimize_chunk_module, env);
+    let before_compile_tsfn: ThreadsafeFunction<(), ()> =
+      js_fn_into_theadsafe_fn!(before_compile, env);
     let finish_modules_tsfn: ThreadsafeFunction<JsCompilation, ()> =
       js_fn_into_theadsafe_fn!(finish_modules, env);
     let context_module_before_resolve: ThreadsafeFunction<BeforeResolveData, Option<bool>> =
@@ -496,6 +516,7 @@ impl JsHooksAdapter {
       after_emit_tsfn,
       optimize_modules_tsfn,
       optimize_chunk_modules_tsfn,
+      before_compile_tsfn,
       before_resolve,
       context_module_before_resolve,
       normal_module_factory_resolve_for_scheme,

crates/rspack_core/src/compiler/mod.rs

@@ -101,6 +101,8 @@ where
       ),
     );
 
+    self.plugin_driver.write().await.before_compile().await?;
+
     // Fake this compilation as *currently* rebuilding does not create a new compilation
     self
       .plugin_driver

crates/rspack_core/src/plugin/api.rs

@@ -307,6 +307,10 @@ pub trait Plugin: Debug + Send + Sync {
     Ok(())
   }
 
+  async fn before_compile(&mut self) -> Result<()> {
+    Ok(())
+  }
+
   async fn finish_modules(&mut self, _modules: &mut Compilation) -> Result<()> {
     Ok(())
   }

crates/rspack_core/src/plugin/plugin_driver.rs

@@ -167,6 +167,16 @@ impl PluginDriver {
     Ok(())
   }
 
+  pub async fn before_compile(
+    &mut self,
+    // compilationParams: &mut CompilationParams<'_>,
+  ) -> PluginCompilationHookOutput {
+    for plugin in &mut self.plugins {
+      plugin.before_compile().await?;
+    }
+
+    Ok(())
+  }
   /// Executed while initializing the compilation, right before emitting the compilation event. This hook is not copied to child compilers.
   ///
   /// See: https://webpack.js.org/api/compiler-hooks/#thiscompilation

crates/rspack_core/src/stats.rs

@@ -257,6 +257,7 @@ impl Stats<'_> {
       .compilation
       .get_errors()
       .map(|d| StatsError {
+        title: d.title.clone(),
         message: d.message.clone(),
         formatted: diagnostic_displayer.emit_diagnostic(d).expect("TODO:"),
       })
@@ -462,6 +463,7 @@ fn get_stats_module_name_and_id(
 pub struct StatsError {
   pub message: String,
   pub formatted: String,
+  pub title: String,
 }
 
 #[derive(Debug)]

examples/angular/README.md

@@ -0,0 +1,27 @@
+# RspackNg
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.1.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

examples/angular/angular.json

@@ -0,0 +1,107 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "rspack-ng": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser-esbuild",
+          "options": {
+            "outputPath": "dist/rspack-ng",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "rspack-ng:build:production"
+            },
+            "development": {
+              "browserTarget": "rspack-ng:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "rspack-ng:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "analytics": false
+  }
+}

examples/angular/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "rspack-ng",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build:rspack": "rspack",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/router": "^16.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.13.0"
+  },
+  "devDependencies": {
+    "@ngtools/webpack": "^16.0.0",
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular/cli": "~16.0.0",
+    "@angular/compiler-cli": "^16.0.0",
+    "@rspack/cli": "workspace:*",
+    "@rspack/plugin-minify": "0.1.9",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "typescript": "~4.9.4"
+  }
+}