From 2bd61bca8775aaf8b1f65251ff8ae6c9c0fdeea0 Mon Sep 17 00:00:00 2001 From: Anton Nikolaev Date: Thu, 27 Feb 2020 05:28:02 -0800 Subject: [PATCH] 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 | 16 +-- src/ui/components/Glyph.tsx | 2 +- .../{icons.node.js => icons.node.ts} | 0 src/utils/{icons.js => icons.ts} | 132 ++++++++++-------- 4 files changed, 79 insertions(+), 71 deletions(-) rename src/utils/__tests__/{icons.node.js => icons.node.ts} (100%) rename src/utils/{icons.js => icons.ts} (59%) diff --git a/scripts/build-release.ts b/scripts/build-release.ts index 4afdd423d..f0113801a 100755 --- a/scripts/build-release.ts +++ b/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; diff --git a/src/ui/components/Glyph.tsx b/src/ui/components/Glyph.tsx index 90f710233..d22031cef 100644 --- a/src/ui/components/Glyph.tsx +++ b/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; diff --git a/src/utils/__tests__/icons.node.js b/src/utils/__tests__/icons.node.ts similarity index 100% rename from src/utils/__tests__/icons.node.js rename to src/utils/__tests__/icons.node.ts diff --git a/src/utils/icons.js b/src/utils/icons.ts similarity index 59% rename from src/utils/icons.js rename to src/utils/icons.ts index 10bb45931..2e2b3998e 100644 --- a/src/utils/icons.js +++ b/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); +}