feat: use render instead createApp

src/components/TresCanvas.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import { extend } from '../core/catalogue'
-import { onMounted } from 'vue'
-import { createTres } from '../core/renderer'
-import { useTresContextProvider, type TresContext } from '../composables'
-import { App, Ref, computed, ref, shallowRef, watch, watchEffect } from 'vue'
 import {
-    Scene,
     PerspectiveCamera,
+    Scene,
     WebGLRendererParameters,
     type ColorSpace,
     type ShadowMapType,
     type ToneMapping,
 } from 'three'
+import { computed, h, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
+import { useTresContextProvider } from '../composables'
+import { render } from '../core/renderer'
 
 import {
     useLogger,
-    useRenderLoop,
     usePointerEventHandler,
+    useRenderLoop,
 } from '../composables'
 
-import type { TresCamera } from '../types/'
+import { Fragment } from 'vue'
 import type { RendererPresetsType } from '../composables/useRenderer/const'
+import type { TresCamera, TresObject } from '../types/'
 
 
 export interface TresCanvasProps extends Omit<WebGLRendererParameters, 'canvas'> {
@@ -66,42 +65,31 @@ const slots = defineSlots<{
 }>()
 
 
-let app: App
 
-const mountCustomRenderer = (context: TresContext) => {
-    app = createTres(slots)
-    app.provide('useTres', context) // TODO obsolete?
-    app.provide('extend', extend)
-    app.mount(scene.value)
-}
+const disableRender = computed(() => props.disableRender)
+
+const context = useTresContextProvider({
+    scene: scene.value,
+    canvas,
+    windowSize: computed(() => props.windowSize),
+    disableRender,
+    rendererOptions: props,
+})
+
+usePointerEventHandler({ scene: scene.value, contextParts: context })
 
-const dispose = () => {
-    scene.value.children = []
-    app.unmount()
-    app = createTres(slots)
-    app.provide('extend', extend)
-    app.mount(scene.value)
-    resume()
+const renderScene = () => {
+    const container = scene.value as unknown as TresObject
+    render(h(Fragment, null, slots && slots.default ? slots.default() : []), container)
 }
 
-const disableRender = computed(() => props.disableRender)
 
-onMounted(() => {
-    const existingCanvas = canvas as Ref<HTMLCanvasElement>
-
-    const context = useTresContextProvider({
-        scene: scene.value,
-        canvas: existingCanvas,
-        windowSize: props.windowSize,
-        disableRender,
-        rendererOptions: props,
-    })
 
-    usePointerEventHandler({ scene: scene.value, contextParts: context })
+onMounted(() => {
 
     const { addCamera, camera, cameras, removeCamera } = context
 
-    mountCustomRenderer(context)
+    renderScene()
 
     const addDefaultCamera = () => {
         const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
@@ -138,10 +126,17 @@ onMounted(() => {
         )
         addDefaultCamera()
     }
-
-    if (import.meta.hot)
-        import.meta.hot.on('vite:afterUpdate', dispose)
 })
+
+
+if (import.meta.hot)
+    import.meta.hot.on('vite:afterUpdate', () => {
+        const container = scene.value as unknown as TresObject
+        render(h(Fragment, null, slots && slots.default ? slots.default() : []), container)
+        scene.value.updateMatrix()
+        resume()
+    })
+
 </script>
 <template>
     <canvas ref="canvas" :data-scene="scene.uuid" :style="{
@@ -156,4 +151,4 @@ onMounted(() => {
         zIndex: 1,
     }">
     </canvas>
-</template>
+</template>

src/composables/useRenderer/index.ts

@@ -109,7 +109,7 @@ export function useRenderer(
     contextParts: { sizes, camera },
   }:
     {
-      canvas: MaybeRef<HTMLCanvasElement>
+      canvas: MaybeRef<HTMLCanvasElement | undefined>
       scene: Scene
       options: UseRendererOptions
       contextParts: Pick<TresContext, 'sizes' | 'camera'>

src/composables/useTresContextProvider/index.ts

@@ -6,6 +6,7 @@ import { UseRendererOptions, useRenderer } from '../useRenderer';
 import { extend } from '../../core/catalogue';
 
 import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
+import { useLogger } from '../useLogger';
 
 export type TresContext = {
   scene: ShallowRef<Scene>;
@@ -30,16 +31,20 @@ export function useTresContextProvider({
   rendererOptions
 }: {
   scene: Scene,
-  canvas: MaybeRef<HTMLCanvasElement>
+  canvas: MaybeRef<HTMLCanvasElement | undefined>
   windowSize: MaybeRefOrGetter<boolean>
   disableRender: MaybeRefOrGetter<boolean>
   rendererOptions: UseRendererOptions
 }): TresContext {
 
-  const elementSize = computed(() =>
-    toValue(windowSize)
-      ? useWindowSize()
-      : useElementSize(toValue(canvas).parentElement)
+  const { logWarning } = useLogger()
+
+  const elementSize = computed(() => {
+    if (toValue(windowSize))
+      return useWindowSize()
+    if (!toValue(canvas)) logWarning('//TODO')
+    return useElementSize(toValue(canvas)!.parentElement)
+  }
   )
 
   const width = computed(() => elementSize.value.width.value)

src/core/renderer.ts

@@ -1,20 +1,12 @@
 import * as THREE from 'three'
 
-import { createRenderer, Slots } from 'vue'
+import { createRenderer } from 'vue'
 import { extend } from './catalogue'
 import { nodeOps } from './nodeOps'
 
-export const { createApp } = createRenderer(nodeOps)
-
-export const createTres = (slots: Slots) => {
-  const app = createApp(internalFnComponent)
-  function internalFnComponent() {
-    return slots && slots.default ? slots.default() : []
-  }
-  return app
-}
+export const { render } = createRenderer(nodeOps)
 
 // Creates the catalogue of components based on THREE namespace
 extend(THREE)
 
-export default { createTres, extend }
+export default { extend, render }