Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-31 05:19:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(dialogService): convert static component imports to dynamic imports

Browse Source 
Amp-Thread-ID: https://ampcode.com/threads/T-019bfe1a-8ac4-753e-a612-040f36dc66b9
Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
Alexander Brown
2026-01-26 22:30:18 -08:00
parent 2b2a72ffda
commit fde5dfa24d
8 changed files with 99 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/composables/queue/useJobMenu.ts
View File

@@ -101,14 +101,14 @@ export function useJobMenu(
const executionError = target.taskRef?.executionError
if (executionError) {
useDialogService().showExecutionErrorDialog(executionError)
void useDialogService().showExecutionErrorDialog(executionError)
return
}
// Fall back to simple error dialog
const message = target.taskRef?.errorMessage
if (message) {
useDialogService().showErrorDialog(new Error(message), {
void useDialogService().showErrorDialog(new Error(message), {
reportType: 'queueJobError'
})
}

4
src/composables/useCoreCommands.ts
View File

@@ -581,7 +581,7 @@ export function useCoreCommands(): ComfyCommand[] {
versionAdded: '1.3.7',
category: 'view-controls' as const,
function: () => {
dialogService.showSettingsDialog()
void dialogService.showSettingsDialog()
}
},
{
@@ -830,7 +830,7 @@ export function useCoreCommands(): ComfyCommand[] {
menubarLabel: 'About ComfyUI',
versionAdded: '1.6.4',
function: () => {
dialogService.showSettingsDialog('about')
void dialogService.showSettingsDialog('about')
}
},
{

2
src/composables/useHelpCenter.ts
View File

@@ -72,7 +72,7 @@ export function useHelpCenter(
* Show the node conflict dialog with current conflict data
*/
const showConflictModal = () => {
showNodeConflictDialog({
void showNodeConflictDialog({
showAfterWhatsNew: true,
dialogComponentProps: {
onClose: () => {

2
src/platform/cloud/subscription/composables/useSubscriptionActions.ts
View File

@@ -24,7 +24,7 @@ export function useSubscriptionActions() {
})
const handleAddApiCredits = () => {
dialogService.showTopUpCreditsDialog()
void dialogService.showTopUpCreditsDialog()
}
const handleMessageSupport = async () => {

122
src/services/dialogService.ts
View File

@@ -1,36 +1,17 @@
import { merge } from 'es-toolkit/compat'
import type { Component } from 'vue'
import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
import MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
import MissingNodesFooter from '@/components/dialog/content/MissingNodesFooter.vue'
import MissingNodesHeader from '@/components/dialog/content/MissingNodesHeader.vue'
import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
import MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
import PromptDialogContent from '@/components/dialog/content/PromptDialogContent.vue'
import SignInContent from '@/components/dialog/content/SignInContent.vue'
import TopUpCreditsDialogContent from '@/components/dialog/content/TopUpCreditsDialogContent.vue'
import UpdatePasswordContent from '@/components/dialog/content/UpdatePasswordContent.vue'
import ComfyOrgHeader from '@/components/dialog/header/ComfyOrgHeader.vue'
import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
import type MissingModelsWarning from '@/components/dialog/content/MissingModelsWarning.vue'
import type MissingNodesContent from '@/components/dialog/content/MissingNodesContent.vue'
import { t } from '@/i18n'
import { useTelemetry } from '@/platform/telemetry'
import { isCloud } from '@/platform/distribution/types'
import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
import SettingDialogContent from '@/platform/settings/components/SettingDialogContent.vue'
import { useTelemetry } from '@/platform/telemetry'
import { useDialogStore } from '@/stores/dialogStore'
import type {
DialogComponentProps,
ShowDialogOptions
} from '@/stores/dialogStore'
import ImportFailedNodeContent from '@/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue'
import ImportFailedNodeFooter from '@/workbench/extensions/manager/components/manager/ImportFailedNodeFooter.vue'
import ImportFailedNodeHeader from '@/workbench/extensions/manager/components/manager/ImportFailedNodeHeader.vue'
import NodeConflictDialogContent from '@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue'
import NodeConflictFooter from '@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue'
import NodeConflictHeader from '@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue'
import type { ConflictDetectionResult } from '@/workbench/extensions/manager/types/conflictDetectionTypes'
import type { ComponentAttrs } from 'vue-component-type-helpers'
@@ -58,9 +39,19 @@ export interface ExecutionErrorDialogInput {
export const useDialogService = () => {
const dialogStore = useDialogStore()
function showLoadWorkflowWarning(
async function showLoadWorkflowWarning(
props: ComponentAttrs<typeof MissingNodesContent>
) {
const [
{ default: MissingNodesHeader },
{ default: MissingNodesFooter },
{ default: MissingNodesContent }
] = await Promise.all([
import('@/components/dialog/content/MissingNodesHeader.vue'),
import('@/components/dialog/content/MissingNodesFooter.vue'),
import('@/components/dialog/content/MissingNodesContent.vue')
])
dialogStore.showDialog({
key: 'global-missing-nodes',
headerComponent: MissingNodesHeader,
@@ -84,9 +75,11 @@ export const useDialogService = () => {
})
}
function showMissingModelsWarning(
async function showMissingModelsWarning(
props: ComponentAttrs<typeof MissingModelsWarning>
) {
const { default: MissingModelsWarning } =
await import('@/components/dialog/content/MissingModelsWarning.vue')
dialogStore.showDialog({
key: 'global-missing-models-warning',
component: MissingModelsWarning,
@@ -94,7 +87,7 @@ export const useDialogService = () => {
})
}
function showSettingsDialog(
async function showSettingsDialog(
panel?:
| 'about'
| 'keybinding'
@@ -105,6 +98,13 @@ export const useDialogService = () => {
| 'subscription'
| 'workspace'
) {
const [
{ default: SettingDialogHeader },
{ default: SettingDialogContent }
] = await Promise.all([
import('@/components/dialog/header/SettingDialogHeader.vue'),
import('@/platform/settings/components/SettingDialogContent.vue')
])
const props = panel ? { props: { defaultPanel: panel } } : undefined
dialogStore.showDialog({
@@ -115,7 +115,14 @@ export const useDialogService = () => {
})
}
function showAboutDialog() {
async function showAboutDialog() {
const [
{ default: SettingDialogHeader },
{ default: SettingDialogContent }
] = await Promise.all([
import('@/components/dialog/header/SettingDialogHeader.vue'),
import('@/platform/settings/components/SettingDialogContent.vue')
])
dialogStore.showDialog({
key: 'global-settings',
headerComponent: SettingDialogHeader,
@@ -126,7 +133,11 @@ export const useDialogService = () => {
})
}
function showExecutionErrorDialog(executionError: ExecutionErrorDialogInput) {
async function showExecutionErrorDialog(
executionError: ExecutionErrorDialogInput
) {
const { default: ErrorDialogContent } =
await import('@/components/dialog/content/ErrorDialogContent.vue')
const props: ComponentAttrs<typeof ErrorDialogContent> = {
error: {
exceptionType: executionError.exception_type,
@@ -174,13 +185,15 @@ export const useDialogService = () => {
* @param error The error to show
* @param options The options for the dialog
*/
function showErrorDialog(
async function showErrorDialog(
error: unknown,
options: {
title?: string
reportType?: string
} = {}
) {
const { default: ErrorDialogContent } =
await import('@/components/dialog/content/ErrorDialogContent.vue')
const errorProps: {
errorMessage: string
stackTrace?: string
@@ -222,6 +235,11 @@ export const useDialogService = () => {
async function showApiNodesSignInDialog(
apiNodeNames: string[]
): Promise<boolean> {
const [{ default: ApiNodesSignInContent }, { default: ComfyOrgHeader }] =
await Promise.all([
import('@/components/dialog/content/ApiNodesSignInContent.vue'),
import('@/components/dialog/header/ComfyOrgHeader.vue')
])
return new Promise<boolean>((resolve) => {
dialogStore.showDialog({
key: 'api-nodes-signin',
@@ -244,6 +262,11 @@ export const useDialogService = () => {
}
async function showSignInDialog(): Promise<boolean> {
const [{ default: SignInContent }, { default: ComfyOrgHeader }] =
await Promise.all([
import('@/components/dialog/content/SignInContent.vue'),
import('@/components/dialog/header/ComfyOrgHeader.vue')
])
return new Promise<boolean>((resolve) => {
dialogStore.showDialog({
key: 'global-signin',
@@ -274,6 +297,8 @@ export const useDialogService = () => {
defaultValue?: string
placeholder?: string
}): Promise<string | null> {
const { default: PromptDialogContent } =
await import('@/components/dialog/content/PromptDialogContent.vue')
return new Promise((resolve) => {
dialogStore.showDialog({
key: 'global-prompt',
@@ -318,6 +343,8 @@ export const useDialogService = () => {
itemList?: string[]
hint?: string
}): Promise<boolean | null> {
const { default: ConfirmationDialogContent } =
await import('@/components/dialog/content/ConfirmationDialogContent.vue')
return new Promise((resolve) => {
const options: ShowDialogOptions = {
key: 'global-prompt',
@@ -339,12 +366,14 @@ export const useDialogService = () => {
})
}
function showTopUpCreditsDialog(options?: {
async function showTopUpCreditsDialog(options?: {
isInsufficientCredits?: boolean
}) {
const { isActiveSubscription } = useSubscription()
if (!isActiveSubscription.value) return
const { default: TopUpCreditsDialogContent } =
await import('@/components/dialog/content/TopUpCreditsDialogContent.vue')
return dialogStore.showDialog({
key: 'top-up-credits',
component: TopUpCreditsDialogContent,
@@ -363,7 +392,12 @@ export const useDialogService = () => {
/**
* Shows a dialog for updating the current user's password.
*/
function showUpdatePasswordDialog() {
async function showUpdatePasswordDialog() {
const [{ default: UpdatePasswordContent }, { default: ComfyOrgHeader }] =
await Promise.all([
import('@/components/dialog/content/UpdatePasswordContent.vue'),
import('@/components/dialog/header/ComfyOrgHeader.vue')
])
return dialogStore.showDialog({
key: 'global-update-password',
component: UpdatePasswordContent,
@@ -425,7 +459,7 @@ export const useDialogService = () => {
})
}
function showImportFailedNodeDialog(
async function showImportFailedNodeDialog(
options: {
conflictedPackages?: ConflictDetectionResult[]
dialogComponentProps?: DialogComponentProps
@@ -433,6 +467,16 @@ export const useDialogService = () => {
) {
const { dialogComponentProps, conflictedPackages } = options
const [
{ default: ImportFailedNodeHeader },
{ default: ImportFailedNodeFooter },
{ default: ImportFailedNodeContent }
] = await Promise.all([
import('@/workbench/extensions/manager/components/manager/ImportFailedNodeHeader.vue'),
import('@/workbench/extensions/manager/components/manager/ImportFailedNodeFooter.vue'),
import('@/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue')
])
return dialogStore.showDialog({
key: 'global-import-failed',
headerComponent: ImportFailedNodeHeader,
@@ -462,7 +506,7 @@ export const useDialogService = () => {
})
}
function showNodeConflictDialog(
async function showNodeConflictDialog(
options: {
showAfterWhatsNew?: boolean
conflictedPackages?: ConflictDetectionResult[]
@@ -479,6 +523,16 @@ export const useDialogService = () => {
conflictedPackages
} = options
const [
{ default: NodeConflictHeader },
{ default: NodeConflictFooter },
{ default: NodeConflictDialogContent }
] = await Promise.all([
import('@/workbench/extensions/manager/components/manager/NodeConflictHeader.vue'),
import('@/workbench/extensions/manager/components/manager/NodeConflictFooter.vue'),
import('@/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue')
])
return dialogStore.showDialog({
key: 'global-node-conflict',
headerComponent: NodeConflictHeader,
@@ -628,7 +682,9 @@ export const useDialogService = () => {
})
}
function showBillingComingSoonDialog() {
async function showBillingComingSoonDialog() {
const { default: ConfirmationDialogContent } =
await import('@/components/dialog/content/ConfirmationDialogContent.vue')
return dialogStore.showDialog({
key: 'billing-coming-soon',
title: t('subscription.billingComingSoon.title'),

2
src/stores/firebaseAuthStore.ts
View File

@@ -154,7 +154,7 @@ export const useFirebaseAuthStore = defineStore('firebaseAuth', () => {
return
}
useDialogService().showErrorDialog(error, {
void useDialogService().showErrorDialog(error, {
title: t('errorDialog.defaultTitle'),
reportType: 'authenticationError'
})

2
src/workbench/extensions/manager/composables/useImportFailedDetection.ts
View File

@@ -33,7 +33,7 @@ function createImportFailedDialog() {
onClose?: () => void
) => {
if (conflictedPackages && conflictedPackages.length > 0) {
showImportFailedNodeDialog({
void showImportFailedNodeDialog({
conflictedPackages,
dialogComponentProps: {
onClose

4
src/workbench/extensions/manager/composables/useManagerState.ts
View File

@@ -153,7 +153,7 @@ export function useManagerState() {
switch (state) {
case ManagerUIState.DISABLED:
dialogService.showSettingsDialog('extension')
void dialogService.showSettingsDialog('extension')
break
case ManagerUIState.LEGACY_UI: {
@@ -173,7 +173,7 @@ export function useManagerState() {
}
// Fallback to extensions panel if not showing toast
if (options?.showToastOnLegacyError === false) {
dialogService.showSettingsDialog('extension')
void dialogService.showSettingsDialog('extension')
}
}
break