feat(ui): setup vite-plugin-pages

.tazerc.json

@@ -1,6 +1,7 @@
 {
   "exclude": [
     "vue",
+    "esbuild",
     "puppeteer"
   ]
 }

package.json

@@ -33,6 +33,7 @@
     "bumpp": "^7.1.1",
     "c8": "^7.10.0",
     "cross-env": "^7.0.3",
+    "esbuild": "0.13",
     "eslint": "^8.5.0",
     "esno": "^0.13.0",
     "fast-glob": "^3.2.7",
@@ -42,11 +43,12 @@
     "pathe": "^0.2.0",
     "pnpm": "^6.24.3",
     "rimraf": "^3.0.2",
+    "rollup": "^2.62.0",
     "rollup-plugin-dts": "^4.1.0",
     "rollup-plugin-esbuild": "^4.8.1",
     "rollup-plugin-license": "^2.6.0",
     "typescript": "^4.5.4",
-    "vite": "^2.7.8",
+    "vite": "^2.7.9",
     "vitepress": "^0.20.10",
     "vitest": "workspace:*",
     "vue": "^3.2.25"

packages/ui/client/App.vue

@@ -1,8 +1,3 @@
 <template>
-  <div grid="~ cols-[15rem_15rem_auto]" h-screen w-screen overflow="hidden">
-    <Navigation />
-    <Suites />
-    <FileDetails />
-  </div>
-  <ConnectionOverlay />
+  <RouterView />
 </template>

packages/ui/client/auto-imports.d.ts

@@ -154,6 +154,8 @@ declare global {
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
   const useScroll: typeof import('@vueuse/core')['useScroll']

packages/ui/client/main.ts

@@ -1,9 +1,18 @@
 import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import routes from 'virtual:generated-pages'
 import App from './App.vue'
+
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror-theme-vars/base.css'
 import './styles/main.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+app.use(router)
+app.mount('#app')

packages/ui/client/pages/index.vue

@@ -0,0 +1,8 @@
+<template>
+  <div grid="~ cols-[15rem_15rem_auto]" h-screen w-screen overflow="hidden">
+    <Navigation />
+    <Suites />
+    <FileDetails />
+  </div>
+  <ConnectionOverlay />
+</template>

packages/ui/client/shim.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-pages/client" />
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'

packages/ui/package.json

@@ -41,7 +41,10 @@
     "unocss": "^0.20.0",
     "unplugin-auto-import": "^0.5.5",
     "unplugin-vue-components": "^0.17.11",
-    "vitest": "workspace:*"
+    "vite-plugin-pages": "^0.19.8",
+    "vitest": "workspace:*",
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.12"
   },
   "peerDependencies": {
     "vitest": "workspace:*"

packages/ui/vite.config.ts

@@ -4,6 +4,7 @@ import Vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Unocss from 'unocss/vite'
+import Pages from 'vite-plugin-pages'
 import { presetAttributify, presetIcons, presetUno } from 'unocss'
 
 export default defineConfig({
@@ -35,10 +36,14 @@ export default defineConfig({
       dirs: ['client/components'],
       dts: resolve(__dirname, './client/components.d.ts'),
     }),
+    Pages({
+      dirs: ['client/pages'],
+    }),
     AutoImport({
       dts: resolve(__dirname, './client/auto-imports.d.ts'),
       imports: [
         'vue',
+        'vue-router',
         '@vueuse/core',
       ],
     }),