genHandler() — vue Function Reference

Architecture documentation for the genHandler() function in events.ts from the vue codebase.

Function typescript CompilerSFC ScriptCompiler calls 2 called by 1

Entity Profile

CompilerSFC→ ScriptCompiler→ genHandler() — vue Function Reference

Dependency Diagram

graph TD
  1eb92e3a_9784_90ee_bcf1_3c3fdc158d98["genHandler()"]
  88df0083_e08f_08d8_8a43_25ecb139b4e4["genHandlers()"]
  88df0083_e08f_08d8_8a43_25ecb139b4e4 -->|calls| 1eb92e3a_9784_90ee_bcf1_3c3fdc158d98
  9ae2e7d1_02e4_24cc_764f_5c5aed48a353["genGuard()"]
  1eb92e3a_9784_90ee_bcf1_3c3fdc158d98 -->|calls| 9ae2e7d1_02e4_24cc_764f_5c5aed48a353
  9e88ae26_c3de_41d2_6817_dceb4c07b83e["genKeyFilter()"]
  1eb92e3a_9784_90ee_bcf1_3c3fdc158d98 -->|calls| 9e88ae26_c3de_41d2_6817_dceb4c07b83e
  style 1eb92e3a_9784_90ee_bcf1_3c3fdc158d98 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codegen/events.ts lines 80–143

function genHandler(
  handler: ASTElementHandler | Array<ASTElementHandler>
): string {
  if (!handler) {
    return 'function(){}'
  }

  if (Array.isArray(handler)) {
    return `[${handler.map(handler => genHandler(handler)).join(',')}]`
  }

  const isMethodPath = simplePathRE.test(handler.value)
  const isFunctionExpression = fnExpRE.test(handler.value)
  const isFunctionInvocation = simplePathRE.test(
    handler.value.replace(fnInvokeRE, '')
  )

  if (!handler.modifiers) {
    if (isMethodPath || isFunctionExpression) {
      return handler.value
    }
    return `function($event){${
      isFunctionInvocation ? `return ${handler.value}` : handler.value
    }}` // inline statement
  } else {
    let code = ''
    let genModifierCode = ''
    const keys: string[] = []
    for (const key in handler.modifiers) {
      if (modifierCode[key]) {
        genModifierCode += modifierCode[key]
        // left/right
        if (keyCodes[key]) {
          keys.push(key)
        }
      } else if (key === 'exact') {
        const modifiers = handler.modifiers
        genModifierCode += genGuard(
          ['ctrl', 'shift', 'alt', 'meta']
            .filter(keyModifier => !modifiers[keyModifier])
            .map(keyModifier => `$event.${keyModifier}Key`)
            .join('||')
        )
      } else {
        keys.push(key)
      }
    }
    if (keys.length) {
      code += genKeyFilter(keys)
    }
    // Make sure modifiers like prevent and stop get executed after key filtering
    if (genModifierCode) {
      code += genModifierCode
    }
    const handlerCode = isMethodPath
      ? `return ${handler.value}.apply(null, arguments)`
      : isFunctionExpression
      ? `return (${handler.value}).apply(null, arguments)`
      : isFunctionInvocation
      ? `return ${handler.value}`
      : handler.value
    return `function($event){${code}${handlerCode}}`
  }
}