diff --git a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts index 025b83bcd..ebe573968 100644 --- a/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts +++ b/src/renderer/extensions/vueNodes/widgets/registry/widgetRegistry.ts @@ -1,30 +1,84 @@ /** * Widget type registry and component mapping for Vue-based widgets */ +import { defineAsyncComponent } from 'vue' import type { Component } from 'vue' -import Load3D from '@/components/load3d/Load3D.vue' import type { SafeWidgetData } from '@/composables/graph/useGraphNodeManager' -import WidgetAudioUI from '../components/WidgetAudioUI.vue' -import WidgetButton from '../components/WidgetButton.vue' -import WidgetChart from '../components/WidgetChart.vue' -import WidgetColorPicker from '../components/WidgetColorPicker.vue' -import WidgetFileUpload from '../components/WidgetFileUpload.vue' -import WidgetGalleria from '../components/WidgetGalleria.vue' -import WidgetImageCompare from '../components/WidgetImageCompare.vue' -import WidgetInputNumber from '../components/WidgetInputNumber.vue' -import WidgetInputText from '../components/WidgetInputText.vue' -import WidgetLegacy from '../components/WidgetLegacy.vue' -import WidgetMarkdown from '../components/WidgetMarkdown.vue' -import WidgetMultiSelect from '../components/WidgetMultiSelect.vue' -import WidgetRecordAudio from '../components/WidgetRecordAudio.vue' -import WidgetSelect from '../components/WidgetSelect.vue' -import WidgetSelectButton from '../components/WidgetSelectButton.vue' -import WidgetTextarea from '../components/WidgetTextarea.vue' -import WidgetToggleSwitch from '../components/WidgetToggleSwitch.vue' -import WidgetTreeSelect from '../components/WidgetTreeSelect.vue' -import AudioPreviewPlayer from '../components/audio/AudioPreviewPlayer.vue' +const WidgetButton = defineAsyncComponent( + () => import('../components/WidgetButton.vue') +) +const WidgetInputText = defineAsyncComponent( + () => import('../components/WidgetInputText.vue') +) +const WidgetInputNumber = defineAsyncComponent( + () => import('../components/WidgetInputNumber.vue') +) +const WidgetToggleSwitch = defineAsyncComponent( + () => import('../components/WidgetToggleSwitch.vue') +) +const WidgetSelect = defineAsyncComponent( + () => import('../components/WidgetSelect.vue') +) +const WidgetColorPicker = defineAsyncComponent( + () => import('../components/WidgetColorPicker.vue') +) +const WidgetMultiSelect = defineAsyncComponent( + () => import('../components/WidgetMultiSelect.vue') +) +const WidgetSelectButton = defineAsyncComponent( + () => import('../components/WidgetSelectButton.vue') +) +const WidgetTextarea = defineAsyncComponent( + () => import('../components/WidgetTextarea.vue') +) +const WidgetChart = defineAsyncComponent( + () => import('../components/WidgetChart.vue') +) +const WidgetImageCompare = defineAsyncComponent( + () => import('../components/WidgetImageCompare.vue') +) +const WidgetGalleria = defineAsyncComponent( + () => import('../components/WidgetGalleria.vue') +) +const WidgetFileUpload = defineAsyncComponent( + () => import('../components/WidgetFileUpload.vue') +) +const WidgetTreeSelect = defineAsyncComponent( + () => import('../components/WidgetTreeSelect.vue') +) +const WidgetMarkdown = defineAsyncComponent( + () => import('../components/WidgetMarkdown.vue') +) +const WidgetLegacy = defineAsyncComponent( + () => import('../components/WidgetLegacy.vue') +) +const WidgetRecordAudio = defineAsyncComponent( + () => import('../components/WidgetRecordAudio.vue') +) +const AudioPreviewPlayer = defineAsyncComponent( + () => import('../components/audio/AudioPreviewPlayer.vue') +) +const WidgetAudioUI = defineAsyncComponent( + () => import('../components/WidgetAudioUI.vue') +) +const Load3D = defineAsyncComponent( + () => import('@/components/load3d/Load3D.vue') +) + +export const FOR_TESTING = { + WidgetAudioUI, + WidgetButton, + WidgetColorPicker, + WidgetFileUpload, + WidgetInputNumber, + WidgetInputText, + WidgetMarkdown, + WidgetSelect, + WidgetTextarea, + WidgetToggleSwitch +} as const interface WidgetDefinition { component: Component diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts index 7c1d2dd5d..2b9cdd251 100644 --- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts +++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useWidgetRenderer.test.ts @@ -1,21 +1,25 @@ import { describe, expect, it, vi } from 'vitest' -import WidgetAudioUI from '@/renderer/extensions/vueNodes/widgets/components/WidgetAudioUI.vue' -import WidgetButton from '@/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue' -import WidgetColorPicker from '@/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue' -import WidgetFileUpload from '@/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue' -import WidgetInputNumber from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue' -import WidgetInputText from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue' -import WidgetMarkdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetMarkdown.vue' -import WidgetSelect from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelect.vue' -import WidgetTextarea from '@/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue' -import WidgetToggleSwitch from '@/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue' import { getComponent, isEssential, - shouldRenderAsVue + shouldRenderAsVue, + FOR_TESTING } from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry' +const { + WidgetAudioUI, + WidgetButton, + WidgetColorPicker, + WidgetFileUpload, + WidgetInputNumber, + WidgetInputText, + WidgetMarkdown, + WidgetSelect, + WidgetTextarea, + WidgetToggleSwitch +} = FOR_TESTING + vi.mock('@/stores/queueStore', () => ({ useQueueStore: vi.fn(() => ({ historyTasks: []