Test instant styles update

This commit is contained in:
the1812 2022-05-11 00:10:47 +08:00
parent 3444c00a17
commit fe3b293ab1
6 changed files with 62 additions and 29 deletions

View File

@ -1,4 +1,5 @@
import { defineComponentMetadata } from '@/components/define'
import { isIframe } from '@/core/utils'
import { devClientOptionsMetadata } from './options'
import { setupPlugin } from './plugin'
@ -8,6 +9,9 @@ export const component = defineComponentMetadata({
tags: [componentsTags.utils],
description: '本地开发工具',
entry: async () => {
if (isIframe()) {
return
}
import('./client')
},
options: devClientOptionsMetadata,

View File

@ -1,11 +1,17 @@
import { PluginSetupParameters } from '@/plugins/plugin'
import { ComponentAction } from '@/components/settings-panel/component-actions/component-actions'
import { isIframe } from '@/core/utils'
import { monkey } from '@/core/ajax'
import { Toast } from '@/core/toast'
import { getComponentSettings } from '@/core/settings'
import { ComponentMetadata } from '@/components/types'
import { OptionsOfMetadata } from '@/components/define'
import { autoUpdateOptions, devClientOptionsMetadata } from './options'
export const setupPlugin = async ({ addData }: PluginSetupParameters) => {
if (isIframe()) {
return
}
const { options } = getComponentSettings<OptionsOfMetadata<typeof devClientOptionsMetadata>>('devClient')
const { devClient } = await import('./client')
addData('settingsPanel.componentActions', (actions: ComponentAction[]) => {
@ -24,26 +30,38 @@ export const setupPlugin = async ({ addData }: PluginSetupParameters) => {
}
const onlineMatch = url.match(/\/registry\/dist\/components\/(.+)$/)
if (onlineMatch) {
return `http://localhost:${options.port}/registry/dist/components/${onlineMatch[2]}`
return `http://localhost:${options.port}/registry/dist/components/${onlineMatch[1]}`
}
return null
},
}
const getDebugInfo = (metadata: ComponentMetadata) => {
const autoUpdateRecord = autoUpdateOptions.urls.components[metadata.name]
const componentUpdateUrl = autoUpdateRecord?.url
const isDebugging = () => componentUpdateUrl && devClient.sessions.some(path => {
const { pathname } = new URL(componentUpdateUrl)
return path === pathname
})
const canStartDebug = () => !isDebugging() && converter.toDevUrl(componentUpdateUrl) !== null
const canStopDebug = () => Boolean(isDebugging() && componentUpdateUrl)
return {
autoUpdateRecord,
componentUpdateUrl,
canStartDebug,
canStopDebug,
}
}
actions.push(
metadata => {
const autoUpdateRecord = autoUpdateOptions.urls.components[metadata.name]
const componentUpdateUrl = autoUpdateRecord?.url
const isDebugging = componentUpdateUrl && devClient.sessions.some(path => {
const { pathname } = new URL(componentUpdateUrl)
return path === pathname
})
return {
const { componentUpdateUrl, autoUpdateRecord, canStartDebug } = getDebugInfo(metadata)
const result = {
name: 'startDebug',
displayName: '开始调试',
icon: 'mdi-play-network-outline',
condition: () => !isDebugging && converter.toDevUrl(componentUpdateUrl) !== null,
visible: canStartDebug(),
action: async () => {
const devUrl = converter.toDevUrl(componentUpdateUrl)
console.log('devUrl:', devUrl, 'autoUpdateRecord.url:', autoUpdateRecord.url)
if (autoUpdateRecord.url !== devUrl) {
options.devRecords[metadata.name] = {
name: metadata.name,
@ -51,30 +69,39 @@ export const setupPlugin = async ({ addData }: PluginSetupParameters) => {
}
autoUpdateRecord.url = devUrl
}
await monkey({ url: autoUpdateRecord.url })
const toast = Toast.info('启动调试中...', 'DevClient')
try {
await monkey({ url: autoUpdateRecord.url })
} catch (error) {
console.error(error)
} finally {
toast.close()
result.visible = canStartDebug()
console.log('visible', result.visible)
}
},
}
return result
},
metadata => {
const autoUpdateRecord = autoUpdateOptions.urls.components[metadata.name]
const componentUpdateUrl = autoUpdateRecord?.url
const isDebugging = devClient.sessions.some(path => {
const { pathname } = new URL(componentUpdateUrl)
return path === pathname
})
return {
const { componentUpdateUrl, autoUpdateRecord, canStopDebug } = getDebugInfo(metadata)
const result = {
name: 'stopDebug',
displayName: '停止调试',
icon: 'mdi-minus-network-outline',
condition: () => Boolean(isDebugging && componentUpdateUrl),
visible: canStopDebug(),
action: async () => {
const { pathname } = new URL(componentUpdateUrl)
devClient.stopDebugging(pathname)
if (options.devRecords[metadata.name]) {
autoUpdateRecord.url = options.devRecords[metadata.name].originalUrl
delete options.devRecords[metadata.name]
}
result.visible = canStopDebug()
console.log('visible', result.visible)
},
}
return result
},
)
})

View File

@ -5,6 +5,7 @@ import {
getGeneralSettings,
isUserComponent,
} from '@/core/settings'
import { isIframe } from '@/core/utils'
import { Version } from '@/core/version'
import {
defineComponentMetadata,
@ -64,6 +65,9 @@ const optionsMetadata = defineOptionsMetadata({
const entry: ComponentEntry<typeof optionsMetadata> = async ({
settings: { options: opt },
}) => {
if (isIframe()) {
return checkerMethods
}
const now = Number(new Date())
const duration = now - opt.lastUpdateCheck
@ -149,7 +153,7 @@ export const component = defineComponentMetadata({
icon: isLocalItem(item.url)
? 'mdi-file-download-outline'
: 'mdi-cloud-download-outline',
condition: () => isUserComponent(metadata),
visible: isUserComponent(metadata),
title: item.url,
action: async () => {
const { Toast } = await import('@/core/toast')

View File

@ -70,6 +70,7 @@
<div class="extra-actions-list">
<ComponentAction
v-for="a of componentActions.map(action => action(componentData))"
v-show="a.visible !== false"
:key="a.name"
class="extra-action-item"
:item="a"
@ -112,16 +113,9 @@ export default Vue.extend({
},
mixins: [componentSettingsMixin],
data() {
const metadata = (this as any).componentData
return {
virtual: false,
componentActions: componentActions.filter(action => {
const data = action(metadata)
if (!data) {
return false
}
return data.condition?.() ?? true
}),
componentActions,
}
},
computed: {

View File

@ -10,8 +10,9 @@ export type ComponentAction = (metadata: ComponentMetadata) => {
displayName: string
action: Executable
icon: string
visible?: boolean
title?: string
condition?: () => boolean
// condition?: () => boolean
}
const builtInActions: ComponentAction[] = [
@ -19,7 +20,7 @@ const builtInActions: ComponentAction[] = [
name: 'uninstall',
displayName: '卸载',
icon: 'mdi-trash-can-outline',
condition: () => isUserComponent(metadata),
visible: isUserComponent(metadata),
action: async () => {
const { before, after } = getHook('userComponents.remove', metadata)
await before()

View File

@ -3,6 +3,7 @@ import * as cdnTypes from '@/core/cdn-types'
import * as download from '@/core/download'
import * as externalInput from '@/core/external-input'
import * as filePicker from '@/core/file-picker'
import * as installFeature from '@/core/install-feature'
import * as horizontalScroll from '@/core/horizontal-scroll'
import * as lifeCycle from '@/core/life-cycle'
import * as loadingMode from '@/core/loading-mode'
@ -40,6 +41,7 @@ export const coreApis = {
download,
externalInput,
filePicker,
installFeature,
horizontalScroll,
lifeCycle,
loadingMode,
@ -78,6 +80,7 @@ export const externalApis = {
...download,
...externalInput,
...filePicker,
...installFeature,
...horizontalScroll,
lifeCycle,
...loadingMode,