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

260 lines
6.0 KiB
TypeScript
Raw Normal View History

2019-09-04 10:25:38 +08:00
import {
ComponentInstance,
Data,
ComponentOptions,
2019-09-04 23:36:27 +08:00
currentRenderingInstance,
currentInstance
2019-09-04 10:25:38 +08:00
} from './component'
import {
isFunction,
extend,
isString,
isObject,
isArray,
2019-09-04 23:36:27 +08:00
EMPTY_OBJ,
capitalize,
camelize
2019-09-04 10:25:38 +08:00
} from '@vue/shared'
import { computed, ComputedOptions } from './apiReactivity'
2019-09-04 23:36:27 +08:00
import { watch } from './apiWatch'
2019-09-04 10:25:38 +08:00
import { provide, inject } from './apiInject'
import {
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onErrorCaptured,
onRenderTracked,
onBeforeUnmount,
onUnmounted
} from './apiLifecycle'
import { DebuggerEvent } from '@vue/reactivity'
2019-09-04 23:36:27 +08:00
import { warn } from './warning'
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
// TODO type inference for these options
export interface LegacyOptions {
el?: any
// state
data?: Data | (() => Data)
computed?: Record<string, (() => any) | ComputedOptions>
methods?: Record<string, Function>
// TODO watch array
watch?: Record<
string,
| string
| Function
| { handler: Function; deep?: boolean; immediate: boolean }
>
provide?: Data | (() => Data)
inject?:
| string[]
| Record<
string | symbol,
string | symbol | { from: string | symbol; default: any }
>
// composition
mixins?: LegacyComponent[]
extends?: LegacyComponent
// lifecycle
beforeCreate?(): void
created?(): void
beforeMount?(): void
mounted?(): void
beforeUpdate?(): void
updated?(): void
activated?(): void
decativated?(): void
beforeDestroy?(): void
destroyed?(): void
renderTracked?(e: DebuggerEvent): void
renderTriggered?(e: DebuggerEvent): void
2019-09-05 01:50:57 +08:00
errorCaptured?(): boolean | void
2019-09-04 10:25:38 +08:00
}
2019-09-04 23:36:27 +08:00
export function applyOptions(
instance: ComponentInstance,
options: ComponentOptions,
asMixin: boolean = false
) {
2019-09-04 10:25:38 +08:00
const data =
instance.data === EMPTY_OBJ ? (instance.data = {}) : instance.data
const ctx = instance.renderProxy as any
const {
2019-09-04 23:36:27 +08:00
// composition
mixins,
extends: extendsOptions,
// state
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
// beforeCreate is handled separately
created,
beforeMount,
mounted,
beforeUpdate,
updated,
// TODO activated
// TODO decativated
beforeDestroy,
destroyed,
renderTracked,
renderTriggered,
errorCaptured
2019-09-04 23:36:27 +08:00
} = options
// global mixins are applied first, and only if this is a non-mixin call
// so that they are applied once per instance.
if (!asMixin) {
applyMixins(instance, instance.appContext.mixins)
}
// 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
2019-09-04 23:36:27 +08:00
// state options
2019-09-04 10:25:38 +08:00
if (dataOptions) {
extend(data, isFunction(dataOptions) ? dataOptions.call(ctx) : dataOptions)
}
if (computedOptions) {
for (const key in computedOptions) {
data[key] = computed(computedOptions[key] as any)
}
}
if (methods) {
for (const key in methods) {
data[key] = methods[key].bind(ctx)
}
}
if (watchOptions) {
for (const key in watchOptions) {
const raw = watchOptions[key]
const getter = () => ctx[key]
if (isString(raw)) {
const handler = data[key]
if (isFunction(handler)) {
watch(getter, handler.bind(ctx))
} else if (__DEV__) {
// TODO warn invalid watch handler path
}
} else if (isFunction(raw)) {
watch(getter, raw.bind(ctx))
} else if (isObject(raw)) {
2019-09-04 11:04:11 +08:00
// TODO 2.x compat
watch(getter, raw.handler.bind(ctx), raw)
2019-09-04 10:25:38 +08:00
} else if (__DEV__) {
// TODO warn invalid watch options
}
}
}
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]
data[key] = inject(key)
}
} else {
for (const key in injectOptions) {
const opt = injectOptions[key]
if (isObject(opt)) {
data[key] = inject(opt.from, opt.default)
} else {
data[key] = inject(opt)
}
}
}
}
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-04 10:25:38 +08:00
if (created) {
created.call(ctx)
}
if (beforeMount) {
onBeforeMount(beforeMount.bind(ctx))
}
if (mounted) {
onMounted(mounted.bind(ctx))
}
if (beforeUpdate) {
onBeforeUpdate(beforeUpdate.bind(ctx))
}
if (updated) {
onUpdated(updated.bind(ctx))
}
if (errorCaptured) {
onErrorCaptured(errorCaptured.bind(ctx))
}
if (renderTracked) {
onRenderTracked(renderTracked.bind(ctx))
}
if (renderTriggered) {
onRenderTracked(renderTriggered.bind(ctx))
}
if (beforeDestroy) {
onBeforeUnmount(beforeDestroy.bind(ctx))
}
if (destroyed) {
onUnmounted(destroyed.bind(ctx))
}
}
2019-09-04 11:04:11 +08:00
2019-09-04 23:36:27 +08:00
function applyMixins(instance: ComponentInstance, mixins: ComponentOptions[]) {
for (let i = 0; i < mixins.length; i++) {
applyOptions(instance, mixins[i], true)
}
}
export function resolveAsset(type: 'components' | 'directives', name: string) {
const instance = currentRenderingInstance || currentInstance
if (instance) {
let camelized
const registry = instance[type]
const res =
registry[name] ||
registry[(camelized = camelize(name))] ||
registry[capitalize(camelized)]
if (__DEV__ && !res) {
warn(`Failed to resolve ${type.slice(0, -1)}: ${name}`)
}
return res
} else if (__DEV__) {
warn(
`resolve${capitalize(type.slice(0, -1))} ` +
`can only be used in render() or setup().`
)
}
2019-09-04 11:04:11 +08:00
}