overlay.ts — vite Source File

Architecture documentation for overlay.ts, a typescript file in the vite codebase. 1 imports, 1 dependents.

File typescript HMRClient WebSocketTransport 1 imports 1 dependents 2 functions 3 classes

Entity Profile

HMRClient→ WebSocketTransport→ overlay.ts — vite Source File

Dependency Diagram

graph LR
  e11865a0_84fe_cc5a_9b23_3f69f2300ca4["overlay.ts"]
  ccb8a028_b1ec_3743_cfbe_0ac5315bc7c3["hmrPayload"]
  e11865a0_84fe_cc5a_9b23_3f69f2300ca4 --> ccb8a028_b1ec_3743_cfbe_0ac5315bc7c3
  85908ff5_4d12_826d_8235_531f91538758["client.ts"]
  85908ff5_4d12_826d_8235_531f91538758 --> e11865a0_84fe_cc5a_9b23_3f69f2300ca4
  style e11865a0_84fe_cc5a_9b23_3f69f2300ca4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import type { ErrorPayload } from '#types/hmrPayload'

// injected by the hmr plugin when served
declare const __BASE__: string
declare const __HMR_CONFIG_NAME__: string

const hmrConfigName = __HMR_CONFIG_NAME__
const base = __BASE__ || '/'

export const cspNonce =
  'document' in globalThis
    ? document.querySelector<HTMLMetaElement>('meta[property=csp-nonce]')?.nonce
    : undefined

// Create an element with provided attributes and optional children
function h(
  e: string,
  attrs: Record<string, string | undefined> = {},
  ...children: (string | Node)[]
) {
  const elem = document.createElement(e)
  for (const [k, v] of Object.entries(attrs)) {
    if (v !== undefined) {
      elem.setAttribute(k, v)
    }
  }
  elem.append(...children)
  return elem
}

// set :host styles to make playwright detect the element as visible
const templateStyle = /*css*/ `
:host {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  --monospace: 'SFMono-Regular', Consolas,
  'Liberation Mono', Menlo, Courier, monospace;
  --red: #ff5555;
  --yellow: #e2aa53;
  --purple: #cfa4ff;
  --cyan: #2dd9da;
  --dim: #c9c9c9;

  --window-background: #181818;
  --window-color: #d8d8d8;
}

.backdrop {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  margin: 0;
// ... (246 more lines)