fix(webui): auto inject css, fix #214

packages/plugin-webui/build/index.ts

@@ -30,6 +30,11 @@ function build(root: string, config: vite.UserConfig) {
         output: rollupOptions?.input ? {
           format: 'module',
           entryFileNames: '[name].js',
+          globals: {
+            [root + '/vue.js']: 'Vue',
+            [root + '/vue-router.js']: 'VueRouter',
+            [root + '/client.js']: 'KoishiClient',
+          },
           ...rollupOptions.output,
         } : undefined,
       },
@@ -53,9 +58,12 @@ function buildExtension(name: string) {
     build: {
       outDir: 'dist',
       assetsDir: '',
-      minify: false,
+      minify: 'esbuild',
       rollupOptions: {
         input: root + '/client/index.ts',
+        output: {
+          format: 'iife',
+        },
       },
     },
   })

packages/plugin-webui/client/global.d.ts

@@ -13,4 +13,8 @@ declare module '~/client' {
   export * from 'koishi-plugin-webui/client'
 }
 
+declare const Vue: typeof import('vue')
+declare const VueRouter: typeof import('vue-router')
+declare const KoishiClient: typeof import('~/client')
+
 declare const KOISHI_CONFIG: import('~/server').ClientConfig

packages/plugin-webui/client/index.ts

@@ -76,30 +76,7 @@ export const registry = ref<Registry.Payload>(null)
 export const stats = ref<Statistics.Payload>(null)
 export const socket = ref<WebSocket>(null)
 
-const listeners: Record<string, (data: any) => void> = {}
-
-export function start() {
-  const endpoint = new URL(KOISHI_CONFIG.endpoint, location.origin).toString()
-  socket.value = new WebSocket(endpoint.replace(/^http/, 'ws'))
-  socket.value.onmessage = (ev) => {
-    const data = JSON.parse(ev.data)
-    console.debug(data)
-    if (data.type in listeners) {
-      listeners[data.type](data.body)
-    }
-  }
-  receive('meta', data => meta.value = data)
-  receive('profile', data => profile.value = data)
-  receive('registry', data => registry.value = data)
-  receive('stats', data => stats.value = data)
-  receive('user', data => user.value = data)
-
-  socket.value.onopen = () => {
-    if (!user.value) return
-    const { id, token } = user.value
-    send('validate', { id, token })
-  }
-}
+export const listeners: Record<string, (data: any) => void> = {}
 
 export function send(type: string, body: any) {
   socket.value.send(JSON.stringify({ type, body }))

packages/plugin-webui/client/main.ts

@@ -1,7 +1,8 @@
 /* eslint-disable no-undef */
 
-import { createApp, defineAsyncComponent } from 'vue'
-import { START_LOCATION } from 'vue-router'
+import * as Vue from 'vue'
+import * as Router from 'vue-router'
+import * as client from '~/client'
 import Card from './components/card.vue'
 import Collapse from './components/collapse.vue'
 import Button from './components/button.vue'
@@ -10,7 +11,6 @@ import Message from './components/message.vue'
 import Numeric from './components/numeric.vue'
 import ChatPanel from './components/chat-panel.vue'
 import App from './views/layout/index.vue'
-import { start, user, receive, router } from '~/client'
 
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 import '@fortawesome/fontawesome-free/css/brands.css'
@@ -19,7 +19,13 @@ import '@fortawesome/fontawesome-free/css/solid.css'
 
 import './index.scss'
 
-const app = createApp(App)
+const { router, receive } = client
+
+self['Vue'] = Vue
+self['VueRouter'] = Router
+self['KoishiClient'] = client
+
+const app = Vue.createApp(App)
 
 router.addRoute({
   path: '/',
@@ -64,7 +70,7 @@ router.addRoute({
 })
 
 app.component('k-card', Card)
-app.component('k-chart', defineAsyncComponent(() => import('./components/echarts')))
+app.component('k-chart', Vue.defineAsyncComponent(() => import('./components/echarts')))
 app.component('k-button', Button)
 app.component('k-collapse', Collapse)
 app.component('k-input', Input)
@@ -76,15 +82,11 @@ app.provide('ecTheme', 'dark-blue')
 
 app.use(router)
 
-receive('expire', () => {
-  router.push('/login')
-})
-
 router.beforeEach((route, from) => {
-  if (from === START_LOCATION && !route.matched.length) {
+  if (from === Router.START_LOCATION && !route.matched.length) {
     loadingExtensions.then(() => router.replace(route))
   }
-  if (route.meta.authority && !user.value) {
+  if (route.meta.authority && !client.user.value) {
     return history.state.forward === '/login' ? '/' : '/login'
   }
 })
@@ -95,7 +97,31 @@ router.afterEach((route) => {
   }
 })
 
-start()
+receive('meta', data => client.meta.value = data)
+receive('profile', data => client.profile.value = data)
+receive('registry', data => client.registry.value = data)
+receive('stats', data => client.stats.value = data)
+receive('user', data => client.user.value = data)
+receive('expire', () => {
+  router.push('/login')
+})
+
+const endpoint = new URL(KOISHI_CONFIG.endpoint, location.origin).toString()
+const socket = client.socket.value = new WebSocket(endpoint.replace(/^http/, 'ws'))
+
+socket.onmessage = (ev) => {
+  const data = JSON.parse(ev.data)
+  console.debug(data)
+  if (data.type in client.listeners) {
+    client.listeners[data.type](data.body)
+  }
+}
+
+socket.onopen = () => {
+  if (!client.user.value) return
+  const { id, token } = client.user.value
+  client.send('validate', { id, token })
+}
 
 const loadingExtensions = Promise.all(KOISHI_CONFIG.extensions.map(path => {
   return import(/* @vite-ignore */ path)