Lint HBS JS templates

This updates eslint to lint on the toc.js.hbs file. This file uses a
small amount of hbs templating which eslint can't handle. This adds a
hacky preprocessor which will strips out the handlebars tags so that the
file can be linted.

Author: ehuss

crates/mdbook-html/front-end/templates/toc.js.hbs

@@ -10,61 +10,65 @@ class MDBookSidebarScrollbox extends HTMLElement {
     connectedCallback() {
         this.innerHTML = '{{#toc}}{{/toc}}';
         // Set the current, active page, and reveal it if it's hidden
-        let current_page = document.location.href.toString().split("#")[0].split("?")[0];
-        if (current_page.endsWith("/")) {
-            current_page += "index.html";
+        let current_page = document.location.href.toString().split('#')[0].split('?')[0];
+        if (current_page.endsWith('/')) {
+            current_page += 'index.html';
         }
-        var links = Array.prototype.slice.call(this.querySelectorAll("a"));
-        var l = links.length;
-        for (var i = 0; i < l; ++i) {
-            var link = links[i];
-            var href = link.getAttribute("href");
-            if (href && !href.startsWith("#") && !/^(?:[a-z+]+:)?\/\//.test(href)) {
+        const links = Array.prototype.slice.call(this.querySelectorAll('a'));
+        const l = links.length;
+        for (let i = 0; i < l; ++i) {
+            const link = links[i];
+            const href = link.getAttribute('href');
+            if (href && !href.startsWith('#') && !/^(?:[a-z+]+:)?\/\//.test(href)) {
                 link.href = path_to_root + href;
             }
-            // The "index" page is supposed to alias the first chapter in the book.
-            if (link.href === current_page || (i === 0 && path_to_root === "" && current_page.endsWith("/index.html"))) {
-                link.classList.add("active");
-                var parent = link.parentElement;
-                if (parent && parent.classList.contains("chapter-item")) {
-                    parent.classList.add("expanded");
+            // The 'index' page is supposed to alias the first chapter in the book.
+            if (link.href === current_page
+                || i === 0
+                && path_to_root === ''
+                && current_page.endsWith('/index.html')) {
+                link.classList.add('active');
+                let parent = link.parentElement;
+                if (parent && parent.classList.contains('chapter-item')) {
+                    parent.classList.add('expanded');
                 }
                 while (parent) {
-                    if (parent.tagName === "LI" && parent.previousElementSibling) {
-                        if (parent.previousElementSibling.classList.contains("chapter-item")) {
-                            parent.previousElementSibling.classList.add("expanded");
+                    if (parent.tagName === 'LI' && parent.previousElementSibling) {
+                        if (parent.previousElementSibling.classList.contains('chapter-item')) {
+                            parent.previousElementSibling.classList.add('expanded');
                         }
                     }
                     parent = parent.parentElement;
                 }
             }
         }
         // Track and set sidebar scroll position
-        this.addEventListener('click', function(e) {
+        this.addEventListener('click', e => {
             if (e.target.tagName === 'A') {
                 sessionStorage.setItem('sidebar-scroll', this.scrollTop);
             }
         }, { passive: true });
-        var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
+        const sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
         sessionStorage.removeItem('sidebar-scroll');
         if (sidebarScrollTop) {
             // preserve sidebar scroll position when navigating via links within sidebar
             this.scrollTop = sidebarScrollTop;
         } else {
-            // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
-            var activeSection = document.querySelector('#mdbook-sidebar .active');
+            // scroll sidebar to current active section when navigating via
+            // 'next/previous chapter' buttons
+            const activeSection = document.querySelector('#mdbook-sidebar .active');
             if (activeSection) {
                 activeSection.scrollIntoView({ block: 'center' });
             }
         }
         // Toggle buttons
-        var sidebarAnchorToggles = document.querySelectorAll('#mdbook-sidebar a.toggle');
+        const sidebarAnchorToggles = document.querySelectorAll('#mdbook-sidebar a.toggle');
         function toggleSection(ev) {
             ev.currentTarget.parentElement.classList.toggle('expanded');
         }
-        Array.from(sidebarAnchorToggles).forEach(function (el) {
+        Array.from(sidebarAnchorToggles).forEach(el => {
             el.addEventListener('click', toggleSection);
         });
     }
 }
-window.customElements.define("mdbook-sidebar-scrollbox", MDBookSidebarScrollbox);
+window.customElements.define('mdbook-sidebar-scrollbox', MDBookSidebarScrollbox);

eslint.config.mjs

@@ -1,5 +1,27 @@
 import { defineConfig, globalIgnores } from "eslint/config";
 
+// Custom preprocessor to strip Handlebars templates.
+const handlebarsPreprocessor = {
+    processors: {
+        "handlebars-js": {
+            preprocess(text, filename) {
+                if (filename.endsWith('.hbs')) {
+                    // This is a really dumb strip, which will likely not work
+                    // for more complex expressions, but for our use is good
+                    // enough for now.
+                    return [text.replace(/\{\{.*?\}\}/g, '')];
+                }
+                return [text];
+            },
+            postprocess(messages, filename) {
+                // Ideally this would update the locations so that they would
+                // compensate for the removed ranges.
+                return [].concat(...messages);
+            },
+        },
+    },
+};
+
 export default defineConfig([
     globalIgnores(["**/**min.js", "**/highlight.js", "**/playground_editor/*"]),
     {
@@ -69,4 +91,8 @@ export default defineConfig([
             eqeqeq: "error",
         },
     },
+    {
+        files: ["**/*.js.hbs"],
+        processor: handlebarsPreprocessor.processors["handlebars-js"],
+    },
 ]);

package.json

@@ -4,7 +4,7 @@
     "eslint": "^9.34.0"
   },
   "scripts": {
-    "lint": "eslint --no-warn-ignored crates/mdbook-html/front-end/*js crates/mdbook-html/front-end/**/*js",
+    "lint": "eslint --no-warn-ignored crates/mdbook-html/front-end/*js crates/mdbook-html/front-end/**/*js crates/mdbook-html/front-end/**/*js.hbs",
     "lint-fix": "eslint --fix crates/mdbook-html/front-end/*js crates/mdbook-html/front-end/**/*js"
   }
 }