10000 fix: handle views imported in script setup (#1051) · smather/nativescript-vue@fb53eb0 · GitHub
[go: up one dir, main page]
Skip to content

Commit fb53eb0

Browse files
rigor789rigor789
authored
fix: handle views imported in script setup (nativescript-vue#1051)
1 parent 5101b24 commit fb53eb0

File tree

3 files changed

+71
-1
lines changed

3 files changed

+71
-1
lines changed

‎demo/app/components/FragmentRootComponent.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<Label text="Hello Label!" />
3+
<Button text="Hello Button!" />
4+
<TextField text="Hello TextField!" />
5+
</template>

‎demo/app/components/GH1017.vue

8000
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!-- https://github.com/nativescript-vue/nativescript-vue/issues/1017 -->
2+
<script lang="ts" setup>
3+
import { Label, GridLayout, ContentView } from '@nativescript/core';
4+
5+
import demo_ListView from './demo_ListView.vue';
6+
import FragmentRootComponent from './FragmentRootComponent.vue';
7+
</script>
8+
9+
<template>
10+
<GridLayout rows="auto, auto, *">
11+
<Label text="Hello World" />
12+
13+
<StackLayout row="1">
14+
<FragmentRootComponent />
15+
</StackLayout>
16+
17+
<ContentView row="2">
18+
<demo_ListView />
19+
</ContentView>
20+
</GridLayout>
21+
</template>

‎src/index.ts

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
import { resolveComponent as resolveComponentCore } from '@vue/runtime-core';
21
import type { CreateAppFunction } from '@vue/runtime-core';
2+
import {
3+
createBlock as createBlockCore,
4+
createElementBlock as createElementBlockCore,
5+
createElementVNode as createElementVNodeCore,
6+
createVNode as createVNodeCore,
7+
resolveComponent as resolveComponentCore,
8+
} from '@vue/runtime-core';
39

410
import { BUILT_IN_COMPONENTS } from './components';
511

@@ -106,3 +112,41 @@ export function resolveComponent(name: string, maybeSelReference: boolean) {
106112
const component = resolveComponentCore(name, maybeSelReference);
107113
return component;
108114
}
115+
116+
/**
117+
* Checks if the type has a constructor.name that matches a known view or built-in component
118+
* If so, returns the name of the view or component. This allows {N} element imports to be
119+
* used inside script setup context without requiring aliasing.
120+
*/
121+
function maybeConvertToKnownComponentOrViewName(type: any) {
122+
const name = type?.prototype?.constructor?.name;
123+
if (name) {
124+
if (BUILT_IN_COMPONENTS[name]) {
125+
return BUILT_IN_COMPONENTS[name];
126+
}
127+
128+
if (isKnownView(name)) {
129+
return name;
130+
}
131+
}
132+
133+
return type;
134+
}
135+
136+
/**
137+
* Wraps the original function and replaces the first argument if it matches
138+
* a known view or built-in component.
139+
*/
140+
function wrapCreate<T>(originalFunction: T): T {
141+
return ((type: any, ...args: any) => {
142+
return (originalFunction as any)(
143+
maybeConvertToKnownComponentOrViewName(type),
144+
...args
145+
);
146+
}) as T;
147+
}
148+
149+
export const createBlock = wrapCreate(createBlockCore);
150+
export const createElementBlock = wrapCreate(createElementBlockCore);
151+
export const createElementVNode = wrapCreate(createElementVNodeCore);
152+
export const createVNode: typeof createVNodeCore = wrapCreate(createVNodeCore);

0 commit comments

Comments
 (0)
0