genHandler() — vue Function Reference

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

Function typescript VueCore GlobalAPI calls 2 called by 1

Entity Profile

VueCore→ GlobalAPI→ genHandler() — vue Function Reference

Dependency Diagram

graph TD
  0b3b08ce_6026_235f_3970_cabc078630b0["genHandler()"]
  53156b1d_131d_a4d4_4575_daa92ec38378["events.ts"]
  0b3b08ce_6026_235f_3970_cabc078630b0 -->|defined in| 53156b1d_131d_a4d4_4575_daa92ec38378
  8ee0ad78_1765_a17a_b19d_4e3acc54fa2c["genHandlers()"]
  8ee0ad78_1765_a17a_b19d_4e3acc54fa2c -->|calls| 0b3b08ce_6026_235f_3970_cabc078630b0
  301e5018_ad82_b2b6_f443_07b215c8c9ec["genGuard()"]
  0b3b08ce_6026_235f_3970_cabc078630b0 -->|calls| 301e5018_ad82_b2b6_f443_07b215c8c9ec
  284f9843_22dd_e10d_8e8b_3886595c5979["genKeyFilter()"]
  0b3b08ce_6026_235f_3970_cabc078630b0 -->|calls| 284f9843_22dd_e10d_8e8b_3886595c5979
  style 0b3b08ce_6026_235f_3970_cabc078630b0 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}}`
  }
}