genElement() — vue Function Reference

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

Function typescript CompilerSFC ScriptCompiler calls 9 called by 7

Entity Profile

CompilerSFC→ ScriptCompiler→ genElement() — vue Function Reference

Dependency Diagram

graph TD
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c["genElement()"]
  c9c89a7e_a7ef_371a_0bb1_ccb05926e1f2["genSSRElement()"]
  c9c89a7e_a7ef_371a_0bb1_ccb05926e1f2 -->|calls| 4cfaef88_0bc8_30fc_0a01_09b4149fd58c
  2aea58e1_5763_f065_a7b6_b9c4ca026b21["generate()"]
  2aea58e1_5763_f065_a7b6_b9c4ca026b21 -->|calls| 4cfaef88_0bc8_30fc_0a01_09b4149fd58c
  8d54f6c4_d0ee_4328_66df_a6c8aa0a56aa["genStatic()"]
  8d54f6c4_d0ee_4328_66df_a6c8aa0a56aa -->|calls| 4cfaef88_0bc8_30fc_0a01_09b4149fd58c
  baea1fd5_74ae_11db_8cec_d9ecde977f21["genOnce()"]
  baea1fd5_74ae_11db_8cec_d9ecde977f21 -->|calls| 4cfaef88_0bc8_30fc_0a01_09b4149fd58c
  df86dcf0_a271_3752_194d_d6d9e475ec59["genIfConditions()"]
  df86dcf0_a271_3752_194d_d6d9e475ec59 -->|calls| 4cfaef88_0bc8_30fc_0a01_09b4149fd58c
  957c0d47_da61_bbd7_c2c0_6ec005373124["genScopedSlot()"]
  957c0d47_da61_bbd7_c2c0_6ec005373124 -->|calls| 4cfaef88_0bc8_30fc_0a01_09b4149fd58c
  ca4b7d11_856f_7d4c_7da6_db728ef7a6f7["genNode()"]
  ca4b7d11_856f_7d4c_7da6_db728ef7a6f7 -->|calls| 4cfaef88_0bc8_30fc_0a01_09b4149fd58c
  8d54f6c4_d0ee_4328_66df_a6c8aa0a56aa["genStatic()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| 8d54f6c4_d0ee_4328_66df_a6c8aa0a56aa
  baea1fd5_74ae_11db_8cec_d9ecde977f21["genOnce()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| baea1fd5_74ae_11db_8cec_d9ecde977f21
  57deee28_aac6_0fbe_7eff_db2c78f58dbf["genFor()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| 57deee28_aac6_0fbe_7eff_db2c78f58dbf
  e458f6c9_a80f_c2c4_a63b_541be2a8b2b9["genIf()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| e458f6c9_a80f_c2c4_a63b_541be2a8b2b9
  cf9f7290_7f9d_d856_7cf0_68de752b40b7["genChildren()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| cf9f7290_7f9d_d856_7cf0_68de752b40b7
  42bea0e4_d68e_8c1a_27b1_d90fdcd8e88d["genSlot()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| 42bea0e4_d68e_8c1a_27b1_d90fdcd8e88d
  b1f20db9_8751_5545_a8c7_7e15fadb710b["genComponent()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| b1f20db9_8751_5545_a8c7_7e15fadb710b
  37199ba4_dbb1_d3e4_1b99_701b07750519["genData()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| 37199ba4_dbb1_d3e4_1b99_701b07750519
  fa908449_beaf_ea64_6be3_1e538eaea358["checkBindingType()"]
  4cfaef88_0bc8_30fc_0a01_09b4149fd58c -->|calls| fa908449_beaf_ea64_6be3_1e538eaea358
  style 4cfaef88_0bc8_30fc_0a01_09b4149fd58c 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
  }
}