feat: add ability to build ts|tsx from node_modules (#46)

**Migration guide for Node 20 and no_dist:** 

First, create a `no_dist` branch and do the following in the
package.json:
* Replace all of our dependencies with the `#no_dist` branch
* Update the exports/main/types fields. This has to be done according
what is already exported, but if no exports field exists, you the
following:
```json
  "main": "src/index.ts",
  "types": "src/index.ts",
  "exports": {
    ".": {
      "types": [
        "./dist/index.d.ts",
        "./src/index.ts"
      ],
      "import": [
        "./dist/index.js",
        "./src/index.ts"
      ],
      "default": [
        "./dist/index.js",
        "./src/index.ts"
      ]
    },
    "./phovea_registry": [
      "./dist/phovea_registry.js",
      "./src/phovea_registry.ts"
    ],
    "./dist/phovea_registry": [
      "./dist/phovea_registry.js",
      "./src/phovea_registry.ts"
    ],
    "./dist/scss/*": [
      "./dist/scss/*",
      "./src/scss/*"
    ],
    "./package.json": "./package.json"
  },
```
* Switch to Node 20 using `nvm use 20.9` (this should be the default!
Uninstall all other node versions using nvm uninstall ...)
* Then install and test using `rm -rf yarn.lock node_modules && yarn &&
yarn run all && yarn webpack:prod && yarn start dev_server_only=true`
* In the end, make sure to create a PR and link it in the repo sheet
(see Node20 and no_dist column)

If you encounter any issues, please report them.

Author: puehringer

bin/commands/lint.js

@@ -8,6 +8,7 @@ module.exports = {
     type: 'boolean',
   }),
   handler: (args) => {
-    call('eslint', `${args.cache ? '--cache' : ''} --no-error-on-unmatched-pattern ${(args.strings || []).join(' ')} "src/**/*.ts{,x}" "tests/**/*.ts{,x}" "cypress/**/*.ts{,x}"`);
+    // TODO: Remove --fix to ensure all linting errors are reported in CI. Disable until a codebase is fully migrated, as otherwise formatting causes merge conflicts.
+    call('eslint', `--fix ${args.cache ? '--cache' : ''} --no-error-on-unmatched-pattern ${(args.strings || []).join(' ')} "src/**/*.ts{,x}" "tests/**/*.ts{,x}" "cypress/**/*.ts{,x}"`);
   },
 };

config/eslintrc.template.js

@@ -49,6 +49,7 @@ module.exports = ({ tsconfigRootDir }) => ({
     'no-prototype-builtins': 'warn',
     'no-minusminus': 'off',
     'no-underscore-dangle': 'off',
+    '@typescript-eslint/no-explicit-any': 'warn',
     '@typescript-eslint/no-unused-expressions': [
       'error',
       {
@@ -57,6 +58,7 @@ module.exports = ({ tsconfigRootDir }) => ({
         allowTaggedTemplates: true,
       },
     ],
+    '@typescript-eslint/no-unused-vars': 'warn',
     'max-classes-per-file': 'off',
     'no-param-reassign': ['warn', { props: true, ignorePropertyModificationsFor: ['state'] }], // Exclude state as required by redux-toolkit: https://redux-toolkit.js.org/usage/immer-reducers#linting-state-mutations
     'cypress/unsafe-to-chain-command': 'off',

config/jest.config.template.js

@@ -31,5 +31,7 @@ module.exports = {
   },
   moduleNameMapper: {
     '^.+\\.(css|less|scss|sass|png|jpg|gif|svg|html)$': 'identity-obj-proxy',
+    // Add tslib alias as otherwise we get a TypeError: Cannot destructure property '__extends' of '_tslib.default' as it is undefined.
+    tslib: 'tslib/tslib.es6.js',
   },
 };

config/tsconfig.template.json

@@ -17,11 +17,14 @@
     "allowSyntheticDefaultImports": true,
     "preserveWatchOutput": true
   },
+  // Old "moduleResolution": "Node" option required for Cypress
+  // https://github.com/cypress-io/cypress/issues/26308#issuecomment-1663592648
+  //
+  // TODO: Remove when issue is resolved https://github.com/cypress-io/cypress/issues/27448
   "ts-node": {
     "compilerOptions": {
-      "module": "es2022",
-      "moduleResolution": "node16",
-      "sourceMap": false,
+      "module": "ESNext",
+      "moduleResolution": "Node"
     }
-  },
+  }
 }

config/webpack.config.js

@@ -308,7 +308,8 @@ module.exports = (webpackEnv, argv) => {
       ? {
         static: path.resolve(workspacePath, 'bundles'),
         compress: true,
-        host: 'localhost',
+        // Listen to all interfaces, as Node 18+ resolves IPv6 first: https://github.com/cypress-io/github-action/blob/master/README.md#wait-on-with-nodejs-18
+        host: '0.0.0.0',
         open: true,
         // Needs to be enabled to make SPAs work: https://stackoverflow.com/questions/31945763/how-to-tell-webpack-dev-server-to-serve-index-html-for-any-route
         historyApiFallback: historyApiFallback == null ? true : historyApiFallback,
@@ -495,6 +496,20 @@ module.exports = (webpackEnv, argv) => {
                 },
               },
             },
+            // Process application TS with swc-loader even if they are coming from node_modules, i.e. from non-built dependencies.
+            {
+              test: /\.(ts|tsx)$/,
+              loader: 'swc-loader',
+              options: {
+                jsc: {
+                  parser: {
+                    syntax: 'typescript',
+                    decorators: true,
+                    // TODO: Check what other settings should be supported: https://swc.rs/docs/configuration/swcrc#compilation
+                  },
+                },
+              },
+            },
             // "postcss" loader applies autoprefixer to our CSS.
             // "css" loader resolves paths in CSS and adds assets as dependencies.
             // "style" loader turns CSS into JS modules that inject <style> tags.

package.json

@@ -37,12 +37,12 @@
     "@swc/core": "1.3.95",
     "@swc/jest": "~0.2.24",
     "@types/jest": "~27.4.1",
-    "@types/node": "^17.0.45",
+    "@types/node": "^20.8.9",
     "@types/webpack": "^5.28.0",
     "@types/yeoman-environment": "2.10.8",
     "@types/yeoman-generator": "4.11.4",
-    "@typescript-eslint/eslint-plugin": "~5.55.0",
-    "@typescript-eslint/parser": "~5.55.0",
+    "@typescript-eslint/eslint-plugin": "~6.9.0",
+    "@typescript-eslint/parser": "~6.9.0",
     "bluebird": "3",
     "browserslist": "^4.18.1",
     "chalk": "4",
@@ -59,20 +59,20 @@
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-chai-friendly": "^0.7.2",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.0",
     "expose-loader": "^4.1.0",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.0",
     "fs-extra": "^10.1.0",
     "get-tsconfig": "^4.4.0",
     "glob": "^8.1.0",
@@ -93,14 +93,14 @@
     "postcss-loader": "^7.1.0",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^8.0.1",
-    "prettier": "^2.8.4",
+    "prettier": "^3.0.3",
     "raw-loader": "~4.0.2",
     "react-dev-utils": "^12.0.1",
     "react-refresh": "^0.14.0",
     "resolve": "^1.22.1",
     "resolve-url-loader": "^5.0.0",
     "rimraf": "~4.4.0",
-    "sass-embedded": "~1.64.2",
+    "sass-embedded": "~1.69.5",
     "sass-loader": "^13.2.0",
     "semver": "^7.3.8",
     "semver-intersect": "^1.4.0",
@@ -112,10 +112,9 @@
     "tailwindcss": "^3.2.7",
     "terser-webpack-plugin": "^5.3.7",
     "time-analytics-webpack-plugin": "^0.1.20",
-    "ts-jest": "~27.1.3",
     "ts-node": "^10.9.1",
     "tslib": "~2.6.2",
-    "typescript": "~5.1.6",
+    "typescript": "~5.2.2",
     "url-loader": "~4.1.1",
     "util": "^0.12.5",
     "webpack": "^5.76.2",