debug.ts — vue Source File
Architecture documentation for debug.ts, a typescript file in the vue codebase. 6 imports, 3 dependents.
Entity Profile
Dependency Diagram
graph LR c11cafd0_9de7_a29e_a7df_dc098f20ea24["debug.ts"] d22f3dff_cc24_705a_1193_eec206dcb1d5["config.ts"] c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> d22f3dff_cc24_705a_1193_eec206dcb1d5 a6875054_df8a_0ce4_8a16_374ce422dc53["create-component.ts"] c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> a6875054_df8a_0ce4_8a16_374ce422dc53 16abdeb5_17d6_b741_ca16_dfc41a7d0df5["getComponentName"] c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> 16abdeb5_17d6_b741_ca16_dfc41a7d0df5 156bf2e1_8a13_f22d_5437_54f14bcef8fa["util"] c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> 156bf2e1_8a13_f22d_5437_54f14bcef8fa 907f4994_ea28_43b1_7976_0db9f0e97637["component"] c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> 907f4994_ea28_43b1_7976_0db9f0e97637 5de22f6c_6406_d60a_f5e8_6b3e166124cc["currentInstance"] c11cafd0_9de7_a29e_a7df_dc098f20ea24 --> 5de22f6c_6406_d60a_f5e8_6b3e166124cc 34ce4c45_a0c3_08f3_7cbe_679778705432["error.ts"] 34ce4c45_a0c3_08f3_7cbe_679778705432 --> c11cafd0_9de7_a29e_a7df_dc098f20ea24 5c734a8f_efba_819c_28fc_f56bfd6b701f["options.ts"] 5c734a8f_efba_819c_28fc_f56bfd6b701f --> c11cafd0_9de7_a29e_a7df_dc098f20ea24 e8576a88_2e85_86ff_b2f9_bbbb6de70a51["props.ts"] e8576a88_2e85_86ff_b2f9_bbbb6de70a51 --> c11cafd0_9de7_a29e_a7df_dc098f20ea24 style c11cafd0_9de7_a29e_a7df_dc098f20ea24 fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Source Code
import config from '../config'
import { noop, isArray, isFunction } from 'shared/util'
import type { Component } from 'types/component'
import { currentInstance } from 'v3/currentInstance'
import { getComponentName } from '../vdom/create-component'
export let warn: (msg: string, vm?: Component | null) => void = noop
export let tip = noop
export let generateComponentTrace: (vm: Component) => string // work around flow check
export let formatComponentName: (vm: Component, includeFile?: false) => string
if (__DEV__) {
const hasConsole = typeof console !== 'undefined'
const classifyRE = /(?:^|[-_])(\w)/g
const classify = str =>
str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '')
warn = (msg, vm = currentInstance) => {
const trace = vm ? generateComponentTrace(vm) : ''
if (config.warnHandler) {
config.warnHandler.call(null, msg, vm, trace)
} else if (hasConsole && !config.silent) {
console.error(`[Vue warn]: ${msg}${trace}`)
}
}
tip = (msg, vm) => {
if (hasConsole && !config.silent) {
console.warn(`[Vue tip]: ${msg}` + (vm ? generateComponentTrace(vm) : ''))
}
}
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}` : '')
)
}
const repeat = (str, n) => {
let res = ''
while (n) {
if (n % 2 === 1) res += str
if (n > 1) str += str
n >>= 1
}
return res
}
generateComponentTrace = (vm: Component | undefined) => {
if ((vm as any)._isVue && vm!.$parent) {
const tree: any[] = []
let currentRecursiveSequence = 0
while (vm) {
if (tree.length > 0) {
const last = tree[tree.length - 1]
if (last.constructor === vm.constructor) {
currentRecursiveSequence++
vm = vm.$parent!
continue
} else if (currentRecursiveSequence > 0) {
tree[tree.length - 1] = [last, currentRecursiveSequence]
currentRecursiveSequence = 0
}
}
tree.push(vm)
vm = vm.$parent!
}
return (
'\n\nfound in\n\n' +
tree
.map(
(vm, i) =>
`${i === 0 ? '---> ' : repeat(' ', 5 + i * 2)}${
isArray(vm)
? `${formatComponentName(vm[0])}... (${
vm[1]
} recursive calls)`
: formatComponentName(vm)
}`
)
.join('\n')
)
} else {
return `\n\n(found in ${formatComponentName(vm!)})`
}
}
}
Domain
Subdomains
Dependencies
- component
- config.ts
- create-component.ts
- currentInstance
- getComponentName
- util
Source
Frequently Asked Questions
What does debug.ts do?
debug.ts is a source file in the vue codebase, written in typescript. It belongs to the CompilerSFC domain, StyleProcessor subdomain.
What functions are defined in debug.ts?
debug.ts defines 8 function(s): classify, formatComponentName, generateComponentTrace, msg, repeat, tip, vm, warn.
What does debug.ts depend on?
debug.ts imports 6 module(s): component, config.ts, create-component.ts, currentInstance, getComponentName, util.
What files import debug.ts?
debug.ts is imported by 3 file(s): error.ts, options.ts, props.ts.
Where is debug.ts in the architecture?
debug.ts is located at src/core/util/debug.ts (domain: CompilerSFC, subdomain: StyleProcessor, directory: src/core/util).
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free