The react-pose and react-spring package are intentionally not updated in order to prevent incompatibilities. Due to the transitive dependency of react-pose to the stylefire package, some SVG animations would break because the latest version of stylefire changed the way how x & y CSS transform and translate propertiy values are handled. This results in SVG element not being scaled from their original position but from the top of the viewBox.
Using the latest version of react-spring causes a value not defined error for the animation of the floating port project logos.
Both problems will be solved later on by finding the root cause of the undefined value as well as migrating away from the deprecated react-pose package to the new framer-motion package and API.
Updated ESLint Configuration
The ESLint configuration will be adapted to the new @arcticicestudio/eslint-config package. This simplifies the configuration at all by removing custom overrides that were missing in the preset. It also removes the import of the import/no-extraneous-dependencies rule object from the @arcticicestudio/eslint-config-base package since the rule will be disabled for all files matching the **/.gatsby/**/*.js pattern.
The new preset also comes with the new development dependency package eslint-config-prettier. In order to resolve alias imports the eslint-import-resolver-alias package will also be added and configured.
After updating all configurations the whole code base will be linted and possible errors and warnings will be fixed.
Testing Setup
The awesome react-testing libraries moved to the @testing-library package scope which requires some changes to be done to migrate the test setup:
Update all package import paths, e.g. react-testing-library to @testing-library/react.
Remove the deprecated import of the cleanup-after-each function that yields the following warning
The module @testing-library/react/cleanup-after-each has been deprecated and no longer does anything (it is not needed). You no longer need to import this module and can safely remove any import or configuration which imports this module.
Update failing snapshots were only the class name of styled components changed. This is because the generated class names are now starting with a counter of 0 instead of 1 causing only changes like this:
This is the regular batch update for outdated dependencies.
Deprecated Packages
The following packages have been deprecated in favour of new (scoped) packages:
eslint-config-arcticicestudio➔@arcticicestudio/eslint-configgatsby-mdx➔gatsby-plugin-mdxjest-dom➔@testing-library/jest-domreact-hooks-testing-library➔@testing-library/react-hooksreact-testing-library➔@testing-library/reactKnown Issues
The
react-poseandreact-springpackage are intentionally not updated in order to prevent incompatibilities. Due to the transitive dependency ofreact-poseto thestylefirepackage, some SVG animations would break because the latest version ofstylefirechanged the way howx&yCSStransformandtranslatepropertiy values are handled. This results in SVG element not being scaled from their original position but from the top of theviewBox. Using the latest version ofreact-springcauses avalue not definederror for the animation of the floating port project logos. Both problems will be solved later on by finding the root cause of the undefinedvalueas well as migrating away from the deprecatedreact-posepackage to the newframer-motionpackage and API.Updated ESLint Configuration
The ESLint configuration will be adapted to the new
@arcticicestudio/eslint-configpackage. This simplifies the configuration at all by removing custom overrides that were missing in the preset. It also removes the import of theimport/no-extraneous-dependenciesrule object from the@arcticicestudio/eslint-config-basepackage since the rule will be disabled for all files matching the**/.gatsby/**/*.jspattern.The new preset also comes with the new development dependency package
eslint-config-prettier. In order to resolve alias imports theeslint-import-resolver-aliaspackage will also be added and configured.After updating all configurations the whole code base will be linted and possible errors and warnings will be fixed.
Testing Setup
The awesome react-testing libraries moved to the
@testing-librarypackage scope which requires some changes to be done to migrate the test setup:react-testing-libraryto@testing-library/react.cleanup-after-eachfunction that yields the following warning0instead of1causing only changes like this:Production Dependencies
1.0.6➔1.5.10.18.0➔0.19.02.6.1➔2.6.42.0.0-alpha.27➔2.4.12.3.29➔2.15.362.0.40➔2.2.27gatsby-mdx➔ gatsby-plugin-mdx0.6.21.0.512.0.12➔2.1.112.0.13➔2.1.131.0.16➔1.1.123.0.5➔3.1.112.0.29➔2.2.212.0.15➔ 2.1.19``2.0.2➔2.1.12.0.25➔3.0.143.0.12➔3.1.112.0.11➔2.1.101.4.0➔1.5.02.0.35➔2.2.292.0.12➔2.2.173.0.7➔3.1.90.0.3➔1.0.02.0.32➔2.1.312.0.18➔2.1.182.1.18➔2.2.212.1.12➔2.2.133.5.0➔3.10.04.17.11➔4.17.153.2.0➔3.4.116.8.6➔16.10.216.8.6➔16.10.25.2.0➔5.2.18.0.7➔8.0.276.0.0➔6.3.04.2.0➔4.4.0Development Dependencies
7.4.3➔7.6.47.4.0➔7.5.57.2.0➔7.5.27.4.3➔7.4.47.2.0➔7.6.01.0.14➔1.5.14.2.0➔4.3.310.0.1➔10.0.324.7.1➔24.9.01.10.0➔1.10.60.1.11➔0.2.181.1.0➔3.0.05.16.0➔6.5.1eslint-config-arcticicestudio➔ @arcticicestudio/eslint-config>=0.4.0 <1.0.0>=0.8.0 <1.0.06.4.02.1.1➔3.0.01.1.22.17.2➔2.18.26.2.1➔6.2.33.0.1➔3.1.17.12.4➔7.16.01.6.0➔2.1.23.0.3➔3.0.47.1.3➔7.1.42.1.0➔3.0.924.7.1➔24.9.0jest-dom➔ @testing-library/jest-dom3.1.34.1.26.3.0➔8.0.06.3.1➔6.3.38.1.5➔9.4.21.17.0➔1.18.22.0.2➔2.0.3react-hooks-testing-library➔ @testing-library/react0.5.09.3.0react-testing-library➔ @testing-library/react-hooks6.1.22.0.31.0.2➔1.0.36.0.1➔7.0.07.0.6➔8.0.0>=0.2.0 <1.0.0➔>=0.3.0 <1.0.03.3.2➔3.5.2