@astrojs/language-server 0.16.1 → 0.18.1

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

@@ -23,8 +23,6 @@ class CodeActionsProviderImpl {
         const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
         const filePath = (0, utils_2.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.getTSPreferences(document);
         const formatOptions = await this.configManager.getTSFormatConfig(document);
         let result = [];
@@ -50,24 +48,57 @@ class CodeActionsProviderImpl {
                 .map((diag) => Number(diag.code))
                 // We currently cannot support quick fix for unreachable code properly due to the way our TSX output is structured
                 .filter((code) => code !== 7027);
-            let codeFixes = errorCodes.includes(2304)
-                ? this.getComponentQuickFix(start, end, lang, filePath, formatOptions, tsPreferences)
-                : undefined;
-            codeFixes =
-                codeFixes ?? lang.getCodeFixesAtPosition(filePath, start, end, errorCodes, formatOptions, tsPreferences);
-            const codeActions = codeFixes.map((fix) => codeFixToCodeAction(fix, context.diagnostics, context.only ? vscode_languageserver_types_1.CodeActionKind.QuickFix : vscode_languageserver_types_1.CodeActionKind.Empty));
+            const html = document.html;
+            const node = html.findNodeAt(document.offsetAt(range.start));
+            let codeFixes;
+            let isInsideScript = false;
+            if (node.tag === 'script') {
+                const { snapshot: scriptTagSnapshot, filePath: scriptFilePath } = (0, utils_2.getScriptTagSnapshot)(tsDoc, document, node);
+                const start = scriptTagSnapshot.offsetAt(scriptTagSnapshot.getGeneratedPosition(range.start));
+                const end = scriptTagSnapshot.offsetAt(scriptTagSnapshot.getGeneratedPosition(range.end));
+                codeFixes = lang.getCodeFixesAtPosition(scriptFilePath, start, end, errorCodes, formatOptions, tsPreferences);
+                codeFixes = codeFixes.map((fix) => ({
+                    ...fix,
+                    changes: mapScriptTagFixToOriginal(fix.changes, scriptTagSnapshot),
+                }));
+                isInsideScript = true;
+            }
+            else {
+                const start = fragment.offsetAt(fragment.getGeneratedPosition(range.start));
+                const end = fragment.offsetAt(fragment.getGeneratedPosition(range.end));
+                codeFixes = errorCodes.includes(2304)
+                    ? this.getComponentQuickFix(start, end, lang, filePath, formatOptions, tsPreferences)
+                    : undefined;
+                codeFixes =
+                    codeFixes ?? lang.getCodeFixesAtPosition(filePath, start, end, errorCodes, formatOptions, tsPreferences);
+            }
+            const codeActions = codeFixes.map((fix) => codeFixToCodeAction(fix, context.diagnostics, context.only ? vscode_languageserver_types_1.CodeActionKind.QuickFix : vscode_languageserver_types_1.CodeActionKind.Empty, isInsideScript));
             result.push(...codeActions);
         }
         return result;
-        function codeFixToCodeAction(codeFix, diagnostics, kind) {
+        function codeFixToCodeAction(codeFix, diagnostics, kind, isInsideScript) {
             const documentChanges = codeFix.changes.map((change) => {
                 return vscode_languageserver_types_1.TextDocumentEdit.create(vscode_languageserver_types_1.OptionalVersionedTextDocumentIdentifier.create(document.getURL(), null), change.textChanges.map((edit) => {
                     let originalRange = (0, documents_1.mapRangeToOriginal)(fragment, (0, utils_2.convertRange)(fragment, edit.span));
-                    if (codeFix.fixName === 'import') {
-                        return (0, CompletionsProvider_1.codeActionChangeToTextEdit)(document, fragment, edit);
+                    // Inside scripts, we don't need to restrain the insertion of code inside a specific zone as it will be
+                    // restricted to the area of the script tag by default
+                    if (!isInsideScript) {
+                        if (codeFix.fixName === 'import') {
+                            return (0, CompletionsProvider_1.codeActionChangeToTextEdit)(document, fragment, false, edit);
+                        }
+                        if (codeFix.fixName === 'fixMissingFunctionDeclaration') {
+                            originalRange = (0, utils_2.checkEndOfFileCodeInsert)(originalRange, document);
+                        }
                     }
-                    if (codeFix.fixName === 'fixMissingFunctionDeclaration') {
-                        originalRange = (0, utils_2.checkEndOfFileCodeInsert)(originalRange, document);
+                    else {
+                        // Make sure new imports are not added on the file line of the script tag
+                        if (codeFix.fixName === 'import') {
+                            const existingLine = (0, documents_1.getLineAtPosition)(document.positionAt(edit.span.start), document.getText());
+                            const isNewImport = !existingLine.trim().startsWith('import');
+                            if (!(edit.newText.startsWith('\n') || edit.newText.startsWith('\r\n')) && isNewImport) {
+                                edit.newText = typescript_1.default.sys.newLine + edit.newText;
+                            }
+                        }
                     }
                     return vscode_languageserver_types_1.TextEdit.replace(originalRange, edit.newText);
                 }));
@@ -78,6 +109,15 @@ class CodeActionsProviderImpl {
             codeAction.diagnostics = diagnostics;
             return codeAction;
         }
+        function mapScriptTagFixToOriginal(changes, scriptTagSnapshot) {
+            return changes.map((change) => {
+                change.textChanges.map((edit) => {
+                    edit.span.start = fragment.offsetAt(scriptTagSnapshot.getOriginalPosition(scriptTagSnapshot.positionAt(edit.span.start)));
+                    return edit;
+                });
+                return change;
+            });
+        }
     }
     getComponentQuickFix(start, end, lang, filePath, formatOptions, tsPreferences) {
         const sourceFile = lang.getProgram()?.getSourceFile(filePath);
@@ -107,16 +147,35 @@ class CodeActionsProviderImpl {
         return (0, lodash_1.flatten)(completion.entries.filter((c) => c.name === name || c.name === suffixedName).map(toFix));
     }
     async organizeSortImports(document, skipDestructiveCodeActions = false, cancellationToken) {
-        if (document.astroMeta.frontmatter.state !== 'closed') {
-            return [];
-        }
         const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
         const filePath = (0, utils_2.toVirtualAstroFilePath)(tsDoc.filePath);
         const fragment = await tsDoc.createFragment();
         if (cancellationToken?.isCancellationRequested) {
             return [];
         }
-        const changes = lang.organizeImports({ fileName: filePath, type: 'file', skipDestructiveCodeActions }, {}, {});
+        let changes = [];
+        if (document.astroMeta.frontmatter.state === 'closed') {
+            changes.push(...lang.organizeImports({ fileName: filePath, type: 'file', skipDestructiveCodeActions }, {}, {}));
+        }
+        document.scriptTags.forEach((scriptTag) => {
+            const { filePath: scriptFilePath, snapshot: scriptTagSnapshot } = (0, utils_2.getScriptTagSnapshot)(tsDoc, document, scriptTag.container);
+            const edits = lang.organizeImports({ fileName: scriptFilePath, type: 'file', skipDestructiveCodeActions }, {}, {});
+            edits.forEach((edit) => {
+                edit.fileName = tsDoc.filePath;
+                edit.textChanges = edit.textChanges
+                    .map((change) => {
+                    change.span.start = fragment.offsetAt(scriptTagSnapshot.getOriginalPosition(scriptTagSnapshot.positionAt(change.span.start)));
+                    return change;
+                })
+                    // Since our last line is a (virtual) export, organize imports will try to rewrite it, so let's only take
+                    // changes that actually happens inside the script tag
+                    .filter((change) => {
+                    return scriptTagSnapshot.isInGenerated(document.positionAt(change.span.start));
+                });
+                return edit;
+            });
+            changes.push(...edits);
+        });
         const documentChanges = changes.map((change) => {
             return vscode_languageserver_types_1.TextDocumentEdit.create(vscode_languageserver_types_1.OptionalVersionedTextDocumentIdentifier.create(document.url, null), change.textChanges.map((edit) => {
                 const range = (0, documents_1.mapRangeToOriginal)(fragment, (0, utils_2.convertRange)(fragment, edit.span));

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

@@ -8,6 +8,7 @@ import { ConfigManager } from '../../../core/config';
 export interface CompletionItemData extends TextDocumentIdentifier {
     filePath: string;
     offset: number;
+    scriptTagIndex: number | undefined;
     originalItem: ts.CompletionEntry;
 }
 export declare class CompletionsProviderImpl implements CompletionsProvider<CompletionItemData> {
@@ -32,4 +33,4 @@ export declare class CompletionsProviderImpl implements CompletionsProvider<Comp
     private getExistingImports;
     private isAstroComponentImport;
 }
-export declare function codeActionChangeToTextEdit(document: AstroDocument, fragment: AstroSnapshotFragment, change: ts.TextChange): TextEdit;
+export declare function codeActionChangeToTextEdit(document: AstroDocument, fragment: AstroSnapshotFragment, isInsideScriptTag: boolean, change: ts.TextChange): TextEdit;

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

@@ -65,37 +65,64 @@ class CompletionsProviderImpl {
         const html = document.html;
         const offset = document.offsetAt(position);
         const node = html.findNodeAt(offset);
-        // TODO: Add support for script tags
-        if (node.tag === 'script') {
-            return null;
-        }
+        const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
+        let filePath = (0, utils_2.toVirtualAstroFilePath)(tsDoc.filePath);
+        let completions;
         const isCompletionInsideFrontmatter = (0, utils_1.isInsideFrontmatter)(document.getText(), offset);
         const isCompletionInsideExpression = (0, utils_1.isInsideExpression)(document.getText(), node.start, offset);
-        // PERF: Getting TS completions is fairly slow and I am currently not sure how to speed it up
-        // As such, we'll try to avoid getting them when unneeded, such as when we're doing HTML stuff
-        // When at the root of the document TypeScript offer all kinds of completions, because it doesn't know yet that
-        // it's JSX and not JS. As such, people who are using Emmet to write their template suffer from a very degraded experience
-        // from what they're used to in HTML files (which is instant completions). So let's disable ourselves when we're at the root
-        if (!isCompletionInsideFrontmatter && !node.parent && !isCompletionInsideExpression) {
-            return null;
-        }
-        // If the user just typed `<` with nothing else, let's disable ourselves until we're more sure if the user wants TS completions
-        if (!isCompletionInsideFrontmatter && node.parent && node.tag === undefined && !isCompletionInsideExpression) {
-            return null;
-        }
-        // If the current node is not a component (aka, it doesn't start with a caps), let's disable ourselves as the user
-        // is most likely looking for HTML completions
-        if (!isCompletionInsideFrontmatter && !(0, utils_1.isComponentTag)(node) && !isCompletionInsideExpression) {
-            return null;
-        }
         const tsPreferences = await this.configManager.getTSPreferences(document);
         const formatOptions = await this.configManager.getTSFormatConfig(document);
-        const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
-        const filePath = (0, utils_2.toVirtualAstroFilePath)(tsDoc.filePath);
-        const completions = lang.getCompletionsAtPosition(filePath, offset, {
-            ...tsPreferences,
-            triggerCharacter: validTriggerCharacter,
-        }, formatOptions);
+        let scriptTagIndex = undefined;
+        if (node.tag === 'script') {
+            const { filePath: scriptFilePath, offset: scriptOffset, index: scriptIndex, } = (0, utils_2.getScriptTagSnapshot)(tsDoc, document, node, position);
+            filePath = scriptFilePath;
+            scriptTagIndex = scriptIndex;
+            completions = lang.getCompletionsAtPosition(scriptFilePath, scriptOffset, {
+                ...tsPreferences,
+                // File extensions are required inside script tags, however TypeScript can't return completions with the `ts`
+                // extension, so what we'll do instead is force `minimal` (aka, no extension) and manually add the extensions
+                importModuleSpecifierEnding: 'minimal',
+                triggerCharacter: validTriggerCharacter,
+            }, formatOptions);
+            if (completions) {
+                // Manually adds file extensions to js and ts files
+                completions.entries = completions?.entries.map((comp) => {
+                    if (comp.kind === typescript_1.ScriptElementKind.scriptElement &&
+                        (comp.kindModifiers === '.js' || comp.kindModifiers === '.ts')) {
+                        return {
+                            ...comp,
+                            name: comp.name + comp.kindModifiers,
+                        };
+                    }
+                    else {
+                        return comp;
+                    }
+                });
+            }
+        }
+        else {
+            // PERF: Getting TS completions is fairly slow and I am currently not sure how to speed it up
+            // As such, we'll try to avoid getting them when unneeded, such as when we're doing HTML stuff
+            // When at the root of the document TypeScript offer all kinds of completions, because it doesn't know yet that
+            // it's JSX and not JS. As such, people who are using Emmet to write their template suffer from a very degraded experience
+            // from what they're used to in HTML files (which is instant completions). So let's disable ourselves when we're at the root
+            if (!isCompletionInsideFrontmatter && !node.parent && !isCompletionInsideExpression) {
+                return null;
+            }
+            // If the user just typed `<` with nothing else, let's disable ourselves until we're more sure if the user wants TS completions
+            if (!isCompletionInsideFrontmatter && node.parent && node.tag === undefined && !isCompletionInsideExpression) {
+                return null;
+            }
+            // If the current node is not a component (aka, it doesn't start with a caps), let's disable ourselves as the user
+            // is most likely looking for HTML completions
+            if (!isCompletionInsideFrontmatter && !(0, utils_1.isComponentTag)(node) && !isCompletionInsideExpression) {
+                return null;
+            }
+            completions = lang.getCompletionsAtPosition(filePath, offset, {
+                ...tsPreferences,
+                triggerCharacter: validTriggerCharacter,
+            }, formatOptions);
+        }
         if (completions === undefined || completions.entries.length === 0) {
             return null;
         }
@@ -107,7 +134,7 @@ class CompletionsProviderImpl {
         const existingImports = this.getExistingImports(document);
         const completionItems = completions.entries
             .filter(this.isValidCompletion)
-            .map((entry) => this.toCompletionItem(fragment, entry, filePath, offset, isCompletionInsideFrontmatter, existingImports))
+            .map((entry) => this.toCompletionItem(fragment, entry, filePath, offset, isCompletionInsideFrontmatter, scriptTagIndex, existingImports))
             .filter(utils_3.isNotNullOrUndefined)
             .map((comp) => this.fixTextEditRange(wordRangeStartPosition, comp));
         const completionList = vscode_languageserver_2.CompletionList.create(completionItems, true);
@@ -132,22 +159,37 @@ 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;
         }
         const actions = detail?.codeActions;
+        const isInsideScriptTag = data.scriptTagIndex !== undefined;
+        let scriptTagSnapshot;
+        if (isInsideScriptTag) {
+            const { snapshot } = (0, utils_2.getScriptTagSnapshot)(tsDoc, document, document.scriptTags[data.scriptTagIndex].container);
+            scriptTagSnapshot = snapshot;
+        }
         if (actions) {
             const edit = [];
             for (const action of actions) {
                 for (const change of action.changes) {
-                    edit.push(...change.textChanges.map((textChange) => codeActionChangeToTextEdit(document, fragment, textChange)));
+                    if (isInsideScriptTag) {
+                        change.textChanges.forEach((textChange) => {
+                            textChange.span.start = fragment.offsetAt(scriptTagSnapshot.getOriginalPosition(scriptTagSnapshot.positionAt(textChange.span.start)));
+                        });
+                    }
+                    edit.push(...change.textChanges.map((textChange) => codeActionChangeToTextEdit(document, fragment, isInsideScriptTag, textChange)));
                 }
             }
             item.additionalTextEdits = (item.additionalTextEdits ?? []).concat(edit);
         }
         return item;
     }
-    toCompletionItem(fragment, comp, filePath, offset, insideFrontmatter, existingImports) {
+    toCompletionItem(fragment, comp, filePath, offset, insideFrontmatter, scriptTagIndex, existingImports) {
         let item = vscode_languageserver_protocol_1.CompletionItem.create(comp.name);
         const isAstroComponent = this.isAstroComponentImport(comp.name);
         const isImport = comp.insertText?.includes('import');
@@ -171,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;
@@ -194,6 +245,7 @@ class CompletionsProviderImpl {
             data: {
                 uri: fragment.getURL(),
                 filePath,
+                scriptTagIndex,
                 offset,
                 originalItem: comp,
             },
@@ -273,23 +325,33 @@ class CompletionsProviderImpl {
     }
 }
 exports.CompletionsProviderImpl = CompletionsProviderImpl;
-function codeActionChangeToTextEdit(document, fragment, change) {
+function codeActionChangeToTextEdit(document, fragment, isInsideScriptTag, change) {
     change.newText = (0, utils_2.removeAstroComponentSuffix)(change.newText);
-    // If we don't have a frontmatter already, create one with the import
-    const frontmatterState = document.astroMeta.frontmatter.state;
-    if (frontmatterState === null) {
-        return vscode_languageserver_1.TextEdit.replace(vscode_languageserver_1.Range.create(vscode_languageserver_1.Position.create(0, 0), vscode_languageserver_1.Position.create(0, 0)), `---${typescript_1.default.sys.newLine}${change.newText}---${typescript_1.default.sys.newLine}${typescript_1.default.sys.newLine}`);
-    }
     const { span } = change;
     let range;
     const virtualRange = (0, utils_2.convertRange)(fragment, span);
     range = (0, documents_1.mapRangeToOriginal)(fragment, virtualRange);
-    if (!(0, utils_1.isInsideFrontmatter)(document.getText(), document.offsetAt(range.start))) {
-        range = (0, utils_2.ensureFrontmatterInsert)(range, document);
+    if (!isInsideScriptTag) {
+        // If we don't have a frontmatter already, create one with the import
+        const frontmatterState = document.astroMeta.frontmatter.state;
+        if (frontmatterState === null) {
+            return vscode_languageserver_1.TextEdit.replace(vscode_languageserver_1.Range.create(vscode_languageserver_1.Position.create(0, 0), vscode_languageserver_1.Position.create(0, 0)), `---${typescript_1.default.sys.newLine}${change.newText}---${typescript_1.default.sys.newLine}${typescript_1.default.sys.newLine}`);
+        }
+        if (!(0, utils_1.isInsideFrontmatter)(document.getText(), document.offsetAt(range.start))) {
+            range = (0, utils_2.ensureFrontmatterInsert)(range, document);
+        }
+        // First import in a file will wrongly have a newline before it due to how the frontmatter is replaced by a comment
+        if (range.start.line === 1 && (change.newText.startsWith('\n') || change.newText.startsWith('\r\n'))) {
+            change.newText = change.newText.trimStart();
+        }
     }
-    // First import in a file will wrongly have a newline before it due to how the frontmatter is replaced by a comment
-    if (range.start.line === 1 && (change.newText.startsWith('\n') || change.newText.startsWith('\r\n'))) {
-        change.newText = change.newText.trimStart();
+    else {
+        const existingLine = (0, utils_1.getLineAtPosition)(document.positionAt(span.start), document.getText());
+        const isNewImport = !existingLine.trim().startsWith('import');
+        // Avoid putting new imports on the same line as the script tag opening
+        if (!(change.newText.startsWith('\n') || change.newText.startsWith('\r\n')) && isNewImport) {
+            change.newText = typescript_1.default.sys.newLine + change.newText;
+        }
     }
     return vscode_languageserver_1.TextEdit.replace(range, change.newText);
 }

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

@@ -15,7 +15,28 @@ class DefinitionsProviderImpl {
         const tsFilePath = (0, utils_2.toVirtualAstroFilePath)(tsDoc.filePath);
         const fragmentPosition = mainFragment.getGeneratedPosition(position);
         const fragmentOffset = mainFragment.offsetAt(fragmentPosition);
-        const defs = lang.getDefinitionAndBoundSpan(tsFilePath, fragmentOffset);
+        let defs;
+        const html = document.html;
+        const offset = document.offsetAt(position);
+        const node = html.findNodeAt(offset);
+        if (node.tag === 'script') {
+            const { snapshot: scriptTagSnapshot, filePath: scriptFilePath, offset: scriptOffset, } = (0, utils_2.getScriptTagSnapshot)(tsDoc, document, node, position);
+            defs = lang.getDefinitionAndBoundSpan(scriptFilePath, scriptOffset);
+            if (defs) {
+                defs.definitions = defs.definitions?.map((def) => {
+                    const isInSameFile = def.fileName === scriptFilePath;
+                    def.fileName = isInSameFile ? tsFilePath : def.fileName;
+                    if (isInSameFile) {
+                        def.textSpan.start = mainFragment.offsetAt(scriptTagSnapshot.getOriginalPosition(scriptTagSnapshot.positionAt(def.textSpan.start)));
+                    }
+                    return def;
+                });
+                defs.textSpan.start = mainFragment.offsetAt(scriptTagSnapshot.getOriginalPosition(scriptTagSnapshot.positionAt(defs.textSpan.start)));
+            }
+        }
+        else {
+            defs = lang.getDefinitionAndBoundSpan(tsFilePath, fragmentOffset);
+        }
         if (!defs || !defs.definitions) {
             return [];
         }

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

@@ -20,24 +20,52 @@ class DiagnosticsProviderImpl {
         }
         const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
         const filePath = (0, utils_1.toVirtualAstroFilePath)(tsDoc.filePath);
+        const fragment = await tsDoc.createFragment();
+        let scriptDiagnostics = [];
+        document.scriptTags.forEach((scriptTag) => {
+            const { filePath: scriptFilePath, snapshot: scriptTagSnapshot } = (0, utils_1.getScriptTagSnapshot)(tsDoc, document, scriptTag.container);
+            const scriptDiagnostic = [
+                ...lang.getSyntacticDiagnostics(scriptFilePath),
+                ...lang.getSuggestionDiagnostics(scriptFilePath),
+                ...lang.getSemanticDiagnostics(scriptFilePath),
+            ]
+                // We need to duplicate the diagnostic creation here because we can't map TS's diagnostics range to the original
+                // file due to some internal cache inside TS that would cause it to being mapped twice in some cases
+                .map((diagnostic) => ({
+                range: (0, utils_1.convertRange)(scriptTagSnapshot, diagnostic),
+                severity: (0, utils_1.mapSeverity)(diagnostic.category),
+                source: 'ts',
+                message: typescript_1.default.flattenDiagnosticMessageText(diagnostic.messageText, '\n'),
+                code: diagnostic.code,
+                tags: getDiagnosticTag(diagnostic),
+            }))
+                .map(mapRange(scriptTagSnapshot, document));
+            scriptDiagnostics.push(...scriptDiagnostic);
+        });
         const { script: scriptBoundaries } = this.getTagBoundaries(lang, filePath);
         const syntaxDiagnostics = lang.getSyntacticDiagnostics(filePath);
         const suggestionDiagnostics = lang.getSuggestionDiagnostics(filePath);
-        const semanticDiagnostics = lang.getSemanticDiagnostics(filePath).filter((d) => {
-            return isNoWithinBoundary(scriptBoundaries, d);
+        const semanticDiagnostics = lang.getSemanticDiagnostics(filePath);
+        const diagnostics = [
+            ...syntaxDiagnostics,
+            ...suggestionDiagnostics,
+            ...semanticDiagnostics,
+        ].filter((diag) => {
+            return isNoWithinBoundary(scriptBoundaries, diag);
         });
-        const diagnostics = [...syntaxDiagnostics, ...suggestionDiagnostics, ...semanticDiagnostics];
-        const fragment = await tsDoc.createFragment();
-        return diagnostics
-            .map((diagnostic) => ({
-            range: (0, utils_1.convertRange)(tsDoc, diagnostic),
-            severity: (0, utils_1.mapSeverity)(diagnostic.category),
-            source: 'ts',
-            message: typescript_1.default.flattenDiagnosticMessageText(diagnostic.messageText, '\n'),
-            code: diagnostic.code,
-            tags: getDiagnosticTag(diagnostic),
-        }))
-            .map(mapRange(fragment, document))
+        return [
+            ...diagnostics
+                .map((diagnostic) => ({
+                range: (0, utils_1.convertRange)(tsDoc, diagnostic),
+                severity: (0, utils_1.mapSeverity)(diagnostic.category),
+                source: 'ts',
+                message: typescript_1.default.flattenDiagnosticMessageText(diagnostic.messageText, '\n'),
+                code: diagnostic.code,
+                tags: getDiagnosticTag(diagnostic),
+            }))
+                .map(mapRange(fragment, document)),
+            ...scriptDiagnostics,
+        ]
             .filter((diag) => {
             return (hasNoNegativeLines(diag) &&
                 isNoJSXImplicitRuntimeWarning(diag) &&
@@ -46,6 +74,7 @@ class DiagnosticsProviderImpl {
                 isNoSpreadExpected(diag) &&
                 isNoCantResolveJSONModule(diag) &&
                 isNoCantReturnOutsideFunction(diag) &&
+                isNoIsolatedModuleError(diag) &&
                 isNoJsxCannotHaveMultipleAttrsError(diag));
         })
             .map(enhanceIfNecessary);
@@ -146,12 +175,26 @@ function isNoCantReturnOutsideFunction(diagnostic) {
 function isNoCantResolveJSONModule(diagnostic) {
     return diagnostic.code !== 2732;
 }
+/**
+ * When the content of the file is invalid and can't be parsed properly for TSX generation, TS will show an error about
+ * how the current module can't be compiled under --isolatedModule, this is confusing to users so let's ignore this
+ */
+function isNoIsolatedModuleError(diagnostic) {
+    return diagnostic.code !== 1208;
+}
 /**
  * Some diagnostics have JSX-specific nomenclature or unclear description. Enhance them for more clarity.
  */
 function enhanceIfNecessary(diagnostic) {
+    // JSX element has no closing tag. JSX -> HTML
+    if (diagnostic.code === 17008) {
+        return {
+            ...diagnostic,
+            message: diagnostic.message.replace('JSX', 'HTML'),
+        };
+    }
+    // For the rare case where an user might try to put a client directive on something that is not a component
     if (diagnostic.code === 2322) {
-        // For the rare case where an user might try to put a client directive on something that is not a component
         if (diagnostic.message.includes("Property 'client:") && diagnostic.message.includes("to type 'HTMLProps")) {
             return {
                 ...diagnostic,

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

@@ -15,15 +15,22 @@ class FoldingRangesProviderImpl {
         const html = document.html;
         const { lang, tsDoc } = await this.languageServiceManager.getLSAndTSDoc(document);
         const filePath = (0, utils_1.toVirtualAstroFilePath)(tsDoc.filePath);
-        const outliningSpans = lang.getOutliningSpans(filePath);
-        const foldingRanges = [];
-        for (const span of outliningSpans) {
+        const outliningSpans = lang.getOutliningSpans(filePath).filter((span) => {
             const node = html.findNodeAt(span.textSpan.start);
             // Due to how our TSX output transform those tags into function calls or template literals
             // TypeScript thinks of those as outlining spans, which is fine but we don't want folding ranges for those
-            if (node.tag === 'script' || node.tag === 'Markdown' || node.tag === 'style') {
-                continue;
-            }
+            return node.tag !== 'script' && node.tag !== 'style' && node.tag !== 'Markdown';
+        });
+        const scriptOutliningSpans = [];
+        document.scriptTags.forEach((scriptTag) => {
+            const { snapshot: scriptTagSnapshot, filePath: scriptFilePath } = (0, utils_1.getScriptTagSnapshot)(tsDoc, document, scriptTag.container);
+            scriptOutliningSpans.push(...lang.getOutliningSpans(scriptFilePath).map((span) => {
+                span.textSpan.start = document.offsetAt(scriptTagSnapshot.getOriginalPosition(scriptTagSnapshot.positionAt(span.textSpan.start)));
+                return span;
+            }));
+        });
+        const foldingRanges = [];
+        for (const span of [...outliningSpans, ...scriptOutliningSpans]) {
             const start = document.positionAt(span.textSpan.start);
             const end = adjustFoldingEnd(start, document.positionAt(span.textSpan.start + span.textSpan.length), document);
             // When using this method for generating folding ranges, TypeScript tend to return some

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[]>;
+}