vue3-yuanma/packages/core/src/h.ts

import { ChildrenFlags } from './flags'
import {
  ComponentClass,
  FunctionalComponent,
  Component,
  ComponentInstance
} from './component'
import { ComponentOptions } from './componentOptions'
import {
  VNode,
  createElementVNode,
  createComponentVNode,
  createTextVNode,
  createFragment,
  createPortal,
  VNodeData,
  BuiltInProps
} from './vdom'
import { isObservable } from '@vue/observer'
import { warn } from './warning'

export const Fragment = Symbol()
export const Portal = Symbol()

export type ElementType =
  | string
  | FunctionalComponent
  | ComponentClass
  | ComponentOptions
  | typeof Fragment
  | typeof Portal

type RawChildType = VNode | string | number | boolean | null | undefined

export type RawChildrenType = RawChildType | RawChildType[]

interface VNodeFactories {
  c: typeof createComponentVNode
  e: typeof createElementVNode
  t: typeof createTextVNode
  f: typeof createFragment
  p: typeof createPortal
}

interface createElement {
  // element
  (tag: string, data?: VNodeData, children?: any): VNode
  // functional
  <P>(
    tag: FunctionalComponent<P>,
    data?: P & BuiltInProps | null,
    children?: any
  ): VNode
  // stateful
  <P, T extends ComponentInstance<P>>(
    tag: new () => T & { $props: P },
    data?: P & BuiltInProps | null,
    children?: any
  ): VNode
}

export const h = ((tag: ElementType, data?: any, children?: any): VNode => {
  if (
    Array.isArray(data) ||
    (data != null && (typeof data !== 'object' || data._isVNode))
  ) {
    children = data
    data = null
  }

  if (data === void 0) data = null
  if (children === void 0) children = null

  // if value is observable, create a clone of original
  // so that we can normalize its class/style
  if (isObservable(data)) {
    data = Object.assign({}, data)
  }

  let key = null
  let ref = null
  let portalTarget = null
  if (data != null) {
    if (data.slots != null) {
      children = data.slots
    }
    if (data.key != null) {
      ;({ key } = data)
    }
    if (data.ref != null) {
      ;({ ref } = data)
    }
    if (data.target != null) {
      portalTarget = data.target
    }
  }

  if (typeof tag === 'string') {
    // element
    return createElementVNode(
      tag,
      data,
      children,
      ChildrenFlags.UNKNOWN_CHILDREN,
      key,
      ref
    )
  } else if (tag === Fragment) {
    if (__DEV__ && ref) {
      warn('Ref cannot be used on Fragments. Use it on inner elements instead.')
    }
    return createFragment(children, ChildrenFlags.UNKNOWN_CHILDREN, key)
  } else if (tag === Portal) {
    if (__DEV__ && !portalTarget) {
      warn('Portal must have a target: ', portalTarget)
    }
    return createPortal(
      portalTarget,
      children,
      ChildrenFlags.UNKNOWN_CHILDREN,
      key,
      ref
    )
  } else {
    if (
      __DEV__ &&
      (!tag || (typeof tag !== 'function' && typeof tag !== 'object'))
    ) {
      warn('Invalid component passed to h(): ', tag)
    }
    // component
    return createComponentVNode(
      tag,
      data,
      children,
      ChildrenFlags.UNKNOWN_CHILDREN,
      key,
      ref
    )
  }
}) as createElement & VNodeFactories

h.c = createComponentVNode
h.e = createElementVNode
h.t = createTextVNode
h.f = createFragment
h.p = createPortal