fix(language-server): defer HTML expression completions to TS

.changeset/green-forks-laugh.md

@@ -0,0 +1,6 @@
+---
+'@astrojs/language-server': patch
+'astro-vscode': patch
+---
+
+Fixes completions sometimes not working inside the `href` attribute

packages/language-tools/language-server/src/plugins/html.ts

@@ -5,7 +5,7 @@ import * as html from 'vscode-html-languageservice';
 import { URI, Utils } from 'vscode-uri';
 import { AstroVirtualCode } from '../core/index.js';
 import { astroAttributes, astroElements, classListAttribute } from './html-data.js';
-import { isInComponentStartTag } from './utils.js';
+import { isInComponentStartTag, isInsideExpression } from './utils.js';
 
 export const create = (): LanguageServicePlugin => {
 	const htmlPlugin = createHtmlService({
@@ -44,9 +44,18 @@ export const create = (): LanguageServicePlugin => {
 					const sourceScript = decoded && context.language.scripts.get(decoded[0]);
 					const root = sourceScript?.generated?.root;
 					if (!(root instanceof AstroVirtualCode)) return;
+					const offset = document.offsetAt(position);
 
 					// Don't return completions if the current node is a component
-					if (isInComponentStartTag(root.htmlDocument, document.offsetAt(position))) {
+					if (isInComponentStartTag(root.htmlDocument, offset)) {
+						return null;
+					}
+
+					const currentNode = root.htmlDocument.findNodeAt(offset);
+					const sourceText = root.snapshot.getText(0, root.snapshot.getLength());
+
+					// Let the TypeScript service handle `{...}` expressions in HTML attributes.
+					if (isInsideExpression(sourceText, currentNode.start, offset)) {
 						return null;
 					}
 

packages/language-tools/language-server/test/typescript/completions.test.ts

@@ -122,4 +122,29 @@ describe('TypeScript - Completions', async () => {
 		const allLabels = completions?.items.map((item) => item.label);
 		assert.ok(allLabels.includes('alert'));
 	});
+
+	it('Can get completions inside HTML attribute expressions', async () => {
+		const documents = [
+			{
+				content: '---\nconst something = "Hello";\n---\n\n<a href={some}>Click here</a>',
+				position: Position.create(4, 13),
+			},
+			{
+				content: '---\nconst something = "Hello";\n---\n\n<img alt={some} />',
+				position: Position.create(4, 12),
+			},
+		];
+
+		for (const { content, position } of documents) {
+			const document = await languageServer.openFakeDocument(content, 'astro');
+			const completions = await languageServer.handle.sendCompletionRequest(
+				document.uri,
+				position,
+			);
+
+			const allLabels = completions?.items.map((item) => item.label);
+			assert.ok(allLabels);
+			assert.ok(allLabels.includes('something'));
+		}
+	});
 });