elementToOpenTagSegments() — vue Function Reference

Architecture documentation for the elementToOpenTagSegments() function in codegen.ts from the vue codebase.

Function typescript ServerRenderer BundleRenderer calls 5 called by 2

Entity Profile

ServerRenderer→ BundleRenderer→ elementToOpenTagSegments() — vue Function Reference

Dependency Diagram

graph TD
  96d38cc7_62ee_04de_8f49_73340fb7f3ad["elementToOpenTagSegments()"]
  31022e41_9356_bc1a_19ac_a481181c0824["genStringElementWithChildren()"]
  31022e41_9356_bc1a_19ac_a481181c0824 -->|calls| 96d38cc7_62ee_04de_8f49_73340fb7f3ad
  e2a158d6_845c_6930_8656_68576142a273["elementToSegments()"]
  e2a158d6_845c_6930_8656_68576142a273 -->|calls| 96d38cc7_62ee_04de_8f49_73340fb7f3ad
  40bc5901_18aa_6d6f_9d37_b004a8e5387c["applyModelTransform()"]
  96d38cc7_62ee_04de_8f49_73340fb7f3ad -->|calls| 40bc5901_18aa_6d6f_9d37_b004a8e5387c
  b21c37a0_77e9_304d_e550_47589d4536f4["genAttrSegments()"]
  96d38cc7_62ee_04de_8f49_73340fb7f3ad -->|calls| b21c37a0_77e9_304d_e550_47589d4536f4
  96b3c31f_f988_202a_442b_1f0ff39f4f33["genDOMPropSegments()"]
  96d38cc7_62ee_04de_8f49_73340fb7f3ad -->|calls| 96b3c31f_f988_202a_442b_1f0ff39f4f33
  a38882b8_e5fe_8aef_33fc_138ff34f3f9d["genClassSegments()"]
  96d38cc7_62ee_04de_8f49_73340fb7f3ad -->|calls| a38882b8_e5fe_8aef_33fc_138ff34f3f9d
  07b8a4e2_c844_2a5f_74ac_9aa256338f3b["genStyleSegments()"]
  96d38cc7_62ee_04de_8f49_73340fb7f3ad -->|calls| 07b8a4e2_c844_2a5f_74ac_9aa256338f3b
  style 96d38cc7_62ee_04de_8f49_73340fb7f3ad fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/optimizing-compiler/codegen.ts lines 151–196

function elementToOpenTagSegments(el, state): Array<StringSegment> {
  applyModelTransform(el, state)
  let binding
  const segments = [{ type: RAW, value: `<${el.tag}` }]
  // attrs
  if (el.attrs) {
    segments.push.apply(segments, genAttrSegments(el.attrs))
  }
  // domProps
  if (el.props) {
    segments.push.apply(segments, genDOMPropSegments(el.props, el.attrs))
  }
  // v-bind="object"
  if ((binding = el.attrsMap['v-bind'])) {
    segments.push({ type: EXPRESSION, value: `_ssrAttrs(${binding})` })
  }
  // v-bind.prop="object"
  if ((binding = el.attrsMap['v-bind.prop'])) {
    segments.push({ type: EXPRESSION, value: `_ssrDOMProps(${binding})` })
  }
  // class
  if (el.staticClass || el.classBinding) {
    segments.push.apply(
      segments,
      genClassSegments(el.staticClass, el.classBinding)
    )
  }
  // style & v-show
  if (el.staticStyle || el.styleBinding || el.attrsMap['v-show']) {
    segments.push.apply(
      segments,
      genStyleSegments(
        el.attrsMap.style,
        el.staticStyle,
        el.styleBinding,
        el.attrsMap['v-show']
      )
    )
  }
  // _scopedId
  if (state.options.scopeId) {
    segments.push({ type: RAW, value: ` ${state.options.scopeId}` })
  }
  segments.push({ type: RAW, value: `>` })
  return segments
}