mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Update description
This commit is contained in:
parent
d4a14ec0ab
commit
34c6f1a435
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-show="isConnected">
|
||||
<div
|
||||
v-if="canStartDebug"
|
||||
class="component-action dev-client-action"
|
||||
@ -70,6 +70,7 @@ export default Vue.extend({
|
||||
busy: false,
|
||||
autoUpdateComponents: autoUpdateOptions.urls.components,
|
||||
sessions: [],
|
||||
isConnected: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -96,6 +97,8 @@ export default Vue.extend({
|
||||
async created() {
|
||||
const { devClient } = await import('./client')
|
||||
this.sessions = devClient.sessions
|
||||
this.isConnected = devClient.isConnected
|
||||
devClient.addEventListener(DevClientEvents.ServerChange, this.handleServerChange)
|
||||
devClient.addEventListener(DevClientEvents.SessionsUpdate, this.handleSessionsUpdate)
|
||||
},
|
||||
async beforeDestroy() {
|
||||
@ -106,6 +109,9 @@ export default Vue.extend({
|
||||
handleSessionsUpdate(e: CustomEvent<string[]>) {
|
||||
this.sessions = e.detail
|
||||
},
|
||||
handleServerChange(e: CustomEvent<boolean>) {
|
||||
this.isConnected = e.detail
|
||||
},
|
||||
async handleClick(action: () => Promise<void>) {
|
||||
if (this.busy) {
|
||||
return
|
||||
@ -157,7 +163,3 @@ export default Vue.extend({
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.dev-client-action {
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -50,14 +50,12 @@ export default Vue.extend({
|
||||
const { devClient } = await import('./client')
|
||||
this.client = devClient
|
||||
this.updateConnectionStatus()
|
||||
devClient.addEventListener(DevClientEvents.ServerConnected, this.updateConnectionStatus)
|
||||
devClient.addEventListener(DevClientEvents.ServerDisconnected, this.updateConnectionStatus)
|
||||
devClient.addEventListener(DevClientEvents.ServerChange, this.updateConnectionStatus)
|
||||
// devClient.addEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
|
||||
},
|
||||
beforeDestroy() {
|
||||
const devClient = this.client as DevClient
|
||||
devClient.removeEventListener(DevClientEvents.ServerConnected, this.updateConnectionStatus)
|
||||
devClient.removeEventListener(DevClientEvents.ServerDisconnected, this.updateConnectionStatus)
|
||||
devClient.removeEventListener(DevClientEvents.ServerChange, this.updateConnectionStatus)
|
||||
// devClient.removeEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -5,7 +5,7 @@ import { useScopedConsole } from '@/core/utils/log'
|
||||
import { ComponentMetadata, componentsMap } from '@/components/component'
|
||||
import { loadInstantStyle, removeStyle } from '@/core/style'
|
||||
import { autoUpdateOptions, devClientOptionsMetadata } from './options'
|
||||
import { CoreUpdateMethod, PluginUpdateMethod, RegistryUpdateMethod } from './update-method'
|
||||
import { CoreUpdateMethod, RegistryUpdateMethod } from './update-method'
|
||||
import { monkey } from '@/core/ajax'
|
||||
import { plugins } from '@/plugins/plugin'
|
||||
|
||||
@ -25,6 +25,7 @@ export enum DevClientEvents {
|
||||
CoreUpdate = 'coreUpdate',
|
||||
ItemUpdate = 'itemUpdate',
|
||||
SessionsUpdate = 'sessionsUpdate',
|
||||
ServerChange = 'serverChange',
|
||||
ServerConnected = 'serverConnected',
|
||||
ServerDisconnected = 'serverDisconnected',
|
||||
}
|
||||
@ -32,10 +33,6 @@ export enum DevClientEvents {
|
||||
export class DevClient extends EventTarget {
|
||||
socket: WebSocket
|
||||
sessions: string[] = []
|
||||
constructor() {
|
||||
super()
|
||||
this.createSocket()
|
||||
}
|
||||
|
||||
addEventListener(
|
||||
type: DevClientEvents,
|
||||
@ -71,6 +68,7 @@ export class DevClient extends EventTarget {
|
||||
})
|
||||
this.socket.addEventListener('open', () => {
|
||||
console.log('已连接到 DevServer')
|
||||
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerChange, { detail: true }))
|
||||
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerConnected))
|
||||
resolve(true)
|
||||
})
|
||||
@ -111,6 +109,7 @@ export class DevClient extends EventTarget {
|
||||
this.socket.close()
|
||||
this.socket = null
|
||||
this.sessions = []
|
||||
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerChange, { detail: false }))
|
||||
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerDisconnected))
|
||||
}
|
||||
|
||||
@ -181,8 +180,7 @@ export class DevClient extends EventTarget {
|
||||
break
|
||||
}
|
||||
case RegistryUpdateMethod.PreferEntry: {
|
||||
if (isEntryEmpty) {
|
||||
reloadInstantStyles()
|
||||
if (isEntryEmpty && reloadInstantStyles()) {
|
||||
doNotReload()
|
||||
} else {
|
||||
reload()
|
||||
@ -207,7 +205,7 @@ export class DevClient extends EventTarget {
|
||||
return
|
||||
}
|
||||
const { displayName } = plugin
|
||||
if (options.pluginUpdateMethod === PluginUpdateMethod.AlwaysReload) {
|
||||
if (options.registryUpdateMethod !== RegistryUpdateMethod.DoNotReload) {
|
||||
console.log(`插件 [${displayName}] 已更新, 刷新页面...`)
|
||||
location.reload()
|
||||
} else {
|
||||
|
||||
15
registry/lib/components/utils/dev-client/desc.md
Normal file
15
registry/lib/components/utils/dev-client/desc.md
Normal file
@ -0,0 +1,15 @@
|
||||
本地开发工具, 提供自动更新功能和样式热重载的能力, 需要与 DevServer 配合使用. (DevServer 的使用方式见 [CONTRIBUTING.md](https://github.com/the1812/Bilibili-Evolved/blob/preview/CONTRIBUTING.md))
|
||||
|
||||
`自动连接` 开启时, 每次进入网页都会自动尝试连接到 DevServer, 如果关闭则需要手动操作连接.
|
||||
|
||||
`刷新策略` 决定了收到本体或者功能更新的消息时是否刷新:
|
||||
|
||||
本体:
|
||||
- **自动刷新**: 收到更新时立即刷新页面
|
||||
- 不自动刷新: 收到更新时不刷新页面
|
||||
|
||||
功能:
|
||||
- 总是自动刷新: 收到更新时立即刷新页面
|
||||
- **样式优先**: 功能带有 `instantStyles` 时, 热重载 `instantStyles` 中的样式, 不刷新页面
|
||||
- 逻辑优先: 在 `样式优先` 前提下, 要求功能的 `entry` 不为 `none` 时, 才触发热重载样式, 否则刷新页面
|
||||
- 不自动刷新: 收到更新时不刷新页面
|
||||
@ -2,12 +2,13 @@ import { defineComponentMetadata } from '@/components/define'
|
||||
import { isIframe } from '@/core/utils'
|
||||
import { devClientOptionsMetadata, autoUpdateOptions } from './options'
|
||||
import { setupPlugin } from './plugin'
|
||||
import description from './desc.md'
|
||||
|
||||
export const component = defineComponentMetadata({
|
||||
name: 'devClient',
|
||||
displayName: 'DevClient',
|
||||
tags: [componentsTags.utils],
|
||||
description: '本地开发工具',
|
||||
description,
|
||||
entry: async ({ settings: { options } }) => {
|
||||
if (isIframe()) {
|
||||
return
|
||||
@ -15,6 +16,9 @@ export const component = defineComponentMetadata({
|
||||
const { devClient, DevClientEvents } = await import('./client')
|
||||
const cleanUpDevRecords = () => {
|
||||
Object.entries(options.devRecords).forEach(([, { name, originalUrl }]) => {
|
||||
if (devClient.sessions.find(s => originalUrl.endsWith(s))) {
|
||||
return
|
||||
}
|
||||
const autoUpdateRecord = autoUpdateOptions.urls.components[name]
|
||||
if (autoUpdateRecord) {
|
||||
autoUpdateRecord.url = originalUrl
|
||||
@ -22,14 +26,13 @@ export const component = defineComponentMetadata({
|
||||
delete options.devRecords[name]
|
||||
})
|
||||
}
|
||||
if (devClient.isConnected) {
|
||||
cleanUpDevRecords()
|
||||
} else {
|
||||
devClient.addEventListener(
|
||||
DevClientEvents.ServerConnected,
|
||||
() => cleanUpDevRecords(),
|
||||
{ once: true },
|
||||
)
|
||||
devClient.addEventListener(
|
||||
DevClientEvents.ServerConnected,
|
||||
() => cleanUpDevRecords(),
|
||||
{ once: true },
|
||||
)
|
||||
if (options.autoConnect) {
|
||||
devClient.createSocket()
|
||||
}
|
||||
},
|
||||
options: devClientOptionsMetadata,
|
||||
|
||||
@ -2,7 +2,7 @@ import type { AutoUpdateOptions } from '@/components/auto-update'
|
||||
import { defineOptionsMetadata } from '@/components/define'
|
||||
import { getComponentSettings } from '@/core/settings'
|
||||
import { getNumberValidator } from '@/core/utils'
|
||||
import { CoreUpdateMethod, RegistryUpdateMethod, PluginUpdateMethod } from './update-method'
|
||||
import { CoreUpdateMethod, RegistryUpdateMethod } from './update-method'
|
||||
|
||||
export const { options: autoUpdateOptions } = getComponentSettings<AutoUpdateOptions>('autoUpdate')
|
||||
export interface DevRecord {
|
||||
@ -15,6 +15,10 @@ export const devClientOptionsMetadata = defineOptionsMetadata({
|
||||
displayName: '端口',
|
||||
validator: getNumberValidator(1024, 65535),
|
||||
},
|
||||
autoConnect: {
|
||||
defaultValue: true,
|
||||
displayName: '自动连接',
|
||||
},
|
||||
coreUpdateMethod: {
|
||||
defaultValue: CoreUpdateMethod.AlwaysReload,
|
||||
displayName: '本体刷新策略',
|
||||
@ -25,12 +29,6 @@ export const devClientOptionsMetadata = defineOptionsMetadata({
|
||||
displayName: '功能刷新策略',
|
||||
dropdownEnum: RegistryUpdateMethod,
|
||||
},
|
||||
pluginUpdateMethod: {
|
||||
// 同本体
|
||||
defaultValue: PluginUpdateMethod.AlwaysReload,
|
||||
displayName: '插件刷新策略',
|
||||
dropdownEnum: PluginUpdateMethod,
|
||||
},
|
||||
devRecords: {
|
||||
defaultValue: {} as Record<string, DevRecord>,
|
||||
displayName: '调试模式临时存储',
|
||||
|
||||
@ -8,4 +8,3 @@ export enum CoreUpdateMethod {
|
||||
AlwaysReload = '自动刷新',
|
||||
DoNotReload = '不自动刷新',
|
||||
}
|
||||
export { CoreUpdateMethod as PluginUpdateMethod }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user