Use custom transformer when building solution references (#1550)

* Refactor getting custom transformer into a dedicated function

This allows us to share the function between `initializeInstance` and
`makeSolutionBuilderHost`. `makeSolutionBuilderHost` is called as a part
of `buildSolutionReferences`.  `buildSolutionReferences` is called before
`initializeInstance` where the custom transformers are initialized.

* Implement `getCustomTransformer` in `makeSolutionBuilderHost`

This allows us to pass on the custom transformer while the project
references are built.

* Remove redundant `.toString`

`options.configFilePath` is always a string, there's no reason we need `toString()` too.

* Runtime check that project is a string

In a previous commit, I removed `.toString()` without validating what
the Typescript compiler would say. This change does a runtime check
that the project variable is an actual string.

* Update `CHANGELOG.md` and `package.json`

Co-authored-by: John Reilly <johnny_reilly@hotmail.com>

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 9.4.2
+* [Bug fix: Use custom transformer when building solution references](https://github.com/TypeStrong/ts-loader/pull/1550) [#1025] - thanks @feosuna1
+
 ## 9.4.1
 * [Hotfix: Disable `enhanced-resolve`](https://github.com/TypeStrong/ts-loader/pull/1505) - thanks @manuth
 

package.json

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

src/instances.ts

@@ -347,33 +347,6 @@ export function initializeInstance(
 
   instance.initialSetupPending = false;
 
-  // same strategy as https://github.com/s-panferov/awesome-typescript-loader/pull/531/files
-  let { getCustomTransformers: customerTransformers } = instance.loaderOptions;
-  let getCustomTransformers = Function.prototype;
-
-  if (typeof customerTransformers === 'function') {
-    getCustomTransformers = customerTransformers;
-  } else if (typeof customerTransformers === 'string') {
-    try {
-      customerTransformers = require(customerTransformers);
-    } catch (err) {
-      throw new Error(
-        `Failed to load customTransformers from "${
-          instance.loaderOptions.getCustomTransformers
-        }": ${err instanceof Error ? err.message : 'unknown error'}`
-      );
-    }
-
-    if (typeof customerTransformers !== 'function') {
-      throw new Error(
-        `Custom transformers in "${
-          instance.loaderOptions.getCustomTransformers
-        }" should export a function, got ${typeof customerTransformers}`
-      );
-    }
-    getCustomTransformers = customerTransformers;
-  }
-
   if (instance.loaderOptions.transpileOnly) {
     const program = (instance.program =
       instance.configParseResult.projectReferences !== undefined
@@ -385,7 +358,7 @@ export function initializeInstance(
         : instance.compiler.createProgram([], instance.compilerOptions));
 
     const getProgram = () => program;
-    instance.transformers = getCustomTransformers(program, getProgram);
+    instance.transformers = getCustomTransformers(instance.loaderOptions, program, getProgram);
     // Setup watch run for solution building
     if (instance.solutionBuilderHost) {
       addAssetHooks(loader, instance);
@@ -419,6 +392,7 @@ export function initializeInstance(
       const getProgram = () => instance.builderProgram?.getProgram();
       instance.program = getProgram();
       instance.transformers = getCustomTransformers(
+        instance.loaderOptions,
         instance.program,
         getProgram
       );
@@ -436,7 +410,7 @@ export function initializeInstance(
       );
 
       const getProgram = () => instance.languageService!.getProgram();
-      instance.transformers = getCustomTransformers(getProgram(), getProgram);
+      instance.transformers = getCustomTransformers(instance.loaderOptions, getProgram(), getProgram);
     }
 
     addAssetHooks(loader, instance);
@@ -448,6 +422,41 @@ export function initializeInstance(
   }
 }
 
+export function getCustomTransformers(
+  loaderOptions: LoaderOptions,
+  program: typescript.Program | undefined,
+  getProgram: (() => typescript.Program | undefined) | undefined
+) {
+  // same strategy as https://github.com/s-panferov/awesome-typescript-loader/pull/531/files
+  let { getCustomTransformers: customerTransformers } = loaderOptions;
+  let getCustomTransformers = Function.prototype;
+
+  if (typeof customerTransformers === 'function') {
+    getCustomTransformers = customerTransformers;
+  } else if (typeof customerTransformers === 'string') {
+    try {
+      customerTransformers = require(customerTransformers);
+    } catch (err) {
+      throw new Error(
+        `Failed to load customTransformers from "${
+          loaderOptions.getCustomTransformers
+        }": ${err instanceof Error ? err.message : 'unknown error'}`
+      );
+    }
+
+    if (typeof customerTransformers !== 'function') {
+      throw new Error(
+        `Custom transformers in "${
+          loaderOptions.getCustomTransformers
+        }" should export a function, got ${typeof customerTransformers}`
+      );
+    }
+    getCustomTransformers = customerTransformers;
+  }
+
+  return getCustomTransformers(program, getProgram);
+}
+
 function getScriptRegexp(instance: TSInstance) {
   // If resolveJsonModules is set, we should accept json files
   if (instance.configParseResult.options.resolveJsonModule) {

src/servicesHost.ts

@@ -3,7 +3,7 @@ import type * as typescript from 'typescript';
 import * as webpack from 'webpack';
 import { getParsedCommandLine } from './config';
 import * as constants from './constants';
-import { getOutputFileNames } from './instances';
+import { getCustomTransformers, getOutputFileNames } from './instances';
 import {
   CacheableHost,
   ConfigFileInfo,
@@ -766,6 +766,11 @@ export function makeSolutionBuilderHost(
     reportSolutionBuilderStatus,
     reportWatchStatus
   );
+
+  // Keeps track of the various `typescript.CustomTransformers` for each program that is created.
+  const customTransformers = new Map<string, typescript.CustomTransformers>();
+
+  // let lastBuilderProgram: typescript.CreateProgram | undefined = undefined;
   const solutionBuilderHost: SolutionBuilderWithWatchHost = {
     ...sysHost,
     ...moduleResolutionHost,
@@ -789,12 +794,28 @@ export function makeSolutionBuilderHost(
       );
       instance.typeReferenceResolutionCache?.update(instance.compilerOptions);
       instance.moduleResolutionCache?.update(instance.compilerOptions);
+
+      if (options) {
+        // The `configFilePath` is the same value that is used as the `project` parameter of
+        // `getCustomtransformers` below.
+        const project = options.configFilePath;
+        if (typeof project === "string") {
+          // Custom transformers need a reference to the `typescript.Program`, that reference is
+          // unavailable during the the `getCustomTransformers` callback below.
+          const transformers = getCustomTransformers(instance.loaderOptions, result.getProgram(), result.getProgram);
+          customTransformers.set(project, transformers);
+        }
+      }
+
       return result;
     },
     resolveModuleNames,
     resolveTypeReferenceDirectives,
     diagnostics,
     ...createWatchFactory(filePathKeyMapper, compiler),
+    getCustomTransformers: function (project: string) {
+      return customTransformers.get(project);
+    },
     // Overrides
     writeFile: (name, text, writeByteOrderMark) => {
       const key = filePathKeyMapper(name);

test/comparison-tests/projectReferencesWithCustomTransformer/app.ts

@@ -0,0 +1,3 @@
+import { lib } from './lib';
+
+console.log(lib.one, lib.two, lib.three);

test/comparison-tests/projectReferencesWithCustomTransformer/expectedOutput-4.9/bundle.js

@@ -0,0 +1,67 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./app.ts":
+/*!****************!*\
+  !*** ./app.ts ***!
+  \****************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+eval("\nexports.__esModule = true;\nvar lib_1 = __webpack_require__(/*! ./lib */ \"./lib/index.ts\");\n/*transform was here*/ console.log(lib_1.lib.one, lib_1.lib.two, lib_1.lib.three);\n\n\n//# sourceURL=webpack:///./app.ts?");
+
+/***/ }),
+
+/***/ "./lib/index.ts":
+/*!**********************!*\
+  !*** ./lib/index.ts ***!
+  \**********************/
+/***/ ((__unused_webpack_module, exports) => {
+
+eval("\nexports.__esModule = true;\nexports.lib = void 0;\n/*transform was here*/ exports.lib = {\n    one: 1,\n    two: 2,\n    three: 3\n};\n\n\n//# sourceURL=webpack:///./lib/index.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./app.ts");
+/******/ 	
+/******/ })()
+;

test/comparison-tests/projectReferencesWithCustomTransformer/expectedOutput-4.9/lib/index.d.ts

@@ -0,0 +1,5 @@
+export declare const lib: {
+    one: number;
+    two: number;
+    three: number;
+};

test/comparison-tests/projectReferencesWithCustomTransformer/expectedOutput-4.9/lib/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"program":{"fileNames":["../../../node_modules/typescript/lib/lib.d.ts","../../../node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/typescript/lib/lib.webworker.importscripts.d.ts","../../../node_modules/typescript/lib/lib.scripthost.d.ts","./index.ts"],"fileInfos":["2dc8c927c9c162a773c6bb3cdc4f3286c23f10eedc67414028f9cb5951610f60",{"version":"8730f4bf322026ff5229336391a18bcaa1f94d4f82416c8b2f3954e2ccaae2ba","affectsGlobalScope":true},{"version":"3aafcb693fe5b5c3bd277bd4c3a617b53db474fe498fc5df067c5603b1eebde7","affectsGlobalScope":true},{"version":"7fac8cb5fc820bc2a59ae11ef1c5b38d3832c6d0dfaec5acdb5569137d09a481","affectsGlobalScope":true},{"version":"097a57355ded99c68e6df1b738990448e0bf170e606707df5a7c0481ff2427cd","affectsGlobalScope":true},"28ead8445f54a115ea5f778da4f4f80579fbae42ac6ccc3493626084ed335839"],"options":{"composite":true,"newLine":1,"skipLibCheck":true,"sourceMap":true},"referencedMap":[],"exportedModulesMap":[],"semanticDiagnosticsPerFile":[6,1,3,2,5,4],"emitSignatures":[[6,"82b9c263edd140802d0afbd57d557b2c41db16c5ad9a744bca8c71ad5b10f66f"]],"latestChangedDtsFile":"./index.d.ts"},"version":"4.9.3"}

test/comparison-tests/projectReferencesWithCustomTransformer/expectedOutput-4.9/output.txt

@@ -0,0 +1,8 @@
+asset bundle.js 2.6 KiB [emitted] (name: main)
+asset lib/tsconfig.tsbuildinfo 1.17 KiB [compared for emit]
+asset lib/index.js.map 188 bytes [compared for emit]
+asset lib/index.js 152 bytes [compared for emit]
+asset lib/index.d.ts 84 bytes [compared for emit]
+./app.ts 131 bytes [built] [code generated]
+./lib/index.ts 119 bytes [built] [code generated]
+webpack compiled successfully

test/comparison-tests/projectReferencesWithCustomTransformer/expectedOutput-transpile-4.9/bundle.js

@@ -0,0 +1,67 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./app.ts":
+/*!****************!*\
+  !*** ./app.ts ***!
+  \****************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nvar lib_1 = __webpack_require__(/*! ./lib */ \"./lib/index.ts\");\n/*transform was here*/ console.log(lib_1.lib.one, lib_1.lib.two, lib_1.lib.three);\n\n\n//# sourceURL=webpack:///./app.ts?");
+
+/***/ }),
+
+/***/ "./lib/index.ts":
+/*!**********************!*\
+  !*** ./lib/index.ts ***!
+  \**********************/
+/***/ ((__unused_webpack_module, exports) => {
+
+eval("\nexports.__esModule = true;\nexports.lib = void 0;\n/*transform was here*/ exports.lib = {\n    one: 1,\n    two: 2,\n    three: 3\n};\n\n\n//# sourceURL=webpack:///./lib/index.ts?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = __webpack_require__("./app.ts");
+/******/ 	
+/******/ })()
+;

test/comparison-tests/projectReferencesWithCustomTransformer/expectedOutput-transpile-4.9/lib/index.d.ts

@@ -0,0 +1,5 @@
+export declare const lib: {
+    one: number;
+    two: number;
+    three: number;
+};

test/comparison-tests/projectReferencesWithCustomTransformer/expectedOutput-transpile-4.9/lib/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"program":{"fileNames":["../../../node_modules/typescript/lib/lib.d.ts","../../../node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/typescript/lib/lib.webworker.importscripts.d.ts","../../../node_modules/typescript/lib/lib.scripthost.d.ts","./index.ts"],"fileInfos":["2dc8c927c9c162a773c6bb3cdc4f3286c23f10eedc67414028f9cb5951610f60",{"version":"8730f4bf322026ff5229336391a18bcaa1f94d4f82416c8b2f3954e2ccaae2ba","affectsGlobalScope":true},{"version":"3aafcb693fe5b5c3bd277bd4c3a617b53db474fe498fc5df067c5603b1eebde7","affectsGlobalScope":true},{"version":"7fac8cb5fc820bc2a59ae11ef1c5b38d3832c6d0dfaec5acdb5569137d09a481","affectsGlobalScope":true},{"version":"097a57355ded99c68e6df1b738990448e0bf170e606707df5a7c0481ff2427cd","affectsGlobalScope":true},"28ead8445f54a115ea5f778da4f4f80579fbae42ac6ccc3493626084ed335839"],"options":{"composite":true,"newLine":1,"skipLibCheck":true,"sourceMap":true},"referencedMap":[],"exportedModulesMap":[],"semanticDiagnosticsPerFile":[6,1,3,2,5,4],"emitSignatures":[[6,"82b9c263edd140802d0afbd57d557b2c41db16c5ad9a744bca8c71ad5b10f66f"]],"latestChangedDtsFile":"./index.d.ts"},"version":"4.9.3"}

test/comparison-tests/projectReferencesWithCustomTransformer/expectedOutput-transpile-4.9/output.txt

@@ -0,0 +1,8 @@
+asset bundle.js 2.64 KiB [emitted] (name: main)
+asset lib/tsconfig.tsbuildinfo 1.17 KiB [compared for emit]
+asset lib/index.js.map 188 bytes [compared for emit]
+asset lib/index.js 152 bytes [compared for emit]
+asset lib/index.d.ts 84 bytes [compared for emit]
+./app.ts 167 bytes [built] [code generated]
+./lib/index.ts 119 bytes [built] [code generated]
+webpack compiled successfully

test/comparison-tests/projectReferencesWithCustomTransformer/lib/.gitignore

@@ -0,0 +1 @@
+!*.js.map

test/comparison-tests/projectReferencesWithCustomTransformer/lib/index.d.ts

@@ -0,0 +1,5 @@
+export declare const lib: {
+    one: number;
+    two: number;
+    three: number;
+};