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

487 lines
12 KiB
TypeScript
Raw Normal View History

2019-09-04 10:25:38 +08:00
import {
2019-09-07 00:58:31 +08:00
ComponentInternalInstance,
2019-09-04 10:25:38 +08:00
Data,
Component,
2019-10-22 01:44:01 +08:00
SetupContext,
RenderFunction,
SFCInternalOptions
2019-09-04 10:25:38 +08:00
} from './component'
import {
isFunction,
extend,
isString,
isObject,
isArray,
EMPTY_OBJ,
NOOP
2019-09-04 10:25:38 +08:00
} from '@vue/shared'
2019-09-06 04:09:30 +08:00
import { computed } from './apiReactivity'
2019-12-31 00:30:12 +08:00
import { watch, WatchOptions, WatchCallback } from './apiWatch'
2019-09-04 10:25:38 +08:00
import { provide, inject } from './apiInject'
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onErrorCaptured,
onRenderTracked,
onBeforeUnmount,
onUnmounted,
2019-10-30 10:28:38 +08:00
onActivated,
onDeactivated,
2019-10-15 11:15:09 +08:00
onRenderTriggered,
DebuggerHook,
ErrorCapturedHook
2019-09-04 10:25:38 +08:00
} from './apiLifecycle'
2019-10-22 01:57:20 +08:00
import {
reactive,
ComputedGetter,
WritableComputedOptions
} from '@vue/reactivity'
2019-10-08 21:26:09 +08:00
import { ComponentObjectPropsOptions, ExtractPropTypes } from './componentProps'
import { Directive } from './directives'
import { ComponentPublicInstance } from './componentProxy'
import { warn } from './warning'
2019-10-22 23:26:48 +08:00
export interface ComponentOptionsBase<
Props,
RawBindings,
D,
C extends ComputedOptions,
M extends MethodOptions
> extends LegacyOptions<Props, RawBindings, D, C, M>, SFCInternalOptions {
setup?: (
2020-01-11 00:46:34 +08:00
this: void,
props: Props,
ctx: SetupContext
2019-10-22 01:44:01 +08:00
) => RawBindings | RenderFunction | void
name?: string
2019-12-11 23:39:29 +08:00
template?: string | object // can be a direct DOM node
// Note: we are intentionally using the signature-less `Function` type here
// since any type with signature will cause the whole inference to fail when
// the return expression contains reference to `this`.
// Luckily `render()` doesn't need any arguments nor does it care about return
// type.
render?: Function
// SSR only. This is produced by compiler-ssr and attached in compiler-sfc
ssrRender?: Function
components?: Record<
string,
Component | { new (): ComponentPublicInstance<any, any, any, any, any> }
>
directives?: Record<string, Directive>
inheritAttrs?: boolean
2019-11-28 17:01:53 +08:00
// type-only differentiator to separate OptionWithoutProps from a constructor
// type returned by defineComponent() or FunctionalComponent
call?: never
// type-only differentiators for built-in Vnode types
__isFragment?: never
__isPortal?: never
__isSuspense?: never
}
export type ComponentOptionsWithoutProps<
Props = {},
RawBindings = {},
D = {},
C extends ComputedOptions = {},
M extends MethodOptions = {}
2020-01-11 00:46:34 +08:00
> = ComponentOptionsBase<Readonly<Props>, RawBindings, D, C, M> & {
props?: undefined
2019-11-10 07:40:25 +08:00
} & ThisType<ComponentPublicInstance<{}, RawBindings, D, C, M, Readonly<Props>>>
export type ComponentOptionsWithArrayProps<
PropNames extends string = string,
RawBindings = {},
D = {},
C extends ComputedOptions = {},
M extends MethodOptions = {},
2019-11-10 07:40:25 +08:00
Props = Readonly<{ [key in PropNames]?: any }>
> = ComponentOptionsBase<Props, RawBindings, D, C, M> & {
props: PropNames[]
2019-09-07 00:58:31 +08:00
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M>>
2019-10-08 21:26:09 +08:00
export type ComponentOptionsWithObjectProps<
PropsOptions = ComponentObjectPropsOptions,
RawBindings = {},
D = {},
C extends ComputedOptions = {},
M extends MethodOptions = {},
2019-11-10 07:40:25 +08:00
Props = Readonly<ExtractPropTypes<PropsOptions>>
> = ComponentOptionsBase<Props, RawBindings, D, C, M> & {
props: PropsOptions
2019-09-07 00:58:31 +08:00
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M>>
export type ComponentOptions =
| ComponentOptionsWithoutProps
2019-10-08 21:26:09 +08:00
| ComponentOptionsWithObjectProps
| ComponentOptionsWithArrayProps
2019-09-04 10:25:38 +08:00
2019-09-04 23:36:27 +08:00
// TODO legacy component definition also supports constructors with .options
type LegacyComponent = ComponentOptions
2019-09-04 10:25:38 +08:00
2019-10-22 01:57:20 +08:00
export type ComputedOptions = Record<
string,
ComputedGetter<any> | WritableComputedOptions<any>
>
2019-09-06 04:09:30 +08:00
export interface MethodOptions {
[key: string]: Function
}
export type ExtractComputedReturns<T extends any> = {
2019-09-06 04:09:30 +08:00
[key in keyof T]: T[key] extends { get: Function }
? ReturnType<T[key]['get']>
: ReturnType<T[key]>
}
type WatchOptionItem =
| string
2019-12-31 00:30:12 +08:00
| WatchCallback
| { handler: WatchCallback } & WatchOptions
type ComponentWatchOptionItem = WatchOptionItem | WatchOptionItem[]
type ComponentWatchOptions = Record<string, ComponentWatchOptionItem>
type ComponentInjectOptions =
| string[]
| Record<
string | symbol,
2019-10-22 23:26:48 +08:00
string | symbol | { from: string | symbol; default?: unknown }
>
2019-09-06 04:09:30 +08:00
export interface LegacyOptions<
Props,
RawBindings,
D,
C extends ComputedOptions,
M extends MethodOptions
2019-09-06 04:09:30 +08:00
> {
2019-09-04 10:25:38 +08:00
el?: any
// state
// Limitation: we cannot expose RawBindings on the `this` context for data
// since that leads to some sort of circular inference and breaks ThisType
// for the entire component.
2019-09-07 00:58:31 +08:00
data?: D | ((this: ComponentPublicInstance<Props>) => D)
computed?: C
methods?: M
watch?: ComponentWatchOptions
provide?: Data | Function
inject?: ComponentInjectOptions
2019-09-04 10:25:38 +08:00
// composition
mixins?: LegacyComponent[]
extends?: LegacyComponent
// lifecycle
beforeCreate?(): void
created?(): void
2019-09-04 10:25:38 +08:00
beforeMount?(): void
mounted?(): void
beforeUpdate?(): void
updated?(): void
activated?(): void
2019-10-05 22:48:54 +08:00
deactivated?(): void
2019-09-05 22:07:43 +08:00
beforeUnmount?(): void
unmounted?(): void
2019-10-15 11:15:09 +08:00
renderTracked?: DebuggerHook
renderTriggered?: DebuggerHook
errorCaptured?: ErrorCapturedHook
2019-09-04 10:25:38 +08:00
}
const enum OptionTypes {
PROPS = 'Props',
DATA = 'Data',
COMPUTED = 'Computed',
METHODS = 'Methods',
INJECT = 'Inject'
}
function createDuplicateChecker() {
const cache = Object.create(null)
return (type: OptionTypes, key: string) => {
if (cache[key]) {
warn(`${type} property "${key}" is already defined in ${cache[key]}.`)
} else {
cache[key] = type
}
}
}
2019-09-04 23:36:27 +08:00
export function applyOptions(
2019-09-07 00:58:31 +08:00
instance: ComponentInternalInstance,
2019-09-04 23:36:27 +08:00
options: ComponentOptions,
asMixin: boolean = false
) {
const renderContext =
instance.renderContext === EMPTY_OBJ
? (instance.renderContext = __SSR__ ? {} : reactive({}))
: instance.renderContext
const ctx = instance.proxy!
2019-09-04 10:25:38 +08:00
const {
2019-09-04 23:36:27 +08:00
// composition
mixins,
extends: extendsOptions,
// state
props: propsOptions,
2019-09-04 10:25:38 +08:00
data: dataOptions,
computed: computedOptions,
methods,
watch: watchOptions,
provide: provideOptions,
inject: injectOptions,
2019-09-04 23:36:27 +08:00
// assets
components,
directives,
// lifecycle
2019-09-04 10:25:38 +08:00
beforeMount,
mounted,
beforeUpdate,
updated,
2019-10-30 10:28:38 +08:00
activated,
deactivated,
2019-09-05 22:07:43 +08:00
beforeUnmount,
unmounted,
2019-09-04 10:25:38 +08:00
renderTracked,
renderTriggered,
errorCaptured
2019-09-04 23:36:27 +08:00
} = options
2019-09-05 22:07:43 +08:00
const globalMixins = instance.appContext.mixins
// call it only during dev
const checkDuplicateProperties = __DEV__ ? createDuplicateChecker() : null
2019-09-06 08:59:45 +08:00
// applyOptions is called non-as-mixin once per instance
2019-09-05 22:07:43 +08:00
if (!asMixin) {
callSyncHook('beforeCreate', options, ctx, globalMixins)
2019-09-06 08:59:45 +08:00
// global mixins are applied first
2019-09-05 22:07:43 +08:00
applyMixins(instance, globalMixins)
2019-09-04 23:36:27 +08:00
}
// extending a base component...
if (extendsOptions) {
applyOptions(instance, extendsOptions, true)
}
// local mixins
if (mixins) {
applyMixins(instance, mixins)
}
2019-09-04 10:25:38 +08:00
if (__DEV__ && propsOptions) {
for (const key in propsOptions) {
checkDuplicateProperties!(OptionTypes.PROPS, key)
}
}
2019-09-04 23:36:27 +08:00
// state options
2019-09-04 10:25:38 +08:00
if (dataOptions) {
const data = isFunction(dataOptions) ? dataOptions.call(ctx) : dataOptions
if (!isObject(data)) {
__DEV__ && warn(`data() should return an object.`)
} else if (instance.data === EMPTY_OBJ) {
if (__DEV__) {
for (const key in data) {
checkDuplicateProperties!(OptionTypes.DATA, key)
}
}
instance.data = __SSR__ ? data : reactive(data)
} else {
// existing data: this is a mixin or extends.
extend(instance.data, data)
}
2019-09-04 10:25:38 +08:00
}
if (computedOptions) {
for (const key in computedOptions) {
2019-09-06 04:09:30 +08:00
const opt = (computedOptions as ComputedOptions)[key]
__DEV__ && checkDuplicateProperties!(OptionTypes.COMPUTED, key)
if (isFunction(opt)) {
renderContext[key] = computed(opt.bind(ctx))
} else {
const { get, set } = opt
if (isFunction(get)) {
renderContext[key] = computed({
get: get.bind(ctx),
set: isFunction(set)
? set.bind(ctx)
: __DEV__
2019-10-22 23:52:29 +08:00
? () => {
warn(
`Computed property "${key}" was assigned to but it has no setter.`
)
}
: NOOP
2019-09-05 06:16:11 +08:00
})
} else if (__DEV__) {
warn(`Computed property "${key}" has no getter.`)
}
}
2019-09-04 10:25:38 +08:00
}
}
2019-09-04 10:25:38 +08:00
if (methods) {
for (const key in methods) {
const methodHandler = (methods as MethodOptions)[key]
if (isFunction(methodHandler)) {
__DEV__ && checkDuplicateProperties!(OptionTypes.METHODS, key)
renderContext[key] = methodHandler.bind(ctx)
} else if (__DEV__) {
warn(
`Method "${key}" has type "${typeof methodHandler}" in the component definition. ` +
`Did you reference the function correctly?`
)
}
2019-09-04 10:25:38 +08:00
}
}
if (watchOptions) {
for (const key in watchOptions) {
createWatcher(watchOptions[key], renderContext, ctx, key)
2019-09-04 10:25:38 +08:00
}
}
if (provideOptions) {
const provides = isFunction(provideOptions)
? provideOptions.call(ctx)
: provideOptions
for (const key in provides) {
provide(key, provides[key])
}
}
if (injectOptions) {
if (isArray(injectOptions)) {
for (let i = 0; i < injectOptions.length; i++) {
const key = injectOptions[i]
__DEV__ && checkDuplicateProperties!(OptionTypes.INJECT, key)
renderContext[key] = inject(key)
2019-09-04 10:25:38 +08:00
}
} else {
for (const key in injectOptions) {
__DEV__ && checkDuplicateProperties!(OptionTypes.INJECT, key)
2019-09-04 10:25:38 +08:00
const opt = injectOptions[key]
if (isObject(opt)) {
renderContext[key] = inject(opt.from, opt.default)
2019-09-04 10:25:38 +08:00
} else {
renderContext[key] = inject(opt)
2019-09-04 10:25:38 +08:00
}
}
}
}
2019-09-04 23:36:27 +08:00
// asset options
if (components) {
extend(instance.components, components)
}
if (directives) {
extend(instance.directives, directives)
}
// lifecycle options
2019-09-05 22:07:43 +08:00
if (!asMixin) {
callSyncHook('created', options, ctx, globalMixins)
2019-09-04 10:25:38 +08:00
}
if (beforeMount) {
onBeforeMount(beforeMount.bind(ctx))
}
if (mounted) {
onMounted(mounted.bind(ctx))
}
if (beforeUpdate) {
onBeforeUpdate(beforeUpdate.bind(ctx))
}
if (updated) {
onUpdated(updated.bind(ctx))
}
2019-10-30 10:28:38 +08:00
if (activated) {
onActivated(activated.bind(ctx))
}
if (deactivated) {
onDeactivated(deactivated.bind(ctx))
}
2019-09-04 10:25:38 +08:00
if (errorCaptured) {
onErrorCaptured(errorCaptured.bind(ctx))
}
if (renderTracked) {
onRenderTracked(renderTracked.bind(ctx))
}
if (renderTriggered) {
onRenderTriggered(renderTriggered.bind(ctx))
2019-09-04 10:25:38 +08:00
}
2019-09-05 22:07:43 +08:00
if (beforeUnmount) {
onBeforeUnmount(beforeUnmount.bind(ctx))
2019-09-04 10:25:38 +08:00
}
2019-09-05 22:07:43 +08:00
if (unmounted) {
onUnmounted(unmounted.bind(ctx))
}
}
function callSyncHook(
name: 'beforeCreate' | 'created',
options: ComponentOptions,
2019-10-22 11:37:03 +08:00
ctx: ComponentPublicInstance,
2019-09-05 22:07:43 +08:00
globalMixins: ComponentOptions[]
) {
callHookFromMixins(name, globalMixins, ctx)
const baseHook = options.extends && options.extends[name]
if (baseHook) {
baseHook.call(ctx)
}
const mixins = options.mixins
if (mixins) {
callHookFromMixins(name, mixins, ctx)
}
const selfHook = options[name]
if (selfHook) {
selfHook.call(ctx)
}
}
function callHookFromMixins(
name: 'beforeCreate' | 'created',
mixins: ComponentOptions[],
2019-10-22 11:37:03 +08:00
ctx: ComponentPublicInstance
2019-09-05 22:07:43 +08:00
) {
for (let i = 0; i < mixins.length; i++) {
const fn = mixins[i][name]
if (fn) {
fn.call(ctx)
}
2019-09-04 10:25:38 +08:00
}
}
2019-09-04 11:04:11 +08:00
2019-09-07 00:58:31 +08:00
function applyMixins(
instance: ComponentInternalInstance,
mixins: ComponentOptions[]
) {
2019-09-04 23:36:27 +08:00
for (let i = 0; i < mixins.length; i++) {
applyOptions(instance, mixins[i], true)
}
}
function createWatcher(
raw: ComponentWatchOptionItem,
renderContext: Data,
ctx: ComponentPublicInstance,
key: string
) {
const getter = () => (ctx as Data)[key]
if (isString(raw)) {
const handler = renderContext[raw]
if (isFunction(handler)) {
2019-12-31 00:30:12 +08:00
watch(getter, handler as WatchCallback)
} else if (__DEV__) {
warn(`Invalid watch handler specified by key "${raw}"`, handler)
}
} else if (isFunction(raw)) {
watch(getter, raw.bind(ctx))
} else if (isObject(raw)) {
if (isArray(raw)) {
raw.forEach(r => createWatcher(r, renderContext, ctx, key))
} else {
watch(getter, raw.handler.bind(ctx), raw)
}
} else if (__DEV__) {
warn(`Invalid watch option: "${key}"`)
}
}