feat: add context option for typescript reporter (#430)

Add `context` option to support usage of external tsconfig.json files.

✅ Closes: #297

Author: piotr-oles

.gitignore

@@ -5,7 +5,7 @@
 lib
 
 # Package archive used by e2e tests
-fork-ts-checker-webpack-plugin.tgz
+fork-ts-checker-webpack-plugin-0.0.0-semantic-release.tgz
 
 # Coverage directory used by tools like istanbul
 coverage

README.md

@@ -153,16 +153,17 @@ Options passed to the plugin constructor will overwrite options from the cosmico
 
 Options for the TypeScript checker (`typescript` option object).
 
-| Name                 | Type                  | Default value                                                             | Description |
-| -------------------- | --------------------- | ------------------------------------------------------------------------- | ----------- |
-| `enabled`            | `boolean`             | `true`                                                                    | If `true`, it enables TypeScript checker. |
-| `memoryLimit`        | `number`              | `2048`                                                                    | Memory limit for the checker process in MB. If the process exits with the allocation failed error, try to increase this number. |
-| `tsconfig`           | `string`              | `'tsconfig.json'`                                                         | Path to the `tsconfig.json` file (path relative to the `compiler.options.context` or absolute path) |
-| `build`              | `boolean`             | `false`                                                                   | If truthy, it's the equivalent of the `--build` flag for the `tsc` command. |
-| `mode`               | `'readonly'` or `'write-tsbuildinfo'` or `'write-references'` | `'readonly'`                      | If you use the `babel-loader`, it's recommended to use `write-references` mode to improve initial compilation time. If you use `ts-loader`, it's recommended to use `readonly` mode to not overwrite filed emitted by `ts-loader`. |
-| `compilerOptions`    | `object`              | `{ skipLibCheck: true, skipDefaultLibCheck: true  }`                      | These options will overwrite compiler options from the `tsconfig.json` file. |
-| `diagnosticsOptions` | `object`              | `{ syntactic: false, semantic: true, declaration: false, global: false }` | Settings to select which diagnostics do we want to perform. |
-| `extensions`         | `object`              | `{}`                                                                      | See [TypeScript extensions options](#typescript-extensions-options). |
+| Name                 | Type      | Default value                                                             | Description |
+| -------------------- | --------- | ------------------------------------------------------------------------- | ----------- |
+| `enabled`            | `boolean` | `true`                                                                    | If `true`, it enables TypeScript checker. |
+| `memoryLimit`        | `number`  | `2048`                                                                    | Memory limit for the checker process in MB. If the process exits with the allocation failed error, try to increase this number. |
+| `tsconfig`           | `string`  | `'tsconfig.json'`                                                         | Path to the `tsconfig.json` file (path relative to the `compiler.options.context` or absolute path) |
+| `context`            | `string`  | `dirname(configuration.tsconfig)`                                         | The base path for finding files specified in the `tsconfig.json`. Same as the `context` option from the [ts-loader](https://github.com/TypeStrong/ts-loader#context). Useful if you want to keep your `tsconfig.json` in an external package. Keep in mind that **not** having a `tsconfig.json` in your project root can cause different behaviour between `fork-ts-checker-webpack-plugin` and `tsc`. When using editors like `VS Code` it is advised to add a `tsconfig.json` file to the root of the project and extend the config file referenced in option `tsconfig`.  |
+| `build`              | `boolean` | `false`                                                                   | The equivalent of the `--build` flag for the `tsc` command. To enable `incremental` mode, set it in the `tsconfig.json` file. |
+| `mode`               | `'readonly'` or `'write-tsbuildinfo'` or `'write-references'` | `'readonly'`          | If you use the `babel-loader`, it's recommended to use `write-references` mode to improve initial compilation time. If you use `ts-loader`, it's recommended to use `readonly` mode to not overwrite filed emitted by `ts-loader`. |
+| `compilerOptions`    | `object`  | `{ skipLibCheck: true, skipDefaultLibCheck: true  }`                      | These options will overwrite compiler options from the `tsconfig.json` file. |
+| `diagnosticsOptions` | `object`  | `{ syntactic: false, semantic: true, declaration: false, global: false }` | Settings to select which diagnostics do we want to perform. |
+| `extensions`         | `object`  | `{}`                                                                      | See [TypeScript extensions options](#typescript-extensions-options). |
 
 #### TypeScript extensions options
 

examples/eslint/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "fork-ts-checker-webpack-plugin-ts-loader-example",
+  "name": "fork-ts-checker-webpack-plugin-eslint-example",
   "version": "0.0.0",
   "main": "dist/index.js",
   "license": "MIT",

package.json

@@ -35,8 +35,7 @@
     "lint": "cross-env eslint ./src ./test --ext .ts",
     "test": "yarn build && yarn test:unit && yarn test:e2e",
     "test:unit": "cross-env jest unit",
-    "test:pack": "yarn pack --filename fork-ts-checker-webpack-plugin.tgz",
-    "test:e2e": "yarn test:pack && cross-env jest e2e --ci --runInBand --bail --verbose",
+    "test:e2e": "npm pack && cross-env jest e2e --ci --runInBand --bail --verbose",
     "precommit": "cross-env lint-staged && yarn build && yarn test:unit",
     "commit": "cross-env git-cz",
     "semantic-release": "semantic-release"
@@ -112,7 +111,6 @@
     "tree-kill": "^1.2.2",
     "ts-jest": "^25.3.1",
     "typescript": "^3.8.3",
-    "unixify": "^1.0.0",
     "webpack": "^4.42.1"
   },
   "engines": {

src/ForkTsCheckerWebpackPlugin.ts

@@ -14,6 +14,7 @@ import { createEsLintReporterRpcClient } from './eslint-reporter/reporter/EsLint
 import { tapStartToConnectAndRunReporter } from './hooks/tapStartToConnectAndRunReporter';
 import { tapStopToDisconnectReporter } from './hooks/tapStopToDisconnectReporter';
 import { tapDoneToCollectRemoved } from './hooks/tapDoneToCollectRemoved';
+import { tapAfterCompileToAddDependencies } from './hooks/tapAfterCompileToAddDependencies';
 import { tapErrorToLogMessage } from './hooks/tapErrorToLogMessage';
 import { getForkTsCheckerWebpackPluginHooks } from './hooks/pluginHooks';
 
@@ -59,6 +60,7 @@ class ForkTsCheckerWebpackPlugin implements webpack.Plugin {
 
       tapStartToConnectAndRunReporter(compiler, reporter, configuration, state);
       tapDoneToCollectRemoved(compiler, configuration, state);
+      tapAfterCompileToAddDependencies(compiler, configuration);
       tapStopToDisconnectReporter(compiler, reporter, state);
       tapErrorToLogMessage(compiler, configuration);
     } else {

src/ForkTsCheckerWebpackPluginOptions.json

@@ -117,6 +117,10 @@
               "type": "string",
               "description": "Path to tsconfig.json. By default plugin uses context or process.cwd() to localize tsconfig.json file."
             },
+            "context": {
+              "type": "string",
+              "description": "The base path for finding files specified in the tsconfig.json. Same as context option from the ts-loader."
+            },
             "build": {
               "type": "boolean",
               "description": "The equivalent of the `--build` flag from the `tsc`."
@@ -126,10 +130,6 @@
               "enum": ["readonly", "write-tsbuildinfo", "write-references"],
               "description": "`readonly` keeps all emitted files in memory, `write-tsbuildinfo` which writes only .tsbuildinfo files and `write-references` which writes both .tsbuildinfo and referenced projects output"
             },
-            "incremental": {
-              "type": "boolean",
-              "description": "The equivalent of the `--incremental` flag from the `tsc`."
-            },
             "compilerOptions": {
               "type": "object",
               "description": "Custom compilerOptions to be passed to the TypeScript compiler.",

src/formatter/WebpackFormatter.ts

@@ -1,19 +1,27 @@
 import os from 'os';
 import chalk from 'chalk';
-import { relative } from 'path';
+import path from 'path';
 import { Formatter } from './Formatter';
 import { formatIssueLocation } from '../issue';
-import normalizeSlash from '../utils/path/normalizeSlash';
+import forwardSlash from '../utils/path/forwardSlash';
 
 function createWebpackFormatter(formatter: Formatter, context: string): Formatter {
+  // mimics webpack error formatter
   return function webpackFormatter(issue) {
+    const color = issue.severity === 'warning' ? chalk.yellow.bold : chalk.red.bold;
+
     const severity = issue.severity.toUpperCase();
-    const file = issue.file ? normalizeSlash(relative(context, issue.file)) : undefined;
-    const location = issue.location ? formatIssueLocation(issue.location) : undefined;
-    const color = issue.severity === 'warning' ? chalk.yellow : chalk.red;
-    const header = [severity, 'in', file].concat(location ? [location] : []).join(' ');
 
-    return [color.bold(header), formatter(issue), ''].join(os.EOL);
+    if (issue.file) {
+      let location = forwardSlash(path.relative(context, issue.file));
+      if (issue.location) {
+        location += ` ${formatIssueLocation(issue.location)}`;
+      }
+
+      return [color(`${severity} in ${location}`), formatter(issue), ''].join(os.EOL);
+    } else {
+      return [color(`${severity} in `) + formatter(issue), ''].join(os.EOL);
+    }
   };
 }
 

src/hooks/tapAfterCompileToAddDependencies.ts

@@ -0,0 +1,17 @@
+import webpack from 'webpack';
+import path from 'path';
+import { ForkTsCheckerWebpackPluginConfiguration } from '../ForkTsCheckerWebpackPluginConfiguration';
+
+function tapAfterCompileToAddDependencies(
+  compiler: webpack.Compiler,
+  configuration: ForkTsCheckerWebpackPluginConfiguration
+) {
+  compiler.hooks.afterCompile.tap('ForkTsCheckerWebpackPlugin', (compilation) => {
+    if (configuration.typescript.enabled) {
+      // watch tsconfig.json file
+      compilation.fileDependencies.add(path.normalize(configuration.typescript.tsconfig));
+    }
+  });
+}
+
+export { tapAfterCompileToAddDependencies };

src/issue/IssueMatch.ts

@@ -2,7 +2,7 @@ import { Issue } from './index';
 import { IssuePredicate } from './IssuePredicate';
 import minimatch from 'minimatch';
 import path from 'path';
-import normalizeSlash from '../utils/path/normalizeSlash';
+import forwardSlash from '../utils/path/forwardSlash';
 
 type IssueMatch = Partial<Pick<Issue, 'origin' | 'severity' | 'code' | 'file'>>;
 
@@ -14,7 +14,7 @@ function createIssuePredicateFromIssueMatch(context: string, match: IssueMatch):
     const matchesFile =
       !issue.file ||
       (!!issue.file &&
-        (!match.file || minimatch(normalizeSlash(path.relative(context, issue.file)), match.file)));
+        (!match.file || minimatch(forwardSlash(path.relative(context, issue.file)), match.file)));
 
     return matchesOrigin && matchesSeverity && matchesCode && matchesFile;
   };

src/issue/IssueWebpackError.ts

@@ -1,7 +1,7 @@
 import { relative } from 'path';
 import { Issue } from './Issue';
 import { formatIssueLocation } from './IssueLocation';
-import normalizeSlash from '../utils/path/normalizeSlash';
+import forwardSlash from '../utils/path/forwardSlash';
 
 class IssueWebpackError extends Error {
   readonly hideStack = true;
@@ -14,11 +14,11 @@ class IssueWebpackError extends Error {
     // should be a NormalModule instance.
     // to avoid such a dependency, we do a workaround - error.file will contain formatted location instead
     if (issue.file) {
-      const parts = [normalizeSlash(relative(context, issue.file))];
+      this.file = forwardSlash(relative(context, issue.file));
+
       if (issue.location) {
-        parts.push(formatIssueLocation(issue.location));
+        this.file += ` ${formatIssueLocation(issue.location)}`;
       }
-      this.file = parts.join(' ');
     }
 
     Error.captureStackTrace(this, this.constructor);