elementToSegments() — vue Function Reference

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

Function typescript ServerRenderer BundleRenderer calls 4 called by 2

Entity Profile

ServerRenderer→ BundleRenderer→ elementToSegments() — vue Function Reference

Dependency Diagram

graph TD
  4d0b6945_0b17_a914_402c_b134ebc6a88e["elementToSegments()"]
  e2b0a9c3_7a24_c55d_154b_7d5a0a490d9b["elementToString()"]
  e2b0a9c3_7a24_c55d_154b_7d5a0a490d9b -->|calls| 4d0b6945_0b17_a914_402c_b134ebc6a88e
  f563a18b_c92b_0663_f7dc_3d9177b3ecc0["nodesToSegments()"]
  f563a18b_c92b_0663_f7dc_3d9177b3ecc0 -->|calls| 4d0b6945_0b17_a914_402c_b134ebc6a88e
  6f9060e9_4d2c_0a9f_e876_7334660278e7["genFor()"]
  4d0b6945_0b17_a914_402c_b134ebc6a88e -->|calls| 6f9060e9_4d2c_0a9f_e876_7334660278e7
  e7c86dbc_f669_e04c_eae5_85c469684781["genIf()"]
  4d0b6945_0b17_a914_402c_b134ebc6a88e -->|calls| e7c86dbc_f669_e04c_eae5_85c469684781
  44ae389a_3263_f16b_05af_9e93b3ed0124["childrenToSegments()"]
  4d0b6945_0b17_a914_402c_b134ebc6a88e -->|calls| 44ae389a_3263_f16b_05af_9e93b3ed0124
  480317ab_b1ef_f907_829e_f74af9eae452["elementToOpenTagSegments()"]
  4d0b6945_0b17_a914_402c_b134ebc6a88e -->|calls| 480317ab_b1ef_f907_829e_f74af9eae452
  style 4d0b6945_0b17_a914_402c_b134ebc6a88e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/optimizing-compiler/codegen.ts lines 119–149

function elementToSegments(el, state): Array<StringSegment> {
  // v-for / v-if
  if (el.for && !el.forProcessed) {
    el.forProcessed = true
    return [
      {
        type: EXPRESSION,
        value: genFor(el, state, elementToString, '_ssrList')
      }
    ]
  } else if (el.if && !el.ifProcessed) {
    el.ifProcessed = true
    return [
      {
        type: EXPRESSION,
        value: genIf(el, state, elementToString, '"<!---->"')
      }
    ]
  } else if (el.tag === 'template') {
    return childrenToSegments(el, state)
  }

  const openSegments = elementToOpenTagSegments(el, state)
  const childrenSegments = childrenToSegments(el, state)
  const { isUnaryTag } = state.options
  const close =
    isUnaryTag && isUnaryTag(el.tag)
      ? []
      : [{ type: RAW, value: `</${el.tag}>` }]
  return openSegments.concat(childrenSegments, close)
}