Skip to content

Commit afacbf4

Browse files
Merge pull request #1748 from AxiomCodeAI/loop/ty-vue-definecomponent-jsx
typescript: a Vue JSX tag reaches the defineComponent setup / render it names
2 parents b6ec744 + 1ab072a commit afacbf4

18 files changed

Lines changed: 320 additions & 0 deletions
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// The Vue entry points that matter, declared with their shapes. No Vue dependency.
2+
declare global {
3+
namespace JSX {
4+
type Element = string;
5+
interface ElementAttributesProperty {
6+
props: unknown;
7+
}
8+
interface IntrinsicElements {
9+
[name: string]: unknown;
10+
}
11+
}
12+
}
13+
14+
export interface ComponentOptions {
15+
name?: string;
16+
props?: Record<string, unknown>;
17+
setup?: (props: any) => unknown;
18+
render?: () => string;
19+
}
20+
// A constructor type, as Vue's own DefineComponent is: nothing here says what renders.
21+
export interface Component {
22+
new (...args: any[]): { props: any };
23+
}
24+
export declare function defineComponent(options: ComponentOptions): Component;
25+
export declare function defineComponent(setup: (props: any) => () => string): Component;
26+
export declare function defineNuxtComponent(options: ComponentOptions): Component;
27+
28+
// NOT a component definer: it takes an options-shaped object and returns something else.
29+
export declare function makeStore(options: ComponentOptions): Component;
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { defineComponent } from "../lib/vue";
2+
import Card from "./card";
3+
import { Child, Panel, FnForm, NuxtCard, Store } from "./parts";
4+
import { Button, Local } from "./reg";
5+
6+
function helper(): number {
7+
return 42;
8+
}
9+
10+
export const App = defineComponent({
11+
setup() {
12+
const onPing = () => helper();
13+
return () => (
14+
<div>
15+
<Card />
16+
<Child msg="x" onPing={onPing} />
17+
<Panel />
18+
<FnForm />
19+
<NuxtCard />
20+
<Store />
21+
<Button />
22+
<Local />
23+
</div>
24+
);
25+
},
26+
});
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { defineComponent } from "../lib/vue";
2+
3+
export function leafButton(): number {
4+
return 8;
5+
}
6+
7+
export default defineComponent({
8+
name: "Button",
9+
setup() {
10+
return () => <b>{leafButton()}</b>;
11+
},
12+
});
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { defineComponent } from "../lib/vue";
2+
import { Child } from "./parts";
3+
4+
export function leafCard(): number {
5+
return 7;
6+
}
7+
8+
// the module's default export, rendered through a default import
9+
export default defineComponent({
10+
name: "Card",
11+
render() {
12+
leafCard();
13+
return <Child msg="in card" />;
14+
},
15+
});
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { defineComponent, defineNuxtComponent, makeStore } from "../lib/vue";
2+
3+
export function leafSetup(): number {
4+
return 1;
5+
}
6+
export function leafRendered(): number {
7+
return 2;
8+
}
9+
export function leafRender(): number {
10+
return 3;
11+
}
12+
export function leafFn(): number {
13+
return 4;
14+
}
15+
export function leafNuxt(): number {
16+
return 5;
17+
}
18+
export function leafStore(): number {
19+
return 6;
20+
}
21+
22+
// setup() returns the render function
23+
export const Child = defineComponent({
24+
props: { msg: String },
25+
setup(props) {
26+
leafSetup();
27+
return () => String(leafRendered());
28+
},
29+
});
30+
31+
// the render option, no setup
32+
export const Panel = defineComponent({
33+
name: "Panel",
34+
render() {
35+
return String(leafRender());
36+
},
37+
});
38+
39+
// the function form: the function IS setup
40+
export const FnForm = defineComponent((props) => () => String(leafFn()));
41+
42+
export const NuxtCard = defineNuxtComponent({
43+
setup() {
44+
return () => String(leafNuxt());
45+
},
46+
});
47+
48+
// CONTROL: the same object handed to another function is not a component
49+
export const Store = makeStore({
50+
setup() {
51+
return () => String(leafStore());
52+
},
53+
});
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { defineComponent } from "../lib/vue";
2+
import _Button from "./button";
3+
4+
export function leafLocal(): number {
5+
return 9;
6+
}
7+
8+
// the registration idiom: a component library re-exports each component through an
9+
// installer that returns its argument
10+
export function withInstall<T>(component: T): T {
11+
return component;
12+
}
13+
14+
// …of a component default-imported from its own module
15+
export const Button = withInstall(_Button);
16+
17+
// …and of one defined in this module
18+
const _Local = defineComponent({
19+
setup() {
20+
leafLocal();
21+
return () => "local";
22+
},
23+
});
24+
export const Local = withInstall(_Local);
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
ambiguous_unknown FUNCTION_CALL app#<module-init>() @L10 -> -
2+
ambiguous_unknown FUNCTION_CALL button#<module-init>() @L7 -> -
3+
ambiguous_unknown FUNCTION_CALL card#<module-init>() @L9 -> -
4+
ambiguous_unknown FUNCTION_CALL parts#<arrow@27>() @L27 -> -
5+
ambiguous_unknown FUNCTION_CALL parts#<arrow@40>() @L40 -> -
6+
ambiguous_unknown FUNCTION_CALL parts#<arrow@44>() @L44 -> -
7+
ambiguous_unknown FUNCTION_CALL parts#<arrow@51>() @L51 -> -
8+
ambiguous_unknown FUNCTION_CALL parts#<module-init>() @L23 -> -
9+
ambiguous_unknown FUNCTION_CALL parts#<module-init>() @L32 -> -
10+
ambiguous_unknown FUNCTION_CALL parts#<module-init>() @L40 -> -
11+
ambiguous_unknown FUNCTION_CALL parts#<module-init>() @L42 -> -
12+
ambiguous_unknown FUNCTION_CALL parts#<module-init>() @L49 -> -
13+
ambiguous_unknown FUNCTION_CALL parts#render() @L35 -> -
14+
ambiguous_unknown FUNCTION_CALL reg#<module-init>() @L18 -> -
15+
ambiguous_unknown JSX_COMPONENT_CALL app#<arrow@13>() @L20 -> -
16+
callback_registered FUNCTION_CALL parts#<module-init>() @L40 -> parts#<arrow@40>(?)
17+
known_edge FUNCTION_CALL app#onPing() @L12 -> app#helper()
18+
known_edge FUNCTION_CALL button#<arrow@10>() @L10 -> button#leafButton()
19+
known_edge FUNCTION_CALL card#render() @L12 -> card#leafCard()
20+
known_edge FUNCTION_CALL parts#<arrow@27>() @L27 -> parts#leafRendered()
21+
known_edge FUNCTION_CALL parts#<arrow@40>() @L40 -> parts#leafFn()
22+
known_edge FUNCTION_CALL parts#<arrow@44>() @L44 -> parts#leafNuxt()
23+
known_edge FUNCTION_CALL parts#<arrow@51>() @L51 -> parts#leafStore()
24+
known_edge FUNCTION_CALL parts#render() @L35 -> parts#leafRender()
25+
known_edge FUNCTION_CALL parts#setup(?) @L26 -> parts#leafSetup()
26+
known_edge FUNCTION_CALL reg#<module-init>() @L15 -> reg#withInstall(T)
27+
known_edge FUNCTION_CALL reg#<module-init>() @L24 -> reg#withInstall(T)
28+
known_edge FUNCTION_CALL reg#setup() @L20 -> reg#leafLocal()
29+
known_edge JSX_COMPONENT_CALL app#<arrow@13>() @L15 -> card#render()
30+
known_edge JSX_COMPONENT_CALL app#<arrow@13>() @L16 -> parts#setup(?)
31+
known_edge JSX_COMPONENT_CALL app#<arrow@13>() @L17 -> parts#render()
32+
known_edge JSX_COMPONENT_CALL app#<arrow@13>() @L18 -> parts#<arrow@40>(?)
33+
known_edge JSX_COMPONENT_CALL app#<arrow@13>() @L19 -> parts#setup()@L43
34+
known_edge JSX_COMPONENT_CALL app#<arrow@13>() @L21 -> button#setup()
35+
known_edge JSX_COMPONENT_CALL app#<arrow@13>() @L22 -> reg#setup()
36+
known_edge JSX_COMPONENT_CALL card#render() @L13 -> parts#setup(?)
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
── entry_point (1) ──
2+
unimported_module app#<module> app.tsx:1

‎graph/test/typescript/expected/80-vue-definecomponent-jsx.fields‎

Whitespace-only changes.
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
80-vue-definecomponent-jsx [fields]
2+
precision 0.0000 (0 correct, 0 wrong)
3+
recall 0.0000 (0 of 0 the compiler resolved)
4+
sites 0 resolved 0
5+
tiers
6+
access
7+
not scored: 0 rows whose target is not a client declaration

0 commit comments

Comments
 (0)