feat: compatibility with React 19 types (#1299)

aymeric-giraudet · web-flow · commit 77599c6ca022 · 2025-01-21T10:47:23.000+01:00
diff --git a/examples/react-17/package.json b/examples/react-17/package.json
@@ -19,8 +19,8 @@
   },
   "devDependencies": {
     "@algolia/client-search": "4.16.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "1.0.7",
     "typescript": "^4.4.2",
     "vite": "2.8.0"
diff --git a/examples/react-17/src/Highlight.tsx b/examples/react-17/src/Highlight.tsx
@@ -1,5 +1,5 @@
 import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
-import { createElement, Fragment } from 'react';
+import { createElement, Fragment, JSX } from 'react';
 
 type HighlightHitParams<THit> = {
   /**
diff --git a/examples/react-instantsearch/package.json b/examples/react-instantsearch/package.json
@@ -20,8 +20,8 @@
     "react-instantsearch": "7.12.1"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "1.0.7",
     "typescript": "4.5.4",
     "vite": "2.8.0"
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -19,8 +19,8 @@
   },
   "devDependencies": {
     "@algolia/client-search": "4.16.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "1.0.7",
     "typescript": "^4.4.2",
     "vite": "2.8.0"
diff --git a/examples/slack-with-emojis-and-commands/package.json b/examples/slack-with-emojis-and-commands/package.json
@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@algolia/client-search": "4.16.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@types/textarea-caret": "3.0.1",
     "@vitejs/plugin-react": "1.0.7",
     "typescript": "^4.4.2",
diff --git a/examples/slack-with-emojis-and-commands/src/types/Command.ts b/examples/slack-with-emojis-and-commands/src/types/Command.ts
@@ -1,3 +1,5 @@
+import type { JSX } from 'react';
+
 export type Command = {
   slug: string;
   commands: string[];
diff --git a/examples/twitter-compose-with-typeahead/package.json b/examples/twitter-compose-with-typeahead/package.json
@@ -20,8 +20,8 @@
   },
   "devDependencies": {
     "@algolia/client-search": "4.16.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@types/textarea-caret": "3.0.1",
     "@vitejs/plugin-react": "1.0.7",
     "typescript": "^4.4.2",
diff --git a/examples/two-column-layout/src/components/Breadcrumb.tsx b/examples/two-column-layout/src/components/Breadcrumb.tsx
@@ -7,7 +7,7 @@ import { intersperse } from '../utils';
 import { ChevronRightIcon } from './Icons';
 
 type BreadcrumbProps = {
-  items: JSX.Element[];
+  items: h.JSX.Element[];
 };
 
 export function Breadcrumb({ items }: BreadcrumbProps) {
diff --git a/package.json b/package.json
@@ -40,8 +40,8 @@
     "@testing-library/user-event": "12.5.0",
     "@types/jest": "^26.0.16",
     "@types/jest-diff": "^24.3.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@typescript-eslint/eslint-plugin": "2.34.0",
     "@typescript-eslint/parser": "2.34.0",
     "algoliasearch": "4.16.0",
diff --git a/packages/autocomplete-js/src/components/Highlight.ts b/packages/autocomplete-js/src/components/Highlight.ts
@@ -1,6 +1,6 @@
 import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
 
-import { AutocompleteRenderer, HighlightHitParams } from '../types';
+import { AutocompleteRenderer, HighlightHitParams, VNode } from '../types';
 
 export function createHighlightComponent({
   createElement,
@@ -10,7 +10,7 @@ export function createHighlightComponent({
     hit,
     attribute,
     tagName = 'mark',
-  }: HighlightHitParams<THit>): JSX.Element {
+  }: HighlightHitParams<THit>): VNode<any> {
     return createElement(
       Fragment,
       {},
diff --git a/packages/autocomplete-js/src/components/ReverseHighlight.ts b/packages/autocomplete-js/src/components/ReverseHighlight.ts
@@ -1,6 +1,6 @@
 import { parseAlgoliaHitReverseHighlight } from '@algolia/autocomplete-preset-algolia';
 
-import { AutocompleteRenderer, HighlightHitParams } from '../types';
+import { AutocompleteRenderer, HighlightHitParams, VNode } from '../types';
 
 export function createReverseHighlightComponent({
   createElement,
@@ -10,7 +10,7 @@ export function createReverseHighlightComponent({
     hit,
     attribute,
     tagName = 'mark',
-  }: HighlightHitParams<THit>): JSX.Element {
+  }: HighlightHitParams<THit>): VNode<any> {
     return createElement(
       Fragment,
       {},
diff --git a/packages/autocomplete-js/src/components/ReverseSnippet.ts b/packages/autocomplete-js/src/components/ReverseSnippet.ts
@@ -1,6 +1,6 @@
 import { parseAlgoliaHitReverseSnippet } from '@algolia/autocomplete-preset-algolia';
 
-import { AutocompleteRenderer, HighlightHitParams } from '../types';
+import { AutocompleteRenderer, HighlightHitParams, VNode } from '../types';
 
 export function createReverseSnippetComponent({
   createElement,
@@ -10,7 +10,7 @@ export function createReverseSnippetComponent({
     hit,
     attribute,
     tagName = 'mark',
-  }: HighlightHitParams<THit>): JSX.Element {
+  }: HighlightHitParams<THit>): VNode<any> {
     return createElement(
       Fragment,
       {},
diff --git a/packages/autocomplete-js/src/components/Snippet.ts b/packages/autocomplete-js/src/components/Snippet.ts
@@ -1,6 +1,6 @@
 import { parseAlgoliaHitSnippet } from '@algolia/autocomplete-preset-algolia';
 
-import { AutocompleteRenderer, HighlightHitParams } from '../types';
+import { AutocompleteRenderer, HighlightHitParams, VNode } from '../types';
 
 export function createSnippetComponent({
   createElement,
@@ -10,7 +10,7 @@ export function createSnippetComponent({
     hit,
     attribute,
     tagName = 'mark',
-  }: HighlightHitParams<THit>): JSX.Element {
+  }: HighlightHitParams<THit>): VNode<any> {
     return createElement(
       Fragment,
       {},
diff --git a/packages/autocomplete-shared/src/js/AutocompleteComponents.ts b/packages/autocomplete-shared/src/js/AutocompleteComponents.ts
@@ -1,14 +1,15 @@
+import { VNode } from './AutocompleteRenderer';
 import { HighlightHitParams } from './HighlightHitParams';
 
 type AutocompleteHighlightComponent = <THit>({
   hit,
   attribute,
   tagName,
-}: HighlightHitParams<THit>) => JSX.Element;
+}: HighlightHitParams<THit>) => VNode<any>;
 
 export type PublicAutocompleteComponents = Record<
   string,
-  (props: any) => JSX.Element
+  (props: any) => VNode<any>
 >;
 
 export interface AutocompleteComponents extends PublicAutocompleteComponents {
diff --git a/packages/autocomplete-shared/src/js/AutocompleteRenderer.ts b/packages/autocomplete-shared/src/js/AutocompleteRenderer.ts
@@ -2,7 +2,7 @@ export type Pragma = (
   type: any,
   props: Record<string, any> | null,
   ...children: ComponentChildren[]
-) => JSX.Element;
+) => VNode<any>;
 export type PragmaFrag = any;
 
 type ComponentChild = VNode<any> | string | number | boolean | null | undefined;
diff --git a/yarn.lock b/yarn.lock
@@ -3750,11 +3750,6 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.3.tgz#a3c65525b91fca7da00ab1a3ac2b5a2a4afbffbf"
   integrity sha512-QzSuZMBuG5u8HqYz01qtMdg/Jfctlnvj1z/lYnIDXs/golxw0fxtRAHd9KrzjR7Yxz1qVeI00o0kiO3PmVdJ9w==
 
-"@types/prop-types@*":
-  version "15.7.5"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
-  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
-
 "@types/q@^1.5.1":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
@@ -3765,36 +3760,16 @@
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
-"@types/react-dom@^17.0.0":
-  version "17.0.19"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.19.tgz#36feef3aa35d045cacd5ed60fe0eef5272f19492"
-  integrity sha512-PiYG40pnQRdPHnlf7tZnp0aQ6q9tspYr72vD61saO6zFCybLfMqwUCN0va1/P+86DXn18ZWeW30Bk7xlC5eEAQ==
-  dependencies:
-    "@types/react" "^17"
-
-"@types/react-dom@^18.0.9":
-  version "18.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.11.tgz#321351c1459bc9ca3d216aefc8a167beec334e33"
-  integrity sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@^18.0.26":
-  version "18.0.31"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.31.tgz#a69ef8dd7bfa849734d258c793a8fe343a338205"
-  integrity sha512-EEG67of7DsvRDU6BLLI0p+k1GojDLz9+lZsnCpCRTa/lOokvyPBvp8S5x+A24hME3yyQuIipcP70KJ6H7Qupww==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
+"@types/react-dom@^19.0.3":
+  version "19.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.3.tgz#0804dfd279a165d5a0ad8b53a5b9e65f338050a4"
+  integrity sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==
 
-"@types/react@^17", "@types/react@^17.0.0":
-  version "17.0.55"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.55.tgz#f94eac1a37929cd86d1cc084c239c08dcfd10e5f"
-  integrity sha512-kBcAhmT8RivFDYxHdy8QfPKu+WyfiiGjdPb9pIRtd6tj05j0zRHq5DBGW5Ogxv5cwSKd93BVgUk/HZ4I9p3zNg==
+"@types/react@^19.0.7":
+  version "19.0.7"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.7.tgz#c451968b999d1cb2d9207dc5ff56496164cf511d"
+  integrity sha512-MoFsEJKkAtZCrC1r6CM8U22GzhG7u2Wir8ons/aCKH6MBdD1ibV24zOSSkdZVUKqN5i396zG5VKLYZ3yaUZdLA==
   dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/resolve@1.17.1":
@@ -3804,11 +3779,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/scheduler@*":
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
-  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
-
 "@types/stack-utils@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+import type { JSX } from 'react';`
	`2`	`+`
`1`	`3`	`export type Command = {`
`2`	`4`	`slug: string;`
`3`	`5`	`commands: string[];`