genElement() — vue Function Reference

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

Function typescript TemplateCompiler CodeGen calls 9 called by 7

Entity Profile

TemplateCompiler→ CodeGen→ genElement() — vue Function Reference

Dependency Diagram

graph TD
  ce806ab8_847b_273b_e07c_0a796c2f76ae["genElement()"]
  55398ede_0597_fb47_dd8c_edb8c5aacdad["genSSRElement()"]
  55398ede_0597_fb47_dd8c_edb8c5aacdad -->|calls| ce806ab8_847b_273b_e07c_0a796c2f76ae
  2542f704_a476_ae9f_30fc_92b570bd82f4["generate()"]
  2542f704_a476_ae9f_30fc_92b570bd82f4 -->|calls| ce806ab8_847b_273b_e07c_0a796c2f76ae
  c037e87b_39c5_dd4d_b28d_7477dd65a1a0["genStatic()"]
  c037e87b_39c5_dd4d_b28d_7477dd65a1a0 -->|calls| ce806ab8_847b_273b_e07c_0a796c2f76ae
  56d1ac63_81aa_e60d_9132_8fea48dc8c53["genOnce()"]
  56d1ac63_81aa_e60d_9132_8fea48dc8c53 -->|calls| ce806ab8_847b_273b_e07c_0a796c2f76ae
  5e8059c6_fb22_746e_61a2_86676c11cb7a["genIfConditions()"]
  5e8059c6_fb22_746e_61a2_86676c11cb7a -->|calls| ce806ab8_847b_273b_e07c_0a796c2f76ae
  d777a689_36b5_fe7e_de7e_1c8af4474401["genScopedSlot()"]
  d777a689_36b5_fe7e_de7e_1c8af4474401 -->|calls| ce806ab8_847b_273b_e07c_0a796c2f76ae
  797c97a3_1c26_5d3b_d5fc_dc5aa54e1bb0["genNode()"]
  797c97a3_1c26_5d3b_d5fc_dc5aa54e1bb0 -->|calls| ce806ab8_847b_273b_e07c_0a796c2f76ae
  c037e87b_39c5_dd4d_b28d_7477dd65a1a0["genStatic()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| c037e87b_39c5_dd4d_b28d_7477dd65a1a0
  56d1ac63_81aa_e60d_9132_8fea48dc8c53["genOnce()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| 56d1ac63_81aa_e60d_9132_8fea48dc8c53
  6f9060e9_4d2c_0a9f_e876_7334660278e7["genFor()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| 6f9060e9_4d2c_0a9f_e876_7334660278e7
  e7c86dbc_f669_e04c_eae5_85c469684781["genIf()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| e7c86dbc_f669_e04c_eae5_85c469684781
  a9c90cf9_5508_948e_464e_8e694711c96f["genChildren()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| a9c90cf9_5508_948e_464e_8e694711c96f
  24a4679f_fe1d_7654_49b3_ea4cfe44df1f["genSlot()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| 24a4679f_fe1d_7654_49b3_ea4cfe44df1f
  d75feb88_2d86_f3b9_e9e7_9bae72b59fc5["genComponent()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| d75feb88_2d86_f3b9_e9e7_9bae72b59fc5
  4ed91472_8abf_1a34_b708_77e5a59ad407["genData()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| 4ed91472_8abf_1a34_b708_77e5a59ad407
  43ea9c09_3b12_2310_f331_0eb70fdc38aa["checkBindingType()"]
  ce806ab8_847b_273b_e07c_0a796c2f76ae -->|calls| 43ea9c09_3b12_2310_f331_0eb70fdc38aa
  style ce806ab8_847b_273b_e07c_0a796c2f76ae 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
  }
}