Jun 2, 2023 · Jun 2, 2023 · Jun 2, 2023
diff --git a/demo/app/components/FragmentRootComponent.vue b/demo/app/components/FragmentRootComponent.vue
 <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
 <!-- 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
 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';

  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);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,5 @@
		<template>
		<Label text="Hello Label!" />
		<Button text="Hello Button!" />
		<TextField text="Hello TextField!" />
		</template>
Original file line number	Diff line number	Diff line change
		@@ -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>
Original file line number	Diff line number	Diff line change
		@@ -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';

Expand DownExpand Up		@@ -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);