Webpack 5 (#66)

* Fixing typing issues with webpack 5
Proper fix gated by webpack/webpack#12869
Added unit tests
Found issue with Logger not using `stderrConsole` when option was set to do so.

* Fixing typing issues with webpack 5
Proper fix gated by webpack/webpack#12869
Added unit tests
Found issue with Logger not using `stderrConsole` when option was set to do so.

* Ran prettier manually

.husky/.gitignore

@@ -0,0 +1 @@
+_

example/custom-fs.js

@@ -1,7 +1,7 @@
-const fs = require('fs');
-const webpack = require('webpack');
+const fs = require("fs");
+const webpack = require("webpack");
 
-const config = require('./webpack.config');
+const config = require("./webpack.config");
 
 const compiler = webpack(config);
 
@@ -21,5 +21,5 @@ compiler.run(function (error, stats) {
     return process.exit(1);
   }
 
-  console.log('Successfully compiled');
+  console.log("Successfully compiled");
 });

example/webpack.config.js

@@ -7,7 +7,7 @@ module.exports = {
   entry: "./index",
   output: {
     path: path.join(__dirname, "temp"),
-    filename: "bundle.js"
+    filename: "bundle.js",
   },
   module: {
     rules: [
@@ -16,10 +16,10 @@ module.exports = {
         exclude: /^node_modules/,
         loader: "ts-loader",
         options: {
-          configFile: "./example/tsconfig.json"
-        }
-      }
-    ]
+          configFile: "./example/tsconfig.json",
+        },
+      },
+    ],
   },
   resolve: {
     extensions: [".ts", ".tsx", ".js"],
@@ -30,7 +30,7 @@ module.exports = {
         extensions: [".ts", ".tsx"],
         mainFields: ["browser", "main"],
         // baseUrl: "/foo"
-      })
-    ]
-  }
+      }),
+    ],
+  },
 };

jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  transform: {
+    "^.+\\.[tj]sx?$": "ts-jest",
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  globals: { "ts-jest": { tsConfig: "<rootDir>/src/tsconfig.spec.json" } },
+};

package.json

@@ -8,28 +8,33 @@
   "license": "MIT",
   "repository": "https://github.com/dividab/tsconfig-paths-webpack-plugin",
   "dependencies": {
-    "chalk": "^2.3.0",
-    "enhanced-resolve": "^4.0.0",
-    "tsconfig-paths": "^3.4.0"
+    "chalk": "^4.1.0",
+    "enhanced-resolve": "^5.7.0",
+    "tsconfig-paths": "^3.9.0"
   },
   "devDependencies": {
-    "@types/node": "^8.0.9",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.2.11",
-    "prettier": "^2.0.5",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.33",
+    "husky": "^5.1.3",
+    "jest": "^26.6.3",
+    "jest-mock-process": "^1.4.0",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "ts-loader": "^2.2.2",
-    "tslint": "^5.8.0",
+    "ts-jest": "^26.5.3",
+    "ts-loader": "^8.0.17",
+    "tslint": "^5.20.1",
     "tslint-immutable": "^6.0.1",
-    "typescript": "^3.9.7",
-    "webpack": "^4.44.0",
-    "webpack-cli": "^3.3.12"
+    "typescript": "^4.2.3",
+    "webpack": "^5.24.4",
+    "webpack-cli": "^4.5.0"
   },
   "scripts": {
     "compile:example": "tsc -p example",
     "example": "yarn build && cd example && webpack && node custom-fs.js",
-    "build": "rimraf lib && tsc -p src",
+    "build": "npm run test && rimraf lib && tsc -p src/tsconfig.lib.json",
     "lint": "tslint -t msbuild './src/**/*.ts{,x}' -e './src/node_modules/**/*'",
+    "test": "jest",
     "verify": "yarn build && yarn lint",
     "preversion": "yarn verify",
     "postversion": "git push --tags && yarn publish --new-version $npm_package_version && git push && echo \"Successfully released version $npm_package_version!\""

src/__tests__/logger.spec.ts

@@ -0,0 +1,65 @@
+import { makeLogger } from "../logger";
+import * as chalk from "chalk";
+import { mockProcessStdout, mockProcessStderr } from "jest-mock-process";
+
+// jest.mock("Console", () => {
+//   return jest.fn();
+// });
+
+describe(`Logger`, () => {
+  const mockStdout = mockProcessStdout();
+  const mockStderr = mockProcessStderr();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test(`Can create a logger instance to process.stdout`, () => {
+    const result = makeLogger(
+      {
+        baseUrl: undefined,
+        colors: false,
+        configFile: "",
+        context: undefined,
+        extensions: [],
+        logInfoToStdOut: true,
+        logLevel: "INFO",
+        mainFields: [],
+        silent: false,
+      },
+      new chalk.Instance()
+    );
+    expect(result).toBeDefined();
+
+    result.logInfo(`Test logInfo`);
+    result.logWarning(`Test logWarning`);
+    result.logError(`Test logError`);
+    result.log(`Test external logger`);
+
+    expect(mockStdout).toHaveBeenCalledTimes(2);
+    expect(mockStderr).toHaveBeenCalledTimes(2);
+  });
+
+  test(`Can create a logger instance to process.stderr`, () => {
+    const result = makeLogger(
+      {
+        baseUrl: undefined,
+        colors: false,
+        configFile: "",
+        context: undefined,
+        extensions: [],
+        logInfoToStdOut: false,
+        logLevel: "INFO",
+        mainFields: [],
+        silent: false,
+      },
+      new chalk.Instance()
+    );
+    expect(result).toBeDefined();
+
+    result.log(`Test external logger`);
+
+    expect(mockStderr).toHaveBeenCalledTimes(1);
+    expect(mockStdout).not.toHaveBeenCalled();
+  });
+});

src/__tests__/plugins.spec.ts

@@ -0,0 +1,63 @@
+import * as webpack from "webpack";
+import { Configuration } from "webpack";
+const path = require("path");
+import { TsconfigPathsPlugin } from "../plugin";
+
+describe(`TsconfigPathsPlugin`, () => {
+  const SETTINGS: Configuration = {
+    mode: "development",
+    context: path.resolve(__dirname, "src"),
+    entry: `../../../example/src/index.ts`,
+    output: {
+      path: path.join(__dirname, "../../temp"),
+      filename: "bundle.js",
+    },
+    module: {
+      rules: [
+        {
+          test: /\\.tsx?$/,
+          exclude: /^node_modules/,
+          loader: "ts-loader",
+          options: {
+            configFile: "./example/tsconfig.json",
+          },
+        },
+      ],
+    },
+    resolve: {
+      extensions: [".ts", ".tsx", ".js"],
+    },
+  };
+
+  it(`Can initialize the plugin`, async (done) => {
+    const testPlugin = new TsconfigPathsPlugin({
+      configFile: `${__dirname}/../../example/tsconfig.json`,
+      logLevel: "INFO",
+      extensions: [".ts", ".tsx"],
+      mainFields: ["browser", "main"],
+    });
+    expect(testPlugin).toBeInstanceOf(TsconfigPathsPlugin);
+
+    const testSettings: webpack.Configuration = {
+      ...SETTINGS,
+      resolve: {
+        extensions: [".ts", ".tsx", ".js"],
+        plugins: [testPlugin],
+      },
+    };
+
+    const compiler = webpack(testSettings);
+
+    compiler.run((err, stats) => {
+      if (err) {
+        done(err);
+        return;
+      }
+      expect(stats).toBeDefined();
+      const details = stats?.toJson();
+      expect(details?.errorsCount).toEqual(0);
+      // TODO There should probably be a test that verifies the stats match what is expected
+      done();
+    });
+  });
+});

src/logger.ts

@@ -17,7 +17,7 @@ export interface Logger {
 enum LogLevel {
   INFO = 1,
   WARN = 2,
-  ERROR = 3
+  ERROR = 3,
 }
 
 const stderrConsole = new Console(process.stderr);
@@ -29,13 +29,10 @@ const doNothingLogger = (_message: string) => {
 
 const makeLoggerFunc = (options: Options): InternalLoggerFunc =>
   options.silent
-    ? // tslint:disable-next-line:no-any
-      (_whereToLog: any, _message: string) => {
+    ? (_whereToLog: Console, _message: string) => {
         /* Do nothing */
       }
-    : // tslint:disable-next-line:no-any
-      (whereToLog: any, message: string) =>
-        console.log.call(whereToLog, message);
+    : (whereToLog: Console, message: string) => whereToLog.log(message);
 
 const makeExternalLogger = (
   loaderOptions: Options,
@@ -83,6 +80,6 @@ export function makeLogger(options: Options, colors: Chalk): Logger {
     log: makeExternalLogger(options, logger),
     logInfo: makeLogInfo(options, logger, colors.green),
     logWarning: makeLogWarning(options, logger, colors.yellow),
-    logError: makeLogError(options, logger, colors.red)
+    logError: makeLogError(options, logger, colors.red),
   };
 }

src/options.ts

@@ -21,7 +21,7 @@ const validOptions: ReadonlyArray<ValidOptions> = [
   "logLevel",
   "logInfoToStdOut",
   "context",
-  "mainFields"
+  "mainFields",
 ];
 
 /**
@@ -67,14 +67,14 @@ function makeOptions(rawOptions: Partial<Options>): Options {
       logInfoToStdOut: false,
       context: undefined,
       colors: true,
-      mainFields: ["main"]
+      mainFields: ["main"],
     } as Options),
-    ...rawOptions
+    ...rawOptions,
   };
 
   const options2: Options = {
     ...options,
-    logLevel: options.logLevel.toUpperCase() as LogLevel
+    logLevel: options.logLevel.toUpperCase() as LogLevel,
   };
 
   return options2;