diff --git a/demo/app/components/FragmentRootComponent.vue b/demo/app/components/FragmentRootComponent.vue new file mode 100644 index 00000000..830fc81e --- /dev/null +++ b/demo/app/components/FragmentRootComponent.vue @@ -0,0 +1,5 @@ + diff --git a/demo/app/components/GH1017.vue b/demo/app/components/GH1017.vue new file mode 100644 index 00000000..740186ec --- /dev/null +++ b/demo/app/components/GH1017.vue @@ -0,0 +1,21 @@ + + + + diff --git a/src/index.ts b/src/index.ts index 74ee2b82..dadb8c74 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,11 @@ -import { resolveComponent as resolveComponentCore } from '@vue/runtime-core'; import type { CreateAppFunction } from '@vue/runtime-core'; +import { + createBlock as createBlockCore, + createElementBlock as createElementBlockCore, + createElementVNode as createElementVNodeCore, + createVNode as createVNodeCore, + resolveComponent as resolveComponentCore, +} from '@vue/runtime-core'; import { BUILT_IN_COMPONENTS } from './components'; @@ -106,3 +112,41 @@ export function resolveComponent(name: string, maybeSelReference: boolean) { const component = resolveComponentCore(name, maybeSelReference); return component; } + +/** + * Checks if the type has a constructor.name that matches a known view or built-in component + * If so, returns the name of the view or component. This allows {N} element imports to be + * used inside script setup context without requiring aliasing. + */ +function maybeConvertToKnownComponentOrViewName(type: any) { + const name = type?.prototype?.constructor?.name; + if (name) { + if (BUILT_IN_COMPONENTS[name]) { + return BUILT_IN_COMPONENTS[name]; + } + + if (isKnownView(name)) { + return name; + } + } + + return type; +} + +/** + * Wraps the original function and replaces the first argument if it matches + * a known view or built-in component. + */ +function wrapCreate(originalFunction: T): T { + return ((type: any, ...args: any) => { + return (originalFunction as any)( + maybeConvertToKnownComponentOrViewName(type), + ...args + ); + }) as T; +} + +export const createBlock = wrapCreate(createBlockCore); +export const createElementBlock = wrapCreate(createElementBlockCore); +export const createElementVNode = wrapCreate(createElementVNodeCore); +export const createVNode: typeof createVNodeCore = wrapCreate(createVNodeCore);