Add ESLint to the build

.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  env: {
+    node: true,
+    browser: true,
+    es2022: true,
+  },
+  parserOptions: {
+    sourceType: "module",
+  },
+  plugins: ["html"],
+  extends: ["eslint:recommended"],
+  rules: {
+    // This will produce an error for console.log or console.warn in production
+    // and a warning in development.
+    "no-console": [
+      process.env.NODE_ENV === "production" ? "error" : "warn",
+      { allow: ["error", "debug"] },
+    ],
+  },
+  ignorePatterns: ["app/static/third-party", "playwright-report", "venv"],
+};

app/static/js/app.js

@@ -6,9 +6,15 @@ import {
 } from "./keycodes.js";
 import { KeyboardState } from "./keyboardstate.js";
 import { sendKeystroke } from "./keystrokes.js";
+import { isPasteOverlayShowing, showPasteOverlay } from "./paste.js";
 import * as settings from "./settings.js";
 import { OverlayTracker } from "./overlays.js";
 
+// Suppress ESLint warnings about undefined variables.
+// `io` is defined by the Socket.IO library, which is globally available on the
+// page.
+/* global io */
+
 const socket = io();
 let connectedToServer = false;
 
@@ -73,7 +79,7 @@ function processKeystroke(keystroke) {
   // sends dummy keydown events with a keycode of 229. Ignore these events, as
   // there's no way to map it to a real key.
   if (keystroke.keyCode === 229) {
-    resolve({});
+    return;
   }
   const keystrokeHistoryEvent = keystrokeHistory.push(keystroke.key);
   const result = sendKeystroke(socket, keystroke);
@@ -409,7 +415,7 @@ document
     document.getElementById("app").focus();
   });
 const shutdownDialog = document.getElementById("shutdown-dialog");
-shutdownDialog.addEventListener("shutdown-started", (evt) => {
+shutdownDialog.addEventListener("shutdown-started", () => {
   // Hide the interactive elements of the page during shutdown.
   for (const elementId of ["remote-screen", "on-screen-keyboard"]) {
     document.getElementById(elementId).style.display = "none";

app/static/js/controllers.js

@@ -70,6 +70,7 @@ export async function getLatestRelease() {
     .then(processJsonResponse)
     .then((updateInfo) => {
       ["version", "kind", "data"].forEach((field) => {
+        // eslint-disable-next-line no-prototype-builtins
         if (!updateInfo.hasOwnProperty(field)) {
           throw new ControllerError(`Missing expected ${field} field`);
         }
@@ -88,6 +89,7 @@ export async function getVersion() {
   })
     .then(processJsonResponse)
     .then((versionResponse) => {
+      // eslint-disable-next-line no-prototype-builtins
       if (!versionResponse.hasOwnProperty("version")) {
         throw new ControllerError("Missing expected version field");
       }
@@ -151,9 +153,11 @@ export async function getUpdateStatus() {
   })
     .then(processJsonResponse)
     .then((data) => {
+      // eslint-disable-next-line no-prototype-builtins
       if (!data.hasOwnProperty("status")) {
         throw new ControllerError("Missing expected status field");
       }
+      // eslint-disable-next-line no-prototype-builtins
       if (!data.hasOwnProperty("updateError")) {
         throw new ControllerError("Missing expected updateError field");
       }
@@ -171,6 +175,7 @@ export async function determineHostname() {
   })
     .then(processJsonResponse)
     .then((hostnameResponse) => {
+      // eslint-disable-next-line no-prototype-builtins
       if (!hostnameResponse.hasOwnProperty("hostname")) {
         throw new ControllerError("Missing expected hostname field");
       }
@@ -234,6 +239,7 @@ export async function textToShareableUrl(text) {
   })
     .then(processJsonResponse)
     .then((data) => {
+      // eslint-disable-next-line no-prototype-builtins
       if (!data.hasOwnProperty("id")) {
         throw new ControllerError("Missing expected id field");
       }
@@ -260,6 +266,7 @@ export async function getVideoSettings() {
         "h264Bitrate",
         "defaultH264Bitrate",
       ].forEach((field) => {
+        // eslint-disable-next-line no-prototype-builtins
         if (!data.hasOwnProperty(field)) {
           throw new ControllerError(`Missing expected ${field} field`);
         }

app/static/js/keycodes.js

@@ -101,7 +101,7 @@ export function findKeyCode(character, browserLanguage) {
 
 // Returns true if the text character requires a shift key.
 export function requiresShiftKey(character) {
-  const shiftedPattern = /^[A-Z¬!"£$%^&\*()_\+{}|<>\?:@~#]/;
+  const shiftedPattern = /^[A-Z¬!"£$%^&*()_+{}|<>?:@~#]/;
   return shiftedPattern.test(character);
 }
 

app/static/js/paste.js

@@ -1,16 +1,16 @@
-pasteOverlay = document.getElementById("paste-overlay");
+const pasteOverlay = document.getElementById("paste-overlay");
 pasteOverlay.addEventListener("keydown", onPasteOverlayKeyDown);
 pasteOverlay.addEventListener("paste", onPaste);
 pasteOverlay.addEventListener("click", () => {
   hidePasteOverlay();
 });
 
 // TODO(jotaen) Migrate this to use `OverlayTracker`
-function isPasteOverlayShowing() {
+export function isPasteOverlayShowing() {
   return pasteOverlay.getAttribute("show") === "true";
 }
 
-function showPasteOverlay() {
+export function showPasteOverlay() {
   pasteOverlay.setAttribute("show", "true");
   placeCaretInPasteOverlay();
 }

app/static/js/settings.js

@@ -1,7 +1,9 @@
 let settings = {};
 try {
   settings = JSON.parse(localStorage.getItem("settings"));
-} catch {}
+} catch {
+  // Ignore errors.
+}
 
 const defaults = {
   isKeyHistoryEnabled: true,

app/static/js/updatelogs.js

@@ -1,3 +1,8 @@
+// Suppress ESLint warnings about undefined variables.
+// `io` is defined by the Socket.IO library, which is globally available on the
+// page.
+/* global io */
+
 /**
  * Streams the TinyPilot update logs via a SocketIO connection.
  * @requires socketio

app/static/js/webrtc-video.js

@@ -15,6 +15,11 @@
  * https://github.com/tiny-pilot/ustreamer/blob/master/docs/h264.md
  */
 
+// Suppress ESLint warnings about undefined variables.
+// Janus is defined by the Janus library, which is globally available on the
+// page.
+/* global Janus */
+
 // Parameters for the setup.
 const config = {
   // Set to `true` to turn on all internal Janus logging. Make sure to set the

app/templates/custom-elements/about-dialog.html

@@ -75,7 +75,6 @@ <h3>About TinyPilot</h3>
 
   (function () {
     const template = document.querySelector("#about-dialog-template");
-    const creditBoxTemplate = document.querySelector("#credit-box-template");
 
     customElements.define(
       "about-dialog",

app/templates/custom-elements/key.html

@@ -71,7 +71,7 @@
         constructor() {
           super();
 
-          this.addEventListener("click", (evt) => {
+          this.addEventListener("click", () => {
             this.togglePressedState();
 
             // Don't send event if click removed "pressed" state

app/templates/custom-elements/remote-screen.html

@@ -170,17 +170,7 @@
           const mobileKeyboard = this.shadowRoot.getElementById(
             "mobile-keyboard-input"
           );
-          mobileKeyboard.addEventListener("input", (evt) => {
-            // Handle insertCompositionText, which mean typing in autocomplete
-            // mode. The global keydown event handler processes all other key
-            // input events.
-            if (
-              evt.inputType === "insertText" ||
-              evt.inputType === "insertCompositionText"
-            ) {
-              sendTextInput(evt.data);
-            }
-
+          mobileKeyboard.addEventListener("input", () => {
             // Force the autocomplete sequence to restart.
             mobileKeyboard.blur();
             mobileKeyboard.value = "";

app/templates/index.html

@@ -67,7 +67,6 @@
     </div>
     {% include "components/paste-overlay.html" %}
     <script src="/third-party/socket.io/3.1.3/socket.io.min.js"></script>
-    <script src="/js/paste.js"></script>
     <script type="module" src="/js/app.js"></script>
 
     {% if use_webrtc_remote_screen %}

dev-scripts/build-javascript

@@ -12,6 +12,8 @@ set -u
 # Location of app source files.
 SOURCE_DIR="app"
 
+./dev-scripts/lint-frontend
+
 # Run unit tests.
 ./node_modules/.bin/mocha \
   --recursive \

dev-scripts/lint-frontend

@@ -0,0 +1,14 @@
+#!/bin/bash
+
+# Checks for JavaScript anti-patterns.
+
+# Exit on first failure.
+set -e
+
+# Echo commands before executing them, by default to stderr.
+set -x
+
+# Exit on unset variable.
+set -u
+
+./node_modules/.bin/eslint "./**/*.js" "./**/*.html"