Update versions, polish rough edges, add further docs.

.eslintrc

@@ -52,8 +52,11 @@
   "overrides": [
     {
       "files": ["**/*.ts", "**/*.tsx"],
-      "extends": ["plugin:@typescript-eslint/recommended", "react-app", "prettier", "plugin:jsx-a11y/recommended"],
-      "plugins": ["@typescript-eslint", "prettier", "react-hooks", "jsx-a11y"],
+      // "react-app" already loads plugin:@typescript-eslint/eslint-plugin
+      // and it complains on having two different versions around.
+      // Re-add it if at some point, we stop relying on it
+      "extends": ["react-app", "prettier", "plugin:jsx-a11y/recommended"],
+      "plugins": ["prettier", "react-hooks", "jsx-a11y"],
       "parser": "@typescript-eslint/parser"
     },
     {

docs/source/contributing/typescript.md

@@ -9,14 +9,126 @@ myst:
 
 # TypeScript
 
+TypeScript support (5.2.2) has been added to Volto core.
+ESlint has been configured in order to accept code base written both in JavaScript and in TypeScript.
+The usage of TypeScript in projects and add-ons was possible already since Volto 14 and it's added as default in the project generator since Volto 17.
+
+## TypeScript in core
+
+The internal policy will be as follows:
+
+- No existing code will be migrated at this point (eg. Volto 17.0.0 won't have any TypeScript present)
+- Code in core can be written in both JavaScript and TypeScript
+- In any case you are forced to migrate existing code to TypeScript
+- It's up to the developer to choose which one to use
+- In all cases use common sense and be aware of code that could potentially have to be backported
+- If the developer chooses TypeScript and the feature has to be backported, it's up to the developer to backport it to non-TypeScript version in legacy (eg. LTS) versions
+
+## TypeScript learning resources
+
+[TypeScript Official Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
+
+[TotalTypeScript React with TypeScript Free course](https://www.totaltypescript.com/tutorials/react-with-typescript)
+
+[TotalTypeScript Beginner's TypeScript Free course](https://www.totaltypescript.com/tutorials/beginners-typescript)
+
+## TypeScript in projects and add-ons
+
+It is possible to enable TypeScript support when developing you project with Volto.
+If you are using the Volto generator, this is the default, and you can already start using TypeScript in it.
+
+### Enable it in your Volto 17 project
+
+If you are already using Volto 17 in your projects, using a boilerplate generated before Volto 17.0.0-alpha.27 and the generator 7.0.0-alpha.7 you can follow the following instructions:
+
+Make the following changes in your {file}`package.json`:
+
+```diff
+-    "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
+-    "lint:fix": "./node_modules/eslint/bin/eslint.js --max-warnings=0 --fix 'src/**/*.{js,jsx}'",
+-    "lint:ci": "./node_modules/eslint/bin/eslint.js --max-warnings=0 -f checkstyle 'src/**/*.{js,jsx}' > eslint.xml",
++    "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
++    "lint:fix": "./node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
++    "lint:ci": "./node_modules/eslint/bin/eslint.js --max-warnings=0 -f checkstyle 'src/**/*.{js,jsx,ts,tsx,json}' > eslint.xml",
+```
+
+```diff
+"devDependencies": {
++     "@plone/scripts": ^3.0.0,
++     "@typescript-eslint/eslint-plugin": "6.7.0",
++     "@typescript-eslint/parser": "6.7.0",
++     "stylelint-prettier": "1.1.2",
++     "ts-jest": "^26.4.2",
++     "ts-loader": "9.4.4",
++     "typescript": "5.2.2"
+}
+```
+
 ```{note}
-This feature is available since Volto 14. Please note that TypeScript is *not* allowed in Volto core, that's why it's not enabled in the core by default. This feature enables the use of TypeScript (as opt-in) in projects and in add-ons.
+Could be that after this, you experience hoisting problems and some packages can't be found on start.
+In that case, make sure you reset your `yarn.lock` by deleting it and start with a clean environment.
 ```
 
-It is possible to enable TypeScript support when developing you project with Volto.
-Volto itself is not written in TypeScript, but it is ready to use it if you want.
+In case that you want to use TypeScript in your projects, you'll need to introduce a `tsconfig.json` file in it, and remove the existing `jsconfig.json`. You can use the one provided by de generator as template, or use your own:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "commonjs",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {},
+    "baseUrl": "src"
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "public",
+    "coverage",
+    "src/**/*.test.{js,jsx,ts,tsx}",
+    "src/**/*.spec.{js,jsx,ts,tsx}",
+    "src/**/*.stories.{js,jsx,ts,tsx}"
+  ]
+}
+```
+
+If you are using `mrs-developer` in your project, update the command in `Makefile`:
+
+```diff
+--- a/Makefile
++++ b/Makefile
+@@ -59,7 +59,8 @@ preinstall: ## Preinstall task, checks if missdev (mrs-developer) is present and
+
+ .PHONY: develop
+ develop: ## Runs missdev in the local project (mrs.developer.json should be present)
+-       npx -p mrs-developer missdev --config=jsconfig.json --output=addons --fetch-https
++       if [ -f $$(pwd)/jsconfig.json ]; then npx -p mrs-developer missdev --config=jsconfig.json --output=addons --fetch-https; fi
++       if [ ! -f $$(pwd)/jsconfig.json ]; then npx -p mrs-developer missdev --output=addons --fetch-https; fi
+```
+
+````{note}
+Do not forget to run `mrs-developer` after doing it, so the configuration gets in the right place (`tsconfig.json`) now.
+Run
+```shell
+make develop
+```
+````
+
+### Enable it in a project not using Volto 17 yet
 
-In order to enable TypeScript, you need to install these additional dependencies in your project:
+If you have an existing project using a Volto version previous to Volto 17 (and above 14), and you want to use TypeScript on it, you need to install these additional dependencies in your project:
 
 ```shell
 yarn add --dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin @types/react @types/react-dom concurrently

docs/source/upgrade-guide/index.md

@@ -68,18 +68,89 @@ If you want to support TypeScript in your projects, you should update your proje
 
 Make the following changes in your {file}`package.json`:
 
+```diff
+-    "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
+-    "lint:fix": "./node_modules/eslint/bin/eslint.js --max-warnings=0 --fix 'src/**/*.{js,jsx}'",
+-    "lint:ci": "./node_modules/eslint/bin/eslint.js --max-warnings=0 -f checkstyle 'src/**/*.{js,jsx}' > eslint.xml",
++    "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
++    "lint:fix": "./node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
++    "lint:ci": "./node_modules/eslint/bin/eslint.js --max-warnings=0 -f checkstyle 'src/**/*.{js,jsx,ts,tsx,json}' > eslint.xml",
+```
+
 ```diff
 "devDependencies": {
 +     "@plone/scripts": ^3.0.0,
-+     "@typescript-eslint/eslint-plugin": "5.57.1",
-+     "@typescript-eslint/parser": "5.57.1",
++     "@typescript-eslint/eslint-plugin": "6.7.0",
++     "@typescript-eslint/parser": "6.7.0",
 +     "stylelint-prettier": "1.1.2",
 +     "ts-jest": "^26.4.2",
-+     "ts-loader": "9.4.2",
-+     "typescript": "5.1.6"
++     "ts-loader": "9.4.4",
++     "typescript": "5.2.2"
+}
+```
+
+```{note}
+Could be that after this, you experience hoisting problems and some packages can't be found on start.
+In that case, make sure you reset your `yarn.lock` by deleting it and start with a clean environment.
+```
+
+In case that you want to use TypeScript in your projects, you'll need to introduce a `tsconfig.json` file in it, and remove the existing `jsconfig.json`. You can use the one provided by de generator as template, or use your own:
+
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "commonjs",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "paths": {},
+    "baseUrl": "src"
+  },
+  "include": ["src"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "public",
+    "coverage",
+    "src/**/*.test.{js,jsx,ts,tsx}",
+    "src/**/*.spec.{js,jsx,ts,tsx}",
+    "src/**/*.stories.{js,jsx,ts,tsx}"
+  ]
 }
 ```
 
+If you are using `mrs-developer` in your project, update the command in `Makefile`:
+
+```diff
+--- a/Makefile
++++ b/Makefile
+@@ -59,7 +59,8 @@ preinstall: ## Preinstall task, checks if missdev (mrs-developer) is present and
+
+ .PHONY: develop
+ develop: ## Runs missdev in the local project (mrs.developer.json should be present)
+-       npx -p mrs-developer missdev --config=jsconfig.json --output=addons --fetch-https
++       if [ -f $$(pwd)/jsconfig.json ]; then npx -p mrs-developer missdev --config=jsconfig.json --output=addons --fetch-https; fi
++       if [ ! -f $$(pwd)/jsconfig.json ]; then npx -p mrs-developer missdev --output=addons --fetch-https; fi
+```
+
+````{note}
+Do not forget to run `mrs-developer` after doing it, so the configuration gets in the right place (`tsconfig.json`) now.
+Run
+```shell
+make develop
+```
+````
+
 ### Upgrade ESlint and use `@babel/eslint-parser`
 
 ESlint uses a library to parse the language under analysis.

package.json

@@ -227,8 +227,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.0.0",
-    "@babel/eslint-parser": "7.21.3",
-    "@babel/plugin-proposal-export-default-from": "7.18.9",
+    "@babel/eslint-parser": "7.22.15",
+    "@babel/plugin-proposal-export-default-from": "7.18.10",
     "@babel/plugin-proposal-export-namespace-from": "7.18.9",
     "@babel/plugin-proposal-json-strings": "7.18.6",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
@@ -275,15 +275,15 @@
     "draft-js-plugins-editor": "2.1.1",
     "draft-js-plugins-utils": "2.0.3",
     "draftjs-filters": "2.3.0",
-    "eslint": "8.37.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint": "8.49.0",
+    "eslint-config-prettier": "8.10.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "express": "4.17.3",
     "filesize": "6",
@@ -411,8 +411,8 @@
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.5.15",
-    "@typescript-eslint/eslint-plugin": "5.57.1",
-    "@typescript-eslint/parser": "5.57.1",
+    "@typescript-eslint/eslint-plugin": "6.7.0",
+    "@typescript-eslint/parser": "6.7.0",
     "babel-loader": "9.1.0",
     "bundlewatch": "0.3.3",
     "full-icu": "1.4.0",
@@ -426,20 +426,23 @@
     "semver": "^7.5.4",
     "tmp": "0.2.1",
     "ts-jest": "^26.4.2",
-    "ts-loader": "9.4.2",
-    "typescript": "5.1.6",
+    "ts-loader": "9.4.4",
+    "typescript": "5.2.2",
     "use-trace-update": "1.3.2",
     "why": "0.6.2"
   },
   "resolutions-comments": {
-    "ua-parser-js": "See https://github.com/faisalman/ua-parser-js/issues/536"
+    "ua-parser-js": "See https://github.com/faisalman/ua-parser-js/issues/536",
+    "@typescript-eslint/eslint-plugin": "ESlint support for TypeScript 5.2.0 needs these versions"
   },
   "resolutions": {
     "clean-css": "5.3.1",
     "http-proxy": "^1.18.1",
     "react-dev-utils": "^12",
     "react-error-overlay": "6.0.9",
-    "ua-parser-js": "0.7.28"
+    "ua-parser-js": "0.7.28",
+    "@typescript-eslint/eslint-plugin": "6.7.0",
+    "@typescript-eslint/parser": "6.7.0"
   },
   "volta": {
     "node": "18.13.0"

packages/generator-volto/generators/app/templates/.eslintrc.js

@@ -42,7 +42,7 @@ const defaultConfig = {
           ['@root', `${__dirname}/src`],
           ['~', `${__dirname}/src`],
         ],
-        extensions: ['.js', '.jsx', '.json'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
       },
       'babel-plugin-root-import': {
         rootPathSuffix: 'src',

packages/generator-volto/generators/app/templates/Makefile

@@ -59,7 +59,8 @@ preinstall: ## Preinstall task, checks if missdev (mrs-developer) is present and
 
 .PHONY: develop
 develop: ## Runs missdev in the local project (mrs.developer.json should be present)
-	npx -p mrs-developer missdev --config=jsconfig.json --output=addons --fetch-https
+	if [ -f $$(pwd)/jsconfig.json ]; then npx -p mrs-developer missdev --config=jsconfig.json --output=addons --fetch-https; fi
+	if [ ! -f $$(pwd)/jsconfig.json ]; then npx -p mrs-developer missdev --output=addons --fetch-https; fi
 
 .PHONY: omelette
 omelette: ## Creates the omelette folder that contains a link to the installed version of Volto (a softlink pointing to node_modules/@plone/volto)

packages/generator-volto/generators/app/templates/package.json.tpl

@@ -7,9 +7,9 @@
     "start": "razzle start",
     "postinstall": "make omelette && make patches",
     "build": "razzle build --noninteractive",
-    "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
-    "lint:fix": "./node_modules/eslint/bin/eslint.js --max-warnings=0 --fix 'src/**/*.{js,jsx}'",
-    "lint:ci": "./node_modules/eslint/bin/eslint.js --max-warnings=0 -f checkstyle 'src/**/*.{js,jsx}' > eslint.xml",
+    "lint": "./node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "lint:fix": "./node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx,ts,tsx,json}'",
+    "lint:ci": "./node_modules/eslint/bin/eslint.js --max-warnings=0 -f checkstyle 'src/**/*.{js,jsx,ts,tsx,json}' > eslint.xml",
     "prettier": "./node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,ts,tsx,css,scss}'",
     "prettier:fix": "./node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,ts,tsx,css,scss}'",
     "prettier:ci": "./node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,ts,tsx,css,scss}'",
@@ -145,8 +145,8 @@
     "@storybook/builder-webpack5": "^6.5.15",
     "@storybook/manager-webpack5": "^6.5.15",
     "@storybook/react": "^6.3.0",
-    "@typescript-eslint/eslint-plugin": "5.57.1",
-    "@typescript-eslint/parser": "5.57.1",
+    "@typescript-eslint/eslint-plugin": "6.7.0",
+    "@typescript-eslint/parser": "6.7.0",
     "jest-junit": "8.0.0",
     "mrs-developer": "*",
     "postcss": "8.4.13",
@@ -157,8 +157,8 @@
     "stylelint-config-prettier": "8.0.1",
     "stylelint-prettier": "1.1.2",
     "ts-jest": "^26.4.2",
-    "ts-loader": "9.4.2",
-    "typescript": "5.1.6"
+    "ts-loader": "9.4.4",
+    "typescript": "5.2.2"
   },
   "resolutions": {
     "react-error-overlay": "6.0.9"