createClientConfigValueReplacer() — vite Function Reference

Source Code

packages/vite/src/node/plugins/clientInjections.ts lines 68–134

async function createClientConfigValueReplacer(
  config: ResolvedConfig,
): Promise<(code: string) => string> {
  const resolvedServerHostname = (await resolveHostname(config.server.host))
    .name
  const resolvedServerPort = config.server.port!
  const devBase = config.base

  const serverHost = `${resolvedServerHostname}:${resolvedServerPort}${devBase}`

  let hmrConfig = config.server.hmr
  hmrConfig = isObject(hmrConfig) ? hmrConfig : undefined
  const host = hmrConfig?.host || null
  const protocol = hmrConfig?.protocol || null
  const timeout = hmrConfig?.timeout || 30000
  const overlay = hmrConfig?.overlay !== false
  const isHmrServerSpecified = !!hmrConfig?.server
  const hmrConfigName = path.basename(config.configFile || 'vite.config.js')

  // hmr.clientPort -> hmr.port
  // -> (24678 if middleware mode and HMR server is not specified) -> new URL(import.meta.url).port
  let port = hmrConfig?.clientPort || hmrConfig?.port || null
  if (config.server.middlewareMode && !isHmrServerSpecified) {
    port ||= 24678
  }

  let directTarget = hmrConfig?.host || resolvedServerHostname
  directTarget += `:${hmrConfig?.port || resolvedServerPort}`
  directTarget += devBase

  let hmrBase = devBase
  if (hmrConfig?.path) {
    hmrBase = path.posix.join(hmrBase, hmrConfig.path)
  }

  const modeReplacement = escapeReplacement(config.mode)
  const baseReplacement = escapeReplacement(devBase)
  const serverHostReplacement = escapeReplacement(serverHost)
  const hmrProtocolReplacement = escapeReplacement(protocol)
  const hmrHostnameReplacement = escapeReplacement(host)
  const hmrPortReplacement = escapeReplacement(port)
  const hmrDirectTargetReplacement = escapeReplacement(directTarget)
  const hmrBaseReplacement = escapeReplacement(hmrBase)
  const hmrTimeoutReplacement = escapeReplacement(timeout)
  const hmrEnableOverlayReplacement = escapeReplacement(overlay)
  const hmrConfigNameReplacement = escapeReplacement(hmrConfigName)
  const wsTokenReplacement = escapeReplacement(config.webSocketToken)
  const bundleDevReplacement = escapeReplacement(
    config.experimental.bundledDev || false,
  )

  return (code) =>
    code
      .replace(`__MODE__`, modeReplacement)
      .replace(/__BASE__/g, baseReplacement)
      .replace(`__SERVER_HOST__`, serverHostReplacement)
      .replace(`__HMR_PROTOCOL__`, hmrProtocolReplacement)
      .replace(`__HMR_HOSTNAME__`, hmrHostnameReplacement)
      .replace(`__HMR_PORT__`, hmrPortReplacement)
      .replace(`__HMR_DIRECT_TARGET__`, hmrDirectTargetReplacement)
      .replace(`__HMR_BASE__`, hmrBaseReplacement)
      .replace(`__HMR_TIMEOUT__`, hmrTimeoutReplacement)
      .replace(`__HMR_ENABLE_OVERLAY__`, hmrEnableOverlayReplacement)
      .replace(`__HMR_CONFIG_NAME__`, hmrConfigNameReplacement)
      .replace(`__WS_TOKEN__`, wsTokenReplacement)
      .replaceAll(`__BUNDLED_DEV__`, bundleDevReplacement)
}