diff --git a/extensions/vscode-vue-language-features/schemas/vue-tsconfig.schema.json b/extensions/vscode-vue-language-features/schemas/vue-tsconfig.schema.json index e4eb387d8..f9921705e 100644 --- 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 index 6f20cfaef..b38ed665a 100644 --- 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 index 616f175da..acd32df2a 100644 --- 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 index 048bd733a..87d347f15 100644 --- 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 index c81ebde70..9f3626c39 100644 --- 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(); 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 index f84254472..918794670 100644 --- a/packages/vue-typescript/src/use/useSfcScriptGen.ts +++ b/packages/vue-typescript/src/use/useSfcScriptGen.ts @@ -45,7 +45,7 @@ export function useSfcScriptGen( } 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 index b2c2726e6..11aeb6774 100644 --- 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 index 196b0278d..c67d9f852 100644 --- 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 {