fix: re-mount custom renderer manually on HMR

playground/src/components/TheSphere.vue

@@ -1,13 +1,4 @@
-<script setup lang="ts">
-import { useTres } from '@tresjs/core'
-import { watchEffect } from 'vue'
-
-const { state } = useTres()
-
-watchEffect(() => {
-  console.log(state)
-})
-</script>
+<script setup lang="ts"></script>
 <template>
   <TresMesh :position="[2, 2, 0]" cast-shadow>
     <TresSphereGeometry />

src/components/TresScene.ts

@@ -4,6 +4,7 @@ import { ColorSpace, ShadowMapType, ToneMapping } from 'three'
 import { useEventListener } from '@vueuse/core'
 import { isString } from '@alvarosabu/utils'
 import { createTres } from '../core/renderer'
+import { TresCamera } from '../types/'
 import {
   CameraType,
   TRES_CONTEXT_KEY,
@@ -85,6 +86,8 @@ export const TresScene = defineComponent<TresSceneProps>({
       }
     }
 
+    const { onLoop, resume } = useRenderLoop()
+
     onMounted(() => {
       initRenderer()
     })
@@ -102,8 +105,6 @@ export const TresScene = defineComponent<TresSceneProps>({
         pushCamera(props.camera as any)
       }
 
-      const { onLoop } = useRenderLoop()
-
       const { raycaster, pointer } = useRaycaster()
 
       // TODO: Type raycasting events correctly
@@ -146,8 +147,9 @@ export const TresScene = defineComponent<TresSceneProps>({
 
     function mountApp() {
       app = createTres(slots)
-      app.provide('useTres', useTres())
-      app.provide(TRES_CONTEXT_KEY, useTres())
+      const tres = useTres()
+      app.provide('useTres', tres)
+      app.provide(TRES_CONTEXT_KEY, tres)
       app.provide('extend', extend)
       app.mount(scene as unknown)
     }
@@ -160,7 +162,12 @@ export const TresScene = defineComponent<TresSceneProps>({
     function dispose() {
       scene.children = []
       app.unmount()
-      mountApp()
+      app = createTres(slots)
+      app.provide('extend', extend)
+      app.mount(scene as unknown)
+      const camera = scene.children.find((child: any) => child.isCamera)
+      pushCamera(camera as TresCamera)
+      resume()
     }
 
     if (import.meta.hot) {

src/composables/useRenderer/index.ts

@@ -260,6 +260,10 @@ You could set windowSize=true to force the canvas to be the size of the window.`
     { immediate: true, deep: true },
   )
 
+  if (import.meta.hot) {
+    import.meta.hot.on('vite:afterUpdate', resume)
+  }
+
   return {
     renderer,
     isReady,