npm - @astrojs/language-server - Versions diffs - 2.3.3 → 2.3.4 - Mend

@astrojs/language-server 2.3.3 → 2.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/core/parseCSS.d.ts CHANGED Viewed

@@ -2,7 +2,5 @@ import type { ParseResult } from '@astrojs/compiler/types';
 import { VirtualFile } from '@volar/language-core';
 import type ts from 'typescript/lib/tsserverlibrary';
 import type { HTMLDocument } from 'vscode-html-languageservice';
-import type { AttributeNodeWithPosition } from './compilerUtils.js';
 export declare function extractStylesheets(fileName: string, snapshot: ts.IScriptSnapshot, htmlDocument: HTMLDocument, ast: ParseResult['ast']): VirtualFile[];
 export declare function collectClassesAndIdsFromDocument(ast: ParseResult['ast']): string[];
-export declare function findInlineStyles(ast: ParseResult['ast']): AttributeNodeWithPosition[];

package/dist/core/parseCSS.js CHANGED Viewed

@@ -23,42 +23,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findInlineStyles = exports.collectClassesAndIdsFromDocument = exports.extractStylesheets = void 0;
+exports.collectClassesAndIdsFromDocument = exports.extractStylesheets = void 0;
 const utils_1 = require("@astrojs/compiler/utils");
 const language_core_1 = require("@volar/language-core");
 const SourceMap = __importStar(require("@volar/source-map"));
 const muggle = __importStar(require("muggle-string"));
 function extractStylesheets(fileName, snapshot, htmlDocument, ast) {
-    const embeddedCSSFiles = [];
-    for (const [index, root] of htmlDocument.roots.entries()) {
-        if (root.tag === 'style' && root.startTagEnd !== undefined && root.endTagStart !== undefined) {
-            const styleText = snapshot.getText(root.startTagEnd, root.endTagStart);
-            embeddedCSSFiles.push({
-                fileName: fileName + `.${index}.css`,
-                kind: language_core_1.FileKind.TextFile,
-                snapshot: {
-                    getText: (start, end) => styleText.substring(start, end),
-                    getLength: () => styleText.length,
-                    getChangeRange: () => undefined,
-                },
-                codegenStacks: [],
-                mappings: [
-                    {
-                        sourceRange: [root.startTagEnd, root.endTagStart],
-                        generatedRange: [0, styleText.length],
-                        data: language_core_1.FileRangeCapabilities.full,
-                    },
-                ],
-                capabilities: {
-                    diagnostic: false,
-                    documentSymbol: true,
-                    foldingRange: true,
-                    documentFormatting: false,
-                },
-                embeddedFiles: [],
-            });
-        }
-    }
+    const embeddedCSSFiles = findEmbeddedStyles(fileName, snapshot, htmlDocument.roots);
     const inlineStyles = findInlineStyles(ast);
     if (inlineStyles.length > 0) {
         const codes = [];
@@ -91,18 +62,70 @@ function extractStylesheets(fileName, snapshot, htmlDocument, ast) {
     return embeddedCSSFiles;
 }
 exports.extractStylesheets = extractStylesheets;
-// TODO: Provide completion for classes and IDs
-function collectClassesAndIdsFromDocument(ast) {
-    const classesAndIds = [];
+/**
+ * Find all embedded styles in a document.
+ * Embedded styles are styles that are defined in `<style>` tags.
+ */
+function findEmbeddedStyles(fileName, snapshot, roots) {
+    const embeddedCSSFiles = [];
+    let cssIndex = 0;
+    getEmbeddedCSSInNodes(roots);
+    function getEmbeddedCSSInNodes(nodes) {
+        for (const [_, node] of nodes.entries()) {
+            if (node.tag === 'style' &&
+                node.startTagEnd !== undefined &&
+                node.endTagStart !== undefined) {
+                const styleText = snapshot.getText(node.startTagEnd, node.endTagStart);
+                embeddedCSSFiles.push({
+                    fileName: fileName + `.${cssIndex}.css`,
+                    kind: language_core_1.FileKind.TextFile,
+                    snapshot: {
+                        getText: (start, end) => styleText.substring(start, end),
+                        getLength: () => styleText.length,
+                        getChangeRange: () => undefined,
+                    },
+                    codegenStacks: [],
+                    mappings: [
+                        {
+                            sourceRange: [node.startTagEnd, node.endTagStart],
+                            generatedRange: [0, styleText.length],
+                            data: language_core_1.FileRangeCapabilities.full,
+                        },
+                    ],
+                    capabilities: {
+                        diagnostic: false,
+                        documentSymbol: true,
+                        foldingRange: true,
+                        documentFormatting: false,
+                    },
+                    embeddedFiles: [],
+                });
+                cssIndex++;
+            }
+            if (node.children)
+                getEmbeddedCSSInNodes(node.children);
+        }
+    }
+    return embeddedCSSFiles;
+}
+/**
+ * Find all inline styles using the Astro AST
+ * Inline styles are styles that are defined in the `style` attribute of an element.
+ * TODO: Merge this with `findEmbeddedCSS`? Unlike scripts, there's no scoping being done here, so merging all of it in
+ * the same virtual file is possible, though it might make mapping more tricky.
+ */
+function findInlineStyles(ast) {
+    const styleAttrs = [];
+    // `@astrojs/compiler`'s `walk` method is async, so we can't use it here. Arf
     function walkDown(parent) {
         if (!parent.children)
             return;
         parent.children.forEach((child) => {
             if (utils_1.is.element(child)) {
-                const classOrIDAttributes = child.attributes
-                    .filter((attr) => attr.kind === 'quoted' && (attr.name === 'class' || attr.name === 'id'))
-                    .flatMap((attr) => attr.value.split(' '));
-                classesAndIds.push(...classOrIDAttributes);
+                const styleAttribute = child.attributes.find((attr) => attr.name === 'style' && attr.kind === 'quoted');
+                if (styleAttribute && styleAttribute.position) {
+                    styleAttrs.push(styleAttribute);
+                }
             }
             if (utils_1.is.parent(child)) {
                 walkDown(child);
@@ -110,21 +133,20 @@ function collectClassesAndIdsFromDocument(ast) {
         });
     }
     walkDown(ast);
-    return classesAndIds;
+    return styleAttrs;
 }
-exports.collectClassesAndIdsFromDocument = collectClassesAndIdsFromDocument;
-function findInlineStyles(ast) {
-    const styleAttrs = [];
-    // `@astrojs/compiler`'s `walk` method is async, so we can't use it here. Arf
+// TODO: Provide completion for classes and IDs
+function collectClassesAndIdsFromDocument(ast) {
+    const classesAndIds = [];
     function walkDown(parent) {
         if (!parent.children)
             return;
         parent.children.forEach((child) => {
             if (utils_1.is.element(child)) {
-                const styleAttribute = child.attributes.find((attr) => attr.name === 'style' && attr.kind === 'quoted');
-                if (styleAttribute && styleAttribute.position) {
-                    styleAttrs.push(styleAttribute);
-                }
+                const classOrIDAttributes = child.attributes
+                    .filter((attr) => attr.kind === 'quoted' && (attr.name === 'class' || attr.name === 'id'))
+                    .flatMap((attr) => attr.value.split(' '));
+                classesAndIds.push(...classOrIDAttributes);
             }
             if (utils_1.is.parent(child)) {
                 walkDown(child);
@@ -132,7 +154,7 @@ function findInlineStyles(ast) {
         });
     }
     walkDown(ast);
-    return styleAttrs;
+    return classesAndIds;
 }
-exports.findInlineStyles = findInlineStyles;
+exports.collectClassesAndIdsFromDocument = collectClassesAndIdsFromDocument;
 //# sourceMappingURL=parseCSS.js.map

package/dist/core/parseJS.d.ts CHANGED Viewed

@@ -1,7 +1,5 @@
 import type { ParseResult } from '@astrojs/compiler/types';
 import { VirtualFile } from '@volar/language-core';
 import type ts from 'typescript/lib/tsserverlibrary';
-import type { HTMLDocument, Node } from 'vscode-html-languageservice';
+import type { HTMLDocument } from 'vscode-html-languageservice';
 export declare function extractScriptTags(fileName: string, snapshot: ts.IScriptSnapshot, htmlDocument: HTMLDocument, ast: ParseResult['ast']): VirtualFile[];
-export declare function isIsolatedScriptTag(scriptTag: Node): boolean;
-export declare const htmlEventAttributes: string[];

package/dist/core/parseJS.js CHANGED Viewed

@@ -23,92 +23,104 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.htmlEventAttributes = exports.isIsolatedScriptTag = exports.extractScriptTags = void 0;
+exports.extractScriptTags = void 0;
 const utils_1 = require("@astrojs/compiler/utils");
 const language_core_1 = require("@volar/language-core");
 const SourceMap = __importStar(require("@volar/source-map"));
 const muggle = __importStar(require("muggle-string"));
 function extractScriptTags(fileName, snapshot, htmlDocument, ast) {
-    const embeddedJSFiles = [];
-    for (const [index, root] of htmlDocument.roots.entries()) {
-        if (root.tag === 'script' &&
-            root.startTagEnd !== undefined &&
-            root.endTagStart !== undefined &&
-            isIsolatedScriptTag(root)) {
-            const scriptText = snapshot.getText(root.startTagEnd, root.endTagStart);
-            embeddedJSFiles.push({
-                fileName: fileName + `.${index}.mts`,
-                kind: language_core_1.FileKind.TypeScriptHostFile,
-                snapshot: {
-                    getText: (start, end) => scriptText.substring(start, end),
-                    getLength: () => scriptText.length,
-                    getChangeRange: () => undefined,
-                },
-                codegenStacks: [],
-                mappings: [
-                    {
-                        sourceRange: [root.startTagEnd, root.endTagStart],
-                        generatedRange: [0, scriptText.length],
-                        data: language_core_1.FileRangeCapabilities.full,
-                    },
-                ],
-                capabilities: {
-                    diagnostic: true,
-                    codeAction: true,
-                    inlayHint: true,
-                    documentSymbol: true,
-                    foldingRange: true,
-                    documentFormatting: false,
-                },
-                embeddedFiles: [],
-            });
-        }
-    }
+    const embeddedJSFiles = findIsolatedScripts(fileName, snapshot, htmlDocument.roots);
     const javascriptContexts = [
         ...findInlineScripts(htmlDocument, snapshot),
         ...findEventAttributes(ast),
     ].sort((a, b) => a.startOffset - b.startOffset);
     if (javascriptContexts.length > 0) {
-        const codes = [];
-        for (const javascriptContext of javascriptContexts) {
-            codes.push([
-                javascriptContext.content,
-                undefined,
-                javascriptContext.startOffset,
-                language_core_1.FileRangeCapabilities.full,
-            ]);
-        }
-        const mappings = SourceMap.buildMappings(codes);
-        const text = muggle.toString(codes);
-        embeddedJSFiles.push({
-            fileName: fileName + '.inline.mjs',
-            codegenStacks: [],
-            snapshot: {
-                getText: (start, end) => text.substring(start, end),
-                getLength: () => text.length,
-                getChangeRange: () => undefined,
-            },
-            capabilities: language_core_1.FileCapabilities.full,
-            embeddedFiles: [],
-            kind: language_core_1.FileKind.TypeScriptHostFile,
-            mappings,
-        });
+        embeddedJSFiles.push(mergeJSContexts(fileName, javascriptContexts));
     }
     return embeddedJSFiles;
 }
 exports.extractScriptTags = extractScriptTags;
+function isIsolatedScriptTag(scriptTag) {
+    // Using any kind of attributes on the script tag will disable hoisting
+    if (!scriptTag.attributes ||
+        (scriptTag.attributes && Object.entries(scriptTag.attributes).length === 0) ||
+        scriptTag.attributes['type']?.includes('module')) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Get all the isolated scripts in the HTML document
+ * Isolated scripts are scripts that are hoisted by Astro and as such, are isolated from the rest of the code because of the implicit `type="module"`
+ * All the isolated scripts are passed to the TypeScript language server as separate `.mts` files.
+ */
+function findIsolatedScripts(fileName, snapshot, roots) {
+    const embeddedScripts = [];
+    let scriptIndex = 0;
+    getEmbeddedScriptsInNodes(roots);
+    function getEmbeddedScriptsInNodes(nodes) {
+        for (const [_, node] of nodes.entries()) {
+            if (node.tag === 'script' &&
+                node.startTagEnd !== undefined &&
+                node.endTagStart !== undefined &&
+                isIsolatedScriptTag(node)) {
+                const scriptText = snapshot.getText(node.startTagEnd, node.endTagStart);
+                embeddedScripts.push({
+                    fileName: fileName + `.${scriptIndex}.mts`,
+                    kind: language_core_1.FileKind.TypeScriptHostFile,
+                    snapshot: {
+                        getText: (start, end) => scriptText.substring(start, end),
+                        getLength: () => scriptText.length,
+                        getChangeRange: () => undefined,
+                    },
+                    codegenStacks: [],
+                    mappings: [
+                        {
+                            sourceRange: [node.startTagEnd, node.endTagStart],
+                            generatedRange: [0, scriptText.length],
+                            data: language_core_1.FileRangeCapabilities.full,
+                        },
+                    ],
+                    capabilities: {
+                        diagnostic: true,
+                        codeAction: true,
+                        inlayHint: true,
+                        documentSymbol: true,
+                        foldingRange: true,
+                        documentFormatting: false,
+                    },
+                    embeddedFiles: [],
+                });
+                scriptIndex++;
+            }
+            if (node.children)
+                getEmbeddedScriptsInNodes(node.children);
+        }
+    }
+    return embeddedScripts;
+}
+/**
+ * Get all the inline scripts in the HTML document
+ * Inline scripts are scripts that are not hoisted by Astro and as such, are isolated from the rest of the code.
+ * All the inline scripts are concatenated into a single `.mjs` file and passed to the TypeScript language server.
+ */
 function findInlineScripts(htmlDocument, snapshot) {
     const inlineScripts = [];
-    for (const [_, root] of htmlDocument.roots.entries()) {
-        if (root.tag === 'script' &&
-            root.startTagEnd !== undefined &&
-            root.endTagStart !== undefined &&
-            !isIsolatedScriptTag(root)) {
-            const scriptText = snapshot.getText(root.startTagEnd, root.endTagStart);
-            inlineScripts.push({
-                startOffset: root.startTagEnd,
-                content: scriptText,
-            });
+    getInlineScriptsInNodes(htmlDocument.roots);
+    function getInlineScriptsInNodes(nodes) {
+        for (const [_, node] of nodes.entries()) {
+            if (node.tag === 'script' &&
+                node.startTagEnd !== undefined &&
+                node.endTagStart !== undefined &&
+                !isIsolatedScriptTag(node)) {
+                const scriptText = snapshot.getText(node.startTagEnd, node.endTagStart);
+                inlineScripts.push({
+                    startOffset: node.startTagEnd,
+                    content: scriptText,
+                });
+            }
+            if (node.children)
+                getInlineScriptsInNodes(node.children);
         }
     }
     return inlineScripts;
@@ -121,7 +133,7 @@ function findEventAttributes(ast) {
             return;
         parent.children.forEach((child) => {
             if (utils_1.is.element(child)) {
-                const eventAttribute = child.attributes.find((attr) => exports.htmlEventAttributes.includes(attr.name) && attr.kind === 'quoted');
+                const eventAttribute = child.attributes.find((attr) => htmlEventAttributes.includes(attr.name) && attr.kind === 'quoted');
                 if (eventAttribute && eventAttribute.position) {
                     eventAttrs.push({
                         content: eventAttribute.value,
@@ -137,17 +149,36 @@ function findEventAttributes(ast) {
     walkDown(ast);
     return eventAttrs;
 }
-function isIsolatedScriptTag(scriptTag) {
-    // Using any kind of attributes on the script tag will disable hoisting
-    if (!scriptTag.attributes ||
-        (scriptTag.attributes && Object.entries(scriptTag.attributes).length === 0) ||
-        scriptTag.attributes['type']?.includes('module')) {
-        return true;
+/**
+ * Merge all the inline and non-hoisted scripts into a single `.mjs` file
+ */
+function mergeJSContexts(fileName, javascriptContexts) {
+    const codes = [];
+    for (const javascriptContext of javascriptContexts) {
+        codes.push([
+            javascriptContext.content,
+            undefined,
+            javascriptContext.startOffset,
+            language_core_1.FileRangeCapabilities.full,
+        ]);
     }
-    return false;
+    const mappings = SourceMap.buildMappings(codes);
+    const text = muggle.toString(codes);
+    return {
+        fileName: fileName + '.inline.mjs',
+        codegenStacks: [],
+        snapshot: {
+            getText: (start, end) => text.substring(start, end),
+            getLength: () => text.length,
+            getChangeRange: () => undefined,
+        },
+        capabilities: language_core_1.FileCapabilities.full,
+        embeddedFiles: [],
+        kind: language_core_1.FileKind.TypeScriptHostFile,
+        mappings,
+    };
 }
-exports.isIsolatedScriptTag = isIsolatedScriptTag;
-exports.htmlEventAttributes = [
+const htmlEventAttributes = [
     'onabort',
     'onafterprint',
     'onauxclick',

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/language-server",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "author": "withastro",
   "license": "MIT",
   "repository": {