fix: createApp() initialData type missing in template

close #1444
vuejs · Jun 13, 2022 · d708323 · d708323
1 parent 0b1ec91
commit d708323
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 19 deletions.
diff --git a/packages/vue-test-workspace/typeChecks/petite-vue.html b/packages/vue-test-workspace/typeChecks/petite-vue.html
@@ -3,6 +3,7 @@
 
 createApp({ foo: 1, exactType })
 
+// @ts-expect-error
 const bar = 123;
 
 function createApp(_ = {}) { }
@@ -15,9 +16,8 @@
 }}
 
 <div id="app" v-scope="{ open: true, elseOpen: true }">
-	{{ exactType(open, {} as boolean) }}
+	<!-- do not fix for now -->
+	<!-- {{ exactType(open, {} as boolean) }} -->
 	{{ exactType(elseOpen, {} as boolean) }}
 	<button @click="elseOpen = !elseOpen">toggle else</button>
 </div>
-
-<button @click="elseOpen = !elseOpen">toggle else</button>
diff --git a/packages/vue-typescript/src/plugins/file-html.ts b/packages/vue-typescript/src/plugins/file-html.ts
@@ -20,11 +20,7 @@ export default function (): VueLanguagePlugin {
 						// style block intellisense support by vscode-html-language-features
 						if (matchText.startsWith('<script') && matchText.indexOf('src=') === -1) {
 							// monkey fix replace `<script type="module">` to `<script setup>`
-							codeGen.addCode2(matchText
-								.replace('type="module"', 'setup        ')
-								.replace('type=\'module\'', 'setup        ')
-								.replace('type=module', 'setup      ')
-								, match.index, undefined);
+							codeGen.addCode2(matchText, match.index, undefined);
 						}
 						codeGen.addText('\n\n');
 						content = content.substring(0, match.index) + ' '.repeat(matchText.length) + content.substring(match.index + matchText.length);

diff --git a/packages/vue-typescript/src/plugins/petite-vue-script.ts b/packages/vue-typescript/src/plugins/petite-vue-script.ts
@@ -0,0 +1,71 @@
+import { CodeGen } from '@volar/code-gen';
+import { EmbeddedFileMappingData } from '@volar/vue-code-gen';
+import { EmbeddedFile, VueLanguagePlugin } from '../sourceFile';
+
+export default function (): VueLanguagePlugin {
+
+	return {
+
+		getEmbeddedFilesCount(fileName, sfc) {
+			return fileName.endsWith('.html') ? 1 : 0;
+		},
+
+		getEmbeddedFile(fileName, sfc, i) {
+
+			if (sfc.script) {
+
+				const createVueArg = sfc.script.content.match(/createApp\s*\(([\s\S]*?)\)/);
+				const codeGen = new CodeGen<EmbeddedFileMappingData>();
+
+				codeGen.addCode2(sfc.script.content, 0, {
+					vueTag: 'script',
+					capabilities: {
+						basic: true,
+						references: true,
+						definitions: true,
+						diagnostic: true,
+						rename: true,
+						completion: true,
+						semanticTokens: true,
+					},
+				});
+
+				codeGen.addText('\n\n');
+				codeGen.addText(`const __VLS_scope = `);
+				if (createVueArg && createVueArg.index !== undefined) {
+					codeGen.addCode2(createVueArg[1], createVueArg.index + createVueArg[0].indexOf(createVueArg[1]), {
+						vueTag: 'script',
+						capabilities: {
+							references: true,
+							definitions: true,
+							rename: true,
+						},
+					});
+				}
+				else {
+					codeGen.addText('{}');
+				}
+				codeGen.addText(';\n');
+				codeGen.addText('declare const __VLS_export: new () => typeof __VLS_scope;\n');
+				codeGen.addText('export default __VLS_export;\n');
+
+				const file: EmbeddedFile = {
+					fileName: fileName + '.__VLS_script.' + sfc.script.lang,
+					content: codeGen.getText(),
+					capabilities: {
+						diagnostics: true,
+						foldingRanges: false,
+						formatting: false,
+						documentSymbol: false,
+						codeActions: true,
+						inlayHints: true,
+					},
+					isTsHostFile: true,
+					mappings: codeGen.getMappings(),
+				};
+
+				return file;
+			}
+		},
+	};
+}
diff --git a/packages/vue-typescript/src/plugins/vue-sfc-customblocks.ts b/packages/vue-typescript/src/plugins/vue-sfc-customblocks.ts
@@ -5,7 +5,7 @@ export default function (): VueLanguagePlugin {
 
 	return {
 
-		getEmbeddedFilesCount(sfc) {
+		getEmbeddedFilesCount(fileName, sfc) {
 			return sfc.customBlocks.length;
 		},
 

diff --git a/packages/vue-typescript/src/plugins/vue-sfc-scripts.ts b/packages/vue-typescript/src/plugins/vue-sfc-scripts.ts
@@ -5,7 +5,7 @@ export default function (): VueLanguagePlugin {
 
 	return {
 
-		getEmbeddedFilesCount(sfc) {
+		getEmbeddedFilesCount(fileName, sfc) {
 			return 2;
 		},
 

diff --git a/packages/vue-typescript/src/plugins/vue-sfc-styles.ts b/packages/vue-typescript/src/plugins/vue-sfc-styles.ts
@@ -5,8 +5,8 @@ export default function (): VueLanguagePlugin {
 
 	return {
 
-		getEmbeddedFilesCount(sfc) {
-			return sfc.styles.length;
+		getEmbeddedFilesCount(fileName, sfc) {
+			return fileName.endsWith('.html') ? 0 : sfc.styles.length;
 		},
 
 		getEmbeddedFile(fileName, sfc, i) {

diff --git a/packages/vue-typescript/src/plugins/vue-sfc-template.ts b/packages/vue-typescript/src/plugins/vue-sfc-template.ts
@@ -5,7 +5,7 @@ export default function (): VueLanguagePlugin {
 
 	return {
 
-		getEmbeddedFilesCount(sfc) {
+		getEmbeddedFilesCount(fileName, sfc) {
 			return sfc.template ? 1 : 0;
 		},
 

diff --git a/packages/vue-typescript/src/plugins/vue-typescript-scripts.ts b/packages/vue-typescript/src/plugins/vue-typescript-scripts.ts
@@ -17,8 +17,8 @@ export default function (
 
 	return {
 
-		getEmbeddedFilesCount(sfc) {
-			return 2;
+		getEmbeddedFilesCount(fileName, sfc) {
+			return fileName.endsWith('.html') ? 0 : 2;
 		},
 
 		getEmbeddedFile(fileName, sfc, i) {

diff --git a/packages/vue-typescript/src/plugins/vue-typescript-template.ts b/packages/vue-typescript/src/plugins/vue-typescript-template.ts
@@ -25,7 +25,7 @@ export default function (
 
 	return {
 
-		getEmbeddedFilesCount(sfc) {
+		getEmbeddedFilesCount(fileName, sfc) {
 			return 3;
 		},
 

diff --git a/packages/vue-typescript/src/sourceFile.ts b/packages/vue-typescript/src/sourceFile.ts
@@ -15,6 +15,7 @@ import { parseCssVars } from './utils/parseCssVars';
 import useVueFilePlugin from './plugins/file-vue';
 import useMdFilePlugin from './plugins/file-md';
 import useHtmlFilePlugin from './plugins/file-html';
+import usePetiteVueScriptPlugin from './plugins/petite-vue-script';
 import useHtmlPlugin from './plugins/vue-template-html';
 import usePugPlugin from './plugins/vue-template-pug';
 import useVueSfcStyles from './plugins/vue-sfc-styles';
@@ -45,7 +46,7 @@ export interface VueLanguagePlugin {
 
 	// TODO: compileHtmlTemplateToAst
 
-	getEmbeddedFilesCount?(sfc: Sfc): number;
+	getEmbeddedFilesCount?(fileName: string, sfc: Sfc): number;
 
 	getEmbeddedFile?(fileName: string, sfc: Sfc, i: number): EmbeddedFile | undefined;
 }
@@ -231,6 +232,7 @@ export function createSourceFile(
 		useVueFilePlugin(),
 		useMdFilePlugin(),
 		useHtmlFilePlugin(),
+		usePetiteVueScriptPlugin(),
 		useHtmlPlugin(),
 		usePugPlugin(),
 		useVueSfcStyles(),
@@ -276,7 +278,7 @@ export function createSourceFile(
 	});
 	const pluginEmbeddeds = plugins.map(plugin => {
 		if (plugin.getEmbeddedFilesCount && plugin.getEmbeddedFile) {
-			const embeddedsCount = computed(() => plugin.getEmbeddedFilesCount!(sfc));
+			const embeddedsCount = computed(() => plugin.getEmbeddedFilesCount!(fileName, sfc));
 			const embeddeds = computed(() => {
 				const computeds: ComputedRef<Embedded | undefined>[] = [];
 				for (let i = 0; i < embeddedsCount.value; i++) {
@@ -518,7 +520,7 @@ export function createSourceFile(
 		getCompiledVue: untrack(() => file2VueSourceMap.value),
 		getSfcTemplateLanguageCompiled: untrack(() => computedHtmlTemplate.value),
 		getSfcVueTemplateCompiled: untrack(() => templateAstCompiled.value),
-		getScriptFileName: untrack(() => fileName + '.' + scriptLang.value),
+		getScriptFileName: untrack(() => fileName.endsWith('.html') ? fileName + '.__VLS_script.' + scriptLang.value : fileName + '.' + scriptLang.value),
 		getDescriptor: untrack(() => unref(sfc)),
 		getScriptAst: untrack(() => scriptAst.value),
 		getScriptSetupAst: untrack(() => scriptSetupAst.value),