nativescript-vue · rigor789 · Jun 2, 2023 · Jun 2, 2023 · Jun 2, 2023
diff --git a/demo/app/components/FragmentRootComponent.vue b/demo/app/components/FragmentRootComponent.vue
@@ -0,0 +1,5 @@
+<template>
+  <Label text="Hello Label!" />
+  <Button text="Hello Button!" />
+  <TextField text="Hello TextField!" />
+</template>
diff --git a/demo/app/components/GH1017.vue b/demo/app/components/GH1017.vue
@@ -0,0 +1,21 @@
+<!-- https://github.com/nativescript-vue/nativescript-vue/issues/1017 -->
+<script lang="ts" setup>
+import { Label, GridLayout, ContentView } from '@nativescript/core';
+
+import demo_ListView from './demo_ListView.vue';
+import FragmentRootComponent from './FragmentRootComponent.vue';
+</script>
+
+<template>
+  <GridLayout rows="auto, auto, *">
+    <Label text="Hello World" />
+
+    <StackLayout row="1">
+      <FragmentRootComponent />
+    </StackLayout>
+
+    <ContentView row="2">
+      <demo_ListView />
+    </ContentView>
+  </GridLayout>
+</template>
diff --git 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<T>(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);