Switch to TypeScript

.eslintrc.json

@@ -7,26 +7,49 @@
   "extends": [
     "airbnb",
     "airbnb/hooks",
+    "plugin:import/typescript",
     "plugin:jest/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
   "globals": {
     "COMMITHASH": "readonly"
   },
   "plugins": [
-    "jest",
-    "prettier",
     "simple-import-sort"
   ],
   "rules": {
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        "prefer": "type-imports"
+      }
+    ],
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/no-use-before-define": "error",
+    "import/extensions": [
+      "error",
+      {
+        "js": "never",
+        "json": "always",
+        "ts": "never"
+      }
+    ],
     "import/no-extraneous-dependencies": [
       "error",
       {
         "devDependencies": [
           "webpack.config.babel.js",
           "src/**/*.test.jsx",
+          "src/**/*.test.tsx",
           "src/**/*.test.js",
+          "src/**/*.test.ts",
           "test/**/*.js",
+          "test/**/*.ts",
           "script/*"
         ]
       }
@@ -37,8 +60,22 @@
         "specialLink": ["to"]
       }
     ],
-    "react/jsx-props-no-spreading": "off",
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "no-use-before-define": "off",
     "prettier/prettier": "error",
+    "react/jsx-filename-extension": [
+      "error",
+      {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "simple-import-sort/exports": "error",
     "simple-import-sort/imports": "error"
   }
 }

.prettierrc.json

@@ -1,3 +1 @@
-{
-  "singleQuote": true
-}
+{}

__mocks__/webextension-polyfill.ts

@@ -0,0 +1 @@
+export default { runtime: { openOptionsPage: jest.fn() } };

babel.config.js

@@ -1,3 +1,7 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react",
+  ],
 };

jest.config.js

@@ -2,16 +2,16 @@
 // https://jestjs.io/docs/en/configuration.html
 
 module.exports = {
-  coverageDirectory: 'coverage',
-  collectCoverageFrom: ['<rootDir>/src/**/*.{js,jsx}'],
+  coverageDirectory: "coverage",
+  collectCoverageFrom: ["<rootDir>/src/**/*.{js,jsx,ts,tsx}"],
   globals: {
-    COMMITHASH: 'test-commit-hash',
+    COMMITHASH: "test-commit-hash",
   },
-  setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFilesAfterEnv: ["<rootDir>/test/setup.js"],
+  snapshotSerializers: ["enzyme-to-json/serializer"],
   transform: {
-    '^.+\\.jsx?$': 'babel-jest',
-    '(?!^.+\\.jsx?$)': '<rootDir>/test/transforms/file.js',
+    "^.+\\.(jsx?|tsx?)$": "babel-jest",
+    "(?!^.+\\.(jsx?|tsx?)$)": "<rootDir>/test/transforms/file.js",
   },
-  transformIgnorePatterns: ['node_modules/(?!ky)'],
+  transformIgnorePatterns: ["node_modules/(?!ky)"],
 };

package.json

@@ -18,7 +18,7 @@
     "bundle:chrome": "cross-env BUNDLE=true run-s build:chrome",
     "bundle:firefox": "cross-env BUNDLE=true run-s build:firefox",
     "sign": "web-ext sign --source-dir ./dist/firefox --artifacts-dir ./dist --channel=unlisted",
-    "lint": "eslint --ignore-path .gitignore --ext .js,.jsx .",
+    "lint": "eslint --ignore-path .gitignore --ext .js,.jsx,.ts,.tsx .",
     "stylelint": "stylelint --ignore-path .gitignore --syntax scss 'src/**/*.scss'",
     "test": "jest",
     "checks": "run-s stylelint lint test"
@@ -27,7 +27,13 @@
     "@babel/core": "^7.13.16",
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
+    "@babel/preset-typescript": "^7.15.0",
     "@babel/register": "^7.13.16",
+    "@types/enzyme": "^3.10.9",
+    "@types/jest": "^27.0.1",
+    "@types/jsdom": "^16.2.13",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
     "babel-jest": "^26.6.3",
     "babel-loader": "8.2.2",
     "chrome-launcher": "^0.13.4",
@@ -68,6 +74,8 @@
     "stylelint-config-standard": "^21.0.0",
     "stylelint-junit-formatter": "^0.2.2",
     "stylelint-prettier": "^1.2.0",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.2",
     "web-ext": "6.2.0",
     "webpack": "5.34.0",
     "webpack-build-notifier": "2.1.1",
@@ -77,12 +85,16 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
+    "@types/react": "^17.0.19",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.1.8",
+    "@types/speakingurl": "^13.0.3",
+    "@types/webextension-polyfill": "^0.8.0",
     "bootstrap": "4.6.0",
     "copy-text-to-clipboard": "^2.2.0",
     "ky": "^0.24.0",
     "micro-match": "^1.0.1",
     "prettier": "^2.2.1",
-    "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router": "5.2.0",

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: [
-    ['postcss-preset-env', {}],
-    ['cssnano', { preset: 'default' }],
+    ["postcss-preset-env", {}],
+    ["cssnano", { preset: "default" }],
   ],
 };

src/additional.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+
+declare module "*.svg" {
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+
+  const src: string;
+  export default src;
+}
+
+// Unfortunately there are no type definitions for "micro-match" at the moment
+declare module "micro-match";
+
+// This global const is defined by Webpack DefinePlugin
+declare const COMMITHASH: string;

src/background/index.ts

@@ -0,0 +1,9 @@
+import browser from "webextension-polyfill";
+
+async function getTickets() {
+  const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+  const results = await browser.tabs.sendMessage(tab.id!, { tickets: true }); // eslint-disable-line @typescript-eslint/no-non-null-assertion
+  return results;
+}
+
+Object.assign(window, { getTickets });

src/content/index.ts

@@ -0,0 +1,14 @@
+import browser from "webextension-polyfill";
+
+import stdsearch from "../core/search";
+
+if (window === window.top) {
+  browser.runtime.onMessage.addListener((req) => {
+    if (req.tickets) {
+      const url = new URL(window.location.toString());
+      return stdsearch(url, document);
+    }
+
+    return undefined;
+  });
+}

src/core/__snapshots__/client.test.js.snap → src/core/__snapshots__/client.test.ts.snap

@@ -26,7 +26,7 @@ Array [
         "content-type": "application/json; charset=utf-8",
       },
       "prefixUrl": "https://example.io/api",
-      "timeout": 1000,
+      "timeout": 3000,
     },
   ],
 ]

src/core/adapters/dom-helpers.ts

@@ -0,0 +1,29 @@
+export function trim(string: string | null) {
+  return string ? string.replace(/^\s+|\s+$/g, "") : null;
+}
+
+// Finders
+
+export function $find(selector: string, context: HTMLDocument | HTMLElement) {
+  return context.querySelector<HTMLElement>(selector);
+}
+
+export function $all(selector: string, context: HTMLDocument | HTMLElement) {
+  return Array.from(context.querySelectorAll<HTMLElement>(selector));
+}
+
+export function $has(selector: string, context: HTMLDocument | HTMLElement) {
+  return $find(selector, context) !== null;
+}
+
+// Properties
+
+export function $text(selector: string, context: HTMLDocument | HTMLElement) {
+  const node = $find(selector, context);
+  return node ? trim(node.textContent) : null;
+}
+
+export function $value(selector: string, context: HTMLDocument | HTMLElement) {
+  const node = $find(selector, context);
+  return node ? trim(node.getAttribute("value")) : null;
+}