hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Stop using sharp at runtime (#5346)

Browse Source
This commit is contained in:
Sebastian Malton 2022-05-10 08:44:22 -04:00 committed by GitHub
parent 6b097e086b
commit 9f25212f45
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 97 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -8,6 +8,7 @@ locales/**/**.js
lens.log lens.log
static/build static/build
static/types static/types
build/tray/
binaries/client/ binaries/client/
binaries/server/ binaries/server/
src/extensions/*/*.js src/extensions/*/*.js

8
Makefile
View File

@ -32,7 +32,7 @@ compile-dev: node_modules
ci-validate-dev: binaries/client build-extensions compile-dev ci-validate-dev: binaries/client build-extensions compile-dev
.PHONY: dev .PHONY: dev
dev: binaries/client build-extensions dev: binaries/client build/tray/trayIconTemplate.png build-extensions
rm -rf static/build/ rm -rf static/build/
yarn dev yarn dev
@ -53,7 +53,7 @@ integration: build
yarn integration yarn integration
.PHONY: build .PHONY: build
build: node_modules binaries/client build: node_modules binaries/client build/tray/trayIconTemplate.png
yarn run npm:fix-build-version yarn run npm:fix-build-version
$(MAKE) build-extensions -B $(MAKE) build-extensions -B
yarn run compile yarn run compile
@ -70,6 +70,9 @@ $(extension_node_modules): node_modules
$(extension_dists): src/extensions/npm/extensions/dist $(extension_node_modules) $(extension_dists): src/extensions/npm/extensions/dist $(extension_node_modules)
cd $(@:/dist=) && ../../node_modules/.bin/npm run build cd $(@:/dist=) && ../../node_modules/.bin/npm run build
build/tray/trayIconTemplate.png: node_modules
yarn ts-node ./build/generate-tray-icons.ts
.PHONY: clean-old-extensions .PHONY: clean-old-extensions
clean-old-extensions: clean-old-extensions:
find ./extensions -mindepth 1 -maxdepth 1 -type d '!' -exec test -e '{}/package.json' \; -exec rm -rf {} \; find ./extensions -mindepth 1 -maxdepth 1 -type d '!' -exec test -e '{}/package.json' \; -exec rm -rf {} \;
@ -126,6 +129,7 @@ clean: clean-npm clean-extensions
rm -rf binaries/client rm -rf binaries/client
rm -rf dist rm -rf dist
rm -rf static/build rm -rf static/build
rm -rf build/tray
rm -rf node_modules rm -rf node_modules
rm -rf site rm -rf site
rm -rf docs/extensions/api rm -rf docs/extensions/api

50
build/generate-tray-icons.ts Normal file
View File

@ -0,0 +1,50 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { readFileSync } from "fs";
import { ensureDirSync } from "fs-extra";
import { JSDOM } from "jsdom";
import path from "path";
import sharp from "sharp";
const size = Number(process.env.OUTPUT_SIZE || "16");
const outputFolder = process.env.OUTPUT_DIR || "./build/tray";
const inputFile = process.env.INPUT_SVG_PATH || "./src/renderer/components/icon/logo-lens.svg";
const svgData = readFileSync(inputFile, { encoding: "utf-8" });
const svgDom = new JSDOM(`<body>${svgData}</body>`);
const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
svgRoot.innerHTML += `<style>* {fill: white !important;}</style>`;
const lightTemplate = svgRoot.outerHTML;
svgRoot.innerHTML += `<style>* {fill: black !important;}</style>`;
const darkTemplate = svgRoot.outerHTML;
console.log("Generating tray icon pngs");
ensureDirSync(outputFolder);
Promise.allSettled([
sharp(Buffer.from(darkTemplate))
.resize({ width: size, height: size })
.png()
.toFile(path.join(outputFolder, "trayIconDarkTemplate.png")),
sharp(Buffer.from(darkTemplate))
.resize({ width: size*2, height: size*2 })
.png()
.toFile(path.join(outputFolder, "trayIconDarkTemplate@2x.png")),
sharp(Buffer.from(lightTemplate))
.resize({ width: size, height: size })
.png()
.toFile(path.join(outputFolder, "trayIconTemplate.png")),
sharp(Buffer.from(lightTemplate))
.resize({ width: size*2, height: size*2 })
.png()
.toFile(path.join(outputFolder, "trayIconTemplate@2x.png")),
])
.then(console.log)
.catch(console.error);

7
package.json
View File

@ -124,9 +124,6 @@
"rpm", "rpm",
"AppImage" "AppImage"
], ],
"asarUnpack": [
"**/node_modules/sharp/**"
],
"extraResources": [ "extraResources": [
{ {
"from": "binaries/client/linux/${arch}/kubectl", "from": "binaries/client/linux/${arch}/kubectl",
@ -263,7 +260,6 @@
"rfc6902": "^4.0.2", "rfc6902": "^4.0.2",
"selfsigned": "^2.0.1", "selfsigned": "^2.0.1",
"semver": "^7.3.7", "semver": "^7.3.7",
"sharp": "^0.30.3",
"shell-env": "^3.0.1", "shell-env": "^3.0.1",
"spdy": "^4.0.2", "spdy": "^4.0.2",
"tar": "^6.1.11", "tar": "^6.1.11",
@ -325,7 +321,7 @@
"@types/request": "^2.48.7", "@types/request": "^2.48.7",
"@types/request-promise-native": "^1.0.18", "@types/request-promise-native": "^1.0.18",
"@types/semver": "^7.3.9", "@types/semver": "^7.3.9",
"@types/sharp": "^0.30.0", "@types/sharp": "^0.30.2",
"@types/spdy": "^3.4.5", "@types/spdy": "^3.4.5",
"@types/tar": "^4.0.5", "@types/tar": "^4.0.5",
"@types/tar-stream": "^2.2.2", "@types/tar-stream": "^2.2.2",
@ -392,6 +388,7 @@
"react-window": "^1.8.6", "react-window": "^1.8.6",
"sass": "^1.51.0", "sass": "^1.51.0",
"sass-loader": "^12.6.0", "sass-loader": "^12.6.0",
"sharp": "^0.30.4",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"tailwindcss": "^3.0.23", "tailwindcss": "^3.0.23",
"tar-stream": "^2.2.0", "tar-stream": "^2.2.0",

2
src/main/index.ts
View File

@ -305,7 +305,7 @@ async function main(di: DiContainer) {
onQuitCleanup.push( onQuitCleanup.push(
initMenu(applicationMenuItems), initMenu(applicationMenuItems),
await initTray(windowManager, trayMenuItems, navigateToPreferences), initTray(windowManager, trayMenuItems, navigateToPreferences),
() => ShellSession.cleanup(), () => ShellSession.cleanup(),
); );

77
src/main/tray/tray.ts
View File

@ -4,22 +4,19 @@
*/ */
import packageInfo from "../../../package.json"; import packageInfo from "../../../package.json";
import type { NativeImage } from "electron"; import { Menu, Tray } from "electron";
import { Menu, nativeImage, nativeTheme, Tray } from "electron";
import type { IComputedValue } from "mobx"; import type { IComputedValue } from "mobx";
import { autorun } from "mobx"; import { autorun } from "mobx";
import { showAbout } from "../menu/menu"; import { showAbout } from "../menu/menu";
import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater"; import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
import type { WindowManager } from "../window-manager"; import type { WindowManager } from "../window-manager";
import logger from "../logger"; import logger from "../logger";
import { isWindows, productName } from "../../common/vars"; import { isDevelopment, isWindows, productName, staticFilesDirectory } from "../../common/vars";
import { exitApp } from "../exit-app"; import { exitApp } from "../exit-app";
import type { Disposer } from "../../common/utils"; import type { Disposer } from "../../common/utils";
import { base64, disposer, getOrInsertWithAsync, toJS } from "../../common/utils"; import { disposer, toJS } from "../../common/utils";
import type { TrayMenuRegistration } from "./tray-menu-registration"; import type { TrayMenuRegistration } from "./tray-menu-registration";
import sharp from "sharp"; import path from "path";
import LogoLens from "../../renderer/components/icon/logo-lens.svg";
import { JSDOM } from "jsdom";
const TRAY_LOG_PREFIX = "[TRAY]"; const TRAY_LOG_PREFIX = "[TRAY]";
@ -27,69 +24,25 @@ const TRAY_LOG_PREFIX = "[TRAY]";
// note: instance of Tray should be saved somewhere, otherwise it disappears // note: instance of Tray should be saved somewhere, otherwise it disappears
export let tray: Tray; export let tray: Tray;
interface CreateTrayIconArgs { function getTrayIconPath(): string {
shouldUseDarkColors: boolean; return path.resolve(
size: number; staticFilesDirectory,
sourceSvg: string; isDevelopment ? "../build/tray" : "icons", // copied within electron-builder extras
"trayIconTemplate.png",
);
} }
const trayIcons = new Map<boolean, NativeImage>(); export function initTray(
async function createTrayIcon({ shouldUseDarkColors, size, sourceSvg }: CreateTrayIconArgs): Promise<NativeImage> {
return getOrInsertWithAsync(trayIcons, shouldUseDarkColors, async () => {
const trayIconColor = shouldUseDarkColors ? "white" : "black"; // Invert to show contrast
const parsedSvg = base64.decode(sourceSvg.split("base64,")[1]);
const svgDom = new JSDOM(`<body>${parsedSvg}</body>`);
const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`;
const iconBuffer = await sharp(Buffer.from(svgRoot.outerHTML))
.resize({ width: size, height: size })
.png()
.toBuffer();
return nativeImage.createFromBuffer(iconBuffer);
});
}
function createCurrentTrayIcon() {
return createTrayIcon({
shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
size: 16,
sourceSvg: LogoLens,
});
}
function watchShouldUseDarkColors(tray: Tray): Disposer {
let prevShouldUseDarkColors = nativeTheme.shouldUseDarkColors;
const onUpdated = () => {
if (prevShouldUseDarkColors !== nativeTheme.shouldUseDarkColors) {
prevShouldUseDarkColors = nativeTheme.shouldUseDarkColors;
createCurrentTrayIcon()
.then(img => tray.setImage(img));
}
};
nativeTheme.on("updated", onUpdated);
return () => nativeTheme.off("updated", onUpdated);
}
export async function initTray(
windowManager: WindowManager, windowManager: WindowManager,
trayMenuItems: IComputedValue<TrayMenuRegistration[]>, trayMenuItems: IComputedValue<TrayMenuRegistration[]>,
navigateToPreferences: () => void, navigateToPreferences: () => void,
): Promise<Disposer> { ): Disposer {
const icon = await createCurrentTrayIcon(); const icon = getTrayIconPath();
const dispose = disposer();
tray = new Tray(icon); tray = new Tray(icon);
tray.setToolTip(packageInfo.description); tray.setToolTip(packageInfo.description);
tray.setIgnoreDoubleClickEvents(true); tray.setIgnoreDoubleClickEvents(true);
dispose.push(watchShouldUseDarkColors(tray));
if (isWindows) { if (isWindows) {
tray.on("click", () => { tray.on("click", () => {
windowManager windowManager
@ -98,7 +51,7 @@ export async function initTray(
}); });
} }
dispose.push( return disposer(
autorun(() => { autorun(() => {
try { try {
const menu = createTrayMenu(windowManager, toJS(trayMenuItems.get()), navigateToPreferences); const menu = createTrayMenu(windowManager, toJS(trayMenuItems.get()), navigateToPreferences);
@ -113,8 +66,6 @@ export async function initTray(
tray = null; tray = null;
}, },
); );
return dispose;
} }
function getMenuItemConstructorOptions(trayItem: TrayMenuRegistration): Electron.MenuItemConstructorOptions { function getMenuItemConstructorOptions(trayItem: TrayMenuRegistration): Electron.MenuItemConstructorOptions {

46
yarn.lock
View File

@ -1975,10 +1975,10 @@
"@types/mime" "^1" "@types/mime" "^1"
"@types/node" "*" "@types/node" "*"
"@types/sharp@^0.30.0": "@types/sharp@^0.30.2":
version "0.30.0" version "0.30.2"
resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.30.0.tgz#58cb016c8fdc558b4c5771ad1f3668336685c843" resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.30.2.tgz#df5ff34140b3bad165482e6f3d26b08e42a0503a"
integrity sha512-bZ0Y/JVlrOyqwlBMJ2taEgnwFavjLnyZmLOLecmOesuG5kR2Lx9b2fM4osgfVjLJi8UlE+t3R1JzRVMxF6MbfA== integrity sha512-uLCBwjDg/BTcQit0dpNGvkIjvH3wsb8zpaJePCjvONBBSfaKHoxXBIuq1MT8DMQEfk2fKYnpC9QExCgFhkGkMQ==
dependencies: dependencies:
"@types/node" "*" "@types/node" "*"
@ -3840,9 +3840,9 @@ color-string@^1.5.2, color-string@^1.6.0:
simple-swizzle "^0.2.2" simple-swizzle "^0.2.2"
color-string@^1.9.0: color-string@^1.9.0:
version "1.9.0" version "1.9.1"
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ== integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
dependencies: dependencies:
color-name "^1.0.0" color-name "^1.0.0"
simple-swizzle "^0.2.2" simple-swizzle "^0.2.2"
@ -3863,10 +3863,10 @@ color@^3.2.1:
color-convert "^1.9.3" color-convert "^1.9.3"
color-string "^1.6.0" color-string "^1.6.0"
color@^4.2.1: color@^4.2.3:
version "4.2.1" version "4.2.3"
resolved "https://registry.yarnpkg.com/color/-/color-4.2.1.tgz#498aee5fce7fc982606c8875cab080ac0547c884" resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
integrity sha512-MFJr0uY4RvTQUKvPq7dh9grVOTYSFeXja2mBXioCGjnjJoXrAp9jJ1NQTDR73c9nwBSAQiNKloKl5zq9WB9UPw== integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
dependencies: dependencies:
color-convert "^2.0.1" color-convert "^2.0.1"
color-string "^1.9.0" color-string "^1.9.0"
@ -9377,9 +9377,9 @@ no-case@^3.0.4:
tslib "^2.0.3" tslib "^2.0.3"
node-abi@^3.3.0: node-abi@^3.3.0:
version "3.5.0" version "3.15.0"
resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.5.0.tgz#26e8b7b251c3260a5ac5ba5aef3b4345a0229248" resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.15.0.tgz#cd9ac8c58328129b49998cc6fa16aa5506152716"
integrity sha512-LtHvNIBgOy5mO8mPEUtkCW/YCRWYEKshIvqhe1GHHyXEHEB5mgICyYnAcl4qan3uFeRROErKGzatFHPf6kDxWw== integrity sha512-Ic6z/j6I9RLm4ov7npo1I48UQr2BEyFCqh6p7S1dhEx9jPO0GPGq/e2Rb7x7DroQrmiVMz/Bw1vJm9sPAl2nxA==
dependencies: dependencies:
semver "^7.3.5" semver "^7.3.5"
@ -10649,9 +10649,9 @@ postcss@^8.3.0, postcss@^8.4.12, postcss@^8.4.6, postcss@^8.4.7:
source-map-js "^1.0.2" source-map-js "^1.0.2"
prebuild-install@^7.0.1: prebuild-install@^7.0.1:
version "7.0.1" version "7.1.0"
resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.0.1.tgz#c10075727c318efe72412f333e0ef625beaf3870" resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.0.tgz#991b6ac16c81591ba40a6d5de93fb33673ac1370"
integrity sha512-QBSab31WqkyxpnMWQxubYAHR5S9B2+r81ucocew34Fkl98FhvKIF50jIJnNOBmAZfyNV7vE5T6gd3hTVWgY6tg== integrity sha512-CNcMgI1xBypOyGqjp3wOc8AAo1nMhZS3Cwd3iHIxOdAUbb+YxdNuM4Z5iIrZ8RLvOsf3F3bl7b7xGq6DjQoNYA==
dependencies: dependencies:
detect-libc "^2.0.0" detect-libc "^2.0.0"
expand-template "^2.0.3" expand-template "^2.0.3"
@ -11843,16 +11843,16 @@ shallow-clone@^3.0.0:
dependencies: dependencies:
kind-of "^6.0.2" kind-of "^6.0.2"
sharp@^0.30.3: sharp@^0.30.4:
version "0.30.3" version "0.30.4"
resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.3.tgz#315a1817423a4d1cde5119a21c99c234a7a6fb37" resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.4.tgz#73d9daa63bbc20da189c9328d75d5d395fc8fb73"
integrity sha512-rjpfJFK58ZOFSG8sxYSo3/JQb4ej095HjXp9X7gVu7gEn1aqSG8TCW29h/Rr31+PXrFADo1H/vKfw0uhMQWFtg== integrity sha512-3Onig53Y6lji4NIZo69s14mERXXY/GV++6CzOYx/Rd8bnTwbhFbL09WZd7Ag/CCnA0WxFID8tkY0QReyfL6v0Q==
dependencies: dependencies:
color "^4.2.1" color "^4.2.3"
detect-libc "^2.0.1" detect-libc "^2.0.1"
node-addon-api "^4.3.0" node-addon-api "^4.3.0"
prebuild-install "^7.0.1" prebuild-install "^7.0.1"
semver "^7.3.5" semver "^7.3.7"
simple-get "^4.0.1" simple-get "^4.0.1"
tar-fs "^2.1.1" tar-fs "^2.1.1"
tunnel-agent "^0.6.0" tunnel-agent "^0.6.0"