Upgrade to Yarn 4 #21345

igorschoester · 2024-04-28T11:44:54Z

Context

Try out if we can move to Yarn 4.
Yarn 4 comes with an install mode called pnp, which (for us most important) gives protection against ghost dependencies
Migration documentation: https://yarnpkg.com/migration/overview

Summary

This PR can be summarized in the following changelog entry:

Upgrades Yarn to v4.
[@yoast/ui-library 0.1.0] Renames the clean:build script to clean.
[@yoast/jest-preset 0.1.0 enhancement] Removes Yoast and lodash-es exceptions from the transformIgnorePatterns.
[@yoast/jest-preset 1.0.0 other] Upgrade jest peer dependency from version ^27.5.1 to ^29.7.0.
[@yoast/jest-preset 1.0.0 other] Add jest-environment-jsdom with version ^29.7.0 as peer dependency.

Relevant technical choices:

Based the branch on the yoast-components removal branch (#21344). As that probably helps skipping some old dependencies.

Add Yarn 4

Manual removal of .yarnrc and .yarn to be able to set to use Yarn 4
Running yarn set version berry, which made the above's Yarn 4 variants
Package json files are auto-adjusted by Yarn 4, except for the nohoist removal which is no longer supported (and unused anyway -- we don't have that dependency)
Lock file was auto-updated on install
Updated VERSIONS.json to mention the new file .yarnrc.yml
Added Yarn specific to the git ignore file as per https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

The commits that follow are based on output from yarn install or what I came across trying the scripts in each package

Add missing dependencies
Refactor lifecycle scripts (pre- and post-)
Packages need their own tooling now it won't just magically work
Upgraded packages of which that seemed relatively straight forward to do so (if complaining for older React version or something)

Rename UI library clean:build to clean as our other packages have that instead

Ran into problems with the Indexation tests, seems it won't behave nicely with React 18 still is my best guess. So I refactored it: c5320d8

an error would result in an infinite loop: add url = false
an error would not result in the error being displayed: add wait for next cycle

Might be some scope creep while I was there:

Clean Jest config
Specify lerna/nx task dependencies
- This one in particular makes Lerna pick up and build packages when needed, as long as you run the commands via Lerna (e.g. using yarn test --scope @yoast/wordpress-seo instead of cd packages/js && yarn test)

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Test all the things 😅

All the scripts
All the grunt tasks
Smoke test everything

But here are some specific areas:

The indexation: both in Tools and the First time configuration
a11y speak in our Settings
- Test in Safari
- Changing the route (e.g. from Site features to Site basics) should announce the name (e.g. Site basics Settings - Yoast SEO)
- You can also verify the content of #a11y-speak-polite changes to it (inner workings of WP a11y)
- Searching should announce how many results are found
Clicking outside of our (older) modals
- In both Elementor and the block editor, close the following modals by clicking outside of them (was originally disabled due to warnings/errors)
- SearchAppearanceModal
- SocialAppearanceModal
- SEMrushRelatedKeyphrasesModal
- WincherSEOPerformanceModal (only changed in Elementor)
- InsightsModal (only changed in Elementor)

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins that Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.
I have checked that the base branch is correctly set.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label.
I have added my hours to the WBSO document.

Fixes #

Yarn 4 removed pre- and post- lifecycle scripts: https://yarnpkg.com/advanced/lifecycle-scripts

github-actions · 2024-04-28T11:45:10Z

@igorschoester Please be aware that following packages have been abandoned and are not actively maintained anymore:

Package name	Path
@yoast/babel-preset	packages/babel-preset
@yoast/components	packages/components
@yoast/e2e-tests	packages/e2e-tests
@yoast/helpers	packages/helpers
@yoast/jest-preset	packages/jest-preset
@yoast/style-guide	packages/style-guide

Please consider using the other packages instead.

* remove side-effect of publish, as per the recommendation in https://yarnpkg.com/advanced/lifecycle-scripts * using files determine what we would publish, see https://docs.npmjs.com/cli/v10/configuring-npm/package-json#files * ignore .map files, just in case the build contains them * move browserslist-config index out of `src` folder, just for convenience of no `src` in the published version

Tweak lint to use .eslintignore file instead of only running in the src and tests folders

Move lint ignore to separate file

* upgrade @wordpress/components to WP 6.4 version, fixes a test failing on UUID sub dependency having require * move lint ignore to separate file

* add own config * auto-fix comma-dangle

* rename clean:build to clean, inline with the other packages * prefix node commands with yarn, as per their recommendedation when using PnP linking mode: https://yarnpkg.com/migration/pnp#enabling-yarn-pnp * switch to lint all vs just src (ignore missing test deps) * add missing jest jsdom, even though tests are disabled

* introducing ignore file * tune the max warnings to the current number

* move to JS format * remove exceptions * change react to detect * add css/dist/ to ignore list * auto-fix comma-dangle

* starting with the upgrade in our jest-preset * upgrade the other packages to match * fixes needed, coming in next commits

* an error would result in an infinite loop: add url = false * an error would not result in the error being displayed: add wait for next cycle * the above fixes the indexation tests

* missing act * the closing would result in further state changes that were not captured by the fireEvent.click * solution: wrap next check in waitFor

* remove the UI library source from the module mapping, it is expected to run build before test instead * remove different node_module overrides * add WP i18n to the module mapping to ensure a singleton, this fixes the text-domain warnings

* see https://lerna.js.org/docs/concepts/task-pipeline-configuration * upgrade lerna * ran lerna repair * specify ignore cache in grunt tasks, just to ensure no change there * add clean task (handy for cache busting too) * alphabetize scripts

* skipping preset upgrades - lets not require minor upgrades * feature-flag: remove unused babel plugins

* align versions * fix missing tailwindcss in root * fix wrong tailwindcss/forms version (not as per postcss-preset requirement)

* remove unused from JS * add missing webpack peer dep to UI lib

* move to actual deps: @yoast/helpers and styled-components * remove unused json dep * add peer deps: react and react-dom * add browserslist config to extend the yoast config

* @reduxjs/toolkit requires react-redux 7 or 8 * react-redux 8 requires redux 4 * remove redux-thunk and unused script that was using it

* add react and react-dom to root, to satisfy peer deps * remove unused @testing-library/react-hooks, warned about wanting older version of react-renderer (16.9.0 or 17.0.0 vs actual 18.2.0)

* as peer deps of the packages using replacement-variable-editor

* required by grunt-contrib-clean, grunt-shell and grunt-git * update grunt-git to work with grunt 1.6.1

* because it supports React 18 * turns out the close on click outside error is fixed too: * removing shouldCloseOnClickOutside false for: SearchAppearanceModal, SocialAppearanceModal, SEMrushRelatedKeyphrasesModal, WincherSEOPerformanceModal (Elementor) and InsightsModal (Elementor)

* not using React 18 (but 16 at the latest)

* inactive package since 5 years * still requiring React 16.3.x * moving over to already used WP a11y' speak * adding a hook and wrapper component for ease of use, as per downside of original PR: #19615

* due to warning about React 18 (package was using 17 before)

* was requiring old React version (via react-test-renderer) * not really used at the moment

(or packages provided by WP) * trigger was some requiring older React version -- not totally solved yet: * WP components at WP 6.5 version will solve Reakit * WP block-editor still requires react-autosize-textarea, which is archived since March 1, 2024 * WP compose and WP data still use use-memo-one 1.1.2 or 1.1.1 where 1.1.3 has React 18 support * we are not providing these packages in our plugin, so this is only affecting testing and development

* no more transform ignore or mapping of Yoast packages or lodash-es * remove unused find-with-regex * fix test import of lodash-es to use lodash

* they are required as peer deps by @yoast/style-guide now * and it makes a bit more sense that it is actually used, even though it is mostly indirectly via WP element

* using versions from @yoast/grunt-plugin-tasks range to prevent potential problems * fixing version of @yoast/grunt-plugin-tasks

There are no tests in the root folder

coveralls · 2024-04-28T12:21:06Z

Pull Request Test Coverage Report for Build 5a20fcf4642b15b29d1556e134a05a06ad13bdbe

Details

12 of 20 (60.0%) changed or added relevant lines in 8 files are covered.
3 unchanged lines in 2 files lost coverage.
Overall coverage increased (+0.05%) to 52.413%

Changes Missing Coverage	Changed/Added Lines	%
packages/helpers/src/ajaxHelper.js	1	0.0%
packages/js/src/settings/hooks/use-document-title.js	1	0.0%
packages/social-metadata-previews/src/editor/SocialPreviewEditor.js	1	0.0%
packages/js/src/first-time-configuration/tailwind-components/steps/indexation/indexation.js	2	0.0%
packages/js/src/settings/components/route-layout.js	3	0.0%

Files with Coverage Reduction	New Missed Lines	%
packages/js/src/containers/SEMrushRelatedKeyphrasesModal.js	1	0.0%
packages/js/src/settings/components/route-layout.js	2	0.0%

Totals
Change from base Build ebae401160dbb57f6d2a8da5a0b29c42cda002dd:	0.05%
Covered Lines:	28476
Relevant Lines:	54959

💛 - Coveralls

igorschoester added 7 commits April 26, 2024 10:25

Remove yoast-components dependency

c2164c9

Remove yoast-components from tooling

9c3035b

Remove yoast-components

f685e61

Add Yarn 4

39159af

Safe fix .gitignore

eabf07c

Fix grunt clean

98eea7f

Refactor pretest to be part of test itself

7742ddf

Yarn 4 removed pre- and post- lifecycle scripts: https://yarnpkg.com/advanced/lifecycle-scripts

igorschoester added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Apr 28, 2024

igorschoester force-pushed the igor/try-yarn-4 branch from 6c5eb4b to ca3b242 Compare April 28, 2024 12:04

igorschoester added 20 commits April 28, 2024 14:11

Fix analysis-report build and test

0706cbe

Fix browserslist-config lint

a824ac0

Fix @yoast/components build:css and lint

2783c21

Fix @yoast/feature-flag lint and test

3621d7a

Fix @yoast/helpers lint and test

8789e15

Fix @yoast/wordpress-seo build and test commands

a07032c

Tweak lint to use .eslintignore file instead of only running in the src and tests folders

Fix @yoast/replacement-variable-editor test

c1c444a

Move lint ignore to separate file

Fix @yoast/search-metadata-previews test

ea9c2af

* upgrade @wordpress/components to WP 6.4 version, fixes a test failing on UUID sub dependency having require * move lint ignore to separate file

Fix @yoast/social-metadata-forms lint and test

39e0dba

* add own config * auto-fix comma-dangle

Fix @yoast/social-metadata-previews lint and test

0223d5b

* add own config * auto-fix comma-dangle

Expand yoastseo lint

62c2799

* introducing ignore file * tune the max warnings to the current number

Fix root tooling lint

d1cbf84

* move to JS format * remove exceptions * change react to detect * add css/dist/ to ignore list * auto-fix comma-dangle

Upgrade jest and cohorts

e0a6a41

* starting with the upgrade in our jest-preset * upgrade the other packages to match * fixes needed, coming in next commits

Update snapshots

ded88a6

Fix indexation component

0f297fb

* an error would result in an infinite loop: add url = false * an error would not result in the error being displayed: add wait for next cycle * the above fixes the indexation tests

Fix search test warning

daca422

* missing act * the closing would result in further state changes that were not captured by the fireEvent.click * solution: wrap next check in waitFor

Clean Jest config

2159a0f

* remove the UI library source from the module mapping, it is expected to run build before test instead * remove different node_module overrides * add WP i18n to the module mapping to ensure a singleton, this fixes the text-domain warnings

Specify lerna/nx task dependencies

96185d9

* see https://lerna.js.org/docs/concepts/task-pipeline-configuration * upgrade lerna * ran lerna repair * specify ignore cache in grunt tasks, just to ensure no change there * add clean task (handy for cache busting too) * alphabetize scripts

igorschoester added 23 commits April 28, 2024 14:11

Upgrade babel preset and cohorts

a61cfd5

* skipping preset upgrades - lets not require minor upgrades * feature-flag: remove unused babel plugins

Bump CSS deps

2b32305

* align versions * fix missing tailwindcss in root * fix wrong tailwindcss/forms version (not as per postcss-preset requirement)

Fix webpack deps

10c80db

* remove unused from JS * add missing webpack peer dep to UI lib

Fix style-guide deps

2d813f6

* move to actual deps: @yoast/helpers and styled-components * remove unused json dep * add peer deps: react and react-dom * add browserslist config to extend the yoast config

Upgrade redux

cb6f33f

* @reduxjs/toolkit requires react-redux 7 or 8 * react-redux 8 requires redux 4 * remove redux-thunk and unused script that was using it

Fix react deps

6bfff26

* add react and react-dom to root, to satisfy peer deps * remove unused @testing-library/react-hooks, warned about wanting older version of react-renderer (16.9.0 or 17.0.0 vs actual 18.2.0)

Add missing draft-js peer deps from replacement-variable-editor

71e025f

* as peer deps of the packages using replacement-variable-editor

Add Grunt dev dep

7cac804

* required by grunt-contrib-clean, grunt-shell and grunt-git * update grunt-git to work with grunt 1.6.1

Allow semver control in sync WP dep script

bd01cc3

Fix yarn start

c7ddb8e

Remove unused react-intl and IntlProvider

9f639ed

* not using React 18 (but 16 at the latest)

Remove react-aria-live

247b79c

* inactive package since 5 years * still requiring React 16.3.x * moving over to already used WP a11y' speak * adding a hook and wrapper component for ease of use, as per downside of original PR: #19615

Upgrade WP blocks to WP 6.4 version

551d6ff

* due to warning about React 18 (package was using 17 before)

Fix analysis-report snapshots

a02c035

Upgrade UI lib WP jest-preset-default

545d333

* was requiring old React version (via react-test-renderer) * not really used at the moment

Clean jest-preset and configs

7eb8584

* no more transform ignore or mapping of Yoast packages or lodash-es * remove unused find-with-regex * fix test import of lodash-es to use lodash

Add missing react-is dep for styled-components

078a810

Switch react and react-dom to actual deps

88657cf

* they are required as peer deps by @yoast/style-guide now * and it makes a bit more sense that it is actually used, even though it is mostly indirectly via WP element

Add missing dev deps for Grunt

499e67b

* using versions from @yoast/grunt-plugin-tasks range to prevent potential problems * fixing version of @yoast/grunt-plugin-tasks

Remove unused root dev deps

b10abb5

Remove jest version output from CI

437a80c

There are no tests in the root folder

igorschoester force-pushed the igor/try-yarn-4 branch from ca3b242 to 437a80c Compare April 28, 2024 12:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to Yarn 4 #21345

Upgrade to Yarn 4 #21345

igorschoester commented Apr 28, 2024 •

edited

github-actions bot commented Apr 28, 2024

coveralls commented Apr 28, 2024

Upgrade to Yarn 4 #21345

Are you sure you want to change the base?

Upgrade to Yarn 4 #21345

Conversation

igorschoester commented Apr 28, 2024 • edited

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

UI changes

Other environments

Documentation

Quality assurance

Innovation

github-actions bot commented Apr 28, 2024

coveralls commented Apr 28, 2024

Pull Request Test Coverage Report for Build 5a20fcf4642b15b29d1556e134a05a06ad13bdbe

Details

💛 - Coveralls

igorschoester commented Apr 28, 2024 •

edited