Convert FontManager to TS

package.json

@@ -126,6 +126,7 @@
     "@types/classnames": "^2.2.11",
     "@types/commonmark": "^0.27.4",
     "@types/counterpart": "^0.18.1",
+    "@types/css-font-loading-module": "^0.0.6",
     "@types/diff-match-patch": "^1.0.32",
     "@types/flux": "^3.1.9",
     "@types/jest": "^26.0.20",

src/@types/global.d.ts

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
+// Load types for the WG CSS Font Loading APIs https://github.com/Microsoft/TypeScript/issues/13569
+import "@types/css-font-loading-module";
 import "@types/modernizr";
 
 import ContentMessages from "../ContentMessages";

src/utils/FontManager.js → src/utils/FontManager.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,7 +21,7 @@ limitations under the License.
  * MIT license
  */
 
-function safariVersionCheck(ua) {
+function safariVersionCheck(ua: string): boolean {
     console.log("Browser is Safari - checking version for COLR support");
     try {
         const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/);
@@ -44,7 +44,7 @@ function safariVersionCheck(ua) {
     return false;
 }
 
-async function isColrFontSupported() {
+async function isColrFontSupported(): Promise<boolean> {
     console.log("Checking for COLR support");
 
     const { userAgent } = navigator;
@@ -101,7 +101,7 @@ async function isColrFontSupported() {
 }
 
 let colrFontCheckStarted = false;
-export async function fixupColorFonts() {
+export async function fixupColorFonts(): Promise<void> {
     if (colrFontCheckStarted) {
         return;
     }
@@ -112,14 +112,14 @@ export async function fixupColorFonts() {
         document.fonts.add(new FontFace("Twemoji", path, {}));
         // For at least Chrome on Windows 10, we have to explictly add extra
         // weights for the emoji to appear in bold messages, etc.
-        document.fonts.add(new FontFace("Twemoji", path, { weight: 600 }));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: 700 }));
+        document.fonts.add(new FontFace("Twemoji", path, { weight: "600" }));
+        document.fonts.add(new FontFace("Twemoji", path, { weight: "700" }));
     } else {
         // fall back to SBIX, generated via https://github.com/matrix-org/twemoji-colr/tree/matthew/sbix
         const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`;
         document.fonts.add(new FontFace("Twemoji", path, {}));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: 600 }));
-        document.fonts.add(new FontFace("Twemoji", path, { weight: 700 }));
+        document.fonts.add(new FontFace("Twemoji", path, { weight: "600" }));
+        document.fonts.add(new FontFace("Twemoji", path, { weight: "700" }));
     }
     // ...and if SBIX is not supported, the browser will fall back to one of the native fonts specified.
 }

yarn.lock

@@ -1488,6 +1488,11 @@
   resolved "https://registry.yarnpkg.com/@types/counterpart/-/counterpart-0.18.1.tgz#b1b784d9e54d9879f0a8cb12f2caedab65430fe8"
   integrity sha512-PRuFlBBkvdDOtxlIASzTmkEFar+S66Ek48NVVTWMUjtJAdn5vyMSN8y6IZIoIymGpR36q2nZbIYazBWyFxL+IQ==
 
+"@types/css-font-loading-module@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.6.tgz#1ac3417ed31eeb953134d29b56bca921644b87c0"
+  integrity sha512-MBvSMSxXFtIukyXRU3HhzL369rIWaqMVQD5kmDCYIFFD6Fe3lJ4c9UnLD02MLdTp7Z6ti7rO3SQtuDo7C80mmw==
+
 "@types/diff-match-patch@^1.0.32":
   version "1.0.32"
   resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f"