Skip to content

Commit a5d6a8f

Browse files
committed
fix(ESM): Update the published library to include file extensions for proper ESM compatibility
Fixes #76, #73
1 parent 9d63582 commit a5d6a8f

File tree

8 files changed

+422
-421
lines changed

8 files changed

+422
-421
lines changed

package-lock.json

+6-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/react-snowfall/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"react": "^18.2.0",
5252
"react-dom": "^18.2.0",
5353
"standard-version": "^9.5.0",
54-
"typescript": "^5.2.2"
54+
"typescript": "^5.5.4"
5555
},
5656
"dependencies": {
5757
"react-fast-compare": "^3.2.2"
+73-73
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,73 @@
1-
import React, { useEffect, useRef } from 'react'
2-
import { SnowfallCanvas, SnowfallCanvasConfig } from './SnowfallCanvas'
3-
import { defaultConfig } from './Snowflake'
4-
import { useComponentSize, useDeepMemo, useSnowfallStyle } from './hooks'
5-
6-
export interface SnowfallProps extends Partial<SnowfallCanvasConfig> {
7-
/**
8-
* Any style properties that will be passed to the canvas element.
9-
*/
10-
style?: React.CSSProperties
11-
}
12-
13-
export const Snowfall = ({
14-
color = defaultConfig.color,
15-
changeFrequency = defaultConfig.changeFrequency,
16-
radius = defaultConfig.radius,
17-
speed = defaultConfig.speed,
18-
wind = defaultConfig.wind,
19-
rotationSpeed = defaultConfig.rotationSpeed,
20-
snowflakeCount = 150,
21-
images,
22-
style,
23-
}: SnowfallProps = {}): JSX.Element => {
24-
const mergedStyle = useSnowfallStyle(style)
25-
26-
const canvasRef = useRef<HTMLCanvasElement>(null)
27-
const canvasSize = useComponentSize(canvasRef)
28-
29-
const config = useDeepMemo<SnowfallCanvasConfig>({
30-
color,
31-
changeFrequency,
32-
radius,
33-
speed,
34-
wind,
35-
rotationSpeed,
36-
images,
37-
snowflakeCount,
38-
})
39-
40-
// A reference to the config used for creating the initial instance
41-
const configRef = useRef(config)
42-
43-
const snowfallCanvasRef = useRef<SnowfallCanvas>()
44-
45-
useEffect(() => {
46-
if (!snowfallCanvasRef.current && canvasRef.current) {
47-
snowfallCanvasRef.current = new SnowfallCanvas(canvasRef.current, configRef.current)
48-
}
49-
50-
return () => {
51-
snowfallCanvasRef.current?.pause()
52-
snowfallCanvasRef.current = undefined
53-
}
54-
}, [])
55-
56-
useEffect(() => {
57-
if (snowfallCanvasRef.current) {
58-
snowfallCanvasRef.current.updateConfig(config)
59-
}
60-
}, [config])
61-
62-
return (
63-
<canvas
64-
ref={canvasRef}
65-
height={canvasSize.height}
66-
width={canvasSize.width}
67-
style={mergedStyle}
68-
data-testid="SnowfallCanvas"
69-
/>
70-
)
71-
}
72-
73-
export default Snowfall
1+
import React, { useEffect, useRef } from 'react'
2+
import { SnowfallCanvas, SnowfallCanvasConfig } from './SnowfallCanvas.js'
3+
import { defaultConfig } from './Snowflake.js'
4+
import { useComponentSize, useDeepMemo, useSnowfallStyle } from './hooks.js'
5+
6+
export interface SnowfallProps extends Partial<SnowfallCanvasConfig> {
7+
/**
8+
* Any style properties that will be passed to the canvas element.
9+
*/
10+
style?: React.CSSProperties
11+
}
12+
13+
export const Snowfall = ({
14+
color = defaultConfig.color,
15+
changeFrequency = defaultConfig.changeFrequency,
16+
radius = defaultConfig.radius,
17+
speed = defaultConfig.speed,
18+
wind = defaultConfig.wind,
19+
rotationSpeed = defaultConfig.rotationSpeed,
20+
snowflakeCount = 150,
21+
images,
22+
style,
23+
}: SnowfallProps = {}): JSX.Element => {
24+
const mergedStyle = useSnowfallStyle(style)
25+
26+
const canvasRef = useRef<HTMLCanvasElement>(null)
27+
const canvasSize = useComponentSize(canvasRef)
28+
29+
const config = useDeepMemo<SnowfallCanvasConfig>({
30+
color,
31+
changeFrequency,
32+
radius,
33+
speed,
34+
wind,
35+
rotationSpeed,
36+
images,
37+
snowflakeCount,
38+
})
39+
40+
// A reference to the config used for creating the initial instance
41+
const configRef = useRef(config)
42+
43+
const snowfallCanvasRef = useRef<SnowfallCanvas>()
44+
45+
useEffect(() => {
46+
if (!snowfallCanvasRef.current && canvasRef.current) {
47+
snowfallCanvasRef.current = new SnowfallCanvas(canvasRef.current, configRef.current)
48+
}
49+
50+
return () => {
51+
snowfallCanvasRef.current?.pause()
52+
snowfallCanvasRef.current = undefined
53+
}
54+
}, [])
55+
56+
useEffect(() => {
57+
if (snowfallCanvasRef.current) {
58+
snowfallCanvasRef.current.updateConfig(config)
59+
}
60+
}, [config])
61+
62+
return (
63+
<canvas
64+
ref={canvasRef}
65+
height={canvasSize.height}
66+
width={canvasSize.width}
67+
style={mergedStyle}
68+
data-testid="SnowfallCanvas"
69+
/>
70+
)
71+
}
72+
73+
export default Snowfall

packages/react-snowfall/src/SnowfallCanvas.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Snowflake, { SnowflakeConfig, defaultConfig } from './Snowflake'
2-
import { targetFrameTime } from './config'
1+
import Snowflake, { SnowflakeConfig, defaultConfig } from './Snowflake.js'
2+
import { targetFrameTime } from './config.js'
33

44
export interface SnowfallCanvasConfig extends SnowflakeConfig {
55
/**

0 commit comments

Comments
 (0)