feat: html lint and problems panel and quick view ux improvements

Author: abose

docs/generatedApiDocs/utils/Metrics-API.md

@@ -85,6 +85,15 @@ Metrics.valueEvent(Metrics.EVENT_TYPE.PERFORMANCE, "startupTime", "ms", 200);
 Send all pending metrics, useful before app quit.
 Will never throw Error.
 
+## logPerformanceTime
+
+Logs the performance time taken for a specific action.
+
+### Parameters
+
+*   `action` **[string][4]** The key representing the action being measured (e.g., 'startupTime').
+*   `durationMs` **[number][5]** The duration of the action in milliseconds.
+
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function

package-lock.json

@@ -91,7 +91,7 @@
         "@fortawesome/fontawesome-free": "^6.1.2",
         "@highlightjs/cdn-assets": "^11.5.1",
         "@phcode/fs": "^3.0.0",
-        "@phcode/language-support": "^1.0.7",
+        "@phcode/language-support": "^1.1.0",
         "@pixelbrackets/gfm-stylesheet": "^1.1.0",
         "@prettier/plugin-php": "^0.22.2",
         "@uiw/file-icons": "^1.3.2",

package.json

@@ -116,6 +116,10 @@ function _serveData(getContentAPIToUse, req, res) {
                 ...defaultHeaders,
                 ...customHeaders
             };
+            if(data.textContents && !mergedHeaders['Content-Type'].includes('charset=UTF-8')) {
+                // https://github.com/orgs/phcode-dev/discussions/1676
+                mergedHeaders['Content-Type'] = `${mergedHeaders['Content-Type']};charset=UTF-8`;
+            }
             res.writeHead(200, mergedHeaders);
             if(data.textContents) {
                 res.end(data.textContents);

src-node/live-preview.js

@@ -0,0 +1,86 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ * Original work Copyright (c) 2012 - 2021 Adobe Systems Incorporated. All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+// Parts of this file is adapted from https://github.com/cfjedimaster/brackets-jshint
+
+/**
+ * Provides JSLint results via the core linting extension point
+ */
+define(function (require, exports, module) {
+
+    // Load dependent modules
+    const CodeInspection   = brackets.getModule("language/CodeInspection"),
+        Strings            = brackets.getModule("strings"),
+        EditorManager      = brackets.getModule("editor/EditorManager"),
+        IndexingWorker     = brackets.getModule("worker/IndexingWorker");
+
+    IndexingWorker.loadScriptInWorker(`${module.uri}/../worker/html-worker.js`);
+
+    function getTypeFromSeverity(sev) {
+        // https://html-validate.org/guide/api/getting-started.html
+        switch (sev) {
+        case 1:  return CodeInspection.Type.WARNING;
+        case 2:  return CodeInspection.Type.ERROR;
+        default: return CodeInspection.Type.META;
+        }
+    }
+
+    /**
+     * Run JSLint on the current document. Reports results to the main UI. Displays
+     * a gold star when no errors are found.
+     */
+    async function lintOneFile(text, fullPath) {
+        return new Promise((resolve, reject)=>{
+            IndexingWorker.execPeer("htmlLint", {
+                text,
+                filePath: fullPath
+            }).then(lintResult =>{
+                const editor = EditorManager.getActiveEditor();
+                if(!editor || editor.document.file.fullPath !== fullPath) {
+                    reject(new Error("Lint failed as  "+ Phoenix.app.getDisplayLocation(fullPath) + " is not active."));
+                    return;
+                }
+                if (lintResult && lintResult.length) {
+                    lintResult = lintResult.map(function (lintError) {
+                        return {
+                            pos: editor.posFromIndex(lintError.start),
+                            endPos: editor.posFromIndex(lintError.end),
+                            message: `${lintError.message} (${lintError.ruleId})`,
+                            type: getTypeFromSeverity(lintError.severity),
+                            moreInfoURL: lintError.ruleUrl
+                        };
+                    });
+
+                    resolve({ errors: lintResult });
+                }
+                resolve();
+            });
+        });
+    }
+
+    CodeInspection.register("html", {
+        name: Strings.HTML_LINT_NAME,
+        scanFileAsync: lintOneFile,
+        canInspect: function (_fullPath) {
+            return true; // no restrictions for now
+        }
+    });
+});

src-node/package-lock.json

@@ -40,6 +40,8 @@ define(function (require, exports, module) {
         HTMLTemplate        = require("text!template.html"),
         XHTMLTemplate       = require("text!template.xhtml");
 
+    require("./html-lint");
+
     let tags,
         attributes;
 

src/extensions/default/HTMLCodeHints/html-lint.js

@@ -0,0 +1,52 @@
+/*
+ * GNU AGPL-3.0 License
+ *
+ * Copyright (c) 2021 - present core.ai . All rights reserved.
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
+ * for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
+ *
+ */
+
+/*global WorkerComm, HTMLLanguageService*/
+
+(function () {
+    let htmlValidator = HTMLLanguageService.createHTMLValidator({
+          extends: ["html-validate:standard"]
+        });
+    async function htmlLint(params) {
+        const validatorResult = await htmlValidator.validateString(params.text, params.filePath);
+        if(!validatorResult || !validatorResult.results || !validatorResult.results.length){
+            return [];
+        }
+        const errors = [];
+        for(let result of validatorResult.results){
+            if(result.messages && result.messages.length) {
+                for(let message of result.messages){
+                    errors.push({
+                        start: message.offset,
+                        end: message.offset + (message.size || 1) - 1,
+                        severity: message.severity,
+                        message: message.message,
+                        ruleId: message.ruleId,
+                        ruleUrl: message.ruleUrl // this is a doc link for the ruleId config, not good to show
+                        // to a user who doesnt know about html validator config is.
+                    });
+                }
+            }
+        }
+        return errors;
+    }
+
+    WorkerComm.setExecHandler("htmlLint", htmlLint);
+}());

src/extensions/default/HTMLCodeHints/main.js

@@ -114,6 +114,8 @@ define(function (require, exports, module) {
                     }
                 };
             }
+            // todo , the results have a set of suggestion suggestions which we can display to user as a set of
+            //  suggestions for a line.
             return {
                 pos: { line: _0Based(lintError.line), ch: _0Based(lintError.column)},
                 endPos: {

src/extensions/default/HTMLCodeHints/worker/html-worker.js

@@ -477,7 +477,7 @@ define(function (require, exports, module) {
                     let html = Mustache.render(markdownHTMLTemplate, templateVars);
                     resolve({
                         contents: html,
-                        headers: {'Content-Type': 'text/html'},
+                        headers: {'Content-Type': 'text/html; charset=UTF-8'},
                         path: fullPath
                     });
                 })
@@ -627,6 +627,12 @@ define(function (require, exports, module) {
                     // headers: {'Content-Type': 'text/html'} // optional headers
                     response.type = 'REQUEST_RESPONSE';
                     response.requestID = requestID;
+                    if(typeof response.contents === "string"){
+                        // https://github.com/orgs/phcode-dev/discussions/1676
+                        response.headers = {
+                            'Content-Type': 'text/html;charset=UTF-8'
+                        };
+                    }
                     messageToLivePreviewTabs(response);
                 })
                 .catch(console.error);