fix: 849 support Symbol keys in provide/inject (#850)

playground/vue/src/pages/issues/732/SubComponentWithInject.vue

@@ -1,16 +1,20 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
 import { inject, watchEffect } from 'vue'
+import { injectSymbol } from './constants'
 
 const awiwi = inject('awiwi')
 const bululu = inject('bululu')
+const symbolInjection = inject(injectSymbol)
 const vRoute = inject('v-route')
 console.log(inject('test'))
 
 watchEffect(() => console.log('tres:awiwi', awiwi?.a))
 
 watchEffect(() => console.log('tres:bululu', bululu?.value))
 
+watchEffect(() => console.log('tres:symbolInjection', symbolInjection?.value))
+
 watchEffect(() => console.log('tres:v-route', vRoute))
 
 watchEffect(() => console.log('tres:useTres', inject('useTres')))

playground/vue/src/pages/issues/732/SubVueComponentWithInject.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { inject, watchEffect } from 'vue'
+import { injectSymbol } from './constants'
 
 const awiwi = inject('awiwi')
 const bululu = inject('bululu')
+const symbolInjection = inject(injectSymbol)
 // eslint-disable-next-line no-console
 watchEffect(() => console.log('vue:awiwi', awiwi?.a))
 // eslint-disable-next-line no-console
 watchEffect(() => console.log('vue:bululu', bululu?.value))
 // eslint-disable-next-line no-console
+watchEffect(() => console.log('vue:symbolInjection', symbolInjection?.value))
+// eslint-disable-next-line no-console
 watchEffect(() => console.log('vue:v-route', inject('v-route')))
 // eslint-disable-next-line no-console
 watchEffect(() => console.log('vue:useTres', inject('useTres')))
@@ -16,5 +20,6 @@ watchEffect(() => console.log('vue:useTres', inject('useTres')))
 <template>
   <p>awiwi: {{ awiwi }}</p>
   <p>bululu: {{ bululu }}</p>
+  <p>symbolInjection: {{ symbolInjection }}</p>
   <p>v-route: {{ inject('v-route') }}</p>
 </template>

playground/vue/src/pages/issues/732/constants.ts

@@ -0,0 +1 @@
+export const injectSymbol = Symbol('inject')

playground/vue/src/pages/issues/732/index.vue

@@ -3,14 +3,17 @@ import { provide, reactive } from 'vue'
 
 import ProvideInjectExperience from './ProvideInjectExperience.vue'
 import SubVueComponentWithInject from './SubVueComponentWithInject.vue'
+import { injectSymbol } from './constants'
 
 const obj = reactive({
   a: 1,
 })
 const bululu = ref(1)
+const symbolInjection = computed(() => `Symbol injection is working  ${obj.a}`)
 provide('awiwi', obj)
 provide('bululu', bululu)
 provide('test', '❌ Precendence is incorrect')
+provide(injectSymbol, symbolInjection)
 function onClick() {
   obj.a++
   bululu.value++

src/components/TresCanvas.vue

@@ -116,7 +116,7 @@ const createInternalComponent = (context: TresContext, empty = false) =>
     setup() {
       const ctx = getCurrentInstance()?.appContext
       if (ctx) { ctx.app = instance?.appContext.app as App }
-      const provides = {}
+      const provides: { [key: string | symbol]: unknown } = {}
 
       // Helper function to recursively merge provides from parents
       function mergeProvides(currentInstance: any) {
@@ -136,9 +136,9 @@ const createInternalComponent = (context: TresContext, empty = false) =>
       if (instance?.parent && props.enableProvideBridge) {
         mergeProvides(instance.parent)
 
-        Object.entries(provides)
-          .forEach(([key, value]) => {
-            provide(key, value)
+        Reflect.ownKeys(provides)
+          .forEach((key) => {
+            provide(key, provides[key])
           })
       }