feat(components): support for automatic component import

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()],
+      }),
     ],
   },
 })

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",

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']
+  }
+}

apps/desktop/src/renderer/src/App.vue

@@ -7,12 +7,10 @@ console.log('MQTTX Desktop App init...')
 </script>
 
 <template>
-  <el-config-provider :locale="ElementI18nMap[settingsStore.lang]">
-    <el-container>
-      <left-menu />
-      <main-view />
-    </el-container>
-  </el-config-provider>
+  <ElConfigProvider :locale="ElementI18nMap[settingsStore.lang]">
+    <ElContainer>
+      <CommonLeftMenu />
+      <CommonMainView />
+    </ElContainer>
+  </ElConfigProvider>
 </template>
-
-<style lang="scss" scoped></style>

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')

apps/desktop/src/renderer/src/pages/connections/[id].vue

@@ -1,16 +1,17 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+// import { computed } from 'vue'
+// import { useRoute } from 'vue-router'
 
-const route = useRoute()
-const id = computed(() => route.name === '/connections/[id]' && route.params.id)
+// const route = useRoute()
+// const id = computed(() => route.name === '/connections/[id]' && route.params.id)
 </script>
 
 <template>
-  <connection-details-view
+  TODO: Connection Details View
+  <!-- <ConnectionsDetailsView
     :connection="{
       name: 'test',
       id,
     }"
-  />
+  /> -->
 </template>

apps/desktop/src/renderer/src/pages/connections/index.vue

@@ -5,17 +5,17 @@ const { connections } = useMockData()
 </script>
 
 <template>
-  <split-view class="connections-container" min-size="180px" max-size="400px">
+  <CommonSplitView class="connections-container" min-size="180px" max-size="400px">
     <template #panel-1>
       <div class="connections-list">
-        <connection-list-view :data="connections" />
+        <ConnectionsListView :data="connections" />
       </div>
     </template>
     <template #panel-2>
       <div class="connection-detail">
-        <router-view v-if="connections.length" />
-        <empty-view v-else />
+        <RouterView v-if="connections.length" />
+        <CommonEmptyView v-else />
       </div>
     </template>
-  </split-view>
+  </CommonSplitView>
 </template>

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,

apps/web/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']
+  }
+}

apps/web/package.json

@@ -41,6 +41,7 @@
     "sass": "^1.69.3",
     "tailwindcss": "^3.3.3",
     "typescript": "~5.2.0",
+    "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-router": "^0.10.8",
     "vite": "^4.4.9",
     "vitest": "^0.34.6",

apps/web/src/App.vue

@@ -7,12 +7,10 @@ console.log('MQTTX Web App init...')
 </script>
 
 <template>
-  <el-config-provider :locale="ElementI18nMap[settingsStore.lang]">
-    <el-container>
-      <left-menu />
-      <main-view />
-    </el-container>
-  </el-config-provider>
+  <ElConfigProvider :locale="ElementI18nMap[settingsStore.lang]">
+    <ElContainer>
+      <CommonLeftMenu />
+      <CommonMainView />
+    </ElContainer>
+  </ElConfigProvider>
 </template>
-
-<style lang="scss" scoped></style>

apps/web/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')

apps/web/src/pages/connections/[id].vue

@@ -1,16 +1,17 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+// import { computed } from 'vue'
+// import { useRoute } from 'vue-router'
 
-const route = useRoute()
-const id = computed(() => route.name === '/connections/[id]' && route.params.id)
+// const route = useRoute()
+// const id = computed(() => route.name === '/connections/[id]' && route.params.id)
 </script>
 
 <template>
-  <connection-details-view
+  TODO: Connection Details View
+  <!-- <ConnectionsDetailsView
     :connection="{
       name: 'test',
       id,
     }"
-  />
+  /> -->
 </template>

apps/web/src/pages/connections/index.vue

@@ -5,17 +5,17 @@ const { connections } = useMockData()
 </script>
 
 <template>
-  <split-view class="connections-container" min-size="180px" max-size="400px">
+  <CommonSplitView class="connections-container" min-size="180px" max-size="400px">
     <template #panel-1>
       <div class="connections-list">
-        <connection-list-view :data="connections" />
+        <ConnectionsListView :data="connections" />
       </div>
     </template>
     <template #panel-2>
       <div class="connection-detail">
-        <router-view v-if="connections.length" />
-        <empty-view v-else />
+        <RouterView v-if="connections.length" />
+        <CommonEmptyView v-else />
       </div>
     </template>
-  </split-view>
+  </CommonSplitView>
 </template>

apps/web/tsconfig.app.json

@@ -1,6 +1,12 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./typed-router.d.ts"],
+  "include": [
+    "env.d.ts", 
+    "src/**/*", 
+    "src/**/*.vue", 
+    "./typed-router.d.ts",
+    "./components.d.ts"
+],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "esModuleInterop": true,

apps/web/vite.config.ts

@@ -4,10 +4,22 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import VueRouter from 'unplugin-vue-router/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [VueRouter(), vue(), vueJsx()],
+  plugins: [
+    VueRouter(),
+    vue(),
+    vueJsx(),
+    Components({
+      dts: true,
+      directoryAsNamespace: true,
+      dirs: ['src/components', '../../packages/ui/src/components'],
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),

packages/ui/src/components/common/MainView.vue

@@ -1,9 +1,5 @@
-<script setup lang="ts"></script>
-
 <template>
   <el-main>
     <router-view></router-view>
   </el-main>
 </template>
-
-<style lang="scss" scoped></style>

packages/ui/src/components/common/SplitView.vue

@@ -152,5 +152,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style scoped></style>