fix(html): Load custom data the proper way (#841)

* fix(html): Load custom data the proper way

* chore: changeset

.changeset/thirty-peas-turn.md

@@ -0,0 +1,6 @@
+---
+"@astrojs/language-server": patch
+"astro-vscode": patch
+---
+
+Fixes completions for Astro-specific attributes not working in certain contexts

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

@@ -1,22 +1,36 @@
 import { CompletionItemKind, ServicePlugin, ServicePluginInstance } from '@volar/language-server';
 import { create as createHtmlService } from 'volar-service-html';
+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';
 
 export const create = (): ServicePlugin => {
-	const htmlServicePlugin = createHtmlService();
+	const htmlServicePlugin = createHtmlService({
+		getCustomData: async (context) => {
+			const customData: string[] = (await context.env.getConfiguration?.('html.customData')) ?? [];
+			const newData: html.IHTMLDataProvider[] = [];
+			for (const customDataPath of customData) {
+				const uri = Utils.resolvePath(URI.parse(context.env.workspaceFolder), customDataPath);
+				const json = await context.env.fs?.readFile?.(uri.toString());
+				if (json) {
+					try {
+						const data = JSON.parse(json);
+						newData.push(html.newHTMLDataProvider(customDataPath, data));
+					} catch (error) {
+						console.error(error);
+					}
+				}
+			}
+			return [...newData, astroAttributes, astroElements, classListAttribute];
+		},
+	});
 	return {
 		...htmlServicePlugin,
 		create(context): ServicePluginInstance {
 			const htmlPlugin = htmlServicePlugin.create(context);
 
-			htmlPlugin.provide['html/updateCustomData']?.([
-				astroAttributes,
-				astroElements,
-				classListAttribute,
-			]);
-
 			return {
 				...htmlPlugin,
 				async provideCompletionItems(document, position, completionContext, token) {

packages/language-server/test/html/custom-data.test.ts

@@ -0,0 +1,22 @@
+import { Position } from '@volar/language-server';
+import { expect } from 'chai';
+import { describe } from 'mocha';
+import { type LanguageServer, getLanguageServer } from '../server.js';
+
+describe('HTML - Custom Data', () => {
+	let languageServer: LanguageServer;
+
+	before(async () => (languageServer = await getLanguageServer()));
+
+	it('Can properly get completions for attributes added by our custom data', async () => {
+		const document = await languageServer.openFakeDocument(`<div class></div>`, 'astro');
+		const completions = await languageServer.handle.sendCompletionRequest(
+			document.uri,
+			Position.create(0, 10)
+		);
+
+		const labels = completions!.items.map((i) => i.label);
+		expect(completions!.items).to.not.be.empty;
+		expect(labels).to.include('class:list');
+	});
+});