feat(components): use the React 19 syntax to declare components for React

fengelniederhammer · fengelniederhammer · commit 1eb4204e1e65 · 2025-01-23T15:25:47.000+01:00
https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript And update the React example to React 19.
diff --git a/components/src/web-components/app.ts b/components/src/web-components/app.ts
@@ -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';
@@ -88,11 +87,15 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-app': {
+                lapis: string;
+                // eslint-disable-next-line no-undef
+                children: React.ReactNode;
+            };
         }
     }
 }
diff --git a/components/src/web-components/input/gs-date-range-selector.tsx b/components/src/web-components/input/gs-date-range-selector.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
 import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeSelector/dateRangeOption';
@@ -134,11 +133,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': Partial<DateRangeSelectorProps>;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-lineage-filter.tsx b/components/src/web-components/input/gs-lineage-filter.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LineageFilterChangedEvent } from '../../preact/lineageFilter/LineageFilterChangedEvent';
 import { LineageFilter, type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
@@ -95,11 +94,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': Partial<LineageFilterProps>;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-location-filter.tsx b/components/src/web-components/input/gs-location-filter.tsx
@@ -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';
@@ -99,11 +98,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': Partial<LocationFilterProps>;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-mutation-filter.tsx b/components/src/web-components/input/gs-mutation-filter.tsx
@@ -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';
@@ -99,11 +98,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': Partial<MutationFilterProps>;
         }
     }
 }
diff --git a/components/src/web-components/input/gs-text-input.tsx b/components/src/web-components/input/gs-text-input.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type TextInputChangedEvent } from '../../preact/textInput/TextInputChangedEvent';
 import { TextInput, type TextInputProps } from '../../preact/textInput/text-input';
@@ -89,11 +88,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': Partial<TextInputProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-aggregate.tsx b/components/src/web-components/visualization/gs-aggregate.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Aggregate, type AggregateProps, type AggregateView } from '../../preact/aggregatedData/aggregate';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -126,11 +125,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': Partial<AggregateProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-mutation-comparison.tsx b/components/src/web-components/visualization/gs-mutation-comparison.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationComparison, type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -108,11 +107,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison': Partial<MutationComparisonProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-mutations-over-time.tsx b/components/src/web-components/visualization/gs-mutations-over-time.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { MutationsOverTime, type MutationsOverTimeProps } from '../../preact/mutationsOverTime/mutations-over-time';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -108,11 +107,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': Partial<MutationsOverTimeProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-mutations.tsx b/components/src/web-components/visualization/gs-mutations.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Mutations, type MutationsProps } from '../../preact/mutations/mutations';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -75,14 +74,14 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
      * If not provided, the Jaccard similarity is not computed.
      * For details, see the [Jaccard Similarity](#jaccard-similarity) section in the component description.
      */
-    @property({ type: Object })
+    @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;
 
     /**
@@ -141,11 +140,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': Partial<MutationsProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-number-sequences-over-time.tsx b/components/src/web-components/visualization/gs-number-sequences-over-time.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     NumberSequencesOverTime,
@@ -121,11 +120,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': Partial<NumberSequencesOverTimeProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-prevalence-over-time.tsx b/components/src/web-components/visualization/gs-prevalence-over-time.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
@@ -188,11 +187,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': Partial<PrevalenceOverTimeProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-relative-growth-advantage.tsx b/components/src/web-components/visualization/gs-relative-growth-advantage.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import {
     RelativeGrowthAdvantage,
@@ -142,11 +141,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': Partial<RelativeGrowthAdvantageProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-sequences-by-location.tsx b/components/src/web-components/visualization/gs-sequences-by-location.tsx
@@ -1,7 +1,6 @@
 import leafletStyle from 'leaflet/dist/leaflet.css?inline';
 import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import leafletStyleModifications from '../../preact/map/leafletStyleModifications.css?inline';
 import { SequencesByLocation, type SequencesByLocationProps } from '../../preact/map/sequences-by-location';
@@ -211,11 +210,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': Partial<SequencesByLocationProps>;
         }
     }
 }
diff --git a/components/src/web-components/visualization/gs-statistics.tsx b/components/src/web-components/visualization/gs-statistics.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { Statistics, type StatisticsProps } from '../../preact/statistic/statistics';
 import type { Equals, Expect } from '../../utils/typeAssertions';
@@ -71,11 +70,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': Partial<StatisticsProps>;
         }
     }
 }
diff --git a/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx b/components/src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx
@@ -1,5 +1,4 @@
 import { customElement, property } from 'lit/decorators.js';
-import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
 
 import {
     WastewaterMutationsOverTime,
@@ -81,11 +80,11 @@ declare global {
     }
 }
 
-declare global {
+declare module 'react' {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': Partial<WastewaterMutationsOverTimeProps>;
         }
     }
 }
diff --git a/examples/React/package.json b/examples/React/package.json
@@ -10,12 +10,12 @@
     },
     "dependencies": {
         "@genspectrum/dashboard-components": "file:../../components/genspectrum-dashboard-components.tgz",
-        "@types/react": "^18.2.66",
-        "@types/react-dom": "^18.2.22",
-        "@vitejs/plugin-react": "^4.2.1",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
+        "@vitejs/plugin-react": "^4.3.4",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
         "typescript": "^5.2.2",
-        "vite": "^5.2.0"
+        "vite": "^6.0.11"
     }
 }
diff --git a/examples/React/src/App.tsx b/examples/React/src/App.tsx

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@ import { provide } from '@lit/context';`
`2`	`2`	`import { Task } from '@lit/task';`
`3`	`3`	`import { html, LitElement } from 'lit';`
`4`	`4`	`import { customElement, property } from 'lit/decorators.js';`
`5`		`-import type { DetailedHTMLProps, HTMLAttributes } from 'react';`
`6`	`5`	`import z from 'zod';`
`7`	`6`
`8`	`7`	`import { lapisContext } from './lapis-context';`
`@@ -88,11 +87,15 @@ declare global {`
`88`	`87`	`}`
`89`	`88`	`}`
`90`	`89`
`91`		`-declare global {`
	`90`	`+declare module 'react' {`
`92`	`91`	`// eslint-disable-next-line @typescript-eslint/no-namespace`
`93`	`92`	`namespace JSX {`
`94`	`93`	`interface IntrinsicElements {`
`95`		`- 'gs-app': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;`
	`94`	`+ 'gs-app': {`
	`95`	`+ lapis: string;`
	`96`	`+ // eslint-disable-next-line no-undef`
	`97`	`+ children: React.ReactNode;`
	`98`	`+ };`
`96`	`99`	`}`
`97`	`100`	`}`
`98`	`101`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import { customElement, property } from 'lit/decorators.js';`
`2`		`-import type { DetailedHTMLProps, HTMLAttributes } from 'react';`
`3`	`2`
`4`	`3`	`import { DateRangeSelector, type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';`
`5`	`4`	`import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeSelector/dateRangeOption';`
`@@ -134,11 +133,11 @@ declare global {`
`134`	`133`	`}`
`135`	`134`	`}`
`136`	`135`
`137`		`-declare global {`
	`136`	`+declare module 'react' {`
`138`	`137`	`// eslint-disable-next-line @typescript-eslint/no-namespace`
`139`	`138`	`namespace JSX {`
`140`	`139`	`interface IntrinsicElements {`
`141`		`- 'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;`
	`140`	`+ 'gs-date-range-selector': Partial<DateRangeSelectorProps>;`
`142`	`141`	`}`
`143`	`142`	`}`
`144`	`143`	`}`