8000 feat: basic ui package setup (#166) · vitejs/devtools@0d119d9 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0d119d9

Browse files
webfansplzwebfansplz
authored
feat: basic ui package setup (#166)
1 parent e37ea0f commit 0d119d9

26 files changed

+214
-108
lines changed

‎alias.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const alias = {
2020
'@vitejs/devtools/client/inject': r('core/src/client/inject/index.ts'),
2121
'@vitejs/devtools/client/webcomponents': r('core/src/client/webcomponents/index.ts'),
2222
'@vitejs/devtools': r('core/src/index.ts'),
23+
'@vitejs/devtools-ui/unocss': r('ui/src/unocss/index.ts'),
24+
'@vitejs/devtools-ui/components': r('ui/src/components'),
2325
}
2426

2527
// update tsconfig.base.json

‎packages/ui/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@vitejs/devtools-ui",
3+
"type": "module",
4+
"version": "0.0.0-alpha.26",
5+
"private": true,
6+
"description": "DevTools UI for Vite (work in progress)",
7+
"author": "VoidZero Inc.",
8+
"license": "MIT",
9+
"homepage": "https://github.com/vitejs/devtools#readme",
10+
"repository": {
11+
"directory": "packages/ui",
12+
"type": "git",
13+
"url": "git+https://github.com/vitejs/devtools.git"
14+
},
15+
"bugs": "https://github.com/vitejs/devtools/issues",
16+
"keywords": [
17+
"vite",
18+
"devtools",
19+
"devtools ui"
20+
],
21+
"sideEffects": false,
22+
"exports": {
23+
".": {
24+
"types": "./src/index.ts",
25+
"import": "./src/index.ts"
26+
},
27+
"./unocss": {
28+
"types": "./src/unocss/index.ts",
29+
"import": "./src/unocss/index.ts"
30+
},
31+
"./components/*": {
32+
"types": "./src/components/*.vue",
33+
"import": "./src/components/*.vue"
34+
}
35+
},
36+
"main": "./src/index.ts",
37+
"module": "./src/index.ts"
38+
}

packages/vite/src/app/components/visual/Loading.vue renamed to packages/ui/src/components/VisualLoading.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script setup lang="ts">
2+
import VisualLogoBanner from './VisualLogoBanner.vue'
3+
24
const props = defineProps<{
35
text?: string
46
}>()

packages/vite/src/app/components/visual/Logo.vue renamed to packages/ui/src/components/VisualLogo.vue

File renamed without changes.

packages/vite/src/app/componen 52F4 ts/visual/LogoBanner.vue renamed to packages/ui/src/components/VisualLogoBanner.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<script lang="ts" setup>
2+
import VisualLogo from './VisualLogo.vue'
3+
</script>
4+
15
<template>
26
<div class="flex gap-2 group" p8 relative>
37
<div op10 group-hover="op100" transition duration-800 class="absolute -bottom-[10px] -left-[20px] w-[80px] h-[80px] bg-linear-to-b from-[#61d9ff] to-transparent blur-[30px]" />

‎packages/ui/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './unocss'

‎packages/ui/src/unocss/index.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import type { WebFontsOptions } from '@unocss/preset-web-fonts'
2+
import type { Theme } from '@unocss/preset-wind4'
3+
import {
4+
definePreset,
5+
mergeDeep,
6+
presetAttributify,
7+
presetIcons,
8+
presetTypography,
9+
presetWebFonts,
10+
presetWind4,
11+
transformerDirectives,
12+
transformerVariantGroup,
13+
} from 'unocss'
14+
import { shortcuts } from './shortcuts'
15+
import { theme } from './theme'
16+
17+
export interface PresetDevToolsUIOptions {
18+
webFonts?: WebFontsOptions
19+
}
20+
21+
export const presetDevToolsUI = definePreset<PresetDevToolsUIOptions, Theme>((options) => {
22+
return {
23+
name: '@vitejs/devtools-ui/preset',
24+
shortcuts,
25+
extendTheme(defaultTheme) {
26+
return mergeDeep(defaultTheme, theme)
27+
},
28+
presets: [
29+
presetWind4(),
30+
presetAttributify(),
31+
presetIcons({
32+
scale: 1.2,
33+
}),
34+
presetTypography(),
35+
presetWebFonts(mergeDeep(
36+
{
37+
fonts: {
38+
sans: 'DM Sans:200,400,700',
39+
mono: 'DM Mono',
40+
},
41+
},
42+
options?.webFonts ?? {},
43+
)),
44+
],
45+
transformers: [
46+
transformerDirectives(),
47+
transformerVariantGroup(),
48+
],
49+
}
50+
})

‎packages/ui/src/unocss/shortcuts.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import type { UserShortcuts } from '@unocss/core'
2+
import type { Theme } from '@unocss/preset-wind4'
3+
4+
export const shortcuts: UserShortcuts<Theme> = [
5+
{
6+
'color-base': 'color-neutral-800 dark:color-neutral-300',
7+
'bg-base': 'bg-white dark:bg-#111',
8+
'bg-secondary': 'bg-#eee dark:bg-#222',
9+
'border-base': 'border-#8884',
10+
11+
'border-flow': 'border-#8885',
12+
'border-flow-line': 'border-#ccc dark:border-#222',
13+
'border-flow-active': 'border-primary-700/50 dark:border-primary-300/50',
14+
'border-flow-line-active': 'border-primary-700/30 dark:border-primary-300/30',
15+
16+
'fg-flow-line': 'color-#ccc dark:color-#222',
17+
'fg-flow-line-active': 'color-primary-700/30 dark:color-primary-300/30',
18+
19+
'bg-tooltip': 'bg-white:75 dark:bg-#111:75 backdrop-blur-8',
20+
'bg-code': 'bg-gray-500:5',
21+
22+
'bg-gradient-more': 'bg-gradient-to-t from-white via-white:80 to-white:0 dark:from-#111 dark:via-#111:80 dark:to-#111:0',
23+
24+
'color-active': 'color-primary-600 dark:color-primary-300',
25+
'border-active': 'border-primary-600/25 dark:border-primary-400/25',
26+
'bg-active': 'bg-#8881',
27+
28+
'btn-action': 'border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-active disabled:pointer-events-none disabled:op30!',
29+
'btn-action-sm': 'btn-action text-sm',
30+
'btn-action-active': 'color-active border-active! bg-active op100!',
31+
32+
'icon-catppuccin': 'light:filter-invert-100 light:filter-hue-rotate-180 light:filter-brightness-80',
33+
34+
'z-flowmap-line': 'z--1',
35+
'z-graph-bg': 'z-5',
36+
'z-graph-link': 'z-10',
37+
'z-graph-node': 'z-11',
38+
'z-graph-link-active': 'z-12',
39+
'z-graph-node-active': 'z-13',
40+
41+
'z-panel-no-mobile': 'z-55',
42+
'z-panel-nav': 'z-60',
43+
'z-panel-content': 'z-65',
44+
'z-panel-goto': 'z-70',
45+
'z-panel-terminal': 'z-80',
46+
47+
'op-fade': 'op65 dark:op55',
48+
'op-mute': 'op30 dark:op25',
49+
'color-deprecated': 'text-op85 text-[#b71c1c] dark:text-[#f87171]',
50+
51+
'color-scale-neutral': 'text-gray-700:75 dark:text-gray-300:75!',
52+
'color-scale-low': 'text-lime-700:75 dark:text-lime-300:75! dark:saturate-50',
53+
'color-scale-medium': 'text-amber-700:85 dark:text-amber-300:85! dark:saturate-80',
54+
'color-scale-high': 'text-orange-700:95 dark:text-orange-300:95!',
55+
'color-scale-critical': 'text-red-700:95 dark:text-red-300:95!',
56+
57+
'page-padding': 'pt-24 pl-112 pr-8 pb-8',
58+
'page-padding-collapsed': 'pt-24 pl-14 pr-8 pb-8',
59+
},
60+
[/^badge-color-(\w+)$/, ([, color]) => `bg-${color}-400:20 dark:bg-${color}-400:10 text-${color}-700 dark:text-${color}-300 border-${color}-600:10 dark:border-${color}-300:10`],
61+
[/^bg-glass(:\d+)?$/, ([, opacity = ':75']) => `bg-white${opacity} dark:bg-#111${opacity} backdrop-blur-5`],
62+
]

‎packages/ui/src/unocss/theme.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import type { Theme } from '@unocss/preset-wind4'
2+
3+
export const theme: Theme = {
4+
colors: {
5+
primary: {
6+
50: '#fcf4ff',
7+
100: '#f7e5ff',
8+
200: '#f0d0ff',
9+
300: '#e5acff',
10+
400: '#d577ff',
11+
DEFAULT: '#d577ff',
12+
500: '#c543ff',
13+
600: '#bd34fe',
14+
700: '#9f0fe1',
15+
800: '#8512b7',
16+
900: '#6d1093',
17+
950: '#4d006e',
18+
},
19+
},
20+
}

‎packages/vite/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@rolldown/debug": "catalog:deps",
4040
"@vitejs/devtools-kit": "workspace:*",
4141
"@vitejs/devtools-rpc": "workspace:*",
42+
"@vitejs/devtools-ui": "workspace:*",
4243
"ansis": "catalog:deps",
4344
"birpc": "catalog:deps",
4445
"cac": "catalog:deps",

0 commit comments

Comments
 (0)
0