refactor: ui components

Author: antfu

examples/plugin-a11y-checker/src/node/plugin.ts

@@ -3,10 +3,13 @@ import fs from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import { normalizePath } from 'vite'
 
-function resolveClientScript(): string {
-  const distFromBundle = fileURLToPath(new URL('./client/run-axe.js', import.meta.url))
-  const distFromSource = fileURLToPath(new URL('../../dist/client/run-axe.js', import.meta.url))
-  return fs.existsSync(distFromBundle) ? distFromBundle : distFromSource
+function resolveClientScript(): string | undefined {
+  const paths = [
+    fileURLToPath(new URL('./client/run-axe.js', import.meta.url)),
+    fileURLToPath(new URL('../../dist/client/run-axe.js', import.meta.url)),
+    fileURLToPath(new URL('../client/run-axe.ts', import.meta.url)),
+  ]
+  return paths.find(path => fs.existsSync(path))
 }
 
 export function A11yCheckerPlugin(): PluginWithDevTools {
@@ -15,6 +18,9 @@ export function A11yCheckerPlugin(): PluginWithDevTools {
     devtools: {
       setup(context) {
         const clientScript = resolveClientScript()
+        if (!clientScript) {
+          throw new Error('[plugin-a11y-checker] Client script not found, did you build the plugin?')
+        }
 
         context.docks.register({
           type: 'action',

package.json

@@ -49,6 +49,7 @@
     "@unocss/eslint-config": "catalog:devtools",
     "@vueuse/core": "catalog:frontend",
     "ansis": "catalog:deps",
+    "axe-core": "catalog:devtools",
     "bumpp": "catalog:devtools",
     "chokidar": "catalog:devtools",
     "esbuild": "catalog:build",

packages/core/src/client/webcomponents/components/FilterToggles.vue

@@ -6,7 +6,7 @@ defineProps<{
   /** Map item key → { icon, color, label } for styled items */
   styles?: Record<string, { icon?: string, color?: string, label?: string }>
   /** Compute inline color via hash for items without predefined styles */
-  hashColor?: (item: string) => string
+  hashColor?: (item: string, opacity: number) => string
 }>()
 
 defineEmits<{
@@ -16,7 +16,7 @@ defineEmits<{
 
 <template>
   <span class="text-xs op40">{{ label }}</span>
-  <div class="flex flex-wrap items-center gap-0">
+  <div class="flex flex-wrap items-center gap-0.5">
     <button
       v-for="item of items"
       :key="item"
@@ -26,7 +26,10 @@ defineEmits<{
           ? (styles?.[item]?.color || '')
           : 'op30',
       ]"
-      :style="!styles?.[item]?.color && hashColor ? { color: active.size === 0 || active.has(item) ? hashColor(item) : undefined } : undefined"
+      :style="!styles?.[item]?.color && hashColor ? {
+        color: active.size === 0 || active.has(item) ? hashColor(item, 1) : undefined,
+        backgroundColor: active.size === 0 || active.has(item) ? hashColor(item, 0.1) : undefined,
+      } : undefined"
       @click="$emit('toggle', item)"
     >
       <div v-if="styles?.[item]?.icon" :class="styles[item]!.icon" class="w-3.5 h-3.5" />

packages/core/src/client/webcomponents/components/HashBadge.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getHashColorFromString } from './LogItemConstants'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const style = computed(() => ({
+  color: getHashColorFromString(props.label),
+  backgroundColor: getHashColorFromString(props.label, 0.1),
+}))
+</script>
+
+<template>
+  <span class="text-xs px-1 rounded" :style="style">{{ label }}</span>
+</template>

packages/core/src/client/webcomponents/components/LogItem.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { DevToolsLogEntry } from '@vitejs/devtools-kit'
 import { useTimeAgo } from '@vueuse/core'
-import { getHashColorFromString, levels } from './LogItemConstants'
+import HashBadge from './HashBadge.vue'
+import { levels } from './LogItemConstants'
 
 const props = defineProps<{
   entry: DevToolsLogEntry
@@ -33,17 +34,8 @@ const timeAgo = useTimeAgo(() => props.entry.timestamp)
         {{ entry.description }}
       </div>
       <div v-if="!compact" class="flex items-center gap-2 mt-0.5">
-        <span
-          v-if="entry.category"
-          class="text-xs px-1 rounded"
-          :style="{ color: getHashColorFromString(entry.category), backgroundColor: getHashColorFromString(entry.category, 0.1) }"
-        >{{ entry.category }}</span>
-        <span
-          v-for="label of entry.labels"
-          :key="label"
-          class="text-xs px-1 rounded"
-          :style="{ color: getHashColorFromString(label), backgroundColor: getHashColorFromString(label, 0.1) }"
-        >{{ label }}</span>
+        <HashBadge v-if="entry.category" :label="entry.category" />
+        <HashBadge v-for="label of entry.labels" :key="label" :label="label" />
       </div>
     </div>
     <span v-if="!compact" class="text-xs op40 flex-none" :title="new Date(entry.timestamp).toLocaleString()">{{ timeAgo }}</span>

packages/core/src/client/webcomponents/components/ViewBuiltinLogs.vue

@@ -6,6 +6,7 @@ import { useTimeAgo } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
 import { markLogsAsRead, useLogs } from '../state/logs'
 import FilterToggles from './FilterToggles.vue'
+import HashBadge from './HashBadge.vue'
 import LogItem from './LogItem.vue'
 import { getHashColorFromString, levels, sources } from './LogItemConstants'
 
@@ -277,7 +278,7 @@ onMounted(() => {
             label="Category"
             :items="allCategories"
             :active="(activeCategories as Set<string>)"
-            :hash-color="(item: string) => getHashColorFromString(item)"
+            :hash-color="getHashColorFromString"
             @toggle="toggleCategory"
           />
         </template>
@@ -288,7 +289,7 @@ onMounted(() => {
             label="Labels"
             :items="allLabels"
             :active="(activeLabelFilters as Set<string>)"
-            :hash-color="(item: string) => getHashColorFromString(item)"
+            :hash-color="getHashColorFromString"
             @toggle="toggleLabelFilter"
           />
         </template>
@@ -374,25 +375,8 @@ onMounted(() => {
 
         <!-- Category + Labels -->
         <div v-if="selectedEntry.category || (selectedEntry.labels && selectedEntry.labels.length)" class="flex flex-wrap gap-1 mb-3">
-          <span
-            v-if="selectedEntry.category"
-            class="text-xs px-1.5 py-0.5 rounded border-l-2"
-            :style="{
-              color: getHashColorFromString(selectedEntry.category),
-              borderColor: getHashColorFromString(selectedEntry.category, 0.4),
-              backgroundColor: getHashColorFromString(selectedEntry.category, 0.1),
-            }"
-          >{{ selectedEntry.category }}</span>
-          <span
-            v-for="label of selectedEntry.labels"
-            :key="label"
-            class="text-xs px-1.5 py-0.5 rounded border-l-2"
-            :style="{
-              color: getHashColorFromString(label),
-              borderColor: getHashColorFromString(label, 0.4),
-              backgroundColor: getHashColorFromString(label, 0.1),
-            }"
-          >{{ label }}</span>
+          <HashBadge v-if="selectedEntry.category" :label="selectedEntry.category" />
+          <HashBadge v-for="label of selectedEntry.labels" :key="label" :label="label" />
         </div>
 
         <!-- File position -->