types: rename

packages/core/src/component.ts

@@ -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)
   }
 

packages/core/src/componentComputed.ts

@@ -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) {

packages/core/src/componentOptions.ts

@@ -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>

packages/core/src/componentProps.ts

@@ -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.

packages/core/src/componentProxy.ts

@@ -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
 }

packages/core/src/componentState.ts

@@ -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)

packages/core/src/componentUtils.ts

@@ -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() {
-              return value.call(this, h)
-            }
-          : value
+      if (__COMPAT__ && key === 'render') {
+        proto[key] = function() {
+          return value.call(this, h)
+        }
+      } 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
 }

packages/core/src/componentWatch.ts

@@ -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)
   }

packages/core/src/createRenderer.ts

@@ -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
   }
 

packages/core/src/errorHandling.ts

@@ -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

packages/core/src/optional/directive.ts

@@ -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

packages/core/src/optional/keepAlive.ts

@@ -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)

packages/core/src/vdom.ts

@@ -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[]