fix(ESM): Update the published library to include file extensions for…

… proper ESM compatibility

Fixes #76, #73

packages/react-snowfall/package.json

@@ -51,7 +51,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "standard-version": "^9.5.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.5.4"
   },
   "dependencies": {
     "react-fast-compare": "^3.2.2"

packages/react-snowfall/src/Snowfall.tsx

@@ -1,73 +1,73 @@
-import React, { useEffect, useRef } from 'react'
-import { SnowfallCanvas, SnowfallCanvasConfig } from './SnowfallCanvas'
-import { defaultConfig } from './Snowflake'
-import { useComponentSize, useDeepMemo, useSnowfallStyle } from './hooks'
-
-export interface SnowfallProps extends Partial<SnowfallCanvasConfig> {
-  /**
-   * Any style properties that will be passed to the canvas element.
-   */
-  style?: React.CSSProperties
-}
-
-export const Snowfall = ({
-  color = defaultConfig.color,
-  changeFrequency = defaultConfig.changeFrequency,
-  radius = defaultConfig.radius,
-  speed = defaultConfig.speed,
-  wind = defaultConfig.wind,
-  rotationSpeed = defaultConfig.rotationSpeed,
-  snowflakeCount = 150,
-  images,
-  style,
-}: SnowfallProps = {}): JSX.Element => {
-  const mergedStyle = useSnowfallStyle(style)
-
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const canvasSize = useComponentSize(canvasRef)
-
-  const config = useDeepMemo<SnowfallCanvasConfig>({
-    color,
-    changeFrequency,
-    radius,
-    speed,
-    wind,
-    rotationSpeed,
-    images,
-    snowflakeCount,
-  })
-
-  // A reference to the config used for creating the initial instance
-  const configRef = useRef(config)
-
-  const snowfallCanvasRef = useRef<SnowfallCanvas>()
-
-  useEffect(() => {
-    if (!snowfallCanvasRef.current && canvasRef.current) {
-      snowfallCanvasRef.current = new SnowfallCanvas(canvasRef.current, configRef.current)
-    }
-
-    return () => {
-      snowfallCanvasRef.current?.pause()
-      snowfallCanvasRef.current = undefined
-    }
-  }, [])
-
-  useEffect(() => {
-    if (snowfallCanvasRef.current) {
-      snowfallCanvasRef.current.updateConfig(config)
-    }
-  }, [config])
-
-  return (
-    <canvas
-      ref={canvasRef}
-      height={canvasSize.height}
-      width={canvasSize.width}
-      style={mergedStyle}
-      data-testid="SnowfallCanvas"
-    />
-  )
-}
-
-export default Snowfall
+import React, { useEffect, useRef } from 'react'
+import { SnowfallCanvas, SnowfallCanvasConfig } from './SnowfallCanvas.js'
+import { defaultConfig } from './Snowflake.js'
+import { useComponentSize, useDeepMemo, useSnowfallStyle } from './hooks.js'
+
+export interface SnowfallProps extends Partial<SnowfallCanvasConfig> {
+  /**
+   * Any style properties that will be passed to the canvas element.
+   */
+  style?: React.CSSProperties
+}
+
+export const Snowfall = ({
+  color = defaultConfig.color,
+  changeFrequency = defaultConfig.changeFrequency,
+  radius = defaultConfig.radius,
+  speed = defaultConfig.speed,
+  wind = defaultConfig.wind,
+  rotationSpeed = defaultConfig.rotationSpeed,
+  snowflakeCount = 150,
+  images,
+  style,
+}: SnowfallProps = {}): JSX.Element => {
+  const mergedStyle = useSnowfallStyle(style)
+
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const canvasSize = useComponentSize(canvasRef)
+
+  const config = useDeepMemo<SnowfallCanvasConfig>({
+    color,
+    changeFrequency,
+    radius,
+    speed,
+    wind,
+    rotationSpeed,
+    images,
+    snowflakeCount,
+  })
+
+  // A reference to the config used for creating the initial instance
+  const configRef = useRef(config)
+
+  const snowfallCanvasRef = useRef<SnowfallCanvas>()
+
+  useEffect(() => {
+    if (!snowfallCanvasRef.current && canvasRef.current) {
+      snowfallCanvasRef.current = new SnowfallCanvas(canvasRef.current, configRef.current)
+    }
+
+    return () => {
+      snowfallCanvasRef.current?.pause()
+      snowfallCanvasRef.current = undefined
+    }
+  }, [])
+
+  useEffect(() => {
+    if (snowfallCanvasRef.current) {
+      snowfallCanvasRef.current.updateConfig(config)
+    }
+  }, [config])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      height={canvasSize.height}
+      width={canvasSize.width}
+      style={mergedStyle}
+      data-testid="SnowfallCanvas"
+    />
+  )
+}
+
+export default Snowfall

packages/react-snowfall/src/SnowfallCanvas.ts

@@ -1,5 +1,5 @@
-import Snowflake, { SnowflakeConfig, defaultConfig } from './Snowflake'
-import { targetFrameTime } from './config'
+import Snowflake, { SnowflakeConfig, defaultConfig } from './Snowflake.js'
+import { targetFrameTime } from './config.js'
 
 export interface SnowfallCanvasConfig extends SnowflakeConfig {
   /**