feat(vite): basic home page

package.json

@@ -32,11 +32,13 @@
     "@iconify-json/fluent": "catalog:icons",
     "@iconify-json/fluent-emoji-flat": "catalog:icons",
     "@iconify-json/logos": "catalog:icons",
+    "@iconify-json/material-icon-theme": "catalog:icons",
     "@iconify-json/octicon": "catalog:icons",
     "@iconify-json/ph": "catalog:icons",
     "@iconify-json/ri": "catalog:icons",
     "@iconify-json/simple-icons": "catalog:icons",
     "@iconify-json/svg-spinners": "catalog:icons",
+    "@iconify-json/system-uicons": "catalog:icons",
     "@iconify-json/tabler": "catalog:icons",
     "@nuxt/devtools": "catalog:devtools",
     "@nuxt/eslint": "catalog:devtools",

packages/vite/package.json

@@ -39,6 +39,7 @@
     "@vitejs/devtools-kit": "workspace:*",
     "@vitejs/devtools-rpc": "workspace:*",
     "birpc": "catalog:deps",
+    "envinfo": "catalog:deps",
     "get-port-please": "catalog:deps",
     "h3": "catalog:deps",
     "ohash": "catalog:deps",
@@ -48,6 +49,7 @@
     "ws": "catalog:deps"
   },
   "devDependencies": {
+    "@types/envinfo": "catalog:types",
     "@unocss/nuxt": "catalog:build",
     "@vueuse/core": "catalog:frontend",
     "@vueuse/nuxt": "catalog:build",

packages/vite/src/app/app.vue

@@ -1,21 +1,41 @@
 <script setup lang="ts">
 import { useHead } from '#app/composables/head'
+import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
+import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
+import { connect, rpcConnectionState } from './composables/rpc'
 import './styles/global.css'
 import '@vitejs/devtools-ui/composables/dark'
+import 'floating-vue/dist/style.css'
 
 useHead({
   title: 'Vite DevTools',
 })
 
-const connected = false
+connect()
+
+useSideNav(() => {
+  return [
+    {
+      title: 'Home',
+      icon: 'i-ph-house-duotone',
+      to: '/home',
+    },
+  ]
+})
 </script>
 
 <template>
+  <div v-if="rpcConnectionState.error" text-red>
+    {{ rpcConnectionState.error }}
+  </div>
   <VisualLoading
-    v-if="!connected"
-    text="Coming Soon..."
+    v-else-if="!rpcConnectionState.connected"
+    text="Connecting..."
   />
-  <div v-else h-vh>
-    <NuxtPage />
+  <div v-else grid="~ cols-[max-content_1fr]" h-screen w-screen max-w-screen max-h-screen of-hidden>
+    <PanelSideNav />
+    <div of-auto h-screen max-h-screen relative>
+      <NuxtPage />
+    </div>
   </div>
 </template>

packages/vite/src/app/pages/home.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { useRpc } from '#imports'
+import { useAsyncState } from '@vueuse/core'
+import { computed } from 'vue'
+
+const rpc = useRpc()
+const { state, isLoading } = useAsyncState(
+  async () => {
+    const [metadata, envInfo] = await Promise.all([
+      rpc.value.call(
+        'vite:meta-info',
+      ),
+      rpc.value.call(
+        'vite:env-info',
+      ),
+    ])
+
+    return {
+      metadata,
+      envInfo,
+    }
+  },
+  null,
+)
+
+const projectMetadata = computed(() => state.value?.metadata)
+const environmentMetadata = computed(() => state.value?.envInfo)
+
+const metadata = computed(() => [
+  {
+    id: 'project',
+    icon: 'i-material-icon-theme:vite',
+    rows: [
+      {
+        id: 'root',
+        icon: 'i-ph-folder-duotone',
+        label: 'Root',
+        value: projectMetadata.value?.root,
+      },
+      {
+        id: 'base',
+        icon: 'i-ph-folder-duotone',
+        label: 'Base',
+        value: projectMetadata.value?.base,
+      },
+      {
+        id: 'plugins',
+        icon: 'i-ph-plugs-duotone',
+        label: 'Plugins',
+        value: projectMetadata.value?.plugins.length ?? 0,
+      },
+    ],
+  },
+  {
+    id: 'system',
+    icon: 'i-ph:desktop',
+    rows: [
+      {
+        id: 'os',
+        icon: 'i-ph-folder-duotone',
+        label: 'OS',
+        value: environmentMetadata.value?.os,
+      },
+      {
+        id: 'cpu',
+        icon: 'i-ph:cpu',
+        label: 'CPU',
+        value: environmentMetadata.value?.cpu,
+      },
+      {
+        id: 'memory',
+        icon: 'i-ph:memory',
+        label: 'Memory',
+        value: environmentMetadata.value?.memory,
+      },
+    ],
+  },
+  {
+    id: 'runtime',
+    icon: 'i-system-uicons:version',
+    rows: [
+      {
+        id: 'node',
+        icon: 'i-ri:nodejs-fill',
+        label: 'Node',
+        value: environmentMetadata.value?.node,
+      },
+      {
+        id: 'npm',
+        icon: 'i-ri:npmjs-fill',
+        label: 'NPM',
+        value: environmentMetadata.value?.npm,
+      },
+      {
+        id: 'pnpm',
+        icon: 'i-catppuccin:pnpm',
+        label: 'PNPM',
+        value: environmentMetadata.value?.pnpm,
+      },
+      {
+        id: 'yarn',
+        icon: 'i-catppuccin:yarn',
+        label: 'Yarn',
+        value: environmentMetadata.value?.yarn,
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <VisualLoading
+    v-if="isLoading"
+    text="Connecting..."
+  />
+  <div v-else p4 flex="~ col gap-4" items-center justify-center relative>
+    <VisualLogoBanner />
+
+    <div border="~ base rounded" p2 flex="~ col gap-4 justify-center">
+      <div
+        v-for="section in metadata"
+        :key="section.id"
+        p4
+        flex="~ gap-14 items-center"
+      >
+        <div class="text-3xl flex ml3" :class="section.icon" />
+        <div>
+          <div
+            v-for="row in section.rows"
+            :key="row.id"
+            grid="~ cols-[max-content_80px_2fr] gap-2 items-center"
+          >
+            <div :class="row.icon" />
+            <div>
+              {{ row.label }}
+            </div>
+            <div font-mono>
+              {{ row.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

packages/vite/src/app/pages/index.vue

@@ -1,7 +1,9 @@
+<script lang="ts" setup>
+import { navigateTo } from '#app/composables/router'
+
+navigateTo('/home')
+</script>
+
 <template>
-  <div p10 flex="~ col" items-center justify-center>
-    <h1 text-2xl font-bold>
-      Vite DevTools
-    </h1>
-  </div>
+  <div p10 flex="~ col" items-center justify-center />
 </template>

packages/vite/src/app/plugins/floating-vue.ts

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app/nuxt'
+import FloatingVue from 'floating-vue'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(FloatingVue, {
+    overflowPadding: 20,
+  })
+})

packages/vite/src/node/rpc/functions/vite-env-info.ts

@@ -0,0 +1,33 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const viteEnvInfo = defineRpcFunction({
+  name: 'vite:env-info',
+  type: 'query',
+  setup: () => {
+    return {
+      handler: async () => {
+        const { default: { helpers } } = await import('envinfo')
+
+        const [cpu, os, memory, node, npm, pnpm, yarn] = await Promise.all([
+          helpers.getCPUInfo().then(([,res]) => res),
+          helpers.getOSInfo().then(([,res]) => res),
+          helpers.getMemoryInfo().then(([,res]) => res),
+          helpers.getNodeInfo().then(([,res]) => res),
+          helpers.getnpmInfo().then(([,res]) => res),
+          helpers.getpnpmInfo().then(([,res]) => res),
+          helpers.getYarnInfo().then(([,res]) => res),
+        ])
+
+        return {
+          cpu,
+          os,
+          memory,
+          node,
+          npm,
+          pnpm,
+          yarn,
+        }
+      },
+    }
+  },
+})

packages/vite/src/node/rpc/functions/vite-meta-info.ts

@@ -0,0 +1,19 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const viteMetaInfo = defineRpcFunction({
+  name: 'vite:meta-info',
+  type: 'query',
+  setup: (context) => {
+    return {
+      handler: async () => {
+        const { root, base, plugins } = context.viteConfig
+
+        return {
+          root,
+          base,
+          plugins: plugins.map(p => p.name),
+        }
+      },
+    }
+  },
+})

packages/vite/src/node/rpc/index.ts

@@ -1,9 +1,11 @@
 import type { RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
-import { viteHi } from './functions/hi'
+import { viteEnvInfo } from './functions/vite-env-info'
+import { viteMetaInfo } from './functions/vite-meta-info'
 import '@vitejs/devtools-kit'
 
 export const rpcFunctions = [
-  viteHi,
+  viteMetaInfo,
+  viteEnvInfo,
 ] as const
 
 export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>