rspack: get hot module reloading and dev server integration with nextjs to work

Author: williamstein

src/packages/frontend/frame-editors/jupyter-editor/snippets/main.tsx

@@ -532,10 +532,10 @@ export const JupyterSnippets: React.FC<Props> = React.memo((props: Props) => {
         ellipsis={{ rows: 1, expandable: true, symbol: "more" }}
       >
         <Typography.Text strong>Code Snippets</Typography.Text> is a collection
-        of examples for the current programming language. Go ahead and expand
-        the categories to see them and use the "{BUTTON_TEXT}" button to copy
-        the snippet into your notebook. If there is some text in the search box,
-        it shows you some of the matching snippets. Something missing? Please{" "}
+        of examples for the current programming language. Expand the categories
+        to see them and use the "{BUTTON_TEXT}" button to copy the snippet into
+        your notebook. If there is some text in the search box, it shows you
+        some of the matching snippets. Something missing? Please{" "}
         <A href={URL}>contribute snippets</A> or create your own personal
         "Custom Snippets" as described at the very bottom below.
       </Typography.Paragraph>

src/packages/frontend/jupyter/status.tsx

@@ -552,8 +552,8 @@ export function Kernel({
           <Tooltip
             title={
               <>
-                Percent of code cells that have been run since the last
-                kernel restart.
+                Percent of code cells that have been run since the
+                kernel started.
               </>
             }
           >

src/packages/hub/servers/express-app.ts

@@ -10,7 +10,6 @@ import { join } from "path";
 import { parse as parseURL } from "url";
 import webpackDevMiddleware from "webpack-dev-middleware";
 import webpackHotMiddleware from "webpack-hot-middleware";
-
 import { path as WEBAPP_PATH } from "@cocalc/assets";
 import basePath from "@cocalc/backend/base-path";
 import { path as CDN_PATH } from "@cocalc/cdn";
@@ -195,22 +194,22 @@ async function initStatic(router) {
   let compiler: any = null;
   if (
     process.env.NODE_ENV != "production" &&
-    !process.env.NO_WEBPACK_DEV_SERVER
+    !process.env.NO_RSPACK_DEV_SERVER
   ) {
-    // Try to use the integrated webpack dev server, if it is installed.
+    // Try to use the integrated rspack dev server, if it is installed.
     // It might not be installed at all, e.g., in production, and there
     // @cocalc/static can't even be imported.
     try {
-      const { webpackCompiler } = require("@cocalc/static/webpack-compiler");
-      compiler = webpackCompiler();
-    } catch (_err) {
-      console.warn("webpack is not available");
+      const { rspackCompiler } = require("@cocalc/static/rspack-compiler");
+      compiler = rspackCompiler();
+    } catch (err) {
+      console.warn("rspack is not available", err);
     }
   }
 
   if (compiler != null) {
     console.warn(
-      "\n-----------\n| WEBPACK: Running webpack dev server for frontend /static app.\n| Set env variable NO_WEBPACK_DEV_SERVER to disable.\n-----------\n",
+      "\n-----------\n| RSPACK: Running rspack dev server for frontend /static app.\n| Set env variable NO_RSPACK_DEV_SERVER to disable.\n-----------\n",
     );
     router.use("/static", webpackDevMiddleware(compiler, {}));
     router.use("/static", webpackHotMiddleware(compiler, {}));

src/packages/static/package.json

@@ -5,7 +5,7 @@
   "main": "./dist-ts/src/index.js",
   "exports": {
     ".": "./dist-ts/src/index.js",
-    "./webpack-compiler": "./dist-ts/src/webpack-compiler.js"
+    "./rspack-compiler": "./dist-ts/src/rspack-compiler.js"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -16,7 +16,7 @@
     "webpack-measure": "COCALC_OUTPUT=dist-measure MEASURE=true NODE_ENV=development pnpm webpack ",
     "webpack-measure-prod": "COCALC_OUTPUT=dist-prod-measure MEASURE=true pnpm webpack-prod",
     "build": "pnpm run build-dev && ./production-build.py",
-    "build-dev": "pnpm run copy-css && cd src && ../../node_modules/.bin/tsc --build && pnpm rspack build -m development ",
+    "build-dev": "pnpm run copy-css && cd src && ../../node_modules/.bin/tsc --build",
     "watch": "pnpm rspack build -m development -w",
     "test": "pnpm exec jest",
     "prepublishOnly": "pnpm test"

src/scripts/g.sh

@@ -8,8 +8,8 @@ export DEBUG="cocalc:*"
 #export DEBUG_CONSOLE="yes"
 unset DEBUG_CONSOLE
 
-export NO_WEBPACK_DEV_SERVER=true
 #export COCALC_DISABLE_API_VALIDATION=yes
+#export NO_RSPACK_DEV_SERVER=yes
 #ulimit -Sv 120000000
 
 while true; do