fix: Support react 19 on pglite-react and pglite-repl (#484)

* Bump versions of React, React DOM, and related testing libraries to 19.0.0 on pglite-react

* Add changeset

* Bump pglite-repl's react version to 19

* Replaced JSX.Element with React.JSX.Element.

* Formatting and tweek changeset

* Changeset and formatting for the repl package

---------

Co-authored-by: Sam Willis <[email protected]>

.changeset/tasty-apples-search.md

@@ -0,0 +1,5 @@
+---
+'@electric-sql/pglite-repl': patch
+---
+
+Bump versions of React, React DOM, and related testing libraries to v19 on pglite-repl. The PGlite REPL now supports React v18 and v19 projects.

.changeset/tough-wombats-fly.md

@@ -0,0 +1,5 @@
+---
+'@electric-sql/pglite-react': patch
+---
+
+Bump versions of React, React DOM, and related testing libraries to v19 on pglite-react. pglite-react now supports React v18 and v19 projects.

packages/pglite-react/package.json

@@ -47,19 +47,19 @@
     "@electric-sql/pglite": "workspace:*",
     "@eslint-react/eslint-plugin": "^1.14.3",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/react": "^16.0.1",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.2",
     "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
     "globals": "^15.11.0",
     "jsdom": "^24.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "vitest": "^2.1.2"
   },
   "peerDependencies": {
     "@electric-sql/pglite": "workspace:^",
-    "react": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   }
 }

packages/pglite-react/src/hooks.ts

@@ -24,7 +24,7 @@ function useLiveQueryImpl<T = { [key: string]: unknown }>(
 ): Omit<LiveQueryResults<T>, 'affectedRows'> | undefined {
   const db = usePGlite()
   const paramsRef = useRef(params)
-  const liveQueryRef = useRef<LiveQuery<T> | undefined>()
+  const liveQueryRef = useRef<LiveQuery<T> | undefined>(undefined)
   let liveQuery: LiveQuery<T> | undefined
   let liveQueryChanged = false
   if (!(typeof query === 'string') && !(query instanceof Promise)) {

packages/pglite-react/src/provider.tsx

@@ -6,7 +6,9 @@ interface Props<T extends PGliteWithLive> {
   db?: T
 }
 
-type PGliteProvider<T extends PGliteWithLive> = (props: Props<T>) => JSX.Element
+type PGliteProvider<T extends PGliteWithLive> = (
+  props: Props<T>,
+) => React.JSX.Element
 type UsePGlite<T extends PGliteWithLive> = (db?: T) => T
 
 interface PGliteProviderSet<T extends PGliteWithLive> {

packages/pglite-repl/package.json

@@ -50,8 +50,8 @@
     "@uiw/codemirror-themes": "^4.23.5",
     "@uiw/react-codemirror": "^4.23.5",
     "psql-describe": "^0.1.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "peerDependencies": {
     "@electric-sql/pglite": "workspace:^"
@@ -64,8 +64,8 @@
   "devDependencies": {
     "@electric-sql/pglite": "workspace:^",
     "@types/node": "^20.16.11",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.2",
     "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
     "eslint-plugin-react-hooks": "^4.6.2",

packages/pglite-repl/src/Repl.tsx

@@ -264,10 +264,7 @@ export function Repl({
     `}
       style={styles}
     >
-      <div
-        className="PGliteRepl-output"
-        ref={(ref) => (outputRef.current = ref)}
-      >
+      <div className="PGliteRepl-output" ref={outputRef}>
         {loading && <div className="PGliteRepl-loading-msg">Loading...</div>}
         {output.map((response) => (
           <div key={`${response.query}-${response.time}`}>