Release 4.0.0 (#33)

## Release notes

* Upgrade to TS5 #32 

### Release dependencies first

In case of dependent Phovea/TDP repositories follow [dependency
tree](https://wiki.datavisyn.io/phovea/fundamentals/development-process#dependency-hierarchy)
from the top:

 
### 🏁 Finish line

* [ ] Inform colleagues and customers about the release
* [ ] Celebrate the new release 🥳

Author: puehringer

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

config/eslintrc.template.js

@@ -59,6 +59,7 @@ module.exports = ({ tsconfigRootDir }) => ({
     ],
     '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',
     'import/no-extraneous-dependencies': 'off',
     'import/no-webpack-loader-syntax': 'off', // Disable to allow webpack file-loaders syntax
     'import/no-unresolved': 'off', // Disable to allow webpack file-loaders syntax

config/tsconfig.template.json

@@ -1,12 +1,12 @@
 {
   "compilerOptions": {
-    "module": "ESNext",
+    "module": "ES2022",
     "target": "ES2021",
     "importHelpers": true,
     "sourceMap": true,
     "declaration": true,
     "declarationMap": true,
-    "moduleResolution": "node16",
+    "moduleResolution": "bundler",
     "jsx": "react",
     "allowJs": true,
     "experimentalDecorators": true,
@@ -16,5 +16,12 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "preserveWatchOutput": true
-  }
+  },
+  "ts-node": {
+    "compilerOptions": {
+      "module": "es2022",
+      "moduleResolution": "node16",
+      "sourceMap": false,
+    }
+  },
 }

config/webpack.config.js

@@ -395,22 +395,12 @@ module.exports = (webpackEnv, argv) => {
     },
     resolve: {
       extensions: ['.tsx', '.ts', '.js'],
-      // This is required to enable TS moduleResolution: node16, as there we have to add .js extensions which are actually .ts files.
-      extensionAlias: isLegacyModuleResolution ? undefined : {
-        '.js': ['.tsx', '.ts', '.js'],
-        '.cjs': ['.cts', '.cjs'],
-        '.mjs': ['.mts', '.mjs'],
-      },
       // By default, always search for modules in the relative node_modules. However,
       // if the package can not be found, fall back to the workspace node_modules. This is
       // useful when using the resolveAliases to resolve a package to somewhere else.
       modules: ['node_modules', path.join(workspacePath, 'node_modules')],
       alias: Object.assign(
         {
-          // Alias to jsx-runtime required as only React@18 has this export, otherwise it fails with "The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified".
-          // See https://github.com/facebook/react/issues/20235 for details.
-          'react/jsx-runtime': 'react/jsx-runtime.js',
-          'react/jsx-dev-runtime': 'react/jsx-dev-runtime.js',
           ...resolveAliases,
         },
         // Add aliases for all the workspace repos
@@ -710,7 +700,6 @@ module.exports = (webpackEnv, argv) => {
                   baseUrl: '.',
                   sourceMap: true,
                   skipLibCheck: true,
-                  inlineSourceMap: false,
                   declarationMap: false,
                   noEmit: false,
                   incremental: true,

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visyn_scripts",
   "description": "",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",
@@ -32,112 +32,111 @@
     "dist": "npm run lint && npm run test"
   },
   "dependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@svgr/webpack": "^5.5.0",
-    "@swc/core": "1.3.37",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@svgr/webpack": "^6.5.1",
+    "@swc/core": "1.3.58",
     "@swc/jest": "~0.2.24",
     "@types/jest": "~27.4.1",
-    "@types/node": "^17.0.24",
+    "@types/node": "^17.0.45",
     "@types/webpack": "^5.28.0",
-    "@types/yeoman-environment": "2",
-    "@types/yeoman-generator": "4",
-    "@typescript-eslint/eslint-plugin": "~5.52.0",
-    "@typescript-eslint/parser": "~5.52.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",
     "bluebird": "3",
     "browserslist": "^4.18.1",
     "chalk": "4",
     "child-process-promise": "^2.2.1",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "^11.0.0",
     "cross-spawn": "^7.0.3",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "dotenv": "^10.0.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "dotenv": "^16.0.3",
     "dotenv-expand": "^10.0.0",
-    "dotenv-webpack": "^7.1.0",
-    "eslint": "^8.3.0",
+    "dotenv-webpack": "^8.0.1",
+    "eslint": "^8.36.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^16.1.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.7.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": "^25.3.4",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "expose-loader": "^3.1.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.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": "^7.2.6",
-    "fs-extra": "^10.0.0",
+    "fork-ts-checker-webpack-plugin": "^8.0.0",
+    "fs-extra": "^10.1.0",
     "get-tsconfig": "^4.4.0",
-    "glob": "^8.0.3",
-    "html-loader": "~1.3.2",
+    "glob": "^8.1.0",
+    "html-loader": "~4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",
     "ifdef-loader": "^2.3.2",
-    "imports-loader": "~1.2.0",
+    "imports-loader": "~4.0.1",
     "inquirer": "7",
     "jest": "^27.4.3",
     "jest-raw-loader": "~1.0.1",
     "jest-resolve": "^27.4.2",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.4.5",
+    "mini-css-extract-plugin": "^2.7.5",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.21",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
+    "postcss-loader": "^7.1.0",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
-    "prettier": "^2.5.1",
+    "postcss-preset-env": "^8.0.1",
+    "prettier": "^2.8.4",
     "raw-loader": "~4.0.2",
     "react-dev-utils": "^12.0.1",
-    "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^4.0.0",
-    "rimraf": "~3.0.2",
-    "sass-embedded": "^1.56.2",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.7",
+    "react-refresh": "^0.14.0",
+    "resolve": "^1.22.1",
+    "resolve-url-loader": "^5.0.0",
+    "rimraf": "~4.4.0",
+    "sass-embedded": "^1.59.3",
+    "sass-loader": "^13.2.0",
+    "semver": "^7.3.8",
     "semver-intersect": "^1.4.0",
-    "shx": "~0.3.3",
-    "source-map-loader": "^3.0.0",
+    "shx": "~0.3.4",
+    "source-map-loader": "^4.0.1",
     "speed-measure-webpack-plugin": "~1.5.0",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.2",
     "swc-loader": "^0.2.3",
-    "tailwindcss": "^3.0.2",
-    "terser-webpack-plugin": "^5.2.5",
-    "time-analytics-webpack-plugin": "^0.1.19",
+    "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.7.0",
-    "tslib": "~2.3.1",
-    "typescript": "~4.9.5",
+    "ts-node": "^10.9.1",
+    "tslib": "~2.5.0",
+    "typescript": "~5.0.4",
     "url-loader": "~4.1.1",
-    "util": "^0.12.4",
-    "webpack": "^5.64.4",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.6.0",
+    "util": "^0.12.5",
+    "webpack": "^5.76.2",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.0",
     "yamljs": "^0.3.0",
-    "yargs": "^17.5.1",
+    "yargs": "^17.7.1",
     "yeoman-environment": "2",
     "yeoman-generator": "4"
   },
   "devDependencies": {
-    "@types/yargs": "^17.0.10",
-    "cypress": "^11.2.0",
+    "@types/yargs": "^17.0.22",
     "http-server": "^14.1.1",
     "jest-dev-server": "^6.1.1"
   },
   "peerDependencies": {
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "jest": {
     "testPathIgnorePatterns": [

tests/standalone.test.js

@@ -86,7 +86,7 @@ describe('standalone', () => {
           // Stop the server afterwards
           teardownDevServer();
         }
-      });
-    });
+      }, 50000);
+    }, 50000);
   });
 });

tests_fixtures/standalone_template/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.2.2.cjs

tests_fixtures/standalone_template/cypress/component/component-health-check.cy.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { mount } from 'cypress/react';
 import { MainApp } from '../../src/app/MainApp';
 
 describe('Health check for Cypress component test', () => {
   it('should mount MainApp', () => {
-    mount(<MainApp />);
+    cy.mount(<MainApp />);
     cy.get('div').should('include.text', 'hello world');
   });
 });

tests_fixtures/standalone_template/cypress/support/component.ts

@@ -19,7 +19,7 @@ import './commands';
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react';
+import { mount } from 'cypress/react18';
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.

tests_fixtures/standalone_template/cypress/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "visyn_scripts/config/tsconfig.template.json",
   "compilerOptions": {
     "outDir": "./dist",
+    "sourceMap": false,
     "types": [
       "cypress"
     ]