ts path alias

.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-vite'
 import { svg } from './favicon'
-import path from 'path'
+import { resolve } from 'path'
 
 const config: StorybookConfig = {
   staticDirs: ['./public'],
@@ -39,9 +39,7 @@ const config: StorybookConfig = {
     config.resolve.alias = {
       ...(config.resolve.alias || {}),
       '@react-three/drei':
-        process.env.STORYBOOK_ENV === 'production'
-          ? path.resolve(__dirname, '../dist')
-          : path.resolve(__dirname, '../src'),
+        process.env.STORYBOOK_ENV === 'production' ? resolve(__dirname, '../dist') : resolve(__dirname, '../src'),
     }
     return config
   },

.storybook/preview.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { Preview } from '@storybook/react'
 
 import './index.css'

.storybook/stories/Adaptive.stories.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps, Suspense } from 'react'
+import * as React from 'react'
+import { ComponentProps, Suspense } from 'react'
 import { Vector3, type Material, type Mesh } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 

.storybook/stories/ArcballControls.stories.tsx

@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { ComponentProps, useRef, useState } from 'react'
+import { ComponentProps, useRef, useState } from 'react'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
@@ -47,7 +48,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<OrthographicCamera | PerspectiveCameraType>()
+  const virtualCamera = useRef<PerspectiveCameraType | null>(null)
   const [virtualScene] = useState(() => new Scene())
 
   useFrame(({ gl }) => {
@@ -73,7 +74,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
 
           <PerspectiveCamera name="FBO Camera" ref={virtualCamera} position={[0, 0, 5]} />
 
-          <ArcballControls camera={virtualCamera.current} {...props} />
+          <ArcballControls camera={virtualCamera.current ?? undefined} {...props} />
 
           <color attach="background" args={['hotpink']} />
         </>,

.storybook/stories/BBAnchor.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ComponentProps } from 'react'
+import { ComponentProps, ElementRef } from 'react'
 import * as THREE from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -30,7 +30,7 @@ function BBAnchorScene({
   drawBoundingBox: boolean
   children?: React.ReactNode
 }) {
-  const ref = React.useRef(null)
+  const ref = React.useRef<ElementRef<typeof Icosahedron>>(null!)
 
   useHelper(drawBoundingBox && ref, BoxHelper, 'cyan')
 

.storybook/stories/CameraControls.stories.tsx

@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { ComponentProps, useRef, useState } from 'react'
+import { ComponentProps, ElementRef, useRef, useState } from 'react'
 import { Scene } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -47,7 +48,7 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<CameraControls['camera']>()
+  const virtualCamera = useRef<ElementRef<typeof PerspectiveCamera>>(null)
   const [virtualScene] = useState(() => new Scene())
   const cameraControlRef = useRef<CameraControls>(null)
 
@@ -78,7 +79,7 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
           </Box>
 
           <PerspectiveCamera name="FBO Camera" ref={virtualCamera} position={[0, 0, 5]} />
-          <CameraControls ref={cameraControlRef} camera={virtualCamera.current} {...props} />
+          <CameraControls ref={cameraControlRef} camera={virtualCamera.current ?? undefined} {...props} />
 
           {/* @ts-ignore */}
           <color attach="background" args={['hotpink']} />

.storybook/stories/CurveModifier.stories.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from 'react'
+import * as React from 'react'
+import { ComponentProps } from 'react'
 import { BufferGeometry, CatmullRomCurve3, LineBasicMaterial, LineLoop, Vector3 } from 'three'
 import { FontLoader, TextGeometry, TextGeometryParameters } from 'three-stdlib'
 import { extend, useFrame, useLoader } from '@react-three/fiber'
@@ -38,7 +39,7 @@ export default {
 type Story = StoryObj<typeof CurveModifier>
 
 function CurvedText(props: ComponentProps<typeof CurveModifier>) {
-  const curveRef = React.useRef<CurveModifierRef>()
+  const curveRef = React.useRef<CurveModifierRef>(null)
   const geomRef = React.useRef<TextGeometry>(null!)
   const font = useLoader(FontLoader, '/fonts/helvetiker_regular.typeface.json')
 

.storybook/stories/Float.stories.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps, Suspense, useRef } from 'react'
+import * as React from 'react'
+import { ComponentProps, Suspense, useRef } from 'react'
 import * as THREE from 'three'
 
 import { Meta, StoryObj } from '@storybook/react'

.storybook/stories/Image.stories.tsx

@@ -20,7 +20,7 @@ export default {
 
 type Story = StoryObj<typeof Image>
 
-function ImageScene({ url, ...props }: React.ComponentProps<typeof Image>) {
+function ImageScene({ url, texture, ...props }: React.ComponentProps<typeof Image>) {
   const texture1 = useTexture('/images/living-room-1.jpg')
   const texture2 = useTexture('/images/living-room-3.jpg')
 

.storybook/stories/MapControls.stories.tsx

@@ -38,7 +38,7 @@ function Svg() {
   const shapes = React.useMemo(
     () =>
       paths.flatMap((p) =>
-        p.toShapes(true).map((shape) => ({ shape, color: p.color, fillOpacity: p.userData.style.fillOpacity }))
+        p.toShapes(true).map((shape) => ({ shape, color: p.color, fillOpacity: p.userData?.style.fillOpacity }))
       ),
     [paths]
   )

.storybook/stories/OrbitControls.stories.tsx

@@ -1,5 +1,6 @@
+import * as React from 'react'
 import { createPortal, useFrame } from '@react-three/fiber'
-import React, { useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { Scene } from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 

.storybook/stories/Outlines.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import * as THREE from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 

.storybook/stories/ScrollControls.stories.tsx

@@ -27,7 +27,7 @@ function Suzanne(props: React.ComponentProps<'group'>) {
   useCursor(hovered)
 
   const visible = React.useRef(false)
-  const meshRef = useIntersect((isVisible) => (visible.current = isVisible))
+  const meshRef = useIntersect<THREE.Mesh>((isVisible) => (visible.current = isVisible))
 
   const { height } = useThree((state) => state.viewport)
   useFrame((_state, delta) => {

.storybook/stories/Texture.stories.tsx

@@ -51,7 +51,7 @@ function TextureScene2(props: React.ComponentProps<typeof Texture>) {
     <Texture {...props}>
       {(textures) => (
         <Icosahedron position={[0, 0, 0]}>
-          <meshStandardMaterial {...textures} metalness={1} />
+          <meshStandardMaterial {...(textures as any)} metalness={1} />
         </Icosahedron>
       )}
     </Texture>

.storybook/theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create'
+import { create } from '@storybook/theming'
 import dreiLogo from './drei.jpeg'
 
 export default create({

package.json

@@ -36,7 +36,8 @@
     "eslint:ci": "eslint .",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
-    "test": "yarn eslint:ci && yarn typecheck && yarn prettier && (cd test/e2e; ./e2e.sh)",
+    "lint": "yarn eslint:ci && yarn typecheck && yarn prettier",
+    "test": "yarn lint && (cd test/e2e; ./e2e.sh)",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly",
     "storybook": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" storybook dev -p 6006",

src/core/AccumulativeShadows.tsx

@@ -39,7 +39,7 @@ export type AccumulativeShadowsProps = {
   toneMapped?: boolean
 }
 
-interface AccumulativeContext {
+export interface AccumulativeShadowsContext {
   lights: Map<any, any>
   temporal: boolean
   frames: number
@@ -73,8 +73,8 @@ declare global {
   }
 }
 
-export const accumulativeContext = /* @__PURE__ */ React.createContext<AccumulativeContext>(
-  null as unknown as AccumulativeContext
+export const accumulativeContext = /* @__PURE__ */ React.createContext<AccumulativeShadowsContext>(
+  null as unknown as AccumulativeShadowsContext
 )
 
 const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
@@ -104,10 +104,10 @@ const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
    }`
 )
 
-export const AccumulativeShadows: ForwardRefComponent<
-  JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
-  AccumulativeContext
-> = /* @__PURE__ */ React.forwardRef(
+export const AccumulativeShadows = /* @__PURE__ */ React.forwardRef<
+  AccumulativeShadowsContext,
+  JSX.IntrinsicElements['group'] & AccumulativeShadowsProps
+>(
   (
     {
       children,
@@ -123,8 +123,8 @@ export const AccumulativeShadows: ForwardRefComponent<
       resolution = 1024,
       toneMapped = true,
       ...props
-    }: JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
-    forwardRef: React.ForwardedRef<AccumulativeContext>
+    },
+    forwardRef
   ) => {
     extend({ SoftShadowMaterial })
 
@@ -140,7 +140,7 @@ export const AccumulativeShadows: ForwardRefComponent<
       plm.configure(gPlane.current)
     }, [])
 
-    const api = React.useMemo<AccumulativeContext>(
+    const api = React.useMemo<AccumulativeShadowsContext>(
       () => ({
         lights: new Map(),
         temporal: !!temporal,

src/core/MeshDistortMaterial.tsx

@@ -11,7 +11,7 @@ type DistortMaterialType = JSX.IntrinsicElements['meshPhysicalMaterial'] & {
   radius?: number
 }
 
-type Props = DistortMaterialType & {
+export type MeshDistortMaterialProps = DistortMaterialType & {
   speed?: number
   factor?: number
 }
@@ -28,7 +28,7 @@ interface Uniform<T> {
   value: T
 }
 
-class DistortMaterialImpl extends MeshPhysicalMaterial {
+export class MeshDistortMaterialImpl extends MeshPhysicalMaterial {
   _time: Uniform<number>
   _distort: Uniform<number>
   _radius: Uniform<number>
@@ -89,9 +89,9 @@ class DistortMaterialImpl extends MeshPhysicalMaterial {
   }
 }
 
-export const MeshDistortMaterial: ForwardRefComponent<Props, DistortMaterialImpl> = /* @__PURE__ */ React.forwardRef(
-  ({ speed = 1, ...props }: Props, ref) => {
-    const [material] = React.useState(() => new DistortMaterialImpl())
+export const MeshDistortMaterial = /* @__PURE__ */ React.forwardRef<MeshDistortMaterialImpl, MeshDistortMaterialProps>(
+  ({ speed = 1, ...props }, ref) => {
+    const [material] = React.useState(() => new MeshDistortMaterialImpl())
     useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed))
     return <primitive object={material} ref={ref} attach="material" {...props} />
   }

src/core/MeshWobbleMaterial.tsx

@@ -9,7 +9,7 @@ type WobbleMaterialType = JSX.IntrinsicElements['meshStandardMaterial'] & {
   speed?: number
 }
 
-type Props = WobbleMaterialType & {
+export type MeshWobbleMaterialProps = WobbleMaterialType & {
   speed?: number
   factor?: number
 }
@@ -26,7 +26,7 @@ interface Uniform<T> {
   value: T
 }
 
-class WobbleMaterialImpl extends MeshStandardMaterial {
+export class MeshWobbleMaterialImpl extends MeshStandardMaterial {
   _time: Uniform<number>
   _factor: Uniform<number>
 
@@ -75,9 +75,9 @@ class WobbleMaterialImpl extends MeshStandardMaterial {
   }
 }
 
-export const MeshWobbleMaterial: ForwardRefComponent<Props, WobbleMaterialImpl> = /* @__PURE__ */ React.forwardRef(
-  ({ speed = 1, ...props }: Props, ref) => {
-    const [material] = React.useState(() => new WobbleMaterialImpl())
+export const MeshWobbleMaterial = /* @__PURE__ */ React.forwardRef<MeshWobbleMaterialImpl, MeshWobbleMaterialProps>(
+  ({ speed = 1, ...props }, ref) => {
+    const [material] = React.useState(() => new MeshWobbleMaterialImpl())
     useFrame((state) => material && (material.time = state.clock.getElapsedTime() * speed))
     return <primitive object={material} ref={ref} attach="material" {...props} />
   }

src/core/ShadowAlpha.tsx

@@ -12,7 +12,7 @@ import { useFrame } from '@react-three/fiber'
 import * as React from 'react'
 import * as THREE from 'three'
 
-interface ShadowAlphaProps {
+export interface ShadowAlphaProps {
   opacity?: number
   alphaMap?: THREE.Texture | boolean
 }