blob: 29adaa09cad65761dce5760415d0a7810df3ee27 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
import { parse } from '@vue/compiler-sfc';
export function toTSX(code: string, className: string): string {
let result = `export default function ${className}__AstroComponent_(_props: Record<string, any>): any {}`;
// NOTE: As you can expect, using regexes for this is not exactly the most reliable way of doing things
// However, I couldn't figure out a way to do it using Vue's compiler, I tried looking at how Volar does it, but I
// didn't really understand everything happening there and it seemed to be pretty Volar-specific. I do believe
// someone more knowledgable on Vue's internals could figure it out, but since this solution is good enough for most
// Vue components (and it's an improvement over, well, nothing), it's alright, I think
try {
const parsedResult = parse(code);
if (parsedResult.errors.length > 0) {
return `
let ${className}__AstroComponent_: Error
export default ${className}__AstroComponent_
`;
}
if (parsedResult.descriptor.scriptSetup) {
const definePropsType =
parsedResult.descriptor.scriptSetup.content.match(/defineProps<([\s\S]+)>/m);
if (definePropsType) {
result = `
${parsedResult.descriptor.scriptSetup.content}
export default function ${className}__AstroComponent_(_props: ${definePropsType[1]}): any {
<div></div>
}
`;
} else {
const defineProps =
parsedResult.descriptor.scriptSetup.content.match(/defineProps\([\s\S]+\)/m);
if (defineProps) {
result = `
import { defineProps } from '@vue/runtime-core';
const Props = ${defineProps[0]}
export default function ${className}__AstroComponent_(_props: typeof Props): any {
<div></div>
}
`;
}
}
}
} catch (e: any) {
return result;
}
return result;
}
|
