Add support for multiple tsconfig paths (#79)

* Add support for multiple tsconfig paths

* Update readme and add test

---------

Co-authored-by: Will Lynch <will.lynch@oracle.com>

README.md

@@ -100,6 +100,10 @@ This is important if you read from stdout or stderr and for proper error
 handling. The default value ensures that you can read from stdout e.g. via pipes
 or you use webpack -j to generate json output.
 
+#### references _(string[]) (default=undefined)
+
+Support for [Typescript Project References](https://www.typescriptlang.org/docs/handbook/project-references.html).
+
 ## Typescript support
 
 This package has typescript typings included. If your webpack config is using typescript, you can use this syntax to import the default export:

examples/example/src/use-from-ts/index.ts

@@ -0,0 +1,5 @@
+import { TsconfigPathsPlugin } from "../../../../src/index";
+import TsconfigPathsPluginDefault from "../../../../src/index";
+
+const plugin1 = new TsconfigPathsPlugin();
+const plugin2 = new TsconfigPathsPluginDefault();

example/tsconfig.json → examples/example/tsconfig.json

@@ -9,6 +9,7 @@
       "foo": ["./src/mapped/foo"],
       "bar/*": ["./src/mapped/bar/*"],
       "*": ["./src/mapped/star/*"]
-    }
+    },
+    "composite": true
   }
 }

examples/referenceExample/custom-fs.js

@@ -0,0 +1,25 @@
+const fs = require("fs");
+const webpack = require("webpack");
+
+const config = require("./webpack.config");
+
+const compiler = webpack(config);
+
+compiler.inputFileSystem = fs;
+
+compiler.run(function (error, stats) {
+  if (error) {
+    console.error(error);
+    return process.exit(1);
+  }
+
+  if (stats.compilation.errors.length) {
+    stats.compilation.errors.forEach((compilationError) => {
+      console.error(compilationError);
+    });
+
+    return process.exit(1);
+  }
+
+  console.log("Successfully compiled");
+});

examples/referenceExample/src/index.ts

@@ -0,0 +1,16 @@
+import * as foo from "src/mapped/buzz";
+import * as bar from "src/mapped/fizz/file1";
+import * as myStar from "star-bar";
+import * as packagedBrowser from "browser-field-package";
+import * as packagedMain from "main-field-package";
+import * as packagedIndex from "no-main-field-package";
+
+console.log(
+  "HELLO WORLD!",
+  foo.message,
+  bar.message,
+  myStar.message,
+  packagedBrowser.message,
+  packagedMain.message,
+  packagedIndex.message
+);

examples/referenceExample/src/mapped/bar/file1.ts

@@ -0,0 +1 @@
+export const message = "fizz";

examples/referenceExample/src/mapped/foo/index.ts

@@ -0,0 +1 @@
+export const message = "GOODBYE!";

examples/referenceExample/src/mapped/star/browser-field-package/browser.ts

@@ -0,0 +1 @@
+export const message = "browser";

examples/referenceExample/src/mapped/star/browser-field-package/node.ts

@@ -0,0 +1 @@
+export const message = "node";

examples/referenceExample/src/mapped/star/browser-field-package/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "browser-field",
+  "main": "node.ts",
+  "browser": "browser.ts"
+}

examples/referenceExample/src/mapped/star/main-field-package/node.ts

@@ -0,0 +1 @@
+export const message = "node";

examples/referenceExample/src/mapped/star/main-field-package/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "main-field",
+  "main": "node.ts"
+}

examples/referenceExample/src/mapped/star/no-main-field-package/index.ts

@@ -0,0 +1 @@
+export const message = "index";

examples/referenceExample/src/mapped/star/no-main-field-package/package.json

@@ -0,0 +1,3 @@
+{
+  "name": "no-main-field"
+}

examples/referenceExample/src/mapped/star/star-bar/index.ts

@@ -0,0 +1 @@
+export const message = "Hello Star!";

examples/referenceExample/src/use-from-ts/index.ts

@@ -0,0 +1,5 @@
+import { TsconfigPathsPlugin } from "../../../../src/index";
+import TsconfigPathsPluginDefault from "../../../../src/index";
+
+const plugin1 = new TsconfigPathsPlugin();
+const plugin2 = new TsconfigPathsPluginDefault();

examples/referenceExample/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    // Output
+    "module": "commonjs",
+    "target": "es5",
+    "outDir": "./js_out",
+    "baseUrl": ".",
+    "paths": {
+      "foo": ["src/mapped/bar"],
+      "bar/*": ["src/mapped/foo/*"],
+      "*": ["./src/mapped/star/*"]
+    }
+  },
+  "references": [
+    {
+      "path": "../example/tsconfig.json"
+    }
+  ]
+}

examples/referenceExample/webpack.config.js

@@ -0,0 +1,37 @@
+const path = require("path");
+const TsconfigPathsPlugin = require("../");
+
+module.exports = {
+  mode: "development",
+  context: path.resolve(__dirname, "src"),
+  entry: "./index",
+  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"],
+    plugins: [
+      new TsconfigPathsPlugin({
+        configFile: "./tsconfig.json",
+        logLevel: "info",
+        extensions: [".ts", ".tsx"],
+        mainFields: ["browser", "main"],
+        references: ["../example/tsconfig.json"]
+        // baseUrl: "/foo"
+      }),
+    ],
+  },
+};

package.json

@@ -35,8 +35,8 @@
   },
   "scripts": {
     "prepare": "husky install",
-    "compile:example": "tsc -p example",
-    "example": "yarn build && cd example && webpack && node custom-fs.js",
+    "compile:example": "tsc -p examples/example",
+    "example": "yarn build && cd examples/example && webpack && node custom-fs.js",
     "build": "rimraf lib && tsc -p .",
     "lint": "eslint \"./{src,tests}/**/*.ts{,x}\" --ext .js,.ts,.tsx -f visualstudio",
     "test": "jest",

src/__tests__/logger.test.ts

@@ -26,6 +26,7 @@ describe(`Logger`, () => {
         logLevel: "INFO",
         mainFields: [],
         silent: false,
+        references: undefined,
       },
       new chalk.Instance()
     );
@@ -52,6 +53,7 @@ describe(`Logger`, () => {
         logLevel: "INFO",
         mainFields: [],
         silent: false,
+        references: undefined,
       },
       new chalk.Instance()
     );

src/__tests__/plugins.test.ts

@@ -7,7 +7,7 @@ describe(`TsconfigPathsPlugin`, () => {
   const SETTINGS: Configuration = {
     mode: "development",
     context: path.resolve(__dirname, "src"),
-    entry: `${__dirname}/../../example/src/index.ts`,
+    entry: `${__dirname}/../../examples/example/src/index.ts`,
     output: {
       path: path.join(__dirname, "../../temp"),
       filename: "bundle.js",
@@ -31,7 +31,7 @@ describe(`TsconfigPathsPlugin`, () => {
 
   it(`Can initialize the plugin`, (done) => {
     const testPlugin = new TsconfigPathsPlugin({
-      configFile: `${__dirname}/../../example/tsconfig.json`,
+      configFile: `${__dirname}/../../examples/example/tsconfig.json`,
       logLevel: "INFO",
       extensions: [".ts", ".tsx"],
       mainFields: ["browser", "main"],
@@ -63,7 +63,7 @@ describe(`TsconfigPathsPlugin`, () => {
 
   it(`Test to ensure Apply exists and is working`, (done) => {
     const webpackSettings: Configuration = {
-      entry: `${__dirname}/../../example/src/index.ts`,
+      entry: `${__dirname}/../../examples/example/src/index.ts`,
       target: "web",
       output: {
         path: path.join(__dirname, "../../temp"),
@@ -86,7 +86,7 @@ describe(`TsconfigPathsPlugin`, () => {
         ],
         plugins: [
           new TsconfigPathsPlugin({
-            configFile: `${__dirname}/../../example/tsconfig.json`,
+            configFile: `${__dirname}/../../examples/example/tsconfig.json`,
           }),
         ],
       },
@@ -117,4 +117,38 @@ describe(`TsconfigPathsPlugin`, () => {
       done();
     });
   });
+
+  it(`Resolves project references`, (done) => {
+    const testPlugin = new TsconfigPathsPlugin({
+      configFile: `${__dirname}/../../examples/referenceExample/tsconfig.json`,
+      logLevel: "INFO",
+      extensions: [".ts", ".tsx"],
+      mainFields: ["browser", "main"],
+      references: [`${__dirname}/../../examples/example/tsconfig.json`],
+    });
+    expect(testPlugin).toBeInstanceOf(TsconfigPathsPlugin);
+
+    const testSettings: 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/options.ts

@@ -10,6 +10,7 @@ export interface Options {
   readonly context: string | undefined;
   readonly colors: boolean;
   readonly mainFields: string[];
+  readonly references: string[] | undefined;
 }
 
 type ValidOptions = keyof Options;
@@ -22,6 +23,7 @@ const validOptions: ReadonlyArray<ValidOptions> = [
   "logInfoToStdOut",
   "context",
   "mainFields",
+  "references",
 ];
 
 /**
@@ -69,6 +71,7 @@ function makeOptions(rawOptions: Partial<Options>): Options {
       context: undefined,
       colors: true,
       mainFields: ["main"],
+      references: undefined,
     } as Options),
     ...rawOptions,
   };