Typescriptify the main process code (13/N)

Summary: Converted src/utils/icons.js to typescript

Reviewed By: passy

Differential Revision: D20076060

fbshipit-source-id: fa6309033f5de7183de7f85ac8318eec36b6bb69

scripts/build-release.ts

@@ -21,11 +21,7 @@ import {
   genMercurialRevision,
 } from './build-utils';
 import fetch from 'node-fetch';
-const {
-  ICONS,
-  buildLocalIconPath,
-  getIconURL,
-} = require('../src/utils/icons.js');
+import {ICONS, buildLocalIconPath, getIconURL} from '../src/utils/icons';
 
 function generateManifest(versionNumber: string) {
   const filePath = path.join(__dirname, '..', 'dist');
@@ -129,12 +125,16 @@ function copyStaticFolder(buildFolder: string) {
 }
 
 function downloadIcons(buildFolder: string) {
-  const iconURLs = Object.entries(ICONS).reduce((acc, [name, sizes]) => {
+  const iconURLs = Object.entries(ICONS).reduce<
+    {
+      name: string;
+      size: number;
+      density: number;
+    }[]
+  >((acc, [name, sizes]) => {
     acc.push(
       // get icons in @1x and @2x
-      // @ts-ignore
       ...sizes.map(size => ({name, size, density: 1})),
-      // @ts-ignore
       ...sizes.map(size => ({name, size, density: 2})),
     );
     return acc;

src/ui/components/Glyph.tsx

@@ -10,7 +10,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
-import {getIconURL} from '../../utils/icons.js';
+import {getIconURL} from '../../utils/icons';
 
 export type IconSize = 8 | 10 | 12 | 16 | 18 | 20 | 24 | 32;
 

src/utils/icons.ts

@@ -7,13 +7,12 @@
  * @format
  */
 
-/* eslint-disable import/no-commonjs */
+import fs from 'fs';
+import path from 'path';
+import {remote} from 'electron';
 
 const AVAILABLE_SIZES = [8, 10, 12, 16, 18, 20, 24, 32];
 const DENSITIES = [1, 1.5, 2, 3, 4];
-const fs = require('fs');
-const path = require('path');
-const {remote} = require('electron');
 
 const staticPath = path.resolve(__dirname, '..', '..', 'static');
 const appPath = remote ? remote.app.getAppPath() : staticPath;
@@ -21,41 +20,57 @@ const iconsPath = fs.existsSync(path.resolve(appPath, 'icons.json'))
   ? path.resolve(appPath, 'icons.json')
   : path.resolve(staticPath, 'icons.json');
 
-const ICONS = JSON.parse(fs.readFileSync(iconsPath, {encoding: 'utf8'}));
+export type Icons = {
+  [key: string]: number[];
+};
+
+export const ICONS: Icons = JSON.parse(
+  fs.readFileSync(iconsPath, {encoding: 'utf8'}),
+);
 
 // Takes a string like 'star', or 'star-outline', and converts it to
 // {trimmedName: 'star', variant: 'filled'} or {trimmedName: 'star', variant: 'outline'}
-function getIconPartsFromName(icon) {
+function getIconPartsFromName(
+  icon: string,
+): {trimmedName: string; variant: 'outline' | 'filled'} {
   const isOutlineVersion = icon.endsWith('-outline');
   const trimmedName = isOutlineVersion ? icon.replace('-outline', '') : icon;
   const variant = isOutlineVersion ? 'outline' : 'filled';
   return {trimmedName: trimmedName, variant: variant};
 }
 
-function getIconFileName(icon, size, density) {
+function getIconFileName(
+  icon: {trimmedName: string; variant: 'outline' | 'filled'},
+  size: number,
+  density: number,
+) {
   return `${icon.trimmedName}-${icon.variant}-${size}@${density}x.png`;
 }
 
 // $FlowFixMe not using flow in this file
-function buildLocalIconPath(name, size, density) {
+export function buildLocalIconPath(
+  name: string,
+  size: number,
+  density: number,
+) {
   const icon = getIconPartsFromName(name);
   return path.join('icons', getIconFileName(icon, size, density));
 }
 
-function buildLocalIconURL(name, size, density) {
+export function buildLocalIconURL(name: string, size: number, density: number) {
   const icon = getIconPartsFromName(name);
   return `icons/${getIconFileName(icon, size, density)}`;
 }
 
 // $FlowFixMe not using flow in this file
-function buildIconURL(name, size, density) {
+export function buildIconURL(name: string, size: number, density: number) {
   const icon = getIconPartsFromName(name);
   // eslint-disable-next-line prettier/prettier
   const url = `https://external.xx.fbcdn.net/assets/?name=${
     icon.trimmedName
-  }&variant=${
+    }&variant=${
     icon.variant
-  }&size=${size}&set=facebook_icons&density=${density}x`;
+    }&size=${size}&set=facebook_icons&density=${density}x`;
   if (
     typeof window !== 'undefined' &&
     (!ICONS[name] || !ICONS[name].includes(size))
@@ -88,7 +103,7 @@ function buildIconURL(name, size, density) {
               throw new Error(
                 // eslint-disable-next-line prettier/prettier
                 `Trying to use icon '${name}' with size ${size} and density ${density}, however the icon doesn't seem to exists at ${url}: ${
-                  res.status
+                res.status
                 }`,
               );
             }
@@ -104,59 +119,52 @@ function buildIconURL(name, size, density) {
   return url;
 }
 
-module.exports = {
-  ICONS: ICONS,
+// $FlowFixMe: not using flow in this file
+export function getIconURL(name: string, size: number, density: number) {
+  if (name.indexOf('/') > -1) {
+    return name;
+  }
 
-  buildLocalIconPath: buildLocalIconPath,
-  buildIconURL: buildIconURL,
+  let requestedSize = size;
+  if (!AVAILABLE_SIZES.includes(size)) {
+    // find the next largest size
+    const possibleSize = AVAILABLE_SIZES.find(size => {
+      return size > requestedSize;
+    });
 
-  // $FlowFixMe: not using flow in this file
-  getIconURL(name, size, density) {
-    if (name.indexOf('/') > -1) {
-      return name;
+    // set to largest size if the real size is larger than what we have
+    if (possibleSize == null) {
+      requestedSize = Math.max(...AVAILABLE_SIZES);
+    } else {
+      requestedSize = possibleSize;
     }
+  }
 
-    let requestedSize = size;
-    if (!AVAILABLE_SIZES.includes(size)) {
-      // find the next largest size
-      const possibleSize = AVAILABLE_SIZES.find(size => {
-        return size > requestedSize;
-      });
+  if (!DENSITIES.includes(density)) {
+    // find the next largest size
+    const possibleDensity = DENSITIES.find(scale => {
+      return scale > density;
+    });
 
-      // set to largest size if the real size is larger than what we have
-      if (possibleSize == null) {
-        requestedSize = Math.max(...AVAILABLE_SIZES);
-      } else {
-        requestedSize = possibleSize;
-      }
+    // set to largest size if the real size is larger than what we have
+    if (possibleDensity == null) {
+      density = Math.max(...DENSITIES);
+    } else {
+      density = possibleDensity;
     }
+  }
 
-    if (!DENSITIES.includes(density)) {
-      // find the next largest size
-      const possibleDensity = DENSITIES.find(scale => {
-        return scale > density;
-      });
-
-      // set to largest size if the real size is larger than what we have
-      if (possibleDensity == null) {
-        density = Math.max(...DENSITIES);
-      } else {
-        density = possibleDensity;
-      }
-    }
-
-    // resolve icon locally if possible
-    if (
-      remote &&
-      fs.existsSync(
-        path.join(
-          remote.app.getAppPath(),
-          buildLocalIconPath(name, size, density),
-        ),
-      )
-    ) {
-      return buildLocalIconURL(name, size, density);
-    }
-    return buildIconURL(name, requestedSize, density);
-  },
-};
+  // resolve icon locally if possible
+  if (
+    remote &&
+    fs.existsSync(
+      path.join(
+        remote.app.getAppPath(),
+        buildLocalIconPath(name, size, density),
+      ),
+    )
+  ) {
+    return buildLocalIconURL(name, size, density);
+  }
+  return buildIconURL(name, requestedSize, density);
+}