wip

Author: johnsoncodehk

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

@@ -28,7 +28,7 @@ export interface ScriptCodegenOptions {
 	templateStartTagOffset: number | undefined;
 	templateCodegen: TemplateCodegenContext & { codes: Code[] } | undefined;
 	styleCodegen: TemplateCodegenContext & { codes: Code[] } | undefined;
-	scriptBindings: Set<string>;
+	setupBindingNames: Set<string>;
 }
 
 export { generate as generateScript };

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

@@ -308,7 +308,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.scriptBindings.has(macro)) {
+			if (!options.setupBindingNames.has(macro)) {
 				yield `${macro}, `;
 			}
 		}

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

@@ -150,10 +150,10 @@ function* generateTemplateDirectives(options: ScriptCodegenOptions): Generator<C
 }
 
 function* generateBindings(
-	{ templateComponents, templateCodegen, styleCodegen, scriptBindings }: ScriptCodegenOptions,
+	{ templateComponents, templateCodegen, styleCodegen, setupBindingNames }: ScriptCodegenOptions,
 	ctx: ScriptCodegenContext,
 ): Generator<Code> {
-	if (!scriptBindings.size) {
+	if (!setupBindingNames.size) {
 		return;
 	}
 	ctx.generatedTypes.add(names.Bindings);
@@ -165,15 +165,15 @@ function* generateBindings(
 	]);
 
 	yield `type ${names.Bindings} = __VLS_ProxyRefs<{${newLine}`;
-	for (const varName of scriptBindings) {
-		if (!usedVars.has(varName)) {
+	for (const bindingName of setupBindingNames) {
+		if (!usedVars.has(bindingName)) {
 			continue;
 		}
-		const token = Symbol(varName.length);
+		const token = Symbol(bindingName.length);
 		yield ['', undefined, 0, { __linkedToken: token }];
-		yield `${varName}: typeof `;
+		yield `${bindingName}: typeof `;
 		yield ['', undefined, 0, { __linkedToken: token }];
-		yield varName;
+		yield bindingName;
 		yield endOfLine;
 	}
 	yield `}>${endOfLine}`;

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

@@ -11,16 +11,17 @@ export interface StyleCodegenOptions {
 	vueCompilerOptions: VueCompilerOptions;
 	usedCssModule: boolean;
 	styles: Sfc['styles'];
-	destructuredPropNames: Set<string>;
 	templateRefNames: Set<string>;
-	scriptBindings: Set<string>;
+	destructuredPropNames: Set<string>;
+	setupBindingNames: Set<string>;
 }
 
 export { generate as generateStyle };
 
 function* generate(options: StyleCodegenOptions) {
-	const ctx = createTemplateCodegenContext(options.scriptBindings);
+	const ctx = createTemplateCodegenContext(options.setupBindingNames);
 	const endScope = ctx.startScope();
+	ctx.declare(...options.destructuredPropNames);
 	yield* generateStyleScopedClasses(options);
 	yield* generateStyleModules(options, ctx);
 	yield* generateCssVars(options, ctx);

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

@@ -107,7 +107,7 @@ const commentDirectiveRegex = /^<!--\s*@vue-(?<name>[-\w]+)\b(?<content>[\s\S]*)
  * and additionally how we use that to determine whether to propagate diagnostics back upward.
  */
 export function createTemplateCodegenContext(
-	scriptBindings: Set<string>,
+	setupBindingNames: Set<string>,
 ) {
 	let variableId = 0;
 
@@ -307,7 +307,7 @@ export function createTemplateCodegenContext(
 		for (const [varName, map] of all) {
 			for (const [source, offsets] of map) {
 				for (const offset of offsets) {
-					if (scriptBindings.has(varName)) {
+					if (setupBindingNames.has(varName)) {
 						// #3409
 						yield [
 							varName,

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

@@ -255,9 +255,7 @@ export function* generatePropExp(
 				codeFeatures.withoutHighlightAndCompletion,
 			);
 
-			if (
-				options.destructuredPropNames.has(propVariableName) || ctx.scopes.some(scope => scope.has(propVariableName))
-			) {
+			if (ctx.scopes.some(scope => scope.has(propVariableName))) {
 				yield* codes;
 			}
 			else if (options.templateRefNames.has(propVariableName)) {

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

@@ -13,10 +13,10 @@ export interface TemplateCodegenOptions {
 	compilerOptions: ts.CompilerOptions;
 	vueCompilerOptions: VueCompilerOptions;
 	template: NonNullable<Sfc['template']>;
-	scriptBindings: Set<string>;
-	scriptSetupImportComponentNames: Set<string>;
 	destructuredPropNames: Set<string>;
+	setupBindingNames: Set<string>;
 	templateRefNames: Set<string>;
+	scriptSetupImportComponentNames: Set<string>;
 	hasDefineSlots?: boolean;
 	propsAssignName?: string;
 	slotsAssignName?: string;
@@ -27,17 +27,15 @@ export interface TemplateCodegenOptions {
 export { generate as generateTemplate };
 
 function generate(options: TemplateCodegenOptions) {
-	const ctx = createTemplateCodegenContext(options.scriptBindings);
+	const ctx = createTemplateCodegenContext(options.setupBindingNames);
 	const codegen = generateWorker(options, ctx);
 	const codes: Code[] = [];
-
 	for (const code of codegen) {
 		if (typeof code === 'object') {
 			code[3] = ctx.resolveCodeFeatures(code[3]);
 		}
 		codes.push(code);
 	}
-
 	return {
 		...ctx,
 		codes,
@@ -49,6 +47,7 @@ function* generateWorker(
 	ctx: TemplateCodegenContext,
 ): Generator<Code> {
 	const endScope = ctx.startScope();
+	ctx.declare(...options.destructuredPropNames);
 	const {
 		slotsAssignName,
 		propsAssignName,

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

@@ -16,7 +16,7 @@ const isLiteralWhitelisted = /*@__PURE__*/ makeMap('true,false,null,this');
 export function* generateInterpolation(
 	options: Pick<
 		TemplateCodegenOptions | StyleCodegenOptions,
-		'ts' | 'destructuredPropNames' | 'templateRefNames'
+		'ts' | 'templateRefNames'
 	>,
 	ctx: TemplateCodegenContext,
 	block: SfcBlock,
@@ -70,9 +70,9 @@ export function* generateInterpolation(
 }
 
 function* forEachInterpolationSegment(
-	options: Pick<
+	{ ts, templateRefNames }: Pick<
 		TemplateCodegenOptions | StyleCodegenOptions,
-		'ts' | 'destructuredPropNames' | 'templateRefNames'
+		'ts' | 'templateRefNames'
 	>,
 	ctx: TemplateCodegenContext,
 	block: SfcBlock,
@@ -93,7 +93,7 @@ function* forEachInterpolationSegment(
 
 	for (
 		const [name, offset, isShorthand] of forEachIdentifiers(
-			options,
+			ts,
 			ctx,
 			block,
 			originalCode,
@@ -113,7 +113,7 @@ function* forEachInterpolationSegment(
 		// fix https://github.com/vuejs/language-tools/issues/1264
 		yield ['', offset, 'errorMappingOnly'];
 
-		if (options.templateRefNames.has(name)) {
+		if (templateRefNames.has(name)) {
 			yield `__VLS_unref(`;
 			yield [name, offset];
 			yield `)`;
@@ -134,29 +134,25 @@ function* forEachInterpolationSegment(
 }
 
 function* forEachIdentifiers(
-	options: Pick<
-		TemplateCodegenOptions | StyleCodegenOptions,
-		'ts' | 'destructuredPropNames'
-	>,
+	ts: typeof import('typescript'),
 	ctx: TemplateCodegenContext,
 	block: SfcBlock,
 	originalCode: string,
 	code: string,
 	prefix: string,
 ): Generator<[string, number, boolean]> {
 	if (
-		identifierRegex.test(originalCode) && !shouldIdentifierSkipped(options, ctx, originalCode)
+		identifierRegex.test(originalCode) && !shouldIdentifierSkipped(ctx, originalCode)
 	) {
 		yield [originalCode, prefix.length, false];
 		return;
 	}
 
-	const { ts } = options;
 	const endScope = ctx.startScope();
 	const ast = getTypeScriptAST(ts, block, code);
 	for (const [id, isShorthand] of forEachDeclarations(ts, ast, ast, ctx)) {
 		const text = getNodeText(ts, id, ast);
-		if (shouldIdentifierSkipped(options, ctx, text)) {
+		if (shouldIdentifierSkipped(ctx, text)) {
 			continue;
 		}
 		yield [text, getStartEnd(ts, id, ast).start, isShorthand];
@@ -288,10 +284,6 @@ function* forEachDeclarationsInTypeNode(
 }
 
 function shouldIdentifierSkipped(
-	{ destructuredPropNames }: Pick<
-		TemplateCodegenOptions | StyleCodegenOptions,
-		'destructuredPropNames'
-	>,
 	ctx: TemplateCodegenContext,
 	text: string,
 ) {
@@ -300,6 +292,5 @@ function shouldIdentifierSkipped(
 		|| isGloballyAllowed(text)
 		|| isLiteralWhitelisted(text)
 		|| text === 'require'
-		|| text.startsWith('__VLS_')
-		|| destructuredPropNames.has(text);
+		|| text.startsWith('__VLS_');
 }

packages/language-core/lib/plugins/vue-tsx.ts

@@ -136,7 +136,7 @@ function useCodegen(
 		return newNames;
 	});
 
-	const getSetupDestructuredPropNames = computedSet(() => {
+	const getDestructuredPropNames = computedSet(() => {
 		const newNames = new Set(getScriptSetupRanges()?.defineProps?.destructured?.keys());
 		const rest = getScriptSetupRanges()?.defineProps?.destructuredRest;
 		if (rest) {
@@ -197,10 +197,10 @@ function useCodegen(
 			compilerOptions: ctx.compilerOptions,
 			vueCompilerOptions: getResolvedOptions(),
 			template: sfc.template,
-			scriptBindings: getBindingNames(),
-			scriptSetupImportComponentNames: getSetupImportComponentNames(),
-			destructuredPropNames: getSetupDestructuredPropNames(),
+			destructuredPropNames: getDestructuredPropNames(),
+			setupBindingNames: getBindingNames(),
 			templateRefNames: getSetupTemplateRefNames(),
+			scriptSetupImportComponentNames: getSetupImportComponentNames(),
 			hasDefineSlots: setupHasDefineSlots(),
 			propsAssignName: getSetupPropsAssignName(),
 			slotsAssignName: getSetupSlotsAssignName(),
@@ -225,7 +225,7 @@ function useCodegen(
 			vueCompilerOptions: getResolvedOptions(),
 			script: sfc.script,
 			scriptSetup: sfc.scriptSetup,
-			scriptBindings: getBindingNames(),
+			setupBindingNames: getBindingNames(),
 			fileName,
 			lang: getLang(),
 			scriptRanges: getScriptRanges(),
@@ -248,9 +248,9 @@ function useCodegen(
 			vueCompilerOptions: getResolvedOptions(),
 			usedCssModule: usedCssModule(),
 			styles: sfc.styles,
-			destructuredPropNames: getSetupDestructuredPropNames(),
+			destructuredPropNames: getDestructuredPropNames(),
 			templateRefNames: getSetupTemplateRefNames(),
-			scriptBindings: getBindingNames(),
+			setupBindingNames: getBindingNames(),
 		});
 		const codes: Code[] = [];
 		let ctx: TemplateCodegenContext;