fix: prop types on TresCanvas (#326)

* chore: refactor components to sfc

* chore: TresCanvas prop type fix

* chore: restored type

* chore: removed duplicated interface definition

* chore: restored duplicated types

---------

Co-authored-by: alvarosabu <alvaro.saburido@gmail.com>
Co-authored-by: Tino Koch <tinoooo@users.noreply.github.com>

playground/components.d.ts

@@ -3,9 +3,11 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
 export {}
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
     Cameras: typeof import('./src/components/Cameras.vue')['default']

src/components/TresCanvas.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import TresScene from './TresScene.vue'
-import { CameraType, useTresProvider } from '../composables'
-import { ColorSpace, ShadowMapType, ToneMapping } from 'three'
-import { RendererPresetsType } from '../composables/useRenderer/const'
+import { useTresProvider } from '../composables'
 
-export type TresCanvasProps = {
+import type { TresCamera } from '../types/'
+import type { RendererPresetsType } from '../composables/useRenderer/const'
+import type { ColorSpace, ShadowMapType, ToneMapping } from 'three'
+
+export interface TresCanvasProps {
     shadows?: boolean
     shadowMapType?: ShadowMapType
     physicallyCorrectLights?: boolean
@@ -19,17 +21,17 @@ export type TresCanvasProps = {
     windowSize?: boolean
     preset?: RendererPresetsType
     disableRender?: boolean
-    camera?: CameraType
+    camera?: TresCamera
 }
 
-defineProps<TresCanvasProps>()
+const props = defineProps<TresCanvasProps>()
 
 const tres = useTresProvider()
 
 defineExpose(tres)
 </script>
 <template>
-<TresScene v-bind="$props">
-    <slot />
-</TresScene>
+    <TresScene v-bind="props">
+        <slot />
+    </TresScene>
 </template>

src/components/TresScene.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { App, onMounted, onUnmounted, ref, watch } from 'vue'
 import { PerspectiveCamera, Scene } from 'three'
-import { ColorSpace, ShadowMapType, ToneMapping } from 'three'
+
 import { createTres } from '../core/renderer'
-import { TresCamera } from '../types/'
 import {
-  CameraType,
   TRES_CONTEXT_KEY,
   useLogger,
   useCamera,
@@ -15,11 +13,13 @@ import {
   usePointerEventHandler,
 } from '../composables'
 import { extend } from '../core/catalogue'
-import { type RendererPresetsType } from '../composables/useRenderer/const'
 import { OBJECT_3D_USER_DATA_KEYS } from '../keys'
 
+import type { TresCamera } from '../types/'
+import type { RendererPresetsType } from '../composables/useRenderer/const'
+import type { ColorSpace, ShadowMapType, ToneMapping } from 'three'
 
-export type TresSceneProps = {
+export interface TresSceneProps {
   shadows?: boolean
   shadowMapType?: ShadowMapType
   physicallyCorrectLights?: boolean