Convert fonts package to TypeScript

packages/fonts/package.json

@@ -32,7 +32,7 @@
       "default": "./src/fonts.json"
     },
     ".": {
-      "default": "./src/index.js"
+      "default": "./src/index.ts"
     }
   },
   "exports": {
@@ -47,7 +47,8 @@
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "source": "src/index.js",
+  "tyoes": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },

packages/fonts/src/constants.js → packages/fonts/src/constants.ts

@@ -16,7 +16,7 @@
 
 // Curated Fonts list source:
 // https://github.com/googleforcreators/web-stories-wp/issues/1989#issuecomment-662253222
-export const CURATED_FONT_NAMES = [
+export const CURATED_FONT_NAMES: string[] = [
   'Karla',
   'Lato',
   'Lora',

packages/fonts/src/types.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface Font {
+  family: string;
+  variants: Array<[number, number]>;
+}

packages/fonts/src/utils/getFontCSS.js → packages/fonts/src/utils/getFontCSS.ts

@@ -17,11 +17,11 @@
 /**
  * Get the CSS font format for a given font URL.
  *
- * @param {string} src Font URL.
- * @return {string|null} Font format string or null if the font is unsupported.
+ * @param src Font URL.
+ * @return Font format string or null if the font is unsupported.
  */
-function getFontFormat(src) {
-  const fileExtension = src.split(/[#?]/)[0].split('.').pop().trim();
+function getFontFormat(src: string): string | null {
+  const fileExtension = src.split(/[#?]/)?.[0]?.split('.')?.pop()?.trim();
 
   switch (fileExtension) {
     case 'woff':
@@ -39,11 +39,11 @@ function getFontFormat(src) {
 /**
  * Get the inline stylesheet for a specific font family.
  *
- * @param {string} name Font family.
- * @param {string} src Font URL.
- * @return {string|null} Stylesheet or null if the font has an unsupported format.
+ * @param name Font family.
+ * @param src Font URL.
+ * @return Stylesheet or null if the font has an unsupported format.
  */
-function getFontCSS(name, src) {
+function getFontCSS(name: string, src: string): string | null {
   const format = getFontFormat(src);
 
   if (!format) {

packages/fonts/src/utils/getGoogleFontURL.js → packages/fonts/src/utils/getGoogleFontURL.ts

@@ -14,24 +14,29 @@
  * limitations under the License.
  */
 
+/**
+ * Internal dependencies
+ */
+import type { Font } from '../types';
+
 /**
  * Given a list of Google fonts, returns a URL to embed them.
  *
  * Uses the given list of font variants (axis tuples) to assemble the
  * axis tag list and axis tuple list that Google Fonts expects.
  *
  * @see https://developers.google.com/fonts/docs/css2
- * @param {Array<Object<{family: string, variants: Array<number, number>}>>} fonts List of font objects.
- * @param {string} [display] Valid font-display value, e.g. 'swap' or 'auto'. Default 'swap'.
- * @return {string} Google Fonts embed URL.
+ * @param fonts List of font objects.
+ * @param [display] Valid font-display value, e.g. 'swap' or 'auto'. Default 'swap'.
+ * @return Google Fonts embed URL.
  */
-function getGoogleFontURL(fonts, display = 'swap') {
+function getGoogleFontURL(fonts: Font[], display: 'swap' | 'auto' = 'swap') {
   const url = new URL('https://fonts.googleapis.com/css2');
   url.searchParams.append('display', display);
 
   for (const { family: familyName, variants = [] } of fonts) {
     // [ [ 1, 400 ], [ 0, 700 ] ] -> [ ital, wght ]
-    const axes = variants
+    const axes: string[] = variants
       .reduce((acc, [fontStyle, fontWeight]) => {
         // Uses axis names as listed on https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts.
         if (fontStyle === 1 && !acc.includes('ital')) {
@@ -41,7 +46,7 @@ function getGoogleFontURL(fonts, display = 'swap') {
           acc.push('wght');
         }
         return acc;
-      }, [])
+      }, [] as Array<'ital' | 'wght'>)
       .sort(); // Need to be sorted alphabetically.
 
     let family = familyName;

packages/fonts/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist-types"
+  },
+  "references": [{ "path": "../react" }],
+  "include": ["src/**/*"]
+}

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "references": [
+    { "path": "packages/fonts" },
     { "path": "packages/i18n" },
     { "path": "packages/media" },
     { "path": "packages/moveable" },