formatComponentName() — vue Function Reference

Architecture documentation for the formatComponentName() function in debug.ts from the vue codebase.

Function typescript CompilerSFC ScriptAnalyzer calls 2 called by 1

Entity Profile

CompilerSFC→ ScriptAnalyzer→ formatComponentName() — vue Function Reference

Dependency Diagram

graph TD
  7f3d1638_c54f_1ec3_6cde_bbd758e2eae6["formatComponentName()"]
  c11cafd0_9de7_a29e_a7df_dc098f20ea24["debug.ts"]
  7f3d1638_c54f_1ec3_6cde_bbd758e2eae6 -->|defined in| c11cafd0_9de7_a29e_a7df_dc098f20ea24
  7536cd2f_8916_5580_2b8c_ac504f1598e9["generateComponentTrace()"]
  7536cd2f_8916_5580_2b8c_ac504f1598e9 -->|calls| 7f3d1638_c54f_1ec3_6cde_bbd758e2eae6
  16abdeb5_17d6_b741_ca16_dfc41a7d0df5["getComponentName()"]
  7f3d1638_c54f_1ec3_6cde_bbd758e2eae6 -->|calls| 16abdeb5_17d6_b741_ca16_dfc41a7d0df5
  b9afaf14_08a1_ea84_1c21_a34a23f9ac29["classify()"]
  7f3d1638_c54f_1ec3_6cde_bbd758e2eae6 -->|calls| b9afaf14_08a1_ea84_1c21_a34a23f9ac29
  style 7f3d1638_c54f_1ec3_6cde_bbd758e2eae6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/util/debug.ts lines 34–55

  formatComponentName = (vm, includeFile) => {
    if (vm.$root === vm) {
      return '<Root>'
    }
    const options =
      isFunction(vm) && (vm as any).cid != null
        ? (vm as any).options
        : vm._isVue
        ? vm.$options || (vm.constructor as any).options
        : vm
    let name = getComponentName(options)
    const file = options.__file
    if (!name && file) {
      const match = file.match(/([^/\\]+)\.vue$/)
      name = match && match[1]
    }

    return (
      (name ? `<${classify(name)}>` : `<Anonymous>`) +
      (file && includeFile !== false ? ` at ${file}` : '')
    )
  }