Add Tests and Remarks Concerning the New .cts And .mts File Extensions

Dockerfile

@@ -36,5 +36,6 @@ COPY test /TypeStrong/ts-loader/test
 
 # regenerate comparison-tests with:
 # docker build -t ts-loader .
+# docker run -v $(pwd):/TypeStrong/ts-loader -it ts-loader yarn
 # docker run -v $(pwd):/TypeStrong/ts-loader -it ts-loader yarn build
 # docker run -v $(pwd):/TypeStrong/ts-loader -it ts-loader yarn run comparison-tests --save-output

README.md

@@ -156,11 +156,17 @@ If you become aware of issues not caught by the test suite then please let us kn
      resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [".ts", ".tsx", ".js"]
+       // Add support for TypeScripts fully qualified ESM imports.
+       extensionAlias: {
+        ".js": [".js", ".ts"],
+        ".cjs": [".cjs", ".cts"],
+        ".mjs": [".mjs", ".mts"]
+       }
      },
      module: {
        rules: [
-         // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
-         { test: /\.tsx?$/, loader: "ts-loader" }
+         // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
+         { test: /\.([cm]?ts|tsx)$/, loader: "ts-loader" }
        ]
      }
    };
@@ -730,7 +736,7 @@ Because TS will generate .js and .d.ts files, you should ignore these files, oth
  plugins: [
    new webpack.WatchIgnorePlugin([
      /\.js$/,
-     /\.d\.ts$/
+     /\.d\.[cm]?ts$/
    ])
  ],
 
@@ -739,7 +745,7 @@ plugins: [
   new webpack.WatchIgnorePlugin({
     paths:[
       /\.js$/,
-      /\.d\.ts$/
+      /\.d\.[cm]ts$/
   ]})
 ],
 ```

examples/fork-ts-checker-webpack-plugin/webpack.config.js

@@ -14,11 +14,16 @@ module.exports = {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
+    extensionAlias: {
+        '.ts': ['.js', '.ts'],
+        '.cts': ['.cjs', '.cts'],
+        '.mts': ['.mjs', '.mts'],
+    },
   },
   module: {
     rules: [
       {
-        test: /.tsx?$/,
+        test: /.([cm]?ts|tsx)$/,
         loader: 'ts-loader',
       },
     ],

examples/project-references-example/webpack.config.js

@@ -16,7 +16,7 @@ module.exports = {
   "module": {
       "rules": [
           {
-              "test": /\.tsx?$/,
+              "test": /\.([cm]?ts|tsx)$/,
               "exclude": /node_modules/,
               "use": {
                   "loader": "ts-loader",
@@ -37,6 +37,11 @@ module.exports = {
     //   packages: path.resolve(__dirname, 'packages/'),
     // },
     extensions: [".js", ".ts", ".tsx"],
+    extensionAlias: {
+      ".js": [".js", ".ts"],
+      ".cjs": [".cjs", ".cts"],
+      ".mjs": [".mjs", ".mts"]
+    },
     plugins: [
       new TsconfigPathsPlugin({
         logLevel: "info",

examples/vanilla/webpack.config.js

@@ -11,12 +11,17 @@ module.exports = {
     module: {
         rules: [
             {
-                test: /\.tsx?$/,
-                loader: 'ts-loader'
-            }
-        ]
+                test: /\.([cm]?ts|tsx)$/,
+                loader: 'ts-loader',
+            },
+        ],
     },
     resolve: {
-        extensions: [ '.ts', '.tsx', '.js' ]
+        extensions: [ '.ts', '.tsx', '.js' ],
+        extensionAlias: {
+            '.ts': ['.js', '.ts'],
+            '.cts': ['.cjs', '.cts'],
+            '.mts': ['.mjs', '.mts']
+        }
     }
 };

package.json

@@ -94,8 +94,8 @@
     "prettier": "^2.0.5",
     "rimraf": "^2.6.2",
     "typescript": "^4.8.2",
-    "webpack": "^5.20.0",
-    "webpack-cli": "^4.5.0"
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   },
   "peerDependencies": {
     "typescript": "*",

test/comparison-tests/appendSuffixTo/expectedOutput-4.8/bundle.js

@@ -16,7 +16,7 @@
   \***********************/
 /***/ ((__unused_webpack_module, exports) => {
 
-eval("\nexports.__esModule = true;\nexports.default = {\n    data: function () {\n        return {\n            msg: \"component\"\n        };\n    }\n};\n\n\n//# sourceURL=webpack:///./component.vue?");
+eval("\nexports.__esModule = true;\nexports[\"default\"] = {\n    data: function () {\n        return {\n            msg: \"component\"\n        };\n    }\n};\n\n\n//# sourceURL=webpack:///./component.vue?");
 
 /***/ }),
 
@@ -36,7 +36,7 @@ eval("\nexports.__esModule = true;\nexports.myMethod = void 0;\nfunction myMetho
   \*******************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-eval("\nexports.__esModule = true;\nvar component_vue_1 = __webpack_require__(/*! ./component.vue */ \"./component.vue\");\nvar helper_1 = __webpack_require__(/*! ./helper */ \"./helper.ts\");\nexports.default = {\n    components: { component: component_vue_1[\"default\"] },\n    data: function () {\n        return {\n            msg: \"world\"\n        };\n    },\n    method: {\n        myMethod: helper_1.myMethod\n    }\n};\n\n\n//# sourceURL=webpack:///./index.vue?");
+eval("\nexports.__esModule = true;\nvar component_vue_1 = __webpack_require__(/*! ./component.vue */ \"./component.vue\");\nvar helper_1 = __webpack_require__(/*! ./helper */ \"./helper.ts\");\nexports[\"default\"] = {\n    components: { component: component_vue_1[\"default\"] },\n    data: function () {\n        return {\n            msg: \"world\"\n        };\n    },\n    method: {\n        myMethod: helper_1.myMethod\n    }\n};\n\n\n//# sourceURL=webpack:///./index.vue?");
 
 /***/ })
 

test/comparison-tests/appendSuffixTo/expectedOutput-4.8/output.txt

@@ -1,4 +1,4 @@
-asset bundle.js 3.26 KiB [emitted] (name: main)
+asset bundle.js 3.27 KiB [emitted] (name: main)
 ./index.vue 352 bytes [built] [code generated]
 ./component.vue 154 bytes [built] [code generated]
 ./helper.ts 154 bytes [built] [code generated]

test/comparison-tests/appendSuffixTo/expectedOutput-transpile-4.8/bundle.js

@@ -16,7 +16,7 @@
   \***********************/
 /***/ ((__unused_webpack_module, exports) => {
 
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.default = {\n    data: function () {\n        return {\n            msg: \"component\"\n        };\n    }\n};\n\n\n//# sourceURL=webpack:///./component.vue?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports[\"default\"] = {\n    data: function () {\n        return {\n            msg: \"component\"\n        };\n    }\n};\n\n\n//# sourceURL=webpack:///./component.vue?");
 
 /***/ }),
 
@@ -36,7 +36,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
   \*******************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nvar component_vue_1 = __webpack_require__(/*! ./component.vue */ \"./component.vue\");\nvar helper_1 = __webpack_require__(/*! ./helper */ \"./helper.ts\");\nexports.default = {\n    components: { component: component_vue_1.default },\n    data: function () {\n        return {\n            msg: \"world\"\n        };\n    },\n    method: {\n        myMethod: helper_1.myMethod\n    }\n};\n\n\n//# sourceURL=webpack:///./index.vue?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nvar component_vue_1 = __webpack_require__(/*! ./component.vue */ \"./component.vue\");\nvar helper_1 = __webpack_require__(/*! ./helper */ \"./helper.ts\");\nexports[\"default\"] = {\n    components: { component: component_vue_1.default },\n    data: function () {\n        return {\n            msg: \"world\"\n        };\n    },\n    method: {\n        myMethod: helper_1.myMethod\n    }\n};\n\n\n//# sourceURL=webpack:///./index.vue?");
 
 /***/ })
 

test/comparison-tests/appendSuffixToWatch/expectedOutput-4.8/bundle.entry2.js

@@ -16,7 +16,7 @@
   \***********************/
 /***/ ((__unused_webpack_module, exports) => {
 
-eval("\nexports.__esModule = true;\nexports.default = \"some value\";\n\n\n//# sourceURL=webpack:///./component.vue?");
+eval("\nexports.__esModule = true;\nexports[\"default\"] = \"some value\";\n\n\n//# sourceURL=webpack:///./component.vue?");
 
 /***/ }),
 

test/comparison-tests/appendSuffixToWatch/expectedOutput-4.8/patch0/bundle.entry2.js

@@ -16,7 +16,7 @@
   \***********************/
 /***/ ((__unused_webpack_module, exports) => {
 
-eval("\nexports.__esModule = true;\nexports.default = \"some value\";\n\n\n//# sourceURL=webpack:///./component.vue?");
+eval("\nexports.__esModule = true;\nexports[\"default\"] = \"some value\";\n\n\n//# sourceURL=webpack:///./component.vue?");
 
 /***/ }),
 

test/comparison-tests/babel-issue92/expectedOutput-4.8/bundle.js

@@ -16,7 +16,7 @@
   \****************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _submodule_submodule__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./submodule/submodule */ \"./submodule/submodule.tsx\");\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_submodule_submodule__WEBPACK_IMPORTED_MODULE_0__.default);\n\n//# sourceURL=webpack:///./app.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _submodule_submodule__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./submodule/submodule */ \"./submodule/submodule.tsx\");\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_submodule_submodule__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n\n//# sourceURL=webpack:///./app.ts?");
 
 /***/ }),
 

test/comparison-tests/babel-issue92/expectedOutput-transpile-4.8/bundle.js

@@ -16,7 +16,7 @@
   \****************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _submodule_submodule__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./submodule/submodule */ \"./submodule/submodule.tsx\");\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_submodule_submodule__WEBPACK_IMPORTED_MODULE_0__.default);\n\n//# sourceURL=webpack:///./app.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _submodule_submodule__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./submodule/submodule */ \"./submodule/submodule.tsx\");\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_submodule_submodule__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n\n//# sourceURL=webpack:///./app.ts?");
 
 /***/ }),
 

test/comparison-tests/codeSplitting/expectedOutput-4.8/bundle.js

@@ -26,7 +26,7 @@ eval("\nmodule.exports = 'a';\n\n\n//# sourceURL=webpack:///./a.ts?");
   \****************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-eval("\nexports.__esModule = true;\nvar a = __webpack_require__(/*! ./a */ \"./a.ts\");\nvar b = __webpack_require__(/*! ./b */ \"./b.ts\");\nconsole.log(a);\nconsole.log(b);\n__webpack_require__.e(/*! require.ensure */ \"c_ts-d_ts\").then((function (require) {\n    // These require calls are emitted (note these are NOT TypeScript\n    // `import ... require` statements). `require.ensure` is defined in\n    // require.d.ts. Webpack sees this and automatically puts c and d\n    // into a separate chunk. \n    var cModule = __webpack_require__(/*! ./c */ \"./c.ts\");\n    var dModule = __webpack_require__(/*! ./d */ \"./d.ts\");\n    // cModule and dModule will typed as strings\n    console.log(cModule);\n    console.log(dModule);\n}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);\n\n\n//# sourceURL=webpack:///./app.ts?");
+eval("\nexports.__esModule = true;\nvar a = __webpack_require__(/*! ./a */ \"./a.ts\");\nvar b = __webpack_require__(/*! ./b */ \"./b.ts\");\nconsole.log(a);\nconsole.log(b);\n__webpack_require__.e(/*! require.ensure */ \"c_ts-d_ts\").then((function (require) {\n    // These require calls are emitted (note these are NOT TypeScript\n    // `import ... require` statements). `require.ensure` is defined in\n    // require.d.ts. Webpack sees this and automatically puts c and d\n    // into a separate chunk. \n    var cModule = __webpack_require__(/*! ./c */ \"./c.ts\");\n    var dModule = __webpack_require__(/*! ./d */ \"./d.ts\");\n    // cModule and dModule will typed as strings\n    console.log(cModule);\n    console.log(dModule);\n}).bind(null, __webpack_require__))['catch'](__webpack_require__.oe);\n\n\n//# sourceURL=webpack:///./app.ts?");
 
 /***/ }),
 
@@ -241,19 +241,21 @@ eval("\nmodule.exports = 'b';\n\n\n//# sourceURL=webpack:///./b.ts?");
 /******/ 			// add "moreModules" to the modules object,
 /******/ 			// then flag all "chunkIds" as loaded and fire callback
 /******/ 			var moduleId, chunkId, i = 0;
-/******/ 			for(moduleId in moreModules) {
-/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
+/******/ 				for(moduleId in moreModules) {
+/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 					}
 /******/ 				}
+/******/ 				if(runtime) var result = runtime(__webpack_require__);
 /******/ 			}
-/******/ 			if(runtime) var result = runtime(__webpack_require__);
 /******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
 /******/ 			for(;i < chunkIds.length; i++) {
 /******/ 				chunkId = chunkIds[i];
 /******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
 /******/ 					installedChunks[chunkId][0]();
 /******/ 				}
-/******/ 				installedChunks[chunkIds[i]] = 0;
+/******/ 				installedChunks[chunkId] = 0;
 /******/ 			}
 /******/ 		
 /******/ 		}

test/comparison-tests/codeSplitting/expectedOutput-4.8/c_ts-d_ts.bundle.js

@@ -1,3 +1,4 @@
+"use strict";
 /*
  * 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.
@@ -14,7 +15,6 @@
   \**************/
 /***/ ((module) => {
 
-"use strict";
 eval("\nmodule.exports = 'c';\n\n\n//# sourceURL=webpack:///./c.ts?");
 
 /***/ }),
@@ -25,7 +25,6 @@ eval("\nmodule.exports = 'c';\n\n\n//# sourceURL=webpack:///./c.ts?");
   \**************/
 /***/ ((module) => {
 
-"use strict";
 eval("\nmodule.exports = 'd';\n\n\n//# sourceURL=webpack:///./d.ts?");
 
 /***/ })

test/comparison-tests/codeSplitting/expectedOutput-4.8/output.txt

@@ -1,6 +1,6 @@
-asset bundle.js 11.8 KiB [emitted] (name: main)
-asset c_ts-d_ts.bundle.js 1 KiB [emitted]
-runtime modules 5.95 KiB 7 modules
+asset bundle.js 11.9 KiB [emitted] (name: main)
+asset c_ts-d_ts.bundle.js 1020 bytes [emitted]
+runtime modules 6.01 KiB 7 modules
 cacheable modules 733 bytes
   ./app.ts 589 bytes [built] [code generated]
   ./a.ts 36 bytes [built] [code generated]

test/comparison-tests/codeSplitting/expectedOutput-transpile-4.8/bundle.js

@@ -26,7 +26,7 @@ eval("\nmodule.exports = 'a';\n\n\n//# sourceURL=webpack:///./a.ts?");
   \****************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nvar a = __webpack_require__(/*! ./a */ \"./a.ts\");\nvar b = __webpack_require__(/*! ./b */ \"./b.ts\");\nconsole.log(a);\nconsole.log(b);\n__webpack_require__.e(/*! require.ensure */ \"c_ts-d_ts\").then((function (require) {\n    // These require calls are emitted (note these are NOT TypeScript\n    // `import ... require` statements). `require.ensure` is defined in\n    // require.d.ts. Webpack sees this and automatically puts c and d\n    // into a separate chunk. \n    var cModule = __webpack_require__(/*! ./c */ \"./c.ts\");\n    var dModule = __webpack_require__(/*! ./d */ \"./d.ts\");\n    // cModule and dModule will typed as strings\n    console.log(cModule);\n    console.log(dModule);\n}).bind(null, __webpack_require__)).catch(__webpack_require__.oe);\n\n\n//# sourceURL=webpack:///./app.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nvar a = __webpack_require__(/*! ./a */ \"./a.ts\");\nvar b = __webpack_require__(/*! ./b */ \"./b.ts\");\nconsole.log(a);\nconsole.log(b);\n__webpack_require__.e(/*! require.ensure */ \"c_ts-d_ts\").then((function (require) {\n    // These require calls are emitted (note these are NOT TypeScript\n    // `import ... require` statements). `require.ensure` is defined in\n    // require.d.ts. Webpack sees this and automatically puts c and d\n    // into a separate chunk. \n    var cModule = __webpack_require__(/*! ./c */ \"./c.ts\");\n    var dModule = __webpack_require__(/*! ./d */ \"./d.ts\");\n    // cModule and dModule will typed as strings\n    console.log(cModule);\n    console.log(dModule);\n}).bind(null, __webpack_require__))['catch'](__webpack_require__.oe);\n\n\n//# sourceURL=webpack:///./app.ts?");
 
 /***/ }),
 
@@ -241,19 +241,21 @@ eval("\nmodule.exports = 'b';\n\n\n//# sourceURL=webpack:///./b.ts?");
 /******/ 			// add "moreModules" to the modules object,
 /******/ 			// then flag all "chunkIds" as loaded and fire callback
 /******/ 			var moduleId, chunkId, i = 0;
-/******/ 			for(moduleId in moreModules) {
-/******/ 				if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 					__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
+/******/ 				for(moduleId in moreModules) {
+/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
+/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
+/******/ 					}
 /******/ 				}
+/******/ 				if(runtime) var result = runtime(__webpack_require__);
 /******/ 			}
-/******/ 			if(runtime) var result = runtime(__webpack_require__);
 /******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
 /******/ 			for(;i < chunkIds.length; i++) {
 /******/ 				chunkId = chunkIds[i];
 /******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
 /******/ 					installedChunks[chunkId][0]();
 /******/ 				}
-/******/ 				installedChunks[chunkIds[i]] = 0;
+/******/ 				installedChunks[chunkId] = 0;
 /******/ 			}
 /******/ 		
 /******/ 		}