React 19 support, migrate to @react-spring/web and @use-gesture/react - #2
Merged
Merged
Conversation
…/react Drop react-spring v8 (broken under React 18/19 StrictMode), react-use-gesture and the ResizeObserver polyfill. Wire the XState machine once via useActorRef so transitions no longer re-render, fix skipInitialTransition and the data-rsbs-state attribute, remove debug logging.
3 of 4 tasks
|
🎉 This PR is included in version 3.9.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrates the sheet off
react-springv8 /react-use-gesture(both unmaintained, and v8 breaks under React 18/19 StrictMode: it destroys its controllers on the dev double-mount and never recreates them) onto@react-spring/web10 and@use-gesture/react10, and adds React 19 to the peer deps. Also fixes several regressions from the XState v5 migration.Fixes
skipInitialTransitionwas ignored: the machine never receivedinitialState, now passed viainput.data-rsbs-statewas only set for atomic states (current.value === 'opening'is false for nested values), so theopening/closingCSS never applied. Usesmatches()now.console.log/console.countin every render, inuseReady, in the focus trap, plus debug actors withsleep(1000)shipped in the bundle.onSpringStart/onSpringEndpromises were not awaited, so returning a promise no longer delayed the transition.useMaxHeightinitial state.SpringConfigrequired every key; it is nowPartial.NODE_ENV=productionin the build script did not run on Windows (cross-env).postcss-svgowas a runtime dependency; moved to devDependencies.Performance
data-rsbs-stateattribute depended on them, so it is written to the DOM from an actor subscription (useActorRef). Opening previously triggered ~8 renders mid-animation.@juggle/resize-observer: it polyfills even when the native API exists and recomputes on every DOM mutation. NativeResizeObserverwith aborderBoxSizefallback.Compatibility
reactandreact-dom^16.14 || ^17 || ^18 || ^19.@types/react18 and 19 (no globalJSX, nouseRef()without argument, noMutableRefObject).aria-modalfollowsblocking; closed-but-mounted sheets (keepMounted) getvisibility: hiddenso they leave the tab order and a11y tree.reactStrictMode: trueso the v8 StrictMode bug cannot regress silently.Behaviour note
The published version animates with a 115ms linear tween (
duration: 115overrides tension/friction/velocity). Kept as the default;springConfig={{ duration: undefined }}restores spring physics. Documented onSpringConfig.Numbers
Test plan
npm test(library build, declarations, Next docs build)tscwith@types/react18 and 19, eslint