Update outdated dependencies #802

sergei-maertens · 2025-03-05T15:39:08Z

Partially closes #445

Let's see what breaks in our CI pipeline...

Expand to see left over outdated packages

Package                                   Current           Wanted   Latest  Location                                       Depended by
@sentry/react                              8.50.0           8.55.0    9.4.0  node_modules/@sentry/react                     open-forms-sdk
@types/node                              20.17.22         20.17.23  22.13.9  node_modules/@types/node                       open-forms-sdk
@types/react-dom                           18.3.5           18.3.5   19.0.4  node_modules/@types/react-dom                  open-forms-sdk
@utrecht/component-library-css    1.0.0-alpha.604  1.0.0-alpha.604    7.1.0  node_modules/@utrecht/component-library-css    open-forms-sdk
@utrecht/component-library-react  1.0.0-alpha.353  1.0.0-alpha.353    9.0.1  node_modules/@utrecht/component-library-react  open-forms-sdk
@utrecht/components               1.0.0-alpha.565  1.0.0-alpha.565    7.4.0  node_modules/@utrecht/components               open-forms-sdk
react                                      18.3.1           18.3.1   19.0.0  node_modules/react                             open-forms-sdk
react-dom                                  18.3.1           18.3.1   19.0.0  node_modules/react-dom                         open-forms-sdk
react-leaflet                               4.2.1            4.2.1    5.0.0  node_modules/react-leaflet                     open-forms-sdk
typescript                                  5.7.3            5.8.2    5.8.2  node_modules/typescript                        open-forms-sdk

@sentry/react -> our Sentry instance is too old and needs to be ugpraded first
@types/node -> roughly matches our .nvmrc
react, react-dom and @types/react-dom: we can't upgrade to React 19 yet
@utrecht/component-library-css, @utrecht/component-library-react and @utrecht/components -> there are known breaking changes/issues, so holding off on those ones
react-leaflet -> requires React 19
typescript -> newest version was released only a few days ago - let's wait for other tools to catch up

This should give a more accurate theme preview for The Hague in our own storybook.

…rdam/design-tokens package

* Removed obsoleted remarks * Updated sample code to use TS syntax * Added section about typescript usage

This only affects the theme preview in our storybook.

These were inadvertedly specified in the dependencies.

Vite uses it under the hood for postcss, but we don't use it directly anymore as esbuild uses a different targets definition, so the current dependency + config were misleading.

The utrecht component library may depend on an older version still, but that should then be properly captured in a local node_modules folder. All usages were checked that they still exist and are not affected by the breaking changes.

codecov · 2025-03-05T15:41:29Z

Bundle Report

Changes will increase total bundle size by 226.32kB (2.37%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
@open-formulieren/sdk-OpenForms-umd	4.9MB	113.23kB (2.37%) ⬆️
@open-formulieren/sdk-esm	4.87MB	113.09kB (2.38%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: @open-formulieren/sdk-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`assets/formio-*.js`	9.07kB	2.03MB	0.45%
`assets/sdk-*.js`	11.21kB	1.02MB	1.11%
`static/media/fa-solid-900.D0aA9rwL.ttf` (New)	426.11kB	426.11kB	100.0% 🚀
`assets/LeafletMap-*.js`	-26 bytes	366.5kB	-0.01%
`static/media/fa-brands-400.D1LuMI3I.ttf` (New)	210.79kB	210.79kB	100.0% 🚀
`static/media/fa-solid-900.CTAAxXor.woff2` (New)	158.22kB	158.22kB	100.0% 🚀
`static/media/fa-brands-400.D_cYUPeE.woff2` (New)	118.68kB	118.68kB	100.0% 🚀
`static/media/fa-regular-400.DZaxPHgR.ttf` (New)	68.06kB	68.06kB	100.0% 🚀
`assets/index-*.js`	14.37kB	45.45kB	46.26% ⚠️
`static/media/fa-regular-400.BjRzuEpd.woff2` (New)	25.47kB	25.47kB	100.0% 🚀
`assets/constants-*.js`	-5 bytes	144 bytes	-3.36%
~~`static/media/fa-solid-900.f4MajOib.ttf`~~ (Deleted)	-394.63kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-brands-400.D7HcTrzQ.ttf`~~ (Deleted)	-187.21kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-solid-900.tLH6XCuf.woff2`~~ (Deleted)	-150.12kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-brands-400.C-jaCRNI.woff2`~~ (Deleted)	-108.02kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-regular-400.BSSd-Tma.ttf`~~ (Deleted)	-63.95kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-regular-400.TCCU0xbi.woff2`~~ (Deleted)	-24.95kB	0 bytes	-100.0% 🗑️

Files in assets/formio-*.js:

./src/formio/validators/minMaxDateAndDatetimeValidator.js → Total Size: 1.27kB

Files in assets/sdk-*.js:

./src/api.js → Total Size: 4.88kB
./src/components/forms/NumberField/NumberField.jsx → Total Size: 2.58kB
./src/i18n.jsx → Total Size: 4.11kB
./src/hooks/useSessionTimeout.js → Total Size: 2.13kB
./src/components/FormStepSummary/ComponentValueDisplay.jsx → Total Size: 8.24kB
./src/components/AppDebug.jsx → Total Size: 1.55kB
./src/components/LanguageSelection/LanguageSelection.jsx → Total Size: 2.34kB
./src/data/submissions.js → Total Size: 1.2kB

view changes for bundle: @open-formulieren/sdk-OpenForms-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`open-*.js`	34.77kB	3.54MB	0.99%
`static/media/fa-solid-900.D0aA9rwL.ttf` (New)	426.11kB	426.11kB	100.0% 🚀
`static/media/fa-brands-400.D1LuMI3I.ttf` (New)	210.79kB	210.79kB	100.0% 🚀
`static/media/fa-solid-900.CTAAxXor.woff2` (New)	158.22kB	158.22kB	100.0% 🚀
`static/media/fa-brands-400.D_cYUPeE.woff2` (New)	118.68kB	118.68kB	100.0% 🚀
`static/media/fa-regular-400.DZaxPHgR.ttf` (New)	68.06kB	68.06kB	100.0% 🚀
`static/media/fa-regular-400.BjRzuEpd.woff2` (New)	25.47kB	25.47kB	100.0% 🚀
~~`static/media/fa-solid-900.f4MajOib.ttf`~~ (Deleted)	-394.63kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-brands-400.D7HcTrzQ.ttf`~~ (Deleted)	-187.21kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-solid-900.tLH6XCuf.woff2`~~ (Deleted)	-150.12kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-brands-400.C-jaCRNI.woff2`~~ (Deleted)	-108.02kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-regular-400.BSSd-Tma.ttf`~~ (Deleted)	-63.95kB	0 bytes	-100.0% 🗑️
~~`static/media/fa-regular-400.TCCU0xbi.woff2`~~ (Deleted)	-24.95kB	0 bytes	-100.0% 🗑️

Files in open-*.js:

./src/api.js → Total Size: 4.88kB
./src/formio/validators/minMaxDateAndDatetimeValidator.js → Total Size: 1.27kB
./src/components/FormStepSummary/ComponentValueDisplay.jsx → Total Size: 8.25kB
./src/hooks/useSessionTimeout.js → Total Size: 2.13kB
./src/components/AppDebug.jsx → Total Size: 1.55kB
./src/data/submissions.js → Total Size: 1.2kB
./src/i18n.jsx → Total Size: 4.78kB
./src/components/LanguageSelection/LanguageSelection.jsx → Total Size: 2.34kB
./src/components/forms/NumberField/NumberField.jsx → Total Size: 2.58kB

codecov · 2025-03-05T15:42:11Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.42%. Comparing base (a375c8e) to head (c68933e).
Report is 39 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #802      +/-   ##
==========================================
+ Coverage   83.28%   83.42%   +0.13%     
==========================================
  Files         233      233              
  Lines        4631     4633       +2     
  Branches     1178     1180       +2     
==========================================
+ Hits         3857     3865       +8     
+ Misses        744      738       -6     
  Partials       30       30

Flag	Coverage Δ
storybook	`76.82% <100.00%> (+0.21%)`	⬆️
vitest	`62.18% <100.00%> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

This valueIsNumericString is a terrible prop name - passing it as true means that the string itself can be interpreted directly as a number, but we have the opposite in Dutch locale if the '.' character is the thousand separator.

…ider

It should be faster :)

This was probably added out of confusion about which package does what, but we only use @utrecht/components in our SCSS pipeline.

sergei-maertens added 26 commits March 5, 2025 14:52

⬆️ [#445] Upgrade @babel/core and @floating-ui/react

6cf2ef5

⬆️ [#445] Upgrade @fortawesome/fontawesome-free

d48fcd8

⬆️ [#445] Upgrade @gemeente-denhaag/design-tokens-components to 2.0.0

5a50293

This should give a more accurate theme preview for The Hague in our own storybook.

⬆️ [#445] Promote unstable rotterdam design tokens to @gemeente-rotte…

f79ba7e

…rdam/design-tokens package

📝 [#445] Update developer docs

91730f6

* Removed obsoleted remarks * Updated sample code to use TS syntax * Added section about typescript usage

⬆️ [#445] Upgrade @sentry/vite-plugin

517b5da

⬆️ [#445] Upgrade @storybook/addon-coverage

f0f2169

⬆️ [#445] @trivago/prettier-plugin-sort-imports

4e6d5a0

⬆️ [#445] Upgrade @trivago/prettier-plugin-sort-imports

1a2bcc5

⬆️ [#445] upgrade @typescript-eslint/parser

63e0c23

⬆️ [#445] Upgrade @utrecht/design-tokens to 2.5.0

f865739

This only affects the theme preview in our storybook.

⬆️ [#445] Upgrade babel-plugin-formatjs

8b6dd19

⬆️ [#445] Upgrade babel-plugin-module-resolver

bce707b

📌 [#445] Properly move some package to devDependencies

a059820

These were inadvertedly specified in the dependencies.

➖ [#445] Drop browserslist from direct dependencies

47dbcc2

Vite uses it under the hood for postcss, but we don't use it directly anymore as esbuild uses a different targets definition, so the current dependency + config were misleading.

⬆️ [#445] Upgrade date-fns to v4

1bd4cf4

The utrecht component library may depend on an older version still, but that should then be properly captured in a local node_modules folder. All usages were checked that they still exist and are not affected by the breaking changes.

⬆️ [#445] Update eslint and related plugins

9ff4786

⬆️ [#445] Update formik

3eea634

⬆️ [#445] Bump globals

9e17f04

⬆️ [#445] Upgrade ibantools

e4c3abb

⬆️ [#445] Upgrade jsdom

73b858e

⬆️ [#445] Upgrade msw

fb9eccb

⬆️ [#445] Upgrade prettier

42d6fed

⬆️ [#445] Upgrade to react and react-dom 18.3

6906c8a

⬆️ [#445] Upgrade react-intl

1803d99

⬆️ [#445] Upgrade react-modal

a7207cb

sergei-maertens requested a review from vaszig March 5, 2025 15:40

⬆️ [#445] Upgrade react-number-format

e73faa0

This valueIsNumericString is a terrible prop name - passing it as true means that the string itself can be interpreted directly as a number, but we have the opposite in Dutch locale if the '.' character is the thousand separator.

sergei-maertens added 8 commits March 5, 2025 17:43

⬆️ [#445] Upgrade react-router

1610a1f

⬆️ [#445] Upgrade react-select

f366180

⬆️ [#445] Upgrade react-use

18ad63d

⬆️ [#445] Upgrade rimraf

00cf1b6

⬆️ [#445] Upgrade rollup

5a5c727

⬆️ [#445] Upgrade storybook-react-intl and storybook-addon-theme-prov…

18d8684

…ider

⬆️ [#445] Upgrade immer, use-immer and state-pool

5123025

⬆️ [#445] Replace sass with sass-embedded

1d1a4aa

It should be faster :)

sergei-maertens force-pushed the chore/445-update-outdated-dependencies branch from f15ec1e to 1d1a4aa Compare March 5, 2025 16:43

sergei-maertens added 3 commits March 5, 2025 18:01

💚 [#445] Flaky test because of formio?

7a2f1d6

💚 [#445] Possibly flakiness because input happens too fast?

58cc986

➖ [#445] Drop unused package

c68933e

This was probably added out of confusion about which package does what, but we only use @utrecht/components in our SCSS pipeline.

sergei-maertens merged commit d5db7b5 into main Mar 5, 2025
17 checks passed

sergei-maertens deleted the chore/445-update-outdated-dependencies branch March 5, 2025 20:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update outdated dependencies #802

Update outdated dependencies #802

sergei-maertens commented Mar 5, 2025 •

edited

Loading

codecov bot commented Mar 5, 2025 •

edited

Loading

Assets Changed:

Assets Changed:

codecov bot commented Mar 5, 2025 •

edited

Loading

Update outdated dependencies #802

Update outdated dependencies #802

Conversation

sergei-maertens commented Mar 5, 2025 • edited Loading

codecov bot commented Mar 5, 2025 • edited Loading

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

codecov bot commented Mar 5, 2025 • edited Loading

Codecov Report

sergei-maertens commented Mar 5, 2025 •

edited

Loading

codecov bot commented Mar 5, 2025 •

edited

Loading

codecov bot commented Mar 5, 2025 •

edited

Loading