createFunctionalComponent() — vue Function Reference

Architecture documentation for the createFunctionalComponent() function in create-functional-component.ts from the vue codebase.

Function typescript CoreRuntime Instance calls 4 called by 1

Entity Profile

CoreRuntime→ Instance→ createFunctionalComponent() — vue Function Reference

Dependency Diagram

graph TD
  b0612485_d1af_0118_4a95_5689631b7d51["createFunctionalComponent()"]
  dfa00dc1_b5e1_fc4b_364c_221e22660e03["create-functional-component.ts"]
  b0612485_d1af_0118_4a95_5689631b7d51 -->|defined in| dfa00dc1_b5e1_fc4b_364c_221e22660e03
  cd4ab087_1a92_967b_8b0c_652f9562b5f0["createComponent()"]
  cd4ab087_1a92_967b_8b0c_652f9562b5f0 -->|calls| b0612485_d1af_0118_4a95_5689631b7d51
  d72e5c74_bb90_93a5_bb02_a790e256f08b["mergeProps()"]
  b0612485_d1af_0118_4a95_5689631b7d51 -->|calls| d72e5c74_bb90_93a5_bb02_a790e256f08b
  c5286b65_3542_0b12_cbd4_8f0583f72f9a["FunctionalRenderContext()"]
  b0612485_d1af_0118_4a95_5689631b7d51 -->|calls| c5286b65_3542_0b12_cbd4_8f0583f72f9a
  b544ca61_e1c2_e830_f964_cf6ac68bfd04["cloneAndMarkFunctionalResult()"]
  b0612485_d1af_0118_4a95_5689631b7d51 -->|calls| b544ca61_e1c2_e830_f964_cf6ac68bfd04
  525c172b_db5f_072d_3b30_fb5ba93487bb["normalizeChildren()"]
  b0612485_d1af_0118_4a95_5689631b7d51 -->|calls| 525c172b_db5f_072d_3b30_fb5ba93487bb
  style b0612485_d1af_0118_4a95_5689631b7d51 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/vdom/create-functional-component.ts lines 100–151

export function createFunctionalComponent(
  Ctor: typeof Component,
  propsData: Object | undefined,
  data: VNodeData,
  contextVm: Component,
  children?: Array<VNode>
): VNode | Array<VNode> | void {
  const options = Ctor.options
  const props = {}
  const propOptions = options.props
  if (isDef(propOptions)) {
    for (const key in propOptions) {
      props[key] = validateProp(key, propOptions, propsData || emptyObject)
    }
  } else {
    if (isDef(data.attrs)) mergeProps(props, data.attrs)
    if (isDef(data.props)) mergeProps(props, data.props)
  }

  const renderContext = new FunctionalRenderContext(
    data,
    props,
    children,
    contextVm,
    Ctor
  )

  const vnode = options.render.call(null, renderContext._c, renderContext)

  if (vnode instanceof VNode) {
    return cloneAndMarkFunctionalResult(
      vnode,
      data,
      renderContext.parent,
      options,
      renderContext
    )
  } else if (isArray(vnode)) {
    const vnodes = normalizeChildren(vnode) || []
    const res = new Array(vnodes.length)
    for (let i = 0; i < vnodes.length; i++) {
      res[i] = cloneAndMarkFunctionalResult(
        vnodes[i],
        data,
        renderContext.parent,
        options,
        renderContext
      )
    }
    return res
  }
}