Skip to content

feat(components): bump react from 18.3.1 to 19.0.0 in /components #673

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dependabot wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat(components): bump react from 18.3.1 to 19.0.0 in /components #673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
792c3aa
chore(components): bump react from 18.3.1 to 19.0.0 in /components
dependabot[bot] Jan 21, 2025
0ad3a22
feat(components): use the React 19 syntax to declare components for R…
fengelniederhammer Jan 23, 2025
4a89b47
fix stuff
fengelniederhammer Mar 5, 2026
9040a57
fix stuff
fengelniederhammer Mar 5, 2026
f1c7c6e
fix namespace declarations
fengelniederhammer Mar 5, 2026
2122885
more speaking error on invalid props
fengelniederhammer Mar 9, 2026
e6e7536
format
fengelniederhammer Mar 9, 2026
8692816
format
fengelniederhammer Mar 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 51 additions & 19 deletions components/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@
"msw": "^2.2.14",
"postcss": "^8.4.38",
"prettier": "^3.2.5",
"react": "^18.3.1",
"react": "^19.0.0",
"storybook": "^8.0.9",
"storybook-addon-fetch-mock": "^2.0.0",
"tailwindcss": "^4.0.9",
Expand Down
4 changes: 3 additions & 1 deletion components/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import { type useMutationAnnotationsProvider } from '../MutationAnnotationsConte
import type { DisplayedMutationType } from '../components/mutation-type-selector';
import type { DisplayedSegment } from '../components/segment-selector';

export const displayMutationsSchema = z.array(z.string());
export const displayMutationsSchema = z.array(z.string(), {
errorMap: () => ({ message: `invalid display mutations` }),
});
export type DisplayMutations = z.infer<typeof displayMutationsSchema>;

export type MutationFilter = {
Expand Down
5 changes: 2 additions & 3 deletions components/src/web-components/gs-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { provide } from '@lit/context';
import { Task } from '@lit/task';
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';
import z from 'zod';

import { lapisContext } from './lapis-context';
Expand Down Expand Up @@ -129,9 +128,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-app': AppComponent;
}
}
Comment on lines +131 to 135
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
}
5 changes: 2 additions & 3 deletions components/src/web-components/input/gs-date-range-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import flatpickrStyle from 'flatpickr/dist/flatpickr.css?inline';
import { unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
Expand Down Expand Up @@ -144,9 +143,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-date-range-filter': DateRangeFilterComponent;
}
Comment on lines +146 to 149
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
}
}
Expand Down
5 changes: 2 additions & 3 deletions components/src/web-components/input/gs-lineage-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import {
type LineageFilterChangedEvent,
Expand Down Expand Up @@ -146,9 +145,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-lineage-filter': LineageFilterComponent;
}
}
}
5 changes: 2 additions & 3 deletions components/src/web-components/input/gs-location-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { type LocationChangedEvent } from '../../preact/locationFilter/LocationChangedEvent';
import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
Expand Down Expand Up @@ -110,9 +109,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-location-filter': LocationFilterComponent;
}
}
Comment on lines +112 to 116
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
}
Expand Down
7 changes: 3 additions & 4 deletions components/src/web-components/input/gs-mutation-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
Expand Down Expand Up @@ -67,7 +66,7 @@ export class MutationFilterComponent extends PreactLitAdapter {
* All values provided must be valid mutations or insertions.
* Invalid values will be ignored.
*/
@property({type: Object})
@property({ type: Object })
initialValue:
{
nucleotideMutations: string[];
Expand Down Expand Up @@ -125,9 +124,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-mutation-filter': MutationFilterComponent;
}
}
}
Expand Down
5 changes: 2 additions & 3 deletions components/src/web-components/input/gs-number-range-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import {
type NumberRangeFilterChangedEvent,
Expand Down Expand Up @@ -140,9 +139,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-number-range-filter': NumberRangeFilterComponent;
}
}
}
5 changes: 2 additions & 3 deletions components/src/web-components/input/gs-text-filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { type TextFilterChangedEvent } from '../../preact/textFilter/TextFilterChangedEvent';
import { TextFilter, type TextFilterProps } from '../../preact/textFilter/text-filter';
Expand Down Expand Up @@ -100,9 +99,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-text-filter': TextFilterComponent;
}
}
}
Expand Down
4 changes: 3 additions & 1 deletion components/src/web-components/mutation-annotations-context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ const mutationAnnotationSchema = z.object({
});
export type MutationAnnotation = z.infer<typeof mutationAnnotationSchema>;

export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema);
export const mutationAnnotationsSchema = z.array(mutationAnnotationSchema, {
errorMap: () => ({ message: 'invalid mutation annotations' }),
});
export type MutationAnnotations = z.infer<typeof mutationAnnotationsSchema>;

export const mutationAnnotationsContext = createContext<MutationAnnotations>(Symbol('mutation-annotations-context'));
5 changes: 2 additions & 3 deletions components/src/web-components/visualization/gs-aggregate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { Aggregate, type AggregateProps } from '../../preact/aggregatedData/aggregate';
import { type Equals, type Expect } from '../../utils/typeAssertions';
Expand Down Expand Up @@ -131,9 +130,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-aggregate': AggregateComponent;
}
}
}
Expand Down
5 changes: 2 additions & 3 deletions components/src/web-components/visualization/gs-genome-data-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { GenomeDataViewer } from '../../preact/genomeViewer/genome-data-viewer';
import { PreactLitAdapter } from '../PreactLitAdapter';
Expand Down Expand Up @@ -53,9 +52,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-genome-data-viewer': GenomeDataViewerComponent;
}
}
}
5 changes: 2 additions & 3 deletions components/src/web-components/visualization/gs-mutation-comparison.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { consume } from '@lit/context';
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
Expand Down Expand Up @@ -137,9 +136,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-mutation-comparison': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-mutation-comparison': MutationComparisonComponent;
}
}
}
Expand Down
5 changes: 2 additions & 3 deletions components/src/web-components/visualization/gs-mutations-over-time.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { consume } from '@lit/context';
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
Expand Down Expand Up @@ -179,9 +178,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-mutations-over-time': MutationsOverTimeComponent;
}
}
}
15 changes: 7 additions & 8 deletions components/src/web-components/visualization/gs-mutations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { consume } from '@lit/context';
import { customElement, property } from 'lit/decorators.js';
import type { DetailedHTMLProps, HTMLAttributes } from 'react';

import { MutationAnnotationsContextProvider } from '../../preact/MutationAnnotationsContext';
import { MutationLinkTemplateContextProvider } from '../../preact/MutationLinkTemplateContext';
Expand Down Expand Up @@ -88,11 +87,11 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
@property({ type: Object })
baselineLapisFilter:
(Record<string, string | string[] | number | null | boolean | undefined> & {
nucleotideMutations?: string[];
aminoAcidMutations?: string[];
nucleotideInsertions?: string[];
aminoAcidInsertions?: string[];
})
nucleotideMutations?: string[];
aminoAcidMutations?: string[];
nucleotideInsertions?: string[];
aminoAcidInsertions?: string[];
})
| undefined = undefined;

/**
Expand Down Expand Up @@ -169,9 +168,9 @@ declare global {

declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
namespace React.JSX {
interface IntrinsicElements {
'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
'gs-mutations': MutationsComponent;
}
}
}
Expand Down
Loading