diff --git a/.changeset/tasty-apples-search.md b/.changeset/tasty-apples-search.md new file mode 100644 index 000000000..118894050 --- /dev/null +++ b/.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. diff --git a/.changeset/tough-wombats-fly.md b/.changeset/tough-wombats-fly.md new file mode 100644 index 000000000..a499ab7e4 --- /dev/null +++ b/.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. diff --git a/packages/pglite-react/package.json b/packages/pglite-react/package.json index 767305835..91a89a14c 100644 --- a/packages/pglite-react/package.json +++ b/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" } } diff --git a/packages/pglite-react/src/hooks.ts b/packages/pglite-react/src/hooks.ts index 73d9ced61..5bf90d313 100644 --- a/packages/pglite-react/src/hooks.ts +++ b/packages/pglite-react/src/hooks.ts @@ -24,7 +24,7 @@ function useLiveQueryImpl( ): Omit, 'affectedRows'> | undefined { const db = usePGlite() const paramsRef = useRef(params) - const liveQueryRef = useRef | undefined>() + const liveQueryRef = useRef | undefined>(undefined) let liveQuery: LiveQuery | undefined let liveQueryChanged = false if (!(typeof query === 'string') && !(query instanceof Promise)) { diff --git a/packages/pglite-react/src/provider.tsx b/packages/pglite-react/src/provider.tsx index e422dd316..f1b5f70e2 100644 --- a/packages/pglite-react/src/provider.tsx +++ b/packages/pglite-react/src/provider.tsx @@ -6,7 +6,9 @@ interface Props { db?: T } -type PGliteProvider = (props: Props) => JSX.Element +type PGliteProvider = ( + props: Props, +) => React.JSX.Element type UsePGlite = (db?: T) => T interface PGliteProviderSet { diff --git a/packages/pglite-repl/package.json b/packages/pglite-repl/package.json index 95e69e13c..fc3044288 100644 --- a/packages/pglite-repl/package.json +++ b/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", diff --git a/packages/pglite-repl/src/Repl.tsx b/packages/pglite-repl/src/Repl.tsx index 7bd75c6c4..4c8a107f5 100644 --- a/packages/pglite-repl/src/Repl.tsx +++ b/packages/pglite-repl/src/Repl.tsx @@ -264,10 +264,7 @@ export function Repl({ `} style={styles} > -
(outputRef.current = ref)} - > +
{loading &&
Loading...
} {output.map((response) => (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8fe4984df..5e012b26f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -137,14 +137,14 @@ importers: specifier: ^10.4.0 version: 10.4.0 '@testing-library/react': - specifier: ^16.0.1 - version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^16.1.0 + version: 16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@types/react': - specifier: ^18.3.11 - version: 18.3.11 + specifier: ^19.0.2 + version: 19.0.2 '@types/react-dom': - specifier: ^18.3.0 - version: 18.3.0 + specifier: ^19.0.2 + version: 19.0.2(@types/react@19.0.2) '@vitejs/plugin-react': specifier: ^4.3.2 version: 4.3.2(vite@5.4.8(@types/node@20.16.11)(terser@5.34.1)) @@ -158,11 +158,11 @@ importers: specifier: ^24.1.3 version: 24.1.3 react: - specifier: ^18.3.1 - version: 18.3.1 + specifier: ^19.0.0 + version: 19.0.0 react-dom: - specifier: ^18.3.1 - version: 18.3.1(react@18.3.1) + specifier: ^19.0.0 + version: 19.0.0(react@19.0.0) vitest: specifier: ^2.1.2 version: 2.1.2(@types/node@20.16.11)(jsdom@24.1.3)(terser@5.34.1) @@ -198,16 +198,16 @@ importers: version: 4.23.5(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1) '@uiw/react-codemirror': specifier: ^4.23.5 - version: 4.23.5(@babel/runtime@7.25.7)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 4.23.5(@babel/runtime@7.25.7)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0) psql-describe: specifier: ^0.1.5 version: 0.1.5 react: - specifier: ^18.3.1 - version: 18.3.1 + specifier: ^19.0.0 + version: 19.0.0 react-dom: - specifier: ^18.3.1 - version: 18.3.1(react@18.3.1) + specifier: ^19.0.0 + version: 19.0.0(react@19.0.0) devDependencies: '@electric-sql/pglite': specifier: workspace:^ @@ -216,11 +216,11 @@ importers: specifier: ^20.16.11 version: 20.16.11 '@types/react': - specifier: ^18.3.11 - version: 18.3.11 + specifier: ^19.0.2 + version: 19.0.2 '@types/react-dom': - specifier: ^18.3.0 - version: 18.3.0 + specifier: ^19.0.2 + version: 19.0.2(@types/react@19.0.2) '@vitejs/plugin-react': specifier: ^4.3.2 version: 4.3.2(vite@5.4.8(@types/node@20.16.11)(terser@5.34.1)) @@ -1291,15 +1291,15 @@ packages: resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==} engines: {node: '>=14'} - '@testing-library/react@16.0.1': - resolution: {integrity: sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==} + '@testing-library/react@16.1.0': + resolution: {integrity: sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg==} engines: {node: '>=18'} peerDependencies: '@testing-library/dom': ^10.0.0 - '@types/react': ^18.0.0 - '@types/react-dom': ^18.0.0 - react: ^18.0.0 - react-dom: ^18.0.0 + '@types/react': ^18.0.0 || ^19.0.0 + '@types/react-dom': ^18.0.0 || ^19.0.0 + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 peerDependenciesMeta: '@types/react': optional: true @@ -1370,12 +1370,17 @@ packages: '@types/prop-types@15.7.13': resolution: {integrity: sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==} - '@types/react-dom@18.3.0': - resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} + '@types/react-dom@19.0.2': + resolution: {integrity: sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==} + peerDependencies: + '@types/react': ^19.0.0 '@types/react@18.3.11': resolution: {integrity: sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==} + '@types/react@19.0.2': + resolution: {integrity: sha512-USU8ZI/xyKJwFTpjSVIrSeHBVAGagkHQKPNbxeWwql/vDmnTIBgx+TJnhFnj1NXgz8XfprU0egV2dROLGpsBEg==} + '@types/unist@3.0.3': resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} @@ -1886,7 +1891,6 @@ packages: bun@1.1.30: resolution: {integrity: sha512-ysRL1pq10Xba0jqVLPrKU3YIv0ohfp3cTajCPtpjCyppbn3lfiAVNpGoHfyaxS17OlPmWmR67UZRPw/EueQuug==} - cpu: [arm64, x64] os: [darwin, linux, win32] hasBin: true @@ -3427,6 +3431,11 @@ packages: peerDependencies: react: ^18.3.1 + react-dom@19.0.0: + resolution: {integrity: sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==} + peerDependencies: + react: ^19.0.0 + react-is@17.0.2: resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} @@ -3441,6 +3450,10 @@ packages: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} + react@19.0.0: + resolution: {integrity: sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==} + engines: {node: '>=0.10.0'} + read-yaml-file@1.1.0: resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==} engines: {node: '>=6'} @@ -3531,6 +3544,9 @@ packages: scheduler@0.23.2: resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} + scheduler@0.25.0: + resolution: {integrity: sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==} + search-insights@2.17.2: resolution: {integrity: sha512-zFNpOpUO+tY2D85KrxJ+aqwnIfdEGi06UH2+xEb+Bp9Mwznmauqc9djbnBibJO5mpfUPPa8st6Sx65+vbeO45g==} @@ -5391,15 +5407,15 @@ snapshots: lz-string: 1.5.0 pretty-format: 27.5.1 - '@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@testing-library/react@16.1.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@babel/runtime': 7.25.7 '@testing-library/dom': 10.4.0 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) optionalDependencies: - '@types/react': 18.3.11 - '@types/react-dom': 18.3.0 + '@types/react': 19.0.2 + '@types/react-dom': 19.0.2(@types/react@19.0.2) '@testing-library/vue@8.1.0(@vue/compiler-sfc@3.5.11)(vue@3.5.11(typescript@5.6.3))': dependencies: @@ -5471,16 +5487,22 @@ snapshots: dependencies: undici-types: 6.19.8 - '@types/prop-types@15.7.13': {} + '@types/prop-types@15.7.13': + optional: true - '@types/react-dom@18.3.0': + '@types/react-dom@19.0.2(@types/react@19.0.2)': dependencies: - '@types/react': 18.3.11 + '@types/react': 19.0.2 '@types/react@18.3.11': dependencies: '@types/prop-types': 15.7.13 csstype: 3.1.3 + optional: true + + '@types/react@19.0.2': + dependencies: + csstype: 3.1.3 '@types/unist@3.0.3': {} @@ -5649,7 +5671,7 @@ snapshots: '@codemirror/state': 6.4.1 '@codemirror/view': 6.34.1 - '@uiw/react-codemirror@4.23.5(@babel/runtime@7.25.7)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@uiw/react-codemirror@4.23.5(@babel/runtime@7.25.7)(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/theme-one-dark@6.1.2)(@codemirror/view@6.34.1)(codemirror@6.0.1(@lezer/common@1.2.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)': dependencies: '@babel/runtime': 7.25.7 '@codemirror/commands': 6.7.0 @@ -5658,8 +5680,8 @@ snapshots: '@codemirror/view': 6.34.1 '@uiw/codemirror-extensions-basic-setup': 4.23.5(@codemirror/autocomplete@6.18.1(@codemirror/language@6.10.3)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1)(@lezer/common@1.2.2))(@codemirror/commands@6.7.0)(@codemirror/language@6.10.3)(@codemirror/lint@6.8.2)(@codemirror/search@6.5.6)(@codemirror/state@6.4.1)(@codemirror/view@6.34.1) codemirror: 6.0.1(@lezer/common@1.2.2) - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) + react: 19.0.0 + react-dom: 19.0.0(react@19.0.0) transitivePeerDependencies: - '@codemirror/autocomplete' - '@codemirror/language' @@ -7319,6 +7341,7 @@ snapshots: loose-envify@1.4.0: dependencies: js-tokens: 4.0.0 + optional: true loupe@2.3.7: dependencies: @@ -7773,6 +7796,12 @@ snapshots: loose-envify: 1.4.0 react: 18.3.1 scheduler: 0.23.2 + optional: true + + react-dom@19.0.0(react@19.0.0): + dependencies: + react: 19.0.0 + scheduler: 0.25.0 react-is@17.0.2: {} @@ -7783,6 +7812,9 @@ snapshots: react@18.3.1: dependencies: loose-envify: 1.4.0 + optional: true + + react@19.0.0: {} read-yaml-file@1.1.0: dependencies: @@ -7883,6 +7915,9 @@ snapshots: scheduler@0.23.2: dependencies: loose-envify: 1.4.0 + optional: true + + scheduler@0.25.0: {} search-insights@2.17.2: {}