From cbc5c074a949f96c5382007b64fc62482a5f5938 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 20 Dec 2024 01:58:34 +0100
Subject: [PATCH] fix: types

---
 package.json                                  |  5 +--
 pnpm-lock.yaml                                |  3 ++
 scripts/postbuild.mjs                         | 34 +++++++++++++++++++
 src/core/abstractions/AnimatedSprite/Atlas.ts |  4 +--
 .../abstractions/AnimatedSprite/component.vue |  4 +--
 .../abstractions/CubeCamera/component.vue     |  4 +--
 src/core/abstractions/Image/ImageMaterial.vue |  2 +-
 .../abstractions/Image/ImageMaterialImpl.ts   |  2 +-
 src/core/abstractions/Lensflare/component.vue |  4 +--
 src/core/abstractions/Lensflare/constants.ts  |  2 +-
 src/core/abstractions/Lensflare/index.ts      |  6 ++--
 .../Outline/OutlineMaterialImpl.ts            |  2 +-
 src/core/abstractions/Outline/component.vue   |  2 +-
 src/core/abstractions/ScreenSizer.vue         |  2 +-
 src/core/abstractions/index.ts                | 12 +++----
 src/core/abstractions/useFBO/component.vue    |  4 +--
 .../useSurfaceSampler/component.vue           |  4 +--
 src/core/controls/CameraControls.vue          |  2 +-
 src/core/controls/KeyboardControls.vue        |  2 +-
 src/core/index.ts                             | 14 ++++----
 src/core/loaders/index.ts                     |  8 ++---
 src/core/loaders/useFBX/component.vue         |  2 +-
 src/core/loaders/useGLTF/component.vue        |  2 +-
 src/core/loaders/useProgress.ts               |  2 +-
 src/core/loaders/useVideoTexture.ts           |  2 +-
 .../materials/holographicMaterial/index.vue   |  2 +-
 .../materials/meshDiscardMaterial/index.vue   |  2 +-
 .../materials/meshGlassMaterial/index.vue     |  2 +-
 .../meshReflectionMaterial/BlurPass.ts        |  2 +-
 .../ConvolutionMaterial.ts                    |  2 +-
 .../meshReflectionMaterial/index.vue          |  4 +--
 .../materials/meshWobbleMaterial/index.vue    |  2 +-
 src/core/misc/index.ts                        |  8 ++---
 src/core/staging/Grid.vue                     |  4 +--
 src/core/staging/Sparkles/ShaderData.ts       |  4 +--
 .../staging/Sparkles/ShaderDataBuilder.ts     |  4 +--
 src/core/staging/Sparkles/component.vue       |  8 ++---
 src/core/staging/useEnvironment/component.vue |  6 ++--
 src/core/staging/useEnvironment/index.ts      |  4 +--
 src/index.ts                                  |  4 +--
 40 files changed, 113 insertions(+), 75 deletions(-)
 create mode 100644 scripts/postbuild.mjs

diff --git a/package.json b/package.json
index 0d335cd6e..9166818b0 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/trescientos.js"
+      "default": "./dist/trescientos.js"
     },
     "./core": {
       "types": "./dist/core/index.d.ts"
@@ -47,7 +47,7 @@
   "scripts": {
     "dev": "cd playground/vue && pnpm dev",
     "dev:nuxt": "cd playground/nuxt && pnpm dev",
-    "build": "vite build",
+    "build": "vite build && node ./scripts/postbuild.mjs",
     "release": "release-it",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -86,6 +86,7 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "three": "^0.171.0",
+    "tinyglobby": "^0.2.10",
     "typescript": "^5.7.2",
     "unocss": "^0.65.1",
     "vite": "^6.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8d20a8ebd..f49c80b91 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,6 +81,9 @@ importers:
       three:
         specifier: ^0.171.0
         version: 0.171.0
+      tinyglobby:
+        specifier: ^0.2.10
+        version: 0.2.10
       typescript:
         specifier: ^5.7.2
         version: 5.7.2
diff --git a/scripts/postbuild.mjs b/scripts/postbuild.mjs
new file mode 100644
index 000000000..43efb8a7c
--- /dev/null
+++ b/scripts/postbuild.mjs
@@ -0,0 +1,34 @@
+import { readFile, writeFile } from 'node:fs/promises'
+import { glob } from 'tinyglobby'
+
+/**
+ * Adds `.js` when importing the ./src/index.js in the dts
+ *
+ * @return {Promise<void>}
+ */
+async function patchRootDts() {
+    const dts = 'dist/index.d.ts'
+    const content = await readFile(dts, 'utf8')
+    await writeFile(dts, content.replaceAll('./src/index\'', './src/index.js\''))
+}
+
+/**
+ * Fix node16 issue: https://www.typescriptlang.org/tsconfig/#allowArbitraryExtensions
+ * - node10 and bundler will check for d.vue.ts and vue.d.ts file when importing a vue file in a dts
+ * - node16 will check only for d.vue.ts file, this function will just copy/paste the content of vue.d.ts to d.vue.ts
+ *
+ * @return {Promise<void>}
+ */
+async function patchVueDts() {
+    const files = await glob('dist/**/*.vue.d.ts')
+    for (const file of files) {
+        // console.log(file)
+        await writeFile(file.replace('.vue.d.ts', '.d.vue.ts'), await readFile(file, 'utf-8'), 'utf-8')
+    }
+}
+
+async function fixNode16() {
+    await patchVueDts()
+}
+
+fixNode16()
diff --git a/src/core/abstractions/AnimatedSprite/Atlas.ts b/src/core/abstractions/AnimatedSprite/Atlas.ts
index 0cd501f6e..5a37f218e 100644
--- a/src/core/abstractions/AnimatedSprite/Atlas.ts
+++ b/src/core/abstractions/AnimatedSprite/Atlas.ts
@@ -1,8 +1,8 @@
 import { useLoader, useLogger } from '@tresjs/core'
 import { type Texture, TextureLoader } from 'three'
 import type { LoaderProto } from '@tresjs/core'
-import { expand } from './AtlasAnimationDefinitionParser'
-import { getNumbersFromEnd, stripUnderscoresNumbersFromEnd } from './StringOps'
+import { expand } from './AtlasAnimationDefinitionParser.js'
+import { getNumbersFromEnd, stripUnderscoresNumbersFromEnd } from './StringOps.js'
 
 export async function getTextureAndAtlasAsync(
   imagePathOrImageData: string,
diff --git a/src/core/abstractions/AnimatedSprite/component.vue b/src/core/abstractions/AnimatedSprite/component.vue
index 793186154..4bb7ef64d 100644
--- a/src/core/abstractions/AnimatedSprite/component.vue
+++ b/src/core/abstractions/AnimatedSprite/component.vue
@@ -4,8 +4,8 @@ import { DoubleSide } from 'three'
 import { onUnmounted, ref, shallowRef, watch } from 'vue'
 import type { TresVector2 } from '@tresjs/core'
 import type { Texture } from 'three'
-import { getAtlasFrames, getNullAtlasFrame, getTextureAndAtlasAsync, setAtlasDefinitions } from './Atlas'
-import type { Atlas, Atlasish } from './Atlas'
+import { getAtlasFrames, getNullAtlasFrame, getTextureAndAtlasAsync, setAtlasDefinitions } from './Atlas.js'
+import type { Atlas, Atlasish } from './Atlas.js'
 
 export interface AnimatedSpriteProps {
   /** URL of the image texture or an image dataURL. This prop is not reactive. */
diff --git a/src/core/abstractions/CubeCamera/component.vue b/src/core/abstractions/CubeCamera/component.vue
index 18d7042fb..00a4aff51 100644
--- a/src/core/abstractions/CubeCamera/component.vue
+++ b/src/core/abstractions/CubeCamera/component.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useLoop } from '@tresjs/core'
 import type { Group } from 'three'
-import type { CubeCameraOptions } from './useCubeCamera'
-import { useCubeCamera } from './useCubeCamera'
+import type { CubeCameraOptions } from './useCubeCamera.js'
+import { useCubeCamera } from './useCubeCamera.js'
 import type { MaybeRefOrGetter } from 'vue'
 import { shallowRef, toValue } from 'vue'
 
diff --git a/src/core/abstractions/Image/ImageMaterial.vue b/src/core/abstractions/Image/ImageMaterial.vue
index 782ffc4ef..449d6e4f2 100644
--- a/src/core/abstractions/Image/ImageMaterial.vue
+++ b/src/core/abstractions/Image/ImageMaterial.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue'
 import { extend } from '@tresjs/core'
-import ImageMaterial from './ImageMaterialImpl'
+import ImageMaterial from './ImageMaterialImpl.js'
 
 extend({ ImageMaterial })
 
diff --git a/src/core/abstractions/Image/ImageMaterialImpl.ts b/src/core/abstractions/Image/ImageMaterialImpl.ts
index fcae35040..74490c147 100644
--- a/src/core/abstractions/Image/ImageMaterialImpl.ts
+++ b/src/core/abstractions/Image/ImageMaterialImpl.ts
@@ -1,4 +1,4 @@
-import { shaderMaterial } from './../../../utils/shaderMaterial'
+import { shaderMaterial } from './../../../utils/shaderMaterial.js'
 import { Color, Vector2 } from 'three'
 
 /**
diff --git a/src/core/abstractions/Lensflare/component.vue b/src/core/abstractions/Lensflare/component.vue
index db22f03c9..1d3ea27a3 100644
--- a/src/core/abstractions/Lensflare/component.vue
+++ b/src/core/abstractions/Lensflare/component.vue
@@ -6,8 +6,8 @@ import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
 import type { TresColor } from '@tresjs/core'
 import type { Texture } from 'three'
 import type { LensflareElement } from 'three/examples/jsm/objects/Lensflare'
-import { partialLensflarePropsArrayToLensflarePropsArray as fillInProps, filterLensflareElementProps } from '.'
-import type { LensflareElementProps, SeedProps } from '.'
+import { partialLensflarePropsArrayToLensflarePropsArray as fillInProps, filterLensflareElementProps } from './index.js'
+import type { LensflareElementProps, SeedProps } from './index.js'
 
 export interface LensflareProps {
   /**
diff --git a/src/core/abstractions/Lensflare/constants.ts b/src/core/abstractions/Lensflare/constants.ts
index 7bd8d09bf..dd9d1a53d 100644
--- a/src/core/abstractions/Lensflare/constants.ts
+++ b/src/core/abstractions/Lensflare/constants.ts
@@ -1,4 +1,4 @@
-import type { LensflareElementProps, SeedProps } from '.'
+import type { LensflareElementProps, SeedProps } from './index.js'
 
 export const TEXTURE_PATH
   = 'https://raw.githubusercontent.com/Tresjs/assets/93976c7d63ac83d4a254a41a10b2362bc17e90c9/textures/lensflare/'
diff --git a/src/core/abstractions/Lensflare/index.ts b/src/core/abstractions/Lensflare/index.ts
index 05fba1640..c3343400b 100644
--- a/src/core/abstractions/Lensflare/index.ts
+++ b/src/core/abstractions/Lensflare/index.ts
@@ -7,10 +7,10 @@ import {
   easeInQuart,
   easeOutBounce,
   linear,
-} from '../../../utils/easing'
+} from '../../../utils/easing.js'
 import Lensflare from './component.vue'
-import { defaultLensflareElementProps, defaultSeedProps } from './constants'
-import RandUtils from './RandUtils'
+import { defaultLensflareElementProps, defaultSeedProps } from './constants.js'
+import RandUtils from './RandUtils.js'
 
 export { Lensflare }
 
diff --git a/src/core/abstractions/Outline/OutlineMaterialImpl.ts b/src/core/abstractions/Outline/OutlineMaterialImpl.ts
index 2284601a8..fee53a2ec 100644
--- a/src/core/abstractions/Outline/OutlineMaterialImpl.ts
+++ b/src/core/abstractions/Outline/OutlineMaterialImpl.ts
@@ -1,5 +1,5 @@
 import { Color, Vector2 } from 'three'
-import { shaderMaterial } from '../../../utils/shaderMaterial'
+import { shaderMaterial } from '../../../utils/shaderMaterial.js'
 
 // NOTE: Source
 // https://github.com/pmndrs/drei/blob/master/src/core/Outlines.tsx
diff --git a/src/core/abstractions/Outline/component.vue b/src/core/abstractions/Outline/component.vue
index 981b69db4..5edcd8087 100644
--- a/src/core/abstractions/Outline/component.vue
+++ b/src/core/abstractions/Outline/component.vue
@@ -4,7 +4,7 @@ import { normalizeColor, useTres } from '@tresjs/core'
 import type { BufferGeometry, Group } from 'three'
 import { BackSide, InstancedMesh, Mesh, SkinnedMesh, Vector2 } from 'three'
 import { onMounted, onUnmounted, shallowRef, watch } from 'vue'
-import OutlineMaterialImpl from './OutlineMaterialImpl'
+import OutlineMaterialImpl from './OutlineMaterialImpl.js'
 import { toCreasedNormals } from 'three-stdlib'
 
 // NOTE: Source
diff --git a/src/core/abstractions/ScreenSizer.vue b/src/core/abstractions/ScreenSizer.vue
index be9df5007..bddb8184a 100644
--- a/src/core/abstractions/ScreenSizer.vue
+++ b/src/core/abstractions/ScreenSizer.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Vector3 } from 'three'
-import { calculateScaleFactor } from '../../utils/calculateScaleFactor'
+import { calculateScaleFactor } from '../../utils/calculateScaleFactor.js'
 import { computed, shallowRef } from 'vue'
 import { useLoop, useTres } from '@tresjs/core'
 
diff --git a/src/core/abstractions/index.ts b/src/core/abstractions/index.ts
index 2223eb976..07cd4ba6d 100644
--- a/src/core/abstractions/index.ts
+++ b/src/core/abstractions/index.ts
@@ -1,7 +1,7 @@
 import AnimatedSprite from './AnimatedSprite/component.vue'
 import CubeCamera from './CubeCamera/component.vue'
 import Billboard from './Billboard.vue'
-import { GlobalAudio } from './GlobalAudio'
+import { GlobalAudio } from './GlobalAudio.js'
 import GradientTexture from './GradientTexture.vue'
 import Image from './Image/component.vue'
 import Lensflare from './Lensflare/component.vue'
@@ -13,16 +13,16 @@ import PositionalAudio from './PositionalAudio.vue'
 import Reflector from './Reflector.vue'
 import ScreenSpace from './ScreenSpace.vue'
 import Text3D from './Text3D.vue'
-import { useAnimations } from './useAnimations'
-import { useMask } from './Mask/useMask'
+import { useAnimations } from './useAnimations.js'
+import { useMask } from './Mask/useMask.js'
 import Fbo from './useFBO/component.vue'
 import Sampler from './useSurfaceSampler/component.vue'
 import ScreenSizer from './ScreenSizer.vue'
 import Edges from './Edges.vue'
 
-export * from '../staging/useEnvironment'
-export * from './useFBO/'
-export * from './useSurfaceSampler'
+export * from '../staging/useEnvironment/index.js'
+export * from './useFBO/index.js'
+export * from './useSurfaceSampler/index.js'
 export {
   AnimatedSprite,
   Billboard,
diff --git a/src/core/abstractions/useFBO/component.vue b/src/core/abstractions/useFBO/component.vue
index d8dcce64f..e6821230e 100644
--- a/src/core/abstractions/useFBO/component.vue
+++ b/src/core/abstractions/useFBO/component.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useFBO } from '.'
-import type { FboOptions } from '.'
+import { useFBO } from './index.js'
+import type { FboOptions } from './index.js'
 
 const props = withDefaults(defineProps<FboOptions>(), {
   depth: false,
diff --git a/src/core/abstractions/useSurfaceSampler/component.vue b/src/core/abstractions/useSurfaceSampler/component.vue
index dd7800ed5..a15f34185 100644
--- a/src/core/abstractions/useSurfaceSampler/component.vue
+++ b/src/core/abstractions/useSurfaceSampler/component.vue
@@ -2,8 +2,8 @@
 import { useTresContext } from '@tresjs/core'
 import { ref, watch, watchEffect } from 'vue'
 import type { InstancedMesh, Mesh } from 'three'
-import { useSurfaceSampler } from '.'
-import type { useSurfaceSamplerProps } from '.'
+import { useSurfaceSampler } from './index.js'
+import type { useSurfaceSamplerProps } from './index.js'
 
 const props = defineProps<useSurfaceSamplerProps>()
 
diff --git a/src/core/controls/CameraControls.vue b/src/core/controls/CameraControls.vue
index 9c9d4361a..f57c1eb4b 100644
--- a/src/core/controls/CameraControls.vue
+++ b/src/core/controls/CameraControls.vue
@@ -22,7 +22,7 @@ import type {
   OrthographicCamera,
   PerspectiveCamera,
 } from 'three'
-import { isOrthographicCamera, isPerspectiveCamera } from '../../utils/types'
+import { isOrthographicCamera, isPerspectiveCamera } from '../../utils/types.js'
 
 export interface CameraControlsProps {
   /**
diff --git a/src/core/controls/KeyboardControls.vue b/src/core/controls/KeyboardControls.vue
index d927c7f84..fbdd74436 100644
--- a/src/core/controls/KeyboardControls.vue
+++ b/src/core/controls/KeyboardControls.vue
@@ -5,7 +5,7 @@ import { Quaternion, Vector3 } from 'three'
 import { PointerLockControls as PointerLockControlsType } from 'three-stdlib'
 import { ref, toRefs, watch, watchEffect } from 'vue'
 import type { Camera } from 'three'
-import { PointerLockControls } from './index'
+import { PointerLockControls } from './index.js'
 
 export interface KeyboardControlsProps {
   /**
diff --git a/src/core/index.ts b/src/core/index.ts
index 3c1f75744..8e172787f 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -1,7 +1,7 @@
-export * from './abstractions'
-export * from './controls'
-export * from './loaders'
-export * from './materials'
-export * from './misc'
-export * from './shapes'
-export * from './staging'
+export * from './abstractions/index.js'
+export * from './controls/index.js'
+export * from './loaders/index.js'
+export * from './materials/index.js'
+export * from './misc/index.js'
+export * from './shapes/index.js'
+export * from './staging/index.js'
diff --git a/src/core/loaders/index.ts b/src/core/loaders/index.ts
index 39373b98a..b66da5a92 100644
--- a/src/core/loaders/index.ts
+++ b/src/core/loaders/index.ts
@@ -1,10 +1,10 @@
 import SVG from './SVG/component.vue'
 import FBXModel from './useFBX/component.vue'
 import GLTFModel from './useGLTF/component.vue'
-import { useProgress } from './useProgress'
-import { useVideoTexture } from './useVideoTexture'
+import { useProgress } from './useProgress.js'
+import { useVideoTexture } from './useVideoTexture.js'
 
-export * from './useFBX'
-export * from './useGLTF'
+export * from './useFBX/index.js'
+export * from './useGLTF/index.js'
 
 export { FBXModel, GLTFModel, SVG, useProgress, useVideoTexture }
diff --git a/src/core/loaders/useFBX/component.vue b/src/core/loaders/useFBX/component.vue
index 6f96b88a0..ca3a1b02f 100644
--- a/src/core/loaders/useFBX/component.vue
+++ b/src/core/loaders/useFBX/component.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { TresObject } from '@tresjs/core'
-import { useFBX } from '.'
+import { useFBX } from './index.js'
 
 export interface FBXModelProps {
   /**
diff --git a/src/core/loaders/useGLTF/component.vue b/src/core/loaders/useGLTF/component.vue
index a9ed4615d..0301b34a1 100644
--- a/src/core/loaders/useGLTF/component.vue
+++ b/src/core/loaders/useGLTF/component.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import type { TresObject } from '@tresjs/core'
-import { useGLTF } from '.'
+import { useGLTF } from './index.js'
 
 export interface GLTFModelProps {
   /**
diff --git a/src/core/loaders/useProgress.ts b/src/core/loaders/useProgress.ts
index f5aa95a5f..a4b4c3377 100644
--- a/src/core/loaders/useProgress.ts
+++ b/src/core/loaders/useProgress.ts
@@ -1,7 +1,7 @@
 import { DefaultLoadingManager } from 'three'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
-import { useLogger } from '../../composables/useLogger'
+import { useLogger } from '../../composables/useLogger.js'
 
 let saveLastTotalLoaded = 0
 
diff --git a/src/core/loaders/useVideoTexture.ts b/src/core/loaders/useVideoTexture.ts
index 43cd49bdb..69ae2e427 100644
--- a/src/core/loaders/useVideoTexture.ts
+++ b/src/core/loaders/useVideoTexture.ts
@@ -1,5 +1,5 @@
 import { VideoTexture } from 'three'
-import { useLogger } from '../../composables/useLogger'
+import { useLogger } from '../../composables/useLogger.js'
 
 interface VideoTextureProps extends HTMLVideoElement {
   unsuspend?: 'canplay' | 'canplaythrough' | 'loadstart' | 'loadedmetadata'
diff --git a/src/core/materials/holographicMaterial/index.vue b/src/core/materials/holographicMaterial/index.vue
index 00f7ecbda..7121d3ed6 100644
--- a/src/core/materials/holographicMaterial/index.vue
+++ b/src/core/materials/holographicMaterial/index.vue
@@ -5,7 +5,7 @@ import { shallowRef } from 'vue'
 import type { TresColor } from '@tresjs/core'
 import type { Side } from 'three'
 
-import HolographicMaterial from './HolographicMaterialParameters'
+import HolographicMaterial from './HolographicMaterialParameters.js'
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/core/materials/meshDiscardMaterial/index.vue b/src/core/materials/meshDiscardMaterial/index.vue
index 841785d13..acdc24706 100644
--- a/src/core/materials/meshDiscardMaterial/index.vue
+++ b/src/core/materials/meshDiscardMaterial/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTresContext } from '@tresjs/core'
 import { shallowRef } from 'vue'
-import { MeshDiscardMaterial } from './material'
+import { MeshDiscardMaterial } from './material.js'
 
 const meshDiscardMaterialRef = shallowRef()
 
diff --git a/src/core/materials/meshGlassMaterial/index.vue b/src/core/materials/meshGlassMaterial/index.vue
index e25c3de90..a989de938 100644
--- a/src/core/materials/meshGlassMaterial/index.vue
+++ b/src/core/materials/meshGlassMaterial/index.vue
@@ -2,7 +2,7 @@
 import { useTresContext } from '@tresjs/core'
 import { shallowRef } from 'vue'
 
-import MeshGlassMaterial from './material'
+import MeshGlassMaterial from './material.js'
 
 const MeshGlassMaterialClass = shallowRef()
 
diff --git a/src/core/materials/meshReflectionMaterial/BlurPass.ts b/src/core/materials/meshReflectionMaterial/BlurPass.ts
index 8d3f2dea9..d30cf2f15 100644
--- a/src/core/materials/meshReflectionMaterial/BlurPass.ts
+++ b/src/core/materials/meshReflectionMaterial/BlurPass.ts
@@ -38,7 +38,7 @@ import {
 } from 'three'
 import type { Material, WebGLRenderer } from 'three'
 
-import { ConvolutionMaterial } from './ConvolutionMaterial'
+import { ConvolutionMaterial } from './ConvolutionMaterial.js'
 
 export interface BlurPassProps {
   resolution: number
diff --git a/src/core/materials/meshReflectionMaterial/ConvolutionMaterial.ts b/src/core/materials/meshReflectionMaterial/ConvolutionMaterial.ts
index f01c10023..996409a75 100644
--- a/src/core/materials/meshReflectionMaterial/ConvolutionMaterial.ts
+++ b/src/core/materials/meshReflectionMaterial/ConvolutionMaterial.ts
@@ -26,7 +26,7 @@ SOFTWARE.
 */
 
 import { NoBlending, ShaderMaterial, Uniform, Vector2 } from 'three'
-import { version } from '../../../utils/constants'
+import { version } from '../../../utils/constants.js'
 
 export class ConvolutionMaterial extends ShaderMaterial {
   readonly kernel: Float32Array
diff --git a/src/core/materials/meshReflectionMaterial/index.vue b/src/core/materials/meshReflectionMaterial/index.vue
index 229787b6d..c16794a52 100644
--- a/src/core/materials/meshReflectionMaterial/index.vue
+++ b/src/core/materials/meshReflectionMaterial/index.vue
@@ -25,8 +25,8 @@ import type {
   Texture,
   WebGLRenderer,
 } from 'three'
-import { BlurPass } from './BlurPass'
-import { MeshReflectionMaterial } from './material'
+import { BlurPass } from './BlurPass.js'
+import { MeshReflectionMaterial } from './material.js'
 
 export interface MeshReflectionMaterialProps {
 
diff --git a/src/core/materials/meshWobbleMaterial/index.vue b/src/core/materials/meshWobbleMaterial/index.vue
index bc69b17c4..eaa016db1 100644
--- a/src/core/materials/meshWobbleMaterial/index.vue
+++ b/src/core/materials/meshWobbleMaterial/index.vue
@@ -2,7 +2,7 @@
 import { useLoop, useTresContext } from '@tresjs/core'
 import { shallowRef, watch } from 'vue'
 
-import { WobbleMaterialImpl as MeshWobbleMaterial } from './material'
+import { WobbleMaterialImpl as MeshWobbleMaterial } from './material.js'
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/core/misc/index.ts b/src/core/misc/index.ts
index 1da1623ce..2651f514c 100644
--- a/src/core/misc/index.ts
+++ b/src/core/misc/index.ts
@@ -1,7 +1,7 @@
-import { BakeShadows } from './BakeShadows'
+import { BakeShadows } from './BakeShadows.js'
 import Html from './html/HTML.vue'
-import { Stats } from './Stats'
-import { StatsGl } from './StatsGl'
-import { useGLTFExporter } from './useGLTFExporter'
+import { Stats } from './Stats.js'
+import { StatsGl } from './StatsGl.js'
+import { useGLTFExporter } from './useGLTFExporter.js'
 
 export { BakeShadows, Html, Stats, StatsGl, useGLTFExporter }
diff --git a/src/core/staging/Grid.vue b/src/core/staging/Grid.vue
index 885d893c1..486f3655b 100644
--- a/src/core/staging/Grid.vue
+++ b/src/core/staging/Grid.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { shaderMaterial } from '../../utils/shaderMaterial'
+import { shaderMaterial } from '../../utils/shaderMaterial.js'
 import type { ColorRepresentation, PlaneGeometry, ShaderMaterial, Side, Uniform } from 'three'
 import { BackSide, Color, Mesh, Plane, Vector3 } from 'three'
 import { extend, useLoop } from '@tresjs/core'
@@ -88,7 +88,7 @@ const GridMaterial = shaderMaterial(
     void main() {
       localPosition = position.xzy;
       if (infiniteGrid) localPosition *= 1.0 + fadeDistance;
-      
+
       worldPosition = modelMatrix * vec4(localPosition, 1.0);
       if (followCamera) {
         worldPosition.xyz += (worldCamProjPosition - worldPlanePosition);
diff --git a/src/core/staging/Sparkles/ShaderData.ts b/src/core/staging/Sparkles/ShaderData.ts
index fe280b746..fa0c1c55b 100644
--- a/src/core/staging/Sparkles/ShaderData.ts
+++ b/src/core/staging/Sparkles/ShaderData.ts
@@ -13,12 +13,12 @@ import {
   normalizeColorGradient,
   normalizeFlexibleVector3Gradient,
   normalizeScalarGradient,
-} from './../../../utils/Gradient'
+} from './../../../utils/Gradient.js'
 import type {
   GradientScalar,
   GradientTresColor,
   GradientVectorFlexibleParams,
-} from './../../../utils/Gradient'
+} from './../../../utils/Gradient.js'
 
 export type CanvasGradientRenderer<T> = (
   g: CanvasGradient,
diff --git a/src/core/staging/Sparkles/ShaderDataBuilder.ts b/src/core/staging/Sparkles/ShaderDataBuilder.ts
index 123b828a9..18c778265 100644
--- a/src/core/staging/Sparkles/ShaderDataBuilder.ts
+++ b/src/core/staging/Sparkles/ShaderDataBuilder.ts
@@ -9,11 +9,11 @@ import type {
   GradientScalar,
   GradientTresColor,
   GradientVectorFlexibleParams,
-} from './../../../utils/Gradient'
+} from './../../../utils/Gradient.js'
 import type {
   CanvasGradientRenderer,
   ShaderDataEntry,
-} from './ShaderData'
+} from './ShaderData.js'
 
 type rgbaSuffixes = ['r', 'rg', 'rgb', 'rgba']
 type xyzwSuffixes = ['x', 'xy', 'xyz', 'xyzw']
diff --git a/src/core/staging/Sparkles/component.vue b/src/core/staging/Sparkles/component.vue
index b0bc34723..4a3845679 100644
--- a/src/core/staging/Sparkles/component.vue
+++ b/src/core/staging/Sparkles/component.vue
@@ -15,9 +15,9 @@ import { onMounted, onUnmounted, shallowRef, toRefs, watch } from 'vue'
 import type { TresColor, VectorFlexibleParams } from '@tresjs/core'
 import type { Blending, BufferGeometry, IUniform, ShaderMaterialParameters, Texture } from 'three'
 import type { Ref } from 'vue'
-import ShaderDataBuilder from './ShaderDataBuilder'
-import useEmptyDataTexture from './useEmptyDataTexture'
-import type { Gradient } from '../../../utils/Gradient'
+import ShaderDataBuilder from './ShaderDataBuilder.js'
+import useEmptyDataTexture from './useEmptyDataTexture.js'
+import type { Gradient } from '../../../utils/Gradient.js'
 
 interface SparkleProps {
   /**
@@ -273,7 +273,7 @@ const shaderMaterialParameters: ShaderMaterialParameters = {
       float normalP = smoothstep(uNormalThreshold, 1., dotNormal);
       float lifetimeNoise = uLifetimeNoise * mix(normalP, 1.0, uMixNoise);
 
-      float t = uTime + position.x * 1. * uNoiseScale + position.y * 10. * uNoiseScale + 
+      float t = uTime + position.x * 1. * uNoiseScale + position.y * 10. * uNoiseScale +
       position.z * 7.3 * uNoiseScale + sin(lifetimeNoise * (position.x + 13. * position.y)) * lifetimeNoise;
 
       float lifetimeP = max(-0.0001, mix(-uCooldownRatio, 1. + cos(t) * lifetimeNoise, fract(t)));
diff --git a/src/core/staging/useEnvironment/component.vue b/src/core/staging/useEnvironment/component.vue
index 4e32a73ee..1c3f332f9 100644
--- a/src/core/staging/useEnvironment/component.vue
+++ b/src/core/staging/useEnvironment/component.vue
@@ -4,9 +4,9 @@ import { CubeCamera, HalfFloatType, WebGLCubeRenderTarget } from 'three'
 import { onUnmounted, ref, toRaw, useSlots, watch } from 'vue'
 import type { CubeTexture, Texture } from 'three'
 import type { Ref } from 'vue'
-import { useEnvironment } from '.'
-import EnvSence from './envSence'
-import type { EnvironmentOptions } from './const'
+import { useEnvironment } from './index.js'
+import EnvSence from './envSence.js'
+import type { EnvironmentOptions } from './const.js'
 
 const props = withDefaults(defineProps<EnvironmentOptions>(), {
   background: false,
diff --git a/src/core/staging/useEnvironment/index.ts b/src/core/staging/useEnvironment/index.ts
index 2ada6fa23..533f10e00 100644
--- a/src/core/staging/useEnvironment/index.ts
+++ b/src/core/staging/useEnvironment/index.ts
@@ -13,8 +13,8 @@ import type {
   WebGLCubeRenderTarget,
 } from 'three'
 import type { Ref } from 'vue'
-import { environmentPresets } from './const'
-import type { EnvironmentOptions } from './const'
+import { environmentPresets } from './const.js'
+import type { EnvironmentOptions } from './const.js'
 
 /**
  * Component that loads an environment map and sets it as the scene's background and environment.
diff --git a/src/index.ts b/src/index.ts
index 65ee564f5..c0d1b8ab2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,2 @@
-export * from './core'
-export * from './utils'
+export * from './core/index.js'
+export * from './utils/index.js'