fix(console): use ref to fix reactivity issue

packages/client/app/status/loading.vue

@@ -15,7 +15,7 @@ const ctx = useContext()
 
 const progress = computed(() => {
   const states = Object.values(ctx.internal.extensions)
-  return states.filter(state => state.done).length / states.length
+  return states.filter(state => state.done.value).length / states.length
 })
 
 </script>

packages/client/client/context.ts

@@ -3,7 +3,7 @@ import { Schema, SchemaBase } from '@koishijs/components'
 import { Dict, Intersect, remove } from 'cosmokit'
 import {
   App, Component, createApp, defineComponent, h, inject, markRaw, MaybeRefOrGetter,
-  onBeforeUnmount, provide, reactive, resolveComponent, shallowReactive, toValue,
+  onBeforeUnmount, provide, reactive, Ref, resolveComponent, shallowReactive, toValue,
 } from 'vue'
 import { activities, Activity } from './activity'
 import { SlotOptions } from './components'
@@ -41,7 +41,7 @@ export function useContext() {
   return fork.ctx
 }
 
-export function useRpc<T>(): T {
+export function useRpc<T>(): Ref<T> {
   const parent = inject('cordis') as Context
   return parent.extension?.data
 }

packages/client/client/loader.ts

@@ -1,4 +1,4 @@
-import { reactive, watch } from 'vue'
+import { ref, Ref, shallowReactive, watch } from 'vue'
 import { Context, Dict, receive, root, store } from '.'
 import { EffectScope } from 'cordis'
 
@@ -35,12 +35,12 @@ const loaders: Dict<(ctx: Context, url: string) => Promise<void>> = {
 
 export interface LoadResult {
   scope: EffectScope
-  done: boolean
   paths: string[]
-  data: any
+  done: Ref<boolean>
+  data: Ref
 }
 
-export const extensions: Dict<LoadResult> = reactive({})
+export const extensions: Dict<LoadResult> = shallowReactive({})
 
 let backendId: any
 
@@ -62,14 +62,14 @@ export const initTask = new Promise<void>((resolve) => {
     await Promise.all(Object.entries(rest).map(([key, { files, paths, data }]) => {
       if (extensions[key]) return
       const scope = root.isolate(['extension']).plugin(() => {})
-      scope.ctx.extension = extensions[key] = { done: false, scope, paths, data }
+      scope.ctx.extension = extensions[key] = { done: ref(false), scope, paths, data: ref(data) }
       const task = Promise.all(files.map((url) => {
         for (const ext in loaders) {
           if (!url.endsWith(ext)) continue
           return loaders[ext](scope.ctx, url)
         }
       }))
-      task.finally(() => extensions[key].done = true)
+      task.finally(() => extensions[key].done.value = true)
     }))
 
     if (!oldValue) {
@@ -83,5 +83,5 @@ receive('entry-data', ({ id, data }) => {
   const entry = store.entry?.[id]
   if (!entry) return
   entry.data = data
-  extensions[id].data = data
+  extensions[id].data.value = data
 })

plugins/admin/client/group.vue

@@ -135,12 +135,12 @@ interface Active {
 const active = computed<Active>(() => {
   if (route.path.startsWith('/admin/group/')) {
     const id = route.path.slice(13)
-    if (id in data.group) {
+    if (id in data.value.group) {
       return { type: 'group', id }
     }
   } else if (route.path.startsWith('/admin/track/')) {
     const id = route.path.slice(13)
-    if (id in data.track) {
+    if (id in data.value.track) {
       return { type: 'track', id }
     }
   }
@@ -153,7 +153,7 @@ const activeGroup = computed<string>({
     return active.value.id
   },
   set(id) {
-    if (!(id in data.group)) id = ''
+    if (!(id in data.value.group)) id = ''
     router.replace('/admin/group/' + id)
   },
 })
@@ -164,7 +164,7 @@ const activeTrack = computed<string>({
     return active.value.id
   },
   set(id) {
-    if (!(id in data.track)) id = ''
+    if (!(id in data.value.track)) id = ''
     router.replace('/admin/track/' + id)
   },
 })

plugins/admin/package.json

@@ -66,7 +66,6 @@
     "@types/throttle-debounce": "^2.1.0"
   },
   "dependencies": {
-    "@koishijs/console": "^5.23.4",
     "throttle-debounce": "^3.0.1"
   }
 }

plugins/admin/src/index.ts

@@ -1,5 +1,5 @@
 import { $, Context, Dict, remove, Schema, Service } from 'koishi'
-import { Entry } from '@koishijs/console'
+import type { Entry } from '@koishijs/console'
 import { resolve } from 'path'
 import command from './command'
 import zhCN from './locales/zh-CN.yml'