feat: remove cjs wrapper (#1146)

Author: alexander-akait

package.json

@@ -11,31 +11,33 @@
     "type": "opencollective",
     "url": "https://opencollective.com/webpack"
   },
-  "main": "dist/cjs.js",
-  "types": "types/cjs.d.ts",
+  "main": "dist/index.js",
+  "types": "types/index.d.ts",
   "engines": {
     "node": ">= 12.13.0"
   },
   "scripts": {
     "commitlint": "commitlint --from=master",
+    "security": "npm audit --production",
     "fmt:check": "prettier \"{**/*,*}.{js,json,md,yml,css}\" --list-different",
     "lint:js": "eslint --cache src test",
     "lint:types": "tsc --pretty --noEmit",
     "lint": "npm-run-all lint:js fmt:check",
     "fmt": "npm run fmt:check -- --write",
     "fix:js": "npm run lint:js -- --fix",
     "fix": "npm-run-all fix:js fmt",
-    "prepare": "husky install && npm run build",
+    "clean": "del-cli dist types",
+    "prebuild": "npm run clean",
     "build:types": "tsc --declaration --emitDeclarationOnly --outDir types && prettier \"types/**/*.ts\" --write",
     "build:code": "cross-env NODE_ENV=production babel src -d dist --copy-files",
     "build": "npm-run-all -p \"build:**\"",
-    "release": "standard-version",
-    "security": "npm audit --production",
     "test:only": "cross-env NODE_ENV=test jest",
     "test:watch": "npm run test:only -- --watch",
     "test:coverage": "npm run test:only -- --collectCoverageFrom=\"src/**/*.js\" --coverage",
     "pretest": "npm run lint",
-    "test": "npm run test:coverage"
+    "test": "npm run test:coverage",
+    "prepare": "husky install && npm run build",
+    "release": "standard-version"
   },
   "files": [
     "dist",

src/cjs.js

@@ -1,13 +1,13 @@
-import { validate } from "schema-utils";
-import mime from "mime-types";
+const { validate } = require("schema-utils");
+const mime = require("mime-types");
 
-import middleware from "./middleware";
-import getFilenameFromUrl from "./utils/getFilenameFromUrl";
-import setupHooks from "./utils/setupHooks";
-import setupWriteToDisk from "./utils/setupWriteToDisk";
-import setupOutputFileSystem from "./utils/setupOutputFileSystem";
-import ready from "./utils/ready";
-import schema from "./options.json";
+const middleware = require("./middleware");
+const getFilenameFromUrl = require("./utils/getFilenameFromUrl");
+const setupHooks = require("./utils/setupHooks");
+const setupWriteToDisk = require("./utils/setupWriteToDisk");
+const setupOutputFileSystem = require("./utils/setupOutputFileSystem");
+const ready = require("./utils/ready");
+const schema = require("./options.json");
 
 const noop = () => {};
 
@@ -18,10 +18,9 @@ const noop = () => {};
 /** @typedef {import("webpack").Stats} Stats */
 /** @typedef {import("webpack").MultiStats} MultiStats */
 
-// TODO fix me
 /**
  * @typedef {Object} ExtendedServerResponse
- * @property {{ webpack?: { devMiddleware?: Context<any, any> } }} [locals]
+ * @property {{ webpack?: { devMiddleware?: Context<IncomingMessage, ServerResponse> } }} [locals]
  */
 
 /** @typedef {import("http").IncomingMessage} IncomingMessage */
@@ -146,7 +145,7 @@ const noop = () => {};
  * @param {Options<Request, Response>} [options]
  * @returns {API<Request, Response>}
  */
-export default function wdm(compiler, options = {}) {
+function wdm(compiler, options = {}) {
   validate(/** @type {Schema} */ (schema), options, {
     name: "Dev Middleware",
     baseDataPath: "options",
@@ -277,3 +276,5 @@ export default function wdm(compiler, options = {}) {
 
   return instance;
 }
+
+module.exports = wdm;

src/index.js

@@ -1,18 +1,18 @@
-import path from "path";
+const path = require("path");
 
-import mime from "mime-types";
-import parseRange from "range-parser";
+const mime = require("mime-types");
+const parseRange = require("range-parser");
 
-import getFilenameFromUrl from "./utils/getFilenameFromUrl";
-import {
+const getFilenameFromUrl = require("./utils/getFilenameFromUrl");
+const {
   getHeaderNames,
   getHeaderFromRequest,
   getHeaderFromResponse,
   setHeaderForResponse,
   setStatusCode,
   send,
-} from "./utils/compatibleAPI";
-import ready from "./utils/ready";
+} = require("./utils/compatibleAPI");
+const ready = require("./utils/ready");
 
 /** @typedef {import("./index.js").NextFunction} NextFunction */
 /** @typedef {import("./index.js").IncomingMessage} IncomingMessage */
@@ -58,7 +58,7 @@ const BYTES_RANGE_REGEXP = /^ *bytes/i;
  * @param {import("./index.js").Context<Request, Response>} context
  * @return {import("./index.js").Middleware<Request, Response>}
  */
-export default function wrapper(context) {
+function wrapper(context) {
   return async function middleware(req, res, next) {
     const acceptedMethods = context.options.methods || ["GET", "HEAD"];
 
@@ -270,3 +270,5 @@ export default function wrapper(context) {
     }
   };
 }
+
+module.exports = wrapper;

src/middleware.js

@@ -1,8 +1,8 @@
-import path from "path";
-import { parse } from "url";
-import querystring from "querystring";
+const path = require("path");
+const { parse } = require("url");
+const querystring = require("querystring");
 
-import getPaths from "./getPaths";
+const getPaths = require("./getPaths");
 
 /** @typedef {import("../index.js").IncomingMessage} IncomingMessage */
 /** @typedef {import("../index.js").ServerResponse} ServerResponse */
@@ -49,7 +49,7 @@ const memoizedParse = mem(parse);
  * @param {string} url
  * @returns {string | undefined}
  */
-export default function getFilenameFromUrl(context, url) {
+function getFilenameFromUrl(context, url) {
   const { options } = context;
   const paths = getPaths(context);
 
@@ -142,3 +142,5 @@ export default function getFilenameFromUrl(context, url) {
   // eslint-disable-next-line consistent-return
   return foundFilename;
 }
+
+module.exports = getFilenameFromUrl;

src/utils/getFilenameFromUrl.js

@@ -9,7 +9,7 @@
  * @template {ServerResponse} Response
  * @param {import("../index.js").Context<Request, Response>} context
  */
-export default function getPaths(context) {
+function getPaths(context) {
   const { stats, options } = context;
   /** @type {Stats[]} */
   const childStats =
@@ -35,3 +35,5 @@ export default function getPaths(context) {
 
   return publicPaths;
 }
+
+module.exports = getPaths;

src/utils/getPaths.js

@@ -9,7 +9,7 @@
  * @param {Request} [req]
  * @returns {void}
  */
-export default function ready(context, callback, req) {
+function ready(context, callback, req) {
   if (context.state) {
     callback(context.stats);
 
@@ -22,3 +22,5 @@ export default function ready(context, callback, req) {
 
   context.callbacks.push(callback);
 }
+
+module.exports = ready;

src/utils/ready.js

@@ -1,5 +1,5 @@
-import webpack from "webpack";
-import { isColorSupported } from "colorette";
+const webpack = require("webpack");
+const { isColorSupported } = require("colorette");
 
 /** @typedef {import("webpack").Configuration} Configuration */
 /** @typedef {import("webpack").Compiler} Compiler */
@@ -20,7 +20,7 @@ import { isColorSupported } from "colorette";
  * @template {ServerResponse} Response
  * @param {import("../index.js").Context<Request, Response>} context
  */
-export default function setupHooks(context) {
+function setupHooks(context) {
   function invalid() {
     if (context.state) {
       context.logger.log("Compilation starting...");
@@ -198,3 +198,5 @@ export default function setupHooks(context) {
   context.compiler.hooks.invalid.tap("webpack-dev-middleware", invalid);
   context.compiler.hooks.done.tap("webpack-dev-middleware", done);
 }
+
+module.exports = setupHooks;

src/utils/setupHooks.js

@@ -1,6 +1,5 @@
-import path from "path";
-
-import { createFsFromVolume, Volume } from "memfs";
+const path = require("path");
+const memfs = require("memfs");
 
 /** @typedef {import("webpack").MultiCompiler} MultiCompiler */
 /** @typedef {import("../index.js").IncomingMessage} IncomingMessage */
@@ -11,7 +10,7 @@ import { createFsFromVolume, Volume } from "memfs";
  * @template {ServerResponse} Response
  * @param {import("../index.js").Context<Request, Response>} context
  */
-export default function setupOutputFileSystem(context) {
+function setupOutputFileSystem(context) {
   let outputFileSystem;
 
   if (context.options.outputFileSystem) {
@@ -34,7 +33,7 @@ export default function setupOutputFileSystem(context) {
 
     outputFileSystem = outputFileSystemFromOptions;
   } else {
-    outputFileSystem = createFsFromVolume(new Volume());
+    outputFileSystem = memfs.createFsFromVolume(new memfs.Volume());
     // TODO: remove when we drop webpack@4 support
     // @ts-ignore
     outputFileSystem.join = path.join.bind(path);
@@ -52,3 +51,5 @@ export default function setupOutputFileSystem(context) {
   // eslint-disable-next-line no-param-reassign
   context.outputFileSystem = outputFileSystem;
 }
+
+module.exports = setupOutputFileSystem;

src/utils/setupOutputFileSystem.js

@@ -1,5 +1,5 @@
-import fs from "fs";
-import path from "path";
+const fs = require("fs");
+const path = require("path");
 
 /** @typedef {import("webpack").Compiler} Compiler */
 /** @typedef {import("webpack").MultiCompiler} MultiCompiler */
@@ -12,7 +12,7 @@ import path from "path";
  * @template {ServerResponse} Response
  * @param {import("../index.js").Context<Request, Response>} context
  */
-export default function setupWriteToDisk(context) {
+function setupWriteToDisk(context) {
   /**
    * @type {Compiler[]}
    */
@@ -113,3 +113,5 @@ export default function setupWriteToDisk(context) {
     );
   }
 }
+
+module.exports = setupWriteToDisk;

src/utils/setupWriteToDisk.js

@@ -4,7 +4,7 @@ const express = require("express");
 const webpack = require("webpack");
 const merge = require("deepmerge");
 
-const middleware = require("../../dist").default;
+const middleware = require("../../dist");
 const defaultConfig = require("../fixtures/webpack.config");
 
 const configEntries = [];

test/cjs.test.js

@@ -20,7 +20,9 @@ describe("setupOutputFileSystem", () => {
       compiler: {},
       options: {},
     };
+
     setupOutputFileSystem(context);
+
     // make sure that this is the default fs created
     expect(context.compiler.outputFileSystem.testFs).toBeTruthy();
     expect(context.outputFileSystem.testFs).toBeTruthy();
@@ -36,7 +38,9 @@ describe("setupOutputFileSystem", () => {
       },
       options: {},
     };
+
     setupOutputFileSystem(context);
+
     context.compiler.compilers.forEach((comp) => {
       expect(comp.outputFileSystem).toBeTruthy();
     });
@@ -49,6 +53,7 @@ describe("setupOutputFileSystem", () => {
         outputFileSystem: {},
       },
     };
+
     expect(() => {
       setupOutputFileSystem(context);
     }).toThrow(/join/);
@@ -63,6 +68,7 @@ describe("setupOutputFileSystem", () => {
         },
       },
     };
+
     expect(() => {
       setupOutputFileSystem(context);
     }).toThrow(/mkdirp/);
@@ -78,7 +84,9 @@ describe("setupOutputFileSystem", () => {
         },
       },
     };
+
     setupOutputFileSystem(context);
+
     expect(context.outputFileSystem).toEqual(context.options.outputFileSystem);
   });
 });