genDirectives() — vue Function Reference

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

Function typescript CompilerSFC ScriptCompiler called by 1

Entity Profile

CompilerSFC→ ScriptCompiler→ genDirectives() — vue Function Reference

Dependency Diagram

graph TD
  34b53a82_7792_a9b4_4692_0b983276c3de["genDirectives()"]
  37199ba4_dbb1_d3e4_1b99_701b07750519["genData()"]
  37199ba4_dbb1_d3e4_1b99_701b07750519 -->|calls| 34b53a82_7792_a9b4_4692_0b983276c3de
  style 34b53a82_7792_a9b4_4692_0b983276c3de 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) + ']'
  }
}