Set up eslint

.github/workflows/pr.yml

@@ -38,6 +38,27 @@ jobs:
           docker cp $(docker create --name tc publish-links-index:latest):/app/.artifacts/publish ./.artifacts && docker rm tc
           tree .artifacts
           stat .artifacts/docs-lambda-index-publisher/release_linux-x64/bootstrap
+
+  lint:
+    runs-on: ubuntu-latest
+    defaults: 
+      run: 
+        working-directory: src/Elastic.Markdown
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          cache: npm
+          cache-dependency-path: src/Elastic.Markdown/package-lock.json
+          node-version-file: .nvmrc
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
 
   build:
     runs-on: ${{ matrix.os }}

src/Elastic.Markdown/Assets/copybutton.css

@@ -39,14 +39,6 @@ div.highlight  {
 	opacity: 1;
 }
 
-.highlight button.copybtn:hover {
-    /*background-color: rgb(235, 235, 235);*/
-}
-
-.highlight button.copybtn:active {
-    /*background-color: rgb(187, 187, 187);*/
-}
-
 /**
  * A minimal CSS-only tooltip copied from:
  *   https://codepen.io/mildrenben/pen/rVBrpK
@@ -58,9 +50,6 @@ div.highlight  {
  .o-tooltip--left {
   position: relative;
  }
-
- .o-tooltip--left.success:after {
- }
 
  .o-tooltip--left:after {
     opacity: 0;

src/Elastic.Markdown/Assets/copybutton.ts

@@ -61,28 +61,28 @@ const messages = {
   }
 }
 
-let locale = 'en'
+const locale = 'en'
 if( document.documentElement.lang !== undefined
     && messages[document.documentElement.lang] !== undefined ) {
   locale = document.documentElement.lang
 }
 
-let doc_url_root = DOCUMENTATION_OPTIONS.URL_ROOT;
+const doc_url_root = DOCUMENTATION_OPTIONS.URL_ROOT;
 if (doc_url_root == '#') {
     doc_url_root = '';
 }
 
 /**
  * SVG files for our copy buttons
  */
-let iconCheck = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#22863a" fill="none" stroke-linecap="round" stroke-linejoin="round">
+const iconCheck = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-check" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#22863a" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <title>${messages[locale]['copy_success']}</title>
   <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
   <path d="M5 12l5 5l10 -10" />
 </svg>`
 
 // If the user specified their own SVG use that, otherwise use the default
-let iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+const iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
 </svg>
 `;
@@ -95,22 +95,6 @@ if (!iconCopy) {
 </svg>`
 }
 
-/**
- * Set up copy/paste for code blocks
- */
-
-const runWhenDOMLoaded = cb => {
-  if (document.readyState != 'loading') {
-    cb()
-  } else if (document.addEventListener) {
-    document.addEventListener('DOMContentLoaded', cb)
-  } else {
-    document.attachEvent('onreadystatechange', function() {
-      if (document.readyState == 'complete') cb()
-    })
-  }
-}
-
 const codeCellId = index => `codecell${index}`
 
 // Clears selected text since ClipboardJS will select the text when copying
@@ -125,8 +109,8 @@ const clearSelection = () => {
 // Changes tooltip text for a moment, then changes it back
 // We want the timeout of our `success` class to be a bit shorter than the
 // tooltip and icon change, so that we can hide the icon before changing back.
-var timeoutIcon = 1500;
-var timeoutSuccessClass = 1500;
+const timeoutIcon = 1500;
+const timeoutSuccessClass = 1500;
 
 const temporarilyChangeTooltip = (el, oldText, newText) => {
   el.setAttribute('data-tooltip', newText)
@@ -152,7 +136,7 @@ const addCopyButtonToCodeCells = () => {
   const codeCells = document.querySelectorAll(COPYBUTTON_SELECTOR)
   codeCells.forEach((codeCell, index) => {
 	if (codeCell.id) {
-	  return
+		return
 	}
 
     const id = codeCellId(index)
@@ -169,30 +153,21 @@ function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
-/**
- * Removes excluded text from a Node.
- *
- * @param {Node} target Node to filter.
- * @param {string[]} excludes CSS selector of nodes to exclude.
- * @returns {DOMString} Text from `target` with text removed.
- */
 function filterText(target, excludes) {
     const clone = target.cloneNode(true);  // clone as to not modify the live DOM
-    excludes.forEach(exclude => {
-      clone.querySelectorAll(excludes).forEach(node => node.remove());
-    })
+	clone.querySelectorAll(excludes).forEach(node => node.remove());
     return clone.innerText;
 }
 
 // Callback when a copy button is clicked. Will be passed the node that was clicked
 // should then grab the text and replace pieces of text that shouldn't be used in output
 function formatCopyText(textContent, copybuttonPromptText, isRegexp = false, onlyCopyPromptLines = true, removePrompts = true, copyEmptyLines = true, lineContinuationChar = "", hereDocDelim = "") {
-    var regexp;
-    var match;
+    let regexp;
+    let match;
 
     // Do we check for line continuation characters and "HERE-documents"?
-    var useLineCont = !!lineContinuationChar
-    var useHereDoc = !!hereDocDelim
+    const useLineCont = !!lineContinuationChar
+    const useHereDoc = !!hereDocDelim
 
     // create regexp to capture prompt and remaining line
     if (isRegexp) {
@@ -202,9 +177,9 @@ function formatCopyText(textContent, copybuttonPromptText, isRegexp = false, onl
     }
 
     const outputLines = [];
-    var promptFound = false;
-    var gotLineCont = false;
-    var gotHereDoc = false;
+    const promptFound = false;
+    const gotLineCont = false;
+    const gotHereDoc = false;
     const lineGotPrompt = [];
     for (const line of textContent.split('\n')) {
         match = line.match(regexp)
@@ -239,11 +214,11 @@ function formatCopyText(textContent, copybuttonPromptText, isRegexp = false, onl
 }
 
 
-var copyTargetText = (trigger) => {
-  var target = document.querySelector(trigger.attributes['data-clipboard-target'].value);
+const copyTargetText = (trigger) => {
+  const target = document.querySelector(trigger.attributes['data-clipboard-target'].value);
   // get filtered text
-  let excludes = ['.code-callout', '.linenos', '.language-apiheader'];
-  let text = Array.from(target.querySelectorAll('code'))
+  const excludes = ['.code-callout', '.linenos', '.language-apiheader'];
+  const text = Array.from(target.querySelectorAll('code'))
     .map(code => filterText(code, excludes))
     .join('\n');
   return formatCopyText(text, '', false, true, true, true, '', '')

src/Elastic.Markdown/Assets/hljs-merge-html-plugin.js

@@ -129,7 +129,6 @@ export const mergeHTMLPlugin = (function () {
       function attributeString(attr) {
         return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"';
       }
-      // @ts-ignore
       result += '<' + tag(node) + [].map.call(node.attributes, attributeString).join('') + '>';
     }
 

src/Elastic.Markdown/Assets/hljs.ts

@@ -88,7 +88,7 @@ hljs.registerLanguage('apiheader', function() {
 			hljs.HASH_COMMENT_MODE,
 			{
 				className: "subst", // (pathname: path1/path2/dothis) color #ab5656
-				begin: /(?<=(?:\/|GET |POST |PUT |DELETE |HEAD |OPTIONS |PATH))[^?\n\r\/]+/,
+				begin: /(?<=(?:\/|GET |POST |PUT |DELETE |HEAD |OPTIONS |PATH))[^?\n\r/]+/,
 			}
 		],		}
 })

src/Elastic.Markdown/Assets/main.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import "htmx.org"
 import "htmx-ext-preload"
 import "htmx-ext-head-support"

src/Elastic.Markdown/Assets/tabs.ts

@@ -5,21 +5,12 @@
 // Extra JS capability for selected tabs to be synced
 // The selection is stored in local storage so that it persists across page loads.
 
-/**
- * @type {Record<string, HTMLElement[]>}
- */
-let sd_id_to_elements = {};
+const sd_id_to_elements = {};
 const storageKeyPrefix = "sphinx-design-tab-id-";
 
-/**
- * Create a key for a tab element.
- * @param {HTMLElement} el - The tab element.
- * @returns {[string, string, string] | null} - The key.
- *
- */
-function create_key(el) {
-  let syncId = el.getAttribute("data-sync-id");
-  let syncGroup = el.getAttribute("data-sync-group");
+function create_key(el: HTMLElement) {
+  const syncId = el.getAttribute("data-sync-id");
+  const syncGroup = el.getAttribute("data-sync-group");
   if (!syncId || !syncGroup) return null;
   return [syncGroup, syncId, syncGroup + "--" + syncId];
 }
@@ -31,17 +22,15 @@ function create_key(el) {
 function ready() {
   // Find all tabs with sync data
 
-  /** @type {string[]} */
-  let groups = [];
+  const groups = [];
 
   document.querySelectorAll(".tabs-label").forEach((label) => {
     if (label instanceof HTMLElement) {
-      let data = create_key(label);
+      const data = create_key(label);
       if (data) {
-        let [group, id, key] = data;
+        const [group, id, key] = data;
 
         // add click event listener
-        // @ts-ignore
         label.onclick = onSDLabelClick;
 
         // store map of key to elements
@@ -62,11 +51,10 @@ function ready() {
         }
 
         // Check is a specific tab has been selected previously
-        let previousId = window.sessionStorage.getItem(
+        const previousId = window.sessionStorage.getItem(
           storageKeyPrefix + group
         );
         if (previousId === id) {
-          // @ts-ignore
           label.previousElementSibling.checked = true;
         }
       }
@@ -80,12 +68,11 @@ function ready() {
  * @this {HTMLElement} - The element that was clicked.
  */
 function onSDLabelClick() {
-  let data = create_key(this);
+  const data = create_key(this);
   if (!data) return;
-  let [group, id, key] = data;
+  const [group, id, key] = data;
   for (const label of sd_id_to_elements[key]) {
     if (label === this) continue;
-    // @ts-ignore
     label.previousElementSibling.checked = true;
   }
   window.sessionStorage.setItem(storageKeyPrefix + group, id);

src/Elastic.Markdown/eslint.config.mjs

@@ -0,0 +1,15 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import globals from "globals";
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+
+export default defineConfig([
+	globalIgnores([
+		"_static/main.js",
+	]),
+	{ files: ["**/*.{js,mjs,cjs,ts}"] }, 
+	{ files: ["**/*.{js,mjs,cjs,ts}"], languageOptions: { globals: globals.browser } }, 
+	{ files: ["**/*.{js,mjs,cjs,ts}"], plugins: { js }, extends: ["js/recommended"] }, 
+	tseslint.configs.recommended,
+]);