genClassForVnode() — vue Function Reference

Architecture documentation for the genClassForVnode() function in class.ts from the vue codebase.

Function typescript WebPlatform WebCompiler calls 2

Entity Profile

WebPlatform→ WebCompiler→ genClassForVnode() — vue Function Reference

Dependency Diagram

graph TD
  862d7d20_377c_22d1_c3c3_62c1ec00293e["genClassForVnode()"]
  4ec31fd8_074b_a82e_4cf2_6c1ee53c2f70["class.ts"]
  862d7d20_377c_22d1_c3c3_62c1ec00293e -->|defined in| 4ec31fd8_074b_a82e_4cf2_6c1ee53c2f70
  e1e3d961_0eca_5647_2767_5df6c85b6dc8["mergeClassData()"]
  862d7d20_377c_22d1_c3c3_62c1ec00293e -->|calls| e1e3d961_0eca_5647_2767_5df6c85b6dc8
  d57d091b_23f1_228d_8b75_46ec54d0add1["renderClass()"]
  862d7d20_377c_22d1_c3c3_62c1ec00293e -->|calls| d57d091b_23f1_228d_8b75_46ec54d0add1
  style 862d7d20_377c_22d1_c3c3_62c1ec00293e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/util/class.ts lines 5–22

export function genClassForVnode(vnode: VNodeWithData): string {
  let data = vnode.data
  let parentNode: VNode | VNodeWithData | undefined = vnode
  let childNode: VNode | VNodeWithData = vnode
  while (isDef(childNode.componentInstance)) {
    childNode = childNode.componentInstance._vnode!
    if (childNode && childNode.data) {
      data = mergeClassData(childNode.data, data)
    }
  }
  // @ts-expect-error parentNode.parent not VNodeWithData
  while (isDef((parentNode = parentNode.parent))) {
    if (parentNode && parentNode.data) {
      data = mergeClassData(data, parentNode.data)
    }
  }
  return renderClass(data.staticClass!, data.class)
}