refactor(types): widen Component type to include consutructor types

returned from `defineComponent`

ref: vuejs/router#421
also close vuejs#1880

Previous `Component` type is now exported as `ConcreteComponent`.

This introduces a minor breaking change when calling `h(comp, { ... })`
will now fail if `comp` is a of generic `Component` type, since it does
not specify what props it expects.

Author: yyx990803

packages/runtime-core/__tests__/components/Suspense.spec.ts

@@ -11,8 +11,7 @@ import {
   watch,
   watchEffect,
   onUnmounted,
-  onErrorCaptured,
-  Component
+  onErrorCaptured
 } from '@vue/runtime-test'
 
 describe('Suspense', () => {
@@ -31,7 +30,7 @@ describe('Suspense', () => {
       setup(props: any, { slots }: any) {
         const p = new Promise(resolve => {
           setTimeout(() => {
-            resolve(() => h<Component>(comp, props, slots))
+            resolve(() => h(comp, props, slots))
           }, delay)
         })
         // in Node 12, due to timer/nextTick mechanism change, we have to wait

packages/runtime-core/src/apiAsyncComponent.ts

@@ -1,30 +1,28 @@
 import {
-  PublicAPIComponent,
   Component,
+  ConcreteComponent,
   currentInstance,
   ComponentInternalInstance,
   isInSSRComponentSetup
 } from './component'
 import { isFunction, isObject } from '@vue/shared'
-import { ComponentPublicInstance } from './componentProxy'
+import { ComponentPublicInstance } from './componentPublicInstance'
 import { createVNode } from './vnode'
 import { defineComponent } from './apiDefineComponent'
 import { warn } from './warning'
 import { ref } from '@vue/reactivity'
 import { handleError, ErrorCodes } from './errorHandling'
 
-export type AsyncComponentResolveResult<T = PublicAPIComponent> =
-  | T
-  | { default: T } // es modules
+export type AsyncComponentResolveResult<T = Component> = T | { default: T } // es modules
 
 export type AsyncComponentLoader<T = any> = () => Promise<
   AsyncComponentResolveResult<T>
 >
 
 export interface AsyncComponentOptions<T = any> {
   loader: AsyncComponentLoader<T>
-  loadingComponent?: PublicAPIComponent
-  errorComponent?: PublicAPIComponent
+  loadingComponent?: Component
+  errorComponent?: Component
   delay?: number
   timeout?: number
   suspensible?: boolean
@@ -37,7 +35,7 @@ export interface AsyncComponentOptions<T = any> {
 }
 
 export function defineAsyncComponent<
-  T extends PublicAPIComponent = { new (): ComponentPublicInstance }
+  T extends Component = { new (): ComponentPublicInstance }
 >(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T {
   if (isFunction(source)) {
     source = { loader: source }
@@ -53,8 +51,8 @@ export function defineAsyncComponent<
     onError: userOnError
   } = source
 
-  let pendingRequest: Promise<Component> | null = null
-  let resolvedComp: Component | undefined
+  let pendingRequest: Promise<ConcreteComponent> | null = null
+  let resolvedComp: ConcreteComponent | undefined
 
   let retries = 0
   const retry = () => {
@@ -63,8 +61,8 @@ export function defineAsyncComponent<
     return load()
   }
 
-  const load = (): Promise<Component> => {
-    let thisRequest: Promise<Component>
+  const load = (): Promise<ConcreteComponent> => {
+    let thisRequest: Promise<ConcreteComponent>
     return (
       pendingRequest ||
       (thisRequest = pendingRequest = loader()
@@ -135,7 +133,9 @@ export function defineAsyncComponent<
             onError(err)
             return () =>
               errorComponent
-                ? createVNode(errorComponent as Component, { error: err })
+                ? createVNode(errorComponent as ConcreteComponent, {
+                    error: err
+                  })
                 : null
           })
       }
@@ -175,19 +175,19 @@ export function defineAsyncComponent<
         if (loaded.value && resolvedComp) {
           return createInnerComp(resolvedComp, instance)
         } else if (error.value && errorComponent) {
-          return createVNode(errorComponent as Component, {
+          return createVNode(errorComponent as ConcreteComponent, {
             error: error.value
           })
         } else if (loadingComponent && !delayed.value) {
-          return createVNode(loadingComponent as Component)
+          return createVNode(loadingComponent as ConcreteComponent)
         }
       }
     }
   }) as any
 }
 
 function createInnerComp(
-  comp: Component,
+  comp: ConcreteComponent,
   { vnode: { props, children } }: ComponentInternalInstance
 ) {
   return createVNode(comp, props, children)

packages/runtime-core/src/apiCreateApp.ts

@@ -1,11 +1,11 @@
 import {
-  Component,
+  ConcreteComponent,
   Data,
   validateComponentName,
-  PublicAPIComponent
+  Component
 } from './component'
 import { ComponentOptions } from './componentOptions'
-import { ComponentPublicInstance } from './componentProxy'
+import { ComponentPublicInstance } from './componentPublicInstance'
 import { Directive, validateDirectiveName } from './directives'
 import { RootRenderFunction } from './renderer'
 import { InjectionKey } from './apiInject'
@@ -21,8 +21,8 @@ export interface App<HostElement = any> {
   config: AppConfig
   use(plugin: Plugin, ...options: any[]): this
   mixin(mixin: ComponentOptions): this
-  component(name: string): PublicAPIComponent | undefined
-  component(name: string, component: PublicAPIComponent): this
+  component(name: string): Component | undefined
+  component(name: string, component: Component): this
   directive(name: string): Directive | undefined
   directive(name: string, directive: Directive): this
   mount(
@@ -33,7 +33,7 @@ export interface App<HostElement = any> {
   provide<T>(key: InjectionKey<T> | string, value: T): this
 
   // internal, but we need to expose these for the server-renderer and devtools
-  _component: Component
+  _component: ConcreteComponent
   _props: Data | null
   _container: HostElement | null
   _context: AppContext
@@ -70,7 +70,7 @@ export interface AppContext {
   app: App // for devtools
   config: AppConfig
   mixins: ComponentOptions[]
-  components: Record<string, PublicAPIComponent>
+  components: Record<string, Component>
   directives: Record<string, Directive>
   provides: Record<string | symbol, any>
   reload?: () => void // HMR only
@@ -104,7 +104,7 @@ export function createAppContext(): AppContext {
 }
 
 export type CreateAppFunction<HostElement> = (
-  rootComponent: PublicAPIComponent,
+  rootComponent: Component,
   rootProps?: Data | null
 ) => App<HostElement>
 
@@ -124,7 +124,7 @@ export function createAppAPI<HostElement>(
     let isMounted = false
 
     const app: App = (context.app = {
-      _component: rootComponent as Component,
+      _component: rootComponent as ConcreteComponent,
       _props: rootProps,
       _container: null,
       _context: context,
@@ -177,7 +177,7 @@ export function createAppAPI<HostElement>(
         return app
       },
 
-      component(name: string, component?: PublicAPIComponent): any {
+      component(name: string, component?: Component): any {
         if (__DEV__) {
           validateComponentName(name, context.config)
         }
@@ -208,7 +208,10 @@ export function createAppAPI<HostElement>(
 
       mount(rootContainer: HostElement, isHydrate?: boolean): any {
         if (!isMounted) {
-          const vnode = createVNode(rootComponent as Component, rootProps)
+          const vnode = createVNode(
+            rootComponent as ConcreteComponent,
+            rootProps
+          )
           // store app context on the root VNode.
           // this will be set on the root instance on initial mount.
           vnode.appContext = context

packages/runtime-core/src/apiDefineComponent.ts

@@ -16,7 +16,7 @@ import {
 import {
   CreateComponentPublicInstance,
   ComponentPublicInstanceConstructor
-} from './componentProxy'
+} from './componentPublicInstance'
 import { ExtractPropTypes, ComponentPropsOptions } from './componentProps'
 import { EmitsOptions } from './componentEmits'
 import { isFunction } from '@vue/shared'
@@ -205,7 +205,5 @@ export function defineComponent<
 
 // implementation, close to no-op
 export function defineComponent(options: unknown) {
-  return isFunction(options)
-    ? { setup: options, name: options.name }
-    : options
+  return isFunction(options) ? { setup: options, name: options.name } : options
 }

packages/runtime-core/src/apiLifecycle.ts

@@ -5,7 +5,7 @@ import {
   setCurrentInstance,
   isInSSRComponentSetup
 } from './component'
-import { ComponentPublicInstance } from './componentProxy'
+import { ComponentPublicInstance } from './componentPublicInstance'
 import { callWithAsyncErrorHandling, ErrorTypeStrings } from './errorHandling'
 import { warn } from './warning'
 import { capitalize } from '@vue/shared'

packages/runtime-core/src/component.ts

@@ -7,14 +7,14 @@ import {
   proxyRefs
 } from '@vue/reactivity'
 import {
-  CreateComponentPublicInstance,
   ComponentPublicInstance,
   PublicInstanceProxyHandlers,
   RuntimeCompiledPublicInstanceProxyHandlers,
   createRenderContext,
   exposePropsOnRenderContext,
-  exposeSetupStateOnRenderContext
-} from './componentProxy'
+  exposeSetupStateOnRenderContext,
+  ComponentPublicInstanceConstructor
+} from './componentPublicInstance'
 import {
   ComponentPropsOptions,
   NormalizedPropsOptions,
@@ -110,21 +110,19 @@ export interface ClassComponent {
   __vccOpts: ComponentOptions
 }
 
-export type Component = ComponentOptions | FunctionalComponent<any, any>
-
-// A type used in public APIs where a component type is expected.
-// The constructor type is an artificial type returned by defineComponent().
-export type PublicAPIComponent =
-  | Component
-  | {
-      new (...args: any[]): CreateComponentPublicInstance<
-        any,
-        any,
-        any,
-        any,
-        any
-      >
-    }
+/**
+ * Concrete component type matches its actual value: it's either an options
+ * object, or a function. Use this where the code expects to work with actual
+ * values, e.g. checking if its a function or not. This is mostly for internal
+ * implementation code.
+ */
+export type ConcreteComponent = ComponentOptions | FunctionalComponent<any, any>
+
+/**
+ * A type used in public APIs where a component type is expected.
+ * The constructor type is an artificial type returned by defineComponent().
+ */
+export type Component = ConcreteComponent | ComponentPublicInstanceConstructor
 
 export { ComponentOptions }
 
@@ -174,7 +172,7 @@ export type InternalRenderFunction = {
  */
 export interface ComponentInternalInstance {
   uid: number
-  type: Component
+  type: ConcreteComponent
   parent: ComponentInternalInstance | null
   root: ComponentInternalInstance
   appContext: AppContext
@@ -346,7 +344,7 @@ export function createComponentInstance(
   parent: ComponentInternalInstance | null,
   suspense: SuspenseBoundary | null
 ) {
-  const type = vnode.type as Component
+  const type = vnode.type as ConcreteComponent
   // inherit parent app context - or - if root, adopt from root vnode
   const appContext =
     (parent ? parent.appContext : vnode.appContext) || emptyAppContext
@@ -703,7 +701,7 @@ const classify = (str: string): string =>
 /* istanbul ignore next */
 export function formatComponentName(
   instance: ComponentInternalInstance | null,
-  Component: Component,
+  Component: ConcreteComponent,
   isRoot = false
 ): string {
   let name = isFunction(Component)

packages/runtime-core/src/componentEmits.ts

@@ -8,7 +8,7 @@ import {
   isFunction,
   extend
 } from '@vue/shared'
-import { ComponentInternalInstance, Component } from './component'
+import { ComponentInternalInstance, ConcreteComponent } from './component'
 import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
 import { warn } from './warning'
 import { normalizePropsOptions } from './componentProps'
@@ -94,7 +94,7 @@ export function emit(
 }
 
 function normalizeEmitsOptions(
-  comp: Component
+  comp: ConcreteComponent
 ): ObjectEmitsOptions | undefined {
   if (hasOwn(comp, '__emits')) {
     return comp.__emits
@@ -131,7 +131,7 @@ function normalizeEmitsOptions(
 // Check if an incoming prop key is a declared emit event listener.
 // e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are
 // both considered matched listeners.
-export function isEmitListener(comp: Component, key: string): boolean {
+export function isEmitListener(comp: ConcreteComponent, key: string): boolean {
   let emits: ObjectEmitsOptions | undefined
   if (!isOn(key) || !(emits = normalizeEmitsOptions(comp))) {
     return false

packages/runtime-core/src/componentOptions.ts

@@ -3,8 +3,8 @@ import {
   Data,
   SetupContext,
   ComponentInternalOptions,
-  PublicAPIComponent,
   Component,
+  ConcreteComponent,
   InternalRenderFunction
 } from './component'
 import {
@@ -52,7 +52,7 @@ import { Directive } from './directives'
 import {
   CreateComponentPublicInstance,
   ComponentPublicInstance
-} from './componentProxy'
+} from './componentPublicInstance'
 import { warn } from './warning'
 import { VNodeChild } from './vnode'
 
@@ -103,7 +103,7 @@ export interface ComponentOptionsBase<
   // Luckily `render()` doesn't need any arguments nor does it care about return
   // type.
   render?: Function
-  components?: Record<string, PublicAPIComponent>
+  components?: Record<string, Component>
   directives?: Record<string, Directive>
   inheritAttrs?: boolean
   emits?: (E | EE[]) & ThisType<void>
@@ -132,7 +132,7 @@ export interface ComponentOptionsBase<
    * marker for AsyncComponentWrapper
    * @internal
    */
-  __asyncLoader?: () => Promise<Component>
+  __asyncLoader?: () => Promise<ConcreteComponent>
   /**
    * cache for merged $options
    * @internal