fix(core): fixed type issues

packages/tres/src/components/TresCanvas.ts

@@ -1,10 +1,10 @@
-import { defineComponent, h, PropType, provide, ref, watch } from 'vue'
+import { defineComponent, h, PropType, ref, watch } from 'vue'
 /* eslint-disable vue/one-component-per-file */
 import * as THREE from 'three'
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
-/* import { OrbitControls } from '@tresjs/cientos' */
 import { createTres } from '/@/core/renderer'
-import { useCamera, useRenderer, useTres, useRenderLoop, useRaycaster } from '/@/composables'
+import { useCamera, useRenderer, useRenderLoop, useRaycaster } from '/@/composables'
+import { TresObject } from '/@/types'
 
 export const TresCanvas = defineComponent({
   name: 'TresCanvas',
@@ -34,35 +34,13 @@ export const TresCanvas = defineComponent({
   setup(props, { slots, expose }) {
     const container = ref<HTMLElement>()
     const canvas = ref<HTMLCanvasElement>()
-    /*   const { state, setState } = useTres() */
 
-    /* const { renderer, aspectRatio } = useRenderer(canvas, container, props) */
-    /*    const { activeCamera } = useCamera()
-
-    provide('aspect-ratio', aspectRatio)
-    provide('renderer', renderer) */
     watch(canvas, () => {
-      const { renderer, aspectRatio } = useRenderer(canvas, container, props)
+      const { renderer } = useRenderer(canvas, container, props)
       const { activeCamera } = useCamera()
 
-      /*  provide('aspect-ratio', aspectRatio)
-      provide('renderer', renderer) */
-
-      /* const controls = new OrbitControls(camera, renderer.domElement)
-        controls.enableDamping = true */
-
       const scene = new THREE.Scene()
 
-      /*    window.addEventListener('resize', () => {
-        renderer.setSize(window.innerWidth, window.innerHeight)
-        camera.aspect = window.innerWidth / window.innerHeight
-        camera.updateProjectionMatrix()
-      })
-
-      renderer.setAnimationLoop(() => {
-        renderer.render(scene, camera)
-      }) */
-
       const { onLoop } = useRenderLoop()
 
       const { raycaster, pointer } = useRaycaster()
@@ -74,20 +52,18 @@ export const TresCanvas = defineComponent({
         renderer.value?.render(scene, activeCamera.value)
       })
 
-      const internal = slots?.default() || []
+      const internal = slots.default ? slots?.default() : [] || []
 
       const internalComponent = defineComponent({
-        name: 'Wrapper',
+        __name: 'tres-wrapper',
+        __scopeId: 'data-v-tres-supreme',
         setup() {
           return () => internal
         },
       })
 
       const app = createTres(internalComponent)
-      app.mount(scene)
-
-      console.log(scene)
-
+      app.mount(scene as unknown as TresObject)
       expose({
         scene,
         app,

packages/tres/src/composables/index.ts

@@ -1,6 +1,4 @@
 export * from './useCamera'
-export * from './useCatalogue'
-export * from './useInstanceCreator'
 export * from './useRenderLoop/'
 export * from './useRenderer/'
 export * from './useScene/'

packages/tres/src/composables/useCamera/index.ts

@@ -1,7 +1,7 @@
 import { useTres } from '/@/composables/'
 import { PerspectiveCamera, OrthographicCamera } from 'three'
 
-import { toRef, watch, Ref, inject, watchEffect } from 'vue'
+import { toRef, Ref, watchEffect } from 'vue'
 
 export enum CameraType {
   Perspective = 'Perspective',

packages/tres/src/composables/useCatalogue/index.ts

@@ -1,69 +0,0 @@
-import { App, ref, Component, Ref } from 'vue'
-import * as THREE from 'three'
-import { useInstanceCreator } from '/@/composables'
-import { useLogger } from '../../iternal'
-import { TresCatalogue } from '/@/types'
-
-const catalogue: Ref<TresCatalogue> = ref({ ...THREE, uuid: THREE.MathUtils.generateUUID() })
-
-delete catalogue.value.Scene
-
-let localApp: App
-
-/**
- * State for the catalogue of THREE objects
- *
- * ```ts
- * const { catalogue } = useCatalogue()
- *
- * console.log(catalogue.value.Mesh) // Mesh
- * ```
- *
- * @export
- * @param {App} [app]
- * @param {string} [prefix='Tres']
- * @return {*}
- */
-export function useCatalogue(app?: App, prefix = 'Tres') {
-  const { logError } = useLogger()
-  if (!localApp && app) {
-    localApp = app
-  }
-  const { createComponentInstances } = useInstanceCreator(prefix)
-
-  /**
-   * Extend the catalogue with new THREE objects
-   *
-   * ```ts
-   * const { catalog, extend } = useCatalogue()
-   *
-   * extend({ MyObject: { foo: 'bar' } })
-   *
-   * console.log(catalog.value.MyObject.foo) // bar
-   * ```
-   *
-   * @param {*} objects
-   */
-  const extend = (objects: any) => {
-    if (!objects) {
-      logError('No objects provided to extend catalogue')
-      return
-    }
-    catalogue.value = Object.assign(catalogue.value, objects)
-    const components = createComponentInstances(ref(objects))
-
-    if (localApp) {
-      components.forEach(([key, cmp]) => {
-        // If the component is not already registered, register it
-        if (!localApp._context.components[key as string]) {
-          localApp.component(key as string, cmp as Component)
-        }
-      })
-    }
-  }
-
-  return {
-    extend,
-    catalogue,
-  }
-}

packages/tres/src/composables/useCatalogue/useCatalogue.test.ts

@@ -1,28 +0,0 @@
-import { createApp } from 'vue'
-import { withSetup } from '/@/utils/test-utils'
-import { useCatalogue } from './'
-const [composable, app] = withSetup(() => useCatalogue())
-
-describe('useCatalogue', () => {
-  it('should fill the catalogue with THREE objects', () => {
-    const { catalogue } = composable
-
-    expect(catalogue.value).toHaveProperty('Mesh')
-    expect(catalogue.value).toHaveProperty('MeshBasicMaterial')
-  })
-  it('should skip Scene object', () => {
-    const { catalogue } = composable
-
-    expect(catalogue.value).not.toHaveProperty('Scene')
-  })
-  it('should extend the catalogue with objects', () => {
-    const app = createApp({})
-    const { extend, catalogue } = useCatalogue(app)
-
-    extend({ MyObject: { foo: 'bar' } })
-
-    expect(catalogue.value.MyObject.foo).toEqual('bar')
-  })
-
-  // TODO: find a way to mock createComponentInstances to test the component registration
-})

packages/tres/src/composables/useInstanceCreator/index.ts

@@ -1,348 +0,0 @@
-/* eslint-disable new-cap */
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { BufferAttribute, Fog, FogBase, Mesh, OrthographicCamera, PerspectiveCamera } from 'three'
-import { defineComponent, inject, onUnmounted, Ref } from 'vue'
-import { useEventListener } from '@vueuse/core'
-
-import { isArray, isDefined, isFunction } from '@alvarosabu/utils'
-import { normalizeVectorFlexibleParam } from '/@/utils/normalize'
-import { useCamera, useCatalogue, useRenderLoop, useTres } from '/@/composables/'
-import { useLogger } from '../../iternal'
-import { TresAttributes, TresCatalogue, TresInstance, TresVNode, TresVNodeType, TresEvent } from '/@/types'
-
-const VECTOR3_PROPS = ['rotation', 'scale', 'position']
-const VECTOR3_AXIS = ['X', 'Y', 'Z']
-const COLOR_PROPS = ['color']
-const COLOR_KEYS = ['r', 'g', 'b']
-
-/**
- * Composable responsible for creating instances out of Three.js objects.
- *
- * @export
- * @param {string} prefix
- * @return {*}
- */
-export function useInstanceCreator(prefix: string) {
-  const { /* logMessage, */ logError } = useLogger()
-
-  /**
-   * Process props to `.setAttribute` on instance.
-   *
-   * @example `position` prop will be converted to `setPosition` method call.
-   *
-   * @param {Record<string, any>} props
-   * @param {TresInstance} instance
-   */
-  function processSetAttributes(props: Record<string, any>, instance: TresInstance) {
-    if (!isDefined(props)) return
-    if (!isDefined(instance)) return
-
-    Object.entries(props).forEach(([key, value]) => {
-      const camelKey = key.replace(/(-\w)/g, m => m[1].toUpperCase())
-      instance.setAttribute(camelKey, new BufferAttribute(...(value as ConstructorParameters<typeof BufferAttribute>)))
-    })
-  }
-
-  /**
-   *  Process props to set properties on instance.
-   *
-   * It will also normalize vector3 props and check if the instances property has a `set` method.
-   * If it does, it will call the `set` method with the value, spread if it's an array.
-   *
-   * @example `position=[0,0,0]` prop will be converted to `instance.position.set(0,0,0)` property.
-   *
-   * @param {Record<string, any>} props
-   * @param {TresInstance} instance
-   */
-  function processProps(props: Record<string, any>, instance: TresInstance) {
-    if (!isDefined(props)) return
-    if (!isDefined(instance)) return
-
-    Object.entries(props).forEach(([key, value]) => {
-      const camelKey = key.replace(/(-\w)/g, m => m[1].toUpperCase())
-      let transformProps
-      let transformAxis
-      let colorProps
-      let colorKey
-      // Ignore property args which is use for initial instance construction
-      if (camelKey === 'args' || value === undefined) return
-
-      // Normalize vector3 props
-      if (VECTOR3_PROPS.includes(camelKey) && value) {
-        value = normalizeVectorFlexibleParam(value)
-      } else {
-        VECTOR3_PROPS.forEach(vecProps => {
-          // Check if the props starts with one of the transform props
-          // and is followed only with one of the axis
-          if (camelKey.startsWith(vecProps) && camelKey.length === vecProps.length + 1) {
-            transformProps = vecProps
-            transformAxis = camelKey.substring(vecProps.length)
-            if (!VECTOR3_AXIS.includes(transformAxis)) {
-              logError(
-                // eslint-disable-next-line max-len
-                `There was an error setting ${key} property, ${transformAxis} is not a valid axis for ${transformProps}`,
-              )
-            }
-          }
-        })
-      }
-      COLOR_PROPS.forEach(props => {
-        // Check if the props starts with one of the color props
-        // and is followed only with one of the key
-        if (camelKey.startsWith(props) && camelKey.length === props.length + 1) {
-          colorProps = props
-          colorKey = camelKey.substring(props.length).toLowerCase()
-          if (!COLOR_KEYS.includes(colorKey)) {
-            logError(`There was an error setting ${key} property , ${colorKey} is not a valid axis for ${colorProps}`)
-          }
-        }
-      })
-
-      if (props.ref) {
-        props.ref = instance
-      }
-
-      try {
-        // Check if the property has a "set" method
-        if (instance[camelKey] && isDefined(instance[camelKey].set)) {
-          // Call the "set" method with the value, spread if it's an array
-          instance[camelKey].set(...(isArray(value) ? value : [value]))
-        } else if (
-          // Check if the property has a "setAxis" method
-          transformProps &&
-          instance[transformProps]
-        ) {
-          // Check if setAxis function exist
-          // if it doesn't check if props is rotation
-          if (isDefined(instance[transformProps][`set${transformAxis}`])) {
-            instance[transformProps][`set${transformAxis}`](value)
-          } else if (isDefined(instance[`rotate${transformAxis}`])) {
-            instance[`rotate${transformAxis}`](value)
-          }
-        } else if (
-          // Check if the instance has a "color" property
-          colorProps &&
-          colorKey &&
-          instance[colorProps] &&
-          instance[colorProps][colorKey]
-        ) {
-          instance[colorProps][colorKey] = value
-        } else {
-          // Convert empty strings to `true`
-          if (value === '') {
-            value = true
-          }
-
-          // Check if the property is a function
-          if (isFunction(instance[camelKey])) {
-            if (key === 'center' && !value) return
-            // Call the function with the value, spread if it's an array
-            instance[camelKey](...(isArray(value) ? value : [value]))
-            return
-          }
-
-          // Set the property to the value
-          instance[camelKey] = value
-        }
-      } catch (error: unknown) {
-        logError(`There was an error setting ${camelKey} property`, error as Error)
-      }
-    })
-  }
-
-  /**
-   * Proccess slots to add children to instance.
-   *
-   * @param {TresVNode} vnode
-   * @return {*}  {(TresInstance | TresInstance[] | undefined)}
-   */
-  function createInstanceFromVNode(vnode: TresVNode): TresInstance | TresInstance[] | undefined {
-    const fragmentRegex = /^Symbol\(Fragment\)$/g
-    const textRegex = /^Symbol\(Text\)$/g
-    const commentRegex = /^Symbol\(Comment\)$/g
-    // Check if the vnode is a Fragment
-    if (fragmentRegex.test(vnode.type.toString())) {
-      return vnode.children.map(child => createInstanceFromVNode(child as TresVNode)) as TresInstance[]
-    } else if (textRegex.test(vnode.type.toString()) || commentRegex.test(vnode.type.toString())) {
-      return
-    } else {
-      const vNodeType = ((vnode.type as TresVNodeType).name as string).replace(prefix, '')
-
-      const catalogue = inject<Ref<TresCatalogue>>('catalogue')
-
-      // check if args prop is defined on the vnode
-      let internalInstance
-      if (catalogue) {
-        if ((vnode.children as unknown as { default: any })?.default) {
-          const internal = (vnode.children as unknown as { default: any })
-            .default()
-            .map((child: TresVNode) => createInstanceFromVNode(child)) as TresInstance[]
-
-          internalInstance = new catalogue.value[vNodeType](...internal.flat().filter(Boolean))
-        } else if (vnode?.props?.args) {
-          // if args prop is defined, create new instance of catalogue[vNodeType] with the provided arguments
-          if (catalogue?.value[vNodeType]) {
-            internalInstance = new catalogue.value[vNodeType](...vnode.props.args)
-          } else {
-            logError(`There is no ${vNodeType} in the catalogue`, catalogue?.value.uuid)
-          }
-        } else {
-          // if args prop is not defined, create a new instance of catalogue[vNodeType] without arguments
-          internalInstance = new catalogue.value[vNodeType]()
-        }
-      }
-
-      // check if props is defined on the vnode
-      if (vnode?.props) {
-        // if props is defined, process the props and pass the internalInstance to update its properties
-        if (vNodeType === 'BufferGeometry') {
-          processSetAttributes(vnode.props, internalInstance)
-        } else {
-          processProps(vnode.props, internalInstance)
-        }
-      }
-      return internalInstance
-    }
-  }
-
-  /**
-   * Create a new instance of a ThreeJS object based on the component attrs and slots.
-   *
-   * Checks if the component has slots,
-   * if it does, it will create a new Object3D instance passing the slots instances as properties
-   * Example:
-   *
-   * ```vue
-   * <TresMesh>
-   *  <TresBoxGeometry />
-   *  <TresMeshBasicMaterial />
-   * </TresMesh>
-   * ```
-   *
-   * will create a new Mesh instance with a BoxGeometry and a MeshBasicMaterial
-   * const mesh = new Mesh(new BoxGeometry(), new MeshBasicMaterial())
-   *
-   * @param {*} threeObj
-   * @param {TresAttributes} attrs
-   * @param {Record<string, any>} slots
-   * @return {*}  {TresInstance}
-   */
-  function createInstance(threeObj: any, attrs: TresAttributes, slots: Record<string, any>): TresInstance {
-    if (slots.default && slots?.default()) {
-      const internal = slots.default().map((vnode: TresVNode) => createInstanceFromVNode(vnode))
-      if (threeObj.name === 'Group') {
-        const group = new threeObj()
-        internal.forEach((child: TresInstance) => {
-          group.add(child)
-        })
-        return group
-      } else {
-        return new threeObj(...internal.flat().filter(Boolean))
-      }
-    } else {
-      // Creates a new THREE instance, if args is present, spread it on the constructor
-      return attrs.args ? new threeObj(...attrs.args) : new threeObj()
-    }
-  }
-
-  /**
-   * Creates a new component instance for each object in the catalogue
-   *
-   * @param {Ref<TresCatalogue>} catalogue
-   * @return {*}
-   */
-  function createComponentInstances(catalogue: Ref<TresCatalogue>) {
-    return (
-      Object.entries(catalogue.value)
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        .filter(([_key, value]) => (value as { prototype: any })?.prototype?.constructor?.toString().includes('class'))
-        .map(([key, threeObj]) => {
-          const name = `${prefix}${key}`
-          const cmp = defineComponent({
-            name,
-            setup(_props, { slots, attrs, ...ctx }) {
-              const { state } = useTres()
-              const { onLoop } = useRenderLoop()
-              const scene = state.scene
-              const raycaster = state.raycaster
-
-              let instance = createInstance(threeObj, attrs, slots)
-              processProps(attrs, instance)
-              // If the instance is a camera, push it to the camera stack
-              if (instance instanceof PerspectiveCamera || instance instanceof OrthographicCamera) {
-                const { pushCamera } = useCamera()
-                pushCamera(instance)
-              }
-
-              // If the instance is a valid Object3D, add it to the scene
-              if (instance.isObject3D) {
-                scene?.add(instance)
-              }
-
-              let prevInstance: TresEvent | null = null
-              let currentInstance: TresEvent | null = null
-              if (instance instanceof Mesh) {
-                onLoop(() => {
-                  if (instance && raycaster && scene?.children) {
-                    const intersects = raycaster.intersectObjects(scene?.children)
-
-                    if (intersects.length > 0) {
-                      currentInstance = intersects[0]
-
-                      if (prevInstance === null || prevInstance.object.uuid !== currentInstance?.object.uuid) {
-                        ctx.emit('pointer-enter', currentInstance)
-                      }
-
-                      ctx.emit('pointer-move', currentInstance)
-                    } else {
-                      currentInstance = null
-                      if (prevInstance !== null) {
-                        ctx.emit('pointer-leave', prevInstance)
-                      }
-                    }
-
-                    prevInstance = currentInstance
-                  }
-                })
-
-                const clickEventListener = useEventListener(window, 'click', () => {
-                  ctx.emit('click', prevInstance)
-                })
-
-                onUnmounted(() => {
-                  clickEventListener()
-                })
-              }
-
-              if (scene && instance instanceof Fog) {
-                scene.fog = instance as unknown as FogBase
-              }
-
-              if (import.meta.hot) {
-                import.meta.hot.on('vite:afterUpdate', () => {
-                  instance = createInstance(threeObj, attrs, slots)
-                  processProps(attrs, instance)
-
-                  if (instance.isObject3D) {
-                    scene?.add(instance)
-                  }
-                })
-              }
-
-              ctx.expose(instance)
-
-              return () => {}
-            },
-          })
-
-          return [name, cmp]
-        })
-    )
-  }
-
-  return {
-    createComponentInstances,
-    processProps,
-    createInstanceFromVNode,
-  }
-}

packages/tres/src/composables/useInstanceCreator/useInstanceCreator.test.ts

@@ -1,27 +0,0 @@
-import { describe } from 'vitest'
-import { shallowRef } from 'vue'
-import { useInstanceCreator } from '.'
-import { useTres } from '../useTres'
-import { withSetup } from '/@/utils/test-utils'
-
-const [composable, app] = withSetup(() => useInstanceCreator('Tres'))
-
-describe('useInstanceCreator', () => {
-  // TODO: understand why this is not working
-  it.todo('should create component instances', () => {
-    const { createComponentInstances } = composable
-    const catalogue = shallowRef({
-      TresBox: { name: 'TresBox' },
-      TresSphere: { name: 'TresSphere' },
-      TresPlane: { name: 'TresPlane' },
-    })
-    app.provide('catalogue', catalogue)
-
-    app.provide('useTres', useTres())
-    const components = createComponentInstances(catalogue)
-    expect(components).toHaveLength(3)
-    expect(components[0][0]).toBe('TresBox')
-    expect(components[1][0]).toBe('TresSphere')
-    expect(components[2][0]).toBe('TresPlane')
-  })
-})

packages/tres/src/core/catalogue.ts

@@ -1,4 +1,4 @@
-export const catalogue = {}
-export const extend = objects => void Object.assign(catalogue, objects)
+export const catalogue: Record<string, any> = {}
+export const extend = (objects: any) => void Object.assign(catalogue, objects)
 
 export default { catalogue, extend }

packages/tres/src/core/nodeOps.ts

@@ -4,11 +4,12 @@ import { useLogger } from '../iternal'
 import { catalogue } from './catalogue'
 import { Mesh } from 'three'
 import { useEventListener } from '@vueuse/core'
+import { TresEvent, TresObject } from '../types'
 
 const { logWarning } = useLogger()
 
-function hasEvents(obj) {
-  for (var prop in obj) {
+function hasEvents(obj: any) {
+  for (const prop in obj) {
     if (prop.indexOf('on') === 0) {
       return true
     }
@@ -16,7 +17,11 @@ function hasEvents(obj) {
   return false
 }
 
-export const nodeOps: RendererOptions<Node, Element> = {
+function noop(fn: string): any {
+  throw Error(`no-op: ${fn}`)
+}
+
+export const nodeOps: RendererOptions<TresObject, TresObject> = {
   createElement(type, _isSVG, _isCustomizedBuiltIn, props) {
     if (type === 'template') return null
     let instance
@@ -25,7 +30,7 @@ export const nodeOps: RendererOptions<Node, Element> = {
       props = {}
     }
 
-    if (props.arg) {
+    if (props?.arg) {
       instance = new catalogue[type.replace('Tres', '')](...props.args)
     } else {
       instance = new catalogue[type.replace('Tres', '')]()
@@ -33,7 +38,7 @@ export const nodeOps: RendererOptions<Node, Element> = {
 
     if (instance.isCamera) {
       // Let users know that camera is in the center of the scene
-      if (!props.position || props.position.every(v => v == 0)) {
+      if (!props?.position || props?.position.every((v: number) => v == 0)) {
         logWarning(
           // eslint-disable-next-line max-len
           'Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗',
@@ -43,7 +48,7 @@ export const nodeOps: RendererOptions<Node, Element> = {
       pushCamera(instance)
     }
 
-    if (props.attach === undefined) {
+    if (props?.attach === undefined) {
       if (instance.isMaterial) instance.attach = 'material'
       else if (instance.isBufferGeometry) instance.attach = 'geometry'
     }
@@ -109,15 +114,17 @@ export const nodeOps: RendererOptions<Node, Element> = {
     if (parent) {
       if (parent.isObject3D && node.isObject3D) {
         parent.remove(node)
-      } else if (typeof child.attach === 'string') {
-        parent[child.attach] = child.__previousAttach
-        delete child.__previousAttach
+      } else if (typeof node.attach === 'string') {
+        parent[node.attach] = node.__previousAttach
+        delete node.__previousAttach
         node.parent = null
       }
     }
 
     node.dispose?.()
-    node.traverse?.(node => node.dispose?.())
+    node.traverse?.(node => {
+      ;(node as TresObject).dispose?.()
+    })
   },
   patchProp(node, prop, prevValue, nextValue) {
     let root = node
@@ -128,12 +135,12 @@ export const nodeOps: RendererOptions<Node, Element> = {
     if (key.includes('-')) {
       const chain = key.split('-')
       target = chain.reduce((acc, key) => acc[key], root)
-      key = chain.pop()
+      key = chain.pop() as string
 
       if (!target?.set) root = chain.reduce((acc, key) => acc[key], root)
     }
 
-    let value = nextValue
+    const value = nextValue
     /*   try {
       const num = parseFloat(value)
       value = isNaN(num) ? value : num
@@ -146,18 +153,25 @@ export const nodeOps: RendererOptions<Node, Element> = {
     else if (!target.isColor && target.setScalar) target.setScalar(value)
     else target.set(value)
   },
-  createText(text) {},
-  createComment(text) {},
-  setText(node, text) {},
-  setElementText(node, text) {},
+
   parentNode(node) {
     return node?.parent || null
   },
-  nextSibling(node) {
+  createText: () => noop('createText'),
+  createComment: () => noop('createComment'),
+  setText: () => noop('setText'),
+  setElementText: () => noop('setElementText'),
+  nextSibling: () => noop('nextSibling'),
+  querySelector: () => noop('querySelector'),
+  setScopeId: () => noop('setScopeId'),
+  cloneNode: () => noop('cloneNode'),
+  insertStaticContent: () => noop('insertStaticContent'),
+
+  /* nextSibling(node) {
     if (node?.parent?.children) {
       const index = node.parent.children.indexOf(node)
       if (index !== -1) return node.parent.children[index + 1]
     }
     return null
-  },
+  }, */
 }

packages/tres/src/index.ts

@@ -1,13 +1,10 @@
-import { App, Component } from 'vue'
-import { TresCanvas } from '/@/composables/useRenderer/component'
-import { Scene } from '/@/composables/useScene/component'
-import { useCatalogue, useInstanceCreator, useTres } from '/@/composables'
+import { App } from 'vue'
+import { TresCanvas } from '/@/components/TresCanvas'
 export * from '/@/composables'
 export * from './keys'
 export * from './types'
 
 export interface TresOptions {
-  prefix?: string
   extends?: Record<string, unknown>
 }
 export interface TresPlugin {
@@ -17,25 +14,8 @@ export interface TresPlugin {
 
 const plugin: TresPlugin = {
   install(app: App, options) {
-    const prefix = options?.prefix || 'Tres'
-
     // Register core components
-    app.component(`${prefix}Canvas`, TresCanvas)
-    app.component(`${prefix}Scene`, Scene)
-
-    // Initialize catalogue
-    const { catalogue, extend } = useCatalogue(app, prefix)
-    app.provide('catalogue', catalogue)
-    app.provide('extend', extend)
-    app.provide('useTres', useTres())
-
-    // Create components from catalogue
-    const { createComponentInstances } = useInstanceCreator(prefix)
-    const components = createComponentInstances(catalogue)
-
-    components.forEach(([key, cmp]) => {
-      app.component(key as string, cmp as Component)
-    })
+    app.component(`TresCanvas`, TresCanvas)
   },
 }
 

packages/tres/src/types/index.ts

@@ -10,6 +10,10 @@ export type TresObject = Object3D<Event> & {
   color?: TresColor
   opacity?: number
   visible?: boolean
+  attach?: string
+  parent: TresObject | null
+  dispose?: () => void
+  __previousAttach?: string
   [key: string]: any
 }