From 9aa815bc14925c8fdb7bffcdf5bdf65531da54e2 Mon Sep 17 00:00:00 2001 From: Roman Date: Fri, 12 Jun 2020 22:22:38 +0300 Subject: [PATCH] refactoring, split webpack configs + get rid of `electron-webpack` --- .babelrc | 4 +- package.json | 41 +- src/common/register-static.ts | 25 + src/common/vars.ts | 18 +- src/main/index.ts | 4 + src/main/router.ts | 7 +- src/main/window-manager.ts | 4 +- src/renderer/_vue/components/WhatsNewPage.vue | 9 +- src/renderer/index.tsx | 6 +- src/renderer/template.html | 3 +- src/renderer/webpack.renderer.js | 46 - tsconfig.json | 11 +- types/globals.d.ts | 5 - types/{modules.d.ts => mocks.d.ts} | 0 webpack.dll.ts | 32 + webpack.main.ts | 37 + webpack.renderer.ts | 134 ++ yarn.lock | 1350 ++--------------- 18 files changed, 407 insertions(+), 1329 deletions(-) create mode 100644 src/common/register-static.ts delete mode 100644 src/renderer/webpack.renderer.js delete mode 100644 types/globals.d.ts rename types/{modules.d.ts => mocks.d.ts} (100%) create mode 100755 webpack.dll.ts create mode 100755 webpack.main.ts create mode 100755 webpack.renderer.ts diff --git a/.babelrc b/.babelrc index f2fd4b2cbf..913ac46337 100644 --- a/.babelrc +++ b/.babelrc @@ -1,8 +1,6 @@ { "presets": [ - [ - "@babel/preset-env", {"modules": "commonjs"} - ], + "@babel/preset-env", "@babel/preset-react", "@lingui/babel-preset-react" ], diff --git a/package.json b/package.json index 8e4bf8b4d3..8350c0aa2b 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,13 @@ "version": "3.5.0-beta.1", "main": "src/main", "scripts": { - "dev": "DEBUG=true electron-webpack dev", - "compile": "yarn download-bins && yarn i18n:compile && electron-webpack compile", - "compile:main": "electron-webpack main", - "compile:renderer": "electron-webpack renderer", + "dev": "DEBUG=true concurrently yarn:dev:*", + "dev:main": "webpack-cli --watch --cache --config webpack.main.ts", + "dev:render": "webpack-cli --watch --cache --config webpack.renderer.ts", + "compile": "concurrently 'yarn download-bins' 'yarn i18n:compile' 'yarn make-dll' && concurrently yarn:compile:*", + "compile:main": "webpack -p --progress --config webpack.main.ts", + "compile:renderer": "webpack -p --progress --config webpack.renderer.ts", + "make-dll": "webpack --config webpack.dll.ts", "build:linux": "yarn compile && electron-builder --linux --dir -c.productName=LensDev", "build:mac": "yarn compile && electron-builder --mac --dir -c.productName=LensDev", "build:win": "yarn compile && electron-builder --win --dir -c.productName=LensDev", @@ -17,7 +20,7 @@ "dist": "yarn compile && electron-builder -p onTag", "dist:win": "yarn compile && electron-builder -p onTag --x64 --ia32", "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null", - "postinstall": "concurrently patch-package", + "postinstall": "patch-package && concurrently 'electron-builder install-app-deps' 'yarn make-dll'", "i18n:extract": "lingui extract", "i18n:compile": "lingui compile", "download-bins": "concurrently yarn:download:*", @@ -34,18 +37,6 @@ "engines": { "node": ">=12.0 <13.0" }, - "electronWebpack": { - "commonSourceDirectory": "./src/common", - "staticSourceDirectory": "./static", - "main": { - "sourceDirectory": "./src/main" - }, - "renderer": { - "sourceDirectory": "./src/renderer", - "template": "./src/renderer/template.html", - "webpackConfig": "./src/renderer/webpack.renderer.js" - } - }, "lingui": { "locales": [ "en", @@ -56,11 +47,6 @@ "sourceLocale": "en", "fallbackLocale": "en", "compileNamespace": "cjs", - "extractBabelOptions": { - "plugins": [ - "@babel/plugin-syntax-dynamic-import" - ] - }, "catalogs": [ { "path": "./locales/{locale}/messages", @@ -225,9 +211,11 @@ "@types/dompurify": "^2.0.2", "@types/hapi": "^18.0.3", "@types/hoist-non-react-statics": "^3.3.1", + "@types/html-webpack-plugin": "^3.2.3", "@types/jest": "^25.2.3", "@types/material-ui": "^0.21.7", "@types/md5-file": "^4.0.2", + "@types/mini-css-extract-plugin": "^0.9.1", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.5", @@ -239,6 +227,7 @@ "@types/shelljs": "^0.8.8", "@types/tcp-port-used": "^1.0.0", "@types/tempy": "^0.3.0", + "@types/terser-webpack-plugin": "^3.0.0", "@types/universal-analytics": "^0.4.4", "@types/uuid": "^8.0.0", "@types/webdriverio": "^4.13.0", @@ -247,6 +236,7 @@ "ace-builds": "^1.4.11", "ansi_up": "^4.0.4", "babel-core": "^7.0.0-beta.3", + "babel-loader": "^8.1.0", "babel-plugin-macros": "^2.8.0", "bootstrap": "^4.5.0", "bootstrap-vue": "^2.15.0", @@ -257,17 +247,17 @@ "dompurify": "^2.0.11", "electron-builder": "^22.7.0", "electron-notarize": "^0.3.0", - "electron-webpack": "^2.8.2", - "electron-webpack-ts": "^4.0.1", "file-loader": "^6.0.0", "flex.box": "^3.4.4", "hashicon": "^0.3.0", "hoist-non-react-statics": "^3.3.2", + "html-webpack-plugin": "^4.3.0", "identity-obj-proxy": "^3.0.0", "include-media": "^1.4.9", "jest": "^26.0.1", "make-plural": "^6.2.1", "material-design-icons": "^3.0.1", + "mini-css-extract-plugin": "^0.9.0", "mobx": "^5.15.4", "mobx-observable-history": "^1.0.3", "mobx-react": "^6.2.2", @@ -285,8 +275,8 @@ "react-select": "^3.1.0", "react-window": "^1.8.5", "sass-loader": "^8.0.2", - "source-map-support": "^0.5.19", "spectron": "^8.0.0", + "terser-webpack-plugin": "^3.0.3", "ts-jest": "^26.1.0", "ts-loader": "^7.0.5", "ts-node": "^8.10.2", @@ -303,7 +293,6 @@ "vuex": "^3.4.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.11.0", "xterm": "^4.6.0", "xterm-addon-fit": "^0.4.0" } diff --git a/src/common/register-static.ts b/src/common/register-static.ts new file mode 100644 index 0000000000..445b5e973d --- /dev/null +++ b/src/common/register-static.ts @@ -0,0 +1,25 @@ +// Setup static folder for common assets + +import path from "path"; +import { protocol } from "electron" +import logger from "../main/logger"; +import { staticDir, staticProto } from "./vars"; + +export function registerStaticProtocol(rootFolder = staticDir) { + const scheme = staticProto.replace("://", ""); + protocol.registerFileProtocol(scheme, (request, callback) => { + const relativePath = request.url.replace(staticProto, ""); + const absPath = path.resolve(rootFolder, relativePath); + callback(absPath); + }, (error) => { + logger.debug(`Failed to register protocol "${scheme}"`, error); + }) +} + +export function getStaticUrl(filePath: string) { + return staticProto + filePath; +} + +export function getStaticPath(filePath: string) { + return path.resolve(staticDir, filePath); +} diff --git a/src/common/vars.ts b/src/common/vars.ts index cb86460cba..657610cefb 100644 --- a/src/common/vars.ts +++ b/src/common/vars.ts @@ -1,19 +1,21 @@ -// App's common paths/flags/etc. for any process -import packageInfo from "../../package.json" +// App's common configuration for any process (main, renderer, build pipeline, etc.) import path from "path"; -const { main, renderer } = packageInfo.electronWebpack; - -export const outDir = path.resolve(__dirname, "../dist"); -export const mainDir = path.resolve(__dirname, "../", main.sourceDirectory); -export const rendererDir = path.resolve(__dirname, "../", renderer.sourceDirectory); - export const isMac = process.platform === "darwin" export const isWindows = process.platform === "win32" export const isProduction = process.env.NODE_ENV === "production" export const isDevelopment = !isProduction; export const buildVersion = process.env.BUILD_VERSION; +// Paths +export const staticDir = path.resolve(__dirname, "../../static"); +export const outDir = path.resolve(__dirname, "../../dist"); +export const mainDir = path.resolve(__dirname, "../main"); +export const rendererDir = path.resolve(__dirname, "../renderer"); + +// Apis +export const staticProto = "static://" + export const apiPrefix = { BASE: '/api', TERMINAL: '/api-terminal', // terminal api diff --git a/src/main/index.ts b/src/main/index.ts index 2f7a3d2a61..1646be9d61 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -18,6 +18,7 @@ import { shellSync } from "./shell-sync" import { getFreePort } from "./port" import { mangleProxyEnv } from "./proxy-env" import { findMainWebContents } from "./webcontents" +import { registerStaticProtocol } from "../common/register-static"; import { isDevelopment, isMac } from "../common/vars"; mangleProxyEnv() @@ -41,12 +42,15 @@ async function main() { updater.start(); tracker.event("app", "start"); + + registerStaticProtocol(); protocol.registerFileProtocol('store', (request, callback) => { const url = request.url.substr(8) callback(path.normalize(`${app.getPath("userData")}/${url}`)) }, (error) => { if (error) console.error('Failed to register protocol') }) + let port: number = null // find free port try { diff --git a/src/main/router.ts b/src/main/router.ts index 758f94bd73..46c342b70f 100644 --- a/src/main/router.ts +++ b/src/main/router.ts @@ -1,5 +1,6 @@ import http from "http" import path from "path" +import { readFile } from "fs" import { Cluster } from "./cluster" import { configRoute } from "./routes/config" import { helmApi } from "./helm-api" @@ -8,7 +9,7 @@ import { kubeconfigRoute } from "./routes/kubeconfig" import { metricsRoute } from "./routes/metrics" import { watchRoute } from "./routes/watch" import { portForwardRoute } from "./routes/port-forward" -import { readFile } from "fs" +import { getStaticPath } from "../common/register-static"; // eslint-disable-next-line @typescript-eslint/no-var-requires const Call = require('@hapi/call'); @@ -84,8 +85,8 @@ export class Router { return request } - protected handleStaticFile(file: string, response: http.ServerResponse) { - const asset = path.join(__static, file) + protected handleStaticFile(filePath: string, response: http.ServerResponse) { + const asset = getStaticPath(filePath); readFile(asset, (err, data) => { if (err) { // default to index.html so that react routes work when page is refreshed diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts index 8e83c3af89..b29152a697 100644 --- a/src/main/window-manager.ts +++ b/src/main/window-manager.ts @@ -1,9 +1,9 @@ -import path from "path" import { BrowserWindow, shell } from "electron" import { PromiseIpc } from "electron-promise-ipc" import windowStateKeeper from "electron-window-state" import { tracker } from "./tracker"; import { isDevelopment } from "../common/vars"; +import { getStaticUrl } from "../common/register-static"; export class WindowManager { public mainWindow: BrowserWindow = null; @@ -32,7 +32,7 @@ export class WindowManager { } }) if (showSplash) { - this.splashWindow.loadFile(path.join(__static, "/splash.html")) + this.splashWindow.loadFile(getStaticUrl("splash.html")) this.splashWindow.show() } diff --git a/src/renderer/_vue/components/WhatsNewPage.vue b/src/renderer/_vue/components/WhatsNewPage.vue index e77b2bdf39..2823c9a25a 100644 --- a/src/renderer/_vue/components/WhatsNewPage.vue +++ b/src/renderer/_vue/components/WhatsNewPage.vue @@ -28,16 +28,17 @@