types: rename

This commit is contained in:
Evan You 2018-10-09 11:37:24 -04:00
parent d22b71b27e
commit e698c8f492
13 changed files with 118 additions and 100 deletions

View File

@ -17,7 +17,7 @@ export interface ComponentClass extends Flatten<typeof InternalComponent> {
new <P extends object = {}, D extends object = {}>(): MergedComponent<P, D>
}
export type MergedComponent<P, D> = D & P & MountedComponent<P, D>
export type MergedComponent<P, D> = D & P & ComponentInstance<P, D>
export interface FunctionalComponent<P = {}> {
(props: Readonly<P>, slots: Slots, attrs: Data): any
@ -31,15 +31,15 @@ export type ComponentType = ComponentClass | FunctionalComponent
// this interface is merged with the class type
// to represent a mounted component
export interface MountedComponent<P = {}, D = {}> extends InternalComponent {
export interface ComponentInstance<P = {}, D = {}> extends InternalComponent {
$vnode: MountedVNode
$data: D
$props: Readonly<P>
$attrs: Data
$computed: Data
$slots: Slots
$root: MountedComponent
$children: MountedComponent[]
$root: ComponentInstance
$children: ComponentInstance[]
$options: ComponentOptions<P, D>
data?(): Partial<D>
@ -58,7 +58,7 @@ export interface MountedComponent<P = {}, D = {}> extends InternalComponent {
errorCaptured?(): (
err: Error,
type: ErrorTypes,
target: MountedComponent
target: ComponentInstance
) => boolean | void
activated?(): void
deactivated?(): void
@ -68,7 +68,7 @@ export interface MountedComponent<P = {}, D = {}> extends InternalComponent {
$forceUpdate: () => void
$nextTick: (fn: () => void) => Promise<any>
_self: MountedComponent<D, P> // on proxies only
_self: ComponentInstance<D, P> // on proxies only
}
class InternalComponent {
@ -85,11 +85,11 @@ class InternalComponent {
public $attrs: Data | null = null
public $computed: Data | null = null
public $slots: Slots | null = null
public $root: MountedComponent | null = null
public $parent: MountedComponent | null = null
public $children: MountedComponent[] = []
public $root: ComponentInstance | null = null
public $parent: ComponentInstance | null = null
public $children: ComponentInstance[] = []
public $options: any
public $refs: Record<string, MountedComponent | RenderNode> = {}
public $refs: Record<string, ComponentInstance | RenderNode> = {}
public $proxy: any = null
public $forceUpdate: (() => void) | null = null
@ -118,10 +118,10 @@ class InternalComponent {
}
$watch(
keyOrFn: string | (() => any),
cb: (newValue: any, oldValue: any) => void,
keyOrFn: string | ((this: this) => any),
cb: (this: this, newValue: any, oldValue: any) => void,
options?: WatchOptions
) {
): () => void {
return setupWatcher(this as any, keyOrFn, cb, options)
}

View File

@ -1,6 +1,6 @@
import { EMPTY_OBJ } from './utils'
import { computed, stop, ComputedGetter } from '@vue/observer'
import { ComponentClass, MountedComponent } from './component'
import { ComponentClass, ComponentInstance } from './component'
import { ComponentComputedOptions } from './componentOptions'
const extractionCache: WeakMap<
@ -30,7 +30,7 @@ export function getComputedOptions(
}
export function initializeComputed(
instance: MountedComponent,
instance: ComponentInstance,
computedOptions: ComponentComputedOptions | undefined
) {
if (!computedOptions) {
@ -58,7 +58,7 @@ export function initializeComputed(
)
}
export function teardownComputed(instance: MountedComponent) {
export function teardownComputed(instance: ComponentInstance) {
const handles = instance._computedGetters
if (handles !== null) {
for (const key in handles) {

View File

@ -1,4 +1,4 @@
import { MergedComponent, MountedComponent } from './component'
import { MergedComponent, ComponentInstance } from './component'
import { Slots } from './vdom'
export type Data = Record<string, any>
@ -38,15 +38,15 @@ export interface PropOptions<T = any> {
validator?(value: T): boolean
}
export interface ComponentComputedOptions<This = MountedComponent> {
export interface ComponentComputedOptions<This = ComponentInstance> {
[key: string]: (this: This, c: any) => any
}
export interface ComponentWatchOptions<This = MountedComponent> {
export interface ComponentWatchOptions<This = ComponentInstance> {
[key: string]: ComponentWatchOption<This>
}
export type ComponentWatchOption<This = MountedComponent> =
export type ComponentWatchOption<This = ComponentInstance> =
| WatchHandler<This>
| WatchHandler<This>[]
| WatchOptionsWithHandler<This>

View File

@ -1,5 +1,5 @@
import { immutable, unwrap, lock, unlock } from '@vue/observer'
import { MountedComponent } from './component'
import { ComponentInstance } from './component'
import {
Data,
ComponentPropsOptions,
@ -16,13 +16,16 @@ import {
capitalize
} from './utils'
export function initializeProps(instance: MountedComponent, data: Data | null) {
export function initializeProps(
instance: ComponentInstance,
data: Data | null
) {
const { props, attrs } = resolveProps(data, instance.$options.props)
instance.$props = immutable(props || {})
instance.$attrs = immutable(attrs || {})
}
export function updateProps(instance: MountedComponent, nextData: Data) {
export function updateProps(instance: ComponentInstance, nextData: Data) {
// instance.$props and instance.$attrs are observables that should not be
// replaced. Instead, we mutate them to match latest props, which will trigger
// updates if any value that's been used in child component has changed.

View File

@ -1,4 +1,4 @@
import { MountedComponent } from './component'
import { ComponentInstance } from './component'
const bindCache = new WeakMap()
@ -15,7 +15,7 @@ function getBoundMethod(fn: Function, target: any, receiver: any): Function {
}
const renderProxyHandlers = {
get(target: MountedComponent<any, any>, key: string, receiver: any) {
get(target: ComponentInstance<any, any>, key: string, receiver: any) {
if (key === '_self') {
return target
} else if (
@ -50,7 +50,7 @@ const renderProxyHandlers = {
}
},
set(
target: MountedComponent<any, any>,
target: ComponentInstance<any, any>,
key: string,
value: any,
receiver: any
@ -77,6 +77,6 @@ const renderProxyHandlers = {
}
}
export function createRenderProxy(instance: any): MountedComponent {
return new Proxy(instance, renderProxyHandlers) as MountedComponent
export function createRenderProxy(instance: any): ComponentInstance {
return new Proxy(instance, renderProxyHandlers) as ComponentInstance
}

View File

@ -1,8 +1,8 @@
import { EMPTY_OBJ } from './utils'
import { MountedComponent } from './component'
import { ComponentInstance } from './component'
import { observable } from '@vue/observer'
export function initializeState(instance: MountedComponent) {
export function initializeState(instance: ComponentInstance) {
if (instance.data) {
instance._rawData = instance.data()
instance.$data = observable(instance._rawData)

View File

@ -2,7 +2,7 @@ import { VNodeFlags } from './flags'
import { EMPTY_OBJ } from './utils'
import { h } from './h'
import { VNode, MountedVNode, createFragment } from './vdom'
import { Component, MountedComponent, ComponentClass } from './component'
import { Component, ComponentInstance, ComponentClass } from './component'
import { createTextVNode, cloneVNode } from './vdom'
import { initializeState } from './componentState'
import { initializeProps } from './componentProps'
@ -12,16 +12,16 @@ import {
teardownComputed
} from './componentComputed'
import { initializeWatch, teardownWatch } from './componentWatch'
import { Data, ComponentOptions } from './componentOptions'
import { ComponentOptions } from './componentOptions'
import { createRenderProxy } from './componentProxy'
import { handleError, ErrorTypes } from './errorHandling'
export function createComponentInstance(
vnode: VNode,
Component: ComponentClass,
parentComponent: MountedComponent | null
): MountedComponent {
const instance = (vnode.children = new Component()) as MountedComponent
parentComponent: ComponentInstance | null
): ComponentInstance {
const instance = (vnode.children = new Component()) as ComponentInstance
instance.$parentVNode = vnode as MountedVNode
// renderProxy
@ -50,10 +50,10 @@ export function createComponentInstance(
instance.created.call(proxy)
}
return instance as MountedComponent
return instance as ComponentInstance
}
export function renderInstanceRoot(instance: MountedComponent): VNode {
export function renderInstanceRoot(instance: ComponentInstance): VNode {
let vnode
try {
vnode = instance.render.call(instance.$proxy, h, {
@ -79,7 +79,7 @@ export function renderInstanceRoot(instance: MountedComponent): VNode {
)
}
export function teardownComponentInstance(instance: MountedComponent) {
export function teardownComponentInstance(instance: ComponentInstance) {
if (instance._unmounted) {
return
}
@ -97,7 +97,7 @@ export function teardownComponentInstance(instance: MountedComponent) {
export function normalizeComponentRoot(
vnode: any,
componentVNode: VNode | null,
attrs: Data | void,
attrs: Record<string, any> | void,
inheritAttrs: boolean | void
): VNode {
if (vnode == null) {
@ -141,8 +141,8 @@ export function normalizeComponentRoot(
}
export function shouldUpdateFunctionalComponent(
prevProps: Data | null,
nextProps: Data | null
prevProps: Record<string, any> | null,
nextProps: Record<string, any> | null
): boolean {
if (prevProps === nextProps) {
return false
@ -170,25 +170,31 @@ export function shouldUpdateFunctionalComponent(
export function createComponentClassFromOptions(
options: ComponentOptions
): ComponentClass {
class ObjectComponent extends Component {
class AnonymousComponent extends Component {
constructor() {
super()
this.$options = options
}
}
const proto = AnonymousComponent.prototype as any
for (const key in options) {
const value = options[key]
// name -> displayName
if (__COMPAT__ && key === 'name') {
options.displayName = options.name
}
if (typeof value === 'function') {
;(ObjectComponent.prototype as any)[key] =
key === 'render'
? function() {
if (__COMPAT__ && key === 'render') {
proto[key] = function() {
return value.call(this, h)
}
: value
} else {
proto[key] = value
}
}
if (key === 'computed') {
const isGet = typeof value === 'function'
Object.defineProperty(ObjectComponent.prototype, key, {
Object.defineProperty(proto, key, {
configurable: true,
get: isGet ? value : value.get,
set: isGet ? undefined : value.set
@ -196,9 +202,15 @@ export function createComponentClassFromOptions(
}
if (key === 'methods') {
for (const method in value) {
;(ObjectComponent.prototype as any)[method] = value[method]
if (__DEV__ && proto.hasOwnProperty(method)) {
console.warn(
`Object syntax contains method name that conflicts with ` +
`lifecycle hook: "${method}"`
)
}
proto[method] = value[method]
}
}
}
return ObjectComponent as ComponentClass
return AnonymousComponent as ComponentClass
}

View File

@ -1,12 +1,12 @@
import { EMPTY_OBJ, NOOP } from './utils'
import { MountedComponent } from './component'
import { ComponentInstance } from './component'
import { ComponentWatchOptions, WatchOptions } from './componentOptions'
import { autorun, stop } from '@vue/observer'
import { queueJob } from '@vue/scheduler'
import { handleError, ErrorTypes } from './errorHandling'
export function initializeWatch(
instance: MountedComponent,
instance: ComponentInstance,
options: ComponentWatchOptions | undefined
) {
if (options !== void 0) {
@ -26,7 +26,7 @@ export function initializeWatch(
}
export function setupWatcher(
instance: MountedComponent,
instance: ComponentInstance,
keyOrFn: string | Function,
cb: (newValue: any, oldValue: any) => void,
options: WatchOptions = EMPTY_OBJ as WatchOptions
@ -87,7 +87,7 @@ export function setupWatcher(
}
}
export function teardownWatch(instance: MountedComponent) {
export function teardownWatch(instance: ComponentInstance) {
if (instance._watchHandles !== null) {
instance._watchHandles.forEach(stop)
}

View File

@ -12,7 +12,7 @@ import {
VNodeChildren
} from './vdom'
import {
MountedComponent,
ComponentInstance,
FunctionalComponent,
ComponentClass
} from './component'
@ -111,7 +111,7 @@ export function createRenderer(options: RendererOptions) {
function mount(
vnode: VNode,
container: RenderNode | null,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -140,7 +140,7 @@ export function createRenderer(options: RendererOptions) {
function mountArrayChildren(
children: VNode[],
container: RenderNode | null,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -156,7 +156,7 @@ export function createRenderer(options: RendererOptions) {
function mountElement(
vnode: VNode,
container: RenderNode | null,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -198,7 +198,7 @@ export function createRenderer(options: RendererOptions) {
}
}
function mountRef(ref: Ref, el: RenderNode | MountedComponent) {
function mountRef(ref: Ref, el: RenderNode | ComponentInstance) {
lifecycleHooks.push(() => {
ref(el)
})
@ -207,7 +207,7 @@ export function createRenderer(options: RendererOptions) {
function mountStatefulComponent(
vnode: VNode,
container: RenderNode | null,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -229,7 +229,7 @@ export function createRenderer(options: RendererOptions) {
function mountFunctionalComponent(
vnode: VNode,
container: RenderNode | null,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -260,7 +260,7 @@ export function createRenderer(options: RendererOptions) {
function mountFragment(
vnode: VNode,
container: RenderNode | null,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -290,7 +290,7 @@ export function createRenderer(options: RendererOptions) {
function mountPortal(
vnode: VNode,
container: RenderNode | null,
parentComponent: MountedComponent | null
parentComponent: ComponentInstance | null
) {
const { tag, children, childFlags, ref } = vnode
const target = typeof tag === 'string' ? platformQuerySelector(tag) : tag
@ -354,7 +354,7 @@ export function createRenderer(options: RendererOptions) {
prevVNode: MountedVNode,
nextVNode: VNode,
container: RenderNode,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean
) {
const nextFlags = nextVNode.flags
@ -379,7 +379,7 @@ export function createRenderer(options: RendererOptions) {
prevVNode: MountedVNode,
nextVNode: VNode,
container: RenderNode,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean
) {
const { flags, tag } = nextVNode
@ -452,7 +452,7 @@ export function createRenderer(options: RendererOptions) {
prevVNode: MountedVNode,
nextVNode: VNode,
container: RenderNode,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean
) {
const { tag, flags } = nextVNode
@ -480,7 +480,7 @@ export function createRenderer(options: RendererOptions) {
} = nextVNode
const instance = (nextVNode.children =
prevVNode.children) as MountedComponent
prevVNode.children) as ComponentInstance
instance.$slots = nextSlots || EMPTY_OBJ
instance.$parentVNode = nextVNode as MountedVNode
@ -508,7 +508,7 @@ export function createRenderer(options: RendererOptions) {
prevVNode: MountedVNode,
nextVNode: VNode,
container: RenderNode,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean
) {
// functional component tree is stored on the vnode as `children`
@ -542,7 +542,7 @@ export function createRenderer(options: RendererOptions) {
prevVNode: MountedVNode,
nextVNode: VNode,
container: RenderNode,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean
) {
// determine the tail node of the previous fragment,
@ -599,7 +599,7 @@ export function createRenderer(options: RendererOptions) {
function patchPortal(
prevVNode: MountedVNode,
nextVNode: VNode,
parentComponent: MountedComponent | null
parentComponent: ComponentInstance | null
) {
const prevContainer = prevVNode.tag as RenderNode
const nextContainer = nextVNode.tag as RenderNode
@ -635,7 +635,7 @@ export function createRenderer(options: RendererOptions) {
prevVNode: MountedVNode,
nextVNode: VNode,
container: RenderNode,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean
) {
const refNode = platformNextSibling(getVNodeLastEl(prevVNode))
@ -649,7 +649,7 @@ export function createRenderer(options: RendererOptions) {
prevChildren: VNodeChildren,
nextChildren: VNodeChildren,
container: RenderNode,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -769,7 +769,7 @@ export function createRenderer(options: RendererOptions) {
container: RenderNode,
prevLength: number,
nextLength: number,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -807,7 +807,7 @@ export function createRenderer(options: RendererOptions) {
container: RenderNode,
prevLength: number,
nextLength: number,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
) {
@ -1074,9 +1074,9 @@ export function createRenderer(options: RendererOptions) {
} else if (flags & VNodeFlags.COMPONENT) {
if (flags & VNodeFlags.COMPONENT_STATEFUL) {
if (flags & VNodeFlags.COMPONENT_STATEFUL_SHOULD_KEEP_ALIVE) {
deactivateComponentInstance(children as MountedComponent)
deactivateComponentInstance(children as ComponentInstance)
} else {
unmountComponentInstance(children as MountedComponent)
unmountComponentInstance(children as ComponentInstance)
}
} else {
unmount(children as MountedVNode)
@ -1156,14 +1156,14 @@ export function createRenderer(options: RendererOptions) {
parentVNode: VNode,
Component: ComponentClass,
container: RenderNode | null,
parentComponent: MountedComponent | null,
parentComponent: ComponentInstance | null,
isSVG: boolean,
endNode: RenderNode | null
): RenderNode {
// a vnode may already have an instance if this is a compat call with
// new Vue()
const instance =
(__COMPAT__ && (parentVNode.children as MountedComponent)) ||
(__COMPAT__ && (parentVNode.children as ComponentInstance)) ||
createComponentInstance(parentVNode, Component, parentComponent)
// inject platform-specific unmount to keep-alive container
@ -1212,7 +1212,7 @@ export function createRenderer(options: RendererOptions) {
}
function mountComponentInstanceCallbacks(
instance: MountedComponent,
instance: ComponentInstance,
ref: Ref | null
) {
if (ref) {
@ -1225,7 +1225,10 @@ export function createRenderer(options: RendererOptions) {
}
}
function updateComponentInstance(instance: MountedComponent, isSVG: boolean) {
function updateComponentInstance(
instance: ComponentInstance,
isSVG: boolean
) {
const prevVNode = instance.$vnode
if (instance.beforeUpdate) {
@ -1277,7 +1280,7 @@ export function createRenderer(options: RendererOptions) {
}
}
function unmountComponentInstance(instance: MountedComponent) {
function unmountComponentInstance(instance: ComponentInstance) {
if (instance._unmounted) {
return
}
@ -1298,14 +1301,14 @@ export function createRenderer(options: RendererOptions) {
// Keep Alive ----------------------------------------------------------------
function activateComponentInstance(vnode: VNode) {
const instance = vnode.children as MountedComponent
const instance = vnode.children as ComponentInstance
vnode.el = instance.$el
lifecycleHooks.push(() => {
callActivatedHook(instance, true)
})
}
function callActivatedHook(instance: MountedComponent, asRoot: boolean) {
function callActivatedHook(instance: ComponentInstance, asRoot: boolean) {
// 1. check if we are inside an inactive parent tree.
if (asRoot) {
instance._inactiveRoot = false
@ -1323,11 +1326,11 @@ export function createRenderer(options: RendererOptions) {
}
}
function deactivateComponentInstance(instance: MountedComponent) {
function deactivateComponentInstance(instance: ComponentInstance) {
callDeactivateHook(instance, true)
}
function callDeactivateHook(instance: MountedComponent, asRoot: boolean) {
function callDeactivateHook(instance: ComponentInstance, asRoot: boolean) {
if (asRoot) {
instance._inactiveRoot = true
if (isInInactiveTree(instance)) return
@ -1344,7 +1347,7 @@ export function createRenderer(options: RendererOptions) {
}
}
function isInInactiveTree(instance: MountedComponent): boolean {
function isInInactiveTree(instance: ComponentInstance): boolean {
while ((instance = instance.$parent as any) !== null) {
if (instance._inactiveRoot) return true
}
@ -1376,7 +1379,7 @@ export function createRenderer(options: RendererOptions) {
}
flushHooks()
return vnode && vnode.flags & VNodeFlags.COMPONENT_STATEFUL
? (vnode.children as MountedComponent).$proxy
? (vnode.children as ComponentInstance).$proxy
: null
}

View File

@ -1,4 +1,4 @@
import { MountedComponent } from './component'
import { ComponentInstance } from './component'
export const enum ErrorTypes {
BEFORE_CREATE = 1,
@ -36,7 +36,7 @@ const ErrorTypeStrings: Record<number, string> = {
export function handleError(
err: Error,
instance: MountedComponent,
instance: ComponentInstance,
type: ErrorTypes
) {
let cur = instance

View File

@ -1,8 +1,8 @@
import { VNode } from '../vdom'
import { MountedComponent } from '../component'
import { ComponentInstance } from '../component'
interface DirectiveBinding {
instance: MountedComponent
instance: ComponentInstance
value?: any
oldValue?: any
arg?: string
@ -32,7 +32,7 @@ const valueCache = new WeakMap<Directive, WeakMap<any, any>>()
export function applyDirective(
vnode: VNode,
directive: Directive,
instance: MountedComponent,
instance: ComponentInstance,
value?: any,
arg?: string,
modifiers?: DirectiveModifiers

View File

@ -1,4 +1,4 @@
import { Component, ComponentClass, MountedComponent } from '../component'
import { Component, ComponentClass, ComponentInstance } from '../component'
import { VNode, Slots, cloneVNode } from '../vdom'
import { VNodeFlags } from '../flags'
@ -20,13 +20,13 @@ export class KeepAlive extends Component<KeepAliveProps> {
keys: Set<CacheKey> = new Set()
// to be set in createRenderer when instance is created
$unmount: (instance: MountedComponent) => void
$unmount: (instance: ComponentInstance) => void
beforeUnmount() {
this.cache.forEach(vnode => {
// change flag so it can be properly unmounted
vnode.flags = VNodeFlags.COMPONENT_STATEFUL_NORMAL
this.$unmount(vnode.children as MountedComponent)
this.$unmount(vnode.children as ComponentInstance)
})
}
@ -43,7 +43,7 @@ export class KeepAlive extends Component<KeepAliveProps> {
const cached = this.cache.get(key) as VNode
const current = this.$vnode
if (!current || cached.tag !== current.tag) {
this.$unmount(cached.children as MountedComponent)
this.$unmount(cached.children as ComponentInstance)
}
this.cache.delete(key)
this.keys.delete(key)

View File

@ -1,5 +1,5 @@
import {
MountedComponent,
ComponentInstance,
ComponentClass,
FunctionalComponent
} from './component'
@ -46,7 +46,7 @@ export interface VNodeData {
export type VNodeChildren =
| VNode[] // ELEMENT | PORTAL
| MountedComponent // COMPONENT_STATEFUL
| ComponentInstance // COMPONENT_STATEFUL
| VNode // COMPONENT_FUNCTIONAL
| string // TEXT
| null
@ -55,7 +55,7 @@ export type RawVNodeChildren = VNodeChildren | unknown[]
export type Key = string | number
export type Ref = (t: RenderNode | MountedComponent | null) => void
export type Ref = (t: RenderNode | ComponentInstance | null) => void
export type Slot = (...args: any[]) => VNode[]