fix: tree-shaking

package.json

@@ -62,7 +62,7 @@
     "stats.js": "^0.17.0",
     "suspend-react": "^0.1.3",
     "three-mesh-bvh": "^0.7.8",
-    "three-stdlib": "^2.34.0",
+    "three-stdlib": "^2.35.6",
     "troika-three-text": "^0.52.0",
     "tunnel-rat": "^0.1.2",
     "utility-types": "^3.11.0",

src/core/Splat.tsx

@@ -8,6 +8,7 @@ import * as THREE from 'three'
 import * as React from 'react'
 import { extend, useThree, useFrame, useLoader, LoaderProto } from '@react-three/fiber'
 import { shaderMaterial } from './shaderMaterial'
+import { version } from '../helpers/constants'
 
 export type SplatMaterialType = {
   alphaTest?: number
@@ -176,7 +177,7 @@ const SplatMaterial = /* @__PURE__ */ shaderMaterial(
       #include <alphahash_fragment>
       gl_FragColor = diffuseColor;
       #include <tonemapping_fragment>
-      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
     }
   `
 )

src/core/SpriteAnimator.tsx

@@ -117,7 +117,7 @@ function isSpriteData(data: SpriteData | null) {
   return data !== null && 'meta' in data && 'frames' in data
 }
 
-const geometry = new THREE.PlaneGeometry(1, 1)
+const geometry = /* @__PURE__ */ new THREE.PlaneGeometry(1, 1)
 
 export const SpriteAnimator = /* @__PURE__ */ React.forwardRef<THREE.Group, SpriteAnimatorProps>(
   (

src/core/StatsGl.tsx

@@ -15,43 +15,42 @@ type Props = Partial<StatsOptions> & {
   ref?: React.RefObject<HTMLElement>
 }
 
-export const StatsGl: ForwardRefComponent<Props, HTMLDivElement> = /* @__PURE__ */ React.forwardRef(
-  ({ className, parent, id, clearStatsGlStyle, ...props }: Props, fref) => {
-    const gl = useThree((state) => state.gl)
-
-    const stats = React.useMemo(() => {
-      const stats = new Stats({
-        ...props,
+export const StatsGl: ForwardRefComponent<Props, HTMLDivElement> = /* @__PURE__ */ React.forwardRef(function StatsGl(
+  { className, parent, id, clearStatsGlStyle, ...props },
+  fref
+) {
+  const gl = useThree((state) => state.gl)
+
+  const stats = React.useMemo(() => {
+    const stats = new Stats({
+      ...props,
+    })
+    stats.init(gl)
+    return stats
+  }, [gl])
+
+  React.useImperativeHandle(fref, () => stats.domElement, [stats])
+
+  React.useEffect(() => {
+    if (stats) {
+      const node = (parent && parent.current) || document.body
+      node?.appendChild(stats.domElement)
+      stats.domElement.querySelectorAll('canvas').forEach((canvas) => {
+        canvas.style.removeProperty('position')
       })
-      stats.init(gl)
-      return stats
-    }, [gl])
-
-    React.useImperativeHandle(fref, () => stats.domElement, [stats])
-
-    React.useEffect(() => {
-      if (stats) {
-        const node = (parent && parent.current) || document.body
-        node?.appendChild(stats.domElement)
-        stats.domElement.querySelectorAll('canvas').forEach((canvas) => {
-          canvas.style.removeProperty('position')
-        })
-        if (id) stats.domElement.id = id
-        if (clearStatsGlStyle) stats.domElement.removeAttribute('style')
-        stats.domElement.removeAttribute('style')
-        const classNames = (className ?? '').split(' ').filter((cls) => cls)
-        if (classNames.length) stats.domElement.classList.add(...classNames)
-        const end = addAfterEffect(() => stats.update())
-        return () => {
-          if (classNames.length) stats.domElement.classList.remove(...classNames)
-          node?.removeChild(stats.domElement)
-          end()
-        }
+      if (id) stats.domElement.id = id
+      if (clearStatsGlStyle) stats.domElement.removeAttribute('style')
+      stats.domElement.removeAttribute('style')
+      const classNames = (className ?? '').split(' ').filter((cls) => cls)
+      if (classNames.length) stats.domElement.classList.add(...classNames)
+      const end = addAfterEffect(() => stats.update())
+      return () => {
+        if (classNames.length) stats.domElement.classList.remove(...classNames)
+        node?.removeChild(stats.domElement)
+        end()
       }
-    }, [parent, stats, className, id, clearStatsGlStyle])
-
-    return null
-  }
-)
+    }
+  }, [parent, stats, className, id, clearStatsGlStyle])
 
-StatsGl.displayName = 'StatsGl'
+  return null
+})

src/core/VideoTexture.tsx

@@ -6,10 +6,10 @@ import { useThree } from '@react-three/fiber'
 import { suspend } from 'suspend-react'
 import { type default as Hls, Events } from 'hls.js'
 
-const IS_BROWSER =
+const IS_BROWSER = /* @__PURE__ */ (() =>
   typeof window !== 'undefined' &&
   typeof window.document?.createElement === 'function' &&
-  typeof window.navigator?.userAgent === 'string'
+  typeof window.navigator?.userAgent === 'string')()
 
 let _HLSModule: typeof import('hls.js') | null = null
 async function getHls(...args: ConstructorParameters<typeof Hls>) {

src/web/DragControls.tsx

@@ -4,12 +4,12 @@ import { useThree } from '@react-three/fiber'
 import { useGesture, DragConfig } from '@use-gesture/react'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
-const initialModelPosition = new THREE.Vector3()
-const mousePosition2D = new THREE.Vector2()
-const mousePosition3D = new THREE.Vector3()
-const dragOffset = new THREE.Vector3()
-const dragPlaneNormal = new THREE.Vector3()
-const dragPlane = new THREE.Plane()
+const initialModelPosition = /* @__PURE__ */ new THREE.Vector3()
+const mousePosition2D = /* @__PURE__ */ new THREE.Vector2()
+const mousePosition3D = /* @__PURE__ */ new THREE.Vector3()
+const dragOffset = /* @__PURE__ */ new THREE.Vector3()
+const dragPlaneNormal = /* @__PURE__ */ new THREE.Vector3()
+const dragPlane = /* @__PURE__ */ new THREE.Plane()
 
 type ControlsProto = {
   enabled: boolean

src/web/View.tsx

@@ -5,8 +5,8 @@ import tunnel from 'tunnel-rat'
 
 const isOrthographicCamera = (def: any): def is THREE.OrthographicCamera =>
   def && (def as THREE.OrthographicCamera).isOrthographicCamera
-const col = new THREE.Color()
-const tracked = tunnel()
+const col = /* @__PURE__ */ new THREE.Color()
+const tracked = /* @__PURE__ */ tunnel()
 
 /**
  * In `@react-three/fiber` after `v8.0.0` but prior to `v8.1.0`, `state.size` contained only dimension
@@ -187,7 +187,7 @@ function Container({ visible = true, canvasSize, scene, index, children, frames,
   )
 }
 
-const CanvasView = React.forwardRef(
+const CanvasView = /* @__PURE__ */ React.forwardRef(
   (
     { track, visible = true, index = 1, id, style, className, frames = Infinity, children, ...props }: ViewProps,
     fref: React.ForwardedRef<THREE.Group>
@@ -250,7 +250,7 @@ const CanvasView = React.forwardRef(
   }
 )
 
-const HtmlView = React.forwardRef(
+const HtmlView = /* @__PURE__ */ React.forwardRef(
   (
     {
       as: El = 'div',
@@ -287,13 +287,17 @@ export type ViewportProps = { Port: () => JSX.Element } & React.ForwardRefExotic
   ViewProps & React.RefAttributes<HTMLElement | THREE.Group>
 >
 
-export const View = React.forwardRef((props: ViewProps, fref: React.ForwardedRef<HTMLElement | THREE.Group>) => {
-  // If we're inside a canvas we should be able to access the context store
-  const store = React.useContext(context)
-  // If that's not the case we render a tunnel
-  if (!store) return <HtmlView ref={fref as unknown as React.ForwardedRef<HTMLElement>} {...props} />
-  // Otherwise a plain canvas-view
-  else return <CanvasView ref={fref as unknown as React.ForwardedRef<THREE.Group>} {...props} />
-}) as ViewportProps
+export const View = /* @__PURE__ */ (() => {
+  const _View = React.forwardRef((props: ViewProps, fref: React.ForwardedRef<HTMLElement | THREE.Group>) => {
+    // If we're inside a canvas we should be able to access the context store
+    const store = React.useContext(context)
+    // If that's not the case we render a tunnel
+    if (!store) return <HtmlView ref={fref as unknown as React.ForwardedRef<HTMLElement>} {...props} />
+    // Otherwise a plain canvas-view
+    else return <CanvasView ref={fref as unknown as React.ForwardedRef<THREE.Group>} {...props} />
+  }) as ViewportProps
 
-View.Port = () => <tracked.Out />
+  _View.Port = () => <tracked.Out />
+
+  return _View
+})()

yarn.lock

@@ -2896,7 +2896,7 @@ __metadata:
     suspend-react: "npm:^0.1.3"
     three: "npm:^0.151.0"
     three-mesh-bvh: "npm:^0.7.8"
-    three-stdlib: "npm:^2.34.0"
+    three-stdlib: "npm:^2.35.6"
     troika-three-text: "npm:^0.52.0"
     ts-node: "npm:^10.9.2"
     tunnel-rat: "npm:^0.1.2"
@@ -12212,9 +12212,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"three-stdlib@npm:^2.34.0":
-  version: 2.34.0
-  resolution: "three-stdlib@npm:2.34.0"
+"three-stdlib@npm:^2.35.6":
+  version: 2.35.6
+  resolution: "three-stdlib@npm:2.35.6"
   dependencies:
     "@types/draco3d": "npm:^1.4.0"
     "@types/offscreencanvas": "npm:^2019.6.4"
@@ -12224,7 +12224,7 @@ __metadata:
     potpack: "npm:^1.0.1"
   peerDependencies:
     three: ">=0.128.0"
-  checksum: 10c0/31927b9fd1e95907d9f11810a9b36119e21c6e0e0bcaf438c3ab944582e531153cc38984db97d10ba104d8cefc34d5fc046ec4be84e5b5e3a378ab2058e9ad18
+  checksum: 10c0/cc986c41978e26416b8759ce31a190fd12226c3cd304ce159ccf2bf00faf57862d7b0d13a562c643c3d585557bdbef18f58aee82c68e46a99610b6c8aae45300
   languageName: node
   linkType: hard