refactor(language-core): less codegen options (#5804)

Author: johnsoncodehk

packages/language-core/lib/codegen/names.ts

@@ -25,7 +25,7 @@ export const ModelEmit = '__VLS_ModelEmit';
 export const EmitProps = '__VLS_EmitProps';
 export const InternalProps = '__VLS_InternalProps';
 export const Emit = '__VLS_Emit';
-export const Bindings = '__VLS_Bindings';
+export const SetupExposed = '__VLS_SetupExposed';
 export const PublicProps = '__VLS_PublicProps';
 export const StyleModules = '__VLS_StyleModules';
 

packages/language-core/lib/codegen/script/index.ts

@@ -23,11 +23,10 @@ export interface ScriptCodegenOptions {
 	fileName: string;
 	scriptRanges: ScriptRanges | undefined;
 	scriptSetupRanges: ScriptSetupRanges | undefined;
-	templateComponents: string[];
 	templateStartTagOffset: number | undefined;
 	templateCodegen: TemplateCodegenContext & { codes: Code[] } | undefined;
 	styleCodegen: TemplateCodegenContext & { codes: Code[] } | undefined;
-	setupBindingNames: Set<string>;
+	setupExposed: Set<string>;
 }
 
 export { generate as generateScript };

packages/language-core/lib/codegen/script/scriptSetup.ts

@@ -303,7 +303,7 @@ function* generateMacros(options: ScriptCodegenOptions): Generator<Code> {
 		yield `// @ts-ignore${newLine}`;
 		yield `declare const { `;
 		for (const macro of Object.keys(options.vueCompilerOptions.macros)) {
-			if (!options.setupBindingNames.has(macro)) {
+			if (!options.setupExposed.has(macro)) {
 				yield `${macro}, `;
 			}
 		}

packages/language-core/lib/codegen/script/template.ts

@@ -1,4 +1,3 @@
-import { camelize, capitalize } from '@vue/shared';
 import * as path from 'path-browserify';
 import type { Code } from '../../types';
 import { codeFeatures } from '../codeFeatures';
@@ -13,7 +12,7 @@ export function* generateTemplate(
 	ctx: ScriptCodegenContext,
 ): Generator<Code> {
 	yield* generateSelf(options);
-	yield* generateBindings(options, ctx);
+	yield* generateSetupExposed(options, ctx);
 	yield* generateTemplateCtx(options, ctx);
 	yield* generateTemplateComponents(options);
 	yield* generateTemplateDirectives(options);
@@ -92,8 +91,8 @@ function* generateTemplateCtx(
 		exps.push([`{} as ${names.InternalProps}`]);
 	}
 
-	if (ctx.generatedTypes.has(names.Bindings)) {
-		exps.push([`{} as ${names.Bindings}`]);
+	if (ctx.generatedTypes.has(names.SetupExposed)) {
+		exps.push([`{} as ${names.SetupExposed}`]);
 	}
 
 	yield `const ${names.ctx} = `;
@@ -141,23 +140,17 @@ function* generateTemplateDirectives(options: ScriptCodegenOptions): Generator<C
 	yield `let ${names.directives}!: __VLS_LocalDirectives & __VLS_GlobalDirectives${endOfLine}`;
 }
 
-function* generateBindings(
-	{ templateComponents, templateCodegen, styleCodegen, setupBindingNames }: ScriptCodegenOptions,
+function* generateSetupExposed(
+	{ setupExposed }: ScriptCodegenOptions,
 	ctx: ScriptCodegenContext,
 ): Generator<Code> {
-	const testNames = new Set([
-		...templateComponents.flatMap(c => [camelize(c), capitalize(camelize(c))]),
-		...templateCodegen?.accessExternalVariables.keys() ?? [],
-		...styleCodegen?.accessExternalVariables.keys() ?? [],
-	]);
-	const exposeNames = [...setupBindingNames].filter(name => testNames.has(name));
-	if (exposeNames.length === 0) {
+	if (!setupExposed.size) {
 		return;
 	}
-	ctx.generatedTypes.add(names.Bindings);
+	ctx.generatedTypes.add(names.SetupExposed);
 
-	yield `type ${names.Bindings} = __VLS_ProxyRefs<{${newLine}`;
-	for (const bindingName of exposeNames) {
+	yield `type ${names.SetupExposed} = __VLS_ProxyRefs<{${newLine}`;
+	for (const bindingName of setupExposed) {
 		const token = Symbol(bindingName.length);
 		yield ['', undefined, 0, { __linkedToken: token }];
 		yield `${bindingName}: typeof `;

packages/language-core/lib/codegen/style/index.ts

@@ -10,15 +10,14 @@ export interface StyleCodegenOptions {
 	ts: typeof import('typescript');
 	vueCompilerOptions: VueCompilerOptions;
 	styles: Sfc['styles'];
-	templateRefNames: Set<string>;
-	directAccessNames: Set<string>;
-	setupBindingNames: Set<string>;
+	setupRefs: Set<string>;
+	setupConsts: Set<string>;
 }
 
 export { generate as generateStyle };
 
 function generate(options: StyleCodegenOptions) {
-	const ctx = createTemplateCodegenContext(options.setupBindingNames);
+	const ctx = createTemplateCodegenContext();
 	const codeGenerator = generateWorker(options, ctx);
 	const codes: Code[] = [];
 	for (const code of codeGenerator) {
@@ -35,7 +34,7 @@ function* generateWorker(
 	ctx: TemplateCodegenContext,
 ) {
 	const endScope = ctx.startScope();
-	ctx.declare(...options.directAccessNames);
+	ctx.declare(...options.setupConsts);
 	yield* generateStyleScopedClasses(options);
 	yield* generateStyleModules(options, ctx);
 	yield* generateCssVars(options, ctx);

packages/language-core/lib/codegen/template/context.ts

@@ -106,15 +106,13 @@ const commentDirectiveRegex = /^<!--\s*@vue-(?<name>[-\w]+)\b(?<content>[\s\S]*)
  * an error/diagnostic was encountered for a region of code covered by a `@vue-expect-error` directive,
  * and additionally how we use that to determine whether to propagate diagnostics back upward.
  */
-export function createTemplateCodegenContext(
-	setupBindingNames: Set<string>,
-) {
+export function createTemplateCodegenContext() {
 	let variableId = 0;
 
 	const scopes: Set<string>[] = [];
 	const hoistVars = new Map<string, string>();
 	const dollarVars = new Set<string>();
-	const accessExternalVariables = new Map<string, Map<string, Set<number>>>();
+	const componentAccessMap = new Map<string, Map<string, Set<number>>>();
 	const slots: {
 		name: string;
 		offset?: number;
@@ -157,7 +155,7 @@ export function createTemplateCodegenContext(
 		slots,
 		dynamicSlots,
 		dollarVars,
-		accessExternalVariables,
+		componentAccessMap,
 		blockConditions,
 		inlayHints,
 		inheritedAttrVars,
@@ -175,10 +173,10 @@ export function createTemplateCodegenContext(
 			}
 			refs.push({ typeExp, offset });
 		},
-		accessExternalVariable(source: string, name: string, offset?: number) {
-			let map = accessExternalVariables.get(name);
+		recordComponentAccess(source: string, name: string, offset?: number) {
+			let map = componentAccessMap.get(name);
 			if (!map) {
-				accessExternalVariables.set(name, map = new Map());
+				componentAccessMap.set(name, map = new Map());
 			}
 			let arr = map.get(source);
 			if (!arr) {
@@ -298,7 +296,7 @@ export function createTemplateCodegenContext(
 	};
 
 	function* generateAutoImport(): Generator<Code> {
-		const all = [...accessExternalVariables.entries()];
+		const all = [...componentAccessMap.entries()];
 		if (!all.some(([, offsets]) => offsets.size)) {
 			return;
 		}
@@ -307,26 +305,7 @@ export function createTemplateCodegenContext(
 		for (const [varName, map] of all) {
 			for (const [source, offsets] of map) {
 				for (const offset of offsets) {
-					if (setupBindingNames.has(varName)) {
-						// #3409
-						yield [
-							varName,
-							source,
-							offset,
-							{
-								...codeFeatures.importCompletionOnly,
-								...codeFeatures.semanticWithoutHighlight,
-							},
-						];
-					}
-					else {
-						yield [
-							varName,
-							source,
-							offset,
-							codeFeatures.importCompletionOnly,
-						];
-					}
+					yield [varName, source, offset, codeFeatures.importCompletionOnly];
 					yield `,`;
 				}
 				offsets.clear();

packages/language-core/lib/codegen/template/element.ts

@@ -31,8 +31,8 @@ export function* generateComponent(
 	const tagOffsets = getElementTagOffsets(node, options.template);
 	const failGeneratedExpressions: FailGeneratedExpression[] = [];
 	const possibleOriginalNames = getPossibleOriginalComponentNames(node.tag, true);
-	const matchImportName = possibleOriginalNames.find(name => options.directAccessNames.has(name));
-	const componentOriginalVar = matchImportName ?? ctx.getInternalVariable();
+	const matchConst = possibleOriginalNames.find(name => options.setupConsts.has(name));
+	const componentOriginalVar = matchConst ?? ctx.getInternalVariable();
 	const componentFunctionalVar = ctx.getInternalVariable();
 	const componentVNodeVar = ctx.getInternalVariable();
 	const componentCtxVar = ctx.getInternalVariable();
@@ -86,7 +86,7 @@ export function* generateComponent(
 		};
 	}
 
-	if (matchImportName) {
+	if (matchConst) {
 		// navigation support
 		yield `/** @type {[`;
 		for (const tagOffset of tagOffsets) {
@@ -100,7 +100,7 @@ export function* generateComponent(
 				];
 			}
 			else {
-				const shouldCapitalize = matchImportName[0]!.toUpperCase() === matchImportName[0];
+				const shouldCapitalize = matchConst[0]!.toUpperCase() === matchConst[0];
 				yield* generateCamelized(
 					shouldCapitalize ? capitalize(node.tag) : node.tag,
 					'template',

packages/language-core/lib/codegen/template/elementDirectives.ts

@@ -37,14 +37,9 @@ export function* generateElementDirectives(
 		) {
 			continue;
 		}
-
-		if (!builtInDirectives.has(prop.name)) {
-			ctx.accessExternalVariable('template', camelize('v-' + prop.name), prop.loc.start.offset);
-		}
-
 		const token = yield* startBoundary('template', prop.loc.start.offset, codeFeatures.verification);
 		yield `__VLS_asFunctionalDirective(`;
-		yield* generateIdentifier(options, prop);
+		yield* generateIdentifier(options, ctx, prop);
 		yield `)(null!, { ...__VLS_directiveBindingRestFields, `;
 		yield* generateArg(options, ctx, prop);
 		yield* generateModifiers(options, ctx, prop);
@@ -57,6 +52,7 @@ export function* generateElementDirectives(
 
 function* generateIdentifier(
 	options: TemplateCodegenOptions,
+	ctx: TemplateCodegenContext,
 	prop: CompilerDOM.DirectiveNode,
 ): Generator<Code> {
 	const rawName = 'v-' + prop.name;
@@ -73,6 +69,9 @@ function* generateIdentifier(
 			verification: options.vueCompilerOptions.checkUnknownDirectives && !builtInDirectives.has(prop.name),
 		},
 	);
+	if (!builtInDirectives.has(prop.name)) {
+		ctx.recordComponentAccess('template', camelize(rawName), prop.loc.start.offset);
+	}
 	yield endBoundary(token, startOffset + rawName.length);
 }
 

packages/language-core/lib/codegen/template/elementProps.ts

@@ -258,12 +258,12 @@ export function* generatePropExp(
 			if (ctx.scopes.some(scope => scope.has(propVariableName))) {
 				yield* codes;
 			}
-			else if (options.templateRefNames.has(propVariableName)) {
+			else if (options.setupRefs.has(propVariableName)) {
 				yield* codes;
 				yield `.value`;
 			}
 			else {
-				ctx.accessExternalVariable('template', propVariableName, exp.loc.start.offset);
+				ctx.recordComponentAccess('template', propVariableName, exp.loc.start.offset);
 				yield names.ctx;
 				yield `.`;
 				yield* codes;

packages/language-core/lib/codegen/template/index.ts

@@ -13,9 +13,8 @@ export interface TemplateCodegenOptions {
 	compilerOptions: ts.CompilerOptions;
 	vueCompilerOptions: VueCompilerOptions;
 	template: NonNullable<Sfc['template']>;
-	directAccessNames: Set<string>;
-	setupBindingNames: Set<string>;
-	templateRefNames: Set<string>;
+	setupRefs: Set<string>;
+	setupConsts: Set<string>;
 	hasDefineSlots?: boolean;
 	propsAssignName?: string;
 	slotsAssignName?: string;
@@ -26,7 +25,7 @@ export interface TemplateCodegenOptions {
 export { generate as generateTemplate };
 
 function generate(options: TemplateCodegenOptions) {
-	const ctx = createTemplateCodegenContext(options.setupBindingNames);
+	const ctx = createTemplateCodegenContext();
 	const codeGenerator = generateWorker(options, ctx);
 	const codes: Code[] = [];
 	for (const code of codeGenerator) {
@@ -43,7 +42,7 @@ function* generateWorker(
 	ctx: TemplateCodegenContext,
 ): Generator<Code> {
 	const endScope = ctx.startScope();
-	ctx.declare(...options.directAccessNames);
+	ctx.declare(...options.setupConsts);
 	const {
 		slotsAssignName,
 		propsAssignName,