fix: 785 vscode intellisense autocompletion not getting tres components props (#809)

* ci: use checkout action  v4

* fix(types): remove generic from VueProps and Vnodes

* chore(lint): disable annoying lint issues

* fix: remove props overwrite to any on instance props type

* fix(types): solved issue with vector and math representation types

* fix(types): keep the export inside of the global namespace

.github/workflows/pkg.pr.new.yml

@@ -25,7 +25,7 @@ jobs:
         node-version: [20]
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - run: corepack enable
       - uses: actions/setup-node@v4

docs/advanced/performance.md

@@ -143,10 +143,9 @@ To avoid errors and unwanted sideeffects, resources created programatically with
   import { dispose } from '@tresjs/core'
   import { useGLTF } from '@tresjs/cientos'
 
-  const { nodes } = await useGLTF(
-    'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb',
-    { draco: true },
-  )
+  const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', {
+    draco: true,
+  })
   const model = nodes.Cube
 
   onUnmounted(() => {

docs/advanced/primitive.md

@@ -32,11 +32,7 @@ The same pointer events available on the TresJS components are available on the
 
 ```html
 <template>
-  <primitive
-    :object="meshWithMaterial"
-    @click="onClick"
-    @pointermove="onPointerMove"
-  />
+  <primitive :object="meshWithMaterial" @click="onClick" @pointermove="onPointerMove" />
 </template>
 ```
 

package.json

@@ -78,22 +78,22 @@
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",
     "@stackblitz/sdk": "^1.11.0",
-    "@tresjs/cientos": "3.9.0",
+    "@tresjs/cientos": "4.0.2",
     "@tresjs/eslint-config": "^1.1.0",
-    "@types/three": "^0.166.0",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
+    "@types/three": "^0.168.0",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitest/coverage-c8": "^0.33.0",
     "@vitest/coverage-v8": "^2.0.2",
     "@vitest/ui": "^2.0.2",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.6.0",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vue": "^9.28.0",
     "esno": "^4.7.0",
     "gsap": "^3.12.5",
     "husky": "^9.0.11",
-    "jsdom": "^24.1.0",
+    "jsdom": "^25.0.0",
     "kolorist": "^1.8.0",
     "ohmyfetch": "^0.4.21",
     "pathe": "^1.1.2",
@@ -101,20 +101,20 @@
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sponsorkit": "^0.14.6",
-    "three": "^0.166.1",
-    "unocss": "^0.61.3",
-    "unplugin": "^1.11.0",
+    "sponsorkit": "^0.15.4",
+    "three": "^0.168.0",
+    "unocss": "^0.62.3",
+    "unplugin": "^1.13.1",
     "unplugin-vue-components": "^0.27.2",
-    "vite": "^5.3.3",
-    "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "3.9.1",
+    "vite": "^5.4.3",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-dts": "4.1.0",
     "vite-plugin-inspect": "^0.8.4",
     "vite-plugin-require-transform": "^1.0.21",
     "vite-svg-loader": "^5.1.0",
-    "vitepress": "1.3.0",
+    "vitepress": "1.3.4",
     "vitest": "^2.0.2",
-    "vue": "^3.4.31",
+    "vue": "3.5.0",
     "vue-demi": "^0.14.8"
   }
 }

playground/.eslintrc-auto-import.json

@@ -1,67 +0,0 @@
-{
-  "globals": {
-    "Component": true,
-    "ComponentPublicInstance": true,
-    "ComputedRef": true,
-    "EffectScope": true,
-    "ExtractDefaultPropTypes": true,
-    "ExtractPropTypes": true,
-    "ExtractPublicPropTypes": true,
-    "InjectionKey": true,
-    "PropType": true,
-    "Ref": true,
-    "VNode": true,
-    "WritableComputedRef": true,
-    "computed": true,
-    "createApp": true,
-    "customRef": true,
-    "defineAsyncComponent": true,
-    "defineComponent": true,
-    "effectScope": true,
-    "getCurrentInstance": true,
-    "getCurrentScope": true,
-    "h": true,
-    "inject": true,
-    "isProxy": true,
-    "isReactive": true,
-    "isReadonly": true,
-    "isRef": true,
-    "markRaw": true,
-    "nextTick": true,
-    "onActivated": true,
-    "onBeforeMount": true,
-    "onBeforeUnmount": true,
-    "onBeforeUpdate": true,
-    "onDeactivated": true,
-    "onErrorCaptured": true,
-    "onMounted": true,
-    "onRenderTracked": true,
-    "onRenderTriggered": true,
-    "onScopeDispose": true,
-    "onServerPrefetch": true,
-    "onUnmounted": true,
-    "onUpdated": true,
-    "provide": true,
-    "reactive": true,
-    "readonly": true,
-    "ref": true,
-    "resolveComponent": true,
-    "shallowReactive": true,
-    "shallowReadonly": true,
-    "shallowRef": true,
-    "toRaw": true,
-    "toRef": true,
-    "toRefs": true,
-    "toValue": true,
-    "triggerRef": true,
-    "unref": true,
-    "useAttrs": true,
-    "useCssModule": true,
-    "useCssVars": true,
-    "useSlots": true,
-    "watch": true,
-    "watchEffect": true,
-    "watchPostEffect": true,
-    "watchSyncEffect": true
-  }
-}

playground/components.d.ts

@@ -1,13 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-  }
-}

playground/vue/.eslintrc-auto-import.json

@@ -4,6 +4,9 @@
     "ComponentPublicInstance": true,
     "ComputedRef": true,
     "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
     "InjectionKey": true,
     "PropType": true,
     "Ref": true,
@@ -59,9 +62,6 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "ExtractDefaultPropTypes": true,
-    "ExtractPropTypes": true,
-    "ExtractPublicPropTypes": true
+    "watchSyncEffect": true
   }
 }

playground/vue/package.json

@@ -9,17 +9,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "3.9.0",
+    "@tresjs/cientos": "4.0.2",
     "@tresjs/core": "workspace:^",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@tresjs/leches": "0.15.0-next.3",
     "@tweakpane/plugin-essentials": "^0.2.0",
-    "unplugin-auto-import": "^0.18.0",
+    "unplugin-auto-import": "^0.18.2",
     "vite-plugin-glsl": "^1.2.1",
     "vite-plugin-qrcode": "^0.2.3",
-    "vite-plugin-vue-devtools": "7.3.5",
-    "vue-tsc": "^2.0.26"
+    "vite-plugin-vue-devtools": "7.4.3",
+    "vue-tsc": "^2.1.4"
   }
 }

playground/vue/src/pages/basic/index.vue

@@ -53,10 +53,9 @@ const toonTealMaterial = new MeshToonMaterial({
     v-if="sphereExists"
     ref="canvasRef"
     v-bind="state"
-    @render="onRender"
   >
     <TresPerspectiveCamera
-      :position="[11, 11, 11]"
+      :position="[0, 8, 8]"
       :fov="45"
       :near="0.1"
       :far="1000"

playground/vue/src/pages/issues/701/TheExperience.vue

@@ -81,6 +81,7 @@ const tOrFFast = shallowRef(false)
 const elapsed = shallowRef(0)
 
 const pool: {
+  // eslint-disable-next-line ts/no-unsafe-function-type
   click: Function
   pos: number[]
   group: Group

playground/vue/tsconfig.json

@@ -7,7 +7,7 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "paths": {
-      "@tresjs/core": ["../../dist"]
+      "@tresjs/core": ["../../src"]
     },
     "resolveJsonModule": true,
     "strict": true,

src/composables/useLogger.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/consistent-function-scoping */
 /* eslint-disable no-console */
 export const isProd = import.meta.env.MODE === 'production'
 

src/composables/useTresEventManager/index.ts

@@ -1,3 +1,5 @@
+/* eslint-disable ts/no-unsafe-function-type */
+/* eslint-disable unicorn/consistent-function-scoping */
 import { shallowRef } from 'vue'
 import type { Object3D, Object3DEventMap, Scene } from 'three'
 import type { EmitEventFn, EmitEventName, Intersection, TresEvent, TresInstance, TresObject } from 'src/types'

src/core/nodeOps.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/consistent-function-scoping */
 import { beforeAll, describe, expect, it, vi } from 'vitest'
 import * as THREE from 'three'
 import type { Vector3 } from 'three'
@@ -867,7 +868,9 @@ describe('nodeOps', () => {
               try {
                 node.dispose()
               }
-              catch (e) {}
+              catch (e) {
+                console.error(e)
+              }
             }
             if (node.material) { node.material.dispose() }
             if (node.geometry) { node.geometry.dispose() }
@@ -1626,9 +1629,9 @@ function createSimpleMeshPrimitiveTree(nodeOps) {
   const nodes = []
   const objects = []
   const spiesByKey: Partial<Record<
-            keyof typeof nodesByKey,
-            { material: () => void, geometry: () => void }
-          >> = { }
+    keyof typeof nodesByKey,
+    { material: () => void, geometry: () => void }
+  >> = { }
   const spies = []
   const undisposed = new Set()
   for (const [key, node] of Object.entries(nodesByKey)) {

src/core/nodeOps.ts

@@ -219,6 +219,7 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
         try {
           node.dispose()
         }
+        // eslint-disable-next-line unused-imports/no-unused-vars
         catch (e) {
           // NOTE: We must try/catch here. We want to remove/dispose
           // Vue/THREE children in bottom-up order. But THREE objects
@@ -342,6 +343,7 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
     invalidateInstance(node as TresObject)
   }
 
+  /* eslint-disable unicorn/consistent-function-scoping */
   function parentNode(node: TresObject): TresObject | null {
     return node?.__tres?.parent || null
   }

src/env.d.ts

@@ -9,6 +9,7 @@ declare module '*.vue' {
 
 interface Window {
   __TRES__DEVTOOLS__?: {
+    // eslint-disable-next-line ts/no-unsafe-function-type
     cb: Function
     // You can add other properties of __TRES__DEVTOOLS__ here if needed
   }

src/types/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable ts/method-signature-style */
 import type { DefineComponent, VNode, VNodeRef } from 'vue'
 
 import type * as THREE from 'three'
@@ -11,6 +12,7 @@ export type AttachType = string | AttachFnType
 export type DisposeType = ((self: TresInstance) => void) | boolean | 'default'
 
 export type ConstructorRepresentation = new (...args: any[]) => any
+// eslint-disable-next-line ts/no-unsafe-function-type
 export type NonFunctionKeys<P> = { [K in keyof P]-?: P[K] extends Function ? never : K }[keyof P]
 export type Overwrite<P, O> = Omit<P, NonFunctionKeys<O>> & O
 export type Properties<T> = Pick<T, NonFunctionKeys<T>>
@@ -25,12 +27,17 @@ export type EmitEventName = 'render' | 'ready' | 'click' | 'double-click' | 'con
 export type EmitEventFn = (event: EmitEventName, ...args: any[]) => void
 export type TresCamera = THREE.OrthographicCamera | THREE.PerspectiveCamera
 
+/**
+ * Represents the properties of an instance.
+ *
+ * @template T - The type of the object.
+ * @template P - The type of the arguments.
+ */
 export interface InstanceProps<T = any, P = any> {
   args?: Args<P>
   object?: T
   visible?: boolean
   dispose?: null
-  [prop: string]: any
 }
 
 interface TresBaseObject {
@@ -155,10 +162,10 @@ export interface EventHandlers {
 }
 
 interface MathRepresentation {
-  set: (...args: number[] | [THREE.ColorRepresentation]) => any
+  set(...args: number[] | [THREE.ColorRepresentation]): any
 }
 interface VectorRepresentation extends MathRepresentation {
-  setScalar: (s: number) => any
+  setScalar(s: number): any
 }
 
 export interface VectorCoordinates {
@@ -195,14 +202,14 @@ interface RaycastableRepresentation {
 }
 type EventProps<P> = P extends RaycastableRepresentation ? Partial<EventHandlers> : unknown
 
-export interface VueProps<P> {
-  children?: VNode<P>[]
+export interface VueProps {
+  children?: VNode[]
   ref?: VNodeRef
   key?: string | number | symbol
 }
 
 type ElementProps<T extends ConstructorRepresentation, P = InstanceType<T>> = Partial<
-  Overwrite<WithMathProps<P>, VueProps<P> & EventProps<P>>
+  Overwrite<P, WithMathProps<P> & VueProps & EventProps<P>>
 >
 
 export type ThreeElement<T extends ConstructorRepresentation> = Mutable<

src/utils/createPriorityEventHook.test.ts

@@ -1,3 +1,4 @@
+/* eslint-disable unicorn/consistent-function-scoping */
 import { createPriorityEventHook } from './createPriorityEventHook'
 
 let updateHook = createPriorityEventHook()

src/utils/index.ts

@@ -451,7 +451,7 @@ export function invalidateInstance(instance: TresObject) {
 }
 
 export function noop(fn: string): any {
-  // eslint-disable-next-line no-unused-expressions
+  // eslint-disable-next-line ts/no-unused-expressions
   fn
 }
 

src/utils/is.ts

@@ -21,6 +21,7 @@ export function bool(u: unknown): u is boolean {
   return u === true || u === false
 }
 
+// eslint-disable-next-line ts/no-unsafe-function-type
 export function fun(u: unknown): u is Function {
   return typeof u === 'function'
 }