Skip to content

Commit

Permalink
Add Tests and Remarks Concerning the New .cts And .mts File Exten…
Browse files Browse the repository at this point in the history
…sions (#1508)

* docs: Refactor settings properly

* docs: Add missing step to the `Dockerfile`

* dep: Update `webpack` dependencies

* test: Add tests concerning file-suffixes

* test: Restrict the version of the new tests

* test: Fix outdated config

* test: Regenerate `comparison-tests`

* test: Fix broken `webpack` settings

* test: Regenerate tests
  • Loading branch information
manuth committed Sep 24, 2022
1 parent d9fcbfd commit e76abb0
Show file tree
Hide file tree
Showing 97 changed files with 4,769 additions and 4,143 deletions.
1 change: 1 addition & 0 deletions Dockerfile
Expand Up @@ -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
14 changes: 10 additions & 4 deletions README.md
Expand Up @@ -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" }
]
}
};
Expand Down Expand Up @@ -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$/
])
],

Expand All @@ -739,7 +745,7 @@ plugins: [
new webpack.WatchIgnorePlugin({
paths:[
/\.js$/,
/\.d\.ts$/
/\.d\.[cm]ts$/
]})
],
```
Expand Down
7 changes: 6 additions & 1 deletion examples/fork-ts-checker-webpack-plugin/webpack.config.js
Expand Up @@ -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',
},
],
Expand Down
7 changes: 6 additions & 1 deletion examples/project-references-example/webpack.config.js
Expand Up @@ -16,7 +16,7 @@ module.exports = {
"module": {
"rules": [
{
"test": /\.tsx?$/,
"test": /\.([cm]?ts|tsx)$/,
"exclude": /node_modules/,
"use": {
"loader": "ts-loader",
Expand All @@ -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",
Expand Down
15 changes: 10 additions & 5 deletions examples/vanilla/webpack.config.js
Expand Up @@ -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']
}
}
};
4 changes: 2 additions & 2 deletions package.json
Expand Up @@ -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": "*",
Expand Down
Expand Up @@ -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?");

/***/ }),

Expand All @@ -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?");

/***/ })

Expand Down
@@ -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]
Expand Down
Expand Up @@ -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?");

/***/ }),

Expand All @@ -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?");

/***/ })

Expand Down
Expand Up @@ -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?");

/***/ }),

Expand Down
Expand Up @@ -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?");

/***/ }),

Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Expand Up @@ -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?");

/***/ }),

Expand Down
Expand Up @@ -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?");

/***/ }),

Expand Down
14 changes: 8 additions & 6 deletions test/comparison-tests/codeSplitting/expectedOutput-4.8/bundle.js
Expand Up @@ -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?");

/***/ }),

Expand Down Expand Up @@ -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;
/******/ }
/******/
/******/ }
Expand Down
@@ -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.
Expand All @@ -14,7 +15,6 @@
\**************/
/***/ ((module) => {

"use strict";
eval("\nmodule.exports = 'c';\n\n\n//# sourceURL=webpack:///./c.ts?");

/***/ }),
Expand All @@ -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?");

/***/ })
Expand Down
@@ -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]
Expand Down
Expand Up @@ -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?");

/***/ }),

Expand Down Expand Up @@ -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;
/******/ }
/******/
/******/ }
Expand Down

0 comments on commit e76abb0

Please sign in to comment.