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 <MindFreeze@users.noreply.github.com>

* Fix eslint

* Update rspack

* Remove unused code

---------

Co-authored-by: Petar Petrov <MindFreeze@users.noreply.github.com>

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/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,9 +120,9 @@ 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,
@@ -130,17 +130,18 @@ gulp.task("webpack-dev-server-demo", () =>
   })
 );
 
-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,7 +151,7 @@ gulp.task("webpack-dev-server-cast", () =>
   })
 );
 
-gulp.task("webpack-prod-cast", () =>
+gulp.task("rspack-prod-cast", () =>
   prodBuild(
     bothBuilds(createCastConfig, {
       isProdBuild: true,
@@ -158,9 +159,9 @@ gulp.task("webpack-prod-cast", () =>
   )
 );
 
-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,

build-scripts/rspack.cjs

@@ -1,16 +1,13 @@
 const { existsSync } = require("fs");
 const path = require("path");
-const webpack = require("webpack");
+const rspack = require("@rspack/core");
+const { RsdoctorRspackPlugin } = require("@rsdoctor/rspack-plugin");
 const { StatsWriterPlugin } = require("webpack-stats-plugin");
 const filterStats = require("@bundle-stats/plugin-webpack-filter").default;
 const TerserPlugin = require("terser-webpack-plugin");
-const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
+const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
-const {
-  TransformAsyncModulesPlugin,
-} = require("transform-async-modules-webpack-plugin");
-const { dependencies } = require("../package.json");
+const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -28,7 +25,7 @@ class LogStartCompilePlugin {
   }
 }
 
-const createWebpackConfig = ({
+const createRspackConfig = ({
   name,
   entry,
   outputPath,
@@ -102,13 +99,18 @@ const createWebpackConfig = ({
       splitChunks: {
         // Disable splitting for web workers and worklets because imports of
         // external chunks are broken for:
-        // - ESM output: https://github.com/webpack/webpack/issues/17014
-        // - Worklets use `importScripts`: https://github.com/webpack/webpack/issues/11543
-        chunks: (chunk) =>
-          !chunk.canBeInitial() &&
-          !new RegExp(`^.+-work${latestBuild ? "(?:let|er)" : "let"}$`).test(
-            chunk.name
-          ),
+        chunks: !isProdBuild
+          ? // improve incremental build speed, but blows up bundle size
+            new RegExp(
+              `^(?!(${Object.keys(entry).join("|")}|.*work(?:er|let))$)`
+            )
+          : // - ESM output: https://github.com/webpack/webpack/issues/17014
+            // - Worklets use `importScripts`: https://github.com/webpack/webpack/issues/11543
+            (chunk) =>
+              !chunk.canBeInitial() &&
+              !new RegExp(
+                `^.+-work${latestBuild ? "(?:let|er)" : "let"}$`
+              ).test(chunk.name),
       },
     },
     plugins: [
@@ -117,10 +119,10 @@ const createWebpackConfig = ({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
-      new webpack.DefinePlugin(
+      new rspack.DefinePlugin(
         bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
       ),
-      new webpack.IgnorePlugin({
+      new rspack.IgnorePlugin({
         checkResource(resource, context) {
           // Only use ignore to intercept imports that we don't control
           // inside node_module dependencies.
@@ -152,7 +154,7 @@ const createWebpackConfig = ({
           );
         },
       }),
-      new webpack.NormalModuleReplacementPlugin(
+      new rspack.NormalModuleReplacementPlugin(
         new RegExp(
           bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
         ),
@@ -168,10 +170,14 @@ const createWebpackConfig = ({
           stats: { assets: true, chunks: true, modules: true },
           transform: (stats) => JSON.stringify(filterStats(stats)),
         }),
-      !latestBuild &&
-        new TransformAsyncModulesPlugin({
-          browserslistEnv: "legacy",
-          runtime: { version: dependencies["@babel/runtime"] },
+      isProdBuild &&
+        isStatsBuild &&
+        new RsdoctorRspackPlugin({
+          reportDir: path.join(paths.build_dir, "rsdoctor"),
+          features: ["plugins", "bundle"],
+          supports: {
+            generateTileGraph: true,
+          },
         }),
     ].filter(Boolean),
     resolve: {
@@ -210,8 +216,6 @@ const createWebpackConfig = ({
         isProdBuild && !isStatsBuild ? "[id].[contenthash][ext]" : "[id][ext]",
       crossOriginLoading: "use-credentials",
       hashFunction: "xxhash64",
-      hashDigest: "base64url",
-      hashDigestLength: 11, // full length of 64 bit base64url
       path: outputPath,
       publicPath,
       // To silence warning in worker plugin
@@ -253,17 +257,17 @@ const createAppConfig = ({
   isStatsBuild,
   isTestBuild,
 }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
   );
 
 const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
   );
 
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
-  createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
+  createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
 const createHassioConfig = ({
   isProdBuild,
@@ -271,7 +275,7 @@ const createHassioConfig = ({
   isStatsBuild,
   isTestBuild,
 }) =>
-  createWebpackConfig(
+  createRspackConfig(
     bundle.config.hassio({
       isProdBuild,
       latestBuild,
@@ -281,10 +285,10 @@ const createHassioConfig = ({
   );
 
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
-  createWebpackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
+  createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
-  createWebpackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
+  createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
 module.exports = {
   createAppConfig,
@@ -292,6 +296,6 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
+  createRspackConfig,
   createLandingPageConfig,
-  createWebpackConfig,
 };