@astrojs/language-server 0.13.2 → 0.13.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @astrojs/language-server
 
+## 0.13.3
+
+### Patch Changes
+
+- 1fb21ff: Add support for folding CSS
+- 99d7536: Add support for semantic tokens
+- b363c00: Improve completions for components
+
 ## 0.13.2
 
 ### Patch Changes

package/dist/core/documents/DocumentMapper.d.ts

@@ -1,4 +1,4 @@
-import { Position, Range, CompletionItem, Hover, Diagnostic, ColorPresentation, SymbolInformation, LocationLink, TextDocumentEdit, CodeAction, SelectionRange, TextEdit, InsertReplaceEdit } from 'vscode-languageserver';
+import { Position, Range, CompletionItem, Hover, Diagnostic, ColorPresentation, SymbolInformation, LocationLink, TextDocumentEdit, CodeAction, SelectionRange, TextEdit, InsertReplaceEdit, FoldingRange } from 'vscode-languageserver';
 import { TagInformation } from './utils';
 import { SourceMapConsumer } from 'source-map';
 export interface DocumentMapper {
@@ -82,4 +82,5 @@ export declare function mapSymbolInformationToOriginal(fragment: Pick<DocumentMa
 export declare function mapLocationLinkToOriginal(fragment: DocumentMapper, def: LocationLink): LocationLink;
 export declare function mapTextDocumentEditToOriginal(fragment: DocumentMapper, edit: TextDocumentEdit): TextDocumentEdit;
 export declare function mapCodeActionToOriginal(fragment: DocumentMapper, codeAction: CodeAction): CodeAction;
+export declare function mapFoldingRangeToParent(fragment: DocumentMapper, foldingRange: FoldingRange): FoldingRange;
 export declare function mapSelectionRangeToParent(fragment: Pick<DocumentMapper, 'getOriginalPosition'>, selectionRange: SelectionRange): SelectionRange;

package/dist/core/documents/DocumentMapper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mapSelectionRangeToParent = exports.mapCodeActionToOriginal = exports.mapTextDocumentEditToOriginal = exports.mapLocationLinkToOriginal = exports.mapSymbolInformationToOriginal = exports.mapColorPresentationToOriginal = exports.mapDiagnosticToGenerated = exports.mapEditToOriginal = exports.mapInsertReplaceEditToOriginal = exports.mapObjWithRangeToOriginal = exports.mapHoverToParent = exports.mapCompletionItemToOriginal = exports.mapRangeToGenerated = exports.mapRangeToOriginal = exports.SourceMapDocumentMapper = exports.FragmentMapper = exports.IdentityMapper = void 0;
+exports.mapSelectionRangeToParent = exports.mapFoldingRangeToParent = exports.mapCodeActionToOriginal = exports.mapTextDocumentEditToOriginal = exports.mapLocationLinkToOriginal = exports.mapSymbolInformationToOriginal = exports.mapColorPresentationToOriginal = exports.mapDiagnosticToGenerated = exports.mapEditToOriginal = exports.mapInsertReplaceEditToOriginal = exports.mapObjWithRangeToOriginal = exports.mapHoverToParent = exports.mapCompletionItemToOriginal = exports.mapRangeToGenerated = exports.mapRangeToOriginal = exports.SourceMapDocumentMapper = exports.FragmentMapper = exports.IdentityMapper = void 0;
 const vscode_languageserver_1 = require("vscode-languageserver");
 const utils_1 = require("./utils");
 /**
@@ -231,6 +231,13 @@ function mapCodeActionToOriginal(fragment, codeAction) {
     }, codeAction.kind);
 }
 exports.mapCodeActionToOriginal = mapCodeActionToOriginal;
+function mapFoldingRangeToParent(fragment, foldingRange) {
+    // Despite FoldingRange asking for a start and end line and a start and end character, FoldingRanges
+    // don't use the Range type, instead asking for 4 number. Not sure why, but it's not convenient
+    const range = mapRangeToOriginal(fragment, vscode_languageserver_1.Range.create(foldingRange.startLine, foldingRange.startCharacter || 0, foldingRange.endLine, foldingRange.endCharacter || 0));
+    return vscode_languageserver_1.FoldingRange.create(range.start.line, range.end.line, foldingRange.startCharacter ? range.start.character : undefined, foldingRange.endCharacter ? range.end.character : undefined, foldingRange.kind);
+}
+exports.mapFoldingRangeToParent = mapFoldingRangeToParent;
 function mapSelectionRangeToParent(fragment, selectionRange) {
     const { range, parent } = selectionRange;
     return vscode_languageserver_1.SelectionRange.create(mapRangeToOriginal(fragment, range), parent && mapSelectionRangeToParent(fragment, parent));

package/dist/plugins/PluginHost.d.ts

@@ -1,4 +1,4 @@
-import { CancellationToken, Color, ColorInformation, ColorPresentation, CompletionContext, CompletionItem, CompletionList, DefinitionLink, Diagnostic, FoldingRange, Hover, Position, Range, Location, SignatureHelp, SignatureHelpContext, TextDocumentContentChangeEvent, TextDocumentIdentifier, WorkspaceEdit, SymbolInformation } from 'vscode-languageserver';
+import { CancellationToken, Color, ColorInformation, ColorPresentation, CompletionContext, CompletionItem, CompletionList, DefinitionLink, Diagnostic, FoldingRange, Hover, Position, Range, Location, SignatureHelp, SignatureHelpContext, TextDocumentContentChangeEvent, TextDocumentIdentifier, WorkspaceEdit, SymbolInformation, SemanticTokens } from 'vscode-languageserver';
 import type { AppCompletionItem, Plugin } from './interfaces';
 import { DocumentManager } from '../core/documents/DocumentManager';
 interface PluginHostConfig {
@@ -19,6 +19,7 @@ export declare class PluginHost {
     doTagComplete(textDocument: TextDocumentIdentifier, position: Position): Promise<string | null>;
     getFoldingRanges(textDocument: TextDocumentIdentifier): Promise<FoldingRange[] | null>;
     getDocumentSymbols(textDocument: TextDocumentIdentifier, cancellationToken: CancellationToken): Promise<SymbolInformation[]>;
+    getSemanticTokens(textDocument: TextDocumentIdentifier, range?: Range, cancellationToken?: CancellationToken): Promise<SemanticTokens | null>;
     getDefinitions(textDocument: TextDocumentIdentifier, position: Position): Promise<DefinitionLink[] | Location[]>;
     rename(textDocument: TextDocumentIdentifier, position: Position, newName: string): Promise<WorkspaceEdit | null>;
     getDocumentColors(textDocument: TextDocumentIdentifier): Promise<ColorInformation[]>;

package/dist/plugins/PluginHost.js

@@ -57,6 +57,10 @@ class PluginHost {
         const document = this.getDocument(textDocument.uri);
         return (0, lodash_1.flatten)(await this.execute('getDocumentSymbols', [document, cancellationToken], ExecuteMode.Collect));
     }
+    async getSemanticTokens(textDocument, range, cancellationToken) {
+        const document = this.getDocument(textDocument.uri);
+        return await this.execute('getSemanticTokens', [document, range, cancellationToken], ExecuteMode.FirstNonNull);
+    }
     async getDefinitions(textDocument, position) {
         const document = this.getDocument(textDocument.uri);
         const definitions = (0, lodash_1.flatten)(await this.execute('getDefinitions', [document, position], ExecuteMode.Collect));

package/dist/plugins/astro/features/CompletionsProvider.d.ts

@@ -5,14 +5,13 @@ import { LanguageServiceManager as TypeScriptLanguageServiceManager } from '../.
 export declare class CompletionsProviderImpl {
     private readonly docManager;
     private readonly languageServiceManager;
+    directivesHTMLLang: import("vscode-html-languageservice").LanguageService;
     constructor(docManager: DocumentManager, languageServiceManager: TypeScriptLanguageServiceManager);
     getCompletions(document: AstroDocument, position: Position, completionContext?: CompletionContext): Promise<AppCompletionList | null>;
-    private getClientHintCompletion;
     private getComponentScriptCompletion;
     private getPropCompletions;
     private getImportedSymbol;
     private getPropType;
-    private getCompletionItemForTypeMember;
-    private isComponentTag;
-    private isInsideFrontmatter;
+    private getCompletionItemForProperty;
+    private isAstroComponent;
 }

package/dist/plugins/astro/features/CompletionsProvider.js

@@ -9,8 +9,15 @@ const typescript_1 = __importDefault(require("typescript"));
 const utils_1 = require("../../../core/documents/utils");
 const utils_2 = require("../../../utils");
 const utils_3 = require("../../typescript/utils");
+const vscode_html_languageservice_1 = require("vscode-html-languageservice");
+const astro_attributes_1 = require("../../html/features/astro-attributes");
+const utils_4 = require("../../html/utils");
 class CompletionsProviderImpl {
     constructor(docManager, languageServiceManager) {
+        this.directivesHTMLLang = (0, vscode_html_languageservice_1.getLanguageService)({
+            customDataProviders: [astro_attributes_1.astroDirectives],
+            useDefaultDataProvider: false,
+        });
         this.docManager = docManager;
         this.languageServiceManager = languageServiceManager;
     }
@@ -24,46 +31,23 @@ class CompletionsProviderImpl {
             if (frontmatter)
                 items.push(frontmatter);
         }
-        if ((completionContext === null || completionContext === void 0 ? void 0 : completionContext.triggerCharacter) === ':') {
-            const clientHint = this.getClientHintCompletion(doc, position, completionContext);
-            if (clientHint)
-                items.push(...clientHint);
-        }
-        if (!this.isInsideFrontmatter(document, position)) {
+        const offset = document.offsetAt(position);
+        if (!(0, utils_1.isInsideFrontmatter)(document.getText(), offset)) {
             const props = await this.getPropCompletions(document, position, completionContext);
             if (props.length) {
                 items.push(...props);
             }
         }
+        const html = document.html;
+        if ((0, utils_1.isInComponentStartTag)(html, offset)) {
+            const node = html.findNodeAt(offset);
+            const isAstro = await this.isAstroComponent(document, node);
+            if (!isAstro) {
+                items.push(...(0, utils_4.removeDataAttrCompletion)(this.directivesHTMLLang.doComplete(document, position, html).items));
+            }
+        }
         return vscode_languageserver_1.CompletionList.create(items, true);
     }
-    getClientHintCompletion(document, position, completionContext) {
-        const node = document.html.findNodeAt(document.offsetAt(position));
-        if (!(0, utils_2.isPossibleClientComponent)(node))
-            return null;
-        return [
-            {
-                label: ':load',
-                insertText: 'load',
-                commitCharacters: ['l'],
-            },
-            {
-                label: ':idle',
-                insertText: 'idle',
-                commitCharacters: ['i'],
-            },
-            {
-                label: ':visible',
-                insertText: 'visible',
-                commitCharacters: ['v'],
-            },
-            {
-                label: ':media',
-                insertText: 'media',
-                commitCharacters: ['m'],
-            },
-        ];
-    }
     getComponentScriptCompletion(document, position, completionContext) {
         const base = {
             kind: vscode_languageserver_1.CompletionItemKind.Snippet,
@@ -96,11 +80,10 @@ class CompletionsProviderImpl {
         return null;
     }
     async getPropCompletions(document, position, completionContext) {
-        var _a, _b;
         const offset = document.offsetAt(position);
         const html = document.html;
         const node = html.findNodeAt(offset);
-        if (!this.isComponentTag(node)) {
+        if (!(0, utils_2.isPossibleComponent)(node)) {
             return [];
         }
         const inAttribute = node.start + node.tag.length < offset;
@@ -119,8 +102,7 @@ class CompletionsProviderImpl {
         const componentName = node.tag;
         const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
         // Get the source file
-        const filePath = (0, utils_2.urlToPath)(document.uri);
-        const tsFilePath = (0, utils_3.toVirtualAstroFilePath)(filePath);
+        const tsFilePath = (0, utils_3.toVirtualAstroFilePath)(tsDoc.filePath);
         const program = lang.getProgram();
         const sourceFile = program === null || program === void 0 ? void 0 : program.getSourceFile(tsFilePath);
         const typeChecker = program === null || program === void 0 ? void 0 : program.getTypeChecker();
@@ -133,26 +115,22 @@ class CompletionsProviderImpl {
         if (!importType) {
             return [];
         }
-        // Get the import's type
+        // Get the component's props type
         const componentType = this.getPropType(importType, typeChecker);
         if (!componentType) {
             return [];
         }
-        const completionItems = [];
-        // Add completions for this types props
-        for (let baseType of componentType.getBaseTypes() || []) {
-            const members = ((_a = baseType.getSymbol()) === null || _a === void 0 ? void 0 : _a.members) || [];
-            members.forEach((mem) => {
-                let completionItem = this.getCompletionItemForTypeMember(mem, typeChecker);
-                completionItems.push(completionItem);
-            });
-        }
-        // Add completions for this types base members
-        const members = ((_b = componentType.getSymbol()) === null || _b === void 0 ? void 0 : _b.members) || [];
-        members.forEach((mem) => {
-            let completionItem = this.getCompletionItemForTypeMember(mem, typeChecker);
+        let completionItems = [];
+        // Add completions for this component's props type properties
+        const properties = componentType.getProperties().filter((property) => property.name !== 'children') || [];
+        properties.forEach((property) => {
+            let completionItem = this.getCompletionItemForProperty(property, typeChecker);
             completionItems.push(completionItem);
         });
+        // Ensure that props shows up first as a completion, despite this plugin being ran after the HTML one
+        completionItems = completionItems.map((item) => {
+            return { ...item, sortText: '_' };
+        });
         return completionItems;
     }
     getImportedSymbol(sourceFile, identifier) {
@@ -203,7 +181,7 @@ class CompletionsProviderImpl {
         }
         return null;
     }
-    getCompletionItemForTypeMember(mem, typeChecker) {
+    getCompletionItemForProperty(mem, typeChecker) {
         let item = {
             label: mem.name,
             insertText: mem.name,
@@ -223,15 +201,29 @@ class CompletionsProviderImpl {
         }
         return item;
     }
-    isComponentTag(node) {
-        if (!node.tag) {
+    async isAstroComponent(document, node) {
+        var _a;
+        const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
+        // Get the source file
+        const tsFilePath = (0, utils_3.toVirtualAstroFilePath)(tsDoc.filePath);
+        const program = lang.getProgram();
+        const sourceFile = program === null || program === void 0 ? void 0 : program.getSourceFile(tsFilePath);
+        const typeChecker = program === null || program === void 0 ? void 0 : program.getTypeChecker();
+        if (!sourceFile || !typeChecker) {
             return false;
         }
-        const firstChar = node.tag[0];
-        return /[A-Z]/.test(firstChar);
-    }
-    isInsideFrontmatter(document, position) {
-        return (0, utils_1.isInsideFrontmatter)(document.getText(), document.offsetAt(position));
+        const componentName = node.tag;
+        const imp = this.getImportedSymbol(sourceFile, componentName);
+        const importType = imp && typeChecker.getTypeAtLocation(imp);
+        if (!importType) {
+            return false;
+        }
+        const symbolDeclaration = (_a = importType.getSymbol()) === null || _a === void 0 ? void 0 : _a.declarations;
+        if (symbolDeclaration) {
+            const fileName = symbolDeclaration[0].getSourceFile().fileName;
+            return fileName.endsWith('.astro');
+        }
+        return false;
     }
 }
 exports.CompletionsProviderImpl = CompletionsProviderImpl;

package/dist/plugins/css/CSSPlugin.d.ts

@@ -1,4 +1,4 @@
-import { Color, ColorInformation, ColorPresentation, CompletionContext, CompletionList, Hover, Position, Range, SymbolInformation } from 'vscode-languageserver';
+import { Color, ColorInformation, ColorPresentation, CompletionContext, CompletionList, FoldingRange, Hover, Position, Range, SymbolInformation } from 'vscode-languageserver';
 import { ConfigManager } from '../../core/config/ConfigManager';
 import { AstroDocument } from '../../core/documents';
 import type { Plugin } from '../interfaces';
@@ -14,6 +14,7 @@ export declare class CSSPlugin implements Plugin {
     private getCompletionsInternal;
     getDocumentColors(document: AstroDocument): ColorInformation[];
     getColorPresentations(document: AstroDocument, range: Range, color: Color): ColorPresentation[];
+    getFoldingRanges(document: AstroDocument): FoldingRange[] | null;
     getDocumentSymbols(document: AstroDocument): SymbolInformation[];
     private inStyleAttributeWithoutInterpolation;
     /**

package/dist/plugins/css/CSSPlugin.js

@@ -37,7 +37,8 @@ class CSSPlugin {
             return null;
         }
         const cssDocument = this.getCSSDocumentForStyleTag(styleTag, document);
-        if (shouldExcludeHover(cssDocument)) {
+        const cssLang = extractLanguage(cssDocument);
+        if (!isSupportedByLangService(cssLang)) {
             return null;
         }
         return this.doHoverInternal(cssDocument, position);
@@ -104,7 +105,7 @@ class CSSPlugin {
         const allColorInfo = this.getCSSDocumentsForDocument(document).map((cssDoc) => {
             const cssLang = extractLanguage(cssDoc);
             const langService = (0, language_service_1.getLanguageService)(cssLang);
-            if (shouldExcludeColor(cssLang)) {
+            if (!isSupportedByLangService(cssLang)) {
                 return [];
             }
             return langService
@@ -120,7 +121,8 @@ class CSSPlugin {
         const allColorPres = this.getCSSDocumentsForDocument(document).map((cssDoc) => {
             const cssLang = extractLanguage(cssDoc);
             const langService = (0, language_service_1.getLanguageService)(cssLang);
-            if ((!cssDoc.isInGenerated(range.start) && !cssDoc.isInGenerated(range.end)) || shouldExcludeColor(cssLang)) {
+            if ((!cssDoc.isInGenerated(range.start) && !cssDoc.isInGenerated(range.end)) ||
+                !isSupportedByLangService(cssLang)) {
                 return [];
             }
             return langService
@@ -129,6 +131,14 @@ class CSSPlugin {
         });
         return (0, lodash_1.flatten)(allColorPres);
     }
+    getFoldingRanges(document) {
+        const allFoldingRanges = this.getCSSDocumentsForDocument(document).map((cssDoc) => {
+            const cssLang = extractLanguage(cssDoc);
+            const langService = (0, language_service_1.getLanguageService)(cssLang);
+            return langService.getFoldingRanges(cssDoc).map((foldingRange) => (0, documents_1.mapFoldingRangeToParent)(cssDoc, foldingRange));
+        });
+        return (0, lodash_1.flatten)(allFoldingRanges);
+    }
     getDocumentSymbols(document) {
         if (!this.featureEnabled('documentSymbols')) {
             return [];
@@ -182,32 +192,13 @@ class CSSPlugin {
 }
 exports.CSSPlugin = CSSPlugin;
 /**
- * Exclude certain language when getting hover info
- * The CSS language service only supports CSS, LESS and SCSS,
- * which mean that we cannot support hover info in other languages
+ * Check is a CSSDocument's language is supported by the CSS language service
  */
-function shouldExcludeHover(document) {
-    const language = typeof document === 'string' ? document : extractLanguage(document);
+function isSupportedByLangService(language) {
     switch (language) {
-        case 'sass':
-        case 'stylus':
-        case 'styl':
-            return true;
-        default:
-            return false;
-    }
-}
-/**
- * Exclude certain language when getting colors
- * The CSS language service only supports CSS, LESS and SCSS,
- * which mean that we cannot support colors in other languages
- */
-function shouldExcludeColor(document) {
-    const language = typeof document === 'string' ? document : extractLanguage(document);
-    switch (language) {
-        case 'sass':
-        case 'stylus':
-        case 'styl':
+        case 'css':
+        case 'scss':
+        case 'less':
             return true;
         default:
             return false;

package/dist/plugins/html/HTMLPlugin.d.ts

@@ -5,6 +5,7 @@ import { AstroDocument } from '../../core/documents/AstroDocument';
 export declare class HTMLPlugin implements Plugin {
     __name: string;
     private lang;
+    private attributeOnlyLang;
     private componentLang;
     private styleScriptTemplate;
     private configManager;

package/dist/plugins/html/HTMLPlugin.js

@@ -7,11 +7,16 @@ const vscode_html_languageservice_1 = require("vscode-html-languageservice");
 const utils_1 = require("../../core/documents/utils");
 const utils_2 = require("../../utils");
 const astro_attributes_1 = require("./features/astro-attributes");
+const utils_3 = require("./utils");
 class HTMLPlugin {
     constructor(configManager) {
         this.__name = 'html';
         this.lang = (0, vscode_html_languageservice_1.getLanguageService)({
+            customDataProviders: [astro_attributes_1.astroAttributes, astro_attributes_1.classListAttribute],
+        });
+        this.attributeOnlyLang = (0, vscode_html_languageservice_1.getLanguageService)({
             customDataProviders: [astro_attributes_1.astroAttributes],
+            useDefaultDataProvider: false,
         });
         this.componentLang = (0, vscode_html_languageservice_1.getLanguageService)({
             customDataProviders: [astro_attributes_1.astroAttributes, astro_attributes_1.astroDirectives],
@@ -66,9 +71,9 @@ class HTMLPlugin {
         // If we're in a component starting tag, we do not want HTML language completions
         // as HTML attributes are not valid for components
         const results = (0, utils_1.isInComponentStartTag)(html, document.offsetAt(position))
-            ? vscode_languageserver_1.CompletionList.create([])
-            : this.lang.doComplete(document, position, html);
-        return vscode_languageserver_1.CompletionList.create([...results.items, ...this.getLangCompletions(results.items), ...emmetResults.items], 
+            ? (0, utils_3.removeDataAttrCompletion)(this.attributeOnlyLang.doComplete(document, position, html).items)
+            : this.lang.doComplete(document, position, html).items;
+        return vscode_languageserver_1.CompletionList.create([...results, ...this.getLangCompletions(results), ...emmetResults.items], 
         // Emmet completions change on every keystroke, so they are never complete
         emmetResults.items.length > 0);
     }

package/dist/plugins/html/features/astro-attributes.d.ts

@@ -1,2 +1,3 @@
+export declare const classListAttribute: import("vscode-html-languageservice").IHTMLDataProvider;
 export declare const astroAttributes: import("vscode-html-languageservice").IHTMLDataProvider;
 export declare const astroDirectives: import("vscode-html-languageservice").IHTMLDataProvider;

package/dist/plugins/html/features/astro-attributes.js

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.astroDirectives = exports.astroAttributes = void 0;
+exports.astroDirectives = exports.astroAttributes = exports.classListAttribute = void 0;
 const vscode_html_languageservice_1 = require("vscode-html-languageservice");
-exports.astroAttributes = (0, vscode_html_languageservice_1.newHTMLDataProvider)('astro-attributes', {
+exports.classListAttribute = (0, vscode_html_languageservice_1.newHTMLDataProvider)('class-list', {
     version: 1,
     globalAttributes: [
         {
             name: 'class:list',
             description: 'Utility to provide a list of class',
         },
+    ],
+});
+exports.astroAttributes = (0, vscode_html_languageservice_1.newHTMLDataProvider)('astro-attributes', {
+    version: 1,
+    globalAttributes: [
         {
             name: 'set:html',
             description: 'Inject unescaped HTML into this tag',
@@ -75,6 +80,7 @@ exports.astroDirectives = (0, vscode_html_languageservice_1.newHTMLDataProvider)
         {
             name: 'client:load',
             description: 'Start importing the component JS at page load. Hydrate the component when import completes.',
+            valueSet: 'v',
             references: [
                 {
                     name: 'Astro documentation',
@@ -85,6 +91,7 @@ exports.astroDirectives = (0, vscode_html_languageservice_1.newHTMLDataProvider)
         {
             name: 'client:idle',
             description: 'Start importing the component JS as soon as main thread is free (uses requestIdleCallback()). Hydrate the component when import completes.',
+            valueSet: 'v',
             references: [
                 {
                     name: 'Astro documentation',
@@ -95,6 +102,7 @@ exports.astroDirectives = (0, vscode_html_languageservice_1.newHTMLDataProvider)
         {
             name: 'client:visible',
             description: 'Start importing the component JS as soon as the element enters the viewport (uses IntersectionObserver). Hydrate the component when import completes. Useful for content lower down on the page.',
+            valueSet: 'v',
             references: [
                 {
                     name: 'Astro documentation',
@@ -115,6 +123,7 @@ exports.astroDirectives = (0, vscode_html_languageservice_1.newHTMLDataProvider)
         {
             name: 'client:only',
             description: 'Start importing the component JS at page load and hydrate when the import completes, similar to client:load. The component will be skipped at build time, useful for components that are entirely dependent on client-side APIs. This is best avoided unless absolutely needed, in most cases it is best to render placeholder content on the server and delay any browser API calls until the component hydrates in the browser.',
+            valueSet: 'v',
             references: [
                 {
                     name: 'Astro documentation',

package/dist/plugins/html/utils.d.ts

@@ -0,0 +1,6 @@
+import { CompletionItem } from 'vscode-languageserver-types';
+/**
+ * The VS Code HTML language service provides a completion for data attributes that is independent from
+ * data providers, which mean that you can't disable it, so this function removes them from a completionList
+ */
+export declare function removeDataAttrCompletion(items: CompletionItem[]): CompletionItem[];

package/dist/plugins/html/utils.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeDataAttrCompletion = void 0;
+/**
+ * The VS Code HTML language service provides a completion for data attributes that is independent from
+ * data providers, which mean that you can't disable it, so this function removes them from a completionList
+ */
+function removeDataAttrCompletion(items) {
+    return items.filter((item) => !item.label.startsWith('data-'));
+}
+exports.removeDataAttrCompletion = removeDataAttrCompletion;

package/dist/plugins/typescript/TypeScriptPlugin.d.ts

@@ -1,4 +1,4 @@
-import { CancellationToken, CompletionContext, DefinitionLink, Diagnostic, Hover, Position, SignatureHelp, SignatureHelpContext, SymbolInformation, TextDocumentContentChangeEvent, WorkspaceEdit } from 'vscode-languageserver';
+import { CancellationToken, CompletionContext, DefinitionLink, Diagnostic, Hover, Position, Range, SemanticTokens, SignatureHelp, SignatureHelpContext, SymbolInformation, TextDocumentContentChangeEvent, WorkspaceEdit } from 'vscode-languageserver';
 import { ConfigManager } from '../../core/config';
 import { AstroDocument, DocumentManager } from '../../core/documents';
 import { AppCompletionItem, AppCompletionList, OnWatchFileChangesParam, Plugin } from '../interfaces';
@@ -12,9 +12,11 @@ export declare class TypeScriptPlugin implements Plugin {
     private readonly signatureHelpProvider;
     private readonly diagnosticsProvider;
     private readonly documentSymbolsProvider;
+    private readonly semanticTokensProvider;
     constructor(docManager: DocumentManager, configManager: ConfigManager, workspaceUris: string[]);
     doHover(document: AstroDocument, position: Position): Promise<Hover | null>;
     rename(document: AstroDocument, position: Position, newName: string): Promise<WorkspaceEdit | null>;
+    getSemanticTokens(textDocument: AstroDocument, range?: Range, cancellationToken?: CancellationToken): Promise<SemanticTokens | null>;
     getDocumentSymbols(document: AstroDocument): Promise<SymbolInformation[]>;
     getCompletions(document: AstroDocument, position: Position, completionContext?: CompletionContext): Promise<AppCompletionList<CompletionEntryWithIdentifer> | null>;
     resolveCompletion(document: AstroDocument, completionItem: AppCompletionItem<CompletionEntryWithIdentifer>): Promise<AppCompletionItem<CompletionEntryWithIdentifer>>;

package/dist/plugins/typescript/TypeScriptPlugin.js

@@ -36,6 +36,7 @@ const utils_2 = require("./features/utils");
 const LanguageServiceManager_1 = require("./LanguageServiceManager");
 const utils_3 = require("./utils");
 const DocumentSymbolsProvider_1 = require("./features/DocumentSymbolsProvider");
+const SemanticTokenProvider_1 = require("./features/SemanticTokenProvider");
 class TypeScriptPlugin {
     constructor(docManager, configManager, workspaceUris) {
         this.__name = 'typescript';
@@ -46,6 +47,7 @@ class TypeScriptPlugin {
         this.signatureHelpProvider = new SignatureHelpProvider_1.SignatureHelpProviderImpl(this.languageServiceManager);
         this.diagnosticsProvider = new DiagnosticsProvider_1.DiagnosticsProviderImpl(this.languageServiceManager);
         this.documentSymbolsProvider = new DocumentSymbolsProvider_1.DocumentSymbolsProviderImpl(this.languageServiceManager);
+        this.semanticTokensProvider = new SemanticTokenProvider_1.SemanticTokensProviderImpl(this.languageServiceManager);
     }
     async doHover(document, position) {
         if (!this.featureEnabled('hover')) {
@@ -76,6 +78,9 @@ class TypeScriptPlugin {
         });
         return edit;
     }
+    async getSemanticTokens(textDocument, range, cancellationToken) {
+        return this.semanticTokensProvider.getSemanticTokens(textDocument, range, cancellationToken);
+    }
     async getDocumentSymbols(document) {
         if (!this.featureEnabled('documentSymbols')) {
             return [];

package/dist/plugins/typescript/features/SemanticTokenProvider.d.ts

@@ -0,0 +1,15 @@
+import { CancellationToken, Range, SemanticTokens } from 'vscode-languageserver';
+import { AstroDocument } from '../../../core/documents';
+import { SemanticTokensProvider } from '../../interfaces';
+import { LanguageServiceManager } from '../LanguageServiceManager';
+export declare class SemanticTokensProviderImpl implements SemanticTokensProvider {
+    private languageServiceManager;
+    constructor(languageServiceManager: LanguageServiceManager);
+    getSemanticTokens(document: AstroDocument, range?: Range, cancellationToken?: CancellationToken): Promise<SemanticTokens | null>;
+    private mapToOrigin;
+    /**
+     *  TSClassification = (TokenType + 1) << TokenEncodingConsts.typeOffset + TokenModifier
+     */
+    private getTokenTypeFromClassification;
+    private getTokenModifierFromClassification;
+}

package/dist/plugins/typescript/features/SemanticTokenProvider.js

@@ -0,0 +1,78 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SemanticTokensProviderImpl = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const vscode_languageserver_1 = require("vscode-languageserver");
+const documents_1 = require("../../../core/documents");
+const utils_1 = require("../utils");
+class SemanticTokensProviderImpl {
+    constructor(languageServiceManager) {
+        this.languageServiceManager = languageServiceManager;
+    }
+    async getSemanticTokens(document, range, cancellationToken) {
+        const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
+        const fragment = (await tsDoc.createFragment());
+        if (cancellationToken === null || cancellationToken === void 0 ? void 0 : cancellationToken.isCancellationRequested) {
+            return null;
+        }
+        const filePath = (0, utils_1.toVirtualAstroFilePath)(tsDoc.filePath);
+        const start = range ? fragment.offsetAt(fragment.getGeneratedPosition(range.start)) : 0;
+        const { spans } = lang.getEncodedSemanticClassifications(filePath, {
+            start,
+            length: range ? fragment.offsetAt(fragment.getGeneratedPosition(range.end)) - start : fragment.text.length,
+        }, typescript_1.default.SemanticClassificationFormat.TwentyTwenty);
+        const tokens = [];
+        let i = 0;
+        while (i < spans.length) {
+            const offset = spans[i++];
+            const generatedLength = spans[i++];
+            const classification = spans[i++];
+            const originalPosition = this.mapToOrigin(document, fragment, offset, generatedLength);
+            if (!originalPosition) {
+                continue;
+            }
+            const [line, character, length] = originalPosition;
+            const classificationType = this.getTokenTypeFromClassification(classification);
+            if (classificationType < 0) {
+                continue;
+            }
+            const modifier = this.getTokenModifierFromClassification(classification);
+            tokens.push([line, character, length, classificationType, modifier]);
+        }
+        const sorted = tokens.sort((a, b) => {
+            const [lineA, charA] = a;
+            const [lineB, charB] = b;
+            return lineA - lineB || charA - charB;
+        });
+        const builder = new vscode_languageserver_1.SemanticTokensBuilder();
+        sorted.forEach((tokenData) => builder.push(...tokenData));
+        const build = builder.build();
+        return build;
+    }
+    mapToOrigin(document, fragment, generatedOffset, generatedLength) {
+        const range = {
+            start: fragment.positionAt(generatedOffset),
+            end: fragment.positionAt(generatedOffset + generatedLength),
+        };
+        const { start: startPosition, end: endPosition } = (0, documents_1.mapRangeToOriginal)(fragment, range);
+        if (startPosition.line < 0 || endPosition.line < 0) {
+            return;
+        }
+        const startOffset = document.offsetAt(startPosition);
+        const endOffset = document.offsetAt(endPosition);
+        return [startPosition.line, startPosition.character, endOffset - startOffset, startOffset];
+    }
+    /**
+     *  TSClassification = (TokenType + 1) << TokenEncodingConsts.typeOffset + TokenModifier
+     */
+    getTokenTypeFromClassification(tsClassification) {
+        return (tsClassification >> 8 /* typeOffset */) - 1;
+    }
+    getTokenModifierFromClassification(tsClassification) {
+        return tsClassification & 255 /* modifierMask */;
+    }
+}
+exports.SemanticTokensProviderImpl = SemanticTokensProviderImpl;

package/dist/plugins/typescript/utils.d.ts

@@ -1,6 +1,29 @@
 import ts from 'typescript';
-import { CompletionItemKind, DiagnosticSeverity, Position, Range, SymbolKind } from 'vscode-languageserver';
+import { CompletionItemKind, DiagnosticSeverity, Position, Range, SymbolKind, SemanticTokensLegend } from 'vscode-languageserver';
 import { SnapshotFragment } from './snapshots/DocumentSnapshot';
+export declare const enum TokenType {
+    class = 0,
+    enum = 1,
+    interface = 2,
+    namespace = 3,
+    typeParameter = 4,
+    type = 5,
+    parameter = 6,
+    variable = 7,
+    enumMember = 8,
+    property = 9,
+    function = 10,
+    method = 11
+}
+export declare const enum TokenModifier {
+    declaration = 0,
+    static = 1,
+    async = 2,
+    readonly = 3,
+    defaultLibrary = 4,
+    local = 5
+}
+export declare function getSemanticTokenLegend(): SemanticTokensLegend;
 export declare function symbolKindFromString(kind: string): SymbolKind;
 export declare function scriptElementKindToCompletionItemKind(kind: ts.ScriptElementKind): CompletionItemKind;
 export declare function getCommitCharactersForScriptElement(kind: ts.ScriptElementKind): string[] | undefined;

package/dist/plugins/typescript/utils.js

@@ -3,12 +3,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ensureRealFilePath = exports.ensureRealAstroFilePath = exports.toRealAstroFilePath = exports.toVirtualFilePath = exports.toVirtualAstroFilePath = exports.isVirtualFilePath = exports.isVirtualSvelteFilePath = exports.isVirtualVueFilePath = exports.isVirtualAstroFilePath = exports.isFrameworkFilePath = exports.isAstroFilePath = exports.isVirtualFrameworkFilePath = exports.getFrameworkFromFilePath = exports.convertToLocationRange = exports.convertRange = exports.mapSeverity = exports.getScriptKindFromFileName = exports.isSubPath = exports.findTsConfigPath = exports.getExtensionFromScriptKind = exports.getCommitCharactersForScriptElement = exports.scriptElementKindToCompletionItemKind = exports.symbolKindFromString = void 0;
+exports.ensureRealFilePath = exports.ensureRealAstroFilePath = exports.toRealAstroFilePath = exports.toVirtualFilePath = exports.toVirtualAstroFilePath = exports.isVirtualFilePath = exports.isVirtualSvelteFilePath = exports.isVirtualVueFilePath = exports.isVirtualAstroFilePath = exports.isFrameworkFilePath = exports.isAstroFilePath = exports.isVirtualFrameworkFilePath = exports.getFrameworkFromFilePath = exports.convertToLocationRange = exports.convertRange = exports.mapSeverity = exports.getScriptKindFromFileName = exports.isSubPath = exports.findTsConfigPath = exports.getExtensionFromScriptKind = exports.getCommitCharactersForScriptElement = exports.scriptElementKindToCompletionItemKind = exports.symbolKindFromString = exports.getSemanticTokenLegend = void 0;
 const typescript_1 = __importDefault(require("typescript"));
 const path_1 = require("path");
 const utils_1 = require("../../utils");
 const vscode_languageserver_1 = require("vscode-languageserver");
 const documents_1 = require("../../core/documents");
+function getSemanticTokenLegend() {
+    const tokenModifiers = [];
+    [
+        [0 /* declaration */, vscode_languageserver_1.SemanticTokenModifiers.declaration],
+        [1 /* static */, vscode_languageserver_1.SemanticTokenModifiers.static],
+        [2 /* async */, vscode_languageserver_1.SemanticTokenModifiers.async],
+        [3 /* readonly */, vscode_languageserver_1.SemanticTokenModifiers.readonly],
+        [4 /* defaultLibrary */, vscode_languageserver_1.SemanticTokenModifiers.defaultLibrary],
+        [5 /* local */, 'local'],
+    ].forEach(([tsModifier, legend]) => (tokenModifiers[tsModifier] = legend));
+    const tokenTypes = [];
+    [
+        [0 /* class */, vscode_languageserver_1.SemanticTokenTypes.class],
+        [1 /* enum */, vscode_languageserver_1.SemanticTokenTypes.enum],
+        [2 /* interface */, vscode_languageserver_1.SemanticTokenTypes.interface],
+        [3 /* namespace */, vscode_languageserver_1.SemanticTokenTypes.namespace],
+        [4 /* typeParameter */, vscode_languageserver_1.SemanticTokenTypes.typeParameter],
+        [5 /* type */, vscode_languageserver_1.SemanticTokenTypes.type],
+        [6 /* parameter */, vscode_languageserver_1.SemanticTokenTypes.parameter],
+        [7 /* variable */, vscode_languageserver_1.SemanticTokenTypes.variable],
+        [8 /* enumMember */, vscode_languageserver_1.SemanticTokenTypes.enumMember],
+        [9 /* property */, vscode_languageserver_1.SemanticTokenTypes.property],
+        [10 /* function */, vscode_languageserver_1.SemanticTokenTypes.function],
+        [11 /* method */, vscode_languageserver_1.SemanticTokenTypes.method],
+    ].forEach(([tokenType, legend]) => (tokenTypes[tokenType] = legend));
+    return {
+        tokenModifiers,
+        tokenTypes,
+    };
+}
+exports.getSemanticTokenLegend = getSemanticTokenLegend;
 function symbolKindFromString(kind) {
     switch (kind) {
         case 'module':

package/dist/server.js

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.startLanguageServer = void 0;
 const vscode = __importStar(require("vscode-languageserver"));
+const vscode_languageserver_1 = require("vscode-languageserver");
 const ConfigManager_1 = require("./core/config/ConfigManager");
 const DocumentManager_1 = require("./core/documents/DocumentManager");
 const DiagnosticsManager_1 = require("./core/DiagnosticsManager");
@@ -32,8 +33,9 @@ const AstroPlugin_1 = require("./plugins/astro/AstroPlugin");
 const CSSPlugin_1 = require("./plugins/css/CSSPlugin");
 const HTMLPlugin_1 = require("./plugins/html/HTMLPlugin");
 const PluginHost_1 = require("./plugins/PluginHost");
-const TypeScriptPlugin_1 = require("./plugins/typescript/TypeScriptPlugin");
+const plugins_1 = require("./plugins");
 const utils_1 = require("./utils");
+const utils_2 = require("./plugins/typescript/utils");
 const TagCloseRequest = new vscode.RequestType('html/tag');
 // Start the language server
 function startLanguageServer(connection) {
@@ -54,7 +56,7 @@ function startLanguageServer(connection) {
         // We don't currently support running the TypeScript and Astro plugin in the browser
         if (params.initializationOptions.environment !== 'browser') {
             pluginHost.registerPlugin(new AstroPlugin_1.AstroPlugin(documentManager, configManager, workspaceUris));
-            pluginHost.registerPlugin(new TypeScriptPlugin_1.TypeScriptPlugin(documentManager, configManager, workspaceUris));
+            pluginHost.registerPlugin(new plugins_1.TypeScriptPlugin(documentManager, configManager, workspaceUris));
         }
         // Update language-server config with what the user supplied to us at launch
         configManager.updateConfig(params.initializationOptions.configuration.astro);
@@ -97,6 +99,11 @@ function startLanguageServer(connection) {
                 colorProvider: true,
                 hoverProvider: true,
                 documentSymbolProvider: true,
+                semanticTokensProvider: {
+                    legend: (0, utils_2.getSemanticTokenLegend)(),
+                    range: true,
+                    full: true,
+                },
                 signatureHelpProvider: {
                     triggerCharacters: ['(', ',', '<'],
                     retriggerCharacters: [')'],
@@ -146,6 +153,8 @@ function startLanguageServer(connection) {
         return pluginHost.resolveCompletion(data, completionItem);
     });
     connection.onDocumentSymbol((params, cancellationToken) => pluginHost.getDocumentSymbols(params.textDocument, cancellationToken));
+    connection.onRequest(vscode_languageserver_1.SemanticTokensRequest.type, (evt, cancellationToken) => pluginHost.getSemanticTokens(evt.textDocument, undefined, cancellationToken));
+    connection.onRequest(vscode_languageserver_1.SemanticTokensRangeRequest.type, (evt, cancellationToken) => pluginHost.getSemanticTokens(evt.textDocument, evt.range, cancellationToken));
     connection.onDocumentColor((params) => pluginHost.getDocumentColors(params.textDocument));
     connection.onColorPresentation((params) => pluginHost.getColorPresentations(params.textDocument, params.range, params.color));
     connection.onRequest(TagCloseRequest, (evt) => pluginHost.doTagComplete(evt.textDocument, evt.position));

package/dist/utils.d.ts

@@ -21,11 +21,6 @@ export declare function getLastPartOfPath(path: string): string;
  * This is not a 100% sure test as it'll return false for any component that does not match the standard format for a component
  */
 export declare function isPossibleComponent(node: Node): boolean;
-/**
- * Return true if a specific node could be a component with a client directive on it.
- * This is not a 100% sure test as it'll return false for any component that does not match the standard format for a component
- */
-export declare function isPossibleClientComponent(node: Node): boolean;
 /** Flattens an array */
 export declare function flatten<T>(arr: T[][]): T[];
 /** Clamps a number between min and max */

package/dist/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.debounceThrottle = exports.debounceSameArg = exports.isBeforeOrEqualToPosition = exports.isInRange = exports.isNotNullOrUndefined = exports.clamp = exports.flatten = exports.isPossibleClientComponent = exports.isPossibleComponent = exports.getLastPartOfPath = exports.pathToUrl = exports.urlToPath = exports.normalizePath = exports.normalizeUri = void 0;
+exports.debounceThrottle = exports.debounceSameArg = exports.isBeforeOrEqualToPosition = exports.isInRange = exports.isNotNullOrUndefined = exports.clamp = exports.flatten = exports.isPossibleComponent = exports.getLastPartOfPath = exports.pathToUrl = exports.urlToPath = exports.normalizePath = exports.normalizeUri = void 0;
 const vscode_uri_1 = require("vscode-uri");
 /** Normalizes a document URI */
 function normalizeUri(uri) {
@@ -46,21 +46,6 @@ function isPossibleComponent(node) {
     return !!((_a = node.tag) === null || _a === void 0 ? void 0 : _a[0].match(/[A-Z]/)) || !!((_b = node.tag) === null || _b === void 0 ? void 0 : _b.match(/.+[.][A-Z]/));
 }
 exports.isPossibleComponent = isPossibleComponent;
-/**
- * Return true if a specific node could be a component with a client directive on it.
- * This is not a 100% sure test as it'll return false for any component that does not match the standard format for a component
- */
-function isPossibleClientComponent(node) {
-    if (isPossibleComponent(node) && node.attributes) {
-        for (let [name] of Object.entries(node.attributes)) {
-            if (name.startsWith('client:')) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-exports.isPossibleClientComponent = isPossibleClientComponent;
 /** Flattens an array */
 function flatten(arr) {
     return arr.reduce((all, item) => [...all, ...item], []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/language-server",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "author": "withastro",
   "license": "MIT",
   "type": "commonjs",