Update definition files in watch mode in webpack@5 (#1249)

* Add afterDeclarations to getCustomTransformers in README.md * Emit d.ts file in subsequent runs in watch mode * Update package.json and changelog.md

Author: appzuka

CHANGELOG.md

@@ -1,4 +1,9 @@
 # Changelog
+
+## v8.0.15
+* [Update definition files in watch mode in webpack@5](https://github.com/TypeStrong/ts-loader/pull/1249) - thanks @appzuka,@JonWallsten,@alexander-akait
+* [Add afterDeclarations to getCustomTransformers in README.md](https://github.com/TypeStrong/ts-loader/pull/1248) - thanks @appzuka
+
 ## v8.0.14
 * [Upgrade `chalk`, `loader-utils`, and `semver` to latest stable versions](https://github.com/TypeStrong/ts-loader/pull/1237) - thanks Avi Vahl
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "ts-loader",
- "version": "8.0.14",
+ "version": "8.0.15",
  "description": "TypeScript loader for webpack",
  "main": "index.js",
  "types": "dist",

src/instances.ts

@@ -336,21 +336,33 @@ const addAssetHooks = !!webpack.version!.match(/^4.*/)
  makeAfterCompile(instance, false, true, instance.configFilePath)
  );
 
- // Emit the assets at the afterProcessAssets stage
- loader._compilation.hooks.afterProcessAssets.tap(
- 'ts-loader',
- (_: any) => {
- makeAfterCompile(
- instance,
- true,
- false,
- instance.configFilePath
- )(loader._compilation, () => {
- return null;
- });
- }
+ // makeAfterCompile is a closure. It returns a function which closes over the variable checkAllFilesForErrors
+ // We need to get the function once and then reuse it, otherwise it will be recreated each time
+ // and all files will always be checked.
+ const cachedMakeAfterCompile = makeAfterCompile(
+ instance,
+ true,
+ false,
+ instance.configFilePath
  );
 
+ // compilation is actually of type webpack.compilation.Compilation, but afterProcessAssets
+ // only exists in webpack5 and at the time of writing ts-loader is built using webpack4
+ const makeAssetsCallback = (compilation: any) => {
+ compilation.hooks.afterProcessAssets.tap('ts-loader', () =>
+ cachedMakeAfterCompile(compilation, () => {
+ return null;
+ })
+ );
+ };
+
+ // We need to add the hook above for each run.
+ // For the first run, we just need to add the hook to loader._compilation
+ makeAssetsCallback(loader._compilation);
+
+ // For future calls in watch mode we need to watch for a new compilation and add the hook
+ loader._compiler.hooks.compilation.tap('ts-loader', makeAssetsCallback);
+
  // It may be better to add assets at the processAssets stage (https://webpack.js.org/api/compilation-hooks/#processassets)
  // This requires Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL, which does not exist in webpack4
  // Consider changing this when ts-loader is built using webpack5