extract-props.ts — vue Source File

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

File typescript VueCore VDom 3 imports 2 functions

Entity Profile

VueCore→ VDom→ extract-props.ts — vue Source File

Dependency Diagram

graph LR
  07c6a400_8fa8_9740_e9a1_447f2eb41bbc["extract-props.ts"]
  90a2398a_1498_3263_c62e_0c064dd2c9b3["index"]
  07c6a400_8fa8_9740_e9a1_447f2eb41bbc --> 90a2398a_1498_3263_c62e_0c064dd2c9b3
  64c87498_c46a_6944_ab9d_8e45519852a8["component"]
  07c6a400_8fa8_9740_e9a1_447f2eb41bbc --> 64c87498_c46a_6944_ab9d_8e45519852a8
  ba925ef2_b0f4_efe3_c23d_fe293c46b2c1["vnode"]
  07c6a400_8fa8_9740_e9a1_447f2eb41bbc --> ba925ef2_b0f4_efe3_c23d_fe293c46b2c1
  style 07c6a400_8fa8_9740_e9a1_447f2eb41bbc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  tip,
  hasOwn,
  isDef,
  isUndef,
  hyphenate,
  formatComponentName
} from 'core/util/index'
import type { Component } from 'types/component'
import type { VNodeData } from 'types/vnode'

export function extractPropsFromVNodeData(
  data: VNodeData,
  Ctor: typeof Component,
  tag?: string
): object | undefined {
  // we are only extracting raw values here.
  // validation and default values are handled in the child
  // component itself.
  const propOptions = Ctor.options.props
  if (isUndef(propOptions)) {
    return
  }
  const res = {}
  const { attrs, props } = data
  if (isDef(attrs) || isDef(props)) {
    for (const key in propOptions) {
      const altKey = hyphenate(key)
      if (__DEV__) {
        const keyInLowerCase = key.toLowerCase()
        if (key !== keyInLowerCase && attrs && hasOwn(attrs, keyInLowerCase)) {
          tip(
            `Prop "${keyInLowerCase}" is passed to component ` +
              `${formatComponentName(
                // @ts-expect-error tag is string
                tag || Ctor
              )}, but the declared prop name is` +
              ` "${key}". ` +
              `Note that HTML attributes are case-insensitive and camelCased ` +
              `props need to use their kebab-case equivalents when using in-DOM ` +
              `templates. You should probably use "${altKey}" instead of "${key}".`
          )
        }
      }
      checkProp(res, props, key, altKey, true) ||
        checkProp(res, attrs, key, altKey, false)
    }
  }
  return res
}

function checkProp(
  res: Object,
  hash: Object | undefined,
  key: string,
  altKey: string,
  preserve: boolean
): boolean {
  if (isDef(hash)) {
    if (hasOwn(hash, key)) {
      res[key] = hash[key]
      if (!preserve) {
        delete hash[key]
      }
      return true
    } else if (hasOwn(hash, altKey)) {
      res[key] = hash[altKey]
      if (!preserve) {
        delete hash[altKey]
      }
      return true
    }
  }
  return false
}