@esmx/rspack 3.0.0-rc.19 → 3.0.0-rc.20

package/dist/app.mjs

@@ -1,4 +1,6 @@
-import { pathToFileURL } from "node:url";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import {
   RenderContext,
   createApp,
@@ -9,6 +11,11 @@ import hotMiddleware from "webpack-hot-middleware";
 import { createRspackConfig } from "./config.mjs";
 import { pack } from "./pack.mjs";
 import { createRsBuild } from "./utils/index.mjs";
+const extension = path.extname(fileURLToPath(import.meta.url));
+const hotFixCode = fs.readFileSync(
+  fileURLToPath(new URL(`./hot-fix${extension}`, import.meta.url)),
+  "utf-8"
+);
 export async function createRspackApp(esmx, options) {
   const app = await createApp(esmx, esmx.command);
   switch (esmx.command) {
@@ -72,6 +79,13 @@ function rewriteRender(esmx) {
     const serverRender = module[rc.entryName];
     if (typeof serverRender === "function") {
       await serverRender(rc);
+      rc.html = rc.html.replace(
+        "</head>",
+        `
+                <script type="module">${hotFixCode}<\/script>
+                </head>
+            `
+      );
     }
     return rc;
   };

package/dist/config.mjs

@@ -3,6 +3,7 @@ import {
   rspack
 } from "@rspack/core";
 import nodeExternals from "webpack-node-externals";
+import { HMR_DIR, HMR_JSONP } from "./hmr-config.mjs";
 export function createRspackConfig(esmx, buildTarget, options) {
   const isHot = buildTarget === "client" && !esmx.isProd;
   return {
@@ -10,15 +11,6 @@ export function createRspackConfig(esmx, buildTarget, options) {
      * 项目根目录，不可修改
      */
     context: esmx.root,
-    entry: (() => {
-      if (buildTarget === "node") {
-        return {
-          [`./src/entry.${buildTarget}`]: {
-            import: esmx.resolvePath("src/entry.node.ts")
-          }
-        };
-      }
-    })(),
     output: {
       clean: esmx.isProd,
       chunkFilename: esmx.isProd ? "[name].[contenthash:8].final.mjs" : "[name].mjs",
@@ -27,8 +19,10 @@ export function createRspackConfig(esmx, buildTarget, options) {
       cssChunkFilename: esmx.isProd ? "[name].[contenthash:8].final.css" : "[name].css",
       publicPath: buildTarget === "client" ? "auto" : `${esmx.basePathPlaceholder}${esmx.basePath}`,
       uniqueName: esmx.varName,
-      hotUpdateChunkFilename: "__hot__/[id].[fullhash].hot-update.mjs",
-      hotUpdateMainFilename: "__hot__/[runtime].[fullhash].hot-update.json",
+      hotUpdateGlobal: HMR_JSONP,
+      chunkLoadingGlobal: HMR_JSONP + "_chunk",
+      hotUpdateChunkFilename: `${HMR_DIR}/[id].[fullhash].hot-update.mjs`,
+      hotUpdateMainFilename: `${HMR_DIR}/[runtime].[fullhash].hot-update.json`,
       path: (() => {
         switch (buildTarget) {
           case "client":
@@ -52,6 +46,8 @@ export function createRspackConfig(esmx, buildTarget, options) {
     module: {
       parser: {
         javascript: {
+          // DEV hot update fix
+          dynamicImportMode: esmx.isProd ? "lazy" : "eager",
           url: buildTarget === "client" ? true : "relative"
         }
       },
@@ -73,9 +69,10 @@ export function createRspackConfig(esmx, buildTarget, options) {
     optimization: {
       minimize: options.minimize ?? esmx.isProd,
       emitOnErrors: true,
-      splitChunks: {
-        chunks: "async"
-      }
+      // DEV hot update fix
+      splitChunks: esmx.isProd ? void 0 : false,
+      // DEV hot update fix
+      runtimeChunk: esmx.isProd ? void 0 : false
     },
     externalsPresets: {
       web: buildTarget === "client",
@@ -101,7 +98,15 @@ export function createRspackConfig(esmx, buildTarget, options) {
 }
 function createModuleLinkPlugin(esmx, buildTarget) {
   if (buildTarget === "node") {
-    return;
+    return moduleLinkPlugin({
+      name: esmx.name,
+      exports: {
+        "src/entry.node": {
+          rewrite: false,
+          file: "./src/entry.node"
+        }
+      }
+    });
   }
   const exports = {};
   for (const [name, item] of Object.entries(esmx.moduleConfig.exports)) {
@@ -112,11 +117,17 @@ function createModuleLinkPlugin(esmx, buildTarget) {
       };
     }
   }
+  const preEntries = [];
+  if (buildTarget === "client" && !esmx.isProd) {
+    preEntries.push(
+      `webpack-hot-middleware/client?path=/${esmx.name}/hot-middleware`
+    );
+  }
   return moduleLinkPlugin({
     name: esmx.name,
-    ext: "mjs",
     injectChunkName: buildTarget === "server",
     imports: esmx.moduleConfig.imports,
-    exports
+    exports,
+    preEntries
   });
 }

package/dist/hmr-config.d.ts

@@ -0,0 +1,2 @@
+export declare const HMR_JSONP = "__esmx_rspack_hmr_jsonp__";
+export declare const HMR_DIR = "__hot__";

package/dist/hmr-config.mjs

@@ -0,0 +1,2 @@
+export const HMR_JSONP = "__esmx_rspack_hmr_jsonp__";
+export const HMR_DIR = "__hot__";

package/dist/hot-fix.mjs

@@ -0,0 +1,44 @@
+(() => {
+  const HMR_JSONP = "__esmx_rspack_hmr_jsonp__";
+  const HMR_JSONP_LIST = "__esmx_rspack_hmr_jsonp_list__";
+  const list = window[HMR_JSONP_LIST] = window[HMR_JSONP_LIST] || [];
+  Object.defineProperty(window, HMR_JSONP, {
+    get() {
+      return (...args) => {
+        const hotUrl = getStackUrl(new Error().stack || "", 1);
+        if (hotUrl) {
+          const item = list.find(
+            (item2) => isSameModule(hotUrl, item2.url)
+          );
+          if (item) {
+            return item.jsonp(...args);
+          }
+        }
+        console.log("%chot update not found", "color: red", args);
+      };
+    },
+    set(jsonp) {
+      const url = getStackUrl(new Error().stack || "", 1);
+      if (url) {
+        list.push({ url, jsonp });
+      }
+    }
+  });
+  function isSameModule(hotUrl, originalUrl) {
+    const normalizedHotUrl = hotUrl.replace(/\/__hot__\//, "/").replace(/\.\w+\.hot-update\.mjs$/, ".mjs");
+    const normalizedOriginalUrl = originalUrl;
+    return normalizedHotUrl === normalizedOriginalUrl;
+  }
+  function getStackUrl(stack, index = 0) {
+    const lines = stack.split("\n");
+    const stackLines = lines.filter((line2) => line2.includes("at "));
+    if (index < 0 || index >= stackLines.length) {
+      return null;
+    }
+    const line = stackLines[index];
+    const withoutAt = line.replace(/^\s*at\s+/, "");
+    const urlMatch = withoutAt.match(/\((.*?)\)/);
+    const url = urlMatch ? urlMatch[1] : withoutAt;
+    return url.replace(/:\d+:\d+$/, "");
+  }
+})();

package/dist/utils/rsbuild.d.ts

@@ -1,12 +1,6 @@
-import { type Compiler, type RspackOptions } from '@rspack/core';
+import { type RspackOptions } from '@rspack/core';
 export declare function createRsBuild(options: RspackOptions[]): {
-    readonly compilers: Compiler[];
+    readonly compilers: import("@rspack/core").Compiler[];
     build(): Promise<boolean>;
     watch(): void;
 };
-export declare class RsBuild {
-    private compiler;
-    constructor(options: RspackOptions);
-    build(): Promise<boolean>;
-    watch(): void;
-}

package/dist/utils/rsbuild.mjs

@@ -65,37 +65,3 @@ export function createRsBuild(options) {
     }
   };
 }
-export class RsBuild {
-  compiler;
-  constructor(options) {
-    this.compiler = rspack(options);
-  }
-  async build() {
-    return new Promise((resolve) => {
-      this.compiler.run((err, stats) => {
-        if (err) {
-          return resolve(false);
-        }
-        if (stats?.hasErrors()) {
-          stats.toJson({ errors: true })?.errors?.forEach((err2) => {
-            console.error(err2);
-          });
-          return resolve(false);
-        }
-        this.compiler.close((err2) => {
-          if (err2) {
-            console.error(err2);
-            return resolve(false);
-          }
-          process.nextTick(() => {
-            resolve(true);
-          });
-        });
-      });
-    });
-  }
-  watch() {
-    const watching = this.compiler.watch({}, () => {
-    });
-  }
-}

package/package.json

@@ -63,10 +63,10 @@
         }
     },
     "dependencies": {
-        "@esmx/import": "3.0.0-rc.19",
-        "@esmx/rspack-module-link-plugin": "3.0.0-rc.19",
+        "@esmx/import": "3.0.0-rc.20",
+        "@esmx/rspack-module-link-plugin": "3.0.0-rc.20",
         "@npmcli/arborist": "^9.0.1",
-        "@rspack/core": "1.4.0-rc.0",
+        "@rspack/core": "1.4.0",
         "css-loader": "^7.1.2",
         "less-loader": "^12.2.0",
         "node-polyfill-webpack-plugin": "^4.1.0",
@@ -79,10 +79,10 @@
     },
     "devDependencies": {
         "@biomejs/biome": "1.9.4",
-        "@esmx/core": "3.0.0-rc.19",
-        "@esmx/lint": "3.0.0-rc.19",
+        "@esmx/core": "3.0.0-rc.20",
+        "@esmx/lint": "3.0.0-rc.20",
         "@types/node": "22.15.18",
-        "@types/npmcli__arborist": "^5.6.11",
+        "@types/npmcli__arborist": "^6.3.1",
         "@types/pacote": "^11.1.8",
         "@types/webpack-hot-middleware": "^2.25.9",
         "@types/webpack-node-externals": "^3.0.4",
@@ -92,7 +92,7 @@
         "unbuild": "3.5.0",
         "vitest": "3.1.3"
     },
-    "version": "3.0.0-rc.19",
+    "version": "3.0.0-rc.20",
     "type": "module",
     "private": false,
     "exports": {
@@ -111,5 +111,5 @@
         "template",
         "public"
     ],
-    "gitHead": "83a9cfac4a91b2b54ac576e120bb4541f4cce9d6"
+    "gitHead": "4c6490c23cbc148cb189b3f2cdae930eed901607"
 }

package/src/app.ts

@@ -1,4 +1,6 @@
-import { pathToFileURL } from 'node:url';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
 import {
     type App,
     type Esmx,
@@ -17,6 +19,12 @@ import { createRspackConfig } from './config';
 import { pack } from './pack';
 import { createRsBuild } from './utils';
 
+const extension = path.extname(fileURLToPath(import.meta.url));
+const hotFixCode = fs.readFileSync(
+    fileURLToPath(new URL(`./hot-fix${extension}`, import.meta.url)),
+    'utf-8'
+);
+
 /**
  * Rspack 应用配置上下文接口。
  *
@@ -260,6 +268,13 @@ function rewriteRender(esmx: Esmx) {
         const serverRender: ServerRenderHandle = module[rc.entryName];
         if (typeof serverRender === 'function') {
             await serverRender(rc);
+            rc.html = rc.html.replace(
+                '</head>',
+                `
+                <script type="module">${hotFixCode}</script>
+                </head>
+            `
+            );
         }
         return rc;
     };

package/src/config.ts

@@ -10,6 +10,7 @@ import {
 import nodeExternals from 'webpack-node-externals';
 import type { RspackAppOptions } from './app';
 import type { BuildTarget } from './build-target';
+import { HMR_DIR, HMR_JSONP } from './hmr-config';
 
 /**
  * 构建 Client、Server、Node 的基础配置
@@ -25,15 +26,6 @@ export function createRspackConfig(
          * 项目根目录，不可修改
          */
         context: esmx.root,
-        entry: (() => {
-            if (buildTarget === 'node') {
-                return {
-                    [`./src/entry.${buildTarget}`]: {
-                        import: esmx.resolvePath('src/entry.node.ts')
-                    }
-                };
-            }
-        })(),
         output: {
             clean: esmx.isProd,
             chunkFilename: esmx.isProd
@@ -54,9 +46,10 @@ export function createRspackConfig(
                     ? 'auto'
                     : `${esmx.basePathPlaceholder}${esmx.basePath}`,
             uniqueName: esmx.varName,
-            hotUpdateChunkFilename: '__hot__/[id].[fullhash].hot-update.mjs',
-            hotUpdateMainFilename:
-                '__hot__/[runtime].[fullhash].hot-update.json',
+            hotUpdateGlobal: HMR_JSONP,
+            chunkLoadingGlobal: HMR_JSONP + '_chunk',
+            hotUpdateChunkFilename: `${HMR_DIR}/[id].[fullhash].hot-update.mjs`,
+            hotUpdateMainFilename: `${HMR_DIR}/[runtime].[fullhash].hot-update.json`,
             path: ((): string => {
                 switch (buildTarget) {
                     case 'client':
@@ -80,6 +73,8 @@ export function createRspackConfig(
         module: {
             parser: {
                 javascript: {
+                    // DEV hot update fix
+                    dynamicImportMode: esmx.isProd ? 'lazy' : 'eager',
                     url: buildTarget === 'client' ? true : 'relative'
                 }
             },
@@ -101,9 +96,10 @@ export function createRspackConfig(
         optimization: {
             minimize: options.minimize ?? esmx.isProd,
             emitOnErrors: true,
-            splitChunks: {
-                chunks: 'async'
-            }
+            // DEV hot update fix
+            splitChunks: esmx.isProd ? undefined : false,
+            // DEV hot update fix
+            runtimeChunk: esmx.isProd ? undefined : false
         },
         externalsPresets: {
             web: buildTarget === 'client',
@@ -130,7 +126,15 @@ export function createRspackConfig(
 
 function createModuleLinkPlugin(esmx: Esmx, buildTarget: BuildTarget): Plugin {
     if (buildTarget === 'node') {
-        return;
+        return moduleLinkPlugin({
+            name: esmx.name,
+            exports: {
+                'src/entry.node': {
+                    rewrite: false,
+                    file: './src/entry.node'
+                }
+            }
+        });
     }
     const exports: Record<
         string,
@@ -147,11 +151,18 @@ function createModuleLinkPlugin(esmx: Esmx, buildTarget: BuildTarget): Plugin {
             };
         }
     }
+    const preEntries: string[] = [];
+    if (buildTarget === 'client' && !esmx.isProd) {
+        preEntries.push(
+            `webpack-hot-middleware/client?path=/${esmx.name}/hot-middleware`
+        );
+    }
+
     return moduleLinkPlugin({
         name: esmx.name,
-        ext: 'mjs',
         injectChunkName: buildTarget === 'server',
         imports: esmx.moduleConfig.imports,
-        exports
+        exports,
+        preEntries
     });
 }

package/src/hmr-config.ts

@@ -0,0 +1,2 @@
+export const HMR_JSONP = '__esmx_rspack_hmr_jsonp__';
+export const HMR_DIR = '__hot__';

package/src/hot-fix.ts

@@ -0,0 +1,51 @@
+(() => {
+    const HMR_JSONP = '__esmx_rspack_hmr_jsonp__';
+    const HMR_JSONP_LIST = '__esmx_rspack_hmr_jsonp_list__';
+
+    const list: Array<{ url: string; jsonp: Function }> = (window[
+        HMR_JSONP_LIST
+    ] = window[HMR_JSONP_LIST] || []);
+
+    Object.defineProperty(window, HMR_JSONP, {
+        get() {
+            return (...args: any[]) => {
+                const hotUrl = getStackUrl(new Error().stack || '', 1);
+                if (hotUrl) {
+                    const item = list.find((item) =>
+                        isSameModule(hotUrl, item.url)
+                    );
+                    if (item) {
+                        return item.jsonp(...args);
+                    }
+                }
+                console.log('%chot update not found', 'color: red', args);
+            };
+        },
+        set(jsonp) {
+            const url = getStackUrl(new Error().stack || '', 1);
+            if (url) {
+                list.push({ url, jsonp });
+            }
+        }
+    });
+    function isSameModule(hotUrl: string, originalUrl: string): boolean {
+        const normalizedHotUrl = hotUrl
+            .replace(/\/__hot__\//, '/')
+            .replace(/\.\w+\.hot-update\.mjs$/, '.mjs');
+        const normalizedOriginalUrl = originalUrl;
+        return normalizedHotUrl === normalizedOriginalUrl;
+    }
+
+    function getStackUrl(stack: string, index = 0): string | null {
+        const lines = stack.split('\n');
+        const stackLines = lines.filter((line) => line.includes('at '));
+        if (index < 0 || index >= stackLines.length) {
+            return null;
+        }
+        const line = stackLines[index];
+        const withoutAt = line.replace(/^\s*at\s+/, '');
+        const urlMatch = withoutAt.match(/\((.*?)\)/);
+        const url = urlMatch ? urlMatch[1] : withoutAt;
+        return url.replace(/:\d+:\d+$/, '');
+    }
+})();

package/src/utils/rsbuild.ts

@@ -1,5 +1,5 @@
 import { styleText } from 'node:util';
-import { type Compiler, type RspackOptions, rspack } from '@rspack/core';
+import { type RspackOptions, rspack } from '@rspack/core';
 
 function showError(message: string) {
     console.error(styleText('red', message));
@@ -74,37 +74,3 @@ export function createRsBuild(options: RspackOptions[]) {
         }
     };
 }
-
-export class RsBuild {
-    private compiler: Compiler;
-    public constructor(options: RspackOptions) {
-        this.compiler = rspack(options);
-    }
-    public async build() {
-        return new Promise<boolean>((resolve) => {
-            this.compiler.run((err, stats) => {
-                if (err) {
-                    return resolve(false);
-                }
-                if (stats?.hasErrors()) {
-                    stats.toJson({ errors: true })?.errors?.forEach((err) => {
-                        console.error(err);
-                    });
-                    return resolve(false);
-                }
-                this.compiler.close((err) => {
-                    if (err) {
-                        console.error(err);
-                        return resolve(false);
-                    }
-                    process.nextTick(() => {
-                        resolve(true);
-                    });
-                });
-            });
-        });
-    }
-    public watch() {
-        const watching = this.compiler.watch({}, () => {});
-    }
-}