From 8a5bb3dd0b4146d5eef8abbc1aeeb8b71fa77467 Mon Sep 17 00:00:00 2001 From: Red-Asuka Date: Thu, 31 Oct 2024 11:24:31 +0800 Subject: [PATCH] feat(desktop): support for automatic component import --- apps/desktop/electron.vite.config.ts | 8 +++++++ apps/desktop/package.json | 1 + apps/desktop/src/renderer/components.d.ts | 23 +++++++++++++++++++ apps/desktop/src/renderer/src/App.vue | 14 +++++------ apps/desktop/src/renderer/src/main.ts | 8 +++---- .../renderer/src/pages/connections/[id].vue | 13 ++++++----- .../renderer/src/pages/connections/index.vue | 10 ++++---- apps/desktop/tsconfig.web.json | 3 ++- .../ui/src/components/common/MainView.vue | 4 ---- .../ui/src/components/common/SplitView.vue | 2 -- pnpm-lock.yaml | 3 +++ 11 files changed, 58 insertions(+), 31 deletions(-) create mode 100644 apps/desktop/src/renderer/components.d.ts diff --git a/apps/desktop/electron.vite.config.ts b/apps/desktop/electron.vite.config.ts index 0384eebc6..45da2db60 100644 --- a/apps/desktop/electron.vite.config.ts +++ b/apps/desktop/electron.vite.config.ts @@ -2,6 +2,8 @@ import { resolve } from 'path' import { defineConfig, externalizeDepsPlugin } from 'electron-vite' import vue from '@vitejs/plugin-vue' import VueRouter from 'unplugin-vue-router/vite' +import Components from 'unplugin-vue-components/vite' +import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ main: { @@ -25,6 +27,12 @@ export default defineConfig({ ], }), vue(), + Components({ + dts: true, + directoryAsNamespace: true, + dirs: ['src/components', '../../../../packages/ui/src/components'], + resolvers: [ElementPlusResolver()], + }), ], }, }) diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 73cd9a917..37270eb8f 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -49,6 +49,7 @@ "sass": "^1.69.3", "tailwindcss": "^3.3.3", "typescript": "^5.1.6", + "unplugin-vue-components": "^0.27.4", "unplugin-vue-router": "^0.10.8", "vite": "^4.4.9", "vitest": "^0.34.6", diff --git a/apps/desktop/src/renderer/components.d.ts b/apps/desktop/src/renderer/components.d.ts new file mode 100644 index 000000000..435c08252 --- /dev/null +++ b/apps/desktop/src/renderer/components.d.ts @@ -0,0 +1,23 @@ +/* eslint-disable */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +/* prettier-ignore */ +declare module 'vue' { + export interface GlobalComponents { + CommonEmptyView: typeof import('./../../../../packages/ui/src/components/common/EmptyView.vue')['default'] + CommonLeftMenu: typeof import('./../../../../packages/ui/src/components/common/LeftMenu.vue')['default'] + CommonMainView: typeof import('./../../../../packages/ui/src/components/common/MainView.vue')['default'] + CommonSplitView: typeof import('./../../../../packages/ui/src/components/common/SplitView.vue')['default'] + ConnectionsDetailsView: typeof import('./../../../../packages/ui/src/components/connections/DetailsView.vue')['default'] + ConnectionsListView: typeof import('./../../../../packages/ui/src/components/connections/ListView.vue')['default'] + ElAside: typeof import('element-plus/es')['ElAside'] + ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] + ElContainer: typeof import('element-plus/es')['ElContainer'] + ElMain: typeof import('element-plus/es')['ElMain'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + } +} diff --git a/apps/desktop/src/renderer/src/App.vue b/apps/desktop/src/renderer/src/App.vue index c79270a3a..ed26779ea 100644 --- a/apps/desktop/src/renderer/src/App.vue +++ b/apps/desktop/src/renderer/src/App.vue @@ -7,12 +7,10 @@ console.log('MQTTX Desktop App init...') - - diff --git a/apps/desktop/src/renderer/src/main.ts b/apps/desktop/src/renderer/src/main.ts index 451cab90f..1857f6fc6 100644 --- a/apps/desktop/src/renderer/src/main.ts +++ b/apps/desktop/src/renderer/src/main.ts @@ -4,18 +4,16 @@ import './assets/scss/main.scss' import { createApp } from 'vue' import App from './App.vue' -import ElementPlus from 'element-plus' - import { router } from './router' -import MqttxUI, { pinia, i18n, useSettingsStore } from '@mqttx/ui' +import { pinia, i18n, useSettingsStore } from '@mqttx/ui' // Create Vue const app = createApp(App) -app.use(router).use(pinia).use(MqttxUI) +app.use(router).use(pinia) // I18n const settingsStore = useSettingsStore() i18n.global.locale = settingsStore.lang -app.use(ElementPlus).use(i18n).mount('#app') +app.use(i18n).mount('#app') diff --git a/apps/desktop/src/renderer/src/pages/connections/[id].vue b/apps/desktop/src/renderer/src/pages/connections/[id].vue index 998d11507..d4bf4892c 100644 --- a/apps/desktop/src/renderer/src/pages/connections/[id].vue +++ b/apps/desktop/src/renderer/src/pages/connections/[id].vue @@ -1,16 +1,17 @@ diff --git a/apps/desktop/src/renderer/src/pages/connections/index.vue b/apps/desktop/src/renderer/src/pages/connections/index.vue index 22c30cab5..cb5e5fae6 100644 --- a/apps/desktop/src/renderer/src/pages/connections/index.vue +++ b/apps/desktop/src/renderer/src/pages/connections/index.vue @@ -5,17 +5,17 @@ const { connections } = useMockData() diff --git a/apps/desktop/tsconfig.web.json b/apps/desktop/tsconfig.web.json index 27a9329cf..cab0788d7 100644 --- a/apps/desktop/tsconfig.web.json +++ b/apps/desktop/tsconfig.web.json @@ -5,7 +5,8 @@ "src/renderer/src/**/*", "src/renderer/src/**/*.vue", "src/preload/*.d.ts", - "./typed-router.d.ts" + "./typed-router.d.ts", + "src/renderer/components.d.ts" ], "compilerOptions": { "composite": true, diff --git a/packages/ui/src/components/common/MainView.vue b/packages/ui/src/components/common/MainView.vue index ff477fdde..1585164f0 100644 --- a/packages/ui/src/components/common/MainView.vue +++ b/packages/ui/src/components/common/MainView.vue @@ -1,9 +1,5 @@ - - - - diff --git a/packages/ui/src/components/common/SplitView.vue b/packages/ui/src/components/common/SplitView.vue index 8464ac32c..a49b1056c 100644 --- a/packages/ui/src/components/common/SplitView.vue +++ b/packages/ui/src/components/common/SplitView.vue @@ -152,5 +152,3 @@ onMounted(() => { - - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9b242b9bf..cfbd25b08 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -193,6 +193,9 @@ importers: typescript: specifier: ^5.1.6 version: 5.2.2 + unplugin-vue-components: + specifier: ^0.27.4 + version: 0.27.4(vue@3.3.4) unplugin-vue-router: specifier: ^0.10.8 version: 0.10.8(vue-router@4.4.5)(vue@3.3.4)