genDirectives() — vue Function Reference

Architecture documentation for the genDirectives() function in index.ts from the vue codebase.

Function typescript VueCore VDom called by 1

Entity Profile

VueCore→ VDom→ genDirectives() — vue Function Reference

Dependency Diagram

graph TD
  65c98e23_e1e3_e4ac_083d_ca95d9519bbe["genDirectives()"]
  6a18399e_553e_fef8_6a39_746f79f94bd2["index.ts"]
  65c98e23_e1e3_e4ac_083d_ca95d9519bbe -->|defined in| 6a18399e_553e_fef8_6a39_746f79f94bd2
  2f9548d4_5dab_e18c_c75b_5e2c2bf4a780["genData()"]
  2f9548d4_5dab_e18c_c75b_5e2c2bf4a780 -->|calls| 65c98e23_e1e3_e4ac_083d_ca95d9519bbe
  style 65c98e23_e1e3_e4ac_083d_ca95d9519bbe fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codegen/index.ts lines 361–390

function genDirectives(el: ASTElement, state: CodegenState): string | void {
  const dirs = el.directives
  if (!dirs) return
  let res = 'directives:['
  let hasRuntime = false
  let i, l, dir, needRuntime
  for (i = 0, l = dirs.length; i < l; i++) {
    dir = dirs[i]
    needRuntime = true
    const gen: DirectiveFunction = state.directives[dir.name]
    if (gen) {
      // compile-time directive that manipulates AST.
      // returns true if it also needs a runtime counterpart.
      needRuntime = !!gen(el, dir, state.warn)
    }
    if (needRuntime) {
      hasRuntime = true
      res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
        dir.value
          ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}`
          : ''
      }${dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''}${
        dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
      }},`
    }
  }
  if (hasRuntime) {
    return res.slice(0, -1) + ']'
  }
}