mopidy · jodal · Jun 21, 2023 · Jun 25, 2023 · Jun 26, 2023
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,3 @@
-.cache/
-dist/
+/.cache/
+/dist/
+/node_modules/
diff --git a/README.md b/README.md
@@ -387,7 +387,7 @@ mopidy = null;
 
 ### Web application
 
-![Web demo](examples/web.png)
+![Web demo](examples/web/screenshot.png)
 
 In the `examples/` directory of the Git repo, you can find a small demo web
 application using Mopidy.js. The left half of the screen shows what's
@@ -411,7 +411,7 @@ To run the demo application yourself:
 5. Run `npm start` to run the demo application at http://localhost:1234/.
 
 This setup uses hot module reloading, so any changes you do to the demo
-application files, `examples/web.{html,js}`, will instantly be visible in
+application files, `examples/web/*`, will instantly be visible in
 your browser. Thus, this can serve as a nice playing ground to get to know
 the capabilities of Mopidy and Mopidy.js.
 

diff --git a/examples/mpc.js → examples/mpc.ts b/examples/mpc.js → examples/mpc.ts
@@ -19,7 +19,7 @@ Output when playing:
   volume:100%   repeat: off   random: on    single: off   consume: off
 */
 
-const Mopidy = require("../src/mopidy");
+import Mopidy from "..";
 
 const mopidy = new Mopidy({
   autoConnect: false,

diff --git a/examples/web/app.css b/examples/web/app.css
@@ -0,0 +1,92 @@
+html,
+body {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+body {
+  background: #333;
+  color: #ccc;
+  font-family: "Roboto", "Open Sans", sans-serif;
+  font-size: 1.2rem;
+  line-height: 1.4;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-content: stretch;
+  height: 100%;
+}
+
+.player {
+  grid-column: 1;
+  padding: 2rem;
+
+  font-weight: 300;
+  text-align: center;
+}
+
+.event-log {
+  grid-column: 2;
+  margin: 0;
+  padding: 1rem;
+  max-height: 100vh;
+  overflow: auto;
+
+  background: #444;
+  font-family: "Ubuntu Sans Mono", "Open Sans Mono", monospace;
+  font-size: 0.7rem;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: 1.4rem;
+  font-weight: 300;
+}
+
+button {
+  background: #444;
+  color: #ccc;
+  border: none;
+  padding: 0.4rem 0.8rem;
+}
+
+button:hover {
+  background: #555;
+}
+
+button:active,
+button.active {
+  background: #999;
+  color: #fff;
+}
+
+code {
+  padding: 0.1rem;
+}
+
+.help {
+  margin-top: 2rem;
+}
+
+.cover {
+  margin: auto;
+  max-width: 80%;
+}
+.cover img {
+  height: auto;
+  max-width: 100%;
+}
+
+.controls p {
+  display: inline-block;
+  margin: 0.5rem;
+  text-align: center;
+}
+
+.state {
+  font-size: 0.8rem;
+}
diff --git a/examples/web.js → examples/web/app.ts b/examples/web.js → examples/web/app.ts
@@ -1,8 +1,6 @@
-/* global window */
+/* global window, Mopidy */
 /* eslint no-console:off, camelcase:off */
 
-import Mopidy from "../src/mopidy";
-
 const mopidy = new Mopidy({
   webSocketUrl: "ws://localhost:6680/mopidy/ws",
 });
@@ -12,19 +10,23 @@ window.mopidy = mopidy;
 
 // Utilities
 
-function el(id) {
-  return document.getElementById(id);
+function el(id: string): HTMLElement {
+  const el = document.getElementById(id);
+  if (el === null) {
+    throw new Error(`Element #${id} not found`);
+  }
+  return el;
 }
 
-function hide(selector) {
+function hide(selector: string): void {
   document.querySelectorAll(selector).forEach((e) => {
-    e.hidden = true;
+    (e as HTMLElement).hidden = true;
   });
 }
 
-function show(selector) {
+function show(selector: string): void {
   document.querySelectorAll(selector).forEach((e) => {
-    e.hidden = false;
+    (e as HTMLElement).hidden = false;
   });
 }
 
@@ -53,7 +55,7 @@ mopidy.on("websocket:outgoingMessage", (data) =>
 
 // Player
 
-function updatePlaybackState(state, timePosition) {
+function updatePlaybackState(state, timePosition?: number) {
   if (timePosition) {
     el("playback-state").innerText = `${state} at ${timePosition / 1000}s`;
   } else {
@@ -82,6 +84,9 @@ function updateCover(trackUri, images) {
 }
 
 function updateCurrentTrack(track) {
+  if (track === null) {
+    return;
+  }
   const artists = track.artists.map((a) => a.name).join(", ");
   let albumName = track.album.name;
   if (track.album.date) {

diff --git a/examples/web.html → examples/web/index.html b/examples/web.html → examples/web/index.html
@@ -2,101 +2,9 @@
 <html>
   <head>
     <title>Mopidy.js demo</title>
-    <style>
-      html,
-      body {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        height: 100%;
-      }
-
-      body {
-        background: #333;
-        color: #ccc;
-        font-family: "Roboto", "Open Sans", sans-serif;
-        font-size: 1.2rem;
-        line-height: 1.4;
-      }
-
-      .container {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        align-content: stretch;
-        height: 100%;
-      }
-
-      .player {
-        grid-column: 1;
-        padding: 2rem;
-
-        font-weight: 300;
-        text-align: center;
-      }
-
-      .event-log {
-        grid-column: 2;
-        margin: 0;
-        padding: 1rem;
-        max-height: 100vh;
-        overflow: auto;
-
-        background: #444;
-        font-family: "Ubuntu Sans Mono", "Open Sans Mono", monospace;
-        font-size: 0.7rem;
-        line-height: 1.2;
-      }
-
-      h1 {
-        font-size: 1.4rem;
-        font-weight: 300;
-      }
-
-      button {
-        background: #444;
-        color: #ccc;
-        border: none;
-        padding: 0.4rem 0.8rem;
-      }
-
-      button:hover {
-        background: #555;
-      }
-
-      button:active,
-      button.active {
-        background: #999;
-        color: #fff;
-      }
-
-      code {
-        padding: 0.1rem;
-      }
-
-      .help {
-        margin-top: 2rem;
-      }
-
-      .cover {
-        margin: auto;
-        max-width: 80%;
-      }
-      .cover img {
-        height: auto;
-        max-width: 100%;
-      }
-
-      .controls p {
-        display: inline-block;
-        margin: 0.5rem;
-        text-align: center;
-      }
-
-      .state {
-        font-size: 0.8rem;
-      }
-    </style>
-    <script src="web.js"></script>
+    <link rel="stylesheet" href="app.css">
+    <script type="module" src="mopidy.umd.js"></script>
+    <script type="module" src="app.js"></script>
     <script
       defer
       src="https://use.fontawesome.com/releases/v5.4.1/js/all.js"

diff --git a/examples/web.png → examples/web/screenshot.png b/examples/web.png → examples/web/screenshot.png
diff --git a/jest.config.js b/jest.config.js
@@ -1,17 +1,21 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   projects: [
     {
       displayName: "Browser tests",
+      preset: "ts-jest",
       testEnvironment: "jsdom",
       setupFilesAfterEnv: ["jest-extended"],
     },
     {
       displayName: "Node tests",
+      preset: "ts-jest",
       testEnvironment: "node",
       setupFilesAfterEnv: ["jest-extended"],
     },
     {
       displayName: "ESLint",
+      preset: "ts-jest",
       runner: "jest-runner-eslint",
       testMatch: ["**/*.js"],
       testPathIgnorePatterns: ["/dist/", "/node_modules/"],