Skip to content

Commit b29d4cd

Browse files
authoredSep 24, 2023
fix: tree-shake module side-effects (#1661)
1 parent 853bc10 commit b29d4cd

22 files changed

+86
-50
lines changed
 

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
"stats.js": "^0.17.0",
7575
"suspend-react": "^0.1.3",
7676
"three-mesh-bvh": "^0.6.0",
77-
"three-stdlib": "^2.25.1",
77+
"three-stdlib": "^2.26.6",
7878
"troika-three-text": "^0.47.2",
7979
"utility-types": "^3.10.0",
8080
"zustand": "^3.5.13"

‎rollup.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,20 @@ const getBabelOptions = ({ useESModules }) => ({
3838
plugins: [
3939
'@babel/plugin-proposal-nullish-coalescing-operator',
4040
['@babel/transform-runtime', { regenerator: false, useESModules }],
41+
{
42+
visitor: {
43+
CallExpression(path) {
44+
if (!path.getFunctionParent()) {
45+
path.addComment('leading', '@__PURE__')
46+
}
47+
},
48+
NewExpression(path) {
49+
if (!path.getFunctionParent()) {
50+
path.addComment('leading', '@__PURE__')
51+
}
52+
},
53+
},
54+
},
4155
],
4256
})
4357

‎src/core/AccumulativeShadows.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { extend, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
44
import { shaderMaterial } from './shaderMaterial'
55
import { DiscardMaterial } from '../materials/DiscardMaterial'
66
import { ForwardRefComponent } from '../helpers/ts-utils'
7+
import { version } from '../helpers/constants'
78

89
function isLight(object: any): object is THREE.Light {
910
return object.isLight
@@ -97,7 +98,7 @@ const SoftShadowMaterial = shaderMaterial(
9798
vec4 sampledDiffuseColor = texture2D(map, vUv);
9899
gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
99100
#include <tonemapping_fragment>
100-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
101+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
101102
}`
102103
)
103104

@@ -266,7 +267,7 @@ export const RandomizedLight: ForwardRefComponent<
266267
position = [0, 0, 0],
267268
radius = 1,
268269
amount = 8,
269-
intensity = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 155 ? Math.PI : 1,
270+
intensity = version >= 155 ? Math.PI : 1,
270271
ambient = 0.5,
271272
...props
272273
}: JSX.IntrinsicElements['group'] & RandomizedLightProps,

‎src/core/Caustics.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { shaderMaterial } from './shaderMaterial'
1111
import { Edges } from './Edges'
1212
import { FullScreenQuad } from 'three-stdlib'
1313
import { ForwardRefComponent } from '../helpers/ts-utils'
14+
import { version } from '../helpers/constants'
1415

1516
type CausticsMaterialType = THREE.ShaderMaterial & {
1617
cameraMatrixWorld?: THREE.Matrix4
@@ -128,7 +129,7 @@ const CausticsProjectionMaterial = shaderMaterial(
128129
vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;
129130
gl_FragColor = vec4((front + back) * color, 1.0);
130131
#include <tonemapping_fragment>
131-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
132+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
132133
}`
133134
)
134135

‎src/core/Facemesh.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export type MediaPipeFaceMesh = typeof FacemeshDatas.SAMPLE_FACE
99

1010
export type MediaPipePoints =
1111
| typeof FacemeshDatas.SAMPLE_FACE.keypoints
12-
| typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks[0]
12+
| (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceLandmarks)[0]
1313

1414
export type FacemeshProps = {
1515
/** an array of 468+ keypoints as returned by google/mediapipe tasks-vision, default: a sample face */
@@ -27,13 +27,13 @@ export type FacemeshProps = {
2727
/** a landmark index (to get the position from) or a vec3 to be the origin of the mesh. default: undefined (ie. the bbox center) */
2828
origin?: number | THREE.Vector3
2929
/** 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) */
30-
facialTransformationMatrix?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes[0]
30+
facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0]
3131
/** Apply position offset extracted from `facialTransformationMatrix` */
3232
offset?: boolean
3333
/** Offset sensitivity factor, less is more sensible */
3434
offsetScalar?: number
3535
/** Fface blendshapes, as returned by FaceLandmarkerResult.faceBlendshapes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
36-
faceBlendshapes?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes[0]
36+
faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0]
3737
/** whether to enable eyes (nb. `faceBlendshapes` is required for), default: true */
3838
eyes?: boolean
3939
/** Force `origin` to be the middle of the 2 eyes (nb. `eyes` is required for), default: false */

‎src/core/Grid.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import mergeRefs from 'react-merge-refs'
1010
import { extend, useFrame } from '@react-three/fiber'
1111
import { shaderMaterial } from './shaderMaterial'
1212
import { ForwardRefComponent } from '../helpers/ts-utils'
13+
import { version } from '../helpers/constants'
1314

1415
export type GridMaterialType = {
1516
/** Cell size, default: 0.5 */
@@ -121,7 +122,7 @@ const GridMaterial = shaderMaterial(
121122
if (gl_FragColor.a <= 0.0) discard;
122123
123124
#include <tonemapping_fragment>
124-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
125+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
125126
}
126127
`
127128
)

‎src/core/Image.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Color, extend } from '@react-three/fiber'
44
import { shaderMaterial } from './shaderMaterial'
55
import { useTexture } from './useTexture'
66
import { ForwardRefComponent } from '../helpers/ts-utils'
7+
import { version } from '../helpers/constants'
78

89
export type ImageProps = Omit<JSX.IntrinsicElements['mesh'], 'scale'> & {
910
segments?: number
@@ -71,7 +72,7 @@ const ImageMaterialImpl = shaderMaterial(
7172
gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);
7273
7374
#include <tonemapping_fragment>
74-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
75+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
7576
}
7677
`
7778
)

‎src/core/Instances.tsx

+11-11
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@ type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor
3333
instanceColor: THREE.InstancedBufferAttribute
3434
}
3535

36-
const _instanceLocalMatrix = /*@__PURE__*/ new THREE.Matrix4()
37-
const _instanceWorldMatrix = /*@__PURE__*/ new THREE.Matrix4()
38-
const _instanceIntersects: THREE.Intersection[] = /*@__PURE__*/ []
39-
const _mesh = /*@__PURE__*/ new THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial>()
36+
const _instanceLocalMatrix = new THREE.Matrix4()
37+
const _instanceWorldMatrix = new THREE.Matrix4()
38+
const _instanceIntersects: THREE.Intersection[] = []
39+
const _mesh = new THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial>()
4040

4141
class PositionMesh extends THREE.Group {
4242
color: THREE.Color
@@ -84,13 +84,13 @@ class PositionMesh extends THREE.Group {
8484
}
8585
}
8686

87-
const globalContext = /*@__PURE__*/ React.createContext<Api>(null!)
88-
const parentMatrix = /*@__PURE__*/ new THREE.Matrix4()
89-
const instanceMatrix = /*@__PURE__*/ new THREE.Matrix4()
90-
const tempMatrix = /*@__PURE__*/ new THREE.Matrix4()
91-
const translation = /*@__PURE__*/ new THREE.Vector3()
92-
const rotation = /*@__PURE__*/ new THREE.Quaternion()
93-
const scale = /*@__PURE__*/ new THREE.Vector3()
87+
const globalContext = React.createContext<Api>(null!)
88+
const parentMatrix = new THREE.Matrix4()
89+
const instanceMatrix = new THREE.Matrix4()
90+
const tempMatrix = new THREE.Matrix4()
91+
const translation = new THREE.Vector3()
92+
const rotation = new THREE.Quaternion()
93+
const scale = new THREE.Vector3()
9494

9595
export const Instance = React.forwardRef(({ context, children, ...props }: InstanceProps, ref) => {
9696
React.useMemo(() => extend({ PositionMesh }), [])

‎src/core/MeshPortalMaterial.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { useFBO } from './useFBO'
1111
import { RenderTexture } from './RenderTexture'
1212
import { shaderMaterial } from './shaderMaterial'
1313
import { FullScreenQuad } from 'three-stdlib'
14+
import { version } from '../helpers/constants'
1415

1516
const PortalMaterialImpl = shaderMaterial(
1617
{
@@ -42,7 +43,7 @@ const PortalMaterialImpl = shaderMaterial(
4243
float alpha = 1.0 - smoothstep(0.0, 1.0, clamp(d/k + 1.0, 0.0, 1.0));
4344
gl_FragColor = vec4(t.rgb, blur == 0.0 ? t.a : t.a * alpha);
4445
#include <tonemapping_fragment>
45-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
46+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
4647
}`
4748
)
4849

@@ -261,9 +262,7 @@ function ManagePortalScene({
261262
vec4 ta = texture2D(a, vUv);
262263
vec4 tb = texture2D(b, vUv);
263264
gl_FragColor = mix(tb, ta, blend);
264-
#include <${
265-
parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'
266-
}>
265+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
267266
}`,
268267
})
269268
)

‎src/core/Outlines.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as React from 'react'
33
import { shaderMaterial } from './shaderMaterial'
44
import { extend, applyProps, ReactThreeFiber, useThree } from '@react-three/fiber'
55
import { toCreasedNormals } from 'three-stdlib'
6+
import { version } from '../helpers/constants'
67

78
const OutlinesMaterial = shaderMaterial(
89
{ screenspace: false, color: new THREE.Color('black'), opacity: 1, thickness: 0.05, size: new THREE.Vector2() },
@@ -46,7 +47,7 @@ const OutlinesMaterial = shaderMaterial(
4647
void main(){
4748
gl_FragColor = vec4(color, opacity);
4849
#include <tonemapping_fragment>
49-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
50+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
5051
}`
5152
)
5253

‎src/core/PointMaterial.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as THREE from 'three'
22
import * as React from 'react'
33
import { PrimitiveProps } from '@react-three/fiber'
44
import { ForwardRefComponent } from '../helpers/ts-utils'
5+
import { version } from '../helpers/constants'
56

67
type PointMaterialType = JSX.IntrinsicElements['pointsMaterial']
78

@@ -13,7 +14,7 @@ declare global {
1314
}
1415
}
1516

16-
const opaque_fragment = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment'
17+
const opaque_fragment = version >= 154 ? 'opaque_fragment' : 'output_fragment'
1718

1819
export class PointMaterialImpl extends THREE.PointsMaterial {
1920
constructor(props) {
@@ -34,7 +35,7 @@ export class PointMaterialImpl extends THREE.PointsMaterial {
3435
float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
3536
gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
3637
#include <tonemapping_fragment>
37-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
38+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
3839
`
3940
)
4041
}

‎src/core/Points.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ type PointsInstancesProps = JSX.IntrinsicElements['points'] & {
2222
limit?: number
2323
}
2424

25-
const _inverseMatrix = /*@__PURE__*/ new THREE.Matrix4()
26-
const _ray = /*@__PURE__*/ new THREE.Ray()
27-
const _sphere = /*@__PURE__*/ new THREE.Sphere()
28-
const _position = /*@__PURE__*/ new THREE.Vector3()
25+
const _inverseMatrix = new THREE.Matrix4()
26+
const _ray = new THREE.Ray()
27+
const _sphere = new THREE.Sphere()
28+
const _position = new THREE.Vector3()
2929

3030
export class PositionPoint extends THREE.Group {
3131
size: number
@@ -82,9 +82,9 @@ export class PositionPoint extends THREE.Group {
8282
}
8383

8484
let i, positionRef
85-
const context = /*@__PURE__*/ React.createContext<Api>(null!)
86-
const parentMatrix = /*@__PURE__*/ new THREE.Matrix4()
87-
const position = /*@__PURE__*/ new THREE.Vector3()
85+
const context = React.createContext<Api>(null!)
86+
const parentMatrix = new THREE.Matrix4()
87+
const position = new THREE.Vector3()
8888

8989
/**
9090
* Instance implementation, relies on react + context to update the attributes based on the children of this component

‎src/core/Sparkles.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import * as THREE from 'three'
33
import { PointsProps, useThree, useFrame, extend, Node } from '@react-three/fiber'
44
import { shaderMaterial } from './shaderMaterial'
55
import { ForwardRefComponent } from '../helpers/ts-utils'
6+
import { version } from '../helpers/constants'
67

78
interface Props {
89
/** Number of particles (default: 100) */
@@ -52,7 +53,7 @@ const SparklesImplMaterial = shaderMaterial(
5253
float strength = 0.05 / distanceToCenter - 0.1;
5354
gl_FragColor = vec4(vColor, strength * vOpacity);
5455
#include <tonemapping_fragment>
55-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
56+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
5657
}`
5758
)
5859

‎src/core/SpriteAnimator.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = (
6666
const totalFrames = React.useRef<number>(0)
6767
const [aspect, setAspect] = React.useState<Vector3 | undefined>([1, 1, 1])
6868
const flipOffset = flipX ? -1 : 1
69-
const [displayAsSprite,setDisplayAsSprite] = React.useState(asSprite ?? true)
69+
const [displayAsSprite, setDisplayAsSprite] = React.useState(asSprite ?? true)
7070

7171
function loadJsonAndTextureAndExecuteCallback(
7272
jsonUrl: string,
@@ -335,9 +335,15 @@ export const SpriteAnimator: React.FC<SpriteAnimatorProps> = (
335335
return (
336336
<group {...props}>
337337
<React.Suspense fallback={null}>
338-
{displayAsSprite && (
338+
{displayAsSprite && (
339339
<sprite ref={spriteRef} scale={aspect}>
340-
<spriteMaterial toneMapped={false} ref={matRef} map={spriteTexture} transparent={true} alphaTest={alphaTest ?? 0.0} />
340+
<spriteMaterial
341+
toneMapped={false}
342+
ref={matRef}
343+
map={spriteTexture}
344+
transparent={true}
345+
alphaTest={alphaTest ?? 0.0}
346+
/>
341347
</sprite>
342348
)}
343349
{!displayAsSprite && (

‎src/core/Stars.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as React from 'react'
44
import { ReactThreeFiber, useFrame } from '@react-three/fiber'
55
import { Points, Vector3, Spherical, Color, AdditiveBlending, ShaderMaterial } from 'three'
66
import { ForwardRefComponent } from '../helpers/ts-utils'
7+
import { version } from '../helpers/constants'
78

89
type Props = {
910
radius?: number
@@ -42,7 +43,7 @@ class StarfieldMaterial extends ShaderMaterial {
4243
gl_FragColor = vec4(vColor, opacity);
4344
4445
#include <tonemapping_fragment>
45-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
46+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
4647
}`,
4748
})
4849
}

‎src/helpers/constants.ts

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

‎src/materials/ConvolutionMaterial.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as THREE from 'three'
2+
import { version } from '../helpers/constants'
23

34
export class ConvolutionMaterial extends THREE.ShaderMaterial {
45
readonly kernel: Float32Array
@@ -53,9 +54,7 @@ export class ConvolutionMaterial extends THREE.ShaderMaterial {
5354
5455
#include <dithering_fragment>
5556
#include <tonemapping_fragment>
56-
#include <${
57-
parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'
58-
}>
57+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
5958
}`,
6059
vertexShader: `uniform vec2 texelSize;
6160
uniform vec2 halfTexelSize;

‎src/materials/MeshRefractionMaterial.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import * as THREE from 'three'
55
import { shaderMaterial } from '../core/shaderMaterial'
66
import { MeshBVHUniformStruct, shaderStructs, shaderIntersectFunction } from 'three-mesh-bvh'
7+
import { version } from '../helpers/constants'
78

89
export const MeshRefractionMaterial = shaderMaterial(
910
{
@@ -166,6 +167,6 @@ export const MeshRefractionMaterial = shaderMaterial(
166167
float nFresnel = fresnelFunc(viewDirection, normal) * fresnel;
167168
gl_FragColor = vec4(mix(finalColor, vec3(1.0), nFresnel), 1.0);
168169
#include <tonemapping_fragment>
169-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
170+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
170171
}`
171172
)

‎src/materials/SpotLightMaterial.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as THREE from 'three'
2+
import { version } from '../helpers/constants'
23

34
export class SpotLightMaterial extends THREE.ShaderMaterial {
45
constructor() {
@@ -79,7 +80,7 @@ export class SpotLightMaterial extends THREE.ShaderMaterial {
7980
gl_FragColor = vec4(lightColor, intensity * opacity);
8081
8182
#include <tonemapping_fragment>
82-
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
83+
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
8384
}`,
8485
})
8586
}

‎src/web/KeyboardControls.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ type KeyboardControlsApi<T extends string = string> = [
5151
UseBoundStore<KeyboardControlsState<T>>
5252
]
5353

54-
const context = /*@__PURE__*/ React.createContext<KeyboardControlsApi>(null!)
54+
const context = React.createContext<KeyboardControlsApi>(null!)
5555

5656
export function KeyboardControls({ map, children, onChange, domElement }: KeyboardControlsProps) {
5757
const key = map.map((item) => item.name + item.keys).join('-')

1 commit comments

Comments
 (1)

vercel[bot] commented on Sep 24, 2023

@vercel[bot]
Please sign in to comment.