refa: fix webui production build

packages/client/app/home/home.vue

@@ -1,11 +1,7 @@
 <template>
   <k-layout :main="`darker page-home${socket ? '' : ' loading'}`">
     <el-scrollbar v-if="socket">
-      <k-slot name="home">
-        <k-slot-item :order="1000">
-          <welcome></welcome>
-        </k-slot-item>
-      </k-slot>
+      <k-slot name="home"></k-slot>
     </el-scrollbar>
     <div v-else>
       <k-card class="connect">正在连接到 Cordis 服务器……</k-card>
@@ -16,7 +12,6 @@
 <script lang="ts" setup>
 
 import { socket } from '@cordisjs/client'
-import Welcome from './welcome.vue'
 
 </script>
 
@@ -30,10 +25,6 @@ import Welcome from './welcome.vue'
     justify-content: center;
   }
 
-  .k-card.welcome {
-    margin: var(--card-margin);
-  }
-
   .k-card.connect {
     width: 400px;
     max-width: 400px;

packages/client/scripts/client.ts

@@ -1,19 +1,20 @@
 import { RollupOutput } from 'rollup'
-import { appendFile, copyFile } from 'fs/promises'
-import { resolve } from 'path'
+import { appendFile, copyFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import * as vite from 'vite'
 import unocss from 'unocss/vite'
 import mini from 'unocss/preset-mini'
 import vue from '@vitejs/plugin-vue'
 import yaml from '@maikolib/vite-plugin-yaml'
 
 function findModulePath(id: string) {
-  const path = require.resolve(id).replace(/\\/g, '/')
+  const path = fileURLToPath(import.meta.resolve(id)).replace(/\\/g, '/')
   const keyword = `/node_modules/${id}/`
   return path.slice(0, path.indexOf(keyword)) + keyword.slice(0, -1)
 }
 
-const cwd = resolve(__dirname, '../../..')
+const cwd = resolve(fileURLToPath(import.meta.url), '../../../..')
 const dist = cwd + '/plugins/webui/dist'
 
 export async function build(root: string, config: vite.UserConfig = {}, isClient = false) {

plugins/insight/package.json

@@ -2,16 +2,8 @@
   "name": "@cordisjs/plugin-insight",
   "description": "Show plugin dependency graph for Cordis",
   "version": "3.5.1",
-  "main": "lib/index.cjs",
-  "types": "lib/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./lib/index.mjs",
-      "require": "./lib/index.cjs",
-      "types": "./lib/index.d.ts"
-    },
-    "./package.json": "./package.json"
-  },
+  "type": "module",
+  "main": "lib/index.js",
   "files": [
     "lib",
     "dist",
@@ -52,14 +44,14 @@
   },
   "peerDependencies": {
     "@cordisjs/plugin-webui": "^0.28.3",
-    "cordis": "^4.17.4"
+    "cordis": "^3.14.0"
   },
   "devDependencies": {
     "@cordisjs/client": "^0.28.3",
     "@types/d3-force": "^3.0.9",
     "d3-force": "^3.0.0"
   },
   "dependencies": {
-    "@cordisjs/webui": "^0.28.3"
+    "cosmokit": "^1.6.2"
   }
 }

plugins/insight/src/index.ts

@@ -1,10 +1,11 @@
-import { camelize, capitalize, Context, EffectScope, ForkScope, Plugin, Schema, ScopeStatus } from 'koishi'
-import { DataService } from '@cordisjs/webui'
-import { resolve } from 'path'
+import { Context, EffectScope, ForkScope, Plugin, Schema, ScopeStatus } from 'cordis'
+import { camelize, capitalize } from 'cosmokit'
+import { DataService } from '@cordisjs/plugin-webui'
 import {} from '@cordisjs/loader'
+import assert from 'node:assert'
 
-declare module '@cordisjs/webui' {
-  namespace Console {
+declare module '@cordisjs/plugin-webui' {
+  namespace WebUI {
     interface Services {
       insight: Insight
     }
@@ -16,33 +17,30 @@ function format(name: string) {
 }
 
 function getName(plugin: Plugin) {
-  if (!plugin) return 'App'
+  if (!plugin) return 'Root'
   if (!plugin.name || plugin.name === 'apply') return 'Anonymous'
   return format(plugin.name)
 }
 
 function getSourceId(child: ForkScope) {
-  const { state } = child.parent
-  if (state.runtime.isForkable) {
-    return state.uid
+  const { scope } = child.parent
+  if (scope.runtime.isForkable) {
+    return scope.uid
   } else {
-    return state.runtime.uid
+    return scope.runtime.uid
   }
 }
 
 class Insight extends DataService<Insight.Payload> {
   constructor(ctx: Context) {
     super(ctx, 'insight')
 
-    ctx.console.addEntry(process.env.KOISHI_BASE ? [
-      process.env.KOISHI_BASE + '/dist/index.js',
-      process.env.KOISHI_BASE + '/dist/style.css',
-    ] : process.env.KOISHI_ENV === 'browser' ? [
-      // @ts-ignore
-      import.meta.url.replace(/\/src\/[^/]+$/, '/client/index.ts'),
-    ] : {
-      dev: resolve(__dirname, '../client/index.ts'),
-      prod: resolve(__dirname, '../dist'),
+    ctx.webui.addEntry({
+      dev: import.meta.resolve('../client/index.ts'),
+      prod: [
+        import.meta.resolve('../dist/index.js'),
+        import.meta.resolve('../dist/style.css'),
+      ],
     })
 
     const update = ctx.debounce(() => this.refresh(), 0)
@@ -69,9 +67,9 @@ class Insight extends DataService<Insight.Payload> {
 
     for (const runtime of this.ctx.registry.values()) {
       // Suppose we have the following types of nodes:
-      // - A, B: parent plugin states
-      // - X, Y: target fork states
-      // - M:    target main state
+      // - A, B: parent plugin scopes
+      // - X, Y: target fork scopes
+      // - M:    target main scope
       // - S:    service dependencies
 
       // We can divide plugins into three categories:
@@ -82,40 +80,43 @@ class Insight extends DataService<Insight.Payload> {
       // 3. non-reusable plugins
       //    will be displayed as A -> M -> S, B -> M -> S
 
-      function isActive(state: EffectScope) {
+      function isActive(scope: EffectScope) {
         // exclude plugins that don't work due to missing dependencies
-        // return runtime.using.every(name => state.ctx[name])
+        // return runtime.using.every(name => scope.ctx[name])
         return true
       }
 
       const name = getName(runtime.plugin)
 
-      function addNode(state: EffectScope) {
-        const { uid, key, disposables, status } = state
+      function addNode(scope: EffectScope) {
+        const { uid, entry, disposables, status, runtime } = scope
+        assert(uid !== null)
         const weight = disposables.length
-        const isGroup = name === 'Group'
+        const isGroup = !!runtime.plugin?.[Symbol.for('cordis.group')]
         const isRoot = uid === 0
-        const node = { uid, name, weight, status, isGroup, isRoot, services: services[uid] }
-        if (key) node.name += ` [${key}]`
+        const node = { uid, name, weight, status, isGroup, isRoot, services: services[uid!] }
+        if (entry) node.name += ` [${entry.options.id}]`
         nodes.push(node)
       }
 
-      function addEdge(type: 'dashed' | 'solid', source: number, target: number) {
+      function addEdge(type: 'dashed' | 'solid', source: number | null, target: number | null) {
+        assert(source !== null)
+        assert(target !== null)
         edges.push({ type, source, target })
       }
 
-      const addDeps = (state: EffectScope) => {
+      const addDeps = (scope: EffectScope) => {
         for (const name of runtime.using) {
           const instance = this.ctx.get(name)
           if (!(instance instanceof Object)) continue
           const ctx: Context = Reflect.getOwnPropertyDescriptor(instance, Context.current)?.value
-          const uid = ctx?.state.uid
+          const uid = ctx?.scope.uid
           if (!uid) continue
-          addEdge('dashed', uid, state.uid)
+          addEdge('dashed', uid, scope.uid)
         }
       }
 
-      const isReusable = runtime.plugin?.['reusable']
+      const isReusable = runtime.plugin?.reusable
       if (!isReusable) {
         if (!isActive(runtime)) continue
         addNode(runtime)