fix: display injection of 'symbol' key (#1648)

Author: konpeki622

packages/app-backend-vue3/src/components/data.ts

@@ -223,30 +223,32 @@ function processAttrs (instance) {
 }
 
 function processProvide (instance) {
-  return Object.keys(instance.provides)
+  return Reflect.ownKeys(instance.provides)
     .map(key => ({
       type: 'provided',
-      key,
+      key: key.toString(),
       value: returnError(() => instance.provides[key]),
     }))
 }
 
 function processInject (instance, mergedType) {
   if (!mergedType?.inject) return []
   let keys = []
+  let defaultValue
   if (Array.isArray(mergedType.inject)) {
     keys = mergedType.inject.map(key => ({
       key,
       originalKey: key,
     }))
   } else {
-    keys = Object.keys(mergedType.inject).map(key => {
+    keys = Reflect.ownKeys(mergedType.inject).map(key => {
       const value = mergedType.inject[key]
       let originalKey
-      if (typeof value === 'string') {
+      if (typeof value === 'string' || typeof value === 'symbol') {
         originalKey = value
       } else {
         originalKey = value.from
+        defaultValue = value.default
       }
       return {
         key,
@@ -256,8 +258,8 @@ function processInject (instance, mergedType) {
   }
   return keys.map(({ key, originalKey }) => ({
     type: 'injected',
-    key: originalKey && key !== originalKey ? `${originalKey} ➞ ${key}` : key,
-    value: returnError(() => instance.ctx[key]),
+    key: originalKey && key !== originalKey ? `${originalKey.toString()} ➞ ${key.toString()}` : key.toString(),
+    value: returnError(() => instance.ctx[key] || instance.provides[originalKey] || defaultValue),
   }))
 }
 

packages/shell-dev-vue3/src/Provide.vue

@@ -5,6 +5,9 @@
 <script>
 import { provide, inject } from 'vue'
 
+const symbolForInject = Symbol('inject')
+const symbolForSetup = Symbol('setup')
+
 export default {
   components: {
     Inject: {
@@ -22,10 +25,11 @@ export default {
           template: '<div>nested inject: {{ renamed }} missing: {{ missing }}</div>',
         },
       },
-      inject: ['injectedData'],
+      inject: ['injectedData', symbolForInject],
       setup () {
         return {
           comingFromSetup: inject('fromSetup'),
+          comingFromSymbol: inject(symbolForSetup),
         }
       },
       template: '<div>injected: {{ injectedData }} | {{ comingFromSetup }}<NestedInject /></div>',
@@ -35,11 +39,13 @@ export default {
   provide () {
     return {
       injectedData: 'bar',
+      [symbolForInject]: 'foo',
     }
   },
 
   setup () {
     provide('fromSetup', 'Setup!!')
+    provide(symbolForSetup, 'Symbol from Setup')
   },
 }
 </script>