html language service integration

Author: abose

package-lock.json

@@ -35,6 +35,7 @@
   ],
   "devDependencies": {
     "vscode-css-languageservice": "^6.0.0",
+    "vscode-html-languageservice": "^5.2.0",
     "shx": "^0.3.4",
     "@babel/core": "^7.18.0",
     "@babel/preset-env": "^7.18.0",

package.json

@@ -0,0 +1,29 @@
+import * as cssLangService from 'vscode-css-languageservice';
+
+const service = cssLangService.getCSSLanguageService();
+export const CSS_MODES = {
+    CSS: "css",
+    LESS: "less",
+    SCSS: "scss"
+};
+
+function getTextDocument(text, languageID, filePath = "file://placeholder.css") {
+    return cssLangService.TextDocument.create(filePath, languageID, 1, text);
+}
+
+/**
+ * Given a text, returns all the CSS selectors as an array.
+ * @param {string} text
+ * @param {string} cssMode
+ * @param {string} filePath - the path will be used to figure out relative urls.
+ * @return {Array[string]} all css selectors in the file as an array of strings
+ */
+export function getAllSymbols(text, cssMode, filePath) {
+    const textDocument = getTextDocument(text, cssMode, filePath);
+    const stylesheet = service.parseStylesheet(textDocument);
+    const output = [];
+    for(let symbol of service.findDocumentSymbols(textDocument, stylesheet)) {
+        output.push(symbol.name);
+    }
+    return output;
+}

src/css-ls.js

@@ -0,0 +1,43 @@
+import * as htmlLangService from 'vscode-html-languageservice';
+
+const service = htmlLangService.getLanguageService();
+export const HTML_MODES = {
+    HTML: "html",
+    XHTML: "xhtml",
+    HTM: "htm",
+    PHP: "php",
+};
+
+function getTextDocument(text, languageID, filePath = "file:///placeholder.html") {
+    return htmlLangService.TextDocument.create(filePath, languageID, 1, text);
+}
+
+// Properly setup DocumentContext with resolveReference function
+function getLocalLinkDocumentContext() {
+    return {
+        resolveReference: (ref) => { // the second argument base is unused, base is the textDocument url
+            // we return the links as i, won't resolve relative to the text document base
+            return ref;
+        }
+    };
+}
+
+/**
+ * Given a text, returns all links in the file as an array of strings
+ * @param {string} text
+ * @param {string} htmlMode
+ * @param {string} filePath - the path will be used to figure out relative urls.
+ * @return {Array[string]} all file links in the file as an array of strings
+ */
+export function getAllDocumentLinks(text, htmlMode, filePath) {
+    const textDocument = getTextDocument(text, htmlMode, filePath);
+    const documentContext = getLocalLinkDocumentContext(); // textDocument.uri
+    const documentLinks = service.findDocumentLinks(textDocument, documentContext);
+    const linksArray = [];
+    for(let link of documentLinks){
+        if(link.target){
+            linksArray.push(link.target);
+        }
+    }
+    return linksArray;
+}

src/html-ls.js

@@ -1,34 +1,12 @@
-import * as cssLangService from 'vscode-css-languageservice';
-
-const service = cssLangService.getCSSLanguageService();
-const CSS_MODES = {
-    CSS: "css",
-    LESS: "less",
-    SCSS: "scss"
-};
-
-function getTextDocument(text, languageID, filePath = "file://placeholder.css") {
-    return cssLangService.TextDocument.create(filePath, languageID, 1, text);
-}
-
-/**
- * Given a text, returns all the CSS selectors as an array.
- * @param {string} text
- * @param {string} cssMode
- * @param {string} filePath - the path will be used to figure out relative urls.
- * @return {Array[string]} all css selectors in the file as an array of strings
- */
-function getAllSymbols(text, cssMode, filePath) {
-    const textDocument = getTextDocument(text, cssMode, filePath);
-    const stylesheet = service.parseStylesheet(textDocument);
-    const output = [];
-    for(let symbol of service.findDocumentSymbols(textDocument, stylesheet)) {
-        output.push(symbol.name);
-    }
-    return output;
-}
+import {getAllSymbols, CSS_MODES} from "./css-ls";
+import {HTML_MODES, getAllDocumentLinks} from "./html-ls";
 
 self.CSSLanguageService = {
     getAllSymbols,
     CSS_MODES
 };
+
+self.HTMLLanguageService = {
+    getAllDocumentLinks,
+    HTML_MODES
+};

src/worker.js

@@ -64,4 +64,13 @@ describe(`web worker CSS Language tests`, function () {
         const symbols = output.symbols;
         expect(symbols).to.deep.equal(["#header",".navigation",".logo","& .phcode"]);
     });
+
+    it(`Should getAllSymbols get all scss selectors`, async function () {
+        messageFromWorker = null;
+        const text = await (await fetch("test-files/css-tests/c.scss")).text();
+        worker.postMessage({command: `getAllSymbols`, text, cssMode: "SCSS", filePath: "file:///c.scss"});
+        let output = await waitForWorkerMessage(`getAllSymbols`, 1000);
+        const symbols = output.symbols;
+        expect(symbols).to.deep.equal(['.info', '.alert', '#success']);
+    });
 });

test/test-css.worker.js

@@ -1,7 +1,7 @@
 /* global*/
 
-importScripts("dist/language-worker.js");
-// importScripts("dist/language-worker-debug.js"); // uncomment to debug
+// importScripts("dist/language-worker.js");
+importScripts("dist/language-worker-debug.js"); // uncomment to debug
 
 function workerOK() {
     if(self.CSSLanguageService){

test/worker-task.js

@@ -3,6 +3,11 @@ const path = require('path');
 
 module.exports = {
     entry: './src/worker',
+    resolve: {
+        fallback: {
+            "path": require.resolve('path-browserify')
+        }
+    },
     output: {
         filename: 'language-worker.js',
         path: path.resolve(__dirname, 'dist'),