Closes #5900: Backport Yarn v4 upgrade and other recent JS tooling changes.

.ddev/commands/web/install

@@ -23,4 +23,8 @@ composer install --no-interaction
 drush --root=/var/www/html/web site:install --account-mail=noreply@email.arizona.edu --account-name=azadmin --account-pass=azadmin2026 --db-url=mysql://db:db@db:3306/db -y --verbose
 drush --root=/var/www/html/web config:set -y az_cas.settings disable_login_form 0
 drush --root=/var/www/html/web cache:rebuild
-yarn --cwd /usr/local/quickstart-install-profile install
+
+# Install Yarn dev dependencies
+cd /usr/local/quickstart-install-profile
+yarn --version
+yarn install --immutable

.ddev/config.quickstart.yaml

@@ -3,6 +3,7 @@ type: php
 docroot: web
 php_version: "8.3"
 webserver_type: nginx-fpm
+corepack_enable: true
 
 # Default application ports
 router_http_port: "80"

.eslintignore

@@ -1,3 +1 @@
 node_modules/**/*
-*.js
-!*.es6.js

.gitattributes

@@ -20,3 +20,5 @@ themes/custom/az_barrio/libraries/*.min.js linguist-generated=true
 .ddev/commands/web/phpstan text eol=lf
 .ddev/commands/web/phpstan-contrib text eol=lf
 .ddev/commands/web/phpunit text eol=lf
+
+yarn.lock export-ignore linguist-generated=true

.github/workflows/ci.yml

@@ -180,7 +180,9 @@ jobs:
       - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: '20'
-      - run: yarn audit
+      - run: |
+          corepack enable
+          yarn npm audit --severity high
 
   eslint:
     name: eslint
@@ -190,18 +192,22 @@ jobs:
       - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: '20'
-      - run: yarn install --ignore-scripts
+      - run: |
+          corepack enable
+          yarn install --immutable
       - name: Generate eslint report
         continue-on-error: true
-        run: yarn run eslint . --format json --output-file eslint-report.json
+        run: |
+          yarn run eslint . --format json --output-file eslint-report.json
       - name: Annotate eslint results
         continue-on-error: true
         uses: ataylorme/eslint-annotate-action@v3
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           report-json: "eslint-report.json"
       - name: Run eslint
-        run: yarn run eslint --color .
+        run: |
+          yarn run eslint --color .
 
   phpunit:
     name: PHPUnit (${{ matrix.test.name }})

.github/workflows/security.yml

@@ -56,12 +56,14 @@ jobs:
           cd az-quickstart-scaffolding
           composer audit
 
-  yarn-audit:
-    name: yarn audit (security)
+  yarn-npm-audit:
+    name: yarn npm audit (security)
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: '20'
-      - run: yarn audit
+      - run: |
+          corepack enable
+          yarn npm audit

.gitignore

@@ -4,8 +4,8 @@
 ### Node ###
 /node_modules/
 /node_modules/*
-/yarn.lock
 /yarn-error.log
+.yarn/*
 
 ### Drupal ###
 settings.local.php

.lando.yml

@@ -69,8 +69,12 @@ services:
       - ln -s /usr/local/quickstart-install-profile/.vscode /app/.vscode
   node:
     type: node:20
+    overrides:
+      environment:
+        COREPACK_ENABLE_DOWNLOAD_PROMPT: '0'
     build:
-      - yarn install
+      - corepack enable
+      - yarn install --immutable
   chromedriver:
     type: compose
     services:

.prettierignore

@@ -1 +1,2 @@
+node_modules/**/*
 *.yml

.yarnrc.yml

@@ -0,0 +1,3 @@
+enableScripts: false
+
+nodeLinker: node-modules

CONTRIBUTING.md

@@ -218,34 +218,6 @@ on the paragraph. This can be avoided currently by
 [a workaround](https://www.drupal.org/project/paragraphs/issues/2928759).
 There will likely be a more official paragraphs API for this in the future.
 
-## Compiling Javascript in Local Development
-
-This project uses an ES6 to ES5 transpile process
-[similar to Drupal core](https://www.drupal.org/node/2815083).
-
-This means that you should only update `.js` files named `.es6.js` and should
-never manually edit files named `.js` as these are machine-generated.
-
-This can be done on demand with `yarn build`, or in response to changes
-with `yarn watch`. When in watch mode, javascript files will be transpiled as
-they are updated.
-
-### ES6 Transpiling on Lando
-
-```
-lando yarn build
-OR
-lando yarn watch
-```
-
-### ES6 Transpiling on DDEV
-
-```
-ddev yarn build
-OR
-ddev yarn watch
-```
-
 ## ESLint in Local Development
 
 To maintain high-quality JavaScript code, contributors are encouraged to use