Skip to content

Commit ccc8cb4

Browse files
webfansplzwebfansplz
authored
feat(vite): basic home page (#194)
1 parent 33a7afc commit ccc8cb4

File tree

13 files changed

+309
-30
lines changed

13 files changed

+309
-30
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,13 @@
3232
"@iconify-json/fluent": "catalog:icons",
3333
"@iconify-json/fluent-emoji-flat": "catalog:icons",
3434
"@iconify-json/logos": "catalog:icons",
35+
"@iconify-json/material-icon-theme": "catalog:icons",
3536
"@iconify-json/octicon": "catalog:icons",
3637
"@iconify-json/ph": "catalog:icons",
3738
"@iconify-json/ri": "catalog:icons",
3839
"@iconify-json/simple-icons": "catalog:icons",
3940
"@iconify-json/svg-spinners": "catalog:icons",
41+
"@iconify-json/system-uicons": "catalog:icons",
4042
"@iconify-json/tabler": "catalog:icons",
4143
"@json-render/core": "catalog:frontend",
4244
"@json-render/vue": "catalog:frontend",

‎packages/core/src/client/webcomponents/.generated/css.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/vite/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@vitejs/devtools-kit": "workspace:*",
4040
"@vitejs/devtools-rpc": "workspace:*",
4141
"birpc": "catalog:deps",
42+
"envinfo": "catalog:deps",
4243
"get-port-please": "catalog:deps",
4344
"h3": "catalog:deps",
4445
"ohash": "catalog:deps",
@@ -48,6 +49,7 @@
4849
"ws": "catalog:deps"
4950
},
5051
"devDependencies": {
52+
"@types/envinfo": "catalog:types",
5153
"@unocss/nuxt": "catalog:build",
5254
"@vueuse/core": "catalog:frontend",
5355
"@vueuse/nuxt": "catalog:build",

‎packages/vite/src/app/app.vue‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,41 @@
11
<script setup lang="ts">
22
import { useHead } from '#app/composables/head'
3+
import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
4+
import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
5+
import { connect, rpcConnectionState } from './composables/rpc'
36
import './styles/global.css'
47
import '@vitejs/devtools-ui/composables/dark'
8+
import 'floating-vue/dist/style.css'
59
610
useHead({
711
title: 'Vite DevTools',
812
})
913
10-
const connected = false
14+
connect()
15+
16+
useSideNav(() => {
17+
return [
18+
{
19+
title: 'Home',
20+
icon: 'i-ph-house-duotone',
21+
to: '/home',
22+
},
23+
]
24+
})
1125
</script>
1226

1327
<template>
28+
<div v-if="rpcConnectionState.error" text-red>
29+
{{ rpcConnectionState.error }}
30+
</div>
1431
<VisualLoading
15-
v-if="!connected"
16-
text="Coming Soon..."
32+
v-else-if="!rpcConnectionState.connected"
33+
text="Connecting..."
1734
/>
18-
<div v-else h-vh>
19-
<NuxtPage />
35+
<div v-else grid="~ cols-[max-content_1fr]" h-screen w-screen max-w-screen max-h-screen of-hidden>
36+
<PanelSideNav />
37+
<div of-auto h-screen max-h-screen relative>
38+
<NuxtPage />
39+
</div>
2040
</div>
2141
</template>

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

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<script setup lang="ts">
2+
import { useRpc } from '#imports'
3+
import { useAsyncState } from '@vueuse/core'
4+
import { computed } from 'vue'
5+
6+
const rpc = useRpc()
7+
const { state, isLoading } = useAsyncState(
8+
async () => {
9+
const [metadata, envInfo] = await Promise.all([
10+
rpc.value.call(
11+
'vite:meta-info',
12+
),
13+
rpc.value.call(
14+
'vite:env-info',
15+
),
16+
])
17+
18+
return {
19+
metadata,
20+
envInfo,
21+
}
22+
},
23+
null,
24+
)
25+
26+
const projectMetadata = computed(() => state.value?.metadata)
27+
const environmentMetadata = computed(() => state.value?.envInfo)
28+
29+
const metadata = computed(() => [
30+
{
31+
id: 'project',
32+
icon: 'i-material-icon-theme:vite',
33+
rows: [
34+
{
35+
id: 'root',
36+
icon: 'i-ph-folder-duotone',
37+
label: 'Root',
38+
value: projectMetadata.value?.root,
39+
},
40+
{
41+
id: 'base',
42+
icon: 'i-ph-folder-duotone',
43+
label: 'Base',
44+
value: projectMetadata.value?.base,
45+
},
46+
{
47+
id: 'plugins',
48+
icon: 'i-ph-plugs-duotone',
49+
label: 'Plugins',
50+
value: projectMetadata.value?.plugins.length ?? 0,
51+
},
52+
],
53+
},
54+
{
55+
id: 'system',
56+
icon: 'i-ph:desktop',
57+
rows: [
58+
{
59+
id: 'os',
60+
icon: 'i-ph-folder-duotone',
61+
label: 'OS',
62+
value: environmentMetadata.value?.os,
63+
},
64+
{
65+
id: 'cpu',
66+
icon: 'i-ph:cpu',
67+
label: 'CPU',
68+
value: environmentMetadata.value?.cpu,
69+
},
70+
{
71+
id: 'memory',
72+
icon: 'i-ph:memory',
73+
label: 'Memory',
74+
value: environmentMetadata.value?.memory,
75+
},
76+
],
77+
},
78+
{
79+
id: 'runtime',
80+
icon: 'i-system-uicons:version',
81+
rows: [
82+
{
83+
id: 'node',
84+
icon: 'i-ri:nodejs-fill',
85+
label: 'Node',
86+
value: environmentMetadata.value?.node,
87+
},
88+
{
89+
id: 'bun',
90+
icon: 'i-catppuccin:bun',
91+
label: 'Bun',
92+
value: environmentMetadata.value?.bun,
93+
},
94+
{
95+
id: 'npm',
96+
icon: 'i-ri:npmjs-fill',
97+
label: 'NPM',
98+
value: environmentMetadata.value?.npm,
99+
},
100+
{
101+
id: 'pnpm',
102+
icon: 'i-catppuccin:pnpm',
103+
label: 'PNPM',
104+
value: environmentMetadata.value?.pnpm,
105+
},
106+
{
107+
id: 'yarn',
108+
icon: 'i-catppuccin:yarn',
109+
label: 'Yarn',
110+
value: environmentMetadata.value?.yarn,
111+
},
112+
],
113+
},
114+
])
115+
</script>
116+
117+
<template>
118+
<VisualLoading
119+
v-if="isLoading"
120+
text="Connecting..."
121+
/>
122+
<div v-else p4 flex="~ col gap-4" items-center justify-center relative>
123+
<VisualLogoBanner />
124+
125+
<div border="~ base rounded" p2 flex="~ col gap-4 justify-center">
126+
<div
127+
v-for="section in metadata"
128+
:key="section.id"
129+
p4
130+
flex="~ gap-14 items-center"
131+
>
132+
<div class="text-3xl flex ml3" :class="section.icon" />
133+
<div>
134+
<div
135+
v-for="row in section.rows"
136+
:key="row.id"
137+
grid="~ cols-[max-content_80px_2fr] gap-2 items-center"
138+
>
139+
<div :class="row.icon" />
140+
<div>
141+
{{ row.label }}
142+
</div>
143+
<div font-mono>
144+
{{ row.value }}
145+
</div>
146+
</div>
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
</template>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
<script lang="ts" setup>
2+
import { navigateTo } from '#app/composables/router'
3+
4+
navigateTo('/home')
5+
</script>
6+
17
<template>
2-
<div p10 flex="~ col" items-center justify-center>
3-
<h1 text-2xl font-bold>
4-
Vite DevTools
5-
</h1>
6-
</div>
8+
<div p10 flex="~ col" items-center justify-center />
79
</template>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineNuxtPlugin } from '#app/nuxt'
2+
import FloatingVue from 'floating-vue'
3+
4+
export default defineNuxtPlugin((nuxtApp) => {
5+
nuxtApp.vueApp.use(FloatingVue, {
6+
overflowPadding: 20,
7+
})
8+
})

‎packages/vite/src/node/rpc/functions/hi.ts‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { defineRpcFunction } from '@vitejs/devtools-kit'
2+
3+
export const viteEnvInfo = defineRpcFunction({
4+
name: 'vite:env-info',
5+
type: 'query',
6+
setup: () => {
7+
return {
8+
handler: async () => {
9+
const { default: { helpers } } = await import('envinfo')
10+
11+
const [cpu, os, memory, node, bun, npm, pnpm, yarn] = await Promise.all([
12+
helpers.getCPUInfo().then(([,res]) => res),
13+
helpers.getOSInfo().then(([,res]) => res),
14+
helpers.getMemoryInfo().then(([,res]) => res),
15+
helpers.getNodeInfo().then(([,res]) => res),
16+
// @ts-expect-error missing types
17+
helpers.getbunInfo().then(([,res]) => res),
18+
helpers.getnpmInfo().then(([,res]) => res),
19+
helpers.getpnpmInfo().then(([,res]) => res),
20+
helpers.getYarnInfo().then(([,res]) => res),
21+
])
22+
23+
return {
24+
cpu,
25+
os,
26+
memory,
27+
node,
28+
bun,
29+
npm,
30+
pnpm,
31+
yarn,
32+
}
33+
},
34+
}
35+
},
36+
})

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { defineRpcFunction } from '@vitejs/devtools-kit'
2+
3+
export const viteMetaInfo = defineRpcFunction({
4+
name: 'vite:meta-info',
5+
type: 'query',
6+
setup: (context) => {
7+
return {
8+
handler: async () => {
9+
const { root, base, plugins } = context.viteConfig
10+
11+
return {
12+
root,
13+
base,
14+
plugins: plugins.map(p => p.name),
15+
}
16+
},
17+
}
18+
},
19+
})

0 commit comments

Comments
 (0)