chore: lint

Author: antfu

packages/devtools-ui-kit/src/components/NDarkToggle.vue

@@ -49,7 +49,7 @@ function toggle(event?: MouseEvent) {
     document.documentElement.animate(
       {
         clipPath: isDark.value
-          ? [...clipPath].reverse()
+          ? clipPath.toReversed()
           : clipPath,
       },
       {

packages/devtools-ui-kit/src/unocss.ts

@@ -17,6 +17,8 @@ import {
 
 // @unocss-include
 
+const N_PREFIX_RE = /^n-(.*)$/
+
 export function unocssPreset(): Preset {
   return {
     name: '@nuxt/devtools-ui-kit',
@@ -28,15 +30,15 @@ export function unocssPreset(): Preset {
       },
     }),
     rules: [
-      [/^n-(.*)$/, ([, body]: string[], { theme }: RuleContext<Theme>) => {
+      [N_PREFIX_RE, ([, body]: string[], { theme }: RuleContext<Theme>) => {
         const color = parseColor(body!, theme)
         if (color?.cssColor?.type === 'rgb' && color.cssColor.components) {
           return {
             '--nui-c-context': `${color.cssColor.components.join(',')}`,
           }
         }
       }],
-      [/^n-(.*)$/, fonts[1]![1] as any],
+      [N_PREFIX_RE, fonts[1]![1] as any],
       ['n-dashed', { 'border-style': 'dashed' }],
       ['n-solid', {
         'background-color': 'rgba(var(--nui-c-context), 1) !important',

packages/devtools/client/components/AssetDropZone.vue

@@ -18,6 +18,8 @@ const props = defineProps({
   },
 })
 
+const FILE_EXT_RE = /\.\w+$/
+
 const visible = useVModel(props, 'modelValue')
 const lastTarget = ref()
 
@@ -41,7 +43,7 @@ function onDrop(e: DragEvent) {
 }
 
 function setFiles(data: FileList | null) {
-  const inputFiles = Array.from(data || [])
+  const inputFiles = [...data || []]
   if (inputFiles.length) {
     const newFiles: File[] = []
     const existingFileNames: string[] = files.value.map(file => file.name)
@@ -120,7 +122,7 @@ function blobIt(file: File) {
 
 function changeName(file: File, newName: string) {
   const [name, ext] = file.name.split('.')
-  const baseName = newName.replace(/\.\w+$/, '')
+  const baseName = newName.replace(FILE_EXT_RE, '')
   const newFileName = `${baseName}.${ext}`
   if (baseName.length === 0) {
     // TODO: with proper dialog

packages/devtools/client/components/CodeDiff.vue

@@ -9,6 +9,8 @@ const props = defineProps<{
   to: string
   lang: BuiltinLanguage | 'text'
 }>()
+const SHIKI_CLASS_RE = /class="shiki/
+const LINE_CLASS_RE = /class="line"/g
 
 function calculateDiff(from: string, to: string) {
   const diffs = diffLines(from.trim(), to.trim())
@@ -46,8 +48,8 @@ const diff = computed(() => calculateDiff(props.from, props.to))
 function transformRendered(code: string) {
   let count = 0
   return code
-    .replace(/class="shiki/, 'class="shiki diff')
-    .replace(/class="line"/g, (_) => {
+    .replace(SHIKI_CLASS_RE, 'class="shiki diff')
+    .replace(LINE_CLASS_RE, (_) => {
       count++
       if (diff.value.added.includes(count - 1))
         return 'class="line line-added"'

packages/devtools/client/components/ComponentsGraph.vue

@@ -57,7 +57,7 @@ const entries = computed(() => {
       })
     }
     addToSet(selectedFilter.value)
-    return Array.from(set)
+    return [...set]
   }
   return relations
 })
@@ -206,14 +206,18 @@ function onCloseDrawer() {
   selected.value = undefined
 }
 
+const COMPONENTS_PATH_RE = /.*\/components\//
+const VUE_EXT_RE = /\.vue$/
+const INDEX_SUFFIX_RE = /\/index$/
+
 function getComponentName(path: string) {
   const component = props.components.find(i => i.filePath === path)
   if (component)
     return component.pascalName
   return path
-    .replace(/.*\/components\//, '')
-    .replace(/\.vue$/, '')
-    .replace(/\/index$/, '')
+    .replace(COMPONENTS_PATH_RE, '')
+    .replace(VUE_EXT_RE, '')
+    .replace(INDEX_SUFFIX_RE, '')
     .split('/')
     .map(part => part.charAt(0).toUpperCase() + part.slice(1))
     .join('')

packages/devtools/client/components/DebugModuleMutationRecords.vue

@@ -6,8 +6,10 @@ const props = defineProps<{
   moduleMutationRecords: ServerDebugModuleMutationRecord[]
 }>()
 
+const WINDOWS_DRIVE_RE = /^[a-z]:[\\/]/i
+
 function isPath(path: string) {
-  return path.startsWith('/') || path.match(/^[a-z]:[\\/]/i)
+  return path.startsWith('/') || path.match(WINDOWS_DRIVE_RE)
 }
 
 // const search = ref('')

packages/devtools/client/components/FileIcon.vue

@@ -3,7 +3,9 @@ import { computed } from 'vue'
 
 const props = defineProps<{ id?: string }>()
 
-const ext = computed(() => props.id?.split(/\./g).pop() || '')
+const DOT_RE = /\./g
+
+const ext = computed(() => props.id?.split(DOT_RE).pop() || '')
 const icon = computed(() => {
   switch (ext.value) {
     case 'vue':

packages/devtools/client/components/HooksTable.vue

@@ -23,7 +23,7 @@ const startTimes = computed(() => props.hooks.map(i => i.start).sort((a, b) => a
 
 const sorted = computed(() => {
   const sortFn = sortFunctions[sortby.value]
-  const sorted = [...props.hooks].sort(sortFn)
+  const sorted = props.hooks.toSorted(sortFn)
   if (direction.value === 'desc')
     sorted.reverse()
   return sorted

packages/devtools/client/components/OpenGraphMissingTabs.vue

@@ -11,6 +11,8 @@ const props = defineProps<{
   tags: NormalizedHeadTag[]
   matchedRouteFilepath?: string
 }>()
+const JSON_KEY_RE = /"([^"]+)":/g
+const DOUBLE_QUOTE_RE = /"/g
 
 const missingTags = computed(() => {
   return ogTags.filter(define => !props.tags?.some(tag => tag.name === define.name))
@@ -31,16 +33,16 @@ const codeSnippet = computed(() => {
 
   if (Object.keys(mergedSeoMetaOptions).length) {
     const body = JSON.stringify(mergedSeoMetaOptions, null, 2)
-      .replace(/"([^"]+)":/g, '$1:')
-      .replace(/"/g, '\'')
+      .replace(JSON_KEY_RE, '$1:')
+      .replace(DOUBLE_QUOTE_RE, '\'')
 
     lines.push(`useSeoMeta(${body})`)
   }
 
   if (Object.keys(mergedHeadOptions).length) {
     const body = JSON.stringify(mergedHeadOptions, null, 2)
-      .replace(/"([^"]+)":/g, '$1:')
-      .replace(/"/g, '\'')
+      .replace(JSON_KEY_RE, '$1:')
+      .replace(DOUBLE_QUOTE_RE, '\'')
 
     lines.push(`useHead(${body})`)
   }

packages/devtools/client/components/RoutePathItem.vue

@@ -5,25 +5,27 @@ import { computed, ref } from 'vue'
 const props = defineProps<{
   route: RouteInfo
 }>()
-
 const emit = defineEmits<{
   (e: 'navigate', path: string): void
 }>()
+const EXPRESS_PARAM_RE = /(:\w+[?*]?(?:\(\))?)/
+const TRAILING_PARENS_RE = /\(\)$/
+const MULTI_SLASH_RE = /\/+/g
 
 const partsInput = ref<string[]>([])
 const parts = computed(() => {
   const _ = parseExpressRoute(props.route.path)
   // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-  partsInput.value = Array.from({ length: _.length }, () => '')
+  partsInput.value = Array.from<string>({ length: _.length }).fill('')
   return _
 })
 
 function parseExpressRoute(route: string) {
   return route
-    .split(/(:\w+[?*]?(?:\(\))?)/)
+    .split(EXPRESS_PARAM_RE)
     .filter(Boolean)
     .map(i => i[0] === ':'
-      ? i.replace(/\(\)$/, '?')
+      ? i.replace(TRAILING_PARENS_RE, '?')
       : i)
 }
 
@@ -34,7 +36,7 @@ const path = computed(() => parts.value
       : i,
   )
   .join('')
-  .replace(/\/+/g, '/'))
+  .replace(MULTI_SLASH_RE, '/'))
 const hasWildcard = computed(() => props.route.path.includes(':'))
 
 function navigate() {