Rspack (#22807)

* Add rspack

* Remove TransformAsyncModulesPlugin from rspack

* Migrate all webpack usage to rspack

* Migrate tests to vitest

* Fix test suites

* Remove chai dependency

* Fix compute_state_display tests

* Fix resolveTimeZone

* Reduces test pipeline

* Revert test ci

* optimize chunk filtering

* Migrate landing-page to rspack

* Update rspack dependencies

* Add rsdoctor

* Fix prod build bundle size

* Use rsdoctor for demo stats

* Remove unused webpack configs

* Update build-scripts/rspack.cjs

Co-authored-by: Petar Petrov <[email protected]>

* Fix eslint

* Update rspack

* Remove unused code

---------

Co-authored-by: Petar Petrov <[email protected]>

Author: wendevlin

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "esbenp.prettier-vscode",
     "runem.lit-plugin",
     "github.vscode-pull-request-github",
-    "eamodio.gitlens"
+    "eamodio.gitlens",
+    "vitest.explorer"
   ]
 }

build-scripts/bundle.cjs

@@ -152,7 +152,6 @@ module.exports.babelOptions = ({
   exclude: [
     // \\ for Windows, / for Mac OS and Linux
     /node_modules[\\/]core-js/,
-    /node_modules[\\/]webpack[\\/]buildin/,
   ],
   sourceMaps: !isTestBuild,
   overrides: [

build-scripts/gulp/app.js

@@ -9,7 +9,7 @@ import "./locale-data.js";
 import "./service-worker.js";
 import "./translations.js";
 import "./wds.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-app",
@@ -26,7 +26,7 @@ gulp.task(
       "build-locale-data"
     ),
     "copy-static-app",
-    env.useWDS() ? "wds-watch-app" : "webpack-watch-app"
+    env.useWDS() ? "wds-watch-app" : "rspack-watch-app"
   )
 );
 
@@ -39,9 +39,20 @@ gulp.task(
     "clean",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-app",
-    "webpack-prod-app",
+    "rspack-prod-app",
     gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
     // Don't compress running tests
-    ...(env.isTestBuild() ? [] : ["compress-app"])
+    ...(env.isTestBuild() || env.isStatsBuild() ? [] : ["compress-app"])
+  )
+);
+
+gulp.task(
+  "analyze-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.STATS = "1";
+    },
+    "clean",
+    "rspack-prod-app"
   )
 );

build-scripts/gulp/cast.js

@@ -4,7 +4,7 @@ import "./entry-html.js";
 import "./gather-static.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-cast",
@@ -17,7 +17,7 @@ gulp.task(
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     "gen-pages-cast-dev",
-    "webpack-dev-server-cast"
+    "rspack-dev-server-cast"
   )
 );
 
@@ -31,7 +31,7 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
-    "webpack-prod-cast",
+    "rspack-prod-cast",
     "gen-pages-cast-prod"
   )
 );

build-scripts/gulp/demo.js

@@ -5,7 +5,7 @@ import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-demo",
@@ -22,7 +22,7 @@ gulp.task(
       "build-locale-data"
     ),
     "copy-static-demo",
-    "webpack-dev-server-demo"
+    "rspack-dev-server-demo"
   )
 );
 
@@ -37,7 +37,18 @@ gulp.task(
     "translations-enable-merge-backend",
     gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
-    "webpack-prod-demo",
+    "rspack-prod-demo",
     "gen-pages-demo-prod"
   )
 );
+
+gulp.task(
+  "analyze-demo",
+  gulp.series(
+    async function setEnv() {
+      process.env.STATS = "1";
+    },
+    "clean",
+    "rspack-prod-demo"
+  )
+);

build-scripts/gulp/gallery.js

@@ -11,7 +11,7 @@ import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./service-worker.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
@@ -156,7 +156,7 @@ gulp.task(
     "copy-static-gallery",
     "gen-pages-gallery-dev",
     gulp.parallel(
-      "webpack-dev-server-gallery",
+      "rspack-dev-server-gallery",
       async function watchMarkdownFiles() {
         gulp.watch(
           [
@@ -185,7 +185,7 @@ gulp.task(
       "gather-gallery-pages"
     ),
     "copy-static-gallery",
-    "webpack-prod-gallery",
+    "rspack-prod-gallery",
     "gen-pages-gallery-prod"
   )
 );

build-scripts/gulp/hassio.js

@@ -6,7 +6,7 @@ import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-hassio",
@@ -21,7 +21,7 @@ gulp.task(
     "copy-translations-supervisor",
     "build-locale-data",
     "copy-static-supervisor",
-    "webpack-watch-hassio"
+    "rspack-watch-hassio"
   )
 );
 
@@ -37,7 +37,7 @@ gulp.task(
     "copy-translations-supervisor",
     "build-locale-data",
     "copy-static-supervisor",
-    "webpack-prod-hassio",
+    "rspack-prod-hassio",
     "gen-pages-hassio-prod",
     ...// Don't compress running tests
     (env.isTestBuild() ? [] : ["compress-hassio"])

build-scripts/gulp/landing-page.js

@@ -5,7 +5,7 @@ import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./translations.js";
-import "./webpack.js";
+import "./rspack.js";
 
 gulp.task(
   "develop-landing-page",
@@ -20,7 +20,7 @@ gulp.task(
     "build-locale-data",
     "copy-static-landing-page",
     "gen-pages-landing-page-dev",
-    "webpack-watch-landing-page"
+    "rspack-watch-landing-page"
   )
 );
 
@@ -35,7 +35,7 @@ gulp.task(
     "copy-translations-landing-page",
     "build-locale-data",
     "copy-static-landing-page",
-    "webpack-prod-landing-page",
+    "rspack-prod-landing-page",
     "gen-pages-landing-page-prod"
   )
 );

build-scripts/gulp/webpack.js build-scripts/gulp/rspack.js

@@ -1,11 +1,11 @@
-// Tasks to run webpack.
+// Tasks to run rspack.
 
 import fs from "fs";
 import path from "path";
 import log from "fancy-log";
 import gulp from "gulp";
-import webpack from "webpack";
-import WebpackDevServer from "webpack-dev-server";
+import rspack from "@rspack/core";
+import { RspackDevServer } from "@rspack/dev-server";
 import env from "../env.cjs";
 import paths from "../paths.cjs";
 import {
@@ -15,7 +15,7 @@ import {
   createGalleryConfig,
   createHassioConfig,
   createLandingPageConfig,
-} from "../webpack.cjs";
+} from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
   createConfigFunc({ ...params, latestBuild: true }),
@@ -31,7 +31,7 @@ const isWsl =
 
 /**
  * @param {{
- *   compiler: import("webpack").Compiler,
+ *   compiler: import("@rspack/core").Compiler,
  *   contentBase: string,
  *   port: number,
  *   listenHost?: string
@@ -48,7 +48,7 @@ const runDevServer = async ({
     // For dev container, we need to listen on all hosts
     listenHost = env.isDevContainer() ? "0.0.0.0" : "localhost";
   }
-  const server = new WebpackDevServer(
+  const server = new RspackDevServer(
     {
       hot: false,
       open: true,
@@ -65,7 +65,7 @@ const runDevServer = async ({
 
   await server.start();
   // Server listening
-  log("[webpack-dev-server]", `Project is running at http://localhost:${port}`);
+  log("[rspack-dev-server]", `Project is running at http://localhost:${port}`);
 };
 
 const doneHandler = (done) => (err, stats) => {
@@ -90,16 +90,16 @@ const doneHandler = (done) => (err, stats) => {
 
 const prodBuild = (conf) =>
   new Promise((resolve) => {
-    webpack(
+    rspack(
       conf,
-      // Resolve promise when done. Because we pass a callback, webpack closes itself
+      // Resolve promise when done. Because we pass a callback, rspack closes itself
       doneHandler(resolve)
     );
   });
 
-gulp.task("webpack-watch-app", () => {
+gulp.task("rspack-watch-app", () => {
   // This command will run forever because we don't close compiler
-  webpack(
+  rspack(
     process.env.ES5
       ? bothBuilds(createAppConfig, { isProdBuild: false })
       : createAppConfig({ isProdBuild: false, latestBuild: true })
@@ -110,7 +110,7 @@ gulp.task("webpack-watch-app", () => {
   );
 });
 
-gulp.task("webpack-prod-app", () =>
+gulp.task("rspack-prod-app", () =>
   prodBuild(
     bothBuilds(createAppConfig, {
       isProdBuild: true,
@@ -120,27 +120,28 @@ gulp.task("webpack-prod-app", () =>
   )
 );
 
-gulp.task("webpack-dev-server-demo", () =>
+gulp.task("rspack-dev-server-demo", () =>
   runDevServer({
-    compiler: webpack(
+    compiler: rspack(
       createDemoConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.demo_output_root,
     port: 8090,
   })
 );
 
-gulp.task("webpack-prod-demo", () =>
+gulp.task("rspack-prod-demo", () =>
   prodBuild(
     bothBuilds(createDemoConfig, {
       isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
     })
   )
 );
 
-gulp.task("webpack-dev-server-cast", () =>
+gulp.task("rspack-dev-server-cast", () =>
   runDevServer({
-    compiler: webpack(
+    compiler: rspack(
       createCastConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.cast_output_root,
@@ -150,17 +151,17 @@ gulp.task("webpack-dev-server-cast", () =>
   })
 );
 
-gulp.task("webpack-prod-cast", () =>
+gulp.task("rspack-prod-cast", () =>
   prodBuild(
     bothBuilds(createCastConfig, {
       isProdBuild: true,
     })
   )
 );
 
-gulp.task("webpack-watch-hassio", () => {
+gulp.task("rspack-watch-hassio", () => {
   // This command will run forever because we don't close compiler
-  webpack(
+  rspack(
     createHassioConfig({
       isProdBuild: false,
       latestBuild: true,
@@ -173,7 +174,7 @@ gulp.task("webpack-watch-hassio", () => {
   );
 });
 
-gulp.task("webpack-prod-hassio", () =>
+gulp.task("rspack-prod-hassio", () =>
   prodBuild(
     bothBuilds(createHassioConfig, {
       isProdBuild: true,
@@ -183,9 +184,9 @@ gulp.task("webpack-prod-hassio", () =>
   )
 );
 
-gulp.task("webpack-dev-server-gallery", () =>
+gulp.task("rspack-dev-server-gallery", () =>
   runDevServer({
-    compiler: webpack(
+    compiler: rspack(
       createGalleryConfig({ isProdBuild: false, latestBuild: true })
     ),
     contentBase: paths.gallery_output_root,
@@ -194,7 +195,7 @@ gulp.task("webpack-dev-server-gallery", () =>
   })
 );
 
-gulp.task("webpack-prod-gallery", () =>
+gulp.task("rspack-prod-gallery", () =>
   prodBuild(
     createGalleryConfig({
       isProdBuild: true,
@@ -203,9 +204,9 @@ gulp.task("webpack-prod-gallery", () =>
   )
 );
 
-gulp.task("webpack-watch-landing-page", () => {
+gulp.task("rspack-watch-landing-page", () => {
   // This command will run forever because we don't close compiler
-  webpack(
+  rspack(
     process.env.ES5
       ? bothBuilds(createLandingPageConfig, { isProdBuild: false })
       : createLandingPageConfig({ isProdBuild: false, latestBuild: true })
@@ -220,7 +221,7 @@ gulp.task("webpack-watch-landing-page", () => {
   );
 });
 
-gulp.task("webpack-prod-landing-page", () =>
+gulp.task("rspack-prod-landing-page", () =>
   prodBuild(
     bothBuilds(createLandingPageConfig, {
       isProdBuild: true,