constructor() — vite Function Reference

Architecture documentation for the constructor() function in overlay.ts from the vite codebase.

Function typescript HMRClient WebSocketTransport calls 3

Entity Profile

HMRClient→ WebSocketTransport→ constructor() — vite Function Reference

Dependency Diagram

graph TD
  fa7ed98c_b01d_f7ac_6336_e938d321dd76["constructor()"]
  033d9b63_5269_212a_e5d9_bd61baab6243["ErrorOverlay"]
  fa7ed98c_b01d_f7ac_6336_e938d321dd76 -->|defined in| 033d9b63_5269_212a_e5d9_bd61baab6243
  b2324c1b_ec31_980c_8408_543ca7920038["text()"]
  fa7ed98c_b01d_f7ac_6336_e938d321dd76 -->|calls| b2324c1b_ec31_980c_8408_543ca7920038
  2752be78_665c_da23_b678_4ae249d7fa39["close()"]
  fa7ed98c_b01d_f7ac_6336_e938d321dd76 -->|calls| 2752be78_665c_da23_b678_4ae249d7fa39
  bca28782_43fc_ee07_4592_1eafaafdeb18["createTemplate()"]
  fa7ed98c_b01d_f7ac_6336_e938d321dd76 -->|calls| bca28782_43fc_ee07_4592_1eafaafdeb18
  style fa7ed98c_b01d_f7ac_6336_e938d321dd76 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/client/overlay.ts lines 220–262

  constructor(err: ErrorPayload['err'], links = true) {
    super()
    this.root = this.attachShadow({ mode: 'open' })
    this.root.appendChild(createTemplate())

    codeframeRE.lastIndex = 0
    const hasFrame = err.frame && codeframeRE.test(err.frame)
    const message = hasFrame
      ? err.message.replace(codeframeRE, '')
      : err.message
    if (err.plugin) {
      this.text('.plugin', `[plugin:${err.plugin}] `)
    }
    this.text('.message-body', message.trim())

    const [file] = (err.loc?.file || err.id || 'unknown file').split(`?`)
    if (err.loc) {
      this.text('.file', `${file}:${err.loc.line}:${err.loc.column}`, links)
    } else if (err.id) {
      this.text('.file', file)
    }

    if (hasFrame) {
      this.text('.frame', err.frame!.trim())
    }
    this.text('.stack', err.stack, links)

    this.root.querySelector('.window')!.addEventListener('click', (e) => {
      e.stopPropagation()
    })

    this.addEventListener('click', () => {
      this.close()
    })

    this.closeOnEsc = (e: KeyboardEvent) => {
      if (e.key === 'Escape' || e.code === 'Escape') {
        this.close()
      }
    }

    document.addEventListener('keydown', this.closeOnEsc)
  }