addHandler() — vue Function Reference

Architecture documentation for the addHandler() function in helpers.ts from the vue codebase.

Function typescript CompilerSFC TemplateTransformer calls 2 called by 1

Entity Profile

CompilerSFC→ TemplateTransformer→ addHandler() — vue Function Reference

Dependency Diagram

graph TD
  6d3095ae_d92b_c0a6_514d_fc6c4ef391ce["addHandler()"]
  59b7cd33_3172_bd71_66da_0b9508449054["helpers.ts"]
  6d3095ae_d92b_c0a6_514d_fc6c4ef391ce -->|defined in| 59b7cd33_3172_bd71_66da_0b9508449054
  94cd3ed6_4fec_eddb_c90a_1c38249e5b02["processAttrs()"]
  94cd3ed6_4fec_eddb_c90a_1c38249e5b02 -->|calls| 6d3095ae_d92b_c0a6_514d_fc6c4ef391ce
  dd81b5f9_d563_94d9_1fba_61db85fb88cb["prependModifierMarker()"]
  6d3095ae_d92b_c0a6_514d_fc6c4ef391ce -->|calls| dd81b5f9_d563_94d9_1fba_61db85fb88cb
  b8300ea8_d2a4_8ee3_27f2_4fb5b2125adb["rangeSetItem()"]
  6d3095ae_d92b_c0a6_514d_fc6c4ef391ce -->|calls| b8300ea8_d2a4_8ee3_27f2_4fb5b2125adb
  style 6d3095ae_d92b_c0a6_514d_fc6c4ef391ce fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/helpers.ts lines 92–170

export function addHandler(
  el: ASTElement,
  name: string,
  value: string,
  modifiers?: ASTModifiers | null,
  important?: boolean,
  warn?: Function,
  range?: Range,
  dynamic?: boolean
) {
  modifiers = modifiers || emptyObject
  // warn prevent and passive modifier
  /* istanbul ignore if */
  if (__DEV__ && warn && modifiers.prevent && modifiers.passive) {
    warn(
      "passive and prevent can't be used together. " +
        "Passive handler can't prevent default event.",
      range
    )
  }

  // normalize click.right and click.middle since they don't actually fire
  // this is technically browser-specific, but at least for now browsers are
  // the only target envs that have right/middle clicks.
  if (modifiers.right) {
    if (dynamic) {
      name = `(${name})==='click'?'contextmenu':(${name})`
    } else if (name === 'click') {
      name = 'contextmenu'
      delete modifiers.right
    }
  } else if (modifiers.middle) {
    if (dynamic) {
      name = `(${name})==='click'?'mouseup':(${name})`
    } else if (name === 'click') {
      name = 'mouseup'
    }
  }

  // check capture modifier
  if (modifiers.capture) {
    delete modifiers.capture
    name = prependModifierMarker('!', name, dynamic)
  }
  if (modifiers.once) {
    delete modifiers.once
    name = prependModifierMarker('~', name, dynamic)
  }
  /* istanbul ignore if */
  if (modifiers.passive) {
    delete modifiers.passive
    name = prependModifierMarker('&', name, dynamic)
  }

  let events
  if (modifiers.native) {
    delete modifiers.native
    events = el.nativeEvents || (el.nativeEvents = {})
  } else {
    events = el.events || (el.events = {})
  }

  const newHandler: any = rangeSetItem({ value: value.trim(), dynamic }, range)
  if (modifiers !== emptyObject) {
    newHandler.modifiers = modifiers
  }

  const handlers = events[name]
  /* istanbul ignore if */
  if (Array.isArray(handlers)) {
    important ? handlers.unshift(newHandler) : handlers.push(newHandler)
  } else if (handlers) {
    events[name] = important ? [newHandler, handlers] : [handlers, newHandler]
  } else {
    events[name] = newHandler
  }

  el.plain = false
}