Goodbye JavaScript, hello TypeScript (#31)

* Draft refactor

* Node version file for node version managers such as fnm

* Package web-ext update

* Show stats graphs again

* Bargraphs colours are strings not numbers

* Popups accessor type fixes

* Better tooltip accessors and formatters type

* Fixed scatterplot radius types

* Bars colour can be strings

* Partial data entry type fixes

* Tooltip accessors only need to take in part of the data

* Mouse move function typed and avoid re-indexing data many times

* Color scale acts over strings not numbers

* Ignore missing library types on import

* Stat bar narrower types

* Stats bar media storage import path fixed and undefined stats handling improved

* Add id to type properties

* Fixed media storage imports

* Request import stats/lines work with basic events

* Add types to calculation functions

* Handle line and/or char stats not existing when deleting lines

* Fixed line types

* Chrome run command fixed

* Update version

* Use let or const instead of var

* Replaced several any's with actual types

* Fix menu option assignment so they don't get reset to defaults

* Improve menu option types

* Use browser tab type instead of any

* Define message actions argument interface instead of using any

* Fix scatterplot and line types

* Better graph types

* Extract axis component into the places it was used for clarity and types

* Makeshift window types used for detecting Chrome

* Set Svelte Tailwind style lang to CSS where @tailwind or @apply are used

.node-version

@@ -0,0 +1 @@
+v22.6.0

README.md

@@ -83,7 +83,7 @@ Each time you make a change run `npm run build` (this will take 2x longer since
 
 To have live browser extension updates:
 * **Firefox** - `npm run web-ext-firefox -- run`
-* **Chrome** - `npm run web-ext-chrome -- run --target chromium`
+* **Chrome** - `npm run web-ext-chrome -- run -- --target chromium`
 
 To build the extension ready for release:
 * **Firefox** - `npm run web-ext-firefox -- build`

esbuild.mjs

@@ -28,7 +28,7 @@ fs.cpSync("fonts", `${build_firefox_dir}/fonts/`, { recursive: true });
 
 const options = {
   entryPoints: [
-    "src/background.js",
+    "src/background.ts",
     "src/vn/tracker_inject.ts",
     "src/mokuro/mokuro_inject.ts",
     "src/ttu/ttu_inject.ts",

manifest-chrome.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "exSTATic",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAuwn/wsj43FLW2rxrACsMQK+58H2Cjkwez105WIDVfdj6SUiTIXdzBO2lT+tSZmoLx9HRbULqg0Aq4z8yg/mSHIjrQPPB/Gr1QFexWSAyvqkyJsePxwjpybo1aotuVo/fesMyHyBsenH7xNxSpsSbldA8GbVFks3rQc5gQOexhe1PXOA5GlmBOhIPO2vrITk60X5Ysp1VwGhx1OlUF9IixcH2uHvWm4n15AsINPH+OFx3mJw7xS+GqCL2bYP/mxepOohA8lKHKEPFtSFOBdFMtTA3tV/HEUU6G5hsS6IeQpBjzW2YTmaHD3tcK5SSdnK336AX3htYxY/O6zwErXx3PQIDAQAB",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Completely automated reading statistics and tracking",
   "icons": {
     "100": "docs/favicon_100x100.png",

manifest-firefox.json

@@ -7,7 +7,7 @@
       "id": "{8a4101fc-747b-42b0-8f48-184df8cba172}"
     }
   },  
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Completely automated reading statistics and tracking",
   "icons": {
     "100": "docs/favicon_100x100.png",

package.json

@@ -8,6 +8,9 @@
     "@d3fc/d3fc-axis": "^3.0.6",
     "@tailwindcss/forms": "^0.5.6",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/d3": "^7.4.3",
+    "@types/papaparse": "^5.3.14",
+    "@types/webextension-polyfill": "^0.10.7",
     "async-mutex": "^0.4.0",
     "autoprefixer": "^10.4.16",
     "d3": "^7.8.5",
@@ -27,4 +30,4 @@
   "devDependencies": {
     "web-ext": "^0.0.1"
   }
-}
+}

src/background.js → src/background.ts

@@ -3,20 +3,35 @@ console.log("exSTATic")
 import { message_action } from "./messaging/message_actions"
 import { connectionClosed, connectionOpened, dataFetched, messagingConnected } from "./messaging/socket_actions"
 
+import * as browser from "webextension-polyfill"
+import type { Tabs } from "webextension-polyfill"
 import ReconnectingWebSocket from "reconnecting-websocket"
 
-var browser = require("webextension-polyfill")
+declare global {
+    interface Window {
+        chrome: {
+            runtime: object | undefined
+            webstore: object | undefined
+        } | undefined
+    }
+    interface DocumentEventMap {
+    		media_changed: CustomEvent
+    		new_line: CustomEvent
+            "ttsu:page.change": CustomEvent
+    }
+}
 
-const reloadTab = async (tab) => {
+const reloadTab = async (tab: Tabs.Tab) => {
+    if (!tab.id) return;
     browser.scripting.executeScript({
         target: { tabId: tab.id },
         func: () => window.location.reload()
     })
 }
 
 // Run a function with each tab that has a content script
-const runOnContentScripts = async (func) => {
-    for (const content_script of browser.runtime.getManifest().content_scripts) {
+const runOnContentScripts = async (func: (tab: Tabs.Tab) => void) => {
+    for (const content_script of browser.runtime.getManifest().content_scripts ?? []) {
         for (const tab of await browser.tabs.query({url: content_script.matches}))
             func(tab)
     }
@@ -72,6 +87,6 @@ let socket = new ReconnectingWebSocket("ws://localhost:9001")
 socket.addEventListener("open", connectionOpened)
 socket.addEventListener("close", connectionClosed)
 socket.addEventListener("error", connectionClosed)
-socket.addEventListener("message", dataFetched)
+socket.addEventListener("message", (event: MessageEvent) => {dataFetched(event)})
 
 browser.runtime.onConnect.addListener(messagingConnected)