2018-09-19 23:35:38 +08:00
|
|
|
import { VNodeFlags } from './flags'
|
|
|
|
import { EMPTY_OBJ } from './utils'
|
2018-09-20 11:19:25 +08:00
|
|
|
import { h } from './h'
|
2018-09-19 23:35:38 +08:00
|
|
|
import { VNode, createFragment } from './vdom'
|
|
|
|
import { Component, MountedComponent, ComponentClass } from './component'
|
|
|
|
import { createTextVNode, cloneVNode } from './vdom'
|
|
|
|
import { initializeState } from './componentState'
|
|
|
|
import { initializeProps } from './componentProps'
|
|
|
|
import {
|
|
|
|
initializeComputed,
|
|
|
|
getComputedOptions,
|
|
|
|
teardownComputed
|
|
|
|
} from './componentComputed'
|
|
|
|
import { initializeWatch, teardownWatch } from './componentWatch'
|
|
|
|
import { Data, ComponentOptions } from './componentOptions'
|
|
|
|
import { createRenderProxy } from './componentProxy'
|
2018-09-24 08:30:26 +08:00
|
|
|
import { handleError, ErrorTypes } from './errorHandling'
|
2018-09-19 23:35:38 +08:00
|
|
|
|
|
|
|
export function createComponentInstance(
|
|
|
|
vnode: VNode,
|
|
|
|
Component: ComponentClass,
|
|
|
|
parentComponent: MountedComponent | null
|
|
|
|
): MountedComponent {
|
|
|
|
const instance = (vnode.children = new Component()) as MountedComponent
|
|
|
|
instance.$parentVNode = vnode
|
|
|
|
|
|
|
|
// renderProxy
|
|
|
|
const proxy = (instance.$proxy = createRenderProxy(instance))
|
|
|
|
|
|
|
|
// pointer management
|
|
|
|
if (parentComponent) {
|
|
|
|
instance.$parent = parentComponent.$proxy
|
|
|
|
instance.$root = parentComponent.$root
|
|
|
|
parentComponent.$children.push(proxy)
|
|
|
|
} else {
|
|
|
|
instance.$root = proxy
|
|
|
|
}
|
|
|
|
|
|
|
|
// lifecycle
|
|
|
|
if (instance.beforeCreate) {
|
|
|
|
instance.beforeCreate.call(proxy)
|
|
|
|
}
|
|
|
|
// TODO provide/inject
|
|
|
|
initializeProps(instance, vnode.data)
|
|
|
|
initializeState(instance)
|
|
|
|
initializeComputed(instance, getComputedOptions(Component))
|
|
|
|
initializeWatch(instance, instance.$options.watch)
|
|
|
|
instance.$slots = vnode.slots || EMPTY_OBJ
|
|
|
|
if (instance.created) {
|
|
|
|
instance.created.call(proxy)
|
|
|
|
}
|
|
|
|
|
|
|
|
return instance as MountedComponent
|
|
|
|
}
|
|
|
|
|
|
|
|
export function renderInstanceRoot(instance: MountedComponent) {
|
2018-09-24 08:30:26 +08:00
|
|
|
let vnode
|
|
|
|
try {
|
|
|
|
vnode = instance.render.call(
|
|
|
|
instance.$proxy,
|
|
|
|
instance.$props,
|
|
|
|
instance.$slots
|
|
|
|
)
|
|
|
|
} catch (e1) {
|
|
|
|
handleError(e1, instance, ErrorTypes.RENDER)
|
|
|
|
if (__DEV__ && instance.renderError) {
|
|
|
|
try {
|
|
|
|
vnode = instance.renderError.call(instance.$proxy, e1)
|
|
|
|
} catch (e2) {
|
|
|
|
handleError(e2, instance, ErrorTypes.RENDER_ERROR)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-09-24 11:28:21 +08:00
|
|
|
return normalizeComponentRoot(
|
|
|
|
vnode,
|
|
|
|
instance.$parentVNode,
|
2018-09-25 06:51:58 +08:00
|
|
|
instance.$attrs,
|
2018-09-24 11:28:21 +08:00
|
|
|
instance.$options.inheritAttrs
|
|
|
|
)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export function teardownComponentInstance(instance: MountedComponent) {
|
|
|
|
const parentComponent = instance.$parent && instance.$parent._self
|
|
|
|
if (parentComponent && !parentComponent._destroyed) {
|
|
|
|
parentComponent.$children.splice(
|
|
|
|
parentComponent.$children.indexOf(instance.$proxy),
|
|
|
|
1
|
|
|
|
)
|
|
|
|
}
|
|
|
|
teardownComputed(instance)
|
|
|
|
teardownWatch(instance)
|
|
|
|
}
|
|
|
|
|
|
|
|
export function normalizeComponentRoot(
|
|
|
|
vnode: any,
|
2018-09-24 11:28:21 +08:00
|
|
|
componentVNode: VNode | null,
|
2018-09-25 06:51:58 +08:00
|
|
|
attrs: Data | void,
|
2018-09-24 11:28:21 +08:00
|
|
|
inheritAttrs: boolean | void
|
2018-09-19 23:35:38 +08:00
|
|
|
): VNode {
|
|
|
|
if (vnode == null) {
|
|
|
|
vnode = createTextVNode('')
|
|
|
|
} else if (typeof vnode !== 'object') {
|
|
|
|
vnode = createTextVNode(vnode + '')
|
|
|
|
} else if (Array.isArray(vnode)) {
|
|
|
|
vnode = createFragment(vnode)
|
|
|
|
} else {
|
|
|
|
const { flags } = vnode
|
|
|
|
// parentVNode data merge down
|
|
|
|
if (
|
|
|
|
componentVNode &&
|
|
|
|
(flags & VNodeFlags.COMPONENT || flags & VNodeFlags.ELEMENT)
|
|
|
|
) {
|
2018-09-25 06:51:58 +08:00
|
|
|
if (inheritAttrs !== false && attrs !== void 0) {
|
|
|
|
// TODO should merge
|
|
|
|
console.log(attrs)
|
|
|
|
vnode = cloneVNode(vnode, attrs)
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
if (vnode.el) {
|
|
|
|
vnode = cloneVNode(vnode)
|
|
|
|
}
|
|
|
|
if (flags & VNodeFlags.COMPONENT) {
|
|
|
|
vnode.parentVNode = componentVNode
|
|
|
|
}
|
|
|
|
} else if (vnode.el) {
|
|
|
|
vnode = cloneVNode(vnode)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return vnode
|
|
|
|
}
|
|
|
|
|
|
|
|
export function shouldUpdateFunctionalComponent(
|
|
|
|
prevProps: Data | null,
|
|
|
|
nextProps: Data | null
|
|
|
|
): boolean {
|
|
|
|
if (prevProps === nextProps) {
|
|
|
|
return false
|
|
|
|
}
|
|
|
|
if (prevProps === null) {
|
|
|
|
return nextProps !== null
|
|
|
|
}
|
|
|
|
if (nextProps === null) {
|
|
|
|
return prevProps !== null
|
|
|
|
}
|
|
|
|
let shouldUpdate = true
|
|
|
|
const nextKeys = Object.keys(nextProps)
|
|
|
|
if (nextKeys.length === Object.keys(prevProps).length) {
|
|
|
|
shouldUpdate = false
|
|
|
|
for (let i = 0; i < nextKeys.length; i++) {
|
|
|
|
const key = nextKeys[i]
|
|
|
|
if (nextProps[key] !== prevProps[key]) {
|
|
|
|
shouldUpdate = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return shouldUpdate
|
|
|
|
}
|
|
|
|
|
2018-09-20 11:19:25 +08:00
|
|
|
// compat only
|
2018-09-19 23:35:38 +08:00
|
|
|
export function createComponentClassFromOptions(
|
|
|
|
options: ComponentOptions
|
|
|
|
): ComponentClass {
|
|
|
|
class ObjectComponent extends Component {
|
|
|
|
constructor() {
|
|
|
|
super()
|
|
|
|
this.$options = options
|
|
|
|
}
|
|
|
|
}
|
|
|
|
for (const key in options) {
|
|
|
|
const value = options[key]
|
|
|
|
if (typeof value === 'function') {
|
2018-09-20 11:19:25 +08:00
|
|
|
;(ObjectComponent.prototype as any)[key] =
|
|
|
|
key === 'render'
|
|
|
|
? // normalize render for legacy signature
|
|
|
|
function render() {
|
|
|
|
return value.call(this, h)
|
|
|
|
}
|
|
|
|
: value
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
if (key === 'computed') {
|
|
|
|
const isGet = typeof value === 'function'
|
|
|
|
Object.defineProperty(ObjectComponent.prototype, key, {
|
|
|
|
configurable: true,
|
|
|
|
get: isGet ? value : value.get,
|
|
|
|
set: isGet ? undefined : value.set
|
|
|
|
})
|
|
|
|
}
|
2018-09-20 11:43:27 +08:00
|
|
|
if (key === 'methods') {
|
|
|
|
for (const method in value) {
|
|
|
|
;(ObjectComponent.prototype as any)[method] = value[method]
|
|
|
|
}
|
|
|
|
}
|
2018-09-19 23:35:38 +08:00
|
|
|
}
|
|
|
|
return ObjectComponent as ComponentClass
|
|
|
|
}
|