From 0fe9acee5f5336d7007dd76a65770004007743d9 Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Mon, 29 Apr 2024 17:09:56 +0800
Subject: [PATCH] feat(webui): drop data service, enhance entry sync

---
 packages/client/app/status/loading.vue        |  6 +-
 packages/client/app/theme/index.vue           |  9 +--
 packages/client/client/components/dynamic.vue | 54 -----------------
 packages/client/client/components/index.ts    | 19 +-----
 packages/client/client/components/perms.vue   | 60 -------------------
 packages/client/client/plugins/loader.ts      | 56 ++++++++---------
 packages/client/client/plugins/router.ts      | 10 +---
 plugins/webui/src/browser.ts                  |  6 +-
 plugins/webui/src/index.ts                    | 23 ++++---
 plugins/webui/src/shared/client.ts            | 58 +++---------------
 plugins/webui/src/shared/entry.ts             | 28 +++++++--
 plugins/webui/src/shared/service.ts           | 39 ------------
 12 files changed, 82 insertions(+), 286 deletions(-)
 delete mode 100644 packages/client/client/components/dynamic.vue
 delete mode 100644 packages/client/client/components/perms.vue
 delete mode 100644 plugins/webui/src/shared/service.ts

diff --git a/packages/client/app/status/loading.vue b/packages/client/app/status/loading.vue
index c83347e..0092ce8 100644
--- a/packages/client/app/status/loading.vue
+++ b/packages/client/app/status/loading.vue
@@ -1,6 +1,6 @@
 <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>
@@ -8,13 +8,13 @@
 
 <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
 })
 
diff --git a/packages/client/app/theme/index.vue b/packages/client/app/theme/index.vue
index 1d08426..91e61b6 100644
--- a/packages/client/app/theme/index.vue
+++ b/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>
diff --git a/packages/client/client/components/dynamic.vue b/packages/client/client/components/dynamic.vue
deleted file mode 100644
index d11dd59..0000000
--- a/packages/client/client/components/dynamic.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <k-schema
-    v-if="inner"
-    :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    :schema="{ ...inner, meta: { ...inner.meta, ...schema.meta } }"
-    :initial="initial"
-    :disabled="disabled"
-    :prefix="prefix"
-  >
-    <template #title><slot name="title"></slot></template>
-    <template #prefix><slot name="prefix"></slot></template>
-    <template #suffix><slot name="suffix"></slot></template>
-  </k-schema>
-
-  <schema-base
-    v-else
-    :modelValue="modelValue"
-    @update:modelValue="$emit('update:modelValue', $event)"
-    :schema="schema"
-    :initial="initial"
-    :disabled="disabled"
-    :prefix="prefix"
-  >
-    <template #title><slot name="title"></slot></template>
-    <template #desc><slot name="desc"></slot></template>
-    <template #menu><slot name="menu"></slot></template>
-  </schema-base>
-</template>
-
-<script setup lang="ts">
-
-import { computed, PropType } from 'vue'
-import { store } from '../data'
-import { Schema, SchemaBase } from '@cordisjs/components'
-
-const props = defineProps({
-  schema: {} as PropType<Schema>,
-  modelValue: {} as PropType<any>,
-  disabled: {} as PropType<boolean>,
-  prefix: {} as PropType<string>,
-  initial: {} as PropType<any>,
-  extra: {} as PropType<any>,
-})
-
-defineEmits(['update:modelValue'])
-
-const inner = computed(() => {
-  const hydrated = store.schema?.[props.schema?.meta.extra?.name]
-  return hydrated && new Schema(hydrated)
-})
-
-</script>
-
diff --git a/packages/client/client/components/index.ts b/packages/client/client/components/index.ts
index cc77108..1ebaa3d 100644
--- a/packages/client/client/components/index.ts
+++ b/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)
diff --git a/packages/client/client/components/perms.vue b/packages/client/client/components/perms.vue
deleted file mode 100644
index b208632..0000000
--- a/packages/client/client/components/perms.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <schema-base>
-    <template #title><slot name="title"></slot></template>
-    <template #desc><slot name="desc"></slot></template>
-    <template #menu><slot name="menu"></slot></template>
-    <template #prefix><slot name="prefix"></slot></template>
-    <template #suffix><slot name="suffix"></slot></template>
-    <template #control>
-      <el-cascader
-        collapse-tags
-        v-model="config"
-        :options="options"
-        :props="{ multiple: true, checkStrictly: true, emitPath: false }"
-        :disabled="disabled">
-      </el-cascader>
-    </template>
-  </schema-base>
-</template>
-
-<script lang="ts" setup>
-
-import { computed, PropType } from 'vue'
-import { store } from '@cordisjs/client'
-import type { CascaderOption } from 'element-plus'
-import SchemaBase, { Schema } from 'schemastery-vue'
-
-defineProps({
-  schema: {} as PropType<Schema>,
-  modelValue: {} as PropType<string>,
-  disabled: {} as PropType<boolean>,
-  prefix: {} as PropType<string>,
-  initial: {} as PropType<{}>,
-})
-
-defineEmits(['update:modelValue'])
-
-const config = SchemaBase.useModel()
-
-function addNode(nodes: CascaderOption[], path: string[], prefix = '') {
-  const name = path.shift()
-  let node = nodes.find(node => node.value === prefix + name)
-  if (!node) {
-    node = { value: prefix + name, label: name, disabled: !!path.length }
-    nodes.push(node)
-  }
-  if (!path.length) return
-  addNode(node.children ||= [], path, prefix + name + ':')
-}
-
-const options = computed(() => {
-  const result: CascaderOption[] = []
-  for (const name of store.permissions) {
-    const path = name.split(':')
-    addNode(result, path)
-  }
-  console.log(result)
-  return result
-})
-
-</script>
diff --git a/packages/client/client/plugins/loader.ts b/packages/client/client/plugins/loader.ts
index b21f723..7ca44a8 100644
--- a/packages/client/client/plugins/loader.ts
+++ b/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()
+    })
   })
 }
diff --git a/packages/client/client/plugins/router.ts b/packages/client/client/plugins/router.ts
index 4d4b822..5870aa5 100644
--- a/packages/client/client/plugins/router.ts
+++ b/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,7 +67,6 @@ export class Activity {
     this.id ??= id
     this.handleUpdate()
     this.authority ??= 0
-    this.fields ??= []
     ctx.$router.pages[this.id] = this
   }
 
@@ -77,7 +74,7 @@ export class Activity {
     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
   }
diff --git a/plugins/webui/src/browser.ts b/plugins/webui/src/browser.ts
index 95661f6..7e950fa 100644
--- a/plugins/webui/src/browser.ts
+++ b/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
diff --git a/plugins/webui/src/index.ts b/plugins/webui/src/index.ts
index 34d8445..b7de353 100644
--- a/plugins/webui/src/index.ts
+++ b/plugins/webui/src/index.ts
@@ -1,12 +1,12 @@
 import { Context, Schema } from 'cordis'
 import { Dict, makeArray, noop, Time } from 'cosmokit'
 import { WebSocketLayer } from '@cordisjs/plugin-server'
-import { Entry, WebUI } from './shared/index.ts'
 import { FileSystemServeOptions, ViteDevServer } from 'vite'
 import { extname, resolve } from 'node:path'
 import { createReadStream, existsSync, Stats } from 'node:fs'
 import { readFile, stat } from 'node:fs/promises'
-import { fileURLToPath } from 'node:url'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import { Entry, WebUI } from './shared'
 import open from 'open'
 
 declare module 'cordis' {
@@ -15,7 +15,7 @@ declare module 'cordis' {
   }
 }
 
-export * from './shared/index.ts'
+export * from './shared'
 
 function escapeHTML(source: string, inline = false) {
   const result = (source ?? '')
@@ -41,14 +41,14 @@ interface HeartbeatConfig {
   timeout?: number
 }
 
-class NodeConsole extends WebUI<NodeConsole.Config> {
+class NodeWebUI extends WebUI<NodeWebUI.Config> {
   static inject = ['server']
 
   public vite!: ViteDevServer
   public root: string
   public layer: WebSocketLayer
 
-  constructor(public ctx: Context, config: NodeConsole.Config) {
+  constructor(public ctx: Context, config: NodeWebUI.Config) {
     super(ctx, config)
 
     this.layer = ctx.server.ws(config.apiPath, (socket, request) => {
@@ -202,16 +202,15 @@ class NodeConsole extends WebUI<NodeConsole.Config> {
         name: 'cordis-hmr',
         transform: (code, id, options) => {
           for (const [key, { files }] of Object.entries(this.entries)) {
-            if (typeof files === 'string' || Array.isArray(files)) continue
-            if (fileURLToPath(files.dev) !== id) continue
+            const index = makeArray(this.getFiles(files)).indexOf(pathToFileURL(id).href)
+            if (index < 0) continue
             return {
               code: code + [
                 'if (import.meta.hot) {',
                 '  import.meta.hot.accept(async (module) => {',
                 '    const { root } = await import("@cordisjs/client");',
-                `    const entry = root.$loader.extensions["${key}"];`,
-                '    if (!entry?.fork) return;',
-                '    entry.fork.update(module, true);',
+                `    const fork = root.$loader.entries["${key}"]?.forks[${index}];`,
+                '    fork?.update(module, true);',
                 '  });',
                 '}',
               ].join('\n') + '\n',
@@ -234,7 +233,7 @@ class NodeConsole extends WebUI<NodeConsole.Config> {
   }
 }
 
-namespace NodeConsole {
+namespace NodeWebUI {
   export interface Dev {
     fs: FileSystemServeOptions
   }
@@ -326,4 +325,4 @@ namespace NodeConsole {
   ])
 }
 
-export default NodeConsole
+export default NodeWebUI
diff --git a/plugins/webui/src/shared/client.ts b/plugins/webui/src/shared/client.ts
index f22e657..a0b90d3 100644
--- a/plugins/webui/src/shared/client.ts
+++ b/plugins/webui/src/shared/client.ts
@@ -1,27 +1,17 @@
 import { Context, Logger } from 'cordis'
-import { WebSocket } from './types.ts'
-import { DataService } from './service.ts'
 import { IncomingMessage } from 'node:http'
+import { WebSocket } from './types.ts'
 
 const logger = new Logger('webui')
 
-export function coerce(val: any) {
-  // resolve error when stack is undefined, e.g. axios error with status code 401
-  const { message, stack } = val instanceof Error && val.stack ? val : new Error(val as any)
-  const lines = stack!.split('\n')
-  const index = lines.findIndex(line => line.endsWith(message))
-  return lines.slice(index).join('\n')
-}
-
 export class Client {
   readonly id = Math.random().toString(36).slice(2)
 
   constructor(readonly ctx: Context, public socket: WebSocket, public request?: IncomingMessage) {
     socket.addEventListener('message', this.receive)
-    ctx.on('dispose', () => {
-      socket.removeEventListener('message', this.receive)
-    })
-    this.refresh()
+    const webui = this.ctx.get('webui')!
+    const body = { ...webui.entries, _id: webui.id }
+    this.send({ type: 'entry:init', body })
   }
 
   send(payload: any) {
@@ -29,44 +19,12 @@ export class Client {
   }
 
   receive = async (data: WebSocket.MessageEvent) => {
-    const { type, args, id } = JSON.parse(data.data.toString())
+    const { type, body } = JSON.parse(data.data.toString())
     const listener = this.ctx.get('webui')!.listeners[type]
     if (!listener) {
-      logger.info('unknown message:', type, ...args)
-      return this.send({ type: 'response', body: { id, error: 'not implemented' } })
-    }
-
-    if (await this.ctx.serial('webui/intercept', this, listener)) {
-      return this.send({ type: 'response', body: { id, error: 'unauthorized' } })
+      logger.info('unknown message:', type, body)
+      return
     }
-
-    try {
-      const value = await listener.callback.call(this, ...args)
-      return this.send({ type: 'response', body: { id, value } })
-    } catch (e) {
-      logger.debug(e)
-      const error = coerce(e)
-      return this.send({ type: 'response', body: { id, error } })
-    }
-  }
-
-  refresh() {
-    Object.keys(this.ctx.root[Context.internal]).forEach(async (name) => {
-      if (!name.startsWith('webui:')) return
-      const key = name.slice(6)
-      const service = this.ctx.get(name) as DataService
-      if (!service) return
-      if (await this.ctx.serial('webui/intercept', this, service.options)) {
-        return this.send({ type: 'data', body: { key, value: null } })
-      }
-
-      try {
-        const value = await service.get(false, this)
-        if (!value) return
-        this.send({ type: 'data', body: { key, value } })
-      } catch (error) {
-        logger.warn(error)
-      }
-    })
+    return listener.call(this, body)
   }
 }
diff --git a/plugins/webui/src/shared/entry.ts b/plugins/webui/src/shared/entry.ts
index cda87df..e92051a 100644
--- a/plugins/webui/src/shared/entry.ts
+++ b/plugins/webui/src/shared/entry.ts
@@ -8,25 +8,35 @@ export namespace Entry {
     dev: string
     prod: string | string[]
   }
+
+  export interface Data {
+    files: string[]
+    paths?: string[]
+    data?: any
+  }
 }
 
 export class Entry<T = any> {
   public id = Math.random().toString(36).slice(2)
   public dispose: () => void
 
-  constructor(public ctx: Context, public files: Entry.Files, public data?: (client: Client) => T) {
+  constructor(public ctx: Context, public files: Entry.Files, public data?: () => T) {
     ctx.webui.entries[this.id] = this
-    ctx.webui.refresh('entry')
+    ctx.webui.broadcast('entry:init', {
+      [this.id]: this,
+    })
     this.dispose = ctx.collect('entry', () => {
       delete this.ctx.webui.entries[this.id]
-      ctx.webui.refresh('entry')
+      ctx.webui.broadcast('entry:init', {
+        [this.id]: null,
+      })
     })
   }
 
   refresh() {
-    this.ctx.webui.broadcast('entry:data', async (client: Client) => ({
+    this.ctx.webui.broadcast('entry:refresh', async (client: Client) => ({
       id: this.id,
-      data: await this.data!(client),
+      data: await this.data!(),
     }))
   }
 
@@ -37,4 +47,12 @@ export class Entry<T = any> {
       key,
     })
   }
+
+  toJSON(): Entry.Data {
+    return {
+      files: this.ctx.webui.resolveEntry(this.files, this.id),
+      paths: this.ctx.get('loader')?.paths(this.ctx.scope),
+      data: this.data?.(),
+    }
+  }
 }
diff --git a/plugins/webui/src/shared/service.ts b/plugins/webui/src/shared/service.ts
deleted file mode 100644
index 70c96e6..0000000
--- a/plugins/webui/src/shared/service.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Context, Service } from 'cordis'
-import WebUI, { Client } from './index.ts'
-
-export namespace DataService {
-  export interface Options {
-    immediate?: boolean
-    authority?: number
-  }
-}
-
-export abstract class DataService<T = never> extends Service {
-  static inject = ['webui']
-
-  public async get(forced?: boolean, client?: Client): Promise<T> {
-    return null as T
-  }
-
-  constructor(protected ctx: Context, protected key: keyof WebUI.Services, public options: DataService.Options = {}) {
-    super(ctx, `webui:${key}`, options.immediate)
-  }
-
-  start() {
-    this.refresh()
-  }
-
-  async refresh(forced = true) {
-    this.ctx.get('webui')?.broadcast('data', async (client: Client) => ({
-      key: this.key,
-      value: await this.get(forced, client),
-    }), this.options)
-  }
-
-  patch(value: T) {
-    this.ctx.get('webui')?.broadcast('patch', {
-      key: this.key,
-      value,
-    }, this.options)
-  }
-}