feat: add uni-app IntrinsicElement (#1325)

vuejs · May 23, 2022 · 1aabb13 · 1aabb13
1 parent 8ee118e
commit 1aabb13
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -1,12 +1,13 @@
 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';
 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
@@ -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 <T extends ReturnType<typeof useHtmlPlugin>>(options: {
+export default function useVueTemplateLanguagePlugin<T extends ReturnType<typeof useHtmlPlugin>>(options: {
 	ts: typeof import('typescript/lib/tsserverlibrary'),
 	getSemanticTokenLegend(): vscode.SemanticTokensLegend,
 	getScanner(document: TextDocument): html.Scanner | undefined,
@@ -78,6 +79,7 @@ export default function <T extends ReturnType<typeof useHtmlPlugin>>(options: {
 	>();
 	const autoImportPositions = new WeakSet<vscode.Position>();
 	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 <T extends ReturnType<typeof useHtmlPlugin>>(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
@@ -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,