feat: pure ESM package

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@rspack/dev-middleware",
   "version": "7.4.5",
+  "type": "module",
   "description": "A development middleware for Rspack",
   "keywords": [
     "rspack",
@@ -32,8 +33,7 @@
     "fix": "pnpm run fix:prettier",
     "clean": "del-cli dist types",
     "build:types": "tsc --declaration --emitDeclarationOnly --outDir types && prettier \"types/**/*.ts\" --write",
-    "build:code": "babel src -d dist --copy-files",
-    "build": "npm-run-all -p \"build:**\"",
+    "build": "rslib --syntax es2023 && pnpm run build:types",
     "test:watch": "rstest -w",
     "test": "rstest",
     "prepare": "pnpm run build"
@@ -45,12 +45,10 @@
     "range-parser": "^1.2.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.16.7",
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.7",
     "@fastify/express": "^4.0.2",
     "@hapi/hapi": "^21.3.7",
     "@hono/node-server": "^1.12.0",
+    "@rslib/core": "^0.20.0",
     "@rspack/core": "2.0.0-beta.5",
     "@rstest/core": "0.9.2",
     "@types/connect": "^3.4.35",

rstest.config.mjs

@@ -4,6 +4,7 @@ export default defineConfig({
   testEnvironment: "node",
   globals: true,
   testTimeout: 20000,
+  retry: 2,
   include: ["test/**/*.test.js"],
   exclude: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
   globalSetup: ["./scripts/globalSetup.mjs"],

src/index.js

@@ -1,11 +1,11 @@
-const { mimes } = require("mrmime");
+import { mimes } from "mrmime";
 
-const middleware = require("./middleware");
-const getFilenameFromUrl = require("./utils/getFilenameFromUrl");
-const ready = require("./utils/ready");
-const setupHooks = require("./utils/setupHooks");
-const setupOutputFileSystem = require("./utils/setupOutputFileSystem");
-const setupWriteToDisk = require("./utils/setupWriteToDisk");
+import middleware from "./middleware.js";
+import getFilenameFromUrl from "./utils/getFilenameFromUrl.js";
+import ready from "./utils/ready.js";
+import setupHooks from "./utils/setupHooks.js";
+import setupOutputFileSystem from "./utils/setupOutputFileSystem.js";
+import setupWriteToDisk from "./utils/setupWriteToDisk.js";
 
 const noop = () => {};
 
@@ -670,4 +670,4 @@ function honoWrapper(compiler, options) {
 
 wdm.honoWrapper = honoWrapper;
 
-module.exports = wdm;
+export default wdm;

src/middleware.js

@@ -1,9 +1,10 @@
-const path = require("node:path");
+import path from "node:path";
 
-const { lookup, mimes } = require("mrmime");
-const onFinishedStream = require("on-finished");
+import { lookup, mimes } from "mrmime";
+import onFinishedStream from "on-finished";
+import rangeParser from "range-parser";
 
-const {
+import {
   createReadStreamOrReadFileSync,
   finish,
   getHeadersSent,
@@ -21,10 +22,13 @@ const {
   setResponseHeader,
   setState,
   setStatusCode,
-} = require("./utils/compatibleAPI");
-const getFilenameFromUrl = require("./utils/getFilenameFromUrl");
-const memorize = require("./utils/memorize");
-const ready = require("./utils/ready");
+} from "./utils/compatibleAPI.js";
+import etag from "./utils/etag.js";
+import escapeHtml from "./utils/escapeHtml.js";
+import getFilenameFromUrl from "./utils/getFilenameFromUrl.js";
+import memorize from "./utils/memorize.js";
+import parseTokenList from "./utils/parseTokenList.js";
+import ready from "./utils/ready.js";
 
 /** @typedef {import("./index.js").NextFunction} NextFunction */
 /** @typedef {import("./index.js").IncomingMessage} IncomingMessage */
@@ -137,15 +141,15 @@ const parseRangeHeaders = memorize(
   (value) => {
     const [len, rangeHeader] = value.split("|");
 
-    return require("range-parser")(Number(len), rangeHeader, {
+    return rangeParser(Number(len), rangeHeader, {
       combine: true,
     });
   },
 );
 
-const getETag = memorize(() => require("./utils/etag"));
-const getEscapeHtml = memorize(() => require("./utils/escapeHtml"));
-const getParseTokenList = memorize(() => require("./utils/parseTokenList"));
+const getETag = memorize(() => etag);
+const getEscapeHtml = memorize(() => escapeHtml);
+const getParseTokenList = memorize(() => parseTokenList);
 
 const MAX_MAX_AGE = 31536000000;
 
@@ -910,4 +914,4 @@ function wrapper(context) {
   };
 }
 
-module.exports = wrapper;
+export default wrapper;

src/utils/compatibleAPI.js

@@ -303,7 +303,7 @@ function setState(res, name, value) {
   (res.locals)[name] = value;
 }
 
-module.exports = {
+export {
   createReadStreamOrReadFileSync,
   finish,
   getHeadersSent,

src/utils/escapeHtml.js

@@ -56,4 +56,4 @@ function escapeHtml(string) {
   return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
 }
 
-module.exports = escapeHtml;
+export default escapeHtml;

src/utils/etag.js

@@ -1,4 +1,4 @@
-const crypto = require("node:crypto");
+import crypto from "node:crypto";
 
 /** @typedef {import("fs").Stats} Stats */
 /** @typedef {import("fs").ReadStream} ReadStream */
@@ -77,4 +77,4 @@ async function etag(entity) {
     : statTag(/** @type {import("fs").Stats} */ (entity));
 }
 
-module.exports = etag;
+export default etag;

src/utils/getFilenameFromUrl.js

@@ -1,10 +1,10 @@
-const path = require("node:path");
-const querystring = require("node:querystring");
+import path from "node:path";
+import querystring from "node:querystring";
 // eslint-disable-next-line n/no-deprecated-api
-const { parse } = require("node:url");
+import { parse } from "node:url";
 
-const getPaths = require("./getPaths");
-const memorize = require("./memorize");
+import getPaths from "./getPaths.js";
+import memorize from "./memorize.js";
 
 /** @typedef {import("../index.js").IncomingMessage} IncomingMessage */
 /** @typedef {import("../index.js").ServerResponse} ServerResponse */
@@ -164,4 +164,4 @@ function getFilenameFromUrl(context, url, extra = {}) {
   return foundFilename;
 }
 
-module.exports = getFilenameFromUrl;
+export default getFilenameFromUrl;

src/utils/getPaths.js

@@ -57,4 +57,4 @@ function getPaths(context) {
   return publicPaths;
 }
 
-module.exports = getPaths;
+export default getPaths;

src/utils/memorize.js

@@ -46,4 +46,4 @@ function memorize(fn, { cache = new Map() } = {}, callback = undefined) {
   return memoized;
 }
 
-module.exports = memorize;
+export default memorize;

src/utils/parseTokenList.js

@@ -39,4 +39,4 @@ function parseTokenList(str) {
   return list;
 }
 
-module.exports = parseTokenList;
+export default parseTokenList;

src/utils/ready.js

@@ -23,4 +23,4 @@ function ready(context, callback, req) {
   context.callbacks.push(callback);
 }
 
-module.exports = ready;
+export default ready;

src/utils/setupHooks.js

@@ -110,4 +110,4 @@ function setupHooks(context) {
   compiler.hooks.done.tap("webpack-dev-middleware", done);
 }
 
-module.exports = setupHooks;
+export default setupHooks;

src/utils/setupOutputFileSystem.js

@@ -1,4 +1,4 @@
-const memfs = require("memfs");
+import memfs, { Volume, createFsFromVolume } from "memfs";
 
 /** @typedef {import("@rspack/core").MultiCompiler} MultiCompiler */
 /** @typedef {import("../index.js").DevServerOption} DevServerOption */
@@ -20,7 +20,21 @@ function setupOutputFileSystem(context) {
   }
   // Don't use `memfs` when developer wants to write everything to a disk, because it doesn't make sense.
   else if (context.options.writeToDisk !== true) {
-    outputFileSystem = memfs.createFsFromVolume(new memfs.Volume());
+    const candidateOutputFileSystem = memfs.createFsFromVolume(new Volume());
+
+    if (
+      candidateOutputFileSystem &&
+      typeof candidateOutputFileSystem.readFileSync === "function" &&
+      typeof candidateOutputFileSystem.statSync === "function"
+    ) {
+      outputFileSystem = candidateOutputFileSystem;
+    } else {
+      outputFileSystem = createFsFromVolume(new Volume());
+
+      if (candidateOutputFileSystem) {
+        Object.assign(outputFileSystem, candidateOutputFileSystem);
+      }
+    }
   } else {
     const isMultiCompiler =
       /** @type {MultiCompiler} */
@@ -63,4 +77,4 @@ function setupOutputFileSystem(context) {
   context.outputFileSystem = outputFileSystem;
 }
 
-module.exports = setupOutputFileSystem;
+export default setupOutputFileSystem;

src/utils/setupWriteToDisk.js

@@ -1,5 +1,5 @@
-const fs = require("node:fs");
-const path = require("node:path");
+import fs from "node:fs";
+import path from "node:path";
 
 /** @typedef {import("@rspack/core").Compiler} Compiler */
 /** @typedef {import("@rspack/core").MultiCompiler} MultiCompiler */
@@ -83,4 +83,4 @@ function setupWriteToDisk(context) {
   }
 }
 
-module.exports = setupWriteToDisk;
+export default setupWriteToDisk;

test/fixtures/foo.js

@@ -1,6 +1,4 @@
-'use strict';
-
-require('./svg.svg');
-require('./index.html');
+import "./svg.svg";
+import "./index.html";
 
 console.log('Hey.'); // eslint-disable-line no-console

test/fixtures/webpack.array.config.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.array.dev-server-false.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.array.error.config.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.array.one-error-one-warning-one-no.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.array.one-error-one-warning-one-object.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.array.one-error-one-warning-one-success-with-names.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     name: "broken",
     mode: 'development',

test/fixtures/webpack.array.one-error-one-warning-one-success.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.array.warning.config.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.array.watch-options.config.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.client.server.config.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = [
+export default [
   {
     mode: 'development',
     context: path.resolve(__dirname),

test/fixtures/webpack.config.js

@@ -1,8 +1,8 @@
-'use strict';
+import path from "node:path";
 
-const path = require('path');
+const __dirname = import.meta.dirname;
 
-module.exports = {
+export default {
   mode: 'development',
   context: path.resolve(__dirname),
   entry: './foo.js',