vue3-yuanma/packages/runtime-core/src/warning.ts

import { VNode } from './vnode'
import { Data, ComponentInternalInstance, Component } from './component'
import { isString, isFunction } from '@vue/shared'
import { toRaw } from '@vue/reactivity'
import { callWithErrorHandling, ErrorCodes } from './errorHandling'

type ComponentVNode = VNode & {
  type: Component
}

const stack: VNode[] = []

type TraceEntry = {
  vnode: ComponentVNode
  recurseCount: number
}

type ComponentTraceStack = TraceEntry[]

export function pushWarningContext(vnode: ComponentVNode) {
  stack.push(vnode)
}

export function popWarningContext() {
  stack.pop()
}

export function warn(msg: string, ...args: any[]) {
  const instance = stack.length ? stack[stack.length - 1].component : null
  const appWarnHandler = instance && instance.appContext.config.warnHandler
  const trace = getComponentTrace()

  if (appWarnHandler) {
    callWithErrorHandling(
      appWarnHandler,
      instance,
      ErrorCodes.APP_WARN_HANDLER,
      [
        msg + args.join(''),
        instance && instance.renderProxy,
        formatTrace(trace).join('')
      ]
    )
    return
  }

  console.warn(`[Vue warn]: ${msg}`, ...args)
  // avoid spamming console during tests
  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'test') {
    return
  }
  if (!trace.length) {
    return
  }
  if (trace.length > 1 && console.groupCollapsed) {
    console.groupCollapsed('at', ...formatTraceEntry(trace[0]))
    const logs: string[] = []
    trace.slice(1).forEach((entry, i) => {
      if (i !== 0) logs.push('\n')
      logs.push(...formatTraceEntry(entry, i + 1))
    })
    console.log(...logs)
    console.groupEnd()
  } else {
    console.log(...formatTrace(trace))
  }
}

function getComponentTrace(): ComponentTraceStack {
  let currentVNode: VNode | null = stack[stack.length - 1]
  if (!currentVNode) {
    return []
  }

  // we can't just use the stack because it will be incomplete during updates
  // that did not start from the root. Re-construct the parent chain using
  // instance parent pointers.
  const normalizedStack: ComponentTraceStack = []

  while (currentVNode) {
    const last = normalizedStack[0]
    if (last && last.vnode === currentVNode) {
      last.recurseCount++
    } else {
      normalizedStack.push({
        vnode: currentVNode,
        recurseCount: 0
      })
    }
    const parentInstance: ComponentInternalInstance | null = currentVNode.component!
      .parent
    currentVNode = parentInstance && parentInstance.vnode
  }

  return normalizedStack
}

function formatTrace(trace: ComponentTraceStack): string[] {
  const logs: string[] = []
  trace.forEach((entry, i) => {
    const formatted = formatTraceEntry(entry, i)
    if (i === 0) {
      logs.push('at', ...formatted)
    } else {
      logs.push('\n', ...formatted)
    }
  })
  return logs
}

function formatTraceEntry(
  { vnode, recurseCount }: TraceEntry,
  depth: number = 0
): string[] {
  const padding = depth === 0 ? '' : ' '.repeat(depth * 2 + 1)
  const postfix =
    recurseCount > 0 ? `... (${recurseCount} recursive calls)` : ``
  const open = padding + `<${formatComponentName(vnode)}`
  const close = `>` + postfix
  const rootLabel = vnode.component!.parent == null ? `(Root)` : ``
  return vnode.props
    ? [open, ...formatProps(vnode.props), close, rootLabel]
    : [open + close, rootLabel]
}

const classifyRE = /(?:^|[-_])(\w)/g
const classify = (str: string): string =>
  str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '')

function formatComponentName(vnode: ComponentVNode, file?: string): string {
  const Component = vnode.type
  let name = isFunction(Component) ? Component.displayName : Component.name
  if (!name && file) {
    const match = file.match(/([^/\\]+)\.vue$/)
    if (match) {
      name = match[1]
    }
  }
  return name ? classify(name) : 'AnonymousComponent'
}

function formatProps(props: Data): string[] {
  const res: string[] = []
  for (const key in props) {
    const value = props[key]
    if (isString(value)) {
      res.push(`${key}=${JSON.stringify(value)}`)
    } else {
      res.push(`${key}=`, String(toRaw(value)))
    }
  }
  return res
}