vue Architecture Docs
Home / Function/ genElement() — vue Function Reference

genElement() — vue Function Reference

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

Function typescript CompilerSFC ScriptAnalyzer calls 9 called by 6

Entity Profile

Dependency Diagram

graph TD
  075d1f95_9965_89f4_3c01_f944fee6b553["genElement()"]
  54260741_ae9d_a025_86de_47c513f5f82d["index.ts"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|defined in| 54260741_ae9d_a025_86de_47c513f5f82d
  f7d4da5f_5adf_1545_aed3_f44e030efac4["generate()"]
  f7d4da5f_5adf_1545_aed3_f44e030efac4 -->|calls| 075d1f95_9965_89f4_3c01_f944fee6b553
  539e85ff_376c_901f_0c90_8a9ec49163b2["genStatic()"]
  539e85ff_376c_901f_0c90_8a9ec49163b2 -->|calls| 075d1f95_9965_89f4_3c01_f944fee6b553
  e6ae3747_8265_7dc5_77d6_fef4ab96c493["genOnce()"]
  e6ae3747_8265_7dc5_77d6_fef4ab96c493 -->|calls| 075d1f95_9965_89f4_3c01_f944fee6b553
  016cc772_3198_eb71_716e_46e8192d13cc["genIfConditions()"]
  016cc772_3198_eb71_716e_46e8192d13cc -->|calls| 075d1f95_9965_89f4_3c01_f944fee6b553
  27804826_1536_d9f6_16a0_0b84b98233f7["genScopedSlot()"]
  27804826_1536_d9f6_16a0_0b84b98233f7 -->|calls| 075d1f95_9965_89f4_3c01_f944fee6b553
  58562d3b_7f41_25f1_a971_62a0f5f779f7["genNode()"]
  58562d3b_7f41_25f1_a971_62a0f5f779f7 -->|calls| 075d1f95_9965_89f4_3c01_f944fee6b553
  539e85ff_376c_901f_0c90_8a9ec49163b2["genStatic()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| 539e85ff_376c_901f_0c90_8a9ec49163b2
  e6ae3747_8265_7dc5_77d6_fef4ab96c493["genOnce()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| e6ae3747_8265_7dc5_77d6_fef4ab96c493
  5219b9aa_5abd_868e_f9ef_1a376162c229["genFor()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| 5219b9aa_5abd_868e_f9ef_1a376162c229
  e9890815_0d7c_a227_7123_bb7fe2649918["genIf()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| e9890815_0d7c_a227_7123_bb7fe2649918
  9fb6810f_0f8d_c3be_a848_4600c5dd2c8d["genChildren()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| 9fb6810f_0f8d_c3be_a848_4600c5dd2c8d
  fbca07e6_aa9c_0443_703f_c46ecf6696fa["genSlot()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| fbca07e6_aa9c_0443_703f_c46ecf6696fa
  51a51b9c_5d7a_4e96_c7de_f686070e1977["genComponent()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| 51a51b9c_5d7a_4e96_c7de_f686070e1977
  02d2d2c1_c21e_ae8c_6eba_1f4c093c8eb4["genData()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| 02d2d2c1_c21e_ae8c_6eba_1f4c093c8eb4
  bded0e6c_82d0_13e8_6213_80ce42c23f51["checkBindingType()"]
  075d1f95_9965_89f4_3c01_f944fee6b553 -->|calls| bded0e6c_82d0_13e8_6213_80ce42c23f51
  style 075d1f95_9965_89f4_3c01_f944fee6b553 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/codegen/index.ts lines 74–124

export function genElement(el: ASTElement, state: CodegenState): string {
  if (el.parent) {
    el.pre = el.pre || el.parent.pre
  }

  if (el.staticRoot && !el.staticProcessed) {
    return genStatic(el, state)
  } else if (el.once && !el.onceProcessed) {
    return genOnce(el, state)
  } else if (el.for && !el.forProcessed) {
    return genFor(el, state)
  } else if (el.if && !el.ifProcessed) {
    return genIf(el, state)
  } else if (el.tag === 'template' && !el.slotTarget && !state.pre) {
    return genChildren(el, state) || 'void 0'
  } else if (el.tag === 'slot') {
    return genSlot(el, state)
  } else {
    // component or element
    let code
    if (el.component) {
      code = genComponent(el.component, el, state)
    } else {
      let data
      const maybeComponent = state.maybeComponent(el)
      if (!el.plain || (el.pre && maybeComponent)) {
        data = genData(el, state)
      }

      let tag: string | undefined
      // check if this is a component in <script setup>
      const bindings = state.options.bindings
      if (maybeComponent && bindings && bindings.__isScriptSetup !== false) {
        tag = checkBindingType(bindings, el.tag)
      }
      if (!tag) tag = `'${el.tag}'`

      const children = el.inlineTemplate ? null : genChildren(el, state, true)
      code = `_c(${tag}${
        data ? `,${data}` : '' // data
      }${
        children ? `,${children}` : '' // children
      })`
    }
    // module transforms
    for (let i = 0; i < state.transforms.length; i++) {
      code = state.transforms[i](el, code)
    }
    return code
  }
}

Domain

Subdomains

Defined In

Calls

Called By

Source

Frequently Asked Questions

What does genElement() do?
genElement() is a function in the vue codebase, defined in src/compiler/codegen/index.ts.
Where is genElement() defined?
genElement() is defined in src/compiler/codegen/index.ts at line 74.
What does genElement() call?
genElement() calls 9 function(s): checkBindingType, genChildren, genComponent, genData, genFor, genIf, genOnce, genSlot, and 1 more.
What calls genElement()?
genElement() is called by 6 function(s): genIfConditions, genNode, genOnce, genScopedSlot, genStatic, generate.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free