@astrojs/language-server 0.20.1 → 0.20.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @astrojs/language-server
 
+## 0.20.3
+
+### Patch Changes
+
+- 081cf24: Fix completions not working inside script tags, fix duplicate completions in some cases, added completions for the slot element
+
 ## 0.20.1
 
 ### Patch Changes

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

@@ -21,6 +21,10 @@ export declare function getLineAtPosition(position: Position, text: string): str
  * Return if a given offset is inside the start tag of a component
  */
 export declare function isInComponentStartTag(html: HTMLDocument, offset: number): boolean;
+/**
+ * Return if a given offset is inside the name of a tag
+ */
+export declare function isInTagName(html: HTMLDocument, offset: number): boolean;
 /**
  * Return true if a specific node could be a component.
  * 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

package/dist/core/documents/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFirstNonWhitespaceIndex = exports.getLineOffsets = exports.offsetAt = exports.positionAt = exports.isInsideFrontmatter = exports.isInsideExpression = exports.isInTag = exports.isPossibleComponent = exports.isInComponentStartTag = exports.getLineAtPosition = exports.extractScriptTags = exports.extractStyleTags = exports.walk = void 0;
+exports.getFirstNonWhitespaceIndex = exports.getLineOffsets = exports.offsetAt = exports.positionAt = exports.isInsideFrontmatter = exports.isInsideExpression = exports.isInTag = exports.isPossibleComponent = exports.isInTagName = exports.isInComponentStartTag = exports.getLineAtPosition = exports.extractScriptTags = exports.extractStyleTags = exports.walk = void 0;
 const vscode_languageserver_1 = require("vscode-languageserver");
 const utils_1 = require("../../utils");
 const parseHtml_1 = require("./parseHtml");
@@ -105,6 +105,14 @@ function isInComponentStartTag(html, offset) {
     return isPossibleComponent(node) && (!node.startTagEnd || offset < node.startTagEnd);
 }
 exports.isInComponentStartTag = isInComponentStartTag;
+/**
+ * Return if a given offset is inside the name of a tag
+ */
+function isInTagName(html, offset) {
+    const node = html.findNodeAt(offset);
+    return offset > node.start && offset < node.start + (node.tag?.length ?? 0);
+}
+exports.isInTagName = isInTagName;
 /**
  * Return true if a specific node could be a component.
  * 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

package/dist/plugins/PluginHost.js

@@ -38,19 +38,14 @@ class PluginHost {
         const astro = completions.find((completion) => completion.plugin === 'astro');
         if (html && ts) {
             const inComponentStartTag = (0, documents_1.isInComponentStartTag)(document.html, document.offsetAt(position));
-            if (!inComponentStartTag) {
+            // If the HTML plugin returned completions, it's highly likely that TS ones are duplicate
+            if (html.result.items.length > 0) {
                 ts.result.items = [];
             }
-            // If the Astro plugin has completions for us, don't show TypeScript's as they're most likely duplicates
+            // Inside components, if the Astro plugin has completions we don't want the TS ones are they're duplicates
             if (astro && astro.result.items.length > 0 && inComponentStartTag) {
                 ts.result.items = [];
             }
-            ts.result.items = ts.result.items.map((item) => {
-                if (item.sortText != '-1') {
-                    item.sortText = 'Z' + (item.sortText || '');
-                }
-                return item;
-            });
         }
         let flattenedCompletions = completions.flatMap((completion) => completion.result.items);
         const isIncomplete = completions.reduce((incomplete, completion) => incomplete || completion.result.isIncomplete, false);

package/dist/plugins/html/HTMLPlugin.js

@@ -11,7 +11,7 @@ class HTMLPlugin {
     constructor(configManager) {
         this.__name = 'html';
         this.lang = (0, vscode_html_languageservice_1.getLanguageService)({
-            customDataProviders: [astro_attributes_1.astroAttributes, astro_attributes_1.classListAttribute],
+            customDataProviders: [astro_attributes_1.astroAttributes, astro_attributes_1.astroElements, astro_attributes_1.classListAttribute],
         });
         this.attributeOnlyLang = (0, vscode_html_languageservice_1.getLanguageService)({
             customDataProviders: [astro_attributes_1.astroAttributes],
@@ -72,10 +72,14 @@ 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))
+        const inComponentTag = (0, utils_1.isInComponentStartTag)(html, offset);
+        const inTagName = (0, utils_1.isInTagName)(html, offset);
+        const results = inComponentTag && !inTagName
             ? (0, utils_2.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], 
+            : // We filter items with no documentation to prevent duplicates with our own defined script and style tags
+                this.lang.doComplete(document, position, html).items.filter((item) => item.documentation !== undefined);
+        const langCompletions = inComponentTag ? [] : this.getLangCompletions(results);
+        return vscode_languageserver_1.CompletionList.create([...results, ...langCompletions, ...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,3 +1,4 @@
 export declare const classListAttribute: import("vscode-html-languageservice").IHTMLDataProvider;
+export declare const astroElements: 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,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.astroDirectives = exports.astroAttributes = exports.classListAttribute = void 0;
+exports.astroDirectives = exports.astroAttributes = exports.astroElements = exports.classListAttribute = void 0;
 const vscode_html_languageservice_1 = require("vscode-html-languageservice");
 exports.classListAttribute = (0, vscode_html_languageservice_1.newHTMLDataProvider)('class-list', {
     version: 1,
@@ -17,42 +17,31 @@ exports.classListAttribute = (0, vscode_html_languageservice_1.newHTMLDataProvid
         },
     ],
 });
-exports.astroAttributes = (0, vscode_html_languageservice_1.newHTMLDataProvider)('astro-attributes', {
+exports.astroElements = (0, vscode_html_languageservice_1.newHTMLDataProvider)('astro-elements', {
     version: 1,
-    globalAttributes: [
-        {
-            name: 'set:html',
-            description: 'Inject unescaped HTML into this tag',
-            references: [
-                {
-                    name: 'Astro reference',
-                    url: 'https://docs.astro.build/en/reference/directives-reference/#sethtml',
-                },
-            ],
-        },
+    tags: [
         {
-            name: 'set:text',
-            description: 'Inject escaped text into this tag',
+            name: 'slot',
+            description: 'The slot element is a placeholder for external HTML content, allowing you to inject (or “slot”) child elements from other files into your component template.',
             references: [
                 {
                     name: 'Astro reference',
-                    url: 'https://docs.astro.build/en/reference/directives-reference/#settext',
+                    url: 'https://docs.astro.build/en/core-concepts/astro-components/#slots',
                 },
             ],
-        },
-        {
-            name: 'is:raw',
-            description: 'Instructs the Astro compiler to treat any children of this element as text',
-            valueSet: 'v',
-            references: [
+            attributes: [
                 {
-                    name: 'Astro reference',
-                    url: 'https://docs.astro.build/en/reference/directives-reference/#israw',
+                    name: 'name',
+                    description: 'The name attribute allows you to pass only HTML elements with the corresponding slot name into a slot’s location.',
+                    references: [
+                        {
+                            name: 'Astro reference',
+                            url: 'https://docs.astro.build/en/core-concepts/astro-components/#named-slots',
+                        },
+                    ],
                 },
             ],
         },
-    ],
-    tags: [
         {
             name: 'script',
             attributes: [
@@ -146,6 +135,42 @@ exports.astroAttributes = (0, vscode_html_languageservice_1.newHTMLDataProvider)
         },
     ],
 });
+exports.astroAttributes = (0, vscode_html_languageservice_1.newHTMLDataProvider)('astro-attributes', {
+    version: 1,
+    globalAttributes: [
+        {
+            name: 'set:html',
+            description: 'Inject unescaped HTML into this tag',
+            references: [
+                {
+                    name: 'Astro reference',
+                    url: 'https://docs.astro.build/en/reference/directives-reference/#sethtml',
+                },
+            ],
+        },
+        {
+            name: 'set:text',
+            description: 'Inject escaped text into this tag',
+            references: [
+                {
+                    name: 'Astro reference',
+                    url: 'https://docs.astro.build/en/reference/directives-reference/#settext',
+                },
+            ],
+        },
+        {
+            name: 'is:raw',
+            description: 'Instructs the Astro compiler to treat any children of this element as text',
+            valueSet: 'v',
+            references: [
+                {
+                    name: 'Astro reference',
+                    url: 'https://docs.astro.build/en/reference/directives-reference/#israw',
+                },
+            ],
+        },
+    ],
+});
 exports.astroDirectives = (0, vscode_html_languageservice_1.newHTMLDataProvider)('astro-directives', {
     version: 1,
     globalAttributes: [

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

@@ -21,7 +21,6 @@ export declare class CompletionsProviderImpl implements CompletionsProvider<Comp
     getCompletions(document: AstroDocument, position: Position, completionContext?: CompletionContext, cancellationToken?: CancellationToken): Promise<AppCompletionList<CompletionItemData> | null>;
     resolveCompletion(document: AstroDocument, item: AppCompletionItem<CompletionItemData>, cancellationToken?: CancellationToken): Promise<AppCompletionItem<CompletionItemData>>;
     private toCompletionItem;
-    private isValidCompletion;
     private getCompletionDocument;
     /**
      * If the textEdit is out of the word range of the triggered position

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

@@ -78,26 +78,8 @@ class CompletionsProviderImpl {
             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
@@ -132,7 +114,7 @@ class CompletionsProviderImpl {
         const fragment = await tsDoc.createFragment();
         const existingImports = this.getExistingImports(document);
         const completionItems = completions.entries
-            .filter(this.isValidCompletion)
+            .filter(isValidCompletion)
             .map((entry) => this.toCompletionItem(fragment, entry, filePath, offset, isCompletionInsideFrontmatter, scriptTagIndex, existingImports))
             .filter(utils_3.isNotNullOrUndefined)
             .map((comp) => this.fixTextEditRange(wordRangeStartPosition, comp));
@@ -250,13 +232,6 @@ class CompletionsProviderImpl {
             },
         };
     }
-    isValidCompletion(completion) {
-        // Remove completion for default exported function
-        if (completion.name === 'default' && completion.kindModifiers == typescript_1.ScriptElementKindModifier.exportedModifier) {
-            return false;
-        }
-        return true;
-    }
     getCompletionDocument(compDetail) {
         const { sourceDisplay, documentation: tsDocumentation, displayParts } = compDetail;
         let detail = (0, utils_2.removeAstroComponentSuffix)(typescript_1.default.displayPartsToString(displayParts));
@@ -355,3 +330,31 @@ function codeActionChangeToTextEdit(document, fragment, isInsideScriptTag, chang
     return vscode_languageserver_1.TextEdit.replace(range, change.newText);
 }
 exports.codeActionChangeToTextEdit = codeActionChangeToTextEdit;
+// When Svelte components are imported, we have to reference the svelte2tsx's types to properly type the component
+// An unfortunate downside of this is that it polutes completions, so let's filter those internal types manually
+const svelte2tsxTypes = new Set([
+    'Svelte2TsxComponent',
+    'Svelte2TsxComponentConstructorParameters',
+    'SvelteComponentConstructor',
+    'SvelteActionReturnType',
+    'SvelteTransitionConfig',
+    'SvelteTransitionReturnType',
+    'SvelteAnimationReturnType',
+    'SvelteWithOptionalProps',
+    'SvelteAllProps',
+    'SveltePropsAnyFallback',
+    'SvelteSlotsAnyFallback',
+    'SvelteRestProps',
+    'SvelteSlots',
+    'SvelteStore',
+]);
+function isValidCompletion(completion) {
+    // Remove completion for default exported function
+    const isDefaultExport = completion.name === 'default' && completion.kindModifiers == typescript_1.ScriptElementKindModifier.exportedModifier;
+    // Remove completion for svelte2tsx internal types
+    const isSvelte2tsxCompletion = completion.name.startsWith('__sveltets_') || svelte2tsxTypes.has(completion.name);
+    if (isDefaultExport || isSvelte2tsxCompletion) {
+        return false;
+    }
+    return true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/language-server",
-  "version": "0.20.1",
+  "version": "0.20.3",
   "author": "withastro",
   "license": "MIT",
   "type": "commonjs",
@@ -31,8 +31,8 @@
     "vscode-uri": "^3.0.3"
   },
   "devDependencies": {
-    "@astrojs/svelte": "^0.2.1",
-    "@astrojs/vue": "^0.2.1",
+    "@astrojs/svelte": "^0.5.0",
+    "@astrojs/vue": "^0.5.0",
     "@types/chai": "^4.3.0",
     "@types/mocha": "^9.1.0",
     "@types/sinon": "^10.0.11",