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
  e2a158d6_845c_6930_8656_68576142a273["elementToSegments()"]
  05c5f3f8_ede4_70c3_1d8d_993fc45a2bad["elementToString()"]
  05c5f3f8_ede4_70c3_1d8d_993fc45a2bad -->|calls| e2a158d6_845c_6930_8656_68576142a273
  798a16d6_69b7_5315_0f50_948e7cbca09d["nodesToSegments()"]
  798a16d6_69b7_5315_0f50_948e7cbca09d -->|calls| e2a158d6_845c_6930_8656_68576142a273
  57deee28_aac6_0fbe_7eff_db2c78f58dbf["genFor()"]
  e2a158d6_845c_6930_8656_68576142a273 -->|calls| 57deee28_aac6_0fbe_7eff_db2c78f58dbf
  e458f6c9_a80f_c2c4_a63b_541be2a8b2b9["genIf()"]
  e2a158d6_845c_6930_8656_68576142a273 -->|calls| e458f6c9_a80f_c2c4_a63b_541be2a8b2b9
  a6f31758_a9cf_b7dc_09d6_0b57380360f7["childrenToSegments()"]
  e2a158d6_845c_6930_8656_68576142a273 -->|calls| a6f31758_a9cf_b7dc_09d6_0b57380360f7
  96d38cc7_62ee_04de_8f49_73340fb7f3ad["elementToOpenTagSegments()"]
  e2a158d6_845c_6930_8656_68576142a273 -->|calls| 96d38cc7_62ee_04de_8f49_73340fb7f3ad
  style e2a158d6_845c_6930_8656_68576142a273 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)
}