Skip to content

Commit

Permalink
feat: add ability to build ts|tsx from node_modules (#46)
Browse files Browse the repository at this point in the history 
**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.
  • Loading branch information
@puehringer
puehringer authored Nov 9, 2023
2 parents 2c25670 + 2b76d34 commit 9df508c
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 17 deletions.
3 changes: 2 additions & 1 deletion bin/commands/lint.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}"`);
},
};
2 changes: 2 additions & 0 deletions config/eslintrc.template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
{
Expand All @@ -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',
Expand Down
2 changes: 2 additions & 0 deletions config/jest.config.template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
};
11 changes: 7 additions & 4 deletions config/tsconfig.template.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
},
}
}
17 changes: 16 additions & 1 deletion config/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down
21 changes: 10 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down

0 comments on commit 9df508c

Please sign in to comment.