feat(components): bump react from 18.3.1 to 19.0.0 in /components#673
feat(components): bump react from 18.3.1 to 19.0.0 in /components#673dependabot[bot] wants to merge 8 commits intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This is a preview of the changelog of the next release. If this branch is not up-to-date with the current main branch, the changelog may not be accurate. Rebase your branch on the main branch to get the most accurate changelog. Note that this might contain changes that are on main, but not yet released. Changelog: 0.13.3 (2025-01-23)Features
|
b04ac66 to
421dbf3
Compare
421dbf3 to
55f419b
Compare
55f419b to
1eb4204
Compare
JonasKellerer
left a comment
There was a problem hiding this comment.
Nice. It works well for me in the dashborad-components repo (example and storybook).
I have also tried to use it in dashborads. There I still get the error (after upgrading also to react 19:
TS2339: Property gs-date-range-selector does not exist on type JSX. IntrinsicElements
This might be caused by astro, since it does not (fully) support react 19. withastro/astro#12686
However, one can use the components there (with the new syntax), so I think this is fine.
I just checked, with this version of the components, the typecheck will fail in the dashboards. I'm not sure how much of an Astro problem that is. Let's still delay this and check back later? |
|
Seems fine for me. I think this PR will not take much time to update later. |
|
A newer version of react exists, but since this PR has been edited by someone other than Dependabot I haven't updated it. You'll get a PR for the updated version as normal once this PR is merged. |
Bumps [react](https://github.com/facebook/react/tree/HEAD/packages/react) from 18.3.1 to 19.0.0. - [Release notes](https://github.com/facebook/react/releases) - [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md) - [Commits](https://github.com/facebook/react/commits/v19.0.0/packages/react) --- updated-dependencies: - dependency-name: react dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>
…eact https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript And update the React example to React 19.
1eb4204 to
0ad3a22
Compare
|
It can be tested with GenSpectrum/dashboards#1064 in the dashboards. I think it also works with React 18 users AFAICS. But we still need to release a new version for this -> made it a |
There was a problem hiding this comment.
Pull request overview
This PR upgrades the React dependency in the components package to React 19 and updates the TypeScript/JSX typing strategy for the exported web components so they can be used from React 19 projects. It also updates the React example app to pass structured values (arrays/objects) into the gs-* custom elements.
Changes:
- Bump
react(and React types in the example) to19.0.0and update example tooling (@vitejs/plugin-react). - Update custom-element JSX typings from
namespace JSXtonamespace React.JSXacross the web component wrappers. - Improve Zod validation messages by adding
errorMapto a couple of array schemas; update the React example to pass objects/arrays rather than JSON strings.
Reviewed changes
Copilot reviewed 24 out of 25 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| examples/React/src/App.tsx | Updates example usage for React 19 + passes object/array props into custom elements. |
| examples/React/package.json | Bumps React, React DOM, React type packages, and Vite React plugin for the example app. |
| components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-statistics.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-sequences-by-location.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-relative-growth-advantage.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-queries-over-time.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-prevalence-over-time.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-number-sequences-over-time.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-mutations.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing; minor formatting. |
| components/src/web-components/visualization/gs-mutations-over-time.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-mutation-comparison.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-genome-data-viewer.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/visualization/gs-aggregate.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/mutation-annotations-context.ts | Adds custom Zod error mapping for invalid mutation annotations arrays. |
| components/src/web-components/input/gs-text-filter.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/input/gs-number-range-filter.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/input/gs-mutation-filter.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing; minor formatting. |
| components/src/web-components/input/gs-location-filter.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/input/gs-lineage-filter.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/input/gs-date-range-filter.tsx | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/web-components/gs-app.ts | Switches JSX namespace to React.JSX and adjusts intrinsic element typing. |
| components/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts | Adds custom Zod error mapping for invalid “display mutations” arrays. |
| components/package.json | Bumps react devDependency in the components workspace to 19. |
| components/package-lock.json | Locks updated React 19 dependency graph (including scheduler/react-dom peer resolution). |
Files not reviewed (1)
- components/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| namespace React.JSX { | ||
| interface IntrinsicElements { | ||
| 'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>; | ||
| 'gs-app': AppComponent; | ||
| } | ||
| } |
There was a problem hiding this comment.
React.JSX.IntrinsicElements['gs-app'] is set to AppComponent, but that type doesn’t include standard JSX/DOM props (e.g. ref, children, className, style, event handlers). This will cause TypeScript errors for React consumers (and the React example) when using <gs-app> with children or refs. Define the intrinsic element type as React’s DOM props for the element (so ref/children are included) and intersect/augment it with the component’s custom properties instead of using the element class directly as the props type.
| namespace React.JSX { | ||
| interface IntrinsicElements { | ||
| 'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>; | ||
| 'gs-location-filter': LocationFilterComponent; | ||
| } | ||
| } |
There was a problem hiding this comment.
React.JSX.IntrinsicElements['gs-location-filter'] is typed as LocationFilterComponent, which omits standard JSX/DOM attributes like ref. React users commonly need ref for custom elements (and the React example uses it), so this typing will block compilation. Use a DOM-props-based type for the intrinsic element (including ref) and extend it with the component’s custom properties.
| namespace React.JSX { | ||
| interface IntrinsicElements { | ||
| 'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>; | ||
| 'gs-date-range-filter': DateRangeFilterComponent; | ||
| } |
There was a problem hiding this comment.
Same issue as other web component JSX typings: React.JSX.IntrinsicElements['gs-date-range-filter'] is set to DateRangeFilterComponent, which won’t include standard JSX/DOM props like ref, className, etc. This will break TypeScript in React apps (the React example passes a ref). Define the intrinsic element props based on React’s HTML/DOM attribute types for the element and then add the custom properties.
Bumps react from 18.3.1 to 19.0.0.
Release notes
Sourced from react's releases.
... (truncated)
Changelog
Sourced from react's changelog.
... (truncated)
Commits
e137890[string-refs] cleanup string ref code (#31443)d1f0472[string-refs] remove enableLogStringRefsProd flag (#31414)3dc1e48Followup: remove dead test code from #30346 (#31415)07aa494Remove enableRefAsProp feature flag (#30346)45804af[flow] Eliminate usage of more than 1-argReact.AbstractComponentin React ...5636fad[string-refs] log string ref from prod (#31161)b78a7f2[rcr] Re-export useMemoCache in top level React namespace (#31139)4e9540e[Fiber] Log the Render/Commit phases and the gaps in between (#31016)d4688df[Fiber] Track Event Time, startTransition Time and setState Time (#31008)15da917Don't read currentTransition back from internals (#30991)You can trigger a rebase of this PR by commenting
@dependabot rebase.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebasewill rebase this PR@dependabot recreatewill recreate this PR, overwriting any edits that have been made to it@dependabot mergewill merge this PR after your CI passes on it@dependabot squash and mergewill squash and merge this PR after your CI passes on it@dependabot cancel mergewill cancel a previously requested merge and block automerging@dependabot reopenwill reopen this PR if it is closed@dependabot closewill close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot show <dependency name> ignore conditionswill show all of the ignore conditions of the specified dependency@dependabot ignore this major versionwill close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor versionwill close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependencywill close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)