clientInjectionsPlugin() — vite Function Reference

Architecture documentation for the clientInjectionsPlugin() function in clientInjections.ts from the vite codebase.

Function typescript PluginSystem AssetManagement calls 5 called by 1

Entity Profile

PluginSystem→ AssetManagement→ clientInjectionsPlugin() — vite Function Reference

Dependency Diagram

graph TD
  911f8f87_f452_e725_a168_2bab39345c79["clientInjectionsPlugin()"]
  706c7fc5_ca45_d178_75a9_66940b856450["clientInjections.ts"]
  911f8f87_f452_e725_a168_2bab39345c79 -->|defined in| 706c7fc5_ca45_d178_75a9_66940b856450
  b1b40b5b_3e43_2197_dea0_d36389d312a1["resolvePlugins()"]
  b1b40b5b_3e43_2197_dea0_d36389d312a1 -->|calls| 911f8f87_f452_e725_a168_2bab39345c79
  16a00926_f0e9_60f1_3006_9132a6d78745["perEnvironmentState()"]
  911f8f87_f452_e725_a168_2bab39345c79 -->|calls| 16a00926_f0e9_60f1_3006_9132a6d78745
  28e3e193_a739_1920_1735_eeb2a70f2fde["serializeDefine()"]
  911f8f87_f452_e725_a168_2bab39345c79 -->|calls| 28e3e193_a739_1920_1735_eeb2a70f2fde
  3928ac07_6613_c9d3_38dd_625918721277["createClientConfigValueReplacer()"]
  911f8f87_f452_e725_a168_2bab39345c79 -->|calls| 3928ac07_6613_c9d3_38dd_625918721277
  10b9dea8_362c_1af2_93be_afa4dd9aed9e["cleanUrl()"]
  911f8f87_f452_e725_a168_2bab39345c79 -->|calls| 10b9dea8_362c_1af2_93be_afa4dd9aed9e
  10ecbe47_07f3_0939_0197_7a28bc06f63d["replaceDefine()"]
  911f8f87_f452_e725_a168_2bab39345c79 -->|calls| 10ecbe47_07f3_0939_0197_7a28bc06f63d
  style 911f8f87_f452_e725_a168_2bab39345c79 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/plugins/clientInjections.ts lines 19–61

export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
  let injectConfigValues: (code: string) => string

  const getDefineReplacer = perEnvironmentState((environment) => {
    const userDefine: Record<string, any> = {}
    for (const key in environment.config.define) {
      // import.meta.env.* is handled in `importAnalysis` plugin
      if (!key.startsWith('import.meta.env.')) {
        userDefine[key] = environment.config.define[key]
      }
    }
    const serializedDefines = serializeDefine(userDefine)
    const definesReplacement = () => serializedDefines
    return (code: string) => code.replace(`__DEFINES__`, definesReplacement)
  })

  return {
    name: 'vite:client-inject',
    async buildStart() {
      injectConfigValues = await createClientConfigValueReplacer(config)
    },
    async transform(code, id) {
      const ssr = this.environment.config.consumer === 'server'
      const cleanId = cleanUrl(id)
      if (cleanId === normalizedClientEntry || cleanId === normalizedEnvEntry) {
        const defineReplacer = getDefineReplacer(this)
        return defineReplacer(injectConfigValues(code))
      } else if (!ssr && code.includes('process.env.NODE_ENV')) {
        // replace process.env.NODE_ENV instead of defining a global
        // for it to avoid shimming a `process` object during dev,
        // avoiding inconsistencies between dev and build
        const nodeEnv =
          this.environment.config.define?.['process.env.NODE_ENV'] ||
          JSON.stringify(process.env.NODE_ENV || config.mode)
        return await replaceDefine(this.environment, code, id, {
          'process.env.NODE_ENV': nodeEnv,
          'global.process.env.NODE_ENV': nodeEnv,
          'globalThis.process.env.NODE_ENV': nodeEnv,
        })
      }
    },
  }
}