pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.65k stars 1.6k forks source link

XRFrame type resolving incorrectly #3190

Closed Methuselah96 closed 8 months ago

Methuselah96 commented 8 months ago

This is a follow-up to https://github.com/pmndrs/react-three-fiber/issues/2501 and https://github.com/pmndrs/react-three-fiber/issues/3110. I do not believe the XRFrame workaround introduced in https://github.com/pmndrs/react-three-fiber/pull/3052 is working as intended.

It seems that TypeScript is evaluating the _XRFrame conditional type at declaration emit time, which results in emitting THREE.XRFrame in the declaration files instead of emitting _XRFrame. This causes errors for users with a @types/three version that does not contain THREE.XRFrame.

Here are the errors I get when type-checking:

./node_modules/@react-three/fiber/dist/declarations/src/core/index.d.ts:14:187 - error TS2694: Namespace '"./node_modules/@types/three/build/three.module"' has no exported member 'XRFrame'.

14 declare const invalidate: (state?: RootState | undefined, frames?: number) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
                                                                                                                                                                                             ~~~~~~~

./node_modules/@react-three/fiber/dist/declarations/src/core/loop.d.ts:32:117 - error TS2694: Namespace '"./node_modules/@types/three/build/three.module"' has no exported member 'XRFrame'.

32     advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: import("three").XRFrame | undefined) => void;
                                                                                                                       ~~~~~~~

./node_modules/@react-three/fiber/dist/declarations/src/core/store.d.ts:136:225 - error TS2694: Namespace '"./node_modules/@types/three/build/three.module"' has no exported member 'XRFrame'.

136 declare const createStore: (invalidate: (state?: RootState | undefined, frames?: number | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void) => UseBoundStore<RootState>;
                                                                                                                                                                                                                                    ~~~~~~~

Found 3 errors in 3 files.
CodyJasonBennett commented 8 months ago

Is there a way we can prevent TS from evaluating and unfolding the type? I believe we still use older three types for testing. Noticed the same issues when using an updated version and/or testing ConstructorParameters<typeof THREE.WebGLRenderTarget>[2] for feature detection.

Methuselah96 commented 8 months ago

It seems like this is happening when an exported value is not explicitly annotated with a type declaration. Making sure that exported values that reference _XRFrame are explicitly annotated as they will appear in the emitted declaration file seems to fix it. https://github.com/pmndrs/react-three-fiber/pull/3196 applies those changes.