jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Automatically add icons to prefetch in development mode

Browse Source 
Summary:
When browing through flipper one gets random warnings about uncached icons. Since we can't predict which plugins use which icons, it is hard to keep the list in `icons.js` updated.

This diff extracts the table to a separate json file (static/icons.json) and if an icon is missing in development, it will automatically add it to the list, so that the icons will be part of the prefetch of the next build / restart

Reviewed By: jknoxville

Differential Revision: D19257253

fbshipit-source-id: c9c791d50fa5d66738d93873289fbde575f32d66
This commit is contained in:
Michel Weststrate
2020-01-02 07:51:51 -08:00
committed by Facebook Github Bot
parent 59c9a10a73
commit 85992d354d
2 changed files with 319 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/utils/icons.js
View File

@@ -16,88 +16,10 @@ const fs = require('fs');
const path = require('path'); const path = require('path');
const {remote} = require('electron'); const {remote} = require('electron');
const ICONS = { const iconsPath = fs.existsSync(path.resolve(process.cwd(), 'icons.json'))
'app-dailies': [12], ? path.resolve(process.cwd(), 'icons.json') // development
'app-react': [12], : path.resolve(process.cwd(), 'static', 'icons.json'); // build
'arrow-right': [12], const ICONS = JSON.parse(fs.readFileSync(iconsPath, {encoding: 'utf8'}));
'bell-null-outline': [12, 24],
'bell-null': [12],
'brush-paint': [12],
'building-city': [12],
'caution-octagon': [16],
'caution-triangle': [12, 16, 24],
'chevron-down-outline': [10],
'chevron-down': [8, 12],
'chevron-left': [12],
'chevron-right': [8, 12, 16],
'chevron-up': [8, 12],
'cross-circle': [12, 16, 24],
'dashboard-outline': [24],
'data-table': [16],
'dots-3-circle-outline': [16],
'face-unhappy-outline': [24],
'first-aid': [12],
'flash-default': [12],
'info-circle': [12, 16, 24],
'life-event-major': [16],
'magic-wand': [12, 20],
'magnifying-glass': [16, 20],
'minus-circle': [12],
'mobile-engagement': [16],
'news-feed': [12],
'question-circle-outline': [16],
'question-circle': [12],
'refresh-left': [16],
'share-external': [12, 16],
'star-outline': [12, 16, 24],
'star-slash': [16],
'stop-playback': [16],
'thought-bubble': [12],
'trash-outline': [16],
'triangle-down': [12],
'triangle-right': [12],
'washing-machine': [12],
'watch-tv': [12],
accessibility: [16],
apps: [12],
bell: [12],
bird: [12],
borders: [16],
box: [12],
bug: [12],
camcorder: [12, 16],
camera: [12, 16],
caution: [16],
checkmark: [16],
compose: [12],
copy: [12],
cross: [16],
dashboard: [12],
desktop: [12],
directions: [12],
download: [16],
internet: [12],
messages: [12],
mobile: [12, 16, 32],
network: [12],
pause: [16],
posts: [20],
power: [16],
profile: [12],
question: [16],
rocket: [20],
settings: [12],
share: [16],
star: [12, 16, 24],
stop: [16],
target: [12, 16],
tools: [12, 20],
translate: [12],
trash: [12, 16],
tree: [12],
trending: [12],
underline: [12],
};
// Takes a string like 'star', or 'star-outline', and converts it to // Takes a string like 'star', or 'star-outline', and converts it to
// {trimmedName: 'star', variant: 'filled'} or {trimmedName: 'star', variant: 'outline'} // {trimmedName: 'star', variant: 'filled'} or {trimmedName: 'star', variant: 'outline'}
@@ -118,7 +40,6 @@ function buildLocalIconPath(name, size, density) {
return path.join('icons', getIconFileName(icon, size, density)); return path.join('icons', getIconFileName(icon, size, density));
} }
// $FlowFixMe not using flow in this file
function buildLocalIconURL(name, size, density) { function buildLocalIconURL(name, size, density) {
const icon = getIconPartsFromName(name); const icon = getIconPartsFromName(name);
return `icons/${getIconFileName(icon, size, density)}`; return `icons/${getIconFileName(icon, size, density)}`;
@@ -137,9 +58,27 @@ function buildIconURL(name, size, density) {
typeof window !== 'undefined' && typeof window !== 'undefined' &&
(!ICONS[name] || !ICONS[name].includes(size)) (!ICONS[name] || !ICONS[name].includes(size))
) { ) {
console.warn( // From utils/isProduction
`Using uncached icon: "${name}: [${size}]" Add it to icons.js to preload it.`, const isProduction = !/node_modules[\\/]electron[\\/]/.test(
// $FlowFixMe
process.execPath || remote.process.execPath,
); );
if (!isProduction) {
const existing = ICONS[name] || (ICONS[name] = []);
if (!existing.includes(size)) {
existing.push(size);
existing.sort();
fs.writeFileSync(iconsPath, JSON.stringify(ICONS, null, 2), 'utf8');
console.warn(
`Added uncached icon "${name}: [${size}]" to /static/icons.json. Restart Flipper to apply the change.`,
);
}
} else {
console.warn(
`Using uncached icon: "${name}: [${size}]". Add it to /static/icons.json to preload it.`,
);
}
} }
return url; return url;
} }

295
static/icons.json Normal file
View File

@@ -0,0 +1,295 @@
{
"accessibility": [
16
],
"app-dailies": [
12
],
"app-react": [
12
],
"apps": [
12
],
"arrow-right": [
12
],
"bell-null-outline": [
12,
24
],
"bell-null": [
12
],
"bell": [
12
],
"bird": [
12
],
"borders": [
16
],
"box": [
12
],
"brush-paint": [
12
],
"bug": [
12
],
"building-city": [
12
],
"camcorder": [
12,
16
],
"camera": [
12,
16
],
"caution-octagon": [
16
],
"caution-triangle": [
12,
16,
24
],
"caution": [
16
],
"checkmark": [
16
],
"chevron-down-outline": [
10
],
"chevron-down": [
12,
16,
8
],
"chevron-left": [
12
],
"chevron-right": [
8,
12,
16
],
"chevron-up": [
8,
12
],
"compose": [
12
],
"copy": [
12
],
"cross-circle": [
12,
16,
24
],
"cross": [
16
],
"dashboard-outline": [
24
],
"dashboard": [
12
],
"data-table": [
16
],
"desktop": [
12
],
"directions": [
12
],
"dots-3-circle-outline": [
16
],
"download": [
16
],
"face-unhappy-outline": [
24
],
"first-aid": [
12
],
"flash-default": [
12
],
"info-circle": [
12,
16,
24
],
"internet": [
12
],
"life-event-major": [
16
],
"magic-wand": [
12,
20
],
"magnifying-glass": [
16,
20
],
"messages": [
12
],
"minus-circle": [
12
],
"mobile-engagement": [
16
],
"mobile": [
12,
16,
32
],
"network": [
12
],
"news-feed": [
12
],
"pause": [
16
],
"posts": [
20
],
"power": [
16
],
"profile": [
12
],
"question-circle-outline": [
16
],
"question-circle": [
12
],
"question": [
16
],
"refresh-left": [
16
],
"rocket": [
20
],
"settings": [
12
],
"share-external": [
12,
16
],
"share": [
16
],
"star-outline": [
12,
16,
24
],
"star-slash": [
16
],
"star": [
12,
16,
24
],
"stop-playback": [
16
],
"stop": [
16
],
"target": [
12,
16
],
"thought-bubble": [
12
],
"tools": [
12,
20
],
"translate": [
12
],
"trash-outline": [
16
],
"trash": [
12,
16
],
"tree": [
12
],
"trending": [
12
],
"triangle-down": [
12
],
"triangle-right": [
12
],
"underline": [
12
],
"washing-machine": [
12
],
"watch-tv": [
12
],
"gears-two": [
16
],
"info-cursive": [
16
],
"on-this-day": [
12
],
"zoom-out": [
16
],
"zoom-in": [
16
],
"fast-forward": [
16
],
"draft-outline": [
16
],
"gradient": [
16
],
"crop": [
16
]
}