Node version 22

- Packages frontend, backend, and interface

- jest working in backend!
- simplify eslint to use projectService always
- Make multi-root better

Author: alexrecuenco

.nvmrc

@@ -0,0 +1 @@
+v22.9.0

.vscode/extensions.json

@@ -10,5 +10,6 @@
         "simonsiefke.svg-preview",
         "yoavbls.pretty-ts-errors",
         "csstools.postcss",
+        "antfu.vite",
     ],
 }

.vscode/settings.json

@@ -3,7 +3,14 @@
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
-        "source.organizeImports": "never",
+        "source.fixAll": "always",
+        "source.fixAll.eslint": "always",
+        "source.sortImports": "always",
+        "source.addMissingImports.ts": "never",
+        "source.fixAll.ts": "always",
+        "source.organizeImports": "always",
+        "source.removeUnused.ts": "never",
+        "source.removeUnusedImports": "never",
     },
     "editor.formatOnSaveMode": "modificationsIfAvailable",
     "[javascript,typescript,jsonc,json]": {
@@ -12,9 +19,11 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSaveMode": "modificationsIfAvailable",
     },
-    "eslint.useFlatConfig": true,
-    "jest.jestCommandLine": "npm test -- ",
-    "jest.runMode": {
-        "type": "on-demand",
+    "[json]": {
+        "editor.tabSize": 4,
     },
+    "eslint.useFlatConfig": true,
+    "jest.enable": true,
+    "jest.rootPath": "packages/",
+    "vite.autoStart": false,
 }

.vscode/tasks.json

@@ -4,34 +4,56 @@
     "version": "2.0.0",
     "tasks": [
         {
-            "type": "npm",
-            "script": "build",
-            "group": "build",
-            "problemMatcher": [],
+            "label": "dev",
+            "isBackground": true,
+            "dependsOn": [
+                "npm: dev - packages/frontend",
+                "npm: dev - packages/backend",
+            ],
         },
         {
             "type": "npm",
-            "script": "lint",
-            "problemMatcher": [],
+            "script": "dev",
+            "isBackground": true,
+            "path": "packages/frontend",
+            // See here https://stackoverflow.com/a/72655542/7346915
+            "problemMatcher": [
+                {
+                    "owner": "typescript",
+                    "source": "Typescript",
+                    "fileLocation": "absolute",
+                    "applyTo": "allDocuments",
+                    "background": {
+                        "activeOnStart": true,
+                        // "beginsPattern": "sd",
+                        // "endsPattern": " > "
+                    },
+                    "pattern": [
+                        {
+                            "regexp": "(ERROR|WARNING)\\(TypeScript\\)  (.*)",
+                            "severity": 1,
+                            "message": 2,
+                        },
+                        {
+                            "regexp": "^ FILE  (.*):(\\d*):(\\d*)$",
+                            "file": 1,
+                            "line": 2,
+                            "column": 3,
+                        },
+                    ],
+                },
+            ],
+            "label": "npm: dev - packages/frontend",
+            "detail": "vite",
         },
         {
             "type": "npm",
-            "script": "start",
-            "problemMatcher": [],
-        },
-        {
-            "type": "typescript",
-            "tsconfig": "tsconfig.json",
-            "problemMatcher": ["$tsc"],
-            "group": "build",
-        },
-        {
-            "label": "tsc: watch",
-            "type": "typescript",
-            "tsconfig": "tsconfig.json",
-            "option": "watch",
+            "script": "dev",
+            "isBackground": true,
+            "path": "packages/backend",
             "problemMatcher": ["$tsc-watch"],
-            "group": "build",
+            "label": "npm: dev - packages/backend",
+            "detail": "tsc-watch --onSuccess 'node .'",
         },
     ],
 }

README.md

@@ -1,16 +1,10 @@
 # Example
 
-Example of typescript, eslint, and jest with property based testing.
+## Using workspaces
 
-Possibly, you might want to delete the `.pre-commit-config.yaml` file if you are
-not using python anywhere.
-
-This is only tested with certain versions of node and npm, it might work with
-others, disable the `engine-strict=true` in the `.npmrc` file at your
-discretion.
-
-## Check upgrades
+Most commands can be launched for each workspace by using `--workspaces|-ws`
 
 ```bash
-npx npm-check -u
+npm i -ws
+npm install --workspaces
 ```

eslint.config.mjs

@@ -1,12 +1,35 @@
 import js from '@eslint/js';
-import tseslint from 'typescript-eslint';
 import eslintConfigPrettier from 'eslint-config-prettier';
+import tseslint from 'typescript-eslint';
 // When it works again do `npm install --save-dev eslint-plugin-import`
 // import imprt from 'eslint-plugin-import';
 // https://github.com/eslint/eslint/issues/18087
 // https://github.com/import-js/eslint-plugin-import/pull/2829
-import globals from 'globals';
 import jest from 'eslint-plugin-jest';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import { readFileSync } from 'fs';
+import { globSync } from 'glob';
+import globals from 'globals';
+import { join } from 'path';
+// still experimental -->> import { globSync } from 'fs';
+// sitll experimental -->> import packageJSON from './package.json' with { type: 'json' };
+
+const packageJSON = JSON.parse(readFileSync('./package.json'));
+const packageFolders = globSync(packageJSON.workspaces);
+const multiRootConfigFileGlobs = [
+  '.*.js',
+  '.*.mjs',
+  '.*.cjs',
+  '*.config.mjs',
+  '*.config.cjs',
+  '*.config.js',
+  '*.config.ts',
+];
+
+const configFiles = ['.', ...packageFolders].flatMap((p) =>
+  multiRootConfigFileGlobs.flatMap((c) => join(p, c)),
+);
 
 const off = 'off';
 const warn = 'warn';
@@ -35,27 +58,22 @@ const any_rules = (level) => {
 export default [
   {
     ignores: [
-      'lib/',
-      'build/',
-      'build-*/',
-      'dist/',
+      '**/lib/',
+      '**/build/',
+      '**/build-*/',
+      '**/dist/',
       '.vscode/',
-      'node_modules/',
-      'coverage/',
-      'report/',
+      '**/node_modules/',
+      '**/mocks',
+      '**/coverage/',
+      '**/report/',
+      '**/__snapshots__',
       '!*.js',
       '!*.mjs',
       '!*.cjs',
       '!*.ts',
       '!.vscode/*.json',
-      'package-lock.json',
-      '**/node_modules',
-      '**/dist',
-      '**/build',
-      '**/__snapshots__',
-      '**/mocks',
-      '**/coverage',
-      '**/report',
+      '**/package-lock.json',
     ],
   },
   js.configs.recommended,
@@ -67,14 +85,9 @@ export default [
       globals: globals.node,
       parser: tseslint.parser,
       parserOptions: {
-        ecmaVersion: 2022,
         sourceType: 'module',
         tsconfigRootDir: import.meta.dirname,
-        project: [
-          './tsconfig.eslint.json',
-          './tsconfig.json',
-          './tsconfig.node.json',
-        ],
+        projectService: true,
       },
     },
   },
@@ -133,15 +146,7 @@ export default [
   },
   {
     name: 'linting for configuration files',
-    files: [
-      '.*.js',
-      '.*.mjs',
-      '.*.cjs',
-      '*.config.mjs',
-      '*.config.cjs',
-      '*.config.js',
-      '*.config.ts',
-    ],
+    files: configFiles,
     rules: {
       'no-restricted-imports': off,
       // Consider if this is too leanient for tests
@@ -166,9 +171,6 @@ export default [
     // https://eslint.org/docs/user-guide/configuring#specifying-environments
     languageOptions: {
       globals: { ...globals.jest, ...globals.node },
-      parserOptions: {
-        project: ['./tests/tsconfig.json'],
-      },
     },
     plugins: { jest },
     rules: {
@@ -183,4 +185,37 @@ export default [
       ...any_rules('off'),
     },
   },
+  {
+    files: [join('packages', 'backend', '**', '*.{ts,tsx,mtsx,mts}')],
+    languageOptions: {
+      parserOptions: {
+        sourceType: 'module',
+        tsconfigRootDir: join(import.meta.dirname, 'packages', 'backend'),
+        projectService: true,
+      },
+    },
+  },
+  {
+    files: [join('packages', 'frontend', '**', '*.{ts,tsx,mtsx,mts}')],
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+      parserOptions: {
+        sourceType: 'module',
+        tsconfigRootDir: join(import.meta.dirname, 'packages', 'frontend'),
+        projectService: true,
+      },
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
 ];