genDirectives() — vue Function Reference

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

Function typescript CompilerSFC StyleProcessor called by 1

Entity Profile

CompilerSFC→ StyleProcessor→ genDirectives() — vue Function Reference

Dependency Diagram

graph TD
  181934c9_9a45_2859_dd07_ed21641c2ba4["genDirectives()"]
  54260741_ae9d_a025_86de_47c513f5f82d["index.ts"]
  181934c9_9a45_2859_dd07_ed21641c2ba4 -->|defined in| 54260741_ae9d_a025_86de_47c513f5f82d
  02d2d2c1_c21e_ae8c_6eba_1f4c093c8eb4["genData()"]
  02d2d2c1_c21e_ae8c_6eba_1f4c093c8eb4 -->|calls| 181934c9_9a45_2859_dd07_ed21641c2ba4
  style 181934c9_9a45_2859_dd07_ed21641c2ba4 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) + ']'
  }
}