Update description

This commit is contained in:
the1812 2022-05-21 19:11:07 +08:00
parent d4a14ec0ab
commit 34c6f1a435
7 changed files with 47 additions and 34 deletions

View File

@ -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>

View File

@ -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: {

View File

@ -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 {

View File

@ -0,0 +1,15 @@
本地开发工具, 提供自动更新功能和样式热重载的能力, 需要与 DevServer 配合使用. (DevServer 的使用方式见 [CONTRIBUTING.md](https://github.com/the1812/Bilibili-Evolved/blob/preview/CONTRIBUTING.md))
`自动连接` 开启时, 每次进入网页都会自动尝试连接到 DevServer, 如果关闭则需要手动操作连接.
`刷新策略` 决定了收到本体或者功能更新的消息时是否刷新:
本体:
- **自动刷新**: 收到更新时立即刷新页面
- 不自动刷新: 收到更新时不刷新页面
功能:
- 总是自动刷新: 收到更新时立即刷新页面
- **样式优先**: 功能带有 `instantStyles` 时, 热重载 `instantStyles` 中的样式, 不刷新页面
- 逻辑优先: 在 `样式优先` 前提下, 要求功能的 `entry` 不为 `none` 时, 才触发热重载样式, 否则刷新页面
- 不自动刷新: 收到更新时不刷新页面

View File

@ -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,

View File

@ -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: '调试模式临时存储',

View File

@ -8,4 +8,3 @@ export enum CoreUpdateMethod {
AlwaysReload = '自动刷新',
DoNotReload = '不自动刷新',
}
export { CoreUpdateMethod as PluginUpdateMethod }