@astrojs/language-server 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @astrojs/language-server
 
+## 0.19.0
+
+### Minor Changes
+
+- a97b9a4: Add support for Inlay Hints. Minimum VS Code version supported starting from this update is 1.67.0 (April 2022)
+
+## 0.18.1
+
+### Patch Changes
+
+- 666739a: Revert update to latest LSP and inlay hints support
+
+## 0.18.0
+
+### Minor Changes
+
+- d3c6fd8: Add support for formatting
+- 09e1163: Updated language server to latest version of LSP, added support for Inlay Hints
+- fcaba8e: Add support for completions and type checking for Vue props
+
+### Patch Changes
+
+- 4138005: Fix frontmatter folding not working properly when last few lines of frontmatter are empty
+- 76ff46a: Add `?` in the label of completions of optional parameters (including component props)
+
 ## 0.17.0
 
 ### Minor Changes

package/dist/core/config/ConfigManager.d.ts

@@ -1,8 +1,8 @@
 import { VSCodeEmmetConfig } from '@vscode/emmet-helper';
-import { LSConfig, LSCSSConfig, LSHTMLConfig, LSTypescriptConfig } from './interfaces';
-import { Connection } from 'vscode-languageserver';
+import { LSConfig, LSCSSConfig, LSFormatConfig, LSHTMLConfig, LSTypescriptConfig } from './interfaces';
+import { Connection, FormattingOptions } from 'vscode-languageserver';
 import { TextDocument } from 'vscode-languageserver-textdocument';
-import { FormatCodeSettings, UserPreferences } from 'typescript';
+import { FormatCodeSettings, InlayHintsOptions, UserPreferences } from 'typescript';
 export declare const defaultLSConfig: LSConfig;
 declare type DeepPartial<T> = T extends Record<string, unknown> ? {
     [P in keyof T]?: DeepPartial<T[P]>;
@@ -22,16 +22,21 @@ export declare class ConfigManager {
     removeDocument(scopeUri: string): void;
     getConfig<T>(section: string, scopeUri: string): Promise<T>;
     getEmmetConfig(document: TextDocument): Promise<VSCodeEmmetConfig>;
-    getTSFormatConfig(document: TextDocument): Promise<FormatCodeSettings>;
+    getAstroFormatConfig(document: TextDocument): Promise<LSFormatConfig>;
+    getTSFormatConfig(document: TextDocument, vscodeOptions?: FormattingOptions): Promise<FormatCodeSettings>;
     getTSPreferences(document: TextDocument): Promise<UserPreferences>;
+    getTSInlayHintsPreferences(document: TextDocument): Promise<InlayHintsOptions>;
     /**
      * Return true if a plugin and an optional feature is enabled
      */
     isEnabled(document: TextDocument, plugin: keyof LSConfig, feature?: keyof LSTypescriptConfig | keyof LSCSSConfig | keyof LSHTMLConfig): Promise<boolean>;
     /**
      * Updating the global config should only be done in cases where the client doesn't support `workspace/configuration`
-     * or inside of tests
+     * or inside of tests.
+     *
+     * The `outsideAstro` parameter can be set to true to change configurations in the global scope.
+     * For example, to change TypeScript settings
      */
-    updateGlobalConfig(config: DeepPartial<LSConfig>): void;
+    updateGlobalConfig(config: DeepPartial<LSConfig> | any, outsideAstro?: boolean): void;
 }
 export {};

package/dist/core/config/ConfigManager.js

@@ -30,6 +30,10 @@ exports.defaultLSConfig = {
         tagComplete: { enabled: true },
         documentSymbols: { enabled: true },
     },
+    format: {
+        indentFrontmatter: true,
+        newLineAfterFrontmatter: true,
+    },
 };
 /**
  * Manager class to facilitate accessing and updating the user's config
@@ -69,9 +73,19 @@ class ConfigManager {
         const emmetConfig = (await this.getConfig('emmet', document.uri)) ?? {};
         return emmetConfig;
     }
-    async getTSFormatConfig(document) {
+    async getAstroFormatConfig(document) {
+        const astroFormatConfig = (await this.getConfig('astro.format', document.uri)) ?? {};
+        return {
+            indentFrontmatter: astroFormatConfig.indentFrontmatter ?? true,
+            newLineAfterFrontmatter: astroFormatConfig.newLineAfterFrontmatter ?? true,
+        };
+    }
+    async getTSFormatConfig(document, vscodeOptions) {
         const formatConfig = (await this.getConfig('typescript.format', document.uri)) ?? {};
         return {
+            tabSize: vscodeOptions?.tabSize,
+            indentSize: vscodeOptions?.tabSize,
+            convertTabsToSpaces: vscodeOptions?.insertSpaces,
             // We can use \n here since the editor normalizes later on to its line endings.
             newLineCharacter: '\n',
             insertSpaceAfterCommaDelimiter: formatConfig.insertSpaceAfterCommaDelimiter ?? true,
@@ -110,6 +124,20 @@ class ConfigManager {
             includeCompletionsWithInsertText: true,
         };
     }
+    async getTSInlayHintsPreferences(document) {
+        const config = (await this.getConfig('typescript', document.uri)) ?? {};
+        const tsPreferences = this.getTSPreferences(document);
+        return {
+            ...tsPreferences,
+            includeInlayParameterNameHints: getInlayParameterNameHintsPreference(config),
+            includeInlayParameterNameHintsWhenArgumentMatchesName: !(config.inlayHints?.parameterNames?.suppressWhenArgumentMatchesName ?? true),
+            includeInlayFunctionParameterTypeHints: config.inlayHints?.parameterTypes?.enabled ?? false,
+            includeInlayVariableTypeHints: config.inlayHints?.variableTypes?.enabled ?? false,
+            includeInlayPropertyDeclarationTypeHints: config.inlayHints?.propertyDeclarationTypes?.enabled ?? false,
+            includeInlayFunctionLikeReturnTypeHints: config.inlayHints?.functionLikeReturnTypes?.enabled ?? false,
+            includeInlayEnumMemberValueHints: config.inlayHints?.enumMemberValues?.enabled ?? false,
+        };
+    }
     /**
      * Return true if a plugin and an optional feature is enabled
      */
@@ -119,10 +147,18 @@ class ConfigManager {
     }
     /**
      * Updating the global config should only be done in cases where the client doesn't support `workspace/configuration`
-     * or inside of tests
+     * or inside of tests.
+     *
+     * The `outsideAstro` parameter can be set to true to change configurations in the global scope.
+     * For example, to change TypeScript settings
      */
-    updateGlobalConfig(config) {
-        this.globalConfig.astro = (0, lodash_1.merge)({}, exports.defaultLSConfig, this.globalConfig.astro, config);
+    updateGlobalConfig(config, outsideAstro) {
+        if (outsideAstro) {
+            this.globalConfig = (0, lodash_1.merge)({}, this.globalConfig, config);
+        }
+        else {
+            this.globalConfig.astro = (0, lodash_1.merge)({}, exports.defaultLSConfig, this.globalConfig.astro, config);
+        }
     }
 }
 exports.ConfigManager = ConfigManager;
@@ -160,3 +196,15 @@ function getImportModuleSpecifierEndingPreference(config) {
             return 'auto';
     }
 }
+function getInlayParameterNameHintsPreference(config) {
+    switch (config.inlayHints?.parameterNames?.enabled) {
+        case 'none':
+            return 'none';
+        case 'literals':
+            return 'literals';
+        case 'all':
+            return 'all';
+        default:
+            return undefined;
+    }
+}

package/dist/core/config/interfaces.d.ts

@@ -6,6 +6,11 @@ export interface LSConfig {
     typescript: LSTypescriptConfig;
     html: LSHTMLConfig;
     css: LSCSSConfig;
+    format: LSFormatConfig;
+}
+export interface LSFormatConfig {
+    indentFrontmatter: boolean;
+    newLineAfterFrontmatter: boolean;
 }
 export interface LSTypescriptConfig {
     enabled: boolean;

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, SemanticTokens, CodeActionContext, CodeAction } 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, CodeActionContext, CodeAction, InlayHint, FormattingOptions, TextEdit } from 'vscode-languageserver';
 import type { AppCompletionItem, Plugin } from './interfaces';
 import { DocumentManager } from '../core/documents/DocumentManager';
 interface PluginHostConfig {
@@ -16,6 +16,7 @@ export declare class PluginHost {
     resolveCompletion(textDocument: TextDocumentIdentifier, completionItem: AppCompletionItem): Promise<CompletionItem>;
     getDiagnostics(textDocument: TextDocumentIdentifier): Promise<Diagnostic[]>;
     doHover(textDocument: TextDocumentIdentifier, position: Position): Promise<Hover | null>;
+    formatDocument(textDocument: TextDocumentIdentifier, options: FormattingOptions): Promise<TextEdit[]>;
     getCodeActions(textDocument: TextDocumentIdentifier, range: Range, context: CodeActionContext, cancellationToken: CancellationToken): Promise<CodeAction[]>;
     doTagComplete(textDocument: TextDocumentIdentifier, position: Position): Promise<string | null>;
     getFoldingRanges(textDocument: TextDocumentIdentifier): Promise<FoldingRange[] | null>;
@@ -24,6 +25,7 @@ export declare class PluginHost {
     getDefinitions(textDocument: TextDocumentIdentifier, position: Position): Promise<DefinitionLink[] | Location[]>;
     rename(textDocument: TextDocumentIdentifier, position: Position, newName: string): Promise<WorkspaceEdit | null>;
     getDocumentColors(textDocument: TextDocumentIdentifier): Promise<ColorInformation[]>;
+    getInlayHints(textDocument: TextDocumentIdentifier, range: Range, cancellationToken: CancellationToken): Promise<InlayHint[]>;
     getColorPresentations(textDocument: TextDocumentIdentifier, range: Range, color: Color): Promise<ColorPresentation[]>;
     getSignatureHelp(textDocument: TextDocumentIdentifier, position: Position, context: SignatureHelpContext | undefined, cancellationToken: CancellationToken): Promise<SignatureHelp | null>;
     onWatchFileChanges(onWatchFileChangesParams: any[]): void;

package/dist/plugins/PluginHost.js

@@ -69,6 +69,10 @@ class PluginHost {
         const document = this.getDocument(textDocument.uri);
         return this.execute('doHover', [document, position], ExecuteMode.FirstNonNull);
     }
+    async formatDocument(textDocument, options) {
+        const document = this.getDocument(textDocument.uri);
+        return (0, lodash_1.flatten)(await this.execute('formatDocument', [document, options], ExecuteMode.Collect));
+    }
     async getCodeActions(textDocument, range, context, cancellationToken) {
         const document = this.getDocument(textDocument.uri);
         return (0, lodash_1.flatten)(await this.execute('getCodeActions', [document, range, context, cancellationToken], ExecuteMode.Collect));
@@ -108,6 +112,10 @@ class PluginHost {
         const document = this.getDocument(textDocument.uri);
         return (0, lodash_1.flatten)(await this.execute('getDocumentColors', [document], ExecuteMode.Collect));
     }
+    async getInlayHints(textDocument, range, cancellationToken) {
+        const document = this.getDocument(textDocument.uri);
+        return (0, lodash_1.flatten)(await this.execute('getInlayHints', [document, range], ExecuteMode.FirstNonNull));
+    }
     async getColorPresentations(textDocument, range, color) {
         const document = this.getDocument(textDocument.uri);
         return (0, lodash_1.flatten)(await this.execute('getColorPresentations', [document, range, color], ExecuteMode.Collect));

package/dist/plugins/astro/AstroPlugin.js

@@ -21,8 +21,15 @@ class AstroPlugin {
         // Currently editing frontmatter, don't fold
         if (frontmatter.state !== 'closed')
             return foldingRanges;
-        const start = document.positionAt(frontmatter.startOffset);
-        const end = document.positionAt(frontmatter.endOffset - 3);
+        // The way folding ranges work is by folding anything between the starting position and the ending one, as such
+        // the start in this case should be after the frontmatter start (after the starting ---) until the last character
+        // of the last line of the frontmatter before its ending (before the closing ---)
+        // ---
+        //		^ -- start
+        // console.log("Astro")
+        // ---								^ -- end
+        const start = document.positionAt(frontmatter.startOffset + 3);
+        const end = document.positionAt(frontmatter.endOffset - 1);
         return [
             {
                 startLine: start.line,

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

@@ -140,10 +140,6 @@ class CompletionsProviderImpl {
             let completionItem = this.getCompletionItemForProperty(property, typeChecker, type);
             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: '_' };
-        });
         this.lastCompletion = {
             tag: componentName,
             documentVersion: componentSnapshot.version,
@@ -215,7 +211,15 @@ class CompletionsProviderImpl {
             insertText: insertText,
             insertTextFormat: vscode_languageserver_1.InsertTextFormat.Snippet,
             commitCharacters: [],
+            // Ensure that props shows up first as a completion, despite this plugin being ran after the HTML one
+            sortText: '\0',
         };
+        if (mem.flags & typescript_1.default.SymbolFlags.Optional) {
+            item.filterText = item.label;
+            item.label += '?';
+            // Put optional props at a lower priority
+            item.sortText = '_';
+        }
         mem.getDocumentationComment(typeChecker);
         let description = mem
             .getDocumentationComment(typeChecker)

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

@@ -1,4 +1,4 @@
-import { CompletionList, Position, FoldingRange, Hover, SymbolInformation } from 'vscode-languageserver';
+import { CompletionList, Position, TextEdit, FoldingRange, Hover, SymbolInformation, FormattingOptions } from 'vscode-languageserver';
 import type { Plugin } from '../interfaces';
 import { ConfigManager } from '../../core/config/ConfigManager';
 import { AstroDocument } from '../../core/documents/AstroDocument';
@@ -15,6 +15,7 @@ export declare class HTMLPlugin implements Plugin {
      * Get HTML completions
      */
     getCompletions(document: AstroDocument, position: Position): Promise<CompletionList | null>;
+    formatDocument(document: AstroDocument, options: FormattingOptions): Promise<TextEdit[]>;
     getFoldingRanges(document: AstroDocument): FoldingRange[] | null;
     doTagComplete(document: AstroDocument, position: Position): Promise<string | null>;
     getDocumentSymbols(document: AstroDocument): Promise<SymbolInformation[]>;

package/dist/plugins/html/HTMLPlugin.js

@@ -80,6 +80,24 @@ class HTMLPlugin {
         // Emmet completions change on every keystroke, so they are never complete
         emmetResults.items.length > 0);
     }
+    async formatDocument(document, options) {
+        const start = document.positionAt(document.astroMeta.frontmatter.state === 'closed' ? document.astroMeta.frontmatter.endOffset + 3 : 0);
+        if (document.astroMeta.frontmatter.state === 'closed') {
+            start.line += 1;
+            start.character = 0;
+        }
+        const end = document.positionAt(document.getTextLength());
+        const htmlFormatConfig = (await this.configManager.getConfig('html.format', document.uri)) ?? {};
+        // The HTML plugin can't format script tags properly, we'll handle those inside the TypeScript plugin
+        if (htmlFormatConfig.contentUnformatted) {
+            htmlFormatConfig.contentUnformatted = htmlFormatConfig.contentUnformatted + ',script';
+        }
+        else {
+            htmlFormatConfig.contentUnformatted = 'script';
+        }
+        const edits = this.lang.format(document, vscode_languageserver_1.Range.create(start, end), { ...htmlFormatConfig, ...options });
+        return edits;
+    }
     getFoldingRanges(document) {
         const html = document.html;
         if (!html) {

package/dist/plugins/interfaces.d.ts

@@ -1,4 +1,4 @@
-import { CodeAction, CodeActionContext, Color, ColorInformation, ColorPresentation, CompletionContext, CompletionItem, CompletionList, DefinitionLink, Diagnostic, FileChangeType, FoldingRange, FormattingOptions, Hover, LinkedEditingRanges, Position, Range, ReferenceContext, SelectionRange, SemanticTokens, SignatureHelp, SignatureHelpContext, SymbolInformation, TextDocumentContentChangeEvent, TextDocumentIdentifier, TextEdit, WorkspaceEdit } from 'vscode-languageserver';
+import { CodeAction, CodeActionContext, Color, ColorInformation, ColorPresentation, CompletionContext, CompletionItem, CompletionList, DefinitionLink, Diagnostic, FileChangeType, FoldingRange, FormattingOptions, Hover, InlayHint, LinkedEditingRanges, Position, Range, ReferenceContext, SelectionRange, SemanticTokens, SignatureHelp, SignatureHelpContext, SymbolInformation, TextDocumentContentChangeEvent, TextDocumentIdentifier, TextEdit, WorkspaceEdit } from 'vscode-languageserver';
 import { TextDocument } from 'vscode-languageserver-textdocument';
 export declare type Resolvable<T> = T | Promise<T>;
 export interface AppCompletionItem<T extends TextDocumentIdentifier = any> extends CompletionItem {
@@ -52,6 +52,9 @@ export interface FileRename {
 export interface UpdateImportsProvider {
     updateImports(fileRename: FileRename): Resolvable<WorkspaceEdit | null>;
 }
+export interface InlayHintsProvider {
+    getInlayHints(document: TextDocument, range: Range): Resolvable<InlayHint[]>;
+}
 export interface RenameProvider {
     rename(document: TextDocument, position: Position, newName: string): Resolvable<WorkspaceEdit | null>;
     prepareRename(document: TextDocument, position: Position): Resolvable<Range | null>;
@@ -81,7 +84,7 @@ export interface OnWatchFileChangesProvider {
 export interface UpdateNonAstroFile {
     updateNonAstroFile(fileName: string, changes: TextDocumentContentChangeEvent[]): void;
 }
-declare type ProviderBase = DiagnosticsProvider & HoverProvider & CompletionsProvider & DefinitionsProvider & FormattingProvider & FoldingRangesProvider & TagCompleteProvider & DocumentColorsProvider & ColorPresentationsProvider & DocumentSymbolsProvider & UpdateImportsProvider & CodeActionsProvider & FindReferencesProvider & RenameProvider & SignatureHelpProvider & SemanticTokensProvider & SelectionRangeProvider & OnWatchFileChangesProvider & LinkedEditingRangesProvider & UpdateNonAstroFile;
+declare type ProviderBase = DiagnosticsProvider & HoverProvider & CompletionsProvider & DefinitionsProvider & FormattingProvider & FoldingRangesProvider & TagCompleteProvider & DocumentColorsProvider & ColorPresentationsProvider & DocumentSymbolsProvider & UpdateImportsProvider & CodeActionsProvider & FindReferencesProvider & RenameProvider & SignatureHelpProvider & SemanticTokensProvider & SelectionRangeProvider & OnWatchFileChangesProvider & LinkedEditingRangesProvider & InlayHintsProvider & UpdateNonAstroFile;
 export declare type LSProvider = ProviderBase;
 export declare type Plugin = Partial<ProviderBase> & {
     __name: string;

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

@@ -1,4 +1,4 @@
-import { CancellationToken, CodeAction, CodeActionContext, CompletionContext, DefinitionLink, Diagnostic, FoldingRange, Hover, Position, Range, SemanticTokens, SignatureHelp, SignatureHelpContext, SymbolInformation, TextDocumentContentChangeEvent, WorkspaceEdit } from 'vscode-languageserver';
+import { CancellationToken, CodeAction, CodeActionContext, CompletionContext, DefinitionLink, Diagnostic, FoldingRange, FormattingOptions, Hover, InlayHint, Position, Range, SemanticTokens, SignatureHelp, SignatureHelpContext, SymbolInformation, TextDocumentContentChangeEvent, TextEdit, WorkspaceEdit } from 'vscode-languageserver';
 import { ConfigManager } from '../../core/config';
 import { AstroDocument, DocumentManager } from '../../core/documents';
 import { AppCompletionItem, AppCompletionList, OnWatchFileChangesParam, Plugin } from '../interfaces';
@@ -14,17 +14,21 @@ export declare class TypeScriptPlugin implements Plugin {
     private readonly signatureHelpProvider;
     private readonly diagnosticsProvider;
     private readonly documentSymbolsProvider;
+    private readonly inlayHintsProvider;
     private readonly semanticTokensProvider;
     private readonly foldingRangesProvider;
+    private readonly formattingProvider;
     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>;
+    formatDocument(document: AstroDocument, options: FormattingOptions): Promise<TextEdit[]>;
     getFoldingRanges(document: AstroDocument): Promise<FoldingRange[] | null>;
     getSemanticTokens(document: AstroDocument, range?: Range, cancellationToken?: CancellationToken): Promise<SemanticTokens | null>;
     getDocumentSymbols(document: AstroDocument): Promise<SymbolInformation[]>;
     getCodeActions(document: AstroDocument, range: Range, context: CodeActionContext, cancellationToken?: CancellationToken): Promise<CodeAction[]>;
     getCompletions(document: AstroDocument, position: Position, completionContext?: CompletionContext, cancellationToken?: CancellationToken): Promise<AppCompletionList<CompletionItemData> | null>;
     resolveCompletion(document: AstroDocument, completionItem: AppCompletionItem<CompletionItemData>, cancellationToken?: CancellationToken): Promise<AppCompletionItem<CompletionItemData>>;
+    getInlayHints(document: AstroDocument, range: Range): Promise<InlayHint[]>;
     getDefinitions(document: AstroDocument, position: Position): Promise<DefinitionLink[]>;
     getDiagnostics(document: AstroDocument, cancellationToken?: CancellationToken): Promise<Diagnostic[]>;
     onWatchFileChanges(onWatchFileChangesParas: OnWatchFileChangesParam[]): Promise<void>;

package/dist/plugins/typescript/TypeScriptPlugin.js

@@ -17,6 +17,8 @@ const SemanticTokenProvider_1 = require("./features/SemanticTokenProvider");
 const FoldingRangesProvider_1 = require("./features/FoldingRangesProvider");
 const CodeActionsProvider_1 = require("./features/CodeActionsProvider");
 const DefinitionsProvider_1 = require("./features/DefinitionsProvider");
+const InlayHintsProvider_1 = require("./features/InlayHintsProvider");
+const FormattingProvider_1 = require("./features/FormattingProvider");
 class TypeScriptPlugin {
     constructor(docManager, configManager, workspaceUris) {
         this.__name = 'typescript';
@@ -30,7 +32,9 @@ class TypeScriptPlugin {
         this.diagnosticsProvider = new DiagnosticsProvider_1.DiagnosticsProviderImpl(this.languageServiceManager);
         this.documentSymbolsProvider = new DocumentSymbolsProvider_1.DocumentSymbolsProviderImpl(this.languageServiceManager);
         this.semanticTokensProvider = new SemanticTokenProvider_1.SemanticTokensProviderImpl(this.languageServiceManager);
+        this.inlayHintsProvider = new InlayHintsProvider_1.InlayHintsProviderImpl(this.languageServiceManager, this.configManager);
         this.foldingRangesProvider = new FoldingRangesProvider_1.FoldingRangesProviderImpl(this.languageServiceManager);
+        this.formattingProvider = new FormattingProvider_1.FormattingProviderImpl(this.languageServiceManager, this.configManager);
     }
     async doHover(document, position) {
         if (!(await this.featureEnabled(document, 'hover'))) {
@@ -61,6 +65,9 @@ class TypeScriptPlugin {
         });
         return edit;
     }
+    async formatDocument(document, options) {
+        return this.formattingProvider.formatDocument(document, options);
+    }
     async getFoldingRanges(document) {
         return this.foldingRangesProvider.getFoldingRanges(document);
     }
@@ -93,6 +100,9 @@ class TypeScriptPlugin {
     async resolveCompletion(document, completionItem, cancellationToken) {
         return this.completionProvider.resolveCompletion(document, completionItem, cancellationToken);
     }
+    async getInlayHints(document, range) {
+        return this.inlayHintsProvider.getInlayHints(document, range);
+    }
     async getDefinitions(document, position) {
         return this.definitionsProvider.getDefinitions(document, position);
     }

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

@@ -159,6 +159,10 @@ class CompletionsProviderImpl {
         );
         if (detail) {
             const { detail: itemDetail, documentation: itemDocumentation } = this.getCompletionDocument(detail);
+            // TODO: Add support for labelDetails
+            // if (data.originalItem.source) {
+            // 	item.labelDetails = { description: data.originalItem.source };
+            // }
             item.detail = itemDetail;
             item.documentation = itemDocumentation;
         }
@@ -209,14 +213,23 @@ class CompletionsProviderImpl {
         }
         if (comp.kindModifiers) {
             const kindModifiers = new Set(comp.kindModifiers.split(/,|\s+/g));
+            if (kindModifiers.has(typescript_1.ScriptElementKindModifier.optionalModifier)) {
+                if (!item.insertText) {
+                    item.insertText = item.label;
+                }
+                if (!item.filterText) {
+                    item.filterText = item.label;
+                }
+                item.label += '?';
+            }
             if (kindModifiers.has(typescript_1.ScriptElementKindModifier.deprecatedModifier)) {
                 item.tags = [vscode_languageserver_1.CompletionItemTag.Deprecated];
             }
         }
-        // Label details are currently unsupported, however, they'll be supported in the next version of LSP
-        if (comp.sourceDisplay) {
-            item.labelDetails = { description: typescript_1.default.displayPartsToString(comp.sourceDisplay) };
-        }
+        // TODO: Add support for labelDetails
+        // if (comp.sourceDisplay) {
+        // 	item.labelDetails = { description: ts.displayPartsToString(comp.sourceDisplay) };
+        // }
         item.commitCharacters = (0, utils_2.getCommitCharactersForScriptElement)(comp.kind);
         item.sortText = comp.sortText;
         item.preselect = comp.isRecommended;

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

@@ -0,0 +1,11 @@
+import { FormattingOptions, TextEdit } from 'vscode-languageserver-types';
+import { ConfigManager } from '../../../core/config';
+import { AstroDocument } from '../../../core/documents';
+import { FormattingProvider } from '../../interfaces';
+import { LanguageServiceManager } from '../LanguageServiceManager';
+export declare class FormattingProviderImpl implements FormattingProvider {
+    private languageServiceManager;
+    private configManager;
+    constructor(languageServiceManager: LanguageServiceManager, configManager: ConfigManager);
+    formatDocument(document: AstroDocument, options: FormattingOptions): Promise<TextEdit[]>;
+}

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

@@ -0,0 +1,132 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormattingProviderImpl = void 0;
+const typescript_1 = __importDefault(require("typescript"));
+const vscode_languageserver_types_1 = require("vscode-languageserver-types");
+const utils_1 = require("../utils");
+class FormattingProviderImpl {
+    constructor(languageServiceManager, configManager) {
+        this.languageServiceManager = languageServiceManager;
+        this.configManager = configManager;
+    }
+    async formatDocument(document, options) {
+        const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
+        const filePath = (0, utils_1.toVirtualAstroFilePath)(tsDoc.filePath);
+        const formatConfig = await this.configManager.getTSFormatConfig(document, options);
+        let frontmatterEdits = [];
+        let scriptTagsEdits = [];
+        if (document.astroMeta.frontmatter.state === 'closed') {
+            const start = document.positionAt(document.astroMeta.frontmatter.startOffset + 3);
+            start.line += 1;
+            start.character = 0;
+            const startOffset = document.offsetAt(start);
+            const endOffset = document.astroMeta.frontmatter.endOffset;
+            const astroFormatConfig = await this.configManager.getAstroFormatConfig(document);
+            const settings = {
+                ...formatConfig,
+                baseIndentSize: astroFormatConfig.indentFrontmatter ? formatConfig.tabSize ?? 0 : undefined,
+            };
+            frontmatterEdits = lang.getFormattingEditsForRange(filePath, startOffset, endOffset, settings);
+            if (astroFormatConfig.newLineAfterFrontmatter) {
+                const templateStart = document.positionAt(endOffset + 3);
+                templateStart.line += 1;
+                templateStart.character = 0;
+                frontmatterEdits.push({
+                    span: { start: document.offsetAt(templateStart), length: 0 },
+                    newText: '\n',
+                });
+            }
+        }
+        document.scriptTags.forEach((scriptTag) => {
+            const { filePath: scriptFilePath, snapshot: scriptTagSnapshot } = (0, utils_1.getScriptTagSnapshot)(tsDoc, document, scriptTag.container);
+            const startLine = document.offsetAt(vscode_languageserver_types_1.Position.create(scriptTag.startPos.line, 0));
+            const initialIndentLevel = computeInitialIndent(document, startLine, options);
+            const baseIndent = (formatConfig.tabSize ?? 0) * (initialIndentLevel + 1);
+            const formatSettings = {
+                baseIndentSize: baseIndent,
+                indentStyle: typescript_1.default.IndentStyle.Smart,
+                ...formatConfig,
+            };
+            let edits = lang.getFormattingEditsForDocument(scriptFilePath, formatSettings);
+            if (edits) {
+                edits = edits
+                    .map((edit) => {
+                    edit.span.start = document.offsetAt(scriptTagSnapshot.getOriginalPosition(scriptTagSnapshot.positionAt(edit.span.start)));
+                    return edit;
+                })
+                    .filter((edit) => {
+                    return (scriptTagSnapshot.isInGenerated(document.positionAt(edit.span.start)) &&
+                        scriptTag.end !== edit.span.start &&
+                        // Don't format the last line of the file as it's in most case the indentation
+                        scriptTag.endPos.line !== document.positionAt(edit.span.start).line);
+                });
+                const endLine = document.getLineUntilOffset(document.offsetAt(scriptTag.endPos));
+                if (isWhitespaceOnly(endLine)) {
+                    const endLineStartOffset = document.offsetAt(vscode_languageserver_types_1.Position.create(scriptTag.endPos.line, 0));
+                    const lastLineIndentRange = vscode_languageserver_types_1.Range.create(vscode_languageserver_types_1.Position.create(scriptTag.endPos.line, 0), scriptTag.endPos);
+                    const newText = generateIndent(initialIndentLevel, options);
+                    if (endLine !== newText) {
+                        edits.push({
+                            span: {
+                                start: endLineStartOffset,
+                                length: lastLineIndentRange.end.character,
+                            },
+                            newText,
+                        });
+                    }
+                }
+            }
+            scriptTagsEdits.push(...edits);
+        });
+        return [...frontmatterEdits, ...scriptTagsEdits].map((edit) => ({
+            range: (0, utils_1.convertRange)(document, edit.span),
+            newText: edit.newText,
+        }));
+    }
+}
+exports.FormattingProviderImpl = FormattingProviderImpl;
+function computeInitialIndent(document, lineStart, options) {
+    let content = document.getText();
+    let i = lineStart;
+    let nChars = 0;
+    let tabSize = options.tabSize || 4;
+    while (i < content.length) {
+        let ch = content.charAt(i);
+        if (ch === ' ') {
+            nChars++;
+        }
+        else if (ch === '\t') {
+            nChars += tabSize;
+        }
+        else {
+            break;
+        }
+        i++;
+    }
+    return Math.floor(nChars / tabSize);
+}
+function generateIndent(level, options) {
+    if (options.insertSpaces) {
+        return repeat(' ', level * options.tabSize);
+    }
+    else {
+        return repeat('\t', level);
+    }
+}
+function repeat(value, count) {
+    let s = '';
+    while (count > 0) {
+        if ((count & 1) === 1) {
+            s += value;
+        }
+        value += value;
+        count = count >>> 1;
+    }
+    return s;
+}
+function isWhitespaceOnly(str) {
+    return /^\s*$/.test(str);
+}

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

@@ -0,0 +1,12 @@
+import { InlayHint } from 'vscode-languageserver';
+import { AstroDocument } from '../../../core/documents';
+import { InlayHintsProvider } from '../../interfaces';
+import { LanguageServiceManager } from '../LanguageServiceManager';
+import { Range } from 'vscode-languageserver-types';
+import { ConfigManager } from '../../../core/config';
+export declare class InlayHintsProviderImpl implements InlayHintsProvider {
+    private languageServiceManager;
+    private configManager;
+    constructor(languageServiceManager: LanguageServiceManager, configManager: ConfigManager);
+    getInlayHints(document: AstroDocument, range: Range): Promise<InlayHint[]>;
+}

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

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlayHintsProviderImpl = void 0;
+const vscode_languageserver_1 = require("vscode-languageserver");
+const utils_1 = require("../utils");
+const vscode_languageserver_types_1 = require("vscode-languageserver-types");
+const typescript_1 = __importDefault(require("typescript"));
+class InlayHintsProviderImpl {
+    constructor(languageServiceManager, configManager) {
+        this.languageServiceManager = languageServiceManager;
+        this.configManager = configManager;
+    }
+    async getInlayHints(document, range) {
+        const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
+        const filePath = (0, utils_1.toVirtualAstroFilePath)(tsDoc.filePath);
+        const fragment = await tsDoc.createFragment();
+        const start = fragment.offsetAt(fragment.getGeneratedPosition(range.start));
+        const end = fragment.offsetAt(fragment.getGeneratedPosition(range.end));
+        const tsPreferences = await this.configManager.getTSInlayHintsPreferences(document);
+        const inlayHints = lang.provideInlayHints(filePath, { start, length: end - start }, tsPreferences);
+        return inlayHints.map((hint) => {
+            const result = vscode_languageserver_1.InlayHint.create(fragment.getOriginalPosition(fragment.positionAt(hint.position)), hint.text, hint.kind === typescript_1.default.InlayHintKind.Type
+                ? vscode_languageserver_types_1.InlayHintKind.Type
+                : hint.kind === typescript_1.default.InlayHintKind.Parameter
+                    ? vscode_languageserver_types_1.InlayHintKind.Parameter
+                    : undefined);
+            result.paddingLeft = hint.whitespaceBefore;
+            result.paddingRight = hint.whitespaceAfter;
+            return result;
+        });
+    }
+}
+exports.InlayHintsProviderImpl = InlayHintsProviderImpl;

package/dist/plugins/typescript/snapshots/utils.js

@@ -10,6 +10,7 @@ const vscode_uri_1 = require("vscode-uri");
 const utils_1 = require("../utils");
 const DocumentSnapshot_1 = require("./DocumentSnapshot");
 const svelte_language_integration_1 = require("@astrojs/svelte-language-integration");
+const vue_language_integration_1 = require("@astrojs/vue-language-integration");
 const utils_2 = require("../../../utils");
 // Utilities to create Snapshots from different contexts
 function createFromDocument(document) {
@@ -76,8 +77,8 @@ function createFromFrameworkFilePath(filePath, framework) {
     if (framework === 'svelte') {
         code = (0, svelte_language_integration_1.toTSX)(originalText, className);
     }
-    else {
-        code = `export default function ${className}__AstroComponent_(props: Record<string, any>): any {}`;
+    else if (framework === 'vue') {
+        code = (0, vue_language_integration_1.toTSX)(originalText, className);
     }
     return new DocumentSnapshot_1.TypeScriptDocumentSnapshot(0, filePath, code, typescript_1.default.ScriptKind.TSX);
 }

package/dist/server.js

@@ -88,6 +88,7 @@ function startLanguageServer(connection) {
                 foldingRangeProvider: true,
                 definitionProvider: true,
                 renameProvider: true,
+                documentFormattingProvider: true,
                 codeActionProvider: {
                     codeActionKinds: [
                         vscode_languageserver_1.CodeActionKind.QuickFix,
@@ -133,6 +134,7 @@ function startLanguageServer(connection) {
                     range: true,
                     full: true,
                 },
+                inlayHintProvider: true,
                 signatureHelpProvider: {
                     triggerCharacters: ['(', ',', '<'],
                     retriggerCharacters: [')'],
@@ -193,8 +195,10 @@ function startLanguageServer(connection) {
     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.onDocumentFormatting((params) => pluginHost.formatDocument(params.textDocument, params.options));
     connection.onDocumentColor((params) => pluginHost.getDocumentColors(params.textDocument));
     connection.onColorPresentation((params) => pluginHost.getColorPresentations(params.textDocument, params.range, params.color));
+    connection.onRequest(vscode_languageserver_1.InlayHintRequest.type, (params, cancellationToken) => pluginHost.getInlayHints(params.textDocument, params.range, cancellationToken));
     connection.onRequest(TagCloseRequest, (evt) => pluginHost.doTagComplete(evt.textDocument, evt.position));
     connection.onSignatureHelp((evt, cancellationToken) => pluginHost.getSignatureHelp(evt.textDocument, evt.position, evt.context, cancellationToken));
     connection.onRenameRequest((evt) => pluginHost.rename(evt.textDocument, evt.position, evt.newName));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/language-server",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "author": "withastro",
   "license": "MIT",
   "type": "commonjs",
@@ -19,18 +19,19 @@
     "test": "cross-env TS_NODE_TRANSPILE_ONLY=true mocha --timeout 20000 --require ts-node/register \"test/**/*.ts\" --exclude \"test/**/*.d.ts\""
   },
   "dependencies": {
+    "@astrojs/vue-language-integration": "^0.1.0",
     "@astrojs/svelte-language-integration": "^0.1.4",
     "@vscode/emmet-helper": "^2.8.4",
     "lodash": "^4.17.21",
     "source-map": "^0.7.3",
-    "typescript": "~4.6.2",
-    "vscode-css-languageservice": "^5.1.13",
-    "vscode-html-languageservice": "^4.2.2",
-    "vscode-languageserver": "7.0.0",
-    "vscode-languageserver-protocol": "^3.16.0",
-    "vscode-languageserver-textdocument": "^1.0.1",
-    "vscode-languageserver-types": "^3.16.0",
-    "vscode-uri": "^3.0.2"
+    "typescript": "~4.6.4",
+    "vscode-css-languageservice": "^6.0.1",
+    "vscode-html-languageservice": "^5.0.0",
+    "vscode-languageserver": "^8.0.1",
+    "vscode-languageserver-protocol": "^3.17.1",
+    "vscode-languageserver-textdocument": "^1.0.4",
+    "vscode-languageserver-types": "^3.17.1",
+    "vscode-uri": "^3.0.3"
   },
   "devDependencies": {
     "@types/chai": "^4.3.0",