fix: tree-shake module side-effects (#1661)

Author: CodyJasonBennett

package.json

@@ -74,7 +74,7 @@
     "stats.js": "^0.17.0",
     "suspend-react": "^0.1.3",
     "three-mesh-bvh": "^0.6.0",
-    "three-stdlib": "^2.25.1",
+    "three-stdlib": "^2.26.6",
     "troika-three-text": "^0.47.2",
     "utility-types": "^3.10.0",
     "zustand": "^3.5.13"

rollup.config.js

@@ -38,6 +38,20 @@ const getBabelOptions = ({ useESModules }) => ({
   plugins: [
     '@babel/plugin-proposal-nullish-coalescing-operator',
     ['@babel/transform-runtime', { regenerator: false, useESModules }],
+    {
+      visitor: {
+        CallExpression(path) {
+          if (!path.getFunctionParent()) {
+            path.addComment('leading', '@__PURE__')
+          }
+        },
+        NewExpression(path) {
+          if (!path.getFunctionParent()) {
+            path.addComment('leading', '@__PURE__')
+          }
+        },
+      },
+    },
   ],
 })
 

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
@@ -97,7 +98,7 @@ 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'}>
    }`
 )
 
@@ -266,7 +267,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/Caustics.tsx

@@ -11,6 +11,7 @@ import { shaderMaterial } from './shaderMaterial'
 import { Edges } from './Edges'
 import { FullScreenQuad } from 'three-stdlib'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { version } from '../helpers/constants'
 
 type CausticsMaterialType = THREE.ShaderMaterial & {
   cameraMatrixWorld?: THREE.Matrix4
@@ -128,7 +129,7 @@ const CausticsProjectionMaterial = shaderMaterial(
     vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;
     gl_FragColor = vec4((front + back) * color, 1.0);
     #include <tonemapping_fragment>
-    #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+    #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`
 )
 

src/core/Facemesh.tsx

@@ -9,7 +9,7 @@ export type MediaPipeFaceMesh = typeof FacemeshDatas.SAMPLE_FACE
 
 export type MediaPipePoints =
   | typeof FacemeshDatas.SAMPLE_FACE.keypoints
-  | typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks[0]
+  | (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks)[0]
 
 export type FacemeshProps = {
   /** an array of 468+ keypoints as returned by google/mediapipe tasks-vision, default: a sample face */
@@ -27,13 +27,13 @@ export type FacemeshProps = {
   /** a landmark index (to get the position from) or a vec3 to be the origin of the mesh. default: undefined (ie. the bbox center) */
   origin?: number | THREE.Vector3
   /** A facial transformation matrix, as returned by FaceLandmarkerResult.facialTransformationMatrixes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
-  facialTransformationMatrix?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes[0]
+  facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0]
   /** Apply position offset extracted from `facialTransformationMatrix` */
   offset?: boolean
   /** Offset sensitivity factor, less is more sensible */
   offsetScalar?: number
   /** Fface blendshapes, as returned by FaceLandmarkerResult.faceBlendshapes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
-  faceBlendshapes?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes[0]
+  faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0]
   /** whether to enable eyes (nb. `faceBlendshapes` is required for), default: true */
   eyes?: boolean
   /** Force `origin` to be the middle of the 2 eyes (nb. `eyes` is required for), default: false */

src/core/Grid.tsx

@@ -10,6 +10,7 @@ import mergeRefs from 'react-merge-refs'
 import { extend, useFrame } from '@react-three/fiber'
 import { shaderMaterial } from './shaderMaterial'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { version } from '../helpers/constants'
 
 export type GridMaterialType = {
   /** Cell size, default: 0.5 */
@@ -121,7 +122,7 @@ const GridMaterial = shaderMaterial(
       if (gl_FragColor.a <= 0.0) discard;
 
       #include <tonemapping_fragment>
-      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
     }
   `
 )

src/core/Image.tsx

@@ -4,6 +4,7 @@ import { Color, extend } from '@react-three/fiber'
 import { shaderMaterial } from './shaderMaterial'
 import { useTexture } from './useTexture'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { version } from '../helpers/constants'
 
 export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
   segments?: number
@@ -71,7 +72,7 @@ const ImageMaterialImpl = shaderMaterial(
     gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);
     
     #include <tonemapping_fragment>
-    #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+    #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
   }
 `
 )

src/core/Instances.tsx

@@ -33,10 +33,10 @@ type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor
   instanceColor: THREE.InstancedBufferAttribute
 }
 
-const _instanceLocalMatrix = /*@__PURE__*/ new THREE.Matrix4()
-const _instanceWorldMatrix = /*@__PURE__*/ new THREE.Matrix4()
-const _instanceIntersects: THREE.Intersection[] = /*@__PURE__*/ []
-const _mesh = /*@__PURE__*/ new THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial>()
+const _instanceLocalMatrix = new THREE.Matrix4()
+const _instanceWorldMatrix = new THREE.Matrix4()
+const _instanceIntersects: THREE.Intersection[] = []
+const _mesh = new THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial>()
 
 class PositionMesh extends THREE.Group {
   color: THREE.Color
@@ -84,13 +84,13 @@ class PositionMesh extends THREE.Group {
   }
 }
 
-const globalContext = /*@__PURE__*/ React.createContext<Api>(null!)
-const parentMatrix = /*@__PURE__*/ new THREE.Matrix4()
-const instanceMatrix = /*@__PURE__*/ new THREE.Matrix4()
-const tempMatrix = /*@__PURE__*/ new THREE.Matrix4()
-const translation = /*@__PURE__*/ new THREE.Vector3()
-const rotation = /*@__PURE__*/ new THREE.Quaternion()
-const scale = /*@__PURE__*/ new THREE.Vector3()
+const globalContext = React.createContext<Api>(null!)
+const parentMatrix = new THREE.Matrix4()
+const instanceMatrix = new THREE.Matrix4()
+const tempMatrix = new THREE.Matrix4()
+const translation = new THREE.Vector3()
+const rotation = new THREE.Quaternion()
+const scale = new THREE.Vector3()
 
 export const Instance = React.forwardRef(({ context, children, ...props }: InstanceProps, ref) => {
   React.useMemo(() => extend({ PositionMesh }), [])

src/core/MeshPortalMaterial.tsx

@@ -11,6 +11,7 @@ import { useFBO } from './useFBO'
 import { RenderTexture } from './RenderTexture'
 import { shaderMaterial } from './shaderMaterial'
 import { FullScreenQuad } from 'three-stdlib'
+import { version } from '../helpers/constants'
 
 const PortalMaterialImpl = shaderMaterial(
   {
@@ -42,7 +43,7 @@ const PortalMaterialImpl = shaderMaterial(
      float alpha = 1.0 - smoothstep(0.0, 1.0, clamp(d/k + 1.0, 0.0, 1.0));
      gl_FragColor = vec4(t.rgb, blur == 0.0 ? t.a : t.a * alpha);
      #include <tonemapping_fragment>
-     #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+     #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`
 )
 
@@ -261,9 +262,7 @@ function ManagePortalScene({
             vec4 ta = texture2D(a, vUv);
             vec4 tb = texture2D(b, vUv);
             gl_FragColor = mix(tb, ta, blend);
-            #include <${
-              parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'
-            }>
+            #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
           }`,
       })
     )

src/core/Outlines.tsx

@@ -3,6 +3,7 @@ import * as React from 'react'
 import { shaderMaterial } from './shaderMaterial'
 import { extend, applyProps, ReactThreeFiber, useThree } from '@react-three/fiber'
 import { toCreasedNormals } from 'three-stdlib'
+import { version } from '../helpers/constants'
 
 const OutlinesMaterial = shaderMaterial(
   { screenspace: false, color: new THREE.Color('black'), opacity: 1, thickness: 0.05, size: new THREE.Vector2() },
@@ -46,7 +47,7 @@ const OutlinesMaterial = shaderMaterial(
    void main(){
      gl_FragColor = vec4(color, opacity);
      #include <tonemapping_fragment>
-     #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+     #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`
 )
 

src/core/PointMaterial.tsx

@@ -2,6 +2,7 @@ import * as THREE from 'three'
 import * as React from 'react'
 import { PrimitiveProps } from '@react-three/fiber'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { version } from '../helpers/constants'
 
 type PointMaterialType = JSX.IntrinsicElements['pointsMaterial']
 
@@ -13,7 +14,7 @@ declare global {
   }
 }
 
-const opaque_fragment = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment'
+const opaque_fragment = version >= 154 ? 'opaque_fragment' : 'output_fragment'
 
 export class PointMaterialImpl extends THREE.PointsMaterial {
   constructor(props) {
@@ -34,7 +35,7 @@ export class PointMaterialImpl extends THREE.PointsMaterial {
       float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
       gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
       #include <tonemapping_fragment>
-      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
       `
       )
     }

src/core/Points.tsx

@@ -22,10 +22,10 @@ type PointsInstancesProps = JSX.IntrinsicElements['points'] & {
   limit?: number
 }
 
-const _inverseMatrix = /*@__PURE__*/ new THREE.Matrix4()
-const _ray = /*@__PURE__*/ new THREE.Ray()
-const _sphere = /*@__PURE__*/ new THREE.Sphere()
-const _position = /*@__PURE__*/ new THREE.Vector3()
+const _inverseMatrix = new THREE.Matrix4()
+const _ray = new THREE.Ray()
+const _sphere = new THREE.Sphere()
+const _position = new THREE.Vector3()
 
 export class PositionPoint extends THREE.Group {
   size: number
@@ -82,9 +82,9 @@ export class PositionPoint extends THREE.Group {
 }
 
 let i, positionRef
-const context = /*@__PURE__*/ React.createContext<Api>(null!)
-const parentMatrix = /*@__PURE__*/ new THREE.Matrix4()
-const position = /*@__PURE__*/ new THREE.Vector3()
+const context = React.createContext<Api>(null!)
+const parentMatrix = new THREE.Matrix4()
+const position = new THREE.Vector3()
 
 /**
  * Instance implementation, relies on react + context to update the attributes based on the children of this component

src/core/Sparkles.tsx

@@ -3,6 +3,7 @@ import * as THREE from 'three'
 import { PointsProps, useThree, useFrame, extend, Node } from '@react-three/fiber'
 import { shaderMaterial } from './shaderMaterial'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { version } from '../helpers/constants'
 
 interface Props {
   /** Number of particles (default: 100) */
@@ -52,7 +53,7 @@ const SparklesImplMaterial = shaderMaterial(
       float strength = 0.05 / distanceToCenter - 0.1;
       gl_FragColor = vec4(vColor, strength * vOpacity);
       #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

@@ -66,7 +66,7 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = (
   const totalFrames = React.useRef<number>(0)
   const [aspect, setAspect] = React.useState<Vector3 | undefined>([1, 1, 1])
   const flipOffset = flipX ? -1 : 1
-  const [displayAsSprite,setDisplayAsSprite] = React.useState(asSprite ?? true)
+  const [displayAsSprite, setDisplayAsSprite] = React.useState(asSprite ?? true)
 
   function loadJsonAndTextureAndExecuteCallback(
     jsonUrl: string,
@@ -335,9 +335,15 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = (
   return (
     <group {...props}>
       <React.Suspense fallback={null}>
-      {displayAsSprite && (
+        {displayAsSprite && (
           <sprite ref={spriteRef} scale={aspect}>
-            <spriteMaterial toneMapped={false} ref={matRef} map={spriteTexture} transparent={true} alphaTest={alphaTest ?? 0.0} />
+            <spriteMaterial
+              toneMapped={false}
+              ref={matRef}
+              map={spriteTexture}
+              transparent={true}
+              alphaTest={alphaTest ?? 0.0}
+            />
           </sprite>
         )}
         {!displayAsSprite && (

src/core/Stars.tsx

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { ReactThreeFiber, useFrame } from '@react-three/fiber'
 import { Points, Vector3, Spherical, Color, AdditiveBlending, ShaderMaterial } from 'three'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { version } from '../helpers/constants'
 
 type Props = {
   radius?: number
@@ -42,7 +43,7 @@ class StarfieldMaterial extends ShaderMaterial {
         gl_FragColor = vec4(vColor, opacity);
 
         #include <tonemapping_fragment>
-	      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+	      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
       }`,
     })
   }

src/helpers/constants.ts

@@ -0,0 +1,3 @@
+import { REVISION } from 'three'
+
+export const version = parseInt(REVISION.replace(/\D+/g, ''))

src/materials/ConvolutionMaterial.tsx

@@ -1,4 +1,5 @@
 import * as THREE from 'three'
+import { version } from '../helpers/constants'
 
 export class ConvolutionMaterial extends THREE.ShaderMaterial {
   readonly kernel: Float32Array
@@ -53,9 +54,7 @@ export class ConvolutionMaterial extends THREE.ShaderMaterial {
 
           #include <dithering_fragment>
           #include <tonemapping_fragment>
-          #include <${
-            parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'
-          }>
+          #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
         }`,
       vertexShader: `uniform vec2 texelSize;
         uniform vec2 halfTexelSize;

src/materials/MeshRefractionMaterial.tsx

@@ -4,6 +4,7 @@
 import * as THREE from 'three'
 import { shaderMaterial } from '../core/shaderMaterial'
 import { MeshBVHUniformStruct, shaderStructs, shaderIntersectFunction } from 'three-mesh-bvh'
+import { version } from '../helpers/constants'
 
 export const MeshRefractionMaterial = shaderMaterial(
   {
@@ -166,6 +167,6 @@ export const MeshRefractionMaterial = shaderMaterial(
     float nFresnel = fresnelFunc(viewDirection, normal) * fresnel;
     gl_FragColor = vec4(mix(finalColor, vec3(1.0), nFresnel), 1.0);      
     #include <tonemapping_fragment>
-    #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+    #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
   }`
 )

src/materials/SpotLightMaterial.tsx

@@ -1,4 +1,5 @@
 import * as THREE from 'three'
+import { version } from '../helpers/constants'
 
 export class SpotLightMaterial extends THREE.ShaderMaterial {
   constructor() {
@@ -79,7 +80,7 @@ export class SpotLightMaterial extends THREE.ShaderMaterial {
         gl_FragColor = vec4(lightColor, intensity * opacity);
 
         #include <tonemapping_fragment>
-	      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+	      #include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
       }`,
     })
   }

src/web/KeyboardControls.tsx

@@ -51,7 +51,7 @@ type KeyboardControlsApi<T extends string = string> = [
   UseBoundStore<KeyboardControlsState<T>>
 ]
 
-const context = /*@__PURE__*/ React.createContext<KeyboardControlsApi>(null!)
+const context = React.createContext<KeyboardControlsApi>(null!)
 
 export function KeyboardControls({ map, children, onChange, domElement }: KeyboardControlsProps) {
   const key = map.map((item) => item.name + item.keys).join('-')