fix: add annotations for tree-shaking (#1684)

src/core/AccumulativeShadows.tsx

@@ -4,6 +4,7 @@ import { extend, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
 import { shaderMaterial } from './shaderMaterial'
 import { DiscardMaterial } from '../materials/DiscardMaterial'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { version } from '../helpers/constants'
 
 function isLight(object: any): object is THREE.Light {
   return object.isLight
@@ -72,11 +73,13 @@ declare global {
   }
 }
 
-export const accumulativeContext = React.createContext<AccumulativeContext>(null as unknown as AccumulativeContext)
+export const accumulativeContext = /* @__PURE__ */ React.createContext<AccumulativeContext>(
+  null as unknown as AccumulativeContext
+)
 
-const SoftShadowMaterial = shaderMaterial(
+const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
   {
-    color: new THREE.Color(),
+    color: /* @__PURE__ */ new THREE.Color(),
     blend: 2.0,
     alphaTest: 0.75,
     opacity: 0,
@@ -97,14 +100,14 @@ const SoftShadowMaterial = shaderMaterial(
      vec4 sampledDiffuseColor = texture2D(map, vUv);
      gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
      #include <tonemapping_fragment>
-     #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+     #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`
 )
 
 export const AccumulativeShadows: ForwardRefComponent<
   JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
   AccumulativeContext
-> = React.forwardRef(
+> = /* @__PURE__ */ React.forwardRef(
   (
     {
       children,
@@ -253,7 +256,7 @@ export type RandomizedLightProps = {
 export const RandomizedLight: ForwardRefComponent<
   JSX.IntrinsicElements['group'] & RandomizedLightProps,
   AccumulativeLightContext
-> = React.forwardRef(
+> = /* @__PURE__ */ React.forwardRef(
   (
     {
       castShadow = true,
@@ -266,7 +269,7 @@ export const RandomizedLight: ForwardRefComponent<
       position = [0, 0, 0],
       radius = 1,
       amount = 8,
-      intensity = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 155 ? Math.PI : 1,
+      intensity = version >= 155 ? Math.PI : 1,
       ambient = 0.5,
       ...props
     }: JSX.IntrinsicElements['group'] & RandomizedLightProps,

src/core/ArcballControls.tsx

@@ -23,55 +23,55 @@ export type ArcballControlsProps = Omit<
   'ref'
 >
 
-export const ArcballControls: ForwardRefComponent<ArcballControlsProps, ArcballControlsImpl> = forwardRef<
-  ArcballControlsImpl,
-  ArcballControlsProps
->(({ camera, makeDefault, regress, domElement, onChange, onStart, onEnd, ...restProps }, ref) => {
-  const invalidate = useThree((state) => state.invalidate)
-  const defaultCamera = useThree((state) => state.camera)
-  const gl = useThree((state) => state.gl)
-  const events = useThree((state) => state.events) as EventManager<HTMLElement>
-  const set = useThree((state) => state.set)
-  const get = useThree((state) => state.get)
-  const performance = useThree((state) => state.performance)
-  const explCamera = camera || defaultCamera
-  const explDomElement = (domElement || events.connected || gl.domElement) as HTMLElement
-  const controls = useMemo(() => new ArcballControlsImpl(explCamera), [explCamera])
+export const ArcballControls: ForwardRefComponent<ArcballControlsProps, ArcballControlsImpl> =
+  /* @__PURE__ */ forwardRef<ArcballControlsImpl, ArcballControlsProps>(
+    ({ camera, makeDefault, regress, domElement, onChange, onStart, onEnd, ...restProps }, ref) => {
+      const invalidate = useThree((state) => state.invalidate)
+      const defaultCamera = useThree((state) => state.camera)
+      const gl = useThree((state) => state.gl)
+      const events = useThree((state) => state.events) as EventManager<HTMLElement>
+      const set = useThree((state) => state.set)
+      const get = useThree((state) => state.get)
+      const performance = useThree((state) => state.performance)
+      const explCamera = camera || defaultCamera
+      const explDomElement = (domElement || events.connected || gl.domElement) as HTMLElement
+      const controls = useMemo(() => new ArcballControlsImpl(explCamera), [explCamera])
 
-  useFrame(() => {
-    if (controls.enabled) controls.update()
-  }, -1)
+      useFrame(() => {
+        if (controls.enabled) controls.update()
+      }, -1)
 
-  useEffect(() => {
-    controls.connect(explDomElement)
-    return () => void controls.dispose()
-  }, [explDomElement, regress, controls, invalidate])
+      useEffect(() => {
+        controls.connect(explDomElement)
+        return () => void controls.dispose()
+      }, [explDomElement, regress, controls, invalidate])
 
-  useEffect(() => {
-    const callback = (e: Event) => {
-      invalidate()
-      if (regress) performance.regress()
-      if (onChange) onChange(e)
-    }
+      useEffect(() => {
+        const callback = (e: Event) => {
+          invalidate()
+          if (regress) performance.regress()
+          if (onChange) onChange(e)
+        }
 
-    controls.addEventListener('change', callback)
-    if (onStart) controls.addEventListener('start', onStart)
-    if (onEnd) controls.addEventListener('end', onEnd)
+        controls.addEventListener('change', callback)
+        if (onStart) controls.addEventListener('start', onStart)
+        if (onEnd) controls.addEventListener('end', onEnd)
 
-    return () => {
-      controls.removeEventListener('change', callback)
-      if (onStart) controls.removeEventListener('start', onStart)
-      if (onEnd) controls.removeEventListener('end', onEnd)
-    }
-  }, [onChange, onStart, onEnd])
+        return () => {
+          controls.removeEventListener('change', callback)
+          if (onStart) controls.removeEventListener('start', onStart)
+          if (onEnd) controls.removeEventListener('end', onEnd)
+        }
+      }, [onChange, onStart, onEnd])
 
-  useEffect(() => {
-    if (makeDefault) {
-      const old = get().controls
-      set({ controls })
-      return () => set({ controls: old })
-    }
-  }, [makeDefault, controls])
+      useEffect(() => {
+        if (makeDefault) {
+          const old = get().controls
+          set({ controls })
+          return () => set({ controls: old })
+        }
+      }, [makeDefault, controls])
 
-  return <primitive ref={ref} object={controls} {...restProps} />
-})
+      return <primitive ref={ref} object={controls} {...restProps} />
+    }
+  )

src/core/BBAnchor.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import * as THREE from 'three'
 import { useFrame, GroupProps } from '@react-three/fiber'
 
-const boundingBox = new THREE.Box3()
-const boundingBoxSize = new THREE.Vector3()
+const boundingBox = /* @__PURE__ */ new THREE.Box3()
+const boundingBoxSize = /* @__PURE__ */ new THREE.Vector3()
 
 export interface BBAnchorProps extends GroupProps {
   anchor: THREE.Vector3 | [number, number, number]

src/core/Billboard.tsx

@@ -20,23 +20,24 @@ export type BillboardProps = {
  * </Billboard>
  * ```
  */
-export const Billboard: ForwardRefComponent<BillboardProps, Group> = React.forwardRef<Group, BillboardProps>(
-  function Billboard({ follow = true, lockX = false, lockY = false, lockZ = false, ...props }, ref) {
-    const localRef = React.useRef<Group>()
-    useFrame(({ camera }) => {
-      if (!follow || !localRef.current) return
+export const Billboard: ForwardRefComponent<BillboardProps, Group> = /* @__PURE__ */ React.forwardRef<
+  Group,
+  BillboardProps
+>(function Billboard({ follow = true, lockX = false, lockY = false, lockZ = false, ...props }, ref) {
+  const localRef = React.useRef<Group>()
+  useFrame(({ camera }) => {
+    if (!follow || !localRef.current) return
 
-      // save previous rotation in case we're locking an axis
-      const prevRotation = localRef.current.rotation.clone()
+    // save previous rotation in case we're locking an axis
+    const prevRotation = localRef.current.rotation.clone()
 
-      // always face the camera
-      camera.getWorldQuaternion(localRef.current.quaternion)
+    // always face the camera
+    camera.getWorldQuaternion(localRef.current.quaternion)
 
-      // readjust any axis that is locked
-      if (lockX) localRef.current.rotation.x = prevRotation.x
-      if (lockY) localRef.current.rotation.y = prevRotation.y
-      if (lockZ) localRef.current.rotation.z = prevRotation.z
-    })
-    return <group ref={mergeRefs([localRef, ref])} {...props} />
-  }
-)
+    // readjust any axis that is locked
+    if (lockX) localRef.current.rotation.x = prevRotation.x
+    if (lockY) localRef.current.rotation.y = prevRotation.y
+    if (lockZ) localRef.current.rotation.z = prevRotation.z
+  })
+  return <group ref={mergeRefs([localRef, ref])} {...props} />
+})

src/core/Bounds.tsx

@@ -39,7 +39,7 @@ const isOrthographic = (def: THREE.Camera): def is THREE.OrthographicCamera =>
   def && (def as THREE.OrthographicCamera).isOrthographicCamera
 const isBox3 = (def: any): def is THREE.Box3 => def && (def as THREE.Box3).isBox3
 
-const context = React.createContext<BoundsApi>(null!)
+const context = /* @__PURE__ */ React.createContext<BoundsApi>(null!)
 export function Bounds({ children, damping = 6, fit, clip, observe, margin = 1.2, eps = 0.01, onFit }: BoundsProps) {
   const ref = React.useRef<THREE.Group>(null!)
   const { camera, invalidate, size, controls: controlsImpl } = useThree()

src/core/CameraControls.tsx

@@ -38,7 +38,7 @@ export type CameraControlsProps = Omit<
   'ref'
 >
 
-export const CameraControls: ForwardRefComponent<CameraControlsProps, CameraControlsImpl> = forwardRef<
+export const CameraControls: ForwardRefComponent<CameraControlsProps, CameraControlsImpl> = /* @__PURE__ */ forwardRef<
   CameraControlsImpl,
   CameraControlsProps
 >((props, ref) => {

src/core/CameraShake.tsx

@@ -28,77 +28,75 @@ export interface CameraShakeProps {
   rollFrequency?: number
 }
 
-export const CameraShake: ForwardRefComponent<CameraShakeProps, ShakeController | undefined> = React.forwardRef<
-  ShakeController | undefined,
-  CameraShakeProps
->(
-  (
-    {
-      intensity = 1,
-      decay,
-      decayRate = 0.65,
-      maxYaw = 0.1,
-      maxPitch = 0.1,
-      maxRoll = 0.1,
-      yawFrequency = 0.1,
-      pitchFrequency = 0.1,
-      rollFrequency = 0.1,
-    },
-    ref
-  ) => {
-    const camera = useThree((state) => state.camera)
-    const defaultControls = useThree((state) => state.controls) as unknown as ControlsProto
-    const intensityRef = React.useRef<number>(intensity)
-    const initialRotation = React.useRef<Euler>(camera.rotation.clone())
-    const [yawNoise] = React.useState(() => new SimplexNoise())
-    const [pitchNoise] = React.useState(() => new SimplexNoise())
-    const [rollNoise] = React.useState(() => new SimplexNoise())
+export const CameraShake: ForwardRefComponent<CameraShakeProps, ShakeController | undefined> =
+  /* @__PURE__ */ React.forwardRef<ShakeController | undefined, CameraShakeProps>(
+    (
+      {
+        intensity = 1,
+        decay,
+        decayRate = 0.65,
+        maxYaw = 0.1,
+        maxPitch = 0.1,
+        maxRoll = 0.1,
+        yawFrequency = 0.1,
+        pitchFrequency = 0.1,
+        rollFrequency = 0.1,
+      },
+      ref
+    ) => {
+      const camera = useThree((state) => state.camera)
+      const defaultControls = useThree((state) => state.controls) as unknown as ControlsProto
+      const intensityRef = React.useRef<number>(intensity)
+      const initialRotation = React.useRef<Euler>(camera.rotation.clone())
+      const [yawNoise] = React.useState(() => new SimplexNoise())
+      const [pitchNoise] = React.useState(() => new SimplexNoise())
+      const [rollNoise] = React.useState(() => new SimplexNoise())
 
-    const constrainIntensity = () => {
-      if (intensityRef.current < 0 || intensityRef.current > 1) {
-        intensityRef.current = intensityRef.current < 0 ? 0 : 1
+      const constrainIntensity = () => {
+        if (intensityRef.current < 0 || intensityRef.current > 1) {
+          intensityRef.current = intensityRef.current < 0 ? 0 : 1
+        }
       }
-    }
 
-    React.useImperativeHandle(
-      ref,
-      () => ({
-        getIntensity: (): number => intensityRef.current,
-        setIntensity: (val: number): void => {
-          intensityRef.current = val
-          constrainIntensity()
-        },
-      }),
-      []
-    )
+      React.useImperativeHandle(
+        ref,
+        () => ({
+          getIntensity: (): number => intensityRef.current,
+          setIntensity: (val: number): void => {
+            intensityRef.current = val
+            constrainIntensity()
+          },
+        }),
+        []
+      )
 
-    React.useEffect(() => {
-      if (defaultControls) {
-        const callback = () => void (initialRotation.current = camera.rotation.clone())
-        defaultControls.addEventListener('change', callback)
-        callback()
-        return () => void defaultControls.removeEventListener('change', callback)
-      }
-    }, [camera, defaultControls])
+      React.useEffect(() => {
+        if (defaultControls) {
+          const callback = () => void (initialRotation.current = camera.rotation.clone())
+          defaultControls.addEventListener('change', callback)
+          callback()
+          return () => void defaultControls.removeEventListener('change', callback)
+        }
+      }, [camera, defaultControls])
 
-    useFrame((state, delta) => {
-      const shake = Math.pow(intensityRef.current, 2)
-      const yaw = maxYaw * shake * yawNoise.noise(state.clock.elapsedTime * yawFrequency, 1)
-      const pitch = maxPitch * shake * pitchNoise.noise(state.clock.elapsedTime * pitchFrequency, 1)
-      const roll = maxRoll * shake * rollNoise.noise(state.clock.elapsedTime * rollFrequency, 1)
+      useFrame((state, delta) => {
+        const shake = Math.pow(intensityRef.current, 2)
+        const yaw = maxYaw * shake * yawNoise.noise(state.clock.elapsedTime * yawFrequency, 1)
+        const pitch = maxPitch * shake * pitchNoise.noise(state.clock.elapsedTime * pitchFrequency, 1)
+        const roll = maxRoll * shake * rollNoise.noise(state.clock.elapsedTime * rollFrequency, 1)
 
-      camera.rotation.set(
-        initialRotation.current.x + pitch,
-        initialRotation.current.y + yaw,
-        initialRotation.current.z + roll
-      )
+        camera.rotation.set(
+          initialRotation.current.x + pitch,
+          initialRotation.current.y + yaw,
+          initialRotation.current.z + roll
+        )
 
-      if (decay && intensityRef.current > 0) {
-        intensityRef.current -= decayRate * delta
-        constrainIntensity()
-      }
-    })
+        if (decay && intensityRef.current > 0) {
+          intensityRef.current -= decayRate * delta
+          constrainIntensity()
+        }
+      })
 
-    return null
-  }
-)
+      return null
+    }
+  )