feat(core): extract context management logic to useTresContextManager composable

apps/docs/content/3.api/1.components/tres-canvas.md

@@ -231,7 +231,7 @@ For detailed technical information about prop reactivity, see [GitHub Issue #982
 ### Exposed Properties
 
 :::field-group
-  ::::field{name="context" type="TresContext | null"}
+  ::::field{name="context" type="TresContext | undefined"}
   The complete TresJS context object containing scene, renderer, camera, and other core instances. Available after the component is mounted.
   ::::
 

packages/core/src/components/Context.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ShallowRef } from 'vue'
+import type { TresContext } from '../composables'
+import type { TresScene } from '../types'
+import type { TresCanvasEmits, TresCanvasProps } from './TresCanvas.vue'
+import { Scene } from 'three'
+import * as THREE from 'three'
+import { shallowRef } from 'vue'
+import { useTresContextManager, useTresContextProvider } from '../composables'
+import { extend } from '../core/catalogue'
+
+const props = defineProps<TresCanvasProps & { canvas: HTMLCanvasElement }>()
+
+const emit = defineEmits<TresCanvasEmits>()
+
+const slots = defineSlots<{
+  default: () => any
+}>()
+
+/*
+ `scene` is defined here and not in `useTresContextProvider` because the custom
+ renderer uses it to mount the app nodes. This happens before `useTresContextProvider` is called.
+ The custom renderer requires `scene` to be editable (not readonly).
+*/
+const scene = shallowRef<TresScene | Scene>(new Scene())
+
+extend(THREE)
+
+const context = shallowRef<TresContext>(useTresContextProvider({
+  scene: scene.value as TresScene,
+  canvas: props.canvas,
+  windowSize: props.windowSize ?? false,
+  rendererOptions: props,
+}))
+
+const { dispose } = useTresContextManager(scene as ShallowRef<TresScene>, context, props, emit, slots)
+
+defineExpose({ context, dispose: () => dispose(context.value, true) })
+</script>

packages/core/src/components/TresCanvas.vue

@@ -1,253 +1,12 @@
 <script setup lang="ts">
-import {
-  ACESFilmicToneMapping,
-  PCFSoftShadowMap,
-  PerspectiveCamera,
-  Scene,
-  WebGLRenderer,
-} from 'three'
-import type { App, Ref } from 'vue'
-import type { TresCamera, TresContextWithClock, TresObject, TresPointerEvent, TresScene } from '../types'
-import * as THREE from 'three'
-
-import {
-  createRenderer,
-  defineComponent,
-  Fragment,
-  getCurrentInstance,
-  h,
-  onMounted,
-  onUnmounted,
-  provide,
-  ref,
-  shallowRef,
-  toValue,
-  watch,
-  watchEffect,
-} from 'vue'
+import { ACESFilmicToneMapping, PCFSoftShadowMap } from 'three'
+import { ref, shallowRef } from 'vue'
 import { version } from '../../package.json' with { type: 'json' }
 import type { RendererOptions, TresContext } from '../composables'
-import { useTresContextProvider } from '../composables'
-import { INJECTION_KEY as CONTEXT_INJECTION_KEY } from '../composables/useTresContextProvider'
-import { extend } from '../core/catalogue'
-import { nodeOps } from '../core/nodeOps'
-
-import { disposeObject3D } from '../utils/'
-import { registerTresDevtools } from '../devtools'
-import type { TresPointerEventName } from '../utils/pointerEvents'
-import { promiseTimeout } from '@vueuse/core'
-
-const props = withDefaults(defineProps<TresCanvasProps>(), {
-  alpha: undefined,
-  depth: undefined,
-  shadows: undefined,
-  stencil: undefined,
-  antialias: true,
-  windowSize: undefined,
-  useLegacyLights: undefined,
-  preserveDrawingBuffer: undefined,
-  logarithmicDepthBuffer: undefined,
-  failIfMajorPerformanceCaveat: undefined,
-  renderMode: 'always',
-  clearColor: '#000000',
-  clearAlpha: 1,
-  enableProvideBridge: true,
-  toneMapping: ACESFilmicToneMapping,
-  shadowMapType: PCFSoftShadowMap,
-})
-
-const emit = defineEmits<TresCanvasEmits>()
-
-const slots = defineSlots<{
-  default: () => any
-}>()
-
-const canvasRef = ref<HTMLCanvasElement>()
-
-/*
- `scene` is defined here and not in `useTresContextProvider` because the custom
- renderer uses it to mount the app nodes. This happens before `useTresContextProvider` is called.
- The custom renderer requires `scene` to be editable (not readonly).
-*/
-const scene = shallowRef<TresScene | Scene>(new Scene())
-
-const instance = getCurrentInstance()
-extend(THREE)
-
-const createInternalComponent = (context: TresContext, empty = false) =>
-  defineComponent({
-    setup() {
-      const ctx = getCurrentInstance()?.appContext
-      if (ctx) { ctx.app = instance?.appContext.app as App }
-      const provides: { [key: string | symbol]: unknown } = {}
-
-      // Helper function to recursively merge provides from parents
-      function mergeProvides(currentInstance: any) {
-        if (!currentInstance) { return }
-
-        // Recursively process the parent instance
-        if (currentInstance.parent) {
-          mergeProvides(currentInstance.parent)
-        }
-        // Extract provides from the current instance and merge them
-        if (currentInstance.provides) {
-          Object.assign(provides, currentInstance.provides)
-        }
-      }
-
-      // Start the recursion from the initial instance
-      if (instance?.parent && props.enableProvideBridge) {
-        mergeProvides(instance.parent)
-
-        Reflect.ownKeys(provides)
-          .forEach((key) => {
-            provide(key, provides[key])
-          })
-      }
-
-      provide(CONTEXT_INJECTION_KEY, context)
-      provide('extend', extend)
-
-      if (typeof window !== 'undefined' && ctx?.app) {
-        registerTresDevtools(ctx?.app, context)
-      }
-      return () => h(Fragment, null, !empty ? slots.default() : [])
-    },
-  })
-
-const mountCustomRenderer = (context: TresContext, empty = false) => {
-  const InternalComponent = createInternalComponent(context, empty)
-  const { render } = createRenderer(nodeOps(context))
-  render(h(InternalComponent), scene.value as unknown as TresObject)
-}
-
-const dispose = (context: TresContext, force = false) => {
-  disposeObject3D(context.scene.value as unknown as TresObject)
-  if (force) {
-    context.renderer.instance.dispose()
-    if (context.renderer.instance instanceof WebGLRenderer) {
-      context.renderer.instance.renderLists.dispose()
-      context.renderer.instance.forceContextLoss()
-    }
-  }
-  (scene.value as TresScene).__tres = {
-    root: context,
-  }
-}
-
-const context = shallowRef<TresContext | null>(null)
-
-defineExpose({ context, dispose: () => dispose(context.value as TresContext, true) })
-
-const handleHMR = (context: TresContext) => {
-  dispose(context)
-  mountCustomRenderer(context)
-}
-
-const unmountCanvas = () => {
-  dispose(context.value as TresContext)
-  mountCustomRenderer(context.value as TresContext, true)
-}
-
-onMounted(() => {
-  const existingCanvas = canvasRef as Ref<HTMLCanvasElement>
-
-  context.value = useTresContextProvider({
-    scene: scene.value as TresScene,
-    canvas: existingCanvas,
-    windowSize: props.windowSize ?? false,
-    rendererOptions: props,
-  })
+import type { TresCamera, TresContextWithClock, TresPointerEvent } from '../types'
+import type { TresPointerEventName } from '../utils/pointerEvents.ts'
+import Context from './Context.vue'
 
-  const { camera, renderer } = context.value
-  const { registerCamera, cameras, activeCamera, deregisterCamera } = camera
-
-  mountCustomRenderer(context.value)
-
-  const addDefaultCamera = () => {
-    const camera = new PerspectiveCamera(
-      45,
-      window.innerWidth / window.innerHeight,
-      0.1,
-      1000,
-    )
-    camera.position.set(3, 3, 3)
-    camera.lookAt(0, 0, 0)
-    registerCamera(camera)
-
-    const unwatch = watchEffect(() => {
-      if (cameras.value.length >= 2) {
-        camera.removeFromParent()
-        deregisterCamera(camera)
-        unwatch?.()
-      }
-    })
-  }
-
-  context.value.events.onPointerMissed((event) => {
-    emit('pointermissed', event)
-  })
-
-  watch(
-    () => props.camera,
-    (newCamera, oldCamera) => {
-      if (newCamera) {
-        registerCamera(toValue(newCamera), true)
-      }
-      if (oldCamera) {
-        toValue(oldCamera).removeFromParent()
-        deregisterCamera(toValue(oldCamera))
-      }
-    },
-    {
-      immediate: true,
-    },
-  )
-
-  if (!activeCamera.value) {
-    addDefaultCamera()
-  }
-
-  renderer.onRender(() => {
-    if (context.value) {
-      emit('render', context.value)
-    }
-  })
-
-  renderer.loop.onLoop((loopContext) => {
-    if (context.value) {
-      emit('loop', { ...context.value, ...loopContext })
-    }
-  })
-
-  renderer.loop.onBeforeLoop((loopContext) => {
-    if (context.value) {
-      emit('beforeLoop', { ...context.value, ...loopContext })
-    }
-  })
-
-  renderer.onReady(() => {
-    emit('ready', context.value!)
-  })
-
-  // HMR support
-  if (import.meta.hot && context.value) { import.meta.hot.on('vite:afterUpdate', () => handleHMR(context.value as TresContext)) }
-})
-
-// warn if the canvas has no area
-onMounted(async () => {
-  await promiseTimeout(3000)
-
-  if (context.value && (!context.value.sizes.width || !context.value.sizes.height.value)) {
-    const windowSizePropName: keyof Pick<TresCanvasProps, 'windowSize'> = 'windowSize'
-    console.warn(`TresCanvas: The canvas has no area, so nothing can be rendered. Set it manually on the parent element or use the prop ${windowSizePropName}.`)
-  }
-})
-
-onUnmounted(unmountCanvas)
-</script>
-
-<script lang="ts">
 export interface TresCanvasProps extends RendererOptions {
   /**
    * Custom camera instance to use as main camera
@@ -278,12 +37,52 @@ export type TresCanvasEmits = {
   // all pointer events are supported because they bubble up
   [key in TresPointerEventName]: [event: TresPointerEvent]
 }
+
+export interface TresCanvasInstance {
+  get context(): TresContext | undefined
+  dispose: () => void
+}
+
+const props = withDefaults(defineProps<TresCanvasProps>(), {
+  alpha: undefined,
+  depth: undefined,
+  shadows: undefined,
+  stencil: undefined,
+  antialias: true,
+  windowSize: undefined,
+  useLegacyLights: undefined,
+  preserveDrawingBuffer: undefined,
+  logarithmicDepthBuffer: undefined,
+  failIfMajorPerformanceCaveat: undefined,
+  renderMode: 'always',
+  clearColor: '#000000',
+  clearAlpha: 1,
+  enableProvideBridge: true,
+  toneMapping: ACESFilmicToneMapping,
+  shadowMapType: PCFSoftShadowMap,
+})
+
+const emit = defineEmits<TresCanvasEmits>()
+
+defineSlots<{
+  default: () => any
+}>()
+
+const canvasRef = ref<HTMLCanvasElement>()
+const contextRef = shallowRef<{ context: TresContext, dispose: () => void }>()
+
+defineExpose<TresCanvasInstance>({
+  get context() {
+    return contextRef.value?.context
+  },
+  dispose: () => contextRef.value?.dispose(),
+})
 </script>
 
 <template>
   <canvas
     ref="canvasRef"
-    :data-scene="scene.uuid"
+    :data-scene="contextRef?.context?.scene.value.uuid"
     :class="$attrs.class"
     :data-tres="`tresjs ${version}`"
     :style="{
@@ -297,5 +96,32 @@ export type TresCanvasEmits = {
       touchAction: 'none',
       ...$attrs.style as Object,
     }"
-  ></canvas>
+  >
+    <Context
+      v-if="canvasRef"
+      ref="contextRef"
+      :canvas="canvasRef"
+      v-bind="props"
+      @ready="emit('ready', $event)"
+      @pointermissed="emit('pointermissed', $event)"
+      @render="emit('render', $event)"
+      @before-loop="emit('beforeLoop', $event)"
+      @loop="emit('loop', $event)"
+      @click="emit('click', $event)"
+      @contextmenu="emit('contextmenu', $event)"
+      @pointermove="emit('pointermove', $event)"
+      @pointerenter="emit('pointerenter', $event)"
+      @pointerleave="emit('pointerleave', $event)"
+      @pointerover="emit('pointerover', $event)"
+      @pointerout="emit('pointerout', $event)"
+      @dblclick="emit('dblclick', $event)"
+      @pointerdown="emit('pointerdown', $event)"
+      @pointerup="emit('pointerup', $event)"
+      @pointercancel="emit('pointercancel', $event)"
+      @lostpointercapture="emit('lostpointercapture', $event)"
+      @wheel="emit('wheel', $event)"
+    >
+      <slot></slot>
+    </Context>
+  </canvas>
 </template>