From 1aabb139c62683da8f5dc0f687d94f30af13b863 Mon Sep 17 00:00:00 2001 From: ZHAO Jinxiang Date: Mon, 23 May 2022 17:46:47 +0800 Subject: [PATCH] feat: add uni-app IntrinsicElement (#1325) --- packages/vue-code-gen/src/generators/template.ts | 8 ++++++-- packages/vue-code-gen/src/index.ts | 3 ++- .../vue-language-service/src/plugins/vue-template.ts | 9 +++++---- packages/vue-typescript/src/use/useSfcTemplateScript.ts | 2 +- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/vue-code-gen/src/generators/template.ts b/packages/vue-code-gen/src/generators/template.ts index be3df0b35..94d865afc 100644 --- a/packages/vue-code-gen/src/generators/template.ts +++ b/packages/vue-code-gen/src/generators/template.ts @@ -44,12 +44,16 @@ export const transformContext: CompilerDOM.TransformContext = { expressionPlugins: ['typescript'], }; +export function isIntrinsicElement(runtimeMode: 'runtime-dom' | 'runtime-uni-app' = 'runtime-dom', tag: string) { + return runtimeMode === 'runtime-dom' ? (isHTMLTag(tag) || isSVGTag(tag)) : ['block', 'component', 'template', 'slot'].includes(tag); +} + export function generate( ts: typeof import('typescript/lib/tsserverlibrary'), sourceLang: string, templateAst: CompilerDOM.RootNode, isVue2: boolean, - experimentalRuntimeMode: 'runtime-dom' | 'runtime-uni-app', + experimentalRuntimeMode: 'runtime-dom' | 'runtime-uni-app' | undefined, allowTypeNarrowingInEventExpressions: boolean, cssScopedClasses: string[] = [], htmlToTemplate: (htmlStart: number, htmlEnd: number) => { start: number, end: number; } | undefined, @@ -532,7 +536,7 @@ export function generate( tsCodeGen.addText(`{\n`); { - const tagText = experimentalRuntimeMode === 'runtime-dom' && (isHTMLTag(node.tag) || isSVGTag(node.tag)) ? node.tag : tagResolves[node.tag].rawComponent; + const tagText = isIntrinsicElement(experimentalRuntimeMode, node.tag) ? node.tag : tagResolves[node.tag].rawComponent; const fullTagStart = tsCodeGen.getText().length; tsCodeGen.addText(`<`); diff --git a/packages/vue-code-gen/src/index.ts b/packages/vue-code-gen/src/index.ts index 407606c84..616f175da 100644 --- a/packages/vue-code-gen/src/index.ts +++ b/packages/vue-code-gen/src/index.ts @@ -1,5 +1,5 @@ import { generate as generateScript } from './generators/script'; -import { generate as generateTemplateScript } from './generators/template'; +import { generate as generateTemplateScript, isIntrinsicElement } from './generators/template'; import { parseScriptRanges } from './parsers/scriptRanges'; import { parseScriptSetupRanges } from './parsers/scriptSetupRanges'; import * as CompilerDOM from '@vue/compiler-dom'; @@ -7,6 +7,7 @@ import * as CompilerVue2 from './vue2TemplateCompiler'; export * from './types'; export * from '@vue/compiler-dom'; +export { isIntrinsicElement }; /** * @param templateAst Use `require('@vue/compiler-dom').compile` or `require('@volar/vue-code-gen').compileTemplate`, provide to resolve variables unused in script setup diff --git a/packages/vue-language-service/src/plugins/vue-template.ts b/packages/vue-language-service/src/plugins/vue-template.ts index 694ae0b84..cc3d310a3 100644 --- a/packages/vue-language-service/src/plugins/vue-template.ts +++ b/packages/vue-language-service/src/plugins/vue-template.ts @@ -3,7 +3,8 @@ import { parseScriptRanges } from '@volar/vue-code-gen/out/parsers/scriptRanges' import { SearchTexts, TypeScriptRuntime, VueFile } from '@volar/vue-typescript'; import { VueDocument, VueDocuments } from '../vueDocuments'; import { pauseTracking, resetTracking } from '@vue/reactivity'; -import { camelize, capitalize, hyphenate, isHTMLTag } from '@vue/shared'; +import { camelize, capitalize, hyphenate } from '@vue/shared'; +import { isIntrinsicElement } from '@volar/vue-code-gen'; import * as path from 'upath'; import * as html from 'vscode-html-languageservice'; import * as vscode from 'vscode-languageserver-protocol'; @@ -55,7 +56,7 @@ interface AutoImportCompletionData { importUri: string, } -export default function >(options: { +export default function useVueTemplateLanguagePlugin>(options: { ts: typeof import('typescript/lib/tsserverlibrary'), getSemanticTokenLegend(): vscode.SemanticTokensLegend, getScanner(document: TextDocument): html.Scanner | undefined, @@ -78,6 +79,7 @@ export default function >(options: { >(); const autoImportPositions = new WeakSet(); const tokenTypes = new Map(options.getSemanticTokenLegend().tokenTypes.map((t, i) => [t, i])); + const runtimeMode = options.tsRuntime.vueLsHost.getVueCompilationSettings().experimentalRuntimeMode; return { @@ -199,11 +201,10 @@ export default function >(options: { const scanner = options.getScanner(document); if (vueDocument && scanner) { - const templateScriptData = vueDocument.file.getTemplateData(); const components = new Set([ ...templateScriptData.components, - ...templateScriptData.components.map(hyphenate).filter(name => !isHTMLTag(name)), + ...templateScriptData.components.map(hyphenate).filter(name => !isIntrinsicElement(runtimeMode, name)), ]); const offsetRange = range ? { start: document.offsetAt(range.start), diff --git a/packages/vue-typescript/src/use/useSfcTemplateScript.ts b/packages/vue-typescript/src/use/useSfcTemplateScript.ts index 95d68965e..12f34541a 100644 --- a/packages/vue-typescript/src/use/useSfcTemplateScript.ts +++ b/packages/vue-typescript/src/use/useSfcTemplateScript.ts @@ -71,7 +71,7 @@ export function useSfcTemplateScript( templateData.value.lang, sfcTemplateCompileResult.value.ast, compilerOptions.experimentalCompatMode === 2, - compilerOptions.experimentalRuntimeMode ?? 'runtime-dom', + compilerOptions.experimentalRuntimeMode, !!compilerOptions.experimentalAllowTypeNarrowingInInlineHandlers, Object.values(cssScopedClasses.value).map(map => Object.keys(map)).flat(), templateData.value.htmlToTemplate,