devtools/packages/devtools-vite/src/app/components/display/HighlightedPath.ts at 681cc293c5d0e2846d67f3346f18f57e168e4ea7 · vitejs/devtools · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { defineComponent, h } from 'vue'
import { getPluginColor } from '~/utils/color'

// @unocss-include
export default defineComponent({
  name: 'HighlightedPath',
  props: {
    path: {
      type: String,
      required: true,
    },
    minimal: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    return () => {
      const parts = props.path.split(/([?/&:=])/g)

      let type: 'path' | 'query' = 'path'

      const classes: string[][] = parts.map(() => [])
      const styles: string[][] = parts.map(() => [])
      const nodes = parts.map((part) => {
        return h('span', { class: '' }, part)
      })

      const removeIndexes = new Set<number>()

      parts.forEach((part, index) => {
        if (part === '?')
          type = 'query'

        if (type === 'path') {
          if (part.match(/^\.+$/)) {
            classes[index]?.push('op50')
          }
          else if (part === '/') {
            classes[index]?.push('op50')
          }
          else if (part === 'node_modules' || part === 'dist' || part === 'lib' || part.match(/^\.\w/)) {
            classes[index]?.push('op60')
          }

          // If the path is minimal, remove all the parts before the node_modules
          if (part === 'node_modules') {
            if (props.minimal) {
              for (let i = 0; i < index + 2; i++) {
                removeIndexes.add(i)
              }
            }
          }

          if (part === '.pnpm') {
            if (nodes[index]) {
              nodes[index].children = '~'
              classes[index]?.push('op25!')
              classes[index - 1]?.push('op25!')
            }
            removeIndexes.add(index + 1)
            removeIndexes.add(index + 2)
            classes[index + 3]?.push('op25!')
            if (nodes[index + 4]?.children === 'node_modules') {
              removeIndexes.add(index + 3)
              removeIndexes.add(index + 4)
              classes[index + 5]?.push('op25!')
            }
          }
          if (part === ':') {
            if (nodes[index - 1]) {
              styles[index - 1]?.push(`color: ${getPluginColor(parts[index - 1]!)}`)
            }
            classes[index]?.push('op50')
          }
          if (parts[index - 2] === 'node_modules' && !part.startsWith('.')) {
            const color = `color: ${getPluginColor(parts[index]!)}`
            styles[index]?.push(color)
            if (part.startsWith('@')) {
              styles[index + 1]?.push(color)
              styles[index + 2]?.push(color)
            }
          }
        }

        if (type === 'query') {
          if (part === '?') {
            classes[index]?.push('text-red-500 dark:text-red-400')
          }
          else if (part === '&') {
            classes[index]?.push('text-orange-500 dark:text-orange-400')
          }
          if (part === '=') {
            classes[index]?.push('text-orange-900 dark:text-orange-200 op50')
          }
          else if (parts[index + 1] === '=') {
            classes[index]?.push('text-amber-900 dark:text-amber-200')
          }
          else {
            classes[index]?.push('text-orange-900 dark:text-orange-200')
          }
        }
      })

      nodes.forEach((node, index) => {
        if (node.props) {
          node.props.class = classes[index]?.join(' ') ?? ''
          node.props.style = styles[index]?.join(';') ?? ''
        }
      })

      Array.from(removeIndexes)
        .sort((a, b) => b - a)
        .forEach((index) => {
          nodes.splice(index, 1)
        })

      return nodes
    }
  },
})