Update to webpack 5 + typescript 4 + tsickle 0.46.3. Fixed compilation errors and tests.

Author: codedhead

package.json

@@ -15,40 +15,40 @@
     "testEnvironment": "node"
   },
   "peerDependencies": {
-    "typescript": "~3.8.3",
-    "webpack": "^4.29.1"
+    "typescript": "~4.9.4",
+    "webpack": "^5.75.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-typescript": "^7.1.0",
-    "@babel/runtime": "^7.3.1",
-    "@types/fs-extra": "^5.0.5",
-    "@types/loader-utils": "^1.1.3",
-    "@types/node": "^11.11.3",
-    "babel-jest": "^24.1.0",
-    "babel-loader": "^8.0.5",
-    "closure-webpack-plugin": "^2.0.0-rc.17",
-    "eslint": "^5.13.0",
-    "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jest": "^22.2.2",
-    "eslint-plugin-node": "^8.0.1",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-standard": "^4.0.0",
-    "google-closure-compiler": "^20181231.0.0-webpack-beta",
-    "jest": "^24.1.0",
-    "memory-fs": "^0.4.1",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-transform-modules-commonjs": "^7.20.11",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-typescript": "^7.18.6",
+    "@babel/runtime": "^7.20.7",
+    "@types/fs-extra": "^11.0.1",
+    "@types/node": "^18.11.18",
+    "babel-jest": "^29.3.1",
+    "babel-loader": "^9.1.2",
+    "closure-webpack-plugin": "^2.6.1",
+    "eslint": "^8.31.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-standard": "^4.1.0",
+    "google-closure-compiler": "^20230103.0.0",
+    "jest": "^29.3.1",
+    "memory-fs": "^0.5.0",
     "postscribe": "^2.0.8",
-    "source-map": "^0.6.1",
-    "ts-loader": "^5.3.3",
-    "typescript": "~3.8.3",
-    "webpack": "^4.29.1"
+    "source-map": "^0.7.4",
+    "ts-loader": "^9.4.2",
+    "typescript": "~4.9.4",
+    "webpack": "^5.75.0"
   },
   "dependencies": {
-    "fs-extra": "^7.0.1",
-    "tsickle": "^0.38.1"
+    "fs-extra": "^11.1.0",
+    "schema-utils": "^4.0.0",
+    "tsickle": "^0.46.3"
   }
 }

src/index.ts

@@ -1,21 +1,20 @@
 import fs from "fs-extra";
 import * as path from "path";
-import { getOptions, OptionObject } from "loader-utils";
-import validateOptions = require("schema-utils");
-import tsickle = require("tsickle");
+import { validate } from "schema-utils";
+import * as tsickle from "tsickle";
 import ts from "typescript";
 import { EOL } from "os";
-import webpack = require("webpack");
+import webpack from "webpack";
 import { fixCode, fixExtern } from "./fix-output";
 import { jsToTS, tsToJS } from "./path-utils";
-import { TcpSocketConnectOpts } from "net";
+import { JSONSchema7 } from "json-schema";
 
 const LOADER_NAME = "tsickle-loader";
 const DEFAULT_EXTERN_DIR = "dist/externs";
 const EXTERNS_FILE_NAME = "externs.js";
 const DEFAULT_CONFIG_FILE = "tsconfig.json";
 
-const optionsSchema = {
+const optionsSchema: JSONSchema7 = {
   type: "object",
   properties: {
     tsconfig: {
@@ -34,16 +33,16 @@ const optionsSchema = {
   }
 };
 
-interface RealOptions extends OptionObject {
+interface RealOptions {
   externDir: string;
   tsconfig: string;
   externFile: string;
   compilerConfig: ReturnType<typeof ts.parseJsonConfigFileContent>;
 }
 
-const setup = (loaderCTX: webpack.loader.LoaderContext): RealOptions => {
-  const options = getOptions(loaderCTX);
-  validateOptions(optionsSchema, options, LOADER_NAME);
+const setup = (loaderCTX: LoaderCTX): RealOptions => {
+  const options = loaderCTX.getOptions();
+  validate(optionsSchema, options, { name: LOADER_NAME });
 
   const externDir =
     options.externDir != null ? options.externDir : DEFAULT_EXTERN_DIR;
@@ -78,7 +77,7 @@ const setup = (loaderCTX: webpack.loader.LoaderContext): RealOptions => {
   };
 };
 
-type LoaderCTX = webpack.loader.LoaderContext;
+type LoaderCTX = webpack.LoaderContext<RealOptions>;
 
 const handleDiagnostics = (
   ctx: LoaderCTX,
@@ -92,13 +91,13 @@ const handleDiagnostics = (
   );
 
   if (type === "error") {
-    ctx.emitError(Error(formatted));
+    ctx.emitError(new Error(formatted));
   } else {
-    ctx.emitWarning(formatted);
+    ctx.emitWarning(new Error(formatted));
   }
 };
 
-const tsickleLoader: webpack.loader.Loader = function(
+const tsickleLoader = function (
   this: LoaderCTX,
   _source: string | Buffer
 ) {
@@ -131,15 +130,16 @@ const tsickleLoader: webpack.loader.Loader = function(
     pathToModuleName: (name: string) => name,
     fileNameToModuleId: (name: string) => name,
     options: {}, // TODO: set possible options here
-    es5Mode: true,
     moduleResolutionHost: compilerHost,
     googmodule: false,
     transformDecorators: true,
     transformTypesToClosure: true,
     typeBlackListPaths: new Set(),
     untyped: false,
     logWarning: warning =>
-      handleDiagnostics(this, [warning], diagnosticsHost, "warning")
+      handleDiagnostics(this, [warning], diagnosticsHost, "warning"),
+    generateExtraSuppressions: true,
+    rootDirsRelative: (f: string) => f,
   };
 
   const jsFiles = new Map<string, string>();

src/schema-utils.d.ts

@@ -5,8 +5,6 @@ const Memoryfs = require('memory-fs')
 module.exports = (fixture, options = {}) => {
   const compiler = webpack({
     stats: {
-      // Examine all modules
-      maxModules: Infinity,
       // Display bailout reasons
       optimizationBailout: true
     },

test/compiler.js

@@ -2,6 +2,7 @@ const compiler = require('./compiler.js')
 const fs = require('fs-extra')
 const path = require('path')
 const ClosureCompilerPlugin = require('closure-webpack-plugin')
+jest.setTimeout(20000);
 
 test('Converts a simple es6 function', async () => {
   const [output] = await compiler('examples/hello-world.ts')
@@ -37,7 +38,7 @@ test('It will correctly collapse unnecessary modules (tree shaking)', async () =
   })
 
   expect(output).toContain('myRealExport')
-}, 10e3)
+})
 
 test('will work with closure compiler plugin', async () => {
   const externDir = path.resolve(__dirname, 'tmp', 'externs-' + Math.floor(Math.random() * 10))
@@ -75,6 +76,6 @@ test('will work with closure compiler plugin', async () => {
     externDir
   })
 
-  fs.writeFileSync('./complex-example.js', output)
+  fs.writeFileSync(path.resolve(__dirname,'tmp/complex-example.js'), output)
   expect(output).toBeTruthy()
-}, 15e3) // this can be *very* slow
+}) // this can be *very* slow

test/loader.test.js

@@ -6,5 +6,6 @@
     "module": "es2015",
     "moduleResolution": "node",
     "target": "es5",
+    "rootDir": "."
   }
 }

test/tsconfig.explicit.json

@@ -5,5 +5,6 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "rootDir": "."
   }
 }