From 96e07320377574e1f22b6237335dd409a1169b15 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Wed, 8 May 2024 21:03:18 +0200 Subject: [PATCH] fix: Correct JSX module augmentation for React 19 types (#3258) --- package.json | 6 +-- packages/fiber/src/core/index.tsx | 4 +- packages/fiber/src/three-types.ts | 22 ++++++++++ packages/fiber/tests/core/renderer.test.tsx | 4 +- yarn.lock | 47 ++++++--------------- 5 files changed, 43 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index 2f09a3b77c..e8141d4bc1 100644 --- a/package.json +++ b/package.json @@ -51,10 +51,10 @@ "@preconstruct/cli": "^2.1.5", "@testing-library/react": "^13.0.0-alpha.5", "@types/jest": "^29.2.5", - "@types/react": "^18.0.5", - "@types/react-dom": "^18.0.1", + "@types/react": "^18.3.1", + "@types/react-dom": "^18.3.0", "@types/react-native": "0.67.4", - "@types/react-test-renderer": "^17.0.1", + "@types/react-test-renderer": "^18.3.0", "@types/scheduler": "^0.16.2", "@types/three": "^0.139.0", "@typescript-eslint/eslint-plugin": "^5.48.1", diff --git a/packages/fiber/src/core/index.tsx b/packages/fiber/src/core/index.tsx index 0fcfa50aa1..68830e7264 100644 --- a/packages/fiber/src/core/index.tsx +++ b/packages/fiber/src/core/index.tsx @@ -469,7 +469,7 @@ export type InjectState = Partial< } > -function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element { +function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element { return } @@ -481,7 +481,7 @@ function Portal({ children: React.ReactNode state?: InjectState container: THREE.Object3D -}): JSX.Element { +}): React.JSX.Element { /** This has to be a component because it would not be able to call useThree/useStore otherwise since * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger * the "R3F hooks can only be used within the Canvas component!" warning: diff --git a/packages/fiber/src/three-types.ts b/packages/fiber/src/three-types.ts index 55e2533130..3e988bcb64 100644 --- a/packages/fiber/src/three-types.ts +++ b/packages/fiber/src/three-types.ts @@ -1,4 +1,7 @@ import * as THREE from 'three' +import type {} from 'react' +import type {} from 'react/jsx-runtime' +import type {} from 'react/jsx-dev-runtime' import { EventHandlers } from './core/events' import { AttachType } from './core/renderer' @@ -450,8 +453,27 @@ export interface ThreeElements { shape: ShapeProps } +// NOTE: removed in v9 for React 19 declare global { namespace JSX { interface IntrinsicElements extends ThreeElements {} } } + +declare module 'react' { + namespace JSX { + interface IntrinsicElements extends ThreeElements {} + } +} + +declare module 'react/jsx-runtime' { + namespace JSX { + interface IntrinsicElements extends ThreeElements {} + } +} + +declare module 'react/jsx-dev-runtime' { + namespace JSX { + interface IntrinsicElements extends ThreeElements {} + } +} diff --git a/packages/fiber/tests/core/renderer.test.tsx b/packages/fiber/tests/core/renderer.test.tsx index 0ac0a83ed3..a9a4813283 100644 --- a/packages/fiber/tests/core/renderer.test.tsx +++ b/packages/fiber/tests/core/renderer.test.tsx @@ -929,7 +929,7 @@ describe('renderer', () => { const one = jest.fn() const two = jest.fn() - const Test = (props: Partial) => + const Test = (props: Partial) => await act(async () => root.render()) await act(async () => root.render()) @@ -961,7 +961,7 @@ describe('renderer', () => { const child = React.createRef() const attachedChild = React.createRef() - const Test = (props: JSX.IntrinsicElements['primitive']) => ( + const Test = (props: React.JSX.IntrinsicElements['primitive']) => ( diff --git a/yarn.lock b/yarn.lock index 78c25d47de..c778224f6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2947,10 +2947,10 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== -"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.1": - version "18.0.1" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.1.tgz#cb3cc10ea91141b12c71001fede1017acfbce4db" - integrity sha512-jCwTXvHtRLiyVvKm9aEdHXs8rflVOGd5Sl913JZrPshfXjn8NYsTNZOz70bCsA31IR0TOqwi3ad+X4tSCBoMTw== +"@types/react-dom@^18.0.0", "@types/react-dom@^18.3.0": + version "18.3.0" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0" + integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg== dependencies: "@types/react" "*" @@ -2975,38 +2975,19 @@ dependencies: "@types/react" "*" -"@types/react-test-renderer@^17.0.1": - version "17.0.2" - resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.2.tgz#5f800a39b12ac8d2a2149e7e1885215bcf4edbbf" - integrity sha512-+F1KONQTBHDBBhbHuT2GNydeMpPuviduXIVJRB7Y4nma4NR5DrTJfMMZ+jbhEHbpwL+Uqhs1WXh4KHiyrtYTPg== - dependencies: - "@types/react" "^17" - -"@types/react@*", "@types/react@^18.0.5": - version "18.0.5" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.5.tgz#1a4d4b705ae6af5aed369dec22800b20f89f5301" - integrity sha512-UPxNGInDCIKlfqBrm8LDXYWNfLHwIdisWcsH5GpMyGjhEDLFgTtlRBaoWuCua9HcyuE0rMkmAeZ3FXV1pYLIYQ== - dependencies: - "@types/prop-types" "*" - "@types/scheduler" "*" - csstype "^3.0.2" - -"@types/react@^17": - version "17.0.44" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7" - integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g== +"@types/react-test-renderer@^18.3.0": + version "18.3.0" + resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz#839502eae70058a4ae161f63385a8e7929cef4c0" + integrity sha512-HW4MuEYxfDbOHQsVlY/XtOvNHftCVEPhJF2pQXXwcUiUF+Oyb0usgp48HSgpK5rt8m9KZb22yqOeZm+rrVG8gw== dependencies: - "@types/prop-types" "*" - "@types/scheduler" "*" - csstype "^3.0.2" + "@types/react" "*" -"@types/react@^18.2.47": - version "18.2.47" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.47.tgz#85074b27ab563df01fbc3f68dc64bf7050b0af40" - integrity sha512-xquNkkOirwyCgoClNk85BjP+aqnIS+ckAJ8i37gAbDs14jfW/J23f2GItAf33oiUPQnqNMALiFeoM9Y5mbjpVQ== +"@types/react@*", "@types/react@^18.2.47", "@types/react@^18.3.1": + version "18.3.1" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.1.tgz#fed43985caa834a2084d002e4771e15dfcbdbe8e" + integrity sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw== dependencies: "@types/prop-types" "*" - "@types/scheduler" "*" csstype "^3.0.2" "@types/resolve@1.17.1": @@ -3016,7 +2997,7 @@ dependencies: "@types/node" "*" -"@types/scheduler@*", "@types/scheduler@^0.16.2": +"@types/scheduler@^0.16.2": version "0.16.2" resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==