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

287 lines
8.6 KiB
TypeScript
Raw Normal View History

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'
import { VNode, MountedVNode, createFragment } from './vdom'
import {
Component,
ComponentInstance,
ComponentClass,
FunctionalComponent
} from './component'
2018-09-19 23:35:38 +08:00
import { createTextVNode, cloneVNode } from './vdom'
import { initializeState } from './componentState'
import { initializeProps, resolveProps } from './componentProps'
import { initializeComputed, teardownComputed } from './componentComputed'
2018-09-19 23:35:38 +08:00
import { initializeWatch, teardownWatch } from './componentWatch'
2018-10-09 23:37:24 +08:00
import { ComponentOptions } from './componentOptions'
2018-09-19 23:35:38 +08:00
import { createRenderProxy } from './componentProxy'
2018-09-24 08:30:26 +08:00
import { handleError, ErrorTypes } from './errorHandling'
2018-10-12 05:21:13 +08:00
import { warn } from './warning'
2018-09-19 23:35:38 +08:00
let currentVNode: VNode | null = null
2018-10-16 00:41:18 +08:00
let currentContextVNode: VNode | null = null
2018-09-19 23:35:38 +08:00
export function createComponentInstance(
vnode: VNode,
2018-10-16 00:41:18 +08:00
Component: ComponentClass
2018-10-09 23:37:24 +08:00
): ComponentInstance {
// component instance creation is done in two steps.
// first, `initializeComponentInstance` is called inside base component
2018-10-12 02:24:55 +08:00
// constructor as the instance is created so that the extended component's
// constructor has access to certain properties and most importantly,
// this.$props.
// we are storing the vnodes in variables here so that there's no need to
// always pass args in super()
currentVNode = vnode
2018-10-16 00:41:18 +08:00
currentContextVNode = vnode.contextVNode
2018-10-14 09:13:56 +08:00
const instance = (vnode.children = new Component() as ComponentInstance)
// then we finish the initialization by collecting properties set on the
// instance
initializeState(instance)
initializeComputed(instance, instance.$options.computed)
initializeWatch(instance, instance.$options.watch)
instance.$slots = currentVNode.slots || EMPTY_OBJ
if (instance.created) {
instance.created.call(instance.$proxy)
}
currentVNode = currentContextVNode = null
return instance
}
// this is called inside the base component's constructor
// it initializes all the way up to props so that they are available
// inside the extended component's constructor
export function initializeComponentInstance(instance: ComponentInstance) {
if (__DEV__ && currentVNode === null) {
throw new Error(
`Component classes are not meant to be manually instantiated.`
)
}
2018-10-16 07:07:06 +08:00
instance.$options = resolveComponentOptions(instance.constructor)
instance.$parentVNode = currentVNode as MountedVNode
2018-09-19 23:35:38 +08:00
// renderProxy
const proxy = (instance.$proxy = createRenderProxy(instance))
// parent chain management
if (currentContextVNode !== null) {
2018-10-11 01:13:27 +08:00
// locate first non-functional parent
while (
currentContextVNode !== null &&
currentContextVNode.flags & VNodeFlags.COMPONENT_FUNCTIONAL &&
currentContextVNode.contextVNode !== null
2018-10-11 01:13:27 +08:00
) {
currentContextVNode = currentContextVNode.contextVNode as any
2018-10-11 01:13:27 +08:00
}
const parentComponent = (currentContextVNode as VNode)
2018-10-11 01:13:27 +08:00
.children as ComponentInstance
2018-09-19 23:35:38 +08:00
instance.$parent = parentComponent.$proxy
instance.$root = parentComponent.$root
parentComponent.$children.push(proxy)
} else {
instance.$root = proxy
}
// beforeCreate hook is called right in the constructor
2018-09-19 23:35:38 +08:00
if (instance.beforeCreate) {
instance.beforeCreate.call(proxy)
}
initializeProps(
instance,
instance.$options.props,
(currentVNode as VNode).data
)
2018-09-19 23:35:38 +08:00
}
2018-10-09 23:37:24 +08:00
export function renderInstanceRoot(instance: ComponentInstance): VNode {
2018-09-24 08:30:26 +08:00
let vnode
try {
vnode = instance.render.call(
instance.$proxy,
instance.$props,
instance.$slots,
instance.$attrs,
instance.$parentVNode
)
} catch (err) {
handleError(err, instance, ErrorTypes.RENDER)
2018-09-24 08:30:26 +08:00
}
return normalizeComponentRoot(vnode, instance.$parentVNode)
2018-09-19 23:35:38 +08:00
}
export function renderFunctionalRoot(vnode: VNode): VNode {
const render = vnode.tag as FunctionalComponent
const { props, attrs } = resolveProps(vnode.data, render.props)
let subTree
try {
subTree = render(props, vnode.slots || EMPTY_OBJ, attrs || EMPTY_OBJ, vnode)
} catch (err) {
handleError(err, vnode, ErrorTypes.RENDER)
}
return normalizeComponentRoot(subTree, vnode)
}
2018-10-09 23:37:24 +08:00
export function teardownComponentInstance(instance: ComponentInstance) {
2018-09-27 05:10:34 +08:00
if (instance._unmounted) {
return
}
2018-09-19 23:35:38 +08:00
const parentComponent = instance.$parent && instance.$parent._self
2018-09-27 05:10:34 +08:00
if (parentComponent && !parentComponent._unmounted) {
2018-09-19 23:35:38 +08:00
parentComponent.$children.splice(
parentComponent.$children.indexOf(instance.$proxy),
1
)
}
teardownComputed(instance)
teardownWatch(instance)
}
function normalizeComponentRoot(
2018-09-19 23:35:38 +08:00
vnode: any,
componentVNode: VNode | null
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)) {
2018-09-26 05:49:47 +08:00
if (vnode.length === 1) {
vnode = normalizeComponentRoot(vnode[0], componentVNode)
2018-09-26 05:49:47 +08:00
} else {
vnode = createFragment(vnode)
}
2018-09-19 23:35:38 +08:00
} else {
2018-09-27 05:10:34 +08:00
const { el, flags } = vnode
2018-09-19 23:35:38 +08:00
if (
componentVNode &&
(flags & VNodeFlags.COMPONENT || flags & VNodeFlags.ELEMENT)
) {
if (el) {
2018-09-19 23:35:38 +08:00
vnode = cloneVNode(vnode)
}
if (flags & VNodeFlags.COMPONENT) {
vnode.parentVNode = componentVNode
}
2018-09-27 05:10:34 +08:00
} else if (el) {
2018-09-19 23:35:38 +08:00
vnode = cloneVNode(vnode)
}
}
return vnode
}
export function shouldUpdateFunctionalComponent(
2018-10-09 23:37:24 +08:00
prevProps: Record<string, any> | null,
nextProps: Record<string, any> | null
2018-09-19 23:35:38 +08:00
): 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
}
export function createComponentClassFromOptions(
options: ComponentOptions
): ComponentClass {
2018-10-09 23:37:24 +08:00
class AnonymousComponent extends Component {
2018-10-10 08:22:29 +08:00
static options = options
2018-09-19 23:35:38 +08:00
}
2018-10-09 23:37:24 +08:00
const proto = AnonymousComponent.prototype as any
2018-09-19 23:35:38 +08:00
for (const key in options) {
const value = options[key]
2018-10-09 23:37:24 +08:00
// name -> displayName
2018-10-10 08:22:29 +08:00
if (key === 'name') {
options.displayName = options.name
2018-10-10 08:22:29 +08:00
} else if (typeof value === 'function') {
// lifecycle hook / data / render
2018-10-10 08:22:29 +08:00
if (__COMPAT__) {
if (key === 'render') {
proto[key] = function() {
return value.call(this, h)
}
} else if (key === 'beforeDestroy') {
proto.beforeUnmount = value
} else if (key === 'destroyed') {
proto.unmounted = value
} else {
proto[key] = value
2018-10-09 23:37:24 +08:00
}
} else {
proto[key] = value
}
2018-10-10 08:22:29 +08:00
} else if (key === 'computed') {
for (const computedKey in value) {
const computed = value[computedKey]
const isGet = typeof computed === 'function'
Object.defineProperty(proto, computedKey, {
configurable: true,
get: isGet ? computed : computed.get,
set: isGet ? undefined : computed.set
})
}
} else if (key === 'methods') {
2018-09-20 11:43:27 +08:00
for (const method in value) {
2018-10-09 23:37:24 +08:00
if (__DEV__ && proto.hasOwnProperty(method)) {
2018-10-12 05:21:13 +08:00
warn(
2018-10-09 23:37:24 +08:00
`Object syntax contains method name that conflicts with ` +
`lifecycle hook: "${method}"`
)
}
proto[method] = value[method]
2018-09-20 11:43:27 +08:00
}
}
2018-09-19 23:35:38 +08:00
}
2018-10-09 23:37:24 +08:00
return AnonymousComponent as ComponentClass
2018-09-19 23:35:38 +08:00
}
2018-10-10 08:22:29 +08:00
// This is called in the base component constructor and the return value is
// set on the instance as $options.
2018-10-10 08:22:29 +08:00
export function resolveComponentOptions(
Component: ComponentClass
): ComponentOptions {
2018-10-16 07:07:06 +08:00
if (Component.options) {
return Component.options
}
const staticDescriptors = Object.getOwnPropertyDescriptors(Component)
2018-10-10 08:22:29 +08:00
const options = {} as any
for (const key in staticDescriptors) {
const { enumerable, get, value } = staticDescriptors[key]
if (enumerable || get) {
options[key] = get ? get() : value
}
}
const instanceDescriptors = Object.getOwnPropertyDescriptors(
Component.prototype
)
for (const key in instanceDescriptors) {
const { get, value } = instanceDescriptors[key]
if (get) {
// computed properties
;(options.computed || (options.computed = {}))[key] = get
// there's no need to do anything for the setter
// as it's already defined on the prototype
} else if (typeof value === 'function') {
;(options.methods || (options.methods = {}))[key] = value
}
2018-10-10 08:22:29 +08:00
}
Component.options = options
return options
}