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
  480317ab_b1ef_f907_829e_f74af9eae452["elementToOpenTagSegments()"]
  ea2f4f6d_abb0_6ddc_a8a6_21616cb106fa["genStringElementWithChildren()"]
  ea2f4f6d_abb0_6ddc_a8a6_21616cb106fa -->|calls| 480317ab_b1ef_f907_829e_f74af9eae452
  4d0b6945_0b17_a914_402c_b134ebc6a88e["elementToSegments()"]
  4d0b6945_0b17_a914_402c_b134ebc6a88e -->|calls| 480317ab_b1ef_f907_829e_f74af9eae452
  46043458_13ed_3173_6938_1b3beb4bf08a["applyModelTransform()"]
  480317ab_b1ef_f907_829e_f74af9eae452 -->|calls| 46043458_13ed_3173_6938_1b3beb4bf08a
  169d7521_c7a1_2d02_328a_7bdacb7fcee6["genAttrSegments()"]
  480317ab_b1ef_f907_829e_f74af9eae452 -->|calls| 169d7521_c7a1_2d02_328a_7bdacb7fcee6
  fa544f11_0c48_ef02_0a1e_2942ccbf1f8a["genDOMPropSegments()"]
  480317ab_b1ef_f907_829e_f74af9eae452 -->|calls| fa544f11_0c48_ef02_0a1e_2942ccbf1f8a
  276228da_0b16_c50c_a7e6_28171bf43149["genClassSegments()"]
  480317ab_b1ef_f907_829e_f74af9eae452 -->|calls| 276228da_0b16_c50c_a7e6_28171bf43149
  3be419e7_8dab_cff3_f795_b67baf1ae876["genStyleSegments()"]
  480317ab_b1ef_f907_829e_f74af9eae452 -->|calls| 3be419e7_8dab_cff3_f795_b67baf1ae876
  style 480317ab_b1ef_f907_829e_f74af9eae452 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
}