feat: regex details

Author: antfu

src/doctor.ts

@@ -7,17 +7,31 @@ import { dump } from './dump'
 export class RegexDoctor {
   map = new Map<RegExp, RecordRegexInfo>()
 
+  duration = 0
+  timeStart: number | undefined
+
   constructor(
     public options: RegexDoctorOptions = {},
   ) { }
 
+  private saveDuration(start: boolean = !!this.timeStart) {
+    if (this.timeStart) {
+      this.duration += performance.now() - this.timeStart
+      this.timeStart = undefined
+    }
+    if (start)
+      this.timeStart = performance.now()
+  }
+
   stop() {
+    this.saveDuration(false)
     listeners.delete(this)
     if (!listeners.size)
       restore()
   }
 
   start() {
+    this.saveDuration(true)
     hijack()
     listeners.add(this)
 
@@ -67,6 +81,7 @@ export class RegexDoctor {
   }
 
   dump(options: RegexDoctorDumpOptions = {}): RegexDoctorResult {
-    return dump(this.map, options)
+    this.saveDuration()
+    return dump(this, options)
   }
 }

src/dump.ts

@@ -1,7 +1,9 @@
+import type { StackFrameLite } from 'error-stack-parser-es/lite'
 import { parseStack } from 'error-stack-parser-es/lite'
 import { getTrace } from 'trace-record'
-import type { MergedRecordRegexInfo, RecordRegexInfo, RegexCallsDurations, RegexDoctorDumpFiltersOptions, RegexDoctorDumpOptions, RegexInfo } from './types'
+import type { MergedRecordRegexInfo, RecordRegexInfo, RegexCall, RegexCallsDurations, RegexDoctorDumpFiltersOptions, RegexDoctorDumpOptions, RegexDoctorResult, RegexInfo } from './types'
 import { extractPackagePath, normalizeFilepath } from './shared/path'
+import type { RegexDoctor } from './doctor'
 
 const defaultFilters: Required<RegexDoctorDumpFiltersOptions> = {
   top: 20,
@@ -13,11 +15,13 @@ const defaultFilters: Required<RegexDoctorDumpFiltersOptions> = {
 }
 
 export function dump(
-  map: Map<RegExp, RecordRegexInfo>,
+  doctor: RegexDoctor,
   options: RegexDoctorDumpOptions = {},
-) {
+): RegexDoctorResult {
+  const map = doctor.map
   const {
     limitCalls = 5,
+    limitInputLength = 500,
     // stacktrace = true,
   } = options
 
@@ -26,7 +30,7 @@ export function dump(
     ...defaultFilters,
   }
 
-  let totalDuration = 0
+  let totalExecution = 0
   const uniqueMap = new Map<string, MergedRecordRegexInfo>()
 
   Array.from(map.values())
@@ -60,7 +64,7 @@ export function dump(
   let infos = Array.from(uniqueMap.values())
   infos.forEach((info) => {
     info.durations = getDurations(info)
-    totalDuration += info.durations.sum
+    totalExecution += info.durations.sum
   })
   infos.sort((a, b) => b.durations!.sum - a.durations!.sum)
 
@@ -85,20 +89,56 @@ export function dump(
       .sort((a, b) => b.duration - a.duration)
 
     const files = new Set<string>()
+    const traces = new Map<string, { idx: number, trace: StackFrameLite[] }>()
+
+    let infos = calls.map((call): RegexCall => {
+      let traceIdx: number | undefined
+      if (call.stack) {
+        if (traces.has(call.stack)) {
+          traceIdx = traces.get(call.stack)!.idx
+        }
+        else {
+          const trace = parseStacktrace(call.stack)
+          if (trace && trace[0]) {
+            files.add(`${normalizeFilepath(trace[0].file!)}:${trace[0].line!}:${trace[0].col!}`)
+            traceIdx = traces.size
+            traces.set(call.stack, { idx: traceIdx, trace })
+          }
+        }
+      }
 
-    let infos = calls.map((call) => {
-      // TODO: group by unique stacks
-      const trace = call.stack
-        ? parseStack(call.stack, { slice: [1, 10] }).filter(frame => frame.file)
-        : undefined
-
-      if (trace && trace[0])
-        files.add(`${normalizeFilepath(trace[0].file!)}:${trace[0].line!}:${trace[0].col!}`)
-
+      let input: RegexCall['input']
+      if (call.input != null) {
+        input = []
+        if (call.input.length <= limitInputLength) {
+          input.push(call.input)
+        }
+        else if (call.index != null) {
+          const index = Math.max(0, Math.round(call.index - limitInputLength * 0.3))
+          if (index > 0)
+            input.push(index)
+          const snippet = call.input.slice(index, index + limitInputLength)
+          input.push(snippet)
+          const rest = call.inputLength - index - snippet.length
+          if (rest > 0)
+            input.push(rest)
+        }
+        else {
+          const snippet = call.input.slice(0, limitInputLength)
+          input.push(snippet)
+          const rest = call.inputLength - snippet.length
+          if (rest > 0)
+            input.push(rest)
+        }
+      }
       return {
         duration: call.duration,
         inputLength: call.inputLength,
-        trace,
+        input,
+        trace: traceIdx,
+        matched: call.matched,
+        index: call.index,
+        groups: call.groups,
       }
     })
 
@@ -124,6 +164,9 @@ export function dump(
       copies: info.copies,
       calls: info.calls.length,
       callsInfos: infos,
+      traces: Array.from(traces.values())
+        .sort((a, b) => a.idx - b.idx)
+        .map(({ trace }) => trace),
       durations: info.durations || getDurations(info),
       filesCalled,
       filesCreated: info.filesCreated,
@@ -135,7 +178,8 @@ export function dump(
   return {
     count: map.size,
     countUnique: uniqueMap.size,
-    totalDuration,
+    totalDuration: doctor.duration,
+    totalExecution,
     regexInfos: infos.map((info, idx) => dumpInfo(info, idx)),
     cwd: options.cwd,
   }
@@ -161,3 +205,17 @@ function getDurations(info: RecordRegexInfo): RegexCallsDurations {
     max,
   }
 }
+
+const traceCache: Map<string, StackFrameLite[] | undefined> = new Map()
+
+function parseStacktrace(string?: string) {
+  if (!string)
+    return
+  if (traceCache.has(string))
+    return traceCache.get(string)
+  const trace = string
+    ? parseStack(string, { slice: [1, 10] }).filter(frame => frame.file)
+    : undefined
+  traceCache.set(string, trace)
+  return trace
+}

src/hijack.ts

@@ -48,14 +48,22 @@ export function hijack() {
       const result = _exec.call(this, string)
       const end = performance.now()
       const duration = end - start
-      const call = Object.freeze(<RecordRegexCall>{
+      const call: RecordRegexCall = {
         stack: duration > 0.001
           ? new Error().stack
           : undefined,
         duration,
         input: string,
         inputLength: string.length,
-      })
+      }
+
+      if (result) {
+        call.matched = true
+        call.index = result.index
+        call.groups = result.length - 1
+      }
+
+      Object.freeze(call)
 
       for (const listener of listeners) {
         const map = listener.map

src/types/data.ts

@@ -1,4 +1,5 @@
 import type { StackFrameLite } from 'error-stack-parser-es/lite'
+import type { RecordRegexCall } from './record'
 
 export interface RegexCallsDurations {
   count: number
@@ -22,6 +23,10 @@ export interface RegexDoctorResult {
    * The number of unique regexes tracked
    */
   countUnique: number
+  /**
+   * Total time spent in executing regexes
+   */
+  totalExecution: number
   /**
    * Total time spent in all regexes
    */
@@ -34,6 +39,10 @@ export interface RegexDoctorResult {
    * Working directory
    */
   cwd?: string
+  /**
+   * CLI arguments
+   */
+  argv?: string[]
 }
 
 export interface RegexInfo {
@@ -53,6 +62,10 @@ export interface RegexInfo {
    * Notable call infos
    */
   callsInfos: RegexCall[]
+  /**
+   * Array of stack traces
+   */
+  traces?: (StackFrameLite[])[]
   /**
    * Number of calls
    */
@@ -79,9 +92,13 @@ export interface RegexInfo {
   dynamic?: boolean
 }
 
-export interface RegexCall {
-  duration: number
-  inputLength: number
-  input?: string
-  trace?: StackFrameLite[]
+export interface RegexCall extends Pick<RecordRegexCall, 'duration' | 'inputLength' | 'matched' | 'index' | 'groups'> {
+  /**
+   * Input string, number stands for the truncated length
+   */
+  input?: (number | string)[]
+  /**
+   * Index of the stack trace map
+   */
+  trace?: number
 }

src/types/options.ts

@@ -13,6 +13,13 @@ export interface RegexDoctorDumpOptions {
    */
   limitCalls?: number
 
+  /**
+   * Maximum length of the input to dump
+   *
+   * @default 500
+   */
+  limitInputLength?: number
+
   /**
    * Filters for regex details. Include if one of the requirements is met.
    */

src/types/record.ts

@@ -5,6 +5,9 @@ export interface RecordRegexCall {
   inputLength: number
   input?: string
   stack?: string
+  matched?: boolean
+  index?: number
+  groups?: number
 }
 
 export interface RecordRegexInfo {

ui/components/DurationDisplay.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
-const props = defineProps<{
-  ms: number
-}>()
+const props = withDefaults(
+  defineProps<{
+    ms: number
+    colorful?: boolean
+  }>(),
+  {
+    colorful: true,
+  },
+)
 
 const unit = ref('')
 const number = ref(0)
@@ -31,6 +37,8 @@ watchEffect(() => {
 })
 
 const color = computed(() => {
+  if (props.colorful === false)
+    return ''
   if (props.ms > 0.5)
     return 'text-red'
   if (props.ms > 0.2)

ui/components/PackageNameDisplay.vue

@@ -14,5 +14,5 @@ const style = computed(() => ({
 </script>
 
 <template>
-  <code :style="style" px1 rounded text-sm>{{ name }}</code>
+  <code :style="style" px1 rounded text-sm ws-nowrap>{{ name }}</code>
 </template>