types: refactor VNodeProps type

This commit is contained in:
Evan You 2019-11-01 09:58:27 -04:00
parent 28895b8817
commit 06c5b0a861
4 changed files with 17 additions and 23 deletions

View File

@ -9,13 +9,7 @@ import { SetupContext, RenderFunction } from './component'
import { ComponentPublicInstance } from './componentProxy' import { ComponentPublicInstance } from './componentProxy'
import { ExtractPropTypes } from './componentProps' import { ExtractPropTypes } from './componentProps'
import { isFunction } from '@vue/shared' import { isFunction } from '@vue/shared'
import { Ref } from '@vue/reactivity' import { VNodeProps } from './vnode'
interface BaseProps {
[key: string]: any
key?: string | number
ref?: string | Ref | Function
}
// overload 1: direct setup function // overload 1: direct setup function
// (uses user defined props interface) // (uses user defined props interface)
@ -32,7 +26,7 @@ export function createComponent<Props, RawBindings = object>(
{}, {},
{}, {},
// public props // public props
BaseProps & Props VNodeProps & Props
> >
} }
@ -55,7 +49,7 @@ export function createComponent<
D, D,
C, C,
M, M,
BaseProps & Props VNodeProps & Props
> >
} }
@ -73,7 +67,7 @@ export function createComponent<
): { ): {
__isConstructor: true __isConstructor: true
// array props technically doesn't place any contraints on props in TSX // array props technically doesn't place any contraints on props in TSX
new (): ComponentPublicInstance<BaseProps, RawBindings, D, C, M> new (): ComponentPublicInstance<VNodeProps, RawBindings, D, C, M>
} }
// overload 4: object format with object props declaration // overload 4: object format with object props declaration
@ -95,7 +89,7 @@ export function createComponent<
D, D,
C, C,
M, M,
BaseProps & ExtractPropTypes<PropsOptions, false> VNodeProps & ExtractPropTypes<PropsOptions, false>
> >
} }

View File

@ -1,6 +1,7 @@
import { import {
VNodeTypes, VNodeTypes,
VNode, VNode,
VNodeProps,
createVNode, createVNode,
VNodeChildren, VNodeChildren,
Fragment, Fragment,
@ -9,7 +10,6 @@ import {
Suspense Suspense
} from './vnode' } from './vnode'
import { isObject, isArray } from '@vue/shared' import { isObject, isArray } from '@vue/shared'
import { Ref } from '@vue/reactivity'
import { RawSlots } from './componentSlots' import { RawSlots } from './componentSlots'
import { FunctionalComponent } from './component' import { FunctionalComponent } from './component'
import { import {
@ -51,17 +51,14 @@ h(Component, {}, {}) // named slots
h(Component, null, {}) h(Component, null, {})
**/ **/
export interface RawProps { type RawProps = VNodeProps & {
[key: string]: any
key?: string | number
ref?: string | Ref | Function
// used to differ from a single VNode object as children // used to differ from a single VNode object as children
_isVNode?: never _isVNode?: never
// used to differ from Array children // used to differ from Array children
[Symbol.iterator]?: never [Symbol.iterator]?: never
} }
export type RawChildren = type RawChildren =
| string | string
| number | number
| boolean | boolean
@ -69,8 +66,6 @@ export type RawChildren =
| VNodeChildren | VNodeChildren
| (() => any) | (() => any)
export { RawSlots }
// fake constructor type returned from `createComponent` // fake constructor type returned from `createComponent`
interface Constructor<P = any> { interface Constructor<P = any> {
new (): { $props: P } new (): { $props: P }

View File

@ -60,8 +60,7 @@ export { registerRuntimeCompiler } from './component'
// Types ----------------------------------------------------------------------- // Types -----------------------------------------------------------------------
export { App, AppConfig, AppContext, Plugin } from './apiApp' export { App, AppConfig, AppContext, Plugin } from './apiApp'
export { RawProps, RawChildren, RawSlots } from './h' export { VNode, VNodeTypes, VNodeProps } from './vnode'
export { VNode, VNodeTypes } from './vnode'
export { export {
Component, Component,
FunctionalComponent, FunctionalComponent,

View File

@ -14,7 +14,7 @@ import {
} from './component' } from './component'
import { RawSlots } from './componentSlots' import { RawSlots } from './componentSlots'
import { ShapeFlags } from './shapeFlags' import { ShapeFlags } from './shapeFlags'
import { isReactive } from '@vue/reactivity' import { isReactive, Ref } from '@vue/reactivity'
import { AppContext } from './apiApp' import { AppContext } from './apiApp'
import { SuspenseBoundary, isSuspenseType } from './suspense' import { SuspenseBoundary, isSuspenseType } from './suspense'
import { DirectiveBinding } from './directives' import { DirectiveBinding } from './directives'
@ -39,6 +39,12 @@ export type VNodeTypes =
| typeof Comment | typeof Comment
| typeof SuspenseImpl | typeof SuspenseImpl
export interface VNodeProps {
[key: string]: any
key?: string | number
ref?: string | Ref | Function
}
type VNodeChildAtom<HostNode, HostElement> = type VNodeChildAtom<HostNode, HostElement> =
| VNode<HostNode, HostElement> | VNode<HostNode, HostElement>
| string | string
@ -66,7 +72,7 @@ export type NormalizedChildren<HostNode = any, HostElement = any> =
export interface VNode<HostNode = any, HostElement = any> { export interface VNode<HostNode = any, HostElement = any> {
_isVNode: true _isVNode: true
type: VNodeTypes type: VNodeTypes
props: Record<any, any> | null props: VNodeProps | null
key: string | number | null key: string | number | null
ref: string | Function | null ref: string | Function | null
children: NormalizedChildren<HostNode, HostElement> children: NormalizedChildren<HostNode, HostElement>