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

View File

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

View File

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

View File

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

View File

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