build: upgrade to yarn 3

Also upgrades various frontend dependencies.

We can't upgrade to typescript 4.5 yet, because
yarnpkg/berry#3760 is not released yet.

.github/workflows/build.yml

@@ -23,9 +23,7 @@ jobs:
         with:
           path: |
             ~/.gradle/caches
-            .gradle/node
-            .gradle/yarn
-          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle') }}
+          key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle', 'gradle.properties', 'gradle/libs.versions.toml', 'gradle/wrapper/gradle-wrapper.properties') }}
           restore-keys: ${{ runner.os }}-gradle
       - name: Cache Sonar packages
         uses: actions/cache@v2
@@ -37,7 +35,14 @@ jobs:
         uses: actions/cache@v2
         with:
           path: |
-            **/node_modules
+            **/.node
+          key: ${{ runner.os }}-node-${{ hashFiles('gradle.properties') }}
+          restore-keys: ${{ runner.os }}-node
+      - name: Cache yarn packages
+        uses: actions/cache@v2
+        with:
+          path: |
+            **/.yarn/cache
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: ${{ runner.os }}-yarn
       - name: Gradle build and Sonar analyze

.gitignore

@@ -10,4 +10,3 @@ build/
 .launch
 .project
 .settings
-node_modules/

gradle.properties

@@ -1,7 +1,7 @@
+frontend.nodeVersion=16.13.0
+frontend.yarnVersion=3.1.0
 group=tools.refinery
-nodeVersion=16.13.0
 systemProp.sonar.projectKey=graphs4value_refinery
 systemProp.sonar.organization=graphs4value
 systemProp.sonar.host.url=https://sonarcloud.io
 version=0.0.0-SNAPSHOT
-yarnVersion=1.22.17

gradle/libs.versions.toml

@@ -44,4 +44,4 @@ xtext-xbase = { group = "org.eclipse.xtext", name = "org.eclipse.xtext.xbase", v
 xtext-xbase-ide = { group = "org.eclipse.xtext", name = "org.eclipse.xtext.xbase.ide", version.ref = "xtext" }
 
 [plugins]
-frontend = { id = "org.siouan.frontend-jdk11", version = "5.3.0" }
+frontend = { id = "org.siouan.frontend-jdk11", version = "6.0.0" }

language-web/.eslintrc.ci.js

@@ -24,10 +24,17 @@ module.exports = {
     // Make sure switches are exhaustive: https://stackoverflow.com/a/60166264
     'default-case': 'off',
     '@typescript-eslint/switch-exhaustiveness-check': 'error',
+    // https://github.com/airbnb/javascript/pull/2501
+    'react/function-component-definition': ['error', {
+      namedComponents: 'function-expression',
+      namedComponents: 'function-declaration',
+    }],
+  },
+  env: {
+    browser: true,
   },
   ignorePatterns: [
     '*.js',
     'build/**/*',
-    'node_modules/**/*',
   ],
 };

language-web/.eslintrc.js

@@ -6,4 +6,4 @@ module.exports = {
     './.eslintrc.ci.js',
     'plugin:sonarjs/recommended',
   ],
-}
+};

language-web/.gitattributes

@@ -0,0 +1,2 @@
+.yarn/releases/** binary
+.yarn/plugins/** binary

language-web/.gitignore

@@ -1 +1,8 @@
 /build/
+.node/
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions

language-web/.yarnrc.yml

@@ -0,0 +1,18 @@
+enableTelemetry: 0
+
+nodeLinker: pnp
+
+packageExtensions:
+  "eslint-config-airbnb-typescript@*":
+    peerDependencies:
+      eslint: "*"
+      eslint-plugin-import: "*"
+  "stylelint-config-recommended-scss@*":
+    peerDependencies:
+      postcss: "*"
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.1.0.cjs

language-web/build.gradle

@@ -4,7 +4,7 @@ plugins {
 	id 'refinery-xtext-conventions'
 }
 
-import org.siouan.frontendgradleplugin.infrastructure.gradle.RunNpmYarn
+import org.siouan.frontendgradleplugin.infrastructure.gradle.RunYarn
 
 dependencies {
 	implementation project(':refinery-language')
@@ -34,17 +34,35 @@ def serverMainClass = 'tools.refinery.language.web.ServerLauncher'
 def nodeDirectory = "${rootDir}/.gradle/node"
 
 frontend {
-	nodeVersion = project.ext.nodeVersion
-	nodeInstallDirectory = file(nodeDirectory)
+	nodeVersion = project.ext['frontend.nodeVersion']
+	nodeInstallDirectory = file('.node')
 	yarnEnabled = true
-	yarnVersion = project.ext.yarnVersion
-	yarnInstallDirectory = file("${rootDir}/.gradle/yarn")
+	yarnVersion = project.ext['frontend.yarnVersion']
 	assembleScript = 'run assemble:webpack'
 }
 
+tasks.named('installYarnGlobally') {
+	// Do not check for updates all the time, since we only use yarn 1 for calling yarn berry. 
+	outputs.dir "${frontend.nodeInstallDirectory.get()}/lib/node_modules/yarn"
+}
+
+tasks.named('enableYarnBerry') {
+	// Yarn berry is checked into the repository, so there's no need to install it.
+	enabled = false
+}
+
+tasks.named('installYarn') {
+	// Yarn berry is checked into the repository, so there's no need to install it.
+	enabled = false
+}
+
 def installFrontend = tasks.named('installFrontend')
+installFrontend.configure {
+	inputs.files('package.json', 'yarn.lock')
+	outputs.file '.pnp.cjs'
+}
 
-def generateLezerGrammar = tasks.register('generateLezerGrammar', RunNpmYarn) {
+def generateLezerGrammar = tasks.register('generateLezerGrammar', RunYarn) {
 	dependsOn installFrontend
 	inputs.file('src/main/js/language/problem.grammar')
 	inputs.files('package.json', 'yarn.lock')
@@ -65,7 +83,7 @@ assembleFrontend.configure {
 	outputs.dir productionResources
 }
 
-def eslint = tasks.register('eslint', RunNpmYarn) {
+def eslint = tasks.register('eslint', RunYarn) {
 	dependsOn installFrontend
 	inputs.dir 'src/main/js'
 	inputs.files('.eslintrc.js', 'tsconfig.json')
@@ -79,7 +97,7 @@ def eslint = tasks.register('eslint', RunNpmYarn) {
 	description = 'Check for TypeScript errors.'
 }
 
-def stylelint = tasks.register('stylelint', RunNpmYarn) {
+def stylelint = tasks.register('stylelint', RunYarn) {
 	dependsOn installFrontend
 	inputs.dir 'src/main/css'
 	inputs.file '.stylelintrc.js'
@@ -127,10 +145,10 @@ def jettyRun = tasks.register('jettyRun', JavaExec) {
 	standardInput = System.in
 	environment BASE_RESOURCE: productionResources
 	group = 'run'
-	description = 'Start a Jetty web server serving the Xtex API and assets (without rebuilding assets).'
+	description = 'Start a Jetty web server serving the Xtex API and assets.'
 }
 
-tasks.register('webpackServe', RunNpmYarn) {
+tasks.register('webpackServe', RunYarn) {
 	dependsOn installFrontend
 	dependsOn generateLezerGrammar
 	outputs.dir "${webpackOutputDir}/development"
@@ -145,7 +163,7 @@ sonarqube.properties {
 		'src/main/html',
 		'src/main/js',
 	]
-	property 'sonar.nodejs.executable', "${nodeDirectory}/bin/node"
+	property 'sonar.nodejs.executable', "${frontend.nodeInstallDirectory.get()}/bin/node"
 	property 'sonar.eslint.reportPaths', "${buildDir}/eslint.json"
 	property 'sonar.css.stylelint.reportPaths', "${buildDir}/stylelint.json"
 	// SonarJS does not pick up typescript files with `exactOptionalPropertyTypes`

language-web/package.json

@@ -25,77 +25,81 @@
   "homepage": "https://refinery.tools",
   "devDependencies": {
     "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.4",
+    "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@lezer/generator": "^0.15.2",
+    "@principalstudio/html-webpack-inject-preload": "^1.2.7",
+    "@types/react": "^17.0.35",
+    "@types/react-dom": "^17.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "babel-loader": "^8.2.3",
-    "css-loader": "^6.5.0",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^14.0.1",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "css-loader": "^6.5.1",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "^19.0.0",
+    "eslint-config-airbnb-typescript": "^16.0.0",
+    "eslint-import-resolver-node": "^0.3.6",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-sonarjs": "^0.10.0",
     "html-webpack-plugin": "^5.5.0",
     "image-webpack-loader": "^8.0.1",
-    "@lezer/generator": "^0.15.2",
     "magic-comments-loader": "^1.4.1",
-    "mini-css-extract-plugin": "^2.4.3",
+    "mini-css-extract-plugin": "^2.4.5",
     "postcss": "^8.3.11",
-    "@principalstudio/html-webpack-inject-preload": "^1.2.7",
+    "postcss-scss": "^4.0.2",
     "sass": "^1.43.4",
     "sass-loader": "^12.3.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.0.1",
-    "stylelint-config-recommended-scss": "^5.0.0",
+    "stylelint": "^14.1.0",
+    "stylelint-config-recommended-scss": "^5.0.1",
     "stylelint-scss": "^4.0.0",
-    "@types/react-dom": "^17.0.10",
-    "typescript": "^4.4.4",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "webpack": "^5.61.0",
+    "typescript": "~4.4.4",
+    "webpack": "^5.64.1",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.4.0",
+    "webpack-dev-server": "^4.5.0",
     "webpack-subresource-integrity": "^5.0.0"
   },
   "dependencies": {
-    "ansi-styles": "^6.1.0",
-    "@babel/runtime": "^7.16.0",
-    "@codemirror/autocomplete": "^0.19.4",
+    "@babel/runtime": "^7.16.3",
+    "@codemirror/autocomplete": "^0.19.8",
     "@codemirror/closebrackets": "^0.19.0",
     "@codemirror/commands": "^0.19.5",
     "@codemirror/comment": "^0.19.0",
     "@codemirror/fold": "^0.19.1",
-    "@codemirror/gutter": "^0.19.4",
+    "@codemirror/gutter": "^0.19.5",
     "@codemirror/highlight": "^0.19.6",
     "@codemirror/history": "^0.19.0",
-    "@codemirror/language": "^0.19.3",
-    "@codemirror/lint": "^0.19.2",
+    "@codemirror/language": "^0.19.5",
+    "@codemirror/lint": "^0.19.3",
     "@codemirror/matchbrackets": "^0.19.3",
-    "@codemirror/rangeset": "^0.19.1",
+    "@codemirror/rangeset": "^0.19.2",
     "@codemirror/rectangular-selection": "^0.19.1",
     "@codemirror/search": "^0.19.2",
-    "@codemirror/state": "^0.19.2",
-    "@codemirror/view": "^0.19.9",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "escape-string-regexp": "^5.0.0",
+    "@codemirror/state": "^0.19.6",
+    "@codemirror/view": "^0.19.20",
+    "@emotion/react": "^11.6.0",
+    "@emotion/styled": "^11.6.0",
     "@fontsource/jetbrains-mono": "^4.5.0",
     "@fontsource/roboto": "^4.5.1",
-    "@lezer/common": "^0.15.7",
+    "@lezer/common": "^0.15.8",
     "@lezer/lr": "^0.15.4",
-    "loglevel": "^1.7.1",
+    "@mui/icons-material": "5.1.1",
+    "@mui/material": "5.1.1",
+    "ansi-styles": "^6.1.0",
+    "escape-string-regexp": "^5.0.0",
+    "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
-    "@mui/material": "5.0.6",
-    "@mui/icons-material": "5.0.5",
-    "mobx": "^6.3.5",
-    "mobx-react-lite": "^3.2.1",
+    "mobx": "^6.3.7",
+    "mobx-react-lite": "^3.2.2",
     "nanoid": "^3.1.30",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "zod": "^3.11.6"
-  }
+  },
+  "packageManager": "[email protected]"
 }