feat(client): support useInject for services

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, resolveComponent,
+  markRaw, onBeforeUnmount, onErrorCaptured, provide, ref, Ref, resolveComponent,
 } from 'vue'
 import ActionService from './plugins/action'
 import I18nService from './plugins/i18n'
@@ -28,6 +28,15 @@ export function useContext() {
   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', () => {
+    service.value = parent.get(name)
+  }))
+  return service
+}
+
 export function useRpc<T>(): Ref<T> {
   const parent = inject(kContext)!
   return parent.$entry.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 && ctx.manager && record.meta?.paths?.length"
+          v-if="showLink && manager && record.meta?.paths?.length"
           :to="'/plugins/' + record.meta.paths[0].replace(/\./, '/')"
         >
           <k-icon name="arrow-right"/>
@@ -18,23 +18,20 @@
 
 <script lang="ts" setup>
 
-import { Time, VirtualList, useContext } from '@cordisjs/client'
+import { Time, VirtualList, useInject } from '@cordisjs/client'
 import {} from '@cordisjs/plugin-manager/client'
 import Logger from 'reggol'
-import ansi from 'ansi_up'
+import AnsiUp from 'ansi_up'
 
 const props = defineProps<{
   logs: Logger.Record[],
   showLink?: boolean,
   maxHeight?: string,
 }>()
 
-const ctx = useContext()
+const manager = useInject('manager')
 
-console.log(ansi)
-
-// this package does not have consistent exports in different environments
-const converter = new (ansi['default'] || ansi)()
+const converter = new AnsiUp()
 
 function renderColor(code: number, value: any, decoration = '') {
   return `\u001b[3${code < 8 ? code : '8;5;' + code}${decoration}m${value}\u001b[0m`

plugins/logger/client/settings.vue

@@ -9,14 +9,14 @@
 
 <script setup lang="ts">
 
-import { useContext, useRpc } from '@cordisjs/client'
+import { useRpc, useInject } 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 ctx = useContext()
+const manager = useInject('manager')
 
 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(ctx.manager.currentEntry?.id)) continue
+    if (!data.value[index].meta?.paths?.includes(manager.value?.currentEntry?.id)) continue
     results.unshift(data.value[index])
   }
   return results

plugins/logger/src/index.ts

@@ -78,9 +78,8 @@ export async function apply(ctx: Context, config: Config) {
     colors: 3,
     record: (record: Logger.Record) => {
       record.meta ||= {}
-      const scope = record.meta[Context.current]?.scope
-      if (loader && scope) {
-        record.meta.paths = loader.paths(scope)
+      if (record.meta.ctx) {
+        record.meta.paths = loader?.locate(record.meta.ctx)
       }
       const date = new Date(record.timestamp).toISOString().slice(0, 10)
       if (writer.date !== date) {

plugins/notifier/client/config.vue

@@ -17,7 +17,7 @@ const ctx = useContext()
 
 const notifiers = computed(() => {
   return data.value.notifiers.filter((item) => {
-    return item.paths?.includes(ctx.manager.current.value!.path) && item.content
+    return item.paths?.includes(ctx.manager.currentEntry!.id) && item.content
   })
 })
 

plugins/notifier/client/index.ts

@@ -14,10 +14,12 @@ declare module '@cordisjs/client' {
 }
 
 export default (ctx: Context) => {
-  ctx.slot({
-    type: 'plugin-details',
-    component: Config,
-    order: 0,
+  ctx.inject(['manager'], (ctx) => {
+    ctx.slot({
+      type: 'plugin-details',
+      component: Config,
+      order: 0,
+    })
   })
 
   ctx.on('notifier/message', ({ content, type }) => {

plugins/notifier/src/index.ts

@@ -131,7 +131,7 @@ class NotifierService extends Service {
   }
 
   create(options: h.Fragment | Notifier.Options) {
-    return new Notifier(this[Context.current], options)
+    return new Notifier(this.ctx, options)
   }
 }
 

plugins/webui/src/shared/entry.ts

@@ -33,9 +33,9 @@ export class Entry<T = any> {
   }
 
   refresh() {
-    this.ctx.webui.broadcast('entry:refresh', async (client: Client) => ({
+    this.ctx.webui.broadcast('entry:refresh', (client: Client) => ({
       id: this.id,
-      data: await this.data!(),
+      data: this.data?.(),
     }))
   }
 

plugins/webui/src/shared/index.ts

@@ -48,7 +48,7 @@ export abstract class WebUI<T = unknown> extends Service<T> {
   abstract addListener<K extends keyof Events>(event: K, callback: Events[K]): void
 
   addEntry<T>(files: Entry.Files, data?: () => T) {
-    return new Entry(this[Context.origin], files, data)
+    return new Entry(this.ctx, files, data)
   }
 
   async broadcast(type: string, body: any) {