feat(client): support reactive ctx[service]

packages/client/client/context.ts

@@ -1,7 +1,7 @@
 import * as cordis from 'cordis'
 import {
-  App, Component, createApp, DefineComponent, defineComponent, h, inject, InjectionKey,
-  markRaw, onBeforeUnmount, onErrorCaptured, provide, ref, Ref, resolveComponent,
+  App, Component, createApp, customRef, defineComponent, DefineComponent, h, inject,
+  InjectionKey, markRaw, onErrorCaptured, onScopeDispose, provide, Ref, ref, resolveComponent,
 } from 'vue'
 import ActionService from './plugins/action'
 import I18nService from './plugins/i18n'
@@ -24,14 +24,14 @@ const kContext = Symbol('context') as InjectionKey<Context>
 export function useContext() {
   const parent = inject(kContext)!
   const fork = parent.plugin(() => {})
-  onBeforeUnmount(() => fork.dispose())
+  onScopeDispose(() => fork.dispose())
   return fork.ctx
 }
 
 export function useInject<K extends string & keyof Context>(name: K): Ref<Context[K]> {
   const parent = inject(kContext)!
   const service = ref(parent.get(name))
-  onBeforeUnmount(parent.on('internal/service', () => {
+  onScopeDispose(parent.on('internal/service', () => {
     service.value = parent.get(name)
   }))
   return service
@@ -47,6 +47,8 @@ export interface Internal {}
 export class Context extends cordis.Context {
   app: App
 
+  private _store: Record<string | symbol, Ref<any>> = Object.create(null)
+
   constructor() {
     super()
     this.internal = {} as Internal
@@ -65,6 +67,20 @@ export class Context extends cordis.Context {
     this.plugin(SettingService)
     this.plugin(ThemeService)
 
+    this.on('internal/service', function (name) {
+      // trigger
+      const ref1 = this._store[this[Context.isolate][name]]
+      if (ref1) ref1.value = Symbol(name)
+      const ref2 = this._store[name]
+      if (ref2) ref2.value = Symbol(name)
+    }, { global: true })
+
+    this.on('internal/inject', function (name) {
+      // track
+      const ref = this._store[this[Context.isolate][name] ?? name] ??= customRef((get, set) => ({ get, set }))
+      return ref.value, false
+    }, { prepend: true })
+
     this.on('ready', async () => {
       await this.$loader.initTask
       this.app.use(this.$i18n.i18n)

packages/client/client/plugins/loader.ts

@@ -88,7 +88,7 @@ export default class LoaderService extends Service {
         node = node[part]
       }
       if (Array.isArray(node)) {
-        node.push(data)
+        node.push(...data)
       } else {
         Object.assign(node, data)
       }

plugins/logger/client/logs.vue

@@ -6,7 +6,7 @@
         <!-- FIXME: ctx.manager is not reactive -->
         <router-link
           class="log-link inline-flex items-center justify-center absolute w-20px h-20px bottom-0 right-0"
-          v-if="showLink && manager && record.meta?.paths?.length"
+          v-if="showLink && ctx.manager && record.meta?.paths?.length"
           :to="'/plugins/' + record.meta.paths[0].replace(/\./, '/')"
         >
           <k-icon name="arrow-right"/>
@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 
-import { Time, VirtualList, useInject } from '@cordisjs/client'
+import { Time, VirtualList, useContext } from '@cordisjs/client'
 import {} from '@cordisjs/plugin-manager/client'
 import Logger from 'reggol'
 import AnsiUp from 'ansi_up'
@@ -29,7 +29,7 @@ const props = defineProps<{
   maxHeight?: string,
 }>()
 
-const manager = useInject('manager')
+const ctx = useContext()
 
 const converter = new AnsiUp()
 

plugins/logger/client/settings.vue

@@ -9,14 +9,14 @@
 
 <script setup lang="ts">
 
-import { useRpc, useInject } from '@cordisjs/client'
+import { useRpc, useContext } from '@cordisjs/client'
 import { computed } from 'vue'
 import {} from '@cordisjs/plugin-manager/client'
 import type { Logger } from 'cordis'
 import Logs from './logs.vue'
 
 const data = useRpc<Logger.Record[]>()
-const manager = useInject('manager')
+const ctx = useContext()
 
 const logs = computed(() => {
   if (!data.value) return []
@@ -25,7 +25,7 @@ const logs = computed(() => {
   for (let index = data.value.length - 1; index > 0; --index) {
     if (data.value[index].id >= last) break
     last = data.value[index].id
-    if (!data.value[index].meta?.paths?.includes(manager.value?.currentEntry?.id)) continue
+    if (!data.value[index].meta?.paths?.includes(ctx.manager?.currentEntry?.id)) continue
     results.unshift(data.value[index])
   }
   return results