feat(routes): automatically generate routes based on files

apps/desktop/electron.vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import vue from '@vitejs/plugin-vue'
+import VueRouter from 'unplugin-vue-router/vite'
 
 export default defineConfig({
   main: {
@@ -15,6 +16,15 @@ export default defineConfig({
         '@': resolve('src/renderer/src'),
       },
     },
-    plugins: [vue()],
+    plugins: [
+      VueRouter({
+        routesFolder: [
+          {
+            src: 'src/renderer/src/pages',
+          },
+        ],
+      }),
+      vue(),
+    ],
   },
 })

apps/desktop/package.json

@@ -28,7 +28,7 @@
     "element-plus": "^2.4.1",
     "pinia": "^2.1.7",
     "vue-i18n": "9",
-    "vue-router": "4"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@electron-toolkit/tsconfig": "^1.0.1",
@@ -49,6 +49,7 @@
     "sass": "^1.69.3",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
+    "unplugin-vue-router": "^0.10.8",
     "vite": "^4.4.9",
     "vitest": "^0.34.6",
     "vue": "^3.3.4",

apps/desktop/src/renderer/src/env.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />
+
 declare module '@/composables/useMockData'
 
 declare module '*.vue' {

apps/desktop/src/renderer/src/main.ts

@@ -6,24 +6,12 @@ import App from './App.vue'
 
 import ElementPlus from 'element-plus'
 
-import { createRouter, createWebHashHistory } from 'vue-router'
-import { routerComponentMap } from './configs/router'
-
-import MqttxUI, { getRoutes, createRouterGuard, pinia, i18n, useSettingsStore } from '@mqttx/ui'
-import useMockData from '@/composables/useMockData'
+import { router } from './router'
+import MqttxUI, { pinia, i18n, useSettingsStore } from '@mqttx/ui'
 
 // Create Vue
 const app = createApp(App)
 
-// Router
-const routes = getRoutes(routerComponentMap)
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes,
-})
-const { getFirstConnectionId } = useMockData()
-router.beforeEach(createRouterGuard(getFirstConnectionId))
-
 app.use(router).use(pinia).use(MqttxUI)
 
 // I18n

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

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

apps/web/src/pages/connections/Index.vue → apps/desktop/src/renderer/src/pages/connections/index.vue

@@ -1,18 +1,14 @@
 <script lang="ts" setup>
 import useMockData from '@/composables/useMockData'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
 
 const { connections } = useMockData()
-const route = useRoute()
-const activeId = computed(() => route.params.id)
 </script>
 
 <template>
   <split-view class="connections-container" min-size="180px" max-size="400px">
     <template #panel-1>
       <div class="connections-list">
-        <connection-list-view :data="connections" :active-id="activeId" />
+        <connection-list-view :data="connections" />
       </div>
     </template>
     <template #panel-2>

apps/desktop/src/renderer/src/router.ts

@@ -0,0 +1,34 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { routes, handleHotUpdate } from 'vue-router/auto-routes'
+import useMockData from '@/composables/useMockData'
+
+routes.push({
+  path: '/',
+  redirect: '/connections',
+})
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+// This will update routes at runtime without reloading the page
+if (import.meta.hot) {
+  handleHotUpdate(router)
+}
+
+const { getFirstConnectionId } = useMockData()
+
+router.beforeEach((to, _from, next) => {
+  if (to.name === '/connections/') {
+    console.log('Route to Connections Page')
+    const firstConnectionId = getFirstConnectionId()
+    if (firstConnectionId) {
+      next(`/connections/${firstConnectionId}`)
+      return
+    }
+    next()
+  } else {
+    next()
+  }
+})

apps/desktop/tsconfig.web.json

@@ -1,6 +1,12 @@
 {
   "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
-  "include": ["src/renderer/src/env.d.ts", "src/renderer/src/**/*", "src/renderer/src/**/*.vue", "src/preload/*.d.ts"],
+  "include": [
+    "src/renderer/src/env.d.ts", 
+    "src/renderer/src/**/*", 
+    "src/renderer/src/**/*.vue", 
+    "src/preload/*.d.ts", 
+    "./typed-router.d.ts"
+  ],
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",

apps/desktop/typed-router.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/connections/': RouteRecordInfo<'/connections/', '/connections', Record<never, never>, Record<never, never>>,
+    '/connections/[id]': RouteRecordInfo<'/connections/[id]', '/connections/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+  }
+}

apps/web/env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />

apps/web/package.json

@@ -19,7 +19,7 @@
     "pinia": "^2.1.7",
     "vue": "^3.3.4",
     "vue-i18n": "9",
-    "vue-router": "4"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@mqttx/core": "workspace:*",
@@ -41,6 +41,7 @@
     "sass": "^1.69.3",
     "tailwindcss": "^3.3.3",
     "typescript": "~5.2.0",
+    "unplugin-vue-router": "^0.10.8",
     "vite": "^4.4.9",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.8.11"

apps/web/src/main.ts

@@ -6,24 +6,12 @@ import App from './App.vue'
 
 import ElementPlus from 'element-plus'
 
-import { createRouter, createWebHashHistory } from 'vue-router'
-import { routerComponentMap } from './configs/router'
-
-import MqttxUI, { getRoutes, createRouterGuard, pinia, i18n, useSettingsStore } from '@mqttx/ui'
-import useMockData from '@/composables/useMockData'
+import { router } from './router'
+import MqttxUI, { pinia, i18n, useSettingsStore } from '@mqttx/ui'
 
 // Create Vue
 const app = createApp(App)
 
-// Router
-const routes = getRoutes(routerComponentMap)
-const router = createRouter({
-  history: createWebHashHistory(),
-  routes,
-})
-const { getFirstConnectionId } = useMockData()
-router.beforeEach(createRouterGuard(getFirstConnectionId))
-
 app.use(router).use(pinia).use(MqttxUI)
 
 // I18n

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

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

apps/desktop/src/renderer/src/pages/connections/Index.vue → apps/web/src/pages/connections/index.vue

@@ -1,18 +1,14 @@
 <script lang="ts" setup>
 import useMockData from '@/composables/useMockData'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
 
 const { connections } = useMockData()
-const route = useRoute()
-const activeId = computed(() => route.params.id)
 </script>
 
 <template>
   <split-view class="connections-container" min-size="180px" max-size="400px">
     <template #panel-1>
       <div class="connections-list">
-        <connection-list-view :data="connections" :active-id="activeId" />
+        <connection-list-view :data="connections" />
       </div>
     </template>
     <template #panel-2>

apps/web/src/router.ts

@@ -0,0 +1,34 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { routes, handleHotUpdate } from 'vue-router/auto-routes'
+import useMockData from '@/composables/useMockData'
+
+routes.push({
+  path: '/',
+  redirect: '/connections',
+})
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+})
+
+// This will update routes at runtime without reloading the page
+if (import.meta.hot) {
+  handleHotUpdate(router)
+}
+
+const { getFirstConnectionId } = useMockData()
+
+router.beforeEach((to, _from, next) => {
+  if (to.name === '/connections/') {
+    console.log('Route to Connections Page')
+    const firstConnectionId = getFirstConnectionId()
+    if (firstConnectionId) {
+      next(`/connections/${firstConnectionId}`)
+      return
+    }
+    next()
+  } else {
+    next()
+  }
+})

apps/web/tsconfig.app.json

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

apps/web/typed-router.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/connections/': RouteRecordInfo<'/connections/', '/connections', Record<never, never>, Record<never, never>>,
+    '/connections/[id]': RouteRecordInfo<'/connections/[id]', '/connections/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+  }
+}

apps/web/vite.config.ts

@@ -3,10 +3,11 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import VueRouter from 'unplugin-vue-router/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx()],
+  plugins: [VueRouter(), vue(), vueJsx()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),