feat: import types from vue instead of @vue/runtime-dom on vue 2.7

vuejs · Jun 2, 2022 · 912f69d · 912f69d
1 parent 4250f23
commit 912f69d
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 21 deletions.
diff --git a/extensions/vscode-vue-language-features/schemas/vue-tsconfig.schema.json b/extensions/vscode-vue-language-features/schemas/vue-tsconfig.schema.json
@@ -10,6 +10,7 @@
 						{
 							"enum": [
 								2,
+								2.7,
 								3
 							]
 						}

diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts
@@ -58,7 +58,7 @@ export function generate(
 	ts: typeof import('typescript/lib/tsserverlibrary'),
 	sourceLang: string,
 	templateAst: CompilerDOM.RootNode,
-	isVue2: boolean,
+	vueVersion: number,
 	experimentalRuntimeMode: 'runtime-dom' | 'runtime-uni-app' | undefined,
 	allowTypeNarrowingInEventExpressions: boolean,
 	cssScopedClasses: string[] = [],
@@ -337,7 +337,7 @@ export function generate(
 					&& !prop.arg
 					&& prop.name === 'model'
 				) {
-					addProp(getModelValuePropName(node, isVue2), 'v-model', prop.loc.start.offset);
+					addProp(getModelValuePropName(node, vueVersion), 'v-model', prop.loc.start.offset);
 				}
 				else if (
 					prop.type === CompilerDOM.NodeTypes.ATTRIBUTE
@@ -892,7 +892,7 @@ export function generate(
 						? prop.arg.constType === CompilerDOM.ConstantTypes.CAN_STRINGIFY
 							? prop.arg.content
 							: prop.arg.loc.source
-						: getModelValuePropName(node, isVue2);
+						: getModelValuePropName(node, vueVersion);
 
 				if (prop.modifiers.some(m => m === 'prop' || m === 'attr')) {
 					propName_1 = propName_1.substring(1);
@@ -1994,7 +1994,7 @@ function keepHyphenateName(oldName: string, newName: string) {
 }
 // https://github.com/vuejs/vue-next/blob/master/packages/compiler-dom/src/transforms/vModel.ts#L49-L51
 // https://v3.vuejs.org/guide/forms.html#basic-usage
-function getModelValuePropName(node: CompilerDOM.ElementNode, isVue2: boolean) {
+function getModelValuePropName(node: CompilerDOM.ElementNode, vueVersion: number) {
 
 	const tag = node.tag;
 	const typeAttr = node.props.find(prop => prop.type === CompilerDOM.NodeTypes.ATTRIBUTE && prop.name === 'type') as CompilerDOM.AttributeNode | undefined;
@@ -2010,7 +2010,7 @@ function getModelValuePropName(node: CompilerDOM.ElementNode, isVue2: boolean) {
 		tag === 'input' ||
 		tag === 'textarea' ||
 		tag === 'select' ||
-		isVue2
+		vueVersion < 3
 	) return 'value';
 
 	return 'modelValue';

diff --git a/packages/vue-code-gen/src/index.ts b/packages/vue-code-gen/src/index.ts
@@ -72,14 +72,14 @@ export function generateSFCScriptTypeCheckCode(
 /**
  * A wrapper function of `require('@vue/compiler-dom').compile`
  */
-export function compileSFCTemplate(htmlCode: string, options: CompilerDOM.CompilerOptions = {}, vueVersion: 2 | 3 = 3) {
+export function compileSFCTemplate(htmlCode: string, options: CompilerDOM.CompilerOptions = {}, vueVersion: number) {
 
 	const errors: CompilerDOM.CompilerError[] = [];
 	const warnings: CompilerDOM.CompilerError[] = [];
 	let ast: CompilerDOM.RootNode | undefined;
 
 	try {
-		ast = (vueVersion === 2 ? CompilerVue2 : CompilerDOM).compile(htmlCode, {
+		ast = (vueVersion < 3 ? CompilerVue2 : CompilerDOM).compile(htmlCode, {
 			onError: (err: CompilerDOM.CompilerError) => errors.push(err),
 			onWarn: (err: CompilerDOM.CompilerError) => warnings.push(err),
 			expressionPlugins: ['typescript'],

diff --git a/packages/vue-typescript/src/types.ts b/packages/vue-typescript/src/types.ts
@@ -11,7 +11,7 @@ export interface ITemplateScriptData {
 }
 
 export interface VueCompilerOptions {
-	experimentalCompatMode?: 2 | 3;
+	experimentalCompatMode?: 2 | 2.7 | 3;
 	experimentalRuntimeMode?: 'runtime-dom' | 'runtime-uni-app';
 	experimentalImplicitWrapComponentOptionsWithDefineComponent?: boolean | 'onlyJs';
 	experimentalDowngradePropsAndEmitsToSetupReturnOnScriptSetup?: boolean | 'onlyJs';

diff --git a/packages/vue-typescript/src/typescriptRuntime.ts b/packages/vue-typescript/src/typescriptRuntime.ts
@@ -29,7 +29,7 @@ export function createTypeScriptRuntime(options: {
 }) {
 
 	const { typescript: ts } = options;
-	const isVue2 = options.vueLsHost.getVueCompilationSettings().experimentalCompatMode === 2;
+	const vueVersion = options.vueLsHost.getVueCompilationSettings().experimentalCompatMode ?? 3;
 	const tsFileVersions = new Map<string, string>();
 	const vueFiles = createVueFiles();
 	const plugins = [
@@ -38,7 +38,7 @@ export function createTypeScriptRuntime(options: {
 	];
 	const tsLsHost = createTsLsHost();
 	const tsLsRaw = ts.createLanguageService(tsLsHost);
-	const localTypesScript = ts.ScriptSnapshot.fromString(localTypes.getTypesCode(isVue2));
+	const localTypesScript = ts.ScriptSnapshot.fromString(localTypes.getTypesCode(vueVersion));
 
 	let lastProjectVersion: string | undefined;
 	let tsProjectVersion = 0;
@@ -58,7 +58,7 @@ export function createTypeScriptRuntime(options: {
 		},
 		getLocalTypesFiles: () => {
 			const fileNames = getLocalTypesFiles();
-			const code = localTypes.getTypesCode(isVue2);
+			const code = localTypes.getTypesCode(vueVersion);
 			return {
 				fileNames,
 				code,

diff --git a/packages/vue-typescript/src/use/useSfcScriptGen.ts b/packages/vue-typescript/src/use/useSfcScriptGen.ts
@@ -45,7 +45,7 @@ export function useSfcScriptGen<T extends 'template' | 'script'>(
 				}
 				return bindTexts;
 			},
-			getVueLibraryName(compilerOptions.experimentalCompatMode === 2),
+			getVueLibraryName(compilerOptions.experimentalCompatMode ?? 3),
 			(compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent ?? 'onlyJs') === 'onlyJs'
 				? lang.value === 'js' || lang.value === 'jsx'
 				: !!compilerOptions.experimentalImplicitWrapComponentOptionsWithDefineComponent,

diff --git a/packages/vue-typescript/src/use/useSfcTemplateScript.ts b/packages/vue-typescript/src/use/useSfcTemplateScript.ts
@@ -84,7 +84,7 @@ export function useSfcTemplateScript(
 			ts,
 			templateData.value.lang,
 			sfcTemplateCompileResult.value.ast,
-			compilerOptions.experimentalCompatMode === 2,
+			compilerOptions.experimentalCompatMode ?? 3,
 			compilerOptions.experimentalRuntimeMode,
 			!!compilerOptions.experimentalAllowTypeNarrowingInInlineHandlers,
 			Object.values(cssScopedClasses.value).map(map => Object.keys(map)).flat(),
@@ -109,7 +109,7 @@ export function useSfcTemplateScript(
 		else {
 			codeGen.addText(`var __VLS_name = undefined;\n`);
 			codeGen.addText(`var __VLS_options = {};\n`);
-			codeGen.addText(`var __VLS_component = (await import('${getVueLibraryName(isVue2)}')).defineComponent({});\n`);
+			codeGen.addText(`var __VLS_component = (await import('${getVueLibraryName(compilerOptions.experimentalCompatMode ?? 3)}')).defineComponent({});\n`);
 		}
 
 		writeImportTypes();

diff --git a/packages/vue-typescript/src/utils/localTypes.ts b/packages/vue-typescript/src/utils/localTypes.ts
@@ -6,19 +6,19 @@ const camelCaseText = [
 	': S',
 ].join('\n');
 
-export function getVueLibraryName(isVue2: boolean) {
-	return isVue2 ? '@vue/runtime-dom' : 'vue';
+export function getVueLibraryName(vueVersion: number) {
+	return vueVersion < 2.7 ? '@vue/runtime-dom' : 'vue';
 }
 
-export function getSlotsPropertyName(isVue2: boolean) {
-	return isVue2 ? '$scopedSlots' : '$slots';
+export function getSlotsPropertyName(vueVersion: number) {
+	return vueVersion < 3 ? '$scopedSlots' : '$slots';
 }
 
 export const typesFileName = '__VLS_types.ts';
 
-export function getTypesCode(isVue2: boolean) {
-	const libName = getVueLibraryName(isVue2);
-	const slots = getSlotsPropertyName(isVue2);
+export function getTypesCode(vueVersion: number) {
+	const libName = getVueLibraryName(vueVersion);
+	const slots = getSlotsPropertyName(vueVersion);
 	return `
 import * as vue from '${libName}';
 import type {