Home / File/ class.ts — vue Source File

class.ts — vue Source File

Architecture documentation for class.ts, a typescript file in the vue codebase. 3 imports, 0 dependents.

File typescript VueCore VDom 3 imports 7 functions

Entity Profile

Dependency Diagram

graph LR
  7d865290_63ef_852b_c606_147816b9dc05["class.ts"]
  973389ac_8625_30a3_53ce_b1b48fae58c5["vnode"]
  7d865290_63ef_852b_c606_147816b9dc05 --> 973389ac_8625_30a3_53ce_b1b48fae58c5
  09aa5370_2caa_6b33_3f44_6ac5211bd11b["util"]
  7d865290_63ef_852b_c606_147816b9dc05 --> 09aa5370_2caa_6b33_3f44_6ac5211bd11b
  ba925ef2_b0f4_efe3_c23d_fe293c46b2c1["vnode"]
  7d865290_63ef_852b_c606_147816b9dc05 --> ba925ef2_b0f4_efe3_c23d_fe293c46b2c1
  style 7d865290_63ef_852b_c606_147816b9dc05 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import VNode from 'core/vdom/vnode'
import { isDef, isObject } from 'shared/util'
import type { VNodeData, VNodeWithData } from 'types/vnode'

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)
}

function mergeClassData(
  child: VNodeData,
  parent: VNodeData
): {
  staticClass: string
  class: any
} {
  return {
    staticClass: concat(child.staticClass, parent.staticClass),
    class: isDef(child.class) ? [child.class, parent.class] : parent.class
  }
}

export function renderClass(
  staticClass: string | null | undefined,
  dynamicClass: any
): string {
  if (isDef(staticClass) || isDef(dynamicClass)) {
    return concat(staticClass, stringifyClass(dynamicClass))
  }
  /* istanbul ignore next */
  return ''
}

export function concat(a?: string | null, b?: string | null): string {
  return a ? (b ? a + ' ' + b : a) : b || ''
}

export function stringifyClass(value: any): string {
  if (Array.isArray(value)) {
    return stringifyArray(value)
  }
  if (isObject(value)) {
    return stringifyObject(value)
  }
  if (typeof value === 'string') {
    return value
  }
  /* istanbul ignore next */
  return ''
}

function stringifyArray(value: Array<any>): string {
  let res = ''
  let stringified
  for (let i = 0, l = value.length; i < l; i++) {
    if (isDef((stringified = stringifyClass(value[i]))) && stringified !== '') {
      if (res) res += ' '
      res += stringified
    }
  }
  return res
}

function stringifyObject(value: Object): string {
  let res = ''
  for (const key in value) {
    if (value[key]) {
      if (res) res += ' '
      res += key
    }
  }
  return res
}

Domain

Subdomains

Dependencies

  • util
  • vnode
  • vnode

Frequently Asked Questions

What does class.ts do?
class.ts is a source file in the vue codebase, written in typescript. It belongs to the VueCore domain, VDom subdomain.
What functions are defined in class.ts?
class.ts defines 7 function(s): concat, genClassForVnode, mergeClassData, renderClass, stringifyArray, stringifyClass, stringifyObject.
What does class.ts depend on?
class.ts imports 3 module(s): util, vnode, vnode.
Where is class.ts in the architecture?
class.ts is located at src/platforms/web/util/class.ts (domain: VueCore, subdomain: VDom, directory: src/platforms/web/util).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free