Ver código fonte

fix: inject context lose in pure render function

enpitsulin 2 anos atrás
pai
commit
5085964320

+ 8 - 3
src/components/TresCanvas.vue

@@ -7,7 +7,7 @@ import {
     type ShadowMapType,
     type ToneMapping,
 } from 'three'
-import { computed, h, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
+import { Fragment, computed, defineComponent, h, onMounted, provide, ref, shallowRef, watch, watchEffect } from 'vue'
 import { useTresContextProvider } from '../composables'
 import { render } from '../core/renderer'
 
@@ -17,7 +17,6 @@ import {
     useRenderLoop,
 } from '../composables'
 
-import { Fragment } from 'vue'
 import type { RendererPresetsType } from '../composables/useRenderer/const'
 import type { TresCamera, TresObject } from '../types/'
 
@@ -80,7 +79,13 @@ usePointerEventHandler({ scene: scene.value, contextParts: context })
 
 const renderScene = () => {
     const container = scene.value as unknown as TresObject
-    render(h(Fragment, null, slots && slots.default ? slots.default() : []), container)
+    const internalFnComponent = defineComponent({
+        setup() {
+            provide('useTres', context);
+            return () => h(Fragment, null, slots && slots.default ? slots.default() : [])
+        }
+    })
+    render(h(internalFnComponent), container)
 }
 
 

+ 3 - 7
src/composables/useTresContextProvider/index.ts

@@ -1,12 +1,11 @@
 import { toValue, useElementSize, useWindowSize } from '@vueuse/core';
-import { inject, provide, readonly, shallowRef, computed, ref } from 'vue';
-import { useCamera } from '../useCamera';
 import { Camera, EventDispatcher, Raycaster, Scene, WebGLRenderer } from 'three';
-import { UseRendererOptions, useRenderer } from '../useRenderer';
+import { computed, inject, provide, readonly, ref, shallowRef } from 'vue';
 import { extend } from '../../core/catalogue';
+import { useCamera } from '../useCamera';
+import { UseRendererOptions, useRenderer } from '../useRenderer';
 
 import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue';
-import { useLogger } from '../useLogger';
 
 export type TresContext = {
   scene: ShallowRef<Scene>;
@@ -37,12 +36,9 @@ export function useTresContextProvider({
   rendererOptions: UseRendererOptions
 }): TresContext {
 
-  const { logWarning } = useLogger()
-
   const elementSize = computed(() => {
     if (toValue(windowSize))
       return useWindowSize()
-    if (!toValue(canvas)) logWarning('//TODO')
     return useElementSize(toValue(canvas)!.parentElement)
   }
   )