feat(webui): drop data service, enhance entry sync

packages/client/app/status/loading.vue

@@ -1,20 +1,20 @@
 <template>
   <k-status v-if="progress < 1">
-    <el-progress :indeterminate="!store.entry" :percentage="progress * 100">
+    <el-progress :indeterminate="!ctx.$loader.id" :percentage="progress * 100">
       正在加载页面组件
     </el-progress>
   </k-status>
 </template>
 
 <script lang="ts" setup>
 
-import { store, useContext } from '@cordisjs/client'
+import { useContext } from '@cordisjs/client'
 import { computed } from 'vue'
 
 const ctx = useContext()
 
 const progress = computed(() => {
-  const states = Object.values(ctx.$loader.extensions)
+  const states = Object.values(ctx.$loader.entries)
   return states.filter(state => state.done.value).length / states.length
 })
 

packages/client/app/theme/index.vue

@@ -1,18 +1,16 @@
 <template>
   <activity-bar></activity-bar>
-  <router-view v-if="loaded" #="{ Component }">
+  <router-view #="{ Component }">
     <keep-alive>
       <component :is="Component"></component>
     </keep-alive>
   </router-view>
-  <div class="loading" v-else v-loading="true" element-loading-text="正在加载数据……"></div>
   <status-bar></status-bar>
   <menu-list></menu-list>
 </template>
 
 <script lang="ts" setup>
 
-import { store } from '@cordisjs/client'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import ActivityBar from './activity/index.vue'
@@ -21,9 +19,4 @@ import MenuList from './menu/index.vue'
 
 const route = useRoute()
 
-const loaded = computed(() => {
-  if (!route.meta.activity?.fields) return true
-  return route.meta.activity.fields.every((key) => store[key])
-})
-
 </script>

packages/client/client/components/index.ts

@@ -1,12 +1,9 @@
 import { App } from 'vue'
 import Markdown from 'marked-vue'
-import components, { SchemaBase } from '@cordisjs/components'
+import components from '@cordisjs/components'
 import Element, { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 
-import { store } from '../data'
 import common from './common'
-import Dynamic from './dynamic.vue'
-import Perms from './perms.vue'
 import ChatImage from './chat/image.vue'
 import * as icons from './icons'
 import layout from './layout'
@@ -29,20 +26,6 @@ export * from '@cordisjs/components'
 
 export { icons, ChatImage }
 
-SchemaBase.extensions.add({
-  type: 'any',
-  role: 'dynamic',
-  component: Dynamic,
-})
-
-SchemaBase.extensions.add({
-  type: 'array',
-  role: 'perms',
-  component: Perms,
-  // @ts-ignore
-  validate: () => !!store.permissions,
-})
-
 export default function (app: App) {
   app.use(Element)
   app.component('k-markdown', Markdown)

packages/client/client/plugins/loader.ts

@@ -1,9 +1,10 @@
-import { Ref, ref, shallowReactive, watch } from 'vue'
+import { Ref, ref, shallowReactive } from 'vue'
 import { Context } from '../context'
 import { Service } from '../utils'
-import { receive, store } from '../data'
+import { receive } from '../data'
 import { ForkScope } from 'cordis'
 import { defineProperty, Dict } from 'cosmokit'
+import { Entry } from '@cordisjs/plugin-webui'
 
 declare module '../context' {
   interface Context {
@@ -57,30 +58,30 @@ const loaders: Dict<LoaderFactory> = {
 }
 
 export interface LoadState {
-  fork?: ForkScope
+  forks: ForkScope[]
   paths: string[]
   done: Ref<boolean>
   data: Ref
 }
 
 export default class LoaderService extends Service {
-  private backendId: any
+  public id?: string
 
-  public extensions: Dict<LoadState> = shallowReactive({})
+  public entries: Dict<LoadState> = shallowReactive({})
 
   constructor(ctx: Context) {
     super(ctx, '$loader', true)
 
-    receive('entry:data', ({ id, data }) => {
-      const entry = store.entry?.[id]
+    receive('entry:refresh', ({ id, data }) => {
+      const entry = this.entries[id]
       if (!entry) return
-      this.extensions[id].data.value = data
+      entry.data.value = data
     })
 
     receive('entry:patch', ({ id, data, key }) => {
-      const entry = store.entry?.[id]
+      const entry = this.entries[id]
       if (!entry) return
-      let node = this.extensions[id].data.value
+      let node = entry.data.value
       const parts: string[] = key ? key.split('.') : []
       while (parts.length) {
         const part = parts.shift()!
@@ -91,35 +92,36 @@ export default class LoaderService extends Service {
   }
 
   initTask = new Promise<void>((resolve) => {
-    watch(() => store.entry, async (newValue, oldValue) => {
-      const { _id, ...rest } = newValue || {}
-      if (this.backendId && _id && this.backendId !== _id) {
-        window.location.reload()
-        return
+    receive('entry:init', async (value) => {
+      const { _id, ...rest } = value as Dict<Entry.Data> & { _id?: string }
+      if (this.id && _id && this.id !== _id as unknown) {
+        return window.location.reload()
       }
-      this.backendId = _id
+      this.id = _id
 
-      for (const key in this.extensions) {
+      for (const key in this.entries) {
         if (rest[key]) continue
-        this.extensions[key].fork?.dispose()
-        delete this.extensions[key]
+        for (const fork of this.entries[key].forks) {
+          fork?.dispose()
+        }
+        delete this.entries[key]
       }
 
-      await Promise.all(Object.entries(rest).map(([key, { files, paths, data }]) => {
-        if (this.extensions[key]) return
+      await Promise.all(Object.entries(rest).map(([key, { files, paths = [], data }]) => {
+        if (this.entries[key]) return
         const ctx = this.ctx.isolate('$entry')
-        ctx.$entry = this.extensions[key] = { done: ref(false), paths, data: ref(data) }
+        ctx.$entry = this.entries[key] = { done: ref(false), paths, data: ref(data), forks: [] }
 
-        const task = Promise.all(files.map(async (url) => {
+        const task = Promise.allSettled(files.map(async (url, index) => {
           for (const ext in loaders) {
             if (!url.endsWith(ext)) continue
-            ctx.$entry!.fork = await loaders[ext](ctx, url)
+            ctx.$entry!.forks[index] = await loaders[ext](ctx, url)
           }
         }))
-        task.finally(() => this.extensions[key].done.value = true)
+        task.then(() => this.entries[key].done.value = true)
       }))
 
-      if (!oldValue) resolve()
-    }, { deep: true })
+      if (_id) resolve()
+    })
   })
 }

packages/client/client/plugins/router.ts

@@ -3,7 +3,7 @@ import Overlay from '../components/chat/overlay.vue'
 import { Context } from '../context'
 import { insert, Service } from '../utils'
 import { Component, MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
-import { global, Store, store } from '../data'
+import { global } from '../data'
 import { Dict, omit, remove } from 'cosmokit'
 import { Disposable } from 'cordis'
 import { SlotOptions } from '../components'
@@ -41,10 +41,8 @@ export namespace Activity {
     authority?: number
     position?: 'top' | 'bottom'
     /** @deprecated */
-    fields?: (keyof Store)[]
-    /** @deprecated */
     when?: () => boolean
-    disabled?: () => boolean
+    disabled?: () => boolean | undefined
   }
 }
 
@@ -69,15 +67,14 @@ export class Activity {
     this.id ??= id
     this.handleUpdate()
     this.authority ??= 0
-    this.fields ??= []
     ctx.$router.pages[this.id] = this
   }
 
   handleUpdate() {
     if (redirectTo.value) {
       const location = this.ctx.$router.router.resolve(redirectTo.value)
       if (location.matched.length) {
-        redirectTo.value = null
+        redirectTo.value = undefined
         this.ctx.$router.router.replace(location)
       }
     }
@@ -97,7 +94,6 @@ export class Activity {
 
   disabled() {
     if (this.ctx.bail('activity', this)) return true
-    if (!this.fields.every(key => store[key])) return true
     if (this.when && !this.when()) return true
     if (this.options.disabled?.()) return true
   }

plugins/webui/src/browser.ts

@@ -5,7 +5,7 @@ import {} from '@cordisjs/loader'
 
 export * from './shared/index.ts'
 
-class BrowserConsole extends WebUI {
+class BrowserWebUI extends WebUI {
   start() {
     this.accept(this.ctx.loader[Symbol.for('cordis.webui.socket')])
   }
@@ -16,10 +16,10 @@ class BrowserConsole extends WebUI {
   }
 }
 
-namespace BrowserConsole {
+namespace BrowserWebUI {
   export interface Config {}
 
   export const Config: Schema<Config> = Schema.object({})
 }
 
-export default BrowserConsole
+export default BrowserWebUI