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 CoreRuntime Observer 3 imports 2 functions

Entity Profile

CoreRuntime→ Observer→ extract-props.ts — vue Source File

Dependency Diagram

graph LR
  88a87f42_1e30_d56d_fbd3_9595081aa349["extract-props.ts"]
  02e43f4a_da65_7acd_5a98_0f017554a159["index"]
  88a87f42_1e30_d56d_fbd3_9595081aa349 --> 02e43f4a_da65_7acd_5a98_0f017554a159
  907f4994_ea28_43b1_7976_0db9f0e97637["component"]
  88a87f42_1e30_d56d_fbd3_9595081aa349 --> 907f4994_ea28_43b1_7976_0db9f0e97637
  81ed4f13_7d68_6e21_7425_cf978f68576f["vnode"]
  88a87f42_1e30_d56d_fbd3_9595081aa349 --> 81ed4f13_7d68_6e21_7425_cf978f68576f
  style 88a87f42_1e30_d56d_fbd3_9595081aa349 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
}