Generate declaration files for js files if allowJs is set to true (#1483

)

* Fixes #1260 by generating declaration files for js files if allowJs is set to true.

* Fix declarationOutputAllowJs test

Update expected test output for 4.7 and
stabilize expectation to be OS independent.

* Update package.json and CHANGELOG.md for 9.3.1

* Update CHANGELOG.md

Co-authored-by: John Reilly <[email protected]>

Co-authored-by: Henning Dieterichs <[email protected]>
Co-authored-by: John Reilly <[email protected]>

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v9.3.1
+
+* [Bug fix: Generate declaration files for js files if allowJs is set to true](https://github.com/TypeStrong/ts-loader/pull/1483) [#1260] - thanks @hediet and @mvilliger
+
 ## v9.3.0
 
 * [simplify configuration for fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/ts-loader/pull/1451) - thanks @piotr-oles

package.json

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

src/after-compile.ts

@@ -355,15 +355,21 @@ function provideSolutionErrorsToWebpack(
 }
 
 /**
- * gather all declaration files from TypeScript and output them to webpack
+ * gather all declaration files from TypeScript and output them to webpack.
+ * JavaScript declaration files are included if `allowJs` is set.
  */
 function provideDeclarationFilesToWebpack(
   filesToCheckForErrors: TSFiles,
   instance: TSInstance,
   compilation: webpack.Compilation
 ) {
+  const filePathRegex =
+    instance.compilerOptions.allowJs === true
+      ? constants.dtsTsTsxJsJsxRegex
+      : constants.dtsTsTsxRegex;
+
   for (const { fileName } of filesToCheckForErrors.values()) {
-    if (fileName.match(constants.tsTsxRegex) === null) {
+    if (fileName.match(filePathRegex) === null) {
       continue;
     }
 

test/comparison-tests/declarationOutputAllowJs/app.ts

@@ -0,0 +1,7 @@
+import dep = require('./sub/dep');
+
+class Test {
+	private _field?: dep;
+}
+
+export = Test;

test/comparison-tests/declarationOutputAllowJs/expectedOutput-4.7/.output/app.d.ts

@@ -0,0 +1,4 @@
+declare class Test {
+    private _field?;
+}
+export = Test;

test/comparison-tests/declarationOutputAllowJs/expectedOutput-4.7/.output/sub/dep.d.ts

@@ -0,0 +1,6 @@
+export class Test {
+    /**
+     * @param {number} x
+     */
+    doSomething(x: number): number;
+}

test/comparison-tests/declarationOutputAllowJs/expectedOutput-4.7/bundle.js

@@ -0,0 +1,57 @@
+/*
+ * 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 ***!
+  \****************/
+/***/ ((module) => {
+
+eval("\nvar Test = /** @class */ (function () {\n    function Test() {\n    }\n    return Test;\n}());\nmodule.exports = Test;\n\n\n//# sourceURL=webpack:///./app.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 is referenced by other modules so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./app.ts");
+/******/ 	
+/******/ })()
+;

test/comparison-tests/declarationOutputAllowJs/expectedOutput-4.7/output.txt

@@ -0,0 +1,12 @@
+asset bundle.js 2.19 KiB [emitted] (name: main)
+asset .output/sub/dep.d.ts 99 bytes [emitted]
+asset .output/app.d.ts 59 bytes [emitted]
+./app.ts 128 bytes [built] [code generated] [1 error]
+
+ERROR in app.ts
+./app.ts 4:18-21
+[tsl] ERROR in app.ts(4,19)
+      TS2709: Cannot use namespace 'dep' as a type.
+ts-loader-default_609318b4f68865d3
+
+webpack compiled with 1 error

test/comparison-tests/declarationOutputAllowJs/expectedOutput-transpile-4.7/bundle.js

@@ -0,0 +1,57 @@
+/*
+ * 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 ***!
+  \****************/
+/***/ ((module) => {
+
+eval("\nvar Test = /** @class */ (function () {\n    function Test() {\n    }\n    return Test;\n}());\nmodule.exports = Test;\n\n\n//# sourceURL=webpack:///./app.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 is referenced by other modules so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./app.ts");
+/******/ 	
+/******/ })()
+;

test/comparison-tests/declarationOutputAllowJs/expectedOutput-transpile-4.7/output.txt

@@ -0,0 +1,3 @@
+asset bundle.js 2.19 KiB [emitted] (name: main)
+./app.ts 128 bytes [built] [code generated]
+webpack compiled successfully

test/comparison-tests/declarationOutputAllowJs/sub/dep.js

@@ -0,0 +1,9 @@
+
+export class Test {
+	/**
+	 * @param {number} x 
+	 */
+	doSomething(x) {
+		return x;
+	}
+}

test/comparison-tests/declarationOutputAllowJs/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"declaration": true,
+		"declarationDir": ".output",
+		"allowJs": true
+	},
+	"files": [
+		"./app.ts",
+		"./sub/dep.js"
+	]
+}

test/comparison-tests/declarationOutputAllowJs/webpack.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    mode: 'development',
+    entry: './app.ts',
+    output: {
+        filename: 'bundle.js'
+    },
+    resolve: {
+        extensions: ['.ts', '.js']
+    },
+    module: {
+        rules: [
+            { test: /\.ts$/, loader: 'ts-loader' }
+        ]
+    }
+}