diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 9e416586f..788a20b43 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -801,15 +801,21 @@ const classifyRE = /(?:^|[-_])(\w)/g const classify = (str: string): string => str.replace(classifyRE, c => c.toUpperCase()).replace(/[-_]/g, '') +export function getComponentName( + Component: ConcreteComponent +): string | undefined { + return isFunction(Component) + ? Component.displayName || Component.name + : Component.name +} + /* istanbul ignore next */ export function formatComponentName( instance: ComponentInternalInstance | null, Component: ConcreteComponent, isRoot = false ): string { - let name = isFunction(Component) - ? Component.displayName || Component.name - : Component.name + let name = getComponentName(Component) if (!name && Component.__file) { const match = Component.__file.match(/([^/\\]+)\.\w+$/) if (match) { diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts index 0630e3d16..f5c0bfd61 100644 --- a/packages/runtime-core/src/components/KeepAlive.ts +++ b/packages/runtime-core/src/components/KeepAlive.ts @@ -1,11 +1,11 @@ import { ConcreteComponent, getCurrentInstance, - FunctionalComponent, SetupContext, ComponentInternalInstance, LifecycleHooks, - currentInstance + currentInstance, + getComponentName } from '../component' import { VNode, cloneVNode, isVNode, VNodeProps } from '../vnode' import { warn } from '../warning' @@ -151,7 +151,7 @@ const KeepAliveImpl = { function pruneCache(filter?: (name: string) => boolean) { cache.forEach((vnode, key) => { - const name = getName(vnode.type as ConcreteComponent) + const name = getComponentName(vnode.type as ConcreteComponent) if (name && (!filter || !filter(name))) { pruneCacheEntry(key) } @@ -235,7 +235,7 @@ const KeepAliveImpl = { let vnode = getInnerChild(rawVNode) const comp = vnode.type as ConcreteComponent - const name = getName(comp) + const name = getComponentName(comp) const { include, exclude, max } = props if ( @@ -301,10 +301,6 @@ export const KeepAlive = (KeepAliveImpl as any) as { } } -function getName(comp: ConcreteComponent): string | void { - return (comp as FunctionalComponent).displayName || comp.name -} - function matches(pattern: MatchPattern, name: string): boolean { if (isArray(pattern)) { return pattern.some((p: string | RegExp) => matches(p, name)) diff --git a/packages/runtime-core/src/helpers/resolveAssets.ts b/packages/runtime-core/src/helpers/resolveAssets.ts index d94422c32..986079a95 100644 --- a/packages/runtime-core/src/helpers/resolveAssets.ts +++ b/packages/runtime-core/src/helpers/resolveAssets.ts @@ -2,8 +2,8 @@ import { currentRenderingInstance } from '../componentRenderUtils' import { currentInstance, ConcreteComponent, - FunctionalComponent, - ComponentOptions + ComponentOptions, + getComponentName } from '../component' import { Directive } from '../directives' import { camelize, capitalize, isString } from '@vue/shared' @@ -73,8 +73,7 @@ function resolveAsset( return Component } - const selfName = - (Component as FunctionalComponent).displayName || Component.name + const selfName = getComponentName(Component) if ( selfName && (selfName === name ||