vue3-yuanma/packages/runtime-core/src/component.ts

512 lines
15 KiB
TypeScript
Raw Normal View History

import { VNode, VNodeChild, isVNode } from './vnode'
import { ReactiveEffect, shallowReadonly } from '@vue/reactivity'
2019-09-07 00:58:31 +08:00
import {
PublicInstanceProxyHandlers,
ComponentPublicInstance,
runtimeCompiledRenderProxyHandlers
} from './componentProxy'
2020-01-24 11:23:10 +08:00
import { ComponentPropsOptions, resolveProps } from './componentProps'
import { Slots, resolveSlots } from './componentSlots'
import { warn } from './warning'
import {
2019-09-07 00:58:31 +08:00
ErrorCodes,
callWithErrorHandling,
callWithAsyncErrorHandling
} from './errorHandling'
import { AppContext, createAppContext, AppConfig } from './apiCreateApp'
import { Directive, validateDirectiveName } from './directives'
import { applyOptions, ComponentOptions } from './apiOptions'
import {
EMPTY_OBJ,
isFunction,
capitalize,
NOOP,
isObject,
NO,
makeMap,
isPromise,
isArray,
hyphenate
} from '@vue/shared'
import { SuspenseBoundary } from './components/Suspense'
import { CompilerOptions } from '@vue/compiler-core'
import {
currentRenderingInstance,
markAttrsAccessed
} from './componentRenderUtils'
import { ShapeFlags } from './shapeFlags'
2019-05-28 13:27:31 +08:00
2019-08-13 23:18:23 +08:00
export type Data = { [key: string]: unknown }
2019-05-29 10:43:27 +08:00
export interface SFCInternalOptions {
__scopeId?: string
2019-12-18 10:28:24 +08:00
__cssModules?: Data
__hmrId?: string
__hmrUpdated?: boolean
}
export interface FunctionalComponent<P = {}> extends SFCInternalOptions {
2019-06-19 16:43:34 +08:00
(props: P, ctx: SetupContext): VNodeChild
2019-05-28 18:06:00 +08:00
props?: ComponentPropsOptions<P>
inheritAttrs?: boolean
2019-05-28 18:06:00 +08:00
displayName?: string
}
2019-09-03 04:09:34 +08:00
export type Component = ComponentOptions | FunctionalComponent
2019-10-30 10:28:38 +08:00
export { ComponentOptions }
2019-09-03 04:09:34 +08:00
2019-05-28 19:36:15 +08:00
type LifecycleHook = Function[] | null
export const enum LifecycleHooks {
BEFORE_CREATE = 'bc',
CREATED = 'c',
BEFORE_MOUNT = 'bm',
MOUNTED = 'm',
BEFORE_UPDATE = 'bu',
UPDATED = 'u',
BEFORE_UNMOUNT = 'bum',
UNMOUNTED = 'um',
DEACTIVATED = 'da',
ACTIVATED = 'a',
RENDER_TRIGGERED = 'rtg',
RENDER_TRACKED = 'rtc',
ERROR_CAPTURED = 'ec'
2019-05-28 19:36:15 +08:00
}
export type Emit = (event: string, ...args: unknown[]) => any[]
export interface SetupContext {
2019-06-19 16:43:34 +08:00
attrs: Data
slots: Slots
emit: Emit
2019-06-19 16:43:34 +08:00
}
export type RenderFunction = {
(): VNodeChild
isRuntimeCompiled?: boolean
}
2019-09-07 00:58:31 +08:00
export interface ComponentInternalInstance {
2019-05-28 18:06:00 +08:00
type: FunctionalComponent | ComponentOptions
2019-09-07 00:58:31 +08:00
parent: ComponentInternalInstance | null
2019-09-03 04:09:34 +08:00
appContext: AppContext
2019-09-07 00:58:31 +08:00
root: ComponentInternalInstance
2019-05-29 10:43:27 +08:00
vnode: VNode
2019-05-28 17:19:47 +08:00
next: VNode | null
2019-05-29 10:43:27 +08:00
subTree: VNode
2019-05-28 17:19:47 +08:00
update: ReactiveEffect
render: RenderFunction | null
2019-06-19 17:31:49 +08:00
effects: ReactiveEffect[] | null
2019-06-19 22:48:22 +08:00
provides: Data
// cache for proxy access type to avoid hasOwnProperty calls
accessCache: Data | null
// cache for render function values that rely on _ctx but won't need updates
// after initialized (e.g. inline handlers)
renderCache: (Function | VNode)[] | null
2019-06-19 16:43:34 +08:00
2019-10-30 10:28:38 +08:00
// assets for fast resolution
2019-09-04 23:36:27 +08:00
components: Record<string, Component>
directives: Record<string, Directive>
2019-05-29 10:43:27 +08:00
// the rest are only for stateful components
renderContext: Data
data: Data
props: Data
attrs: Data
vnodeHooks: Data
slots: Slots
proxy: ComponentPublicInstance | null
// alternative proxy used only for runtime-compiled render functions using
// `with` block
withProxy: ComponentPublicInstance | null
propsProxy: Data | null
2019-06-19 16:43:34 +08:00
setupContext: SetupContext | null
refs: Data
emit: Emit
2019-08-21 21:50:20 +08:00
2019-10-30 10:28:38 +08:00
// suspense related
asyncDep: Promise<any> | null
asyncResult: unknown
asyncResolved: boolean
// storage for any extra properties
sink: { [key: string]: any }
// lifecycle
2019-11-23 12:32:53 +08:00
isMounted: boolean
isUnmounted: boolean
2019-10-30 10:28:38 +08:00
isDeactivated: boolean
[LifecycleHooks.BEFORE_CREATE]: LifecycleHook
[LifecycleHooks.CREATED]: LifecycleHook
[LifecycleHooks.BEFORE_MOUNT]: LifecycleHook
[LifecycleHooks.MOUNTED]: LifecycleHook
[LifecycleHooks.BEFORE_UPDATE]: LifecycleHook
[LifecycleHooks.UPDATED]: LifecycleHook
[LifecycleHooks.BEFORE_UNMOUNT]: LifecycleHook
[LifecycleHooks.UNMOUNTED]: LifecycleHook
[LifecycleHooks.RENDER_TRACKED]: LifecycleHook
[LifecycleHooks.RENDER_TRIGGERED]: LifecycleHook
[LifecycleHooks.ACTIVATED]: LifecycleHook
[LifecycleHooks.DEACTIVATED]: LifecycleHook
[LifecycleHooks.ERROR_CAPTURED]: LifecycleHook
// hmr marker (dev only)
renderUpdated?: boolean
}
2019-05-28 19:36:15 +08:00
2019-09-03 04:09:34 +08:00
const emptyAppContext = createAppContext()
export function createComponentInstance(
2019-08-29 00:13:36 +08:00
vnode: VNode,
2019-09-07 00:58:31 +08:00
parent: ComponentInternalInstance | null
) {
2019-09-04 06:11:04 +08:00
// inherit parent app context - or - if root, adopt from root vnode
const appContext =
(parent ? parent.appContext : vnode.appContext) || emptyAppContext
const instance: ComponentInternalInstance = {
2019-08-29 00:13:36 +08:00
vnode,
2019-06-03 09:43:28 +08:00
parent,
2019-09-04 06:11:04 +08:00
appContext,
2019-11-02 11:04:28 +08:00
type: vnode.type as Component,
root: null!, // set later so it can point to itself
2019-05-28 19:36:15 +08:00
next: null,
subTree: null!, // will be set synchronously right after creation
update: null!, // will be set synchronously right after creation
render: null,
proxy: null,
withProxy: null,
2019-05-30 23:16:15 +08:00
propsProxy: null,
2019-06-19 16:43:34 +08:00
setupContext: null,
effects: null,
2019-09-04 06:11:04 +08:00
provides: parent ? parent.provides : Object.create(appContext.provides),
accessCache: null!,
renderCache: null,
2019-05-28 19:36:15 +08:00
// setup context properties
renderContext: EMPTY_OBJ,
data: EMPTY_OBJ,
props: EMPTY_OBJ,
attrs: EMPTY_OBJ,
vnodeHooks: EMPTY_OBJ,
slots: EMPTY_OBJ,
refs: EMPTY_OBJ,
2019-09-04 23:36:27 +08:00
// per-instance asset storage (mutable during options resolution)
components: Object.create(appContext.components),
directives: Object.create(appContext.directives),
2019-09-10 04:00:50 +08:00
// async dependency management
asyncDep: null,
asyncResult: null,
asyncResolved: false,
// user namespace for storing whatever the user assigns to `this`
2019-10-30 10:28:38 +08:00
// can also be used as a wildcard storage for ad-hoc injections internally
sink: {},
// lifecycle hooks
// not using enums here because it results in computed properties
2019-11-23 12:32:53 +08:00
isMounted: false,
isUnmounted: false,
2019-10-30 10:28:38 +08:00
isDeactivated: false,
bc: null,
c: null,
2019-05-28 19:36:15 +08:00
bm: null,
m: null,
bu: null,
u: null,
um: null,
bum: null,
da: null,
a: null,
rtg: null,
rtc: null,
ec: null,
2019-08-21 21:50:20 +08:00
emit: (event, ...args): any[] => {
2019-06-19 16:43:34 +08:00
const props = instance.vnode.props || EMPTY_OBJ
let handler = props[`on${event}`] || props[`on${capitalize(event)}`]
if (!handler && event.indexOf('update:') === 0) {
event = hyphenate(event)
handler = props[`on${event}`] || props[`on${capitalize(event)}`]
}
2019-06-19 16:43:34 +08:00
if (handler) {
const res = callWithAsyncErrorHandling(
handler,
instance,
ErrorCodes.COMPONENT_EVENT_HANDLER,
args
)
return isArray(res) ? res : [res]
} else {
return []
2019-06-19 16:43:34 +08:00
}
}
2019-05-28 19:36:15 +08:00
}
2019-06-03 09:43:28 +08:00
instance.root = parent ? parent.root : instance
return instance
2019-05-28 19:36:15 +08:00
}
2019-09-07 00:58:31 +08:00
export let currentInstance: ComponentInternalInstance | null = null
export let currentSuspense: SuspenseBoundary | null = null
2019-05-28 19:36:15 +08:00
2019-09-07 00:58:31 +08:00
export const getCurrentInstance: () => ComponentInternalInstance | null = () =>
2019-11-23 12:32:53 +08:00
currentInstance || currentRenderingInstance
2019-06-20 15:25:10 +08:00
2019-09-07 00:58:31 +08:00
export const setCurrentInstance = (
instance: ComponentInternalInstance | null
) => {
currentInstance = instance
}
const isBuiltInTag = /*#__PURE__*/ makeMap('slot,component')
export function validateComponentName(name: string, config: AppConfig) {
const appIsNativeTag = config.isNativeTag || NO
if (isBuiltInTag(name) || appIsNativeTag(name)) {
warn(
'Do not use built-in or reserved HTML elements as component id: ' + name
)
}
}
export let isInSSRComponentSetup = false
2020-01-24 11:23:10 +08:00
export function setupComponent(
instance: ComponentInternalInstance,
parentSuspense: SuspenseBoundary | null,
isSSR = false
) {
isInSSRComponentSetup = isSSR
2020-01-24 11:23:10 +08:00
const propsOptions = instance.type.props
const { props, children, shapeFlag } = instance.vnode
resolveProps(instance, props, propsOptions)
resolveSlots(instance, children)
// setup stateful logic
let setupResult
2020-01-24 11:23:10 +08:00
if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
setupResult = setupStatefulComponent(instance, parentSuspense)
2020-01-24 11:23:10 +08:00
}
isInSSRComponentSetup = false
return setupResult
2020-01-24 11:23:10 +08:00
}
function setupStatefulComponent(
instance: ComponentInternalInstance,
parentSuspense: SuspenseBoundary | null
) {
2019-05-29 10:43:27 +08:00
const Component = instance.type as ComponentOptions
if (__DEV__) {
if (Component.name) {
validateComponentName(Component.name, instance.appContext.config)
}
if (Component.components) {
const names = Object.keys(Component.components)
for (let i = 0; i < names.length; i++) {
validateComponentName(names[i], instance.appContext.config)
}
}
if (Component.directives) {
const names = Object.keys(Component.directives)
for (let i = 0; i < names.length; i++) {
validateDirectiveName(names[i])
}
}
}
// 0. create render proxy property access cache
2019-10-18 10:29:51 +08:00
instance.accessCache = {}
// 1. create public instance / render proxy
instance.proxy = new Proxy(instance, PublicInstanceProxyHandlers)
// 2. create props proxy
// the propsProxy is a reactive AND readonly proxy to the actual props.
// it will be updated in resolveProps() on updates before render
const propsProxy = (instance.propsProxy = isInSSRComponentSetup
? instance.props
: shallowReadonly(instance.props))
// 3. call setup()
2019-05-30 23:16:15 +08:00
const { setup } = Component
if (setup) {
2019-06-19 16:43:34 +08:00
const setupContext = (instance.setupContext =
setup.length > 1 ? createSetupContext(instance) : null)
2019-09-10 04:00:50 +08:00
currentInstance = instance
currentSuspense = parentSuspense
const setupResult = callWithErrorHandling(
setup,
instance,
2019-09-07 00:58:31 +08:00
ErrorCodes.SETUP_FUNCTION,
[propsProxy, setupContext]
)
2019-09-10 04:00:50 +08:00
currentInstance = null
currentSuspense = null
2019-06-19 22:48:22 +08:00
if (isPromise(setupResult)) {
if (isInSSRComponentSetup) {
// return the promise so server-renderer can wait on it
return setupResult.then(resolvedResult => {
handleSetupResult(instance, resolvedResult, parentSuspense)
})
} else if (__FEATURE_SUSPENSE__) {
2019-09-10 04:28:32 +08:00
// async setup returned Promise.
// bail here and wait for re-entry.
2019-10-05 22:09:34 +08:00
instance.asyncDep = setupResult
2019-09-10 04:28:32 +08:00
} else if (__DEV__) {
warn(
`setup() returned a Promise, but the version of Vue you are using ` +
`does not support it yet.`
)
}
} else {
handleSetupResult(instance, setupResult, parentSuspense)
}
2019-08-22 05:05:14 +08:00
} else {
finishComponentSetup(instance, parentSuspense)
2019-09-10 04:00:50 +08:00
}
}
export function handleSetupResult(
instance: ComponentInternalInstance,
setupResult: unknown,
parentSuspense: SuspenseBoundary | null
2019-09-10 04:00:50 +08:00
) {
if (isFunction(setupResult)) {
// setup returned an inline render function
instance.render = setupResult as RenderFunction
} else if (isObject(setupResult)) {
if (__DEV__ && isVNode(setupResult)) {
warn(
`setup() should not return VNodes directly - ` +
`return a render function instead.`
)
}
2019-09-10 04:00:50 +08:00
// setup returned bindings.
// assuming a render function compiled from template is present.
instance.renderContext = setupResult
2019-09-10 04:00:50 +08:00
} else if (__DEV__ && setupResult !== undefined) {
warn(
`setup() should return an object. Received: ${
setupResult === null ? 'null' : typeof setupResult
}`
)
}
finishComponentSetup(instance, parentSuspense)
2019-09-10 04:00:50 +08:00
}
type CompileFunction = (
template: string | object,
options?: CompilerOptions
) => RenderFunction
let compile: CompileFunction | undefined
// exported method uses any to avoid d.ts relying on the compiler types.
export function registerRuntimeCompiler(_compile: any) {
2019-09-20 12:24:16 +08:00
compile = _compile
}
function finishComponentSetup(
instance: ComponentInternalInstance,
parentSuspense: SuspenseBoundary | null
) {
2019-09-10 04:00:50 +08:00
const Component = instance.type as ComponentOptions
if (!instance.render) {
if (__RUNTIME_COMPILE__ && Component.template && !Component.render) {
// __RUNTIME_COMPILE__ ensures `compile` is provided
Component.render = compile!(Component.template, {
isCustomElement: instance.appContext.config.isCustomElement || NO
})
// mark the function as runtime compiled
;(Component.render as RenderFunction).isRuntimeCompiled = true
}
if (__DEV__ && !Component.render && !Component.ssrRender) {
/* istanbul ignore if */
if (!__RUNTIME_COMPILE__ && Component.template) {
2019-09-20 12:24:16 +08:00
warn(
`Component provides template but the build of Vue you are running ` +
`does not support runtime template compilation. Either use the ` +
2019-09-20 12:24:16 +08:00
`full build or pre-compile the template using Vue CLI.`
)
} else {
warn(
`Component is missing${
__RUNTIME_COMPILE__ ? ` template or` : ``
} render function.`
)
2019-09-20 12:24:16 +08:00
}
}
2019-09-10 04:00:50 +08:00
instance.render = (Component.render || NOOP) as RenderFunction
// for runtime-compiled render functions using `with` blocks, the render
// proxy used needs a different `has` handler which is more performant and
// also only allows a whitelist of globals to fallthrough.
if (__RUNTIME_COMPILE__ && instance.render.isRuntimeCompiled) {
instance.withProxy = new Proxy(
instance,
runtimeCompiledRenderProxyHandlers
)
}
2019-05-28 19:36:15 +08:00
}
2019-09-10 04:00:50 +08:00
2019-09-04 10:25:38 +08:00
// support for 2.x options
if (__FEATURE_OPTIONS__) {
2019-09-10 04:00:50 +08:00
currentInstance = instance
currentSuspense = parentSuspense
2019-09-04 23:36:27 +08:00
applyOptions(instance, Component)
2019-09-10 04:00:50 +08:00
currentInstance = null
currentSuspense = null
2019-09-04 10:25:38 +08:00
}
2019-09-10 04:00:50 +08:00
if (instance.renderContext === EMPTY_OBJ) {
instance.renderContext = {}
2019-09-05 06:16:11 +08:00
}
2019-05-28 19:36:15 +08:00
}
2019-05-28 17:19:47 +08:00
2019-08-23 10:07:51 +08:00
// used to identify a setup context proxy
export const SetupProxySymbol = Symbol()
2019-06-19 16:43:34 +08:00
const SetupProxyHandlers: { [key: string]: ProxyHandler<any> } = {}
;['attrs', 'slots'].forEach((type: string) => {
2019-06-19 16:43:34 +08:00
SetupProxyHandlers[type] = {
get: (instance, key) => {
if (__DEV__) {
markAttrsAccessed()
}
return instance[type][key]
},
2019-10-05 22:09:34 +08:00
has: (instance, key) => key === SetupProxySymbol || key in instance[type],
ownKeys: instance => Reflect.ownKeys(instance[type]),
2019-08-23 10:07:51 +08:00
// this is necessary for ownKeys to work properly
getOwnPropertyDescriptor: (instance, key) =>
Reflect.getOwnPropertyDescriptor(instance[type], key),
2019-06-19 16:43:34 +08:00
set: () => false,
deleteProperty: () => false
}
})
2019-09-07 00:58:31 +08:00
function createSetupContext(instance: ComponentInternalInstance): SetupContext {
2019-06-19 16:43:34 +08:00
const context = {
// attrs & slots are non-reactive, but they need to always expose
2019-06-19 16:43:34 +08:00
// the latest values (instance.xxx may get replaced during updates) so we
// need to expose them through a proxy
attrs: new Proxy(instance, SetupProxyHandlers.attrs),
slots: new Proxy(instance, SetupProxyHandlers.slots),
get emit() {
return instance.emit
}
2019-10-05 22:09:34 +08:00
}
2019-06-19 16:43:34 +08:00
return __DEV__ ? Object.freeze(context) : context
}
// record effects created during a component's setup() so that they can be
// stopped when the component unmounts
export function recordInstanceBoundEffect(effect: ReactiveEffect) {
if (currentInstance) {
;(currentInstance.effects || (currentInstance.effects = [])).push(effect)
}
}