fix: node16 types

package.json

@@ -51,7 +51,7 @@
   "scripts": {
     "dev": "cd playground/vue && npm run dev",
     "dev:nuxt": "cd playground/nuxt && npm run dev",
-    "build": "vite build",
+    "build": "vite build && node ./scripts/postbuild.mjs",
     "test": "vitest",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui --coverage.enabled=true",

scripts/postbuild.mjs

@@ -0,0 +1,40 @@
+import { readdir, readFile, writeFile } from 'node:fs/promises'
+
+/**
+ * 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 node10 issue:
+ * - 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
+ *
+ * @param path {String}
+ * @return {Promise<void>}
+ */
+async function patchVueDts(path) {
+  const files = await readdir(path, { recursive: false })
+  for (const file of files) {
+    if (file.endsWith('.vue.d.ts')) {
+      await writeFile(`${path}/${file.replace('.vue.d.ts', '.d.vue.ts')}`, await readFile(`${path}/${file}`, 'utf-8'), 'utf-8')
+    }
+  }
+}
+
+async function fixNode16() {
+  await Promise.all([
+    patchRootDts(),
+    patchVueDts('dist/src/components'),
+    patchVueDts('dist/src/composables/useLoader'),
+    patchVueDts('dist/src/composables/useTexture'),
+  ])
+}
+
+fixNode16()

src/components/TresCanvas.vue

@@ -6,8 +6,8 @@ import type {
   WebGLRendererParameters,
 } from 'three'
 import type { App, Ref } from 'vue'
-import type { RendererPresetsType } from '../composables/useRenderer/const'
-import type { TresCamera, TresObject, TresScene } from '../types/'
+import type { RendererPresetsType } from '../composables/useRenderer/const.js'
+import type { TresCamera, TresObject, TresScene } from '../types/index.js'
 import { PerspectiveCamera, Scene } from 'three'
 import * as THREE from 'three'
 
@@ -30,12 +30,12 @@ import {
   type TresContext,
   useLogger,
   useTresContextProvider,
-} from '../composables'
-import { extend } from '../core/catalogue'
-import { nodeOps } from '../core/nodeOps'
+} from '../composables/index.js'
+import { extend } from '../core/catalogue.js'
+import { nodeOps } from '../core/nodeOps.js'
 
-import { registerTresDevtools } from '../devtools'
-import { disposeObject3D } from '../utils/'
+import { registerTresDevtools } from '../devtools/index.js'
+import { disposeObject3D } from '../utils/index.js'
 
 export interface TresCanvasProps
   extends Omit<WebGLRendererParameters, 'canvas'> {

src/composables/index.ts

@@ -1,16 +1,16 @@
 import UseLoader from './useLoader/component.vue'
 import UseTexture from './useTexture/component.vue'
 
-export * from './useCamera/'
-export * from './useLoader'
-export * from './useLogger'
-export * from './useLoop'
-export * from './useRaycaster'
-export * from './useRenderer/'
-export * from './useRenderLoop'
-export * from './useSeek'
-export * from './useTexture'
-export * from './useTresContextProvider'
-export * from './useTresEventManager'
-export { onTresReady } from './useTresReady'
+export * from './useCamera/index.js'
+export * from './useLoader/index.js'
+export * from './useLogger.js'
+export * from './useLoop/index.js'
+export * from './useRaycaster/index.js'
+export * from './useRenderer/index.js'
+export * from './useRenderLoop/index.js'
+export * from './useSeek/index.js'
+export * from './useTexture/index.js'
+export * from './useTresContextProvider/index.js'
+export * from './useTresEventManager/index.js'
+export { onTresReady } from './useTresReady/index.js'
 export { UseLoader, UseTexture }

src/composables/useCamera/index.ts

@@ -1,10 +1,10 @@
 import type { OrthographicCamera } from 'three'
-import type { TresScene } from '../../types'
-import type { TresContext } from '../useTresContextProvider'
+import type { TresScene } from '../../types/index.js'
+import type { TresContext } from '../useTresContextProvider/index.js'
 
 import { Camera, PerspectiveCamera } from 'three'
 import { computed, onUnmounted, ref, watchEffect } from 'vue'
-import { camera as isCamera } from '../../utils/is'
+import { camera as isCamera } from '../../utils/is.js'
 
 export const useCamera = ({ sizes }: Pick<TresContext, 'sizes'> & { scene: TresScene }) => {
   // the computed does not trigger, when for example the camera position changes

src/composables/useLoader/component.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { LoaderProto } from './index'
+import type { LoaderProto } from './index.js'
 import { reactive } from 'vue'
-import { useLoader } from './index'
+import { useLoader } from './index.js'
 
 const props = defineProps<{
   loader: LoaderProto<unknown>

src/composables/useLoader/index.ts

@@ -1,6 +1,6 @@
 import type { Loader, LoadingManager, Object3D } from 'three'
-import type { TresObject } from '../../types'
-import { useLogger } from '..'
+import type { TresObject } from '../../types/index.js'
+import { useLogger } from '../useLogger.js'
 
 export interface TresLoader<T> extends Loader {
   load: (

src/composables/useLoop/index.ts

@@ -1,5 +1,5 @@
-import type { LoopCallbackFn } from './../../core/loop'
-import { useTresContext } from '../useTresContextProvider'
+import type { LoopCallbackFn } from './../../core/loop.js'
+import { useTresContext } from '../useTresContextProvider/index.js'
 
 export function useLoop() {
   const {

src/composables/useRaycaster/index.ts

@@ -1,8 +1,8 @@
 import type { EventHook } from '@vueuse/core'
-import type { DomEvent, TresCamera, TresEvent, TresInstance } from 'src/types'
+import type { DomEvent, TresCamera, TresEvent, TresInstance } from 'src/types/index.js'
 import type { Intersection, Object3D, Object3DEventMap } from 'three'
 import type { ShallowRef } from 'vue'
-import type { TresContext } from '../useTresContextProvider'
+import type { TresContext } from '../useTresContextProvider/index.js'
 import { createEventHook, useElementBounding, usePointer } from '@vueuse/core'
 
 import { Vector2, Vector3 } from 'three'

src/composables/useRenderer/index.ts

@@ -1,9 +1,9 @@
 import type { ColorSpace, Scene, ShadowMapType, ToneMapping, WebGLRendererParameters } from 'three'
-import type { EmitEventFn, TresColor } from '../../types'
+import type { EmitEventFn, TresColor } from '../../types/index.js'
 
-import type { TresContext } from '../useTresContextProvider'
+import type { TresContext } from '../useTresContextProvider/index.js'
 
-import type { RendererPresetsType } from './const'
+import type { RendererPresetsType } from './const.js'
 import {
   type MaybeRefOrGetter,
   toValue,

src/composables/useSeek/index.ts

@@ -1,5 +1,5 @@
 import type { Object3D, Scene } from 'three'
-import { useLogger } from '../useLogger'
+import { useLogger } from '../useLogger.js'
 
 /**
  * Seek composable return type

src/composables/useTexture/component.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PBRUseTextureMap } from './index'
+import type { PBRUseTextureMap } from './index.js'
 import { reactive } from 'vue'
-import { useTexture } from './index'
+import { useTexture } from './index.js'
 
 const props = defineProps<PBRUseTextureMap>()
 

src/composables/useTexture/index.ts

@@ -1,6 +1,6 @@
 import type { LoadingManager, Texture } from 'three'
 import { TextureLoader } from 'three'
-import { isArray } from '../../utils'
+import { isArray } from '../../utils/index.js'
 
 export interface PBRMaterialOptions {
   /**

src/composables/useTresContextProvider/index.ts

@@ -1,20 +1,20 @@
 import type { Camera, WebGLRenderer } from 'three'
 import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
-import type { RendererLoop } from '../../core/loop'
-import type { EmitEventFn, TresControl, TresObject, TresScene } from '../../types'
-import type { UseRendererOptions } from '../useRenderer'
+import type { RendererLoop } from '../../core/loop.js'
+import type { EmitEventFn, TresControl, TresObject, TresScene } from '../../types/index.js'
+import type { UseRendererOptions } from '../useRenderer/index.js'
 import { useFps, useMemory, useRafFn } from '@vueuse/core'
 import { Raycaster } from 'three'
 import { computed, inject, onUnmounted, provide, readonly, ref, shallowRef } from 'vue'
-import { extend } from '../../core/catalogue'
-import { createRenderLoop } from '../../core/loop'
-import { calculateMemoryUsage } from '../../utils/perf'
-
-import { useCamera } from '../useCamera'
-import { useRenderer } from '../useRenderer'
-import useSizes, { type SizesType } from '../useSizes'
-import { type TresEventManager, useTresEventManager } from '../useTresEventManager'
-import { useTresReady } from '../useTresReady'
+import { extend } from '../../core/catalogue.js'
+import { createRenderLoop } from '../../core/loop.js'
+import { calculateMemoryUsage } from '../../utils/perf.js'
+
+import { useCamera } from '../useCamera/index.js'
+import { useRenderer } from '../useRenderer/index.js'
+import useSizes, { type SizesType } from '../useSizes/index.js'
+import { type TresEventManager, useTresEventManager } from '../useTresEventManager/index.js'
+import { useTresReady } from '../useTresReady/index.js'
 
 export interface InternalState {
   priority: Ref<number>

src/composables/useTresEventManager/index.ts

@@ -1,10 +1,10 @@
-import type { EmitEventFn, EmitEventName, Intersection, TresEvent, TresInstance, TresObject } from 'src/types'
+import type { EmitEventFn, EmitEventName, Intersection, TresEvent, TresInstance, TresObject } from '../../types/index.js'
 import type { Object3D, Object3DEventMap, Scene } from 'three'
-import type { TresContext } from '../useTresContextProvider'
+import type { TresContext } from '../useTresContextProvider/index.js'
 import { shallowRef } from 'vue'
-import { hyphenate } from '../../utils'
-import * as is from '../../utils/is'
-import { useRaycaster } from '../useRaycaster'
+import { hyphenate } from '../../utils/index.js'
+import * as is from '../../utils/is.js'
+import { useRaycaster } from '../useRaycaster/index.js'
 
 export interface TresEventManager {
   /**

src/composables/useTresReady/createReadyEventHook/createReadyHook.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { createReadyEventHook } from './index'
+import { createReadyEventHook } from './index.js'
 
 describe('createReadyEventHook', () => {
   beforeEach(() => {

src/composables/useTresReady/index.ts

@@ -1,6 +1,6 @@
-import type { TresContext } from '../useTresContextProvider'
-import { useTresContext } from '../useTresContextProvider'
-import { createReadyEventHook } from './createReadyEventHook'
+import type { TresContext } from '../useTresContextProvider/index.js'
+import { useTresContext } from '../useTresContextProvider/index.js'
+import { createReadyEventHook } from './createReadyEventHook/index.js'
 
 const ctxToUseTresReady = new WeakMap<
   TresContext,

src/core/catalogue.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type { TresCatalogue } from '../types'
+import type { TresCatalogue } from '../types/index.js'
 import { ref } from 'vue'
 
 export const catalogue: Ref<TresCatalogue> = ref({})

src/core/loop.ts

@@ -1,10 +1,10 @@
 import type { Fn } from '@vueuse/core'
 import type { Camera, EventDispatcher, Raycaster, Scene, WebGLRenderer } from 'three'
 import type { Ref } from 'vue'
-import type { Callback } from '../utils/createPriorityEventHook'
+import type { Callback } from '../utils/createPriorityEventHook.js'
 import { Clock, MathUtils } from 'three'
 import { ref, unref } from 'vue'
-import { createPriorityEventHook } from '../utils/createPriorityEventHook'
+import { createPriorityEventHook } from '../utils/createPriorityEventHook.js'
 
 export type LoopStage = 'before' | 'render' | 'after'
 

src/core/nodeOps.ts

@@ -1,12 +1,12 @@
-import type { TresContext } from '../composables'
-import type { DisposeType, LocalState, TresInstance, TresObject, TresObject3D, TresPrimitive, WithMathProps } from '../types'
+import type { TresContext } from '../composables/index.js'
+import type { DisposeType, LocalState, TresInstance, TresObject, TresObject3D, TresPrimitive, WithMathProps } from '../types/index.js'
 import { BufferAttribute, Object3D } from 'three'
 import { isRef, type RendererOptions } from 'vue'
-import { useLogger } from '../composables'
-import { attach, deepArrayEqual, doRemoveDeregister, doRemoveDetach, invalidateInstance, isHTMLTag, kebabToCamel, noop, prepareTresInstance, setPrimitiveObject, unboxTresPrimitive } from '../utils'
-import * as is from '../utils/is'
-import { createRetargetingProxy } from '../utils/primitive/createRetargetingProxy'
-import { catalogue } from './catalogue'
+import { useLogger } from '../composables/useLogger.js'
+import { attach, deepArrayEqual, doRemoveDeregister, doRemoveDetach, invalidateInstance, isHTMLTag, kebabToCamel, noop, prepareTresInstance, setPrimitiveObject, unboxTresPrimitive } from '../utils/index.js'
+import * as is from '../utils/is.js'
+import { createRetargetingProxy } from '../utils/primitive/createRetargetingProxy.js'
+import { catalogue } from './catalogue.js'
 
 const { logError } = useLogger()
 

src/devtools/index.ts

@@ -1 +1 @@
-export { registerTresDevtools } from './plugin'
+export { registerTresDevtools } from './plugin.js'

src/devtools/plugin.ts

@@ -1,17 +1,17 @@
 import type {
   App as DevtoolsApp,
 } from '@vue/devtools-api'
-import type { TresContext } from '../composables'
-import type { TresObject } from './../types'
+import type { TresContext } from '../composables/index.js'
+import type { TresObject } from '../types/index.js'
 import {
   setupDevtoolsPlugin,
 } from '@vue/devtools-api'
 import { Color, type Mesh } from 'three'
 import { reactive } from 'vue'
-import { createHighlightMesh, editSceneObject } from '../utils'
-import * as is from '../utils/is'
-import { bytesToKB, calculateMemoryUsage } from '../utils/perf'
-import { toastMessage } from './utils'
+import { createHighlightMesh, editSceneObject } from '../utils/index.js'
+import * as is from '../utils/is.js'
+import { bytesToKB, calculateMemoryUsage } from '../utils/perf.js'
+import { toastMessage } from './utils.js'
 
 export interface Tags {
   label: string

src/directives/index.ts

@@ -1,5 +1,5 @@
-import { vDistanceTo } from './vDistanceTo'
-import { vLightHelper } from './vLightHelper'
-import { vLog } from './vLog'
+import { vDistanceTo } from './vDistanceTo.js'
+import { vLightHelper } from './vLightHelper.js'
+import { vLog } from './vLog.js'
 
 export { vDistanceTo, vLightHelper, vLog }

src/directives/vDistanceTo.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'vue'
-import type { TresObject } from '../types'
+import type { TresObject } from '../types/index.js'
 import { ArrowHelper } from 'three'
-import { useLogger } from '../composables'
-import { extractBindingPosition } from '../utils'
+import { useLogger } from '../composables/index.js'
+import { extractBindingPosition } from '../utils/index.js'
 
 const { logWarning } = useLogger()
 

src/directives/vLightHelper.ts

@@ -1,7 +1,7 @@
 import type {
   Light,
 } from 'three'
-import type { TresObject } from '../types'
+import type { TresObject } from '../types/index.js'
 import {
   DirectionalLightHelper,
   HemisphereLightHelper,
@@ -9,7 +9,7 @@ import {
   SpotLightHelper,
 } from 'three'
 import { RectAreaLightHelper } from 'three-stdlib'
-import { useLogger } from '../composables'
+import { useLogger } from '../composables/index.js'
 
 const { logWarning } = useLogger()
 

src/directives/vLog.ts

@@ -1,4 +1,4 @@
-import type { TresObject } from '../types'
+import type { TresObject } from '../types/index.js'
 
 export const vLog = {
   mounted: (el: TresObject, binding: { arg: string }) => {

src/index.ts

@@ -1,15 +1,15 @@
 import type { App } from 'vue'
 import TresCanvas from './components/TresCanvas.vue'
-import { disposeObject3D as dispose } from './utils'
-import { normalizeColor, normalizeVectorFlexibleParam } from './utils/normalize'
-import templateCompilerOptions from './utils/template-compiler-options'
+import { disposeObject3D as dispose } from './utils/index.js'
+import { normalizeColor, normalizeVectorFlexibleParam } from './utils/normalize.js'
+import templateCompilerOptions from './utils/template-compiler-options.js'
 
-export * from './components'
-export * from './composables'
-export * from './core/catalogue'
-export * from './core/loop'
-export * from './directives'
-export * from './types'
+export * from './components/index.js'
+export * from './composables/index.js'
+export * from './core/catalogue.js'
+export * from './core/loop.js'
+export * from './directives/index.js'
+export * from './types/index.js'
 
 export interface TresOptions {
   extends?: Record<string, unknown>
@@ -35,4 +35,4 @@ export {
   templateCompilerOptions,
 }
 
-export type { VectorFlexibleParams } from './utils/normalize'
+export type { VectorFlexibleParams } from './utils/normalize.js'

src/types/index.ts

@@ -2,7 +2,7 @@
 import type * as THREE from 'three'
 
 import type { DefineComponent, VNode, VNodeRef } from 'vue'
-import type { TresContext } from '../composables/useTresContextProvider'
+import type { TresContext } from '../composables/useTresContextProvider/index.js'
 
 // Based on React Three Fiber types by Pmndrs
 // https://github.com/pmndrs/react-three-fiber/blob/v9/packages/fiber/src/three-types.ts

src/utils/index.ts

@@ -1,10 +1,10 @@
-import type { nodeOps } from 'src/core/nodeOps'
-import type { AttachType, LocalState, TresInstance, TresObject, TresPrimitive } from 'src/types'
+import type { nodeOps } from '../core/nodeOps.js'
+import type { AttachType, LocalState, TresInstance, TresObject, TresPrimitive } from '../types/index.js'
 import type { Material, Mesh, Object3D, Texture } from 'three'
-import type { TresContext } from '../composables/useTresContextProvider'
+import type { TresContext } from '../composables/useTresContextProvider/index.js'
 import { DoubleSide, MathUtils, MeshBasicMaterial, Scene, Vector3 } from 'three'
-import { HightlightMesh } from '../devtools/highlight'
-import * as is from './is'
+import { HightlightMesh } from '../devtools/highlight.js'
+import * as is from './is.js'
 
 export function toSetMethodName(key: string) {
   return `set${key[0].toUpperCase()}${key.slice(1)}`

src/utils/is.ts

@@ -1,4 +1,4 @@
-import type { TresObject, TresPrimitive } from 'src/types'
+import type { TresObject, TresPrimitive } from '../types/index.js'
 import type { BufferGeometry, Camera, Fog, Light, Material, Object3D, Scene } from 'three'
 
 export function und(u: unknown) {

src/utils/perf.ts

@@ -1,5 +1,5 @@
 import type { Scene } from 'three'
-import type { TresObject } from './../types'
+import type { TresObject } from '../types/index.js'
 
 export function calculateMemoryUsage(object: TresObject | Scene) {
   let totalMemory = 0

src/utils/primitive/createRetargetingProxy.ts

@@ -23,7 +23,7 @@ export function createRetargetingProxy<T extends Record<string | number | symbol
     },
     set(_: any, prop: K, val: T[K]) {
       if (setters[prop]) {
-        setters[prop](val, _target, proxy, setTarget)
+        setters[prop]?.(val, _target, proxy, setTarget)
       }
       else {
         _target[prop] = val