refactor!: removed useTresReady, added isReady to the renderer in the… (#1000)

* refactor!: removed useTresReady, added isReady to the renderer in the context

BREAKING CHANGE:

- useTresReady is no longer available, it has been replaced by isReady in the renderer in the context
- onTresReady is no longer available. renderer.isReady should be leveraged instead

* chore: removed playground files concerning useTresReady

* chore: removed ready pages from playground routes

* feature: made isReady dependency clearer by leveraging triggerRef

Author: Tinoooo

playground/vue/src/pages/basic/ready/LoopCallbackWatcher.vue

@@ -44,11 +44,6 @@ export const basicRoutes = [
     name: 'Pierced Props',
     component: () => import('../../pages/basic/PiercedProps.vue'),
   },
-  {
-    path: '/basic/ready',
-    name: '@ready',
-    component: () => import('../../pages/basic/ready/index.vue'),
-  },
   {
     path: '/basic/textures',
     name: 'Textures',

playground/vue/src/pages/basic/ready/OnTresReadyWatcher.vue

@@ -36,6 +36,7 @@ import { nodeOps } from '../core/nodeOps'
 
 import { disposeObject3D, kebabToCamel } from '../utils/'
 import { registerTresDevtools } from '../devtools'
+import { whenever } from '@vueuse/core'
 
 export interface TresCanvasProps
   extends Omit<WebGLRendererParameters, 'canvas'> {
@@ -244,14 +245,14 @@ onMounted(() => {
     )
   })
 
-  context.value.onReady(() => {
-    if (context.value) { emit('ready', context.value) }
-  })
-
   // HMR support
   if (import.meta.hot && context.value) { import.meta.hot.on('vite:afterUpdate', () => handleHMR(context.value as TresContext)) }
 })
 
+whenever(() => context.value?.renderer.isReady, () => {
+  if (context.value) { emit('ready', context.value) }
+}, { once: true })
+
 onUnmounted(unmountCanvas)
 </script>
 

playground/vue/src/pages/basic/ready/index.vue

@@ -11,5 +11,4 @@ export * from './useRenderLoop'
 export * from './useTexture'
 export * from './useTresContextProvider'
 export * from './useTresEventManager'
-export { onTresReady } from './useTresReady'
 export { UseLoader, UseTexture }

playground/vue/src/router/routes/basic.ts

@@ -11,7 +11,7 @@ import {
   useDevicePixelRatio,
 } from '@vueuse/core'
 import { ACESFilmicToneMapping, Color, WebGLRenderer } from 'three'
-import { computed, type MaybeRef, onUnmounted, ref, shallowRef, toValue, watch, watchEffect } from 'vue'
+import { computed, type MaybeRef, onUnmounted, readonly, ref, shallowRef, toValue, triggerRef, watch, watchEffect } from 'vue'
 
 // Solution taken from Thretle that actually support different versions https://github.com/threlte/threlte/blob/5fa541179460f0dadc7dc17ae5e6854d1689379e/packages/core/src/lib/lib/useRenderer.ts
 import { revision } from '../../core/revision'
@@ -196,9 +196,15 @@ export function useRendererManager(
     invalidateOnDemand()
   })
 
+  const isReady = computed(() =>
+    !!(instance.value.domElement.width && instance.value.domElement.height),
+  )
+
   watch([sizes.width, sizes.height], () => {
     instance.value.setSize(sizes.width.value, sizes.height.value)
     invalidateOnDemand()
+
+    triggerRef(instance)
   }, {
     immediate: true,
   })
@@ -305,6 +311,7 @@ export function useRendererManager(
   return {
     instance,
 
+    isReady: readonly(isReady),
     advance,
     onRender,
     invalidate,