feat: optimize deps and remove unplugin-icons

package.json

@@ -53,12 +53,9 @@
     "@antfu/utils": "^0.7.2",
     "@rollup/pluginutils": "^5.0.2",
     "debug": "^4.3.4",
-    "echarts": "^5.4.2",
     "fs-extra": "^11.1.1",
-    "kolorist": "^1.7.0",
-    "sirv": "^2.0.2",
-    "ufo": "^1.1.1",
-    "vue-echarts": "^6.5.4"
+    "picocolors": "^1.0.0",
+    "sirv": "^2.0.2"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.4",
@@ -79,6 +76,7 @@
     "comlink": "^4.4.1",
     "cross-env": "^7.0.3",
     "diff-match-patch": "^1.0.5",
+    "echarts": "^5.4.2",
     "eslint": "^8.37.0",
     "esno": "^0.16.3",
     "fuse.js": "^6.6.2",
@@ -91,7 +89,6 @@
     "unbuild": "^1.2.0",
     "unocss": "^0.50.6",
     "unplugin-auto-import": "^0.15.2",
-    "unplugin-icons": "^0.16.1",
     "unplugin-vue-components": "^0.24.1",
     "vis-data": "7.1.6",
     "vis-network": "9.1.6",
@@ -100,6 +97,7 @@
     "vite-hot-client": "^0.2.1",
     "vite-plugin-pages": "^0.29.0",
     "vue": "^3.2.47",
+    "vue-echarts": "^6.5.4",
     "vue-router": "^4.1.6"
   }
 }

src/client/components.d.ts

@@ -10,23 +10,6 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Badge: typeof import('./components/Badge.vue')['default']
-    'Carbon:cloudServices': typeof import('~icons/carbon/cloud-services')['default']
-    'Carbon:compare': typeof import('~icons/carbon/compare')['default']
-    'Carbon:ibmWatsonDiscovery': typeof import('~icons/carbon/ibm-watson-discovery')['default']
-    'Carbon:list': typeof import('~icons/carbon/list')['default']
-    'Carbon:listBoxes': typeof import('~icons/carbon/list-boxes')['default']
-    'Carbon:logoGithub': typeof import('~icons/carbon/logo-github')['default']
-    'Carbon:network4': typeof import('~icons/carbon/network4')['default']
-    'Carbon:renew': typeof import('~icons/carbon/renew')['default']
-    'Carbon:textWrap': typeof import('~icons/carbon/text-wrap')['default']
-    'Carbon:timer': typeof import('~icons/carbon/timer')['default']
-    CarbonArrowLeft: typeof import('~icons/carbon/arrow-left')['default']
-    CarbonArrowUpLeft: typeof import('~icons/carbon/arrow-up-left')['default']
-    CarbonChevronLeft: typeof import('~icons/carbon/chevron-left')['default']
-    CarbonMoon: typeof import('~icons/carbon/moon')['default']
-    CarbonSidePanelClose: typeof import('~icons/carbon/side-panel-close')['default']
-    CarbonSidePanelOpen: typeof import('~icons/carbon/side-panel-open')['default']
-    CarbonSun: typeof import('~icons/carbon/sun')['default']
     Container: typeof import('./components/Container.vue')['default']
     DiffEditor: typeof import('./components/DiffEditor.vue')['default']
     Graph: typeof import('./components/Graph.vue')['default']

src/client/components/NavBar.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { isDark, isStaticMode, refetch, toggleDark } from '../logic'
+import { isStaticMode, refetch, toggleDark } from '../logic'
 </script>
 
 <template>
   <nav class="font-light pr-6 pl-4 border-b border-main flex gap-4 h-54px children:my-auto flex-none">
     <slot />
     <slot name="actions">
       <button v-if="!isStaticMode" class="icon-btn text-lg" title="Refetch" @click="refetch()">
-        <carbon:renew />
+        <div i-carbon-renew />
       </button>
       <button class="icon-btn text-lg" title="Toggle Dark Mode" @click="toggleDark()">
-        <carbon-moon v-if="isDark" />
-        <carbon-sun v-else />
+        <div i-carbon-sun dark:i-carbon-moon />
       </button>
     </slot>
   </nav>

src/client/components/PluginChart.vue

@@ -141,7 +141,7 @@ const chartStyle = computed(() => {
   <div class="bg-white dark:bg-[#111] border-none h-full w-[calc(100vw-100px)] overflow-auto shadow-lg transition-transform transform duration-300 translate-x-0">
     <NavBar>
       <a class="icon-btn !outline-none my-auto" @click="props.exit()">
-        <carbon-chevron-left />
+        <div i-carbon-chevron-left />
       </a>
       <div class="text-sm font-mono my-auto">
         Metrics for {{ props.plugin }}

src/client/pages/index.vue

@@ -10,24 +10,23 @@ onMounted(() => {
 
 <template>
   <NavBar>
-    <carbon:ibm-watson-discovery title="Vite Inspect" text-xl />
-
+    <div i-carbon-ibm-watson-discovery title="Vite Inspect" text-xl />
     <SearchBox />
     <div class="flex-auto" />
-    <router-link class="icon-btn text-lg" to="/plugins-metric">
-      <carbon:timer />
-    </router-link>
+    <RouterLink class="icon-btn text-lg" to="/plugins-metric" title="Metrics">
+      <div i-carbon-meter />
+    </RouterLink>
     <button class="icon-btn text-lg" title="View Mode" @click="toggleMode()">
-      <carbon:list-boxes v-if="listMode === 'detailed'" />
-      <carbon:list v-else-if="listMode === 'list'" />
-      <carbon:network-4 v-else />
+      <div v-if="listMode === 'detailed'" i-carbon-list-boxes />
+      <div v-else-if="listMode === 'list'" i-carbon-list />
+      <div v-else i-carbon-network-4 />
     </button>
     <a
       class="icon-btn text-lg"
       href="https://github.com/antfu/vite-plugin-inspect"
       target="_blank"
     >
-      <carbon:logo-github />
+      <div i-carbon-logo-github />
     </a>
   </NavBar>
   <Container class="overflow-auto">
@@ -40,17 +39,17 @@ onMounted(() => {
     class="fixed left-0 top-0 right-0 bottom-0 transition-all flex overflow-hidden bg-black/50"
     :class="isRoot ? 'pointer-events-none opacity-0' : 'opacity-100'"
   >
-    <router-link class="min-w-70px h-full flex-auto" to="/" />
+    <RouterLink class="min-w-70px h-full flex-auto" to="/" />
     <div
       class="bg-white dark:bg-[#111] border-main border-l h-full w-[calc(100vw-100px)] overflow-hidden shadow-lg transition-transform transform duration-300"
       :class="isRoot ? 'translate-x-1/2' : 'translate-x-0'"
     >
       <Suspense>
-        <router-view v-slot="{ Component }">
-          <keep-alive>
+        <RouterView v-slot="{ Component }">
+          <KeepAlive>
             <component :is="Component" />
-          </keep-alive>
-        </router-view>
+          </KeepAlive>
+        </RouterView>
         <template #fallback>
           Loading...
         </template>

src/client/pages/index/module.vue

@@ -40,9 +40,9 @@ getHot().then((hot) => {
 
 <template>
   <NavBar>
-    <router-link class="icon-btn !outline-none my-auto" to="/">
-      <carbon-arrow-left />
-    </router-link>
+    <RouterLink class="icon-btn !outline-none my-auto" to="/">
+      <div i-carbon-arrow-left />
+    </RouterLink>
     <ModuleId v-if="id" :id="id" />
     <Badge
       v-if="inspectSSR"
@@ -53,22 +53,22 @@ getHot().then((hot) => {
     <div class="flex-auto" />
 
     <button class="icon-btn text-lg" title="Inspect SSR" @click="inspectSSR = !inspectSSR">
-      <carbon:cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
+      <div i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button class="icon-btn text-lg" title="Line Wrapping" @click="lineWrapping = !lineWrapping">
-      <carbon:text-wrap :class="lineWrapping ? 'opacity-100' : 'opacity-25'" />
+      <div i-carbon-text-wrap :class="lineWrapping ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button class="icon-btn text-lg" title="Toggle one column" @click="showOneColumn = !showOneColumn">
-      <carbon-side-panel-open v-if="showOneColumn" />
-      <carbon-side-panel-close v-else />
+      <div v-if="showOneColumn" i-carbon-side-panel-open />
+      <div v-else i-carbon-side-panel-close />
     </button>
     <button class="icon-btn text-lg" title="Toggle Diff" @click="enableDiff = !enableDiff">
-      <carbon:compare :class="enableDiff ? 'opacity-100' : 'opacity-25'" />
+      <div i-carbon-compare :class="enableDiff ? 'opacity-100' : 'opacity-25'" />
     </button>
   </NavBar>
   <Container
     v-if="data && data.transforms"
-    class="flex overflow-hidden"
+    flex overflow-hidden
   >
     <Splitpanes class="h-full of-hidden" @resize="panelSize = $event[0].size">
       <Pane :size="panelSize" min-size="10" class="flex flex-col border-r border-main overflow-y-auto">

src/client/pages/index/plugins-metric.vue

@@ -71,9 +71,9 @@ getHot().then((hot) => {
 
 <template>
   <NavBar>
-    <router-link class="icon-btn !outline-none my-auto" to="/">
-      <carbon-arrow-left />
-    </router-link>
+    <RouterLink class="icon-btn !outline-none my-auto" to="/">
+      <div i-carbon-arrow-left />
+    </RouterLink>
     <div class="text-sm font-mono my-auto">
       Plugins Metrics
     </div>

src/client/styles/main.css

@@ -10,6 +10,7 @@ body,
 
 html.dark {
   background: #121212;
+  color-scheme: dark;
 }
 
 .btn {

src/client/vite.config.ts

@@ -2,8 +2,6 @@ import { join, resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import Vue from '@vitejs/plugin-vue'
 import Pages from 'vite-plugin-pages'
-import Icons from 'unplugin-icons/vite'
-import IconsResolver from 'unplugin-icons/resolver'
 import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import Unocss from 'unocss/vite'
@@ -34,17 +32,9 @@ export default defineConfig({
       pagesDir: 'pages',
     }),
     Components({
-      dirs: [
-        'components',
-      ],
+      dirs: ['components'],
       dts: join(__dirname, 'components.d.ts'),
-      resolvers: [
-        IconsResolver({
-          componentPrefix: '',
-        }),
-      ],
     }),
-    Icons(),
     Unocss(),
     Inspect(),
     AutoImport({