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>
|
<template>
|
||||||
<div>
|
<div v-show="isConnected">
|
||||||
<div
|
<div
|
||||||
v-if="canStartDebug"
|
v-if="canStartDebug"
|
||||||
class="component-action dev-client-action"
|
class="component-action dev-client-action"
|
||||||
@ -70,6 +70,7 @@ export default Vue.extend({
|
|||||||
busy: false,
|
busy: false,
|
||||||
autoUpdateComponents: autoUpdateOptions.urls.components,
|
autoUpdateComponents: autoUpdateOptions.urls.components,
|
||||||
sessions: [],
|
sessions: [],
|
||||||
|
isConnected: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -96,6 +97,8 @@ export default Vue.extend({
|
|||||||
async created() {
|
async created() {
|
||||||
const { devClient } = await import('./client')
|
const { devClient } = await import('./client')
|
||||||
this.sessions = devClient.sessions
|
this.sessions = devClient.sessions
|
||||||
|
this.isConnected = devClient.isConnected
|
||||||
|
devClient.addEventListener(DevClientEvents.ServerChange, this.handleServerChange)
|
||||||
devClient.addEventListener(DevClientEvents.SessionsUpdate, this.handleSessionsUpdate)
|
devClient.addEventListener(DevClientEvents.SessionsUpdate, this.handleSessionsUpdate)
|
||||||
},
|
},
|
||||||
async beforeDestroy() {
|
async beforeDestroy() {
|
||||||
@ -106,6 +109,9 @@ export default Vue.extend({
|
|||||||
handleSessionsUpdate(e: CustomEvent<string[]>) {
|
handleSessionsUpdate(e: CustomEvent<string[]>) {
|
||||||
this.sessions = e.detail
|
this.sessions = e.detail
|
||||||
},
|
},
|
||||||
|
handleServerChange(e: CustomEvent<boolean>) {
|
||||||
|
this.isConnected = e.detail
|
||||||
|
},
|
||||||
async handleClick(action: () => Promise<void>) {
|
async handleClick(action: () => Promise<void>) {
|
||||||
if (this.busy) {
|
if (this.busy) {
|
||||||
return
|
return
|
||||||
@ -157,7 +163,3 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
|
||||||
.dev-client-action {
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -50,14 +50,12 @@ export default Vue.extend({
|
|||||||
const { devClient } = await import('./client')
|
const { devClient } = await import('./client')
|
||||||
this.client = devClient
|
this.client = devClient
|
||||||
this.updateConnectionStatus()
|
this.updateConnectionStatus()
|
||||||
devClient.addEventListener(DevClientEvents.ServerConnected, this.updateConnectionStatus)
|
devClient.addEventListener(DevClientEvents.ServerChange, this.updateConnectionStatus)
|
||||||
devClient.addEventListener(DevClientEvents.ServerDisconnected, this.updateConnectionStatus)
|
|
||||||
// devClient.addEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
|
// devClient.addEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
const devClient = this.client as DevClient
|
const devClient = this.client as DevClient
|
||||||
devClient.removeEventListener(DevClientEvents.ServerConnected, this.updateConnectionStatus)
|
devClient.removeEventListener(DevClientEvents.ServerChange, this.updateConnectionStatus)
|
||||||
devClient.removeEventListener(DevClientEvents.ServerDisconnected, this.updateConnectionStatus)
|
|
||||||
// devClient.removeEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
|
// devClient.removeEventListener(DevClientEvents.SessionsUpdate, this.updateSessionsStatus)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import { useScopedConsole } from '@/core/utils/log'
|
|||||||
import { ComponentMetadata, componentsMap } from '@/components/component'
|
import { ComponentMetadata, componentsMap } from '@/components/component'
|
||||||
import { loadInstantStyle, removeStyle } from '@/core/style'
|
import { loadInstantStyle, removeStyle } from '@/core/style'
|
||||||
import { autoUpdateOptions, devClientOptionsMetadata } from './options'
|
import { autoUpdateOptions, devClientOptionsMetadata } from './options'
|
||||||
import { CoreUpdateMethod, PluginUpdateMethod, RegistryUpdateMethod } from './update-method'
|
import { CoreUpdateMethod, RegistryUpdateMethod } from './update-method'
|
||||||
import { monkey } from '@/core/ajax'
|
import { monkey } from '@/core/ajax'
|
||||||
import { plugins } from '@/plugins/plugin'
|
import { plugins } from '@/plugins/plugin'
|
||||||
|
|
||||||
@ -25,6 +25,7 @@ export enum DevClientEvents {
|
|||||||
CoreUpdate = 'coreUpdate',
|
CoreUpdate = 'coreUpdate',
|
||||||
ItemUpdate = 'itemUpdate',
|
ItemUpdate = 'itemUpdate',
|
||||||
SessionsUpdate = 'sessionsUpdate',
|
SessionsUpdate = 'sessionsUpdate',
|
||||||
|
ServerChange = 'serverChange',
|
||||||
ServerConnected = 'serverConnected',
|
ServerConnected = 'serverConnected',
|
||||||
ServerDisconnected = 'serverDisconnected',
|
ServerDisconnected = 'serverDisconnected',
|
||||||
}
|
}
|
||||||
@ -32,10 +33,6 @@ export enum DevClientEvents {
|
|||||||
export class DevClient extends EventTarget {
|
export class DevClient extends EventTarget {
|
||||||
socket: WebSocket
|
socket: WebSocket
|
||||||
sessions: string[] = []
|
sessions: string[] = []
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.createSocket()
|
|
||||||
}
|
|
||||||
|
|
||||||
addEventListener(
|
addEventListener(
|
||||||
type: DevClientEvents,
|
type: DevClientEvents,
|
||||||
@ -71,6 +68,7 @@ export class DevClient extends EventTarget {
|
|||||||
})
|
})
|
||||||
this.socket.addEventListener('open', () => {
|
this.socket.addEventListener('open', () => {
|
||||||
console.log('已连接到 DevServer')
|
console.log('已连接到 DevServer')
|
||||||
|
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerChange, { detail: true }))
|
||||||
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerConnected))
|
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerConnected))
|
||||||
resolve(true)
|
resolve(true)
|
||||||
})
|
})
|
||||||
@ -111,6 +109,7 @@ export class DevClient extends EventTarget {
|
|||||||
this.socket.close()
|
this.socket.close()
|
||||||
this.socket = null
|
this.socket = null
|
||||||
this.sessions = []
|
this.sessions = []
|
||||||
|
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerChange, { detail: false }))
|
||||||
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerDisconnected))
|
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerDisconnected))
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -181,8 +180,7 @@ export class DevClient extends EventTarget {
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
case RegistryUpdateMethod.PreferEntry: {
|
case RegistryUpdateMethod.PreferEntry: {
|
||||||
if (isEntryEmpty) {
|
if (isEntryEmpty && reloadInstantStyles()) {
|
||||||
reloadInstantStyles()
|
|
||||||
doNotReload()
|
doNotReload()
|
||||||
} else {
|
} else {
|
||||||
reload()
|
reload()
|
||||||
@ -207,7 +205,7 @@ export class DevClient extends EventTarget {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
const { displayName } = plugin
|
const { displayName } = plugin
|
||||||
if (options.pluginUpdateMethod === PluginUpdateMethod.AlwaysReload) {
|
if (options.registryUpdateMethod !== RegistryUpdateMethod.DoNotReload) {
|
||||||
console.log(`插件 [${displayName}] 已更新, 刷新页面...`)
|
console.log(`插件 [${displayName}] 已更新, 刷新页面...`)
|
||||||
location.reload()
|
location.reload()
|
||||||
} else {
|
} 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 { isIframe } from '@/core/utils'
|
||||||
import { devClientOptionsMetadata, autoUpdateOptions } from './options'
|
import { devClientOptionsMetadata, autoUpdateOptions } from './options'
|
||||||
import { setupPlugin } from './plugin'
|
import { setupPlugin } from './plugin'
|
||||||
|
import description from './desc.md'
|
||||||
|
|
||||||
export const component = defineComponentMetadata({
|
export const component = defineComponentMetadata({
|
||||||
name: 'devClient',
|
name: 'devClient',
|
||||||
displayName: 'DevClient',
|
displayName: 'DevClient',
|
||||||
tags: [componentsTags.utils],
|
tags: [componentsTags.utils],
|
||||||
description: '本地开发工具',
|
description,
|
||||||
entry: async ({ settings: { options } }) => {
|
entry: async ({ settings: { options } }) => {
|
||||||
if (isIframe()) {
|
if (isIframe()) {
|
||||||
return
|
return
|
||||||
@ -15,6 +16,9 @@ export const component = defineComponentMetadata({
|
|||||||
const { devClient, DevClientEvents } = await import('./client')
|
const { devClient, DevClientEvents } = await import('./client')
|
||||||
const cleanUpDevRecords = () => {
|
const cleanUpDevRecords = () => {
|
||||||
Object.entries(options.devRecords).forEach(([, { name, originalUrl }]) => {
|
Object.entries(options.devRecords).forEach(([, { name, originalUrl }]) => {
|
||||||
|
if (devClient.sessions.find(s => originalUrl.endsWith(s))) {
|
||||||
|
return
|
||||||
|
}
|
||||||
const autoUpdateRecord = autoUpdateOptions.urls.components[name]
|
const autoUpdateRecord = autoUpdateOptions.urls.components[name]
|
||||||
if (autoUpdateRecord) {
|
if (autoUpdateRecord) {
|
||||||
autoUpdateRecord.url = originalUrl
|
autoUpdateRecord.url = originalUrl
|
||||||
@ -22,14 +26,13 @@ export const component = defineComponentMetadata({
|
|||||||
delete options.devRecords[name]
|
delete options.devRecords[name]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if (devClient.isConnected) {
|
devClient.addEventListener(
|
||||||
cleanUpDevRecords()
|
DevClientEvents.ServerConnected,
|
||||||
} else {
|
() => cleanUpDevRecords(),
|
||||||
devClient.addEventListener(
|
{ once: true },
|
||||||
DevClientEvents.ServerConnected,
|
)
|
||||||
() => cleanUpDevRecords(),
|
if (options.autoConnect) {
|
||||||
{ once: true },
|
devClient.createSocket()
|
||||||
)
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
options: devClientOptionsMetadata,
|
options: devClientOptionsMetadata,
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import type { AutoUpdateOptions } from '@/components/auto-update'
|
|||||||
import { defineOptionsMetadata } from '@/components/define'
|
import { defineOptionsMetadata } from '@/components/define'
|
||||||
import { getComponentSettings } from '@/core/settings'
|
import { getComponentSettings } from '@/core/settings'
|
||||||
import { getNumberValidator } from '@/core/utils'
|
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 const { options: autoUpdateOptions } = getComponentSettings<AutoUpdateOptions>('autoUpdate')
|
||||||
export interface DevRecord {
|
export interface DevRecord {
|
||||||
@ -15,6 +15,10 @@ export const devClientOptionsMetadata = defineOptionsMetadata({
|
|||||||
displayName: '端口',
|
displayName: '端口',
|
||||||
validator: getNumberValidator(1024, 65535),
|
validator: getNumberValidator(1024, 65535),
|
||||||
},
|
},
|
||||||
|
autoConnect: {
|
||||||
|
defaultValue: true,
|
||||||
|
displayName: '自动连接',
|
||||||
|
},
|
||||||
coreUpdateMethod: {
|
coreUpdateMethod: {
|
||||||
defaultValue: CoreUpdateMethod.AlwaysReload,
|
defaultValue: CoreUpdateMethod.AlwaysReload,
|
||||||
displayName: '本体刷新策略',
|
displayName: '本体刷新策略',
|
||||||
@ -25,12 +29,6 @@ export const devClientOptionsMetadata = defineOptionsMetadata({
|
|||||||
displayName: '功能刷新策略',
|
displayName: '功能刷新策略',
|
||||||
dropdownEnum: RegistryUpdateMethod,
|
dropdownEnum: RegistryUpdateMethod,
|
||||||
},
|
},
|
||||||
pluginUpdateMethod: {
|
|
||||||
// 同本体
|
|
||||||
defaultValue: PluginUpdateMethod.AlwaysReload,
|
|
||||||
displayName: '插件刷新策略',
|
|
||||||
dropdownEnum: PluginUpdateMethod,
|
|
||||||
},
|
|
||||||
devRecords: {
|
devRecords: {
|
||||||
defaultValue: {} as Record<string, DevRecord>,
|
defaultValue: {} as Record<string, DevRecord>,
|
||||||
displayName: '调试模式临时存储',
|
displayName: '调试模式临时存储',
|
||||||
|
|||||||
@ -8,4 +8,3 @@ export enum CoreUpdateMethod {
|
|||||||
AlwaysReload = '自动刷新',
|
AlwaysReload = '自动刷新',
|
||||||
DoNotReload = '不自动刷新',
|
DoNotReload = '不自动刷新',
|
||||||
}
|
}
|
||||||
export { CoreUpdateMethod as PluginUpdateMethod }
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user