fix: types

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",

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()

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,

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. */

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'
 

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 })
 

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'
 
 /**

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 {
   /**

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/'

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 }
 

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

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

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'
 

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,

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,

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>()
 

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 {
   /**

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 {
   /**

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'

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 }

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 {
   /**

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 {
   /**

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
 

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'

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<{

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()
 

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()
 

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

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

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 {
 

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<{

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 }

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);