theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

types: use stricter HostNode typings

Browse Source
This commit is contained in:
Evan You
2019-09-06 16:58:32 -04:00
parent 360f3b4f37
commit 3904678306
12 changed files with 228 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/runtime-core/src/apiApp.ts
View File

@@ -2,13 +2,13 @@ import { Component, Data, ComponentInternalInstance } from './component'
import { ComponentOptions } from './componentOptions'
import { ComponentPublicInstance } from './componentPublicInstanceProxy'
import { Directive } from './directives'
import { HostNode, RootRenderFunction } from './createRenderer'
import { RootRenderFunction } from './createRenderer'
import { InjectionKey } from './apiInject'
import { isFunction } from '@vue/shared'
import { warn } from './warning'
import { createVNode } from './vnode'
export interface App {
export interface App<HostElement = any> {
config: AppConfig
use(plugin: Plugin, options?: any): this
mixin(mixin: ComponentOptions): this
@@ -18,7 +18,7 @@ export interface App {
directive(name: string, directive: Directive): this
mount(
rootComponent: Component,
rootContainer: string | HostNode,
rootContainer: HostElement,
rootProps?: Data
): ComponentPublicInstance
provide<T>(key: InjectionKey<T> | string, value: T): void
@@ -70,7 +70,9 @@ export function createAppContext(): AppContext {
}
}
export function createAppAPI(render: RootRenderFunction): () => App {
export function createAppAPI<HostNode, HostElement>(
render: RootRenderFunction<HostNode, HostElement>
): () => App<HostElement> {
return function createApp(): App {
const context = createAppContext()
@@ -128,7 +130,11 @@ export function createAppAPI(render: RootRenderFunction): () => App {
}
},
mount(rootComponent, rootContainer, rootProps?: Data): any {
mount(
rootComponent: Component,
rootContainer: string | HostElement,
rootProps?: Data
): any {
if (!isMounted) {
const vnode = createVNode(rootComponent, rootProps)
// store app context on the root VNode.

293
packages/runtime-core/src/createRenderer.ts
View File

@@ -38,6 +38,8 @@ import { PatchFlags } from './patchFlags'
import { ShapeFlags } from './shapeFlags'
import { pushWarningContext, popWarningContext, warn } from './warning'
import { invokeDirectiveHook } from './directives'
import { ComponentPublicInstance } from './componentPublicInstanceProxy'
import { App, createAppAPI } from './apiApp'
const prodEffectOptions = {
scheduler: queueJob
@@ -67,40 +69,64 @@ function invokeHooks(hooks: Function[], arg?: any) {
}
}
export type HostNode = any
export interface RendererOptions {
export interface RendererOptions<HostNode = any, HostElement = any> {
patchProp(
el: HostNode,
el: HostElement,
key: string,
value: any,
oldValue: any,
isSVG: boolean,
prevChildren?: VNode[],
prevChildren?: VNode<HostNode, HostElement>[],
parentComponent?: ComponentInternalInstance | null,
unmountChildren?: (
children: VNode[],
children: VNode<HostNode, HostElement>[],
parentComponent: ComponentInternalInstance | null
) => void
): void
insert(el: HostNode, parent: HostNode, anchor?: HostNode): void
insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
remove(el: HostNode): void
createElement(type: string, isSVG?: boolean): HostNode
createElement(type: string, isSVG?: boolean): HostElement
createText(text: string): HostNode
createComment(text: string): HostNode
setText(node: HostNode, text: string): void
setElementText(node: HostNode, text: string): void
setElementText(node: HostElement, text: string): void
parentNode(node: HostNode): HostNode | null
nextSibling(node: HostNode): HostNode | null
querySelector(selector: string): HostNode | null
querySelector(selector: string): HostElement | null
}
export type RootRenderFunction = (
vnode: VNode | null,
dom: HostNode | string
export type RootRenderFunction<HostNode, HostElement> = (
vnode: VNode<HostNode, HostElement> | null,
dom: HostElement | string
) => void
export function createRenderer(options: RendererOptions): RootRenderFunction {
/**
* The createRenderer function accepts two generic arguments:
* HostNode and HostElement, corresponding to Node and Element types in the
* host environment. For example, for runtime-dom, HostNode would be the DOM
* `Node` interface and HostElement would be the DOM `Element` interface.
*
* Custom renderers can pass in the platform specific types like this:
*
* ``` js
* const { render, createApp } = createRenderer<Node, Element>({
* patchProp,
* ...nodeOps
* })
* ```
*/
export function createRenderer<
HostNode extends object = any,
HostElement extends HostNode = any
>(
options: RendererOptions<HostNode, HostElement>
): {
render: RootRenderFunction<HostNode, HostElement>
createApp: () => App<HostElement>
} {
type HostVNode = VNode<HostNode, HostElement>
type HostVNodeChildren = VNodeChildren<HostNode, HostElement>
const {
insert: hostInsert,
remove: hostRemove,
@@ -116,10 +142,10 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
} = options
function patch(
n1: VNode | null, // null means this is a mount
n2: VNode,
container: HostNode,
anchor: HostNode = null,
n1: HostVNode | null, // null means this is a mount
n2: HostVNode,
container: HostElement,
anchor: HostNode | null = null,
parentComponent: ComponentInternalInstance | null = null,
isSVG: boolean = false,
optimized: boolean = false
@@ -183,16 +209,16 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
optimized
)
} else if (__DEV__) {
warn('Invalid VNode type:', n2.type, `(${typeof n2.type})`)
warn('Invalid HostVNode type:', n2.type, `(${typeof n2.type})`)
}
}
}
function processText(
n1: VNode | null,
n2: VNode,
container: HostNode,
anchor: HostNode
n1: HostVNode | null,
n2: HostVNode,
container: HostElement,
anchor: HostNode | null
) {
if (n1 == null) {
hostInsert(
@@ -201,7 +227,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
anchor
)
} else {
const el = (n2.el = n1.el)
const el = (n2.el = n1.el) as HostNode
if (n2.children !== n1.children) {
hostSetText(el, n2.children as string)
}
@@ -209,10 +235,10 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function processEmptyNode(
n1: VNode | null,
n2: VNode,
container: HostNode,
anchor: HostNode
n1: HostVNode | null,
n2: HostVNode,
container: HostElement,
anchor: HostNode | null
) {
if (n1 == null) {
hostInsert((n2.el = hostCreateComment('')), container, anchor)
@@ -222,10 +248,10 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function processElement(
n1: VNode | null,
n2: VNode,
container: HostNode,
anchor: HostNode,
n1: HostVNode | null,
n2: HostVNode,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean
@@ -241,9 +267,9 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function mountElement(
vnode: VNode,
container: HostNode,
anchor: HostNode,
vnode: HostVNode,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean
) {
@@ -264,7 +290,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
hostSetElementText(el, vnode.children as string)
} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
mountChildren(
vnode.children as VNodeChildren,
vnode.children as HostVNodeChildren,
el,
null,
parentComponent,
@@ -280,9 +306,9 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function mountChildren(
children: VNodeChildren,
container: HostNode,
anchor: HostNode,
children: HostVNodeChildren,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
start: number = 0
@@ -294,13 +320,13 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function patchElement(
n1: VNode,
n2: VNode,
n1: HostVNode,
n2: HostVNode,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean
) {
const el = (n2.el = n1.el)
const el = (n2.el = n1.el) as HostElement
const { patchFlag, dynamicChildren } = n2
const oldProps = (n1 && n1.props) || EMPTY_OBJ
const newProps = n2.props || EMPTY_OBJ
@@ -353,7 +379,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
next,
prev,
isSVG,
n1.children as VNode[],
n1.children as HostVNode[],
parentComponent,
unmountChildren
)
@@ -378,7 +404,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
if (dynamicChildren != null) {
// children fast path
const olddynamicChildren = n1.dynamicChildren as VNode[]
const olddynamicChildren = n1.dynamicChildren as HostVNode[]
for (let i = 0; i < dynamicChildren.length; i++) {
patch(
olddynamicChildren[i],
@@ -403,8 +429,8 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function patchProps(
el: HostNode,
vnode: VNode,
el: HostElement,
vnode: HostVNode,
oldProps: any,
newProps: any,
parentComponent: ComponentInternalInstance | null,
@@ -422,7 +448,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
next,
prev,
isSVG,
vnode.children as VNode[],
vnode.children as HostVNode[],
parentComponent,
unmountChildren
)
@@ -438,7 +464,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
null,
null,
isSVG,
vnode.children as VNode[],
vnode.children as HostVNode[],
parentComponent,
unmountChildren
)
@@ -449,24 +475,26 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function processFragment(
n1: VNode | null,
n2: VNode,
container: HostNode,
anchor: HostNode,
n1: HostVNode | null,
n2: HostVNode,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean
) {
const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateComment(''))
const fragmentStartAnchor = (n2.el = n1
? n1.el
: hostCreateComment('')) as HostNode
const fragmentEndAnchor = (n2.anchor = n1
? n1.anchor
: hostCreateComment(''))
: hostCreateComment('')) as HostNode
if (n1 == null) {
hostInsert(fragmentStartAnchor, container, anchor)
hostInsert(fragmentEndAnchor, container, anchor)
// a fragment can only have array children
mountChildren(
n2.children as VNodeChildren,
n2.children as HostVNodeChildren,
container,
fragmentEndAnchor,
parentComponent,
@@ -486,10 +514,10 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function processPortal(
n1: VNode | null,
n2: VNode,
container: HostNode,
anchor: HostNode,
n1: HostVNode | null,
n2: HostVNode,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean
@@ -505,7 +533,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
hostSetElementText(target, children as string)
} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
mountChildren(
children as VNodeChildren,
children as HostVNodeChildren,
target,
null,
parentComponent,
@@ -517,7 +545,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
} else {
// update content
const target = (n2.target = n1.target)
const target = (n2.target = n1.target) as HostElement
if (patchFlag === PatchFlags.TEXT) {
hostSetElementText(target, children as string)
} else if (!optimized) {
@@ -534,8 +562,8 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
hostSetElementText(target, '')
hostSetElementText(nextTarget, children as string)
} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
for (let i = 0; i < (children as VNode[]).length; i++) {
move((children as VNode[])[i], nextTarget, null)
for (let i = 0; i < (children as HostVNode[]).length; i++) {
move((children as HostVNode[])[i], nextTarget, null)
}
}
} else if (__DEV__) {
@@ -548,10 +576,10 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function processComponent(
n1: VNode | null,
n2: VNode,
container: HostNode,
anchor: HostNode,
n1: HostVNode | null,
n2: HostVNode,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean
@@ -580,9 +608,9 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function mountComponent(
initialVNode: VNode,
container: HostNode,
anchor: HostNode,
initialVNode: HostVNode,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean
) {
@@ -624,7 +652,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
} else {
// updateComponent
// This is triggered by mutation of component's own state (next: null)
// OR parent calling processComponent (next: VNode)
// OR parent calling processComponent (next: HostVNode)
const { next } = instance
if (__DEV__) {
@@ -654,7 +682,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
prevTree,
nextTree,
// parent may have changed if it's in a portal
hostParentNode(prevTree.el),
hostParentNode(prevTree.el as HostNode) as HostElement,
// anchor may have changed if it's in a fragment
getNextHostNode(prevTree),
instance,
@@ -689,10 +717,10 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function patchChildren(
n1: VNode | null,
n2: VNode,
container: HostNode,
anchor: HostNode,
n1: HostVNode | null,
n2: HostVNode,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean = false
@@ -708,8 +736,8 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
// this could be either fully-keyed or mixed (some keyed some not)
// presence of patchFlag means children are guaranteed to be arrays
patchKeyedChildren(
c1 as VNode[],
c2 as VNodeChildren,
c1 as HostVNode[],
c2 as HostVNodeChildren,
container,
anchor,
parentComponent,
@@ -720,8 +748,8 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
} else if (patchFlag & PatchFlags.UNKEYED) {
// unkeyed
patchUnkeyedChildren(
c1 as VNode[],
c2 as VNodeChildren,
c1 as HostVNode[],
c2 as HostVNodeChildren,
container,
anchor,
parentComponent,
@@ -735,7 +763,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
// text children fast path
if (prevShapeFlag & ShapeFlags.ARRAY_CHILDREN) {
unmountChildren(c1 as VNode[], parentComponent)
unmountChildren(c1 as HostVNode[], parentComponent)
}
if (c2 !== c1) {
hostSetElementText(container, c2 as string)
@@ -745,7 +773,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
hostSetElementText(container, '')
if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
mountChildren(
c2 as VNodeChildren,
c2 as HostVNodeChildren,
container,
anchor,
parentComponent,
@@ -756,8 +784,8 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
// two arrays, cannot assume anything, do full diff
patchKeyedChildren(
c1 as VNode[],
c2 as VNodeChildren,
c1 as HostVNode[],
c2 as HostVNodeChildren,
container,
anchor,
parentComponent,
@@ -766,17 +794,17 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
)
} else {
// c2 is null in this case
unmountChildren(c1 as VNode[], parentComponent, true)
unmountChildren(c1 as HostVNode[], parentComponent, true)
}
}
}
}
function patchUnkeyedChildren(
c1: VNode[],
c2: VNodeChildren,
container: HostNode,
anchor: HostNode,
c1: HostVNode[],
c2: HostVNodeChildren,
container: HostElement,
anchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean
@@ -810,10 +838,10 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
// can be all-keyed or mixed
function patchKeyedChildren(
c1: VNode[],
c2: VNodeChildren,
container: HostNode,
parentAnchor: HostNode,
c1: HostVNode[],
c2: HostVNodeChildren,
container: HostElement,
parentAnchor: HostNode | null,
parentComponent: ComponentInternalInstance | null,
isSVG: boolean,
optimized: boolean
@@ -878,7 +906,8 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
if (i > e1) {
if (i <= e2) {
const nextPos = e2 + 1
const anchor = nextPos < l2 ? (c2[nextPos] as VNode).el : parentAnchor
const anchor =
nextPos < l2 ? (c2[nextPos] as HostVNode).el : parentAnchor
while (i <= e2) {
patch(
null,
@@ -960,7 +989,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
} else {
// key-less node, try to locate a key-less node of the same type
for (j = s2; j <= e2; j++) {
if (isSameType(prevChild, c2[j] as VNode)) {
if (isSameType(prevChild, c2[j] as HostVNode)) {
newIndex = j
break
}
@@ -977,7 +1006,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
patch(
prevChild,
c2[newIndex] as VNode,
c2[newIndex] as HostVNode,
container,
null,
parentComponent,
@@ -997,9 +1026,11 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
// looping backwards so that we can use last patched node as anchor
for (i = toBePatched - 1; i >= 0; i--) {
const nextIndex = s2 + i
const nextChild = c2[nextIndex] as VNode
const nextChild = c2[nextIndex] as HostVNode
const anchor =
nextIndex + 1 < l2 ? (c2[nextIndex + 1] as VNode).el : parentAnchor
nextIndex + 1 < l2
? (c2[nextIndex + 1] as HostVNode).el
: parentAnchor
if (newIndexToOldIndexMap[i] === 0) {
// mount new
patch(null, nextChild, container, anchor, parentComponent, isSVG)
@@ -1017,25 +1048,29 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
}
function move(vnode: VNode, container: HostNode, anchor: HostNode) {
function move(
vnode: HostVNode,
container: HostElement,
anchor: HostNode | null
) {
if (vnode.component !== null) {
move(vnode.component.subTree, container, anchor)
return
}
if (vnode.type === Fragment) {
hostInsert(vnode.el, container, anchor)
const children = vnode.children as VNode[]
hostInsert(vnode.el as HostNode, container, anchor)
const children = vnode.children as HostVNode[]
for (let i = 0; i < children.length; i++) {
hostInsert(children[i].el, container, anchor)
hostInsert(children[i].el as HostNode, container, anchor)
}
hostInsert(vnode.anchor, container, anchor)
hostInsert(vnode.anchor as HostNode, container, anchor)
} else {
hostInsert(vnode.el, container, anchor)
hostInsert(vnode.el as HostNode, container, anchor)
}
}
function unmount(
vnode: VNode,
vnode: HostVNode,
parentComponent: ComponentInternalInstance | null,
doRemove?: boolean
) {
@@ -1069,14 +1104,14 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
unmountChildren(dynamicChildren, parentComponent, shouldRemoveChildren)
} else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
unmountChildren(
children as VNode[],
children as HostVNode[],
parentComponent,
shouldRemoveChildren
)
}
if (doRemove) {
hostRemove(vnode.el)
hostRemove(vnode.el as HostNode)
if (anchor != null) hostRemove(anchor)
}
@@ -1110,7 +1145,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
function unmountChildren(
children: VNode[],
children: HostVNode[],
parentComponent: ComponentInternalInstance | null,
doRemove?: boolean,
start: number = 0
@@ -1120,9 +1155,9 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
}
function getNextHostNode(vnode: VNode): HostNode {
function getNextHostNode(vnode: HostVNode): HostNode | null {
return vnode.component === null
? hostNextSibling(vnode.anchor || vnode.el)
? hostNextSibling((vnode.anchor || vnode.el) as HostNode)
: getNextHostNode(vnode.component.subTree)
}
@@ -1130,7 +1165,7 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
ref: string | Function | Ref<any>,
oldRef: string | Function | Ref<any> | null,
parent: ComponentInternalInstance,
value: HostNode | ComponentInternalInstance | null
value: HostNode | ComponentPublicInstance | null
) {
const refs = parent.refs === EMPTY_OBJ ? (parent.refs = {}) : parent.refs
const renderContext = toRaw(parent.renderContext)
@@ -1163,39 +1198,33 @@ export function createRenderer(options: RendererOptions): RootRenderFunction {
}
}
return function render(vnode: VNode | null, dom: HostNode | string) {
if (isString(dom)) {
if (isFunction(hostQuerySelector)) {
dom = hostQuerySelector(dom)
if (!dom) {
if (__DEV__) {
warn(
`Failed to locate root container: ` +
`querySelector returned null.`
)
}
return
}
} else {
function render(vnode: HostVNode | null, rawContainer: HostElement | string) {
let container: any = rawContainer
if (isString(container)) {
container = hostQuerySelector(container)
if (!container) {
if (__DEV__) {
warn(
`Failed to locate root container: ` +
`target platform does not support querySelector.`
`Failed to locate root container: ` + `querySelector returned null.`
)
}
return
}
}
if (vnode == null) {
debugger
if (dom._vnode) {
unmount(dom._vnode, null, true)
if (container._vnode) {
unmount(container._vnode, null, true)
}
} else {
patch(dom._vnode, vnode, dom)
patch(container._vnode || null, vnode, container)
}
flushPostFlushCbs()
dom._vnode = vnode
container._vnode = vnode
}
return {
render,
createApp: createAppAPI(render)
}
}

3
packages/runtime-core/src/directives.ts
View File

@@ -17,7 +17,6 @@ import { warn } from './warning'
import { ComponentInternalInstance } from './component'
import { currentRenderingInstance } from './componentRenderUtils'
import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
import { HostNode } from './createRenderer'
import { ComponentPublicInstance } from './componentPublicInstanceProxy'
export interface DirectiveBinding {
@@ -29,7 +28,7 @@ export interface DirectiveBinding {
}
export type DirectiveHook = (
el: HostNode,
el: any,
binding: DirectiveBinding,
vnode: VNode,
prevVNode: VNode | null

1
packages/runtime-core/src/index.ts
View File

@@ -28,7 +28,6 @@ export { PublicShapeFlags as ShapeFlags } from './shapeFlags'
export { getCurrentInstance } from './component'
// For custom renderers
export { createAppAPI } from './apiApp'
export { createRenderer } from './createRenderer'
export {
handleError,

45
packages/runtime-core/src/vnode.ts
View File

@@ -7,17 +7,16 @@ import {
extend
} from '@vue/shared'
import { ComponentInternalInstance, Data, SetupProxySymbol } from './component'
import { HostNode } from './createRenderer'
import { RawSlots } from './componentSlots'
import { PatchFlags } from './patchFlags'
import { ShapeFlags } from './shapeFlags'
import { isReactive } from '@vue/reactivity'
import { AppContext } from './apiApp'
export const Fragment = Symbol('Fragment')
export const Text = Symbol('Text')
export const Empty = Symbol('Empty')
export const Portal = Symbol('Portal')
export const Fragment = __DEV__ ? Symbol('Fragment') : Symbol()
export const Text = __DEV__ ? Symbol('Text') : Symbol()
export const Empty = __DEV__ ? Symbol('Empty') : Symbol()
export const Portal = __DEV__ ? Symbol('Portal') : Symbol()
export type VNodeTypes =
| string
@@ -28,24 +27,42 @@ export type VNodeTypes =
| typeof Text
| typeof Empty
type VNodeChildAtom = VNode | string | number | boolean | null | void
export interface VNodeChildren extends Array<VNodeChildren | VNodeChildAtom> {}
export type VNodeChild = VNodeChildAtom | VNodeChildren
type VNodeChildAtom<HostNode, HostElement> =
| VNode<HostNode, HostElement>
| string
| number
| boolean
| null
| void
export type NormalizedChildren = string | VNodeChildren | RawSlots | null
export interface VNodeChildren<HostNode = any, HostElement = any>
extends Array<
| VNodeChildren<HostNode, HostElement>
| VNodeChildAtom<HostNode, HostElement>
> {}
export interface VNode {
export type VNodeChild<HostNode = any, HostElement = any> =
| VNodeChildAtom<HostNode, HostElement>
| VNodeChildren<HostNode, HostElement>
export type NormalizedChildren<HostNode, HostElement> =
| string
| VNodeChildren<HostNode, HostElement>
| RawSlots
| null
export interface VNode<HostNode = any, HostElement = any> {
type: VNodeTypes
props: Record<any, any> | null
key: string | number | null
ref: string | Function | null
children: NormalizedChildren
children: NormalizedChildren<HostNode, HostElement>
component: ComponentInternalInstance | null
// DOM
el: HostNode | null
anchor: HostNode | null // fragment anchor
target: HostNode | null // portal target
target: HostElement | null // portal target
// optimization only
shapeFlag: number
@@ -209,7 +226,7 @@ export function cloneVNode(vnode: VNode): VNode {
}
}
export function normalizeVNode(child: VNodeChild): VNode {
export function normalizeVNode(child: VNodeChild<any, any>): VNode {
if (child == null) {
// empty placeholder
return createVNode(Empty)
@@ -241,7 +258,7 @@ export function normalizeChildren(vnode: VNode, children: unknown) {
children = isString(children) ? children : children + ''
type = ShapeFlags.TEXT_CHILDREN
}
vnode.children = children as NormalizedChildren
vnode.children = children as NormalizedChildren<any, any>
vnode.shapeFlag |= type
}