Fix clean up too early

This commit is contained in:
the1812 2022-05-24 23:10:45 +08:00
parent 5522c12c4b
commit c4c9fad42a
5 changed files with 44 additions and 33 deletions

View File

@ -21,35 +21,14 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { OptionsOfMetadata } from '@/components/define'
import { ComponentMetadata } from '@/components/types' import { ComponentMetadata } from '@/components/types'
import { getComponentSettings } from '@/core/settings'
import { Toast } from '@/core/toast' import { Toast } from '@/core/toast'
import { VIcon } from '@/ui' import { VIcon } from '@/ui'
import { DevClientEvents } from './client' import { DevClientEvents } from './client'
import { autoUpdateOptions, devClientOptionsMetadata } from './options' import { autoUpdateOptions, getDevClientOptions } from './options'
import { urlConverter } from './converter'
const { options } = getComponentSettings<OptionsOfMetadata<typeof devClientOptionsMetadata>>('devClient') const options = getDevClientOptions()
const converter = {
toDevUrl: (url: string) => {
if (!url) {
return null
}
const devUrlMatch = url.match(new RegExp(`localhost:${options.port}\\/registry\\/components\\/(.+)$`))
if (devUrlMatch) {
return url
}
const localhostMatch = url.match(/localhost:(\d+?)\/components\/(.+)$/)
if (localhostMatch) {
return `http://localhost:${options.port}/registry/dist/components/${localhostMatch[2]}`
}
const onlineMatch = url.match(/\/registry\/dist\/components\/(.+)$/)
if (onlineMatch) {
return `http://localhost:${options.port}/registry/dist/components/${onlineMatch[1]}`
}
return null
},
}
export default Vue.extend({ export default Vue.extend({
components: { components: {
@ -88,7 +67,7 @@ export default Vue.extend({
}) })
}, },
canStartDebug() { canStartDebug() {
return !this.isDebugging && converter.toDevUrl(this.componentUpdateUrl) !== null return !this.isDebugging && urlConverter.toDevUrl(this.componentUpdateUrl) !== null
}, },
canStopDebug() { canStopDebug() {
return Boolean(this.isDebugging && this.componentUpdateUrl) return Boolean(this.isDebugging && this.componentUpdateUrl)
@ -127,7 +106,7 @@ export default Vue.extend({
await this.handleClick(async () => { await this.handleClick(async () => {
const { devClient } = await import('./client') const { devClient } = await import('./client')
const metadata = this.component as ComponentMetadata const metadata = this.component as ComponentMetadata
const devUrl = converter.toDevUrl(this.componentUpdateUrl) const devUrl = urlConverter.toDevUrl(this.componentUpdateUrl)
// console.log('devUrl:', devUrl, 'autoUpdateRecord.url:', this.autoUpdateRecord.url) // console.log('devUrl:', devUrl, 'autoUpdateRecord.url:', this.autoUpdateRecord.url)
if (this.autoUpdateRecord.url !== devUrl) { if (this.autoUpdateRecord.url !== devUrl) {
options.devRecords[metadata.name] = { options.devRecords[metadata.name] = {

View File

@ -1,16 +1,14 @@
import type { ItemStopPayload, Payload } from 'dev-tools/dev-server/payload' import type { ItemStopPayload, Payload } from 'dev-tools/dev-server/payload'
import { OptionsOfMetadata } from '@/components/define'
import { getComponentSettings } from '@/core/settings'
import { useScopedConsole } from '@/core/utils/log' 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, getDevClientOptions } from './options'
import { RefreshMethod, HotReloadMethod } from './update-method' import { RefreshMethod, HotReloadMethod } from './update-method'
import { monkey } from '@/core/ajax' import { monkey } from '@/core/ajax'
import { plugins } from '@/plugins/plugin' import { plugins } from '@/plugins/plugin'
import { Toast } from '@/core/toast' import { Toast } from '@/core/toast'
const { options } = getComponentSettings<OptionsOfMetadata<typeof devClientOptionsMetadata>>('devClient') const options = getDevClientOptions()
const console = useScopedConsole('DevClient') const console = useScopedConsole('DevClient')
const handleSocketMessage = (event: MessageEvent, callback: (payload: Payload) => void) => { const handleSocketMessage = (event: MessageEvent, callback: (payload: Payload) => void) => {
const { data } = event const { data } = event
@ -84,6 +82,10 @@ export class DevClient extends EventTarget {
} }
case 'start': { case 'start': {
this.sessions = payload.sessions this.sessions = payload.sessions
this.dispatchEvent(new CustomEvent(
DevClientEvents.SessionsUpdate,
{ detail: this.sessions },
))
break break
} }
case 'stop': { case 'stop': {
@ -113,6 +115,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.SessionsUpdate, { detail: this.sessions }))
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerChange, { detail: false })) this.dispatchEvent(new CustomEvent(DevClientEvents.ServerChange, { detail: false }))
this.dispatchEvent(new CustomEvent(DevClientEvents.ServerDisconnected)) this.dispatchEvent(new CustomEvent(DevClientEvents.ServerDisconnected))
} }

View File

@ -0,0 +1,24 @@
import { getDevClientOptions } from './options'
const options = getDevClientOptions()
export const urlConverter = {
toDevUrl: (originalUrl: string) => {
if (!originalUrl) {
return null
}
const devUrlMatch = originalUrl.match(new RegExp(`localhost:${options.port}\\/registry\\/components\\/(.+)$`))
if (devUrlMatch) {
return originalUrl
}
const localhostMatch = originalUrl.match(/localhost:(\d+?)\/components\/(.+)$/)
if (localhostMatch) {
return `http://localhost:${options.port}/registry/dist/components/${localhostMatch[2]}`
}
const onlineMatch = originalUrl.match(/\/registry\/dist\/components\/(.+)$/)
if (onlineMatch) {
return `http://localhost:${options.port}/registry/dist/components/${onlineMatch[1]}`
}
return null
},
}

View File

@ -25,13 +25,17 @@ export const component = defineComponentMetadata({
return return
} }
autoUpdateRecord.url = originalUrl autoUpdateRecord.url = originalUrl
console.log('cleanUpDevRecords', name, originalUrl, autoUpdateRecord) console.log('cleanUpDevRecords', name, devUrl, originalUrl, autoUpdateRecord)
delete options.devRecords[name] delete options.devRecords[name]
}) })
} }
devClient.addEventListener( devClient.addEventListener(
DevClientEvents.ServerConnected, DevClientEvents.ServerConnected,
() => cleanUpDevRecords(), () => {
devClient.addEventListener(DevClientEvents.SessionsUpdate, () => {
cleanUpDevRecords()
}, { once: true })
},
) )
if (options.autoConnect) { if (options.autoConnect) {
devClient.createSocket() devClient.createSocket()

View File

@ -1,10 +1,11 @@
import type { AutoUpdateOptions } from '@/components/auto-update' import type { AutoUpdateOptions } from '@/components/auto-update'
import { defineOptionsMetadata } from '@/components/define' import { defineOptionsMetadata, OptionsOfMetadata } from '@/components/define'
import { getComponentSettings } from '@/core/settings' import { getComponentSettings } from '@/core/settings'
import { getNumberValidator } from '@/core/utils' import { getNumberValidator } from '@/core/utils'
import { RefreshMethod, HotReloadMethod } from './update-method' import { RefreshMethod, HotReloadMethod } from './update-method'
export const { options: autoUpdateOptions } = getComponentSettings<AutoUpdateOptions>('autoUpdate') export const { options: autoUpdateOptions } = getComponentSettings<AutoUpdateOptions>('autoUpdate')
export const getDevClientOptions = () => getComponentSettings<OptionsOfMetadata<typeof devClientOptionsMetadata>>('devClient').options
export interface DevRecord { export interface DevRecord {
name: string name: string
originalUrl: string originalUrl: string