Skip to content

Commit aee6d0f

Browse files
antfuantfu
committed
fix: rename log field name from source to from 
1 parent d1e4885 commit aee6d0f

File tree

6 files changed

+35
-38
lines changed

6 files changed

+35
-38
lines changed

‎packages/core/src/client/webcomponents/components/LogItemConstants.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import type { DevToolsLogLevel } from '@vitejs/devtools-kit'
1+
import type { DevToolsLogEntryFrom, DevToolsLogLevel } from '@vitejs/devtools-kit'
22

33
// @unocss-include
44

5-
export type LogSource = 'server' | 'browser'
6-
75
export interface LevelStyle {
86
icon: string
97
color: string
108
bg: string
119
label: string
1210
}
1311

14-
export interface SourceStyle {
12+
export interface FromStyle {
1513
icon: string
1614
color: string
1715
label: string
@@ -25,7 +23,7 @@ export const levels: Record<DevToolsLogLevel, LevelStyle> = {
2523
debug: { icon: 'i-ph:bug-duotone', color: 'text-gray', bg: 'bg-gray', label: 'Debug' },
2624
}
2725

28-
export const sources: Record<LogSource, SourceStyle> = {
26+
export const formEntries: Record<DevToolsLogEntryFrom, FromStyle> = {
2927
server: { icon: 'i-ph:hexagon-duotone', color: 'text-green-800 dark:text-green-200', label: 'Server' },
3028
browser: { icon: 'i-ph:globe-simple-duotone', color: 'text-amber-800 dark:text-amber-200', label: 'Browser' },
3129
}

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

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
<script setup lang="ts">
2-
import type { DevToolsLogEntry, DevToolsLogLevel } from '@vitejs/devtools-kit'
2+
import type { DevToolsLogEntry, DevToolsLogEntryFrom, DevToolsLogLevel } from '@vitejs/devtools-kit'
33
import type { DocksContext } from '@vitejs/devtools-kit/client'
4-
import type { LogSource } from './LogItemConstants'
54
import { useTimeAgo } from '@vueuse/core'
65
import { computed, onMounted, ref } from 'vue'
76
import { markLogsAsRead, useLogs } from '../state/logs'
87
import FilterToggles from './FilterToggles.vue'
98
import HashBadge from './HashBadge.vue'
109
import LogItem from './LogItem.vue'
11-
import { getHashColorFromString, levels, sources } from './LogItemConstants'
10+
import { formEntries, getHashColorFromString, levels } from './LogItemConstants'
1211
1312
const props = defineProps<{
1413
context: DocksContext
@@ -23,7 +22,7 @@ type SortMode = 'newest' | 'oldest' | 'level'
2322
const logsState = useLogs(props.context)
2423
2524
const allLevels: DevToolsLogLevel[] = Object.keys(levels) as DevToolsLogLevel[]
26-
const allSources: LogSource[] = Object.keys(sources) as LogSource[]
25+
const allFroms: DevToolsLogEntryFrom[] = Object.keys(formEntries) as DevToolsLogEntryFrom[]
2726
2827
const sortLabels: Record<SortMode, string> = {
2928
newest: 'Newest first',
@@ -40,7 +39,7 @@ const search = ref('')
4039
const selectedId = ref<string | null>(null)
4140
const activeFilters = ref<Set<DevToolsLogLevel>>(new Set())
4241
const activeLabelFilters = ref<Set<string>>(new Set())
43-
const activeSources = ref<Set<LogSource>>(new Set())
42+
const activeFromFilters = ref<Set<DevToolsLogEntryFrom>>(new Set())
4443
const activeCategories = ref<Set<string>>(new Set())
4544
const sortBy = ref<SortMode>('newest')
4645
@@ -75,12 +74,12 @@ function toggleLabelFilter(label: string) {
7574
filters.add(label)
7675
}
7776
78-
function toggleSource(source: string) {
79-
const s = activeSources.value
80-
if (s.has(source as LogSource))
81-
s.delete(source as LogSource)
77+
function toggleFrom(from: DevToolsLogEntryFrom) {
78+
const s = activeFromFilters.value
79+
if (s.has(from))
80+
s.delete(from)
8281
else
83-
s.add(source as LogSource)
82+
s.add(from)
8483
}
8584
8685
function toggleCategory(category: string) {
@@ -94,15 +93,15 @@ function toggleCategory(category: string) {
9493
const hasActiveFilter = computed(() => {
9594
return activeFilters.value.size > 0
9695
|| activeLabelFilters.value.size > 0
97-
|| activeSources.value.size > 0
96+
|| activeFromFilters.value.size > 0
9897
|| activeCategories.value.size > 0
9998
|| search.value.length > 0
10099
})
101100
102101
function resetFilters() {
103102
activeFilters.value.clear()
104103
activeLabelFilters.value.clear()
105-
activeSources.value.clear()
104+
activeFromFilters.value.clear()
106105
activeCategories.value.clear()
107106
search.value = ''
108107
}
@@ -133,16 +132,16 @@ const filteredEntries = computed(() => {
133132
entries = entries.filter(e => activeFilters.value.has(e.level))
134133
if (activeLabelFilters.value.size > 0)
135134
entries = entries.filter(e => e.labels?.some(l => activeLabelFilters.value.has(l)))
136-
if (activeSources.value.size > 0)
137-
entries = entries.filter(e => activeSources.value.has(e.source as LogSource))
135+
if (activeFromFilters.value.size > 0)
136+
entries = entries.filter(e => activeFromFilters.value.has(e.from as DevToolsLogEntryFrom))
138137
if (activeCategories.value.size > 0)
139138
entries = entries.filter(e => e.category && activeCategories.value.has(e.category))
140139
if (search.value) {
141140
const q = search.value.toLowerCase()
142141
entries = entries.filter(e =>
143142
e.message.toLowerCase().includes(q)
144143
|| e.description?.toLowerCase().includes(q)
145-
|| e.source?.toLowerCase().includes(q)
144+
|| e.from?.toLowerCase().includes(q)
146145
|| e.category?.toLowerCase().includes(q)
147146
|| e.labels?.some(l => l.toLowerCase().includes(q)),
148147
)
@@ -265,11 +264,11 @@ onMounted(() => {
265264
<div class="border-l border-base h-4 mx-0.5" />
266265

267266
<FilterToggles
268-
label="Source"
269-
:items="allSources"
270-
:active="(activeSources as Set<string>)"
271-
:styles="sources"
272-
@toggle="toggleSource"
267+
label="From"
268+
:items="allFroms"
269+
:active="(activeFromFilters as Set<DevToolsLogEntryFrom>)"
270+
:styles="formEntries"
271+
@toggle="(toggleFrom as (item: string) => void)"
273272
/>
274273

275274
<template v-if="allCategories.length > 0">
@@ -351,9 +350,9 @@ onMounted(() => {
351350
<div :class="levels[selectedEntry.level].icon" class="w-3.5 h-3.5" />
352351
<span class="capitalize">{{ selectedEntry.level }}</span>
353352
</span>
354-
<span v-if="sources[selectedEntry.source as LogSource]" class="flex items-center gap-1" :class="sources[selectedEntry.source as LogSource].color">
355-
<div :class="sources[selectedEntry.source as LogSource].icon" class="w-3.5 h-3.5" />
356-
{{ sources[selectedEntry.source as LogSource].label }}
353+
<span v-if="formEntries[selectedEntry.from as DevToolsLogEntryFrom]" class="flex items-center gap-1" :class="formEntries[selectedEntry.from as DevToolsLogEntryFrom].color">
354+
<div :class="formEntries[selectedEntry.from as DevToolsLogEntryFrom].icon" class="w-3.5 h-3.5" />
355+
{{ formEntries[selectedEntry.from as DevToolsLogEntryFrom].label }}
357356
</span>
358357
<span v-if="selectedEntry.status === 'loading'" class="flex items-center gap-1 text-amber">
359358
<div class="w-3 h-3 border-1.5 border-current border-t-transparent rounded-full animate-spin" />

‎packages/core/src/node/__tests__/host-logs.test.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ describe('devToolsLogsHost', () => {
1818
expect(handle.entry.message).toBe('test')
1919
expect(handle.entry.level).toBe('info')
2020
expect(handle.entry.timestamp).toBeTypeOf('number')
21-
expect(handle.entry.source).toBe('server')
21+
expect(handle.entry.from).toBe('server')
2222
expect(host.entries.size).toBe(1)
2323
})
2424

@@ -50,7 +50,7 @@ describe('devToolsLogsHost', () => {
5050
expect(handle.entry.level).toBe('warn')
5151
// Preserves original id, source, timestamp
5252
expect(handle.id).toBe('dup')
53-
expect(handle.entry.source).toBe('server')
53+
expect(handle.entry.from).toBe('server')
5454
})
5555

5656
it('should evict oldest entry when at capacity', async () => {
@@ -81,7 +81,7 @@ describe('devToolsLogsHost', () => {
8181
expect(updated!.level).toBe('error')
8282
// Preserved fields
8383
expect(updated!.id).toBe('u1')
84-
expect(updated!.source).toBe('server')
84+
expect(updated!.from).toBe('server')
8585
})
8686

8787
it('should return undefined for non-existent id', async () => {
@@ -108,7 +108,7 @@ describe('devToolsLogsHost', () => {
108108
const updated = await host.update('u3', { message: 'new' })
109109

110110
expect(updated!.id).toBe(original.id)
111-
expect(updated!.source).toBe(original.source)
111+
expect(updated!.from).toBe(original.from)
112112
expect(updated!.timestamp).toBe(original.timestamp)
113113
})
114114
})

‎packages/core/src/node/host-logs.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export class DevToolsLogsHost implements DevToolsLogsHostType {
3535
...input,
3636
id: input.id ?? nanoid(),
3737
timestamp: input.timestamp ?? Date.now(),
38-
source: (input as any).source ?? 'server',
38+
from: (input as any).from ?? 'server',
3939
}
4040

4141
// FIFO eviction when at capacity
@@ -66,7 +66,7 @@ export class DevToolsLogsHost implements DevToolsLogsHostType {
6666
...existing,
6767
...patch,
6868
id: existing.id,
69-
source: existing.source,
69+
from: existing.from,
7070
timestamp: existing.timestamp,
7171
}
7272

‎packages/core/src/node/rpc/internal/logs-add.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { DevToolsLogEntry, DevToolsLogEntryInput } from '@vitejs/devtools-kit'
2-
import type { LogSource } from '../../../client/webcomponents/components/LogItemConstants'
32
import { defineRpcFunction } from '@vitejs/devtools-kit'
43

54
export const logsAdd = defineRpcFunction({
@@ -9,7 +8,7 @@ export const logsAdd = defineRpcFunction({
98
return {
109
async handler(input: DevToolsLogEntryInput): Promise<DevToolsLogEntry> {
1110
// @ts-expect-error - source is not in the type
12-
const handle = await context.logs.add({ ...input, source: 'browser' as LogSource })
11+
const handle = await context.logs.add({ ...input, from: 'browser' as DevToolsLogEntryFrom })
1312
return handle.entry
1413
},
1514
}

‎packages/kit/src/types/logs.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { EventEmitter } from './events'
22

33
export type DevToolsLogLevel = 'info' | 'warn' | 'error' | 'success' | 'debug'
4+
export type DevToolsLogEntryFrom = 'server' | 'browser'
45

56
export interface DevToolsLogElementPosition {
67
/** CSS selector for the element */
@@ -56,7 +57,7 @@ export interface DevToolsLogEntry {
5657
/**
5758
* Origin of the log entry, automatically set by the context
5859
*/
59-
source: 'server' | 'browser'
60+
from: DevToolsLogEntryFrom
6061
/**
6162
* Grouping category (e.g., 'a11y', 'lint', 'runtime', 'test')
6263
*/
@@ -88,7 +89,7 @@ export interface DevToolsLogEntry {
8889
* Input type for creating a log entry.
8990
* `id`, `timestamp`, and `source` are auto-filled by the host.
9091
*/
91-
export type DevToolsLogEntryInput = Omit<DevToolsLogEntry, 'id' | 'timestamp' | 'source'> & {
92+
export type DevToolsLogEntryInput = Omit<DevToolsLogEntry, 'id' | 'timestamp' | 'from'> & {
9293
id?: string
9394
timestamp?: number
9495
}

0 commit comments

Comments
 (0)