feat: mighty sexy runtime types

Tresjs · May 20, 2023 · 97a5b64 · 97a5b64
1 parent 7bc558e
commit 97a5b64
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 469 deletions.
diff --git a/plugins/vite-tres-types-plugin.ts b/plugins/vite-tres-types-plugin.ts
diff --git a/src/components/TresScene.ts b/src/components/TresScene.ts
@@ -1,6 +1,8 @@
-import { App, defineComponent, h, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
+import { App, defineComponent, h, onMounted, onUnmounted, ref, watch, watchEffect, VNode } from 'vue'
 import * as THREE from 'three'
 import { ColorSpace, ShadowMapType, ToneMapping } from 'three'
+import { useEventListener } from '@vueuse/core'
+import { isString } from '@alvarosabu/utils'
 import { createTres } from '../core/renderer'
 import {
   CameraType,
@@ -14,10 +16,6 @@ import {
 } from '../composables'
 import { extend } from '../core/catalogue'
 import { type RendererPresetsType } from '../composables/useRenderer/const'
-import { TresEvent, TresObject } from '../types'
-import { useEventListener } from '@vueuse/core'
-import { isString } from '@alvarosabu/utils'
-import { VNode } from 'vue'
 
 export interface TresSceneProps {
   shadows?: boolean
@@ -108,8 +106,9 @@ export const TresScene = defineComponent<TresSceneProps>({
 
       const { raycaster, pointer } = useRaycaster()
 
-      let prevInstance: TresEvent | null = null
-      let currentInstance: TresEvent | null = null
+      // TODO: Type raycasting events correctly
+      let prevInstance: any = null
+      let currentInstance: any = null
 
       watchEffect(() => {
         if (activeCamera.value) raycaster.value.setFromCamera(pointer.value, activeCamera.value)
@@ -150,7 +149,7 @@ export const TresScene = defineComponent<TresSceneProps>({
       app.provide('useTres', useTres())
       app.provide(TRES_CONTEXT_KEY, useTres())
       app.provide('extend', extend)
-      app.mount(scene as unknown as TresObject)
+      app.mount(scene as unknown)
     }
     mountApp()
 

diff --git a/src/core/catalogue.ts b/src/core/catalogue.ts
@@ -1,8 +1,7 @@
-import { MathUtils } from 'three'
 import { Ref, ref } from 'vue'
 import { TresCatalogue } from '../types'
 
-export const catalogue: Ref<TresCatalogue> = ref({ uuid: MathUtils.generateUUID() })
+export const catalogue: Ref<TresCatalogue> = ref({})
 
 export const extend = (objects: any) => void Object.assign(catalogue.value, objects)
 

diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
@@ -1,9 +1,9 @@
 import { RendererOptions } from 'vue'
-import { BufferAttribute, BufferGeometry, Material, Object3D } from 'three'
+import { BufferAttribute, BufferGeometry, Material } from 'three'
 import { useCamera, useLogger } from '../composables'
 import { isFunction } from '@alvarosabu/utils'
 import { catalogue } from './catalogue'
-import { TresInstance, TresObject } from '../types'
+import { EventHandlers, TresObject } from '../types'
 import { isHTMLTag, kebabToCamel } from '../utils'
 
 const onRE = /^on[^a-z]/
@@ -37,7 +37,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
 
     if (tag === 'primitive') {
       if (props?.object === undefined) logError(`Tres primitives need a prop 'object'`)
-      const object = props.object as TresInstance
+      const object = props.object as TresObject
       name = object.type
       instance = Object.assign(object, { type: name, attach: props.attach, primitive: true })
     } else {
@@ -70,8 +70,8 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     const { GEOMETRY_VIA_PROP, MATERIAL_VIA_PROP } = OBJECT_3D_USER_DATA_KEYS
 
     if (instance.isObject3D) {
-      if (props?.material?.isMaterial) (instance as Object3D).userData[MATERIAL_VIA_PROP] = true
-      if (props?.geometry?.isBufferGeometry) (instance as Object3D).userData[GEOMETRY_VIA_PROP] = true
+      if (props?.material?.isMaterial) (instance as TresObject).userData[MATERIAL_VIA_PROP] = true
+      if (props?.geometry?.isBufferGeometry) (instance as TresObject).userData[GEOMETRY_VIA_PROP] = true
     }
 
     instance.events = {}
@@ -98,7 +98,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     } else if (child?.isFog) {
       parent.fog = child
     } else if (typeof child?.attach === 'string') {
-      child.__previousAttach = child[parent?.attach]
+      child.__previousAttach = child[parent?.attach as string]
       if (parent) {
         parent[child.attach] = child
       }
@@ -109,17 +109,17 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     // remove is only called on the node being removed and not on child nodes.
 
     if (node.isObject3D) {
-      const object3D = node as unknown as Object3D
+      const object3D = node as unknown as TresObject
 
-      const disposeMaterialsAndGeometries = (object3D: Object3D) => {
+      const disposeMaterialsAndGeometries = (object3D: TresObject) => {
         const { GEOMETRY_VIA_PROP, MATERIAL_VIA_PROP } = OBJECT_3D_USER_DATA_KEYS
 
-        if (!object3D.userData[MATERIAL_VIA_PROP]) (object3D as Object3D & { material: Material }).material?.dispose()
+        if (!object3D.userData[MATERIAL_VIA_PROP]) (object3D as TresObject & { material: Material }).material?.dispose()
         if (!object3D.userData[GEOMETRY_VIA_PROP])
-          (object3D as Object3D & { geometry: BufferGeometry }).geometry?.dispose()
+          (object3D as TresObject & { geometry: BufferGeometry }).geometry?.dispose()
       }
 
-      object3D.traverse(child => disposeMaterialsAndGeometries(child))
+      object3D.traverse((child: TresObject) => disposeMaterialsAndGeometries(child))
 
       disposeMaterialsAndGeometries(object3D)
     }
@@ -153,7 +153,8 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
         if (!target?.set) root = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
       }
       if (isOn(key)) {
-        node.events[key] = nextValue
+        const eventHandlerKey: keyof EventHandlers = key as keyof EventHandlers // This is fine
+        node.events[eventHandlerKey] = nextValue
       }
       let value = nextValue
       if (value === '') value = true