feat(core): support recursively resolving self component by name

packages/runtime-core/src/helpers/resolveAssets.ts

@@ -2,7 +2,8 @@ import { currentRenderingInstance } from '../componentRenderUtils'
 import {
   currentInstance,
   Component,
-  ComponentInternalInstance
+  ComponentInternalInstance,
+  FunctionalComponent
 } from '../component'
 import { Directive } from '../directives'
 import {
@@ -14,8 +15,11 @@ import {
 } from '@vue/shared'
 import { warn } from '../warning'
 
+const COMPONENTS = 'components'
+const DIRECTIVES = 'directives'
+
 export function resolveComponent(name: string): Component | undefined {
-  return resolveAsset('components', name)
+  return resolveAsset(COMPONENTS, name)
 }
 
 export function resolveDynamicComponent(
@@ -28,42 +32,54 @@ export function resolveDynamicComponent(
 ): Component | undefined {
   if (!component) return
   if (isString(component)) {
-    return resolveAsset('components', component, instance)
+    return resolveAsset(COMPONENTS, component, instance)
   } else if (isFunction(component) || isObject(component)) {
     return component
   }
 }
 
 export function resolveDirective(name: string): Directive | undefined {
-  return resolveAsset('directives', name)
+  return resolveAsset(DIRECTIVES, name)
 }
 
 // overload 1: components
 function resolveAsset(
-  type: 'components',
+  type: typeof COMPONENTS,
   name: string,
   instance?: ComponentInternalInstance
 ): Component | undefined
 // overload 2: directives
 function resolveAsset(
-  type: 'directives',
+  type: typeof DIRECTIVES,
   name: string,
   instance?: ComponentInternalInstance
 ): Directive | undefined
 
 function resolveAsset(
-  type: 'components' | 'directives',
+  type: typeof COMPONENTS | typeof DIRECTIVES,
   name: string,
   instance: ComponentInternalInstance | null = currentRenderingInstance ||
     currentInstance
 ) {
   if (instance) {
-    let camelized
+    let camelized, capitalized
     const registry = instance[type]
-    const res =
+    let res =
       registry[name] ||
       registry[(camelized = camelize(name))] ||
-      registry[capitalize(camelized)]
+      registry[(capitalized = capitalize(camelized))]
+    if (!res && type === COMPONENTS) {
+      const self = instance.type
+      const selfName = (self as FunctionalComponent).displayName || self.name
+      if (
+        selfName &&
+        (selfName === name ||
+          selfName === camelized ||
+          selfName === capitalized)
+      ) {
+        res = self
+      }
+    }
     if (__DEV__ && !res) {
       warn(`Failed to resolve ${type.slice(0, -1)}: ${name}`)
     }