mirror of
https://github.com/lensapp/lens.git
synced 2024-11-09 12:20:46 +03:00
Upgrade to webpack@5 (#4894)
This commit is contained in:
Roman
GitHub
parent
8524f9d244
commit
ff55719ffa
@ -3,4 +3,4 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
export default {};
|
||||
export default ""; // mostly path to bundled file or data-url (webpack)
|
||||
3404
extensions/kube-object-event-status/package-lock.json
generated
3404
extensions/kube-object-event-status/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,8 +18,8 @@
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@k8slens/extensions": "file:../../src/extensions/npm/extensions",
|
||||
"ts-loader": "^8.0.4",
|
||||
"typescript": "^4.3.2",
|
||||
"webpack": "^4.46.0"
|
||||
"ts-loader": "latest",
|
||||
"typescript": "latest",
|
||||
"webpack": "latest"
|
||||
}
|
||||
}
|
||||
|
||||
5612
extensions/metrics-cluster-feature/package-lock.json
generated
5612
extensions/metrics-cluster-feature/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -19,10 +19,10 @@
|
||||
],
|
||||
"devDependencies": {
|
||||
"@k8slens/extensions": "file:../../src/extensions/npm/extensions",
|
||||
"jest": "^26.6.3",
|
||||
"semver": "^7.3.2",
|
||||
"ts-loader": "^8.0.4",
|
||||
"typescript": "^4.3.2",
|
||||
"webpack": "^4.44.2"
|
||||
"jest": "latest",
|
||||
"ts-loader": "latest",
|
||||
"typescript": "latest",
|
||||
"webpack": "latest"
|
||||
}
|
||||
}
|
||||
|
||||
5931
extensions/node-menu/package-lock.json
generated
5931
extensions/node-menu/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,9 +18,9 @@
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@k8slens/extensions": "file:../../src/extensions/npm/extensions",
|
||||
"jest": "^26.6.3",
|
||||
"ts-loader": "^8.0.4",
|
||||
"typescript": "^4.3.2",
|
||||
"webpack": "^4.46.0"
|
||||
"jest": "latest",
|
||||
"ts-loader": "latest",
|
||||
"typescript": "latest",
|
||||
"webpack": "latest"
|
||||
}
|
||||
}
|
||||
|
||||
5931
extensions/pod-menu/package-lock.json
generated
5931
extensions/pod-menu/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -18,9 +18,9 @@
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@k8slens/extensions": "file:../../src/extensions/npm/extensions",
|
||||
"jest": "^26.6.3",
|
||||
"ts-loader": "^8.0.4",
|
||||
"typescript": "^4.3.2",
|
||||
"webpack": "^4.46.0"
|
||||
"jest": "latest",
|
||||
"ts-loader": "latest",
|
||||
"typescript": "latest",
|
||||
"webpack": "latest"
|
||||
}
|
||||
}
|
||||
|
||||
56
package.json
56
package.json
@ -16,9 +16,9 @@
|
||||
"dev-build": "concurrently yarn:compile:*",
|
||||
"debug-build": "concurrently yarn:compile:main yarn:compile:extension-types",
|
||||
"dev-run": "nodemon --watch static/build/main.js --exec \"electron --remote-debugging-port=9223 --inspect .\"",
|
||||
"dev:main": "yarn run compile:main --watch",
|
||||
"dev:renderer": "yarn run webpack-dev-server --config webpack.renderer.ts",
|
||||
"dev:extension-types": "yarn run compile:extension-types --watch",
|
||||
"dev:main": "yarn run compile:main --watch --progress",
|
||||
"dev:renderer": "yarn run compile:renderer --watch --progress",
|
||||
"dev:extension-types": "yarn run compile:extension-types --watch --progress",
|
||||
"compile": "env NODE_ENV=production concurrently yarn:compile:*",
|
||||
"compile:main": "yarn run webpack --config webpack.main.ts",
|
||||
"compile:renderer": "yarn run webpack --config webpack.renderer.ts",
|
||||
@ -62,7 +62,7 @@
|
||||
},
|
||||
"moduleNameMapper": {
|
||||
"\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts",
|
||||
"\\.(svg)$": "<rootDir>/__mocks__/imageMock.ts"
|
||||
"\\.(svg|png|jpg|eot|woff2?|ttf)$": "<rootDir>/__mocks__/assetMock.ts"
|
||||
},
|
||||
"modulePathIgnorePatterns": [
|
||||
"<rootDir>/dist",
|
||||
@ -268,7 +268,7 @@
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@material-ui/lab": "^4.0.0-alpha.60",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
|
||||
"@sentry/types": "^6.14.1",
|
||||
"@testing-library/jest-dom": "^5.16.1",
|
||||
"@testing-library/react": "^11.2.7",
|
||||
@ -291,12 +291,11 @@
|
||||
"@types/lodash": "^4.14.177",
|
||||
"@types/marked": "^4.0.1",
|
||||
"@types/md5-file": "^4.0.2",
|
||||
"@types/mini-css-extract-plugin": "^0.9.1",
|
||||
"@types/mini-css-extract-plugin": "^2.4.0",
|
||||
"@types/mock-fs": "^4.13.1",
|
||||
"@types/node": "14.17.33",
|
||||
"@types/node-fetch": "^2.5.12",
|
||||
"@types/npm": "^2.0.32",
|
||||
"@types/progress-bar-webpack-plugin": "^2.1.2",
|
||||
"@types/proper-lockfile": "^4.1.2",
|
||||
"@types/randomcolor": "^0.5.6",
|
||||
"@types/react": "^17.0.34",
|
||||
@ -319,10 +318,10 @@
|
||||
"@types/triple-beam": "^1.3.2",
|
||||
"@types/url-parse": "^1.4.5",
|
||||
"@types/uuid": "^8.3.3",
|
||||
"@types/webpack": "^4.41.32",
|
||||
"@types/webpack-dev-server": "^3.11.6",
|
||||
"@types/webpack": "^5.28.0",
|
||||
"@types/webpack-dev-server": "^4.7.2",
|
||||
"@types/webpack-env": "^1.16.3",
|
||||
"@types/webpack-node-externals": "^1.7.1",
|
||||
"@types/webpack-node-externals": "^2.5.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.10.1",
|
||||
"@typescript-eslint/parser": "^5.10.1",
|
||||
"ansi_up": "^5.1.0",
|
||||
@ -330,25 +329,24 @@
|
||||
"circular-dependency-plugin": "^5.2.2",
|
||||
"color": "^3.2.1",
|
||||
"concurrently": "^5.3.0",
|
||||
"css-loader": "^5.2.7",
|
||||
"css-loader": "^6.5.1",
|
||||
"deepdash": "^5.3.9",
|
||||
"dompurify": "^2.3.4",
|
||||
"electron": "^14.2.4",
|
||||
"electron-builder": "^22.14.5",
|
||||
"electron-notarize": "^0.3.0",
|
||||
"esbuild": "^0.13.15",
|
||||
"esbuild-loader": "^2.16.0",
|
||||
"esbuild-loader": "^2.18.0",
|
||||
"eslint": "^8.7.0",
|
||||
"eslint-plugin-header": "^3.1.1",
|
||||
"eslint-plugin-import": "^2.25.4",
|
||||
"eslint-plugin-react": "^7.28.0",
|
||||
"eslint-plugin-react-hooks": "^4.3.0",
|
||||
"eslint-plugin-unused-imports": "^2.0.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"flex.box": "^3.4.4",
|
||||
"fork-ts-checker-webpack-plugin": "^5.2.1",
|
||||
"fork-ts-checker-webpack-plugin": "^6.5.0",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"html-webpack-plugin": "^4.5.2",
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"ignore-loader": "^0.1.2",
|
||||
"include-media": "^1.4.9",
|
||||
"jest": "26.6.3",
|
||||
@ -356,43 +354,41 @@
|
||||
"jest-fetch-mock": "^3.0.3",
|
||||
"jest-mock-extended": "^1.0.18",
|
||||
"make-plural": "^6.2.2",
|
||||
"mini-css-extract-plugin": "^1.6.2",
|
||||
"mini-css-extract-plugin": "^2.5.2",
|
||||
"node-gyp": "7.1.2",
|
||||
"node-loader": "^1.0.3",
|
||||
"node-loader": "^2.0.0",
|
||||
"nodemon": "^2.0.15",
|
||||
"playwright": "^1.17.1",
|
||||
"postcss": "^8.4.5",
|
||||
"postcss-loader": "^4.3.0",
|
||||
"progress-bar-webpack-plugin": "^2.1.0",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"randomcolor": "^0.6.2",
|
||||
"raw-loader": "^4.0.2",
|
||||
"react-beautiful-dnd": "^13.1.0",
|
||||
"react-refresh": "^0.9.0",
|
||||
"react-refresh": "^0.11.0",
|
||||
"react-refresh-typescript": "^2.0.3",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-select": "3.2.0",
|
||||
"react-select-event": "^5.1.0",
|
||||
"react-table": "^7.7.0",
|
||||
"react-window": "^1.8.6",
|
||||
"sass": "^1.45.1",
|
||||
"sass-loader": "^10.2.0",
|
||||
"sass-loader": "^12.4.0",
|
||||
"sharp": "^0.29.3",
|
||||
"style-loader": "^2.0.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.0.7",
|
||||
"ts-jest": "26.5.6",
|
||||
"ts-loader": "^7.0.5",
|
||||
"ts-loader": "^9.2.6",
|
||||
"ts-node": "^10.4.0",
|
||||
"type-fest": "^1.0.2",
|
||||
"typed-emitter": "^1.4.0",
|
||||
"typedoc": "0.22.10",
|
||||
"typedoc-plugin-markdown": "^3.11.3",
|
||||
"typedoc-plugin-markdown": "^3.11.12",
|
||||
"typeface-roboto": "^1.1.13",
|
||||
"typescript": "^4.5.2",
|
||||
"typescript-plugin-css-modules": "^3.4.0",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-dev-server": "^3.11.3",
|
||||
"webpack-node-externals": "^1.7.2",
|
||||
"webpack": "^5.69.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.7.4",
|
||||
"webpack-node-externals": "^3.0.0",
|
||||
"xterm": "^4.15.0",
|
||||
"xterm-addon-fit": "^0.5.0"
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ import { app } from "electron";
|
||||
import type { CatalogEntitySpec } from "../catalog/catalog-entity";
|
||||
import { IpcRendererNavigationEvents } from "../../renderer/navigation/events";
|
||||
import { requestClusterActivation, requestClusterDisconnection } from "../../renderer/ipc";
|
||||
import KubeClusterCategoryIcon from "./icons/kubernetes.svg";
|
||||
|
||||
export interface KubernetesClusterPrometheusMetrics {
|
||||
address?: {
|
||||
@ -138,7 +139,7 @@ class KubernetesClusterCategory extends CatalogCategory {
|
||||
public readonly kind = "CatalogCategory";
|
||||
public metadata = {
|
||||
name: "Clusters",
|
||||
icon: require(`!!raw-loader!./icons/kubernetes.svg`).default, // eslint-disable-line
|
||||
icon: KubeClusterCategoryIcon,
|
||||
};
|
||||
public spec: CatalogCategorySpec = {
|
||||
group: "entity.k8slens.dev",
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
*/
|
||||
|
||||
import { action, computed, observable, makeObservable } from "mobx";
|
||||
import type { Disposer } from "../utils";
|
||||
import { strictSet, iter, getOrInsertMap } from "../utils";
|
||||
import { once } from "lodash";
|
||||
import { iter, getOrInsertMap, strictSet } from "../utils";
|
||||
import type { Disposer } from "../utils";
|
||||
import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "./catalog-entity";
|
||||
|
||||
export type CategoryFilter = (category: CatalogCategory) => any;
|
||||
|
||||
@ -4,18 +4,17 @@
|
||||
*/
|
||||
|
||||
import esbuild from "esbuild";
|
||||
import type { Options as TSLoaderOptions } from "ts-loader";
|
||||
|
||||
/**
|
||||
* A function returning webpack ts/tsx loader
|
||||
*
|
||||
* depends on env LENS_DEV_USE_ESBUILD_LOADER to use esbuild-loader (faster) or good-old ts-loader
|
||||
*
|
||||
* @param testRegExp - the regex for webpack to conditional find the files
|
||||
* @returns ts/tsx webpack loader configuration object
|
||||
*/
|
||||
const getTSLoader = (
|
||||
testRegExp: RegExp, transpileOnly = true,
|
||||
) => {
|
||||
const getTSLoader = (options: Partial<TSLoaderOptions> = {}, testRegExp?: RegExp) => {
|
||||
testRegExp ??= /\.tsx?$/; // by default covers react/jsx-stuff
|
||||
options.transpileOnly ??= true;
|
||||
|
||||
if (process.env.LENS_DEV_USE_ESBUILD_LOADER === "true") {
|
||||
console.info(`\n🚀 using esbuild-loader for ts(x)`);
|
||||
|
||||
@ -35,9 +34,7 @@ const getTSLoader = (
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
transpileOnly,
|
||||
},
|
||||
options,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -38,7 +38,6 @@ export const mainDir = path.join(contextDir, "src/main");
|
||||
export const rendererDir = path.join(contextDir, "src/renderer");
|
||||
export const htmlTemplate = path.resolve(rendererDir, "template.html");
|
||||
export const sassCommonVars = path.resolve(rendererDir, "components/vars.scss");
|
||||
export const webpackDevServerPort = 9009;
|
||||
|
||||
// Special runtime paths
|
||||
defineGlobal("__static", {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import { action, computed, IComputedValue, IObservableArray, makeObservable, observable } from "mobx";
|
||||
import { action, computed, type IComputedValue, type IObservableArray, makeObservable, observable } from "mobx";
|
||||
import { CatalogCategoryRegistry, catalogCategoryRegistry, CatalogEntity, CatalogEntityConstructor } from "../../common/catalog";
|
||||
import { iter } from "../../common/utils";
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ import * as Mobx from "mobx";
|
||||
import * as LensExtensionsCommonApi from "../extensions/common-api";
|
||||
import * as LensExtensionsMainApi from "../extensions/main-api";
|
||||
import { app, autoUpdater, dialog, powerMonitor } from "electron";
|
||||
import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
|
||||
import { appName, isIntegrationTesting, isMac, isWindows, productName, isDevelopment } from "../common/vars";
|
||||
import { LensProxy } from "./lens-proxy";
|
||||
import { WindowManager } from "./window-manager";
|
||||
import { ClusterManager } from "./cluster-manager";
|
||||
@ -176,7 +176,7 @@ di.runSetups().then(() => {
|
||||
|
||||
try {
|
||||
logger.info("🔌 Starting LensProxy");
|
||||
await lensProxy.listen();
|
||||
await lensProxy.listen(); // lensProxy.port available
|
||||
} catch (error) {
|
||||
dialog.showErrorBox("Lens Error", `Could not start proxy: ${error?.message || "unknown error"}`);
|
||||
|
||||
@ -228,6 +228,15 @@ di.runSetups().then(() => {
|
||||
logger.info("🖥️ Starting WindowManager");
|
||||
const windowManager = WindowManager.createInstance();
|
||||
|
||||
// Override main content view url to local webpack-dev-server to support HMR / live-reload
|
||||
if (isDevelopment) {
|
||||
const { createDevServer } = await import("../../webpack.dev-server");
|
||||
const devServer = createDevServer(lensProxy.port);
|
||||
|
||||
await devServer.start();
|
||||
windowManager.mainContentUrl = `http://localhost:${devServer.options.port}`;
|
||||
}
|
||||
|
||||
const menuItems = di.inject(electronMenuItemsInjectable);
|
||||
const trayMenuItems = di.inject(trayMenuItemsInjectable);
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ import logger from "../logger";
|
||||
import { exitApp } from "../exit-app";
|
||||
import { broadcastMessage } from "../../common/ipc";
|
||||
import { openBrowser } from "../../common/utils";
|
||||
import * as packageJson from "../../../package.json";
|
||||
import packageJson from "../../../package.json";
|
||||
import { preferencesURL, extensionsURL, addClusterURL, catalogURL, welcomeURL } from "../../common/routes";
|
||||
import { checkForUpdates, isAutoUpdateEnabled } from "../app-updater";
|
||||
import type { MenuRegistration } from "./menu-registration";
|
||||
|
||||
@ -9,7 +9,7 @@ import type http from "http";
|
||||
import path from "path";
|
||||
import { readFile } from "fs-extra";
|
||||
import type { Cluster } from "../common/cluster/cluster";
|
||||
import { apiPrefix, appName, publicPath, isDevelopment, webpackDevServerPort } from "../common/vars";
|
||||
import { apiPrefix, appName, publicPath } from "../common/vars";
|
||||
import { HelmApiRoute, KubeconfigRoute, MetricsRoute, PortForwardRoute, ResourceApplierApiRoute, VersionRoute } from "./routes";
|
||||
import logger from "./logger";
|
||||
|
||||
@ -110,7 +110,7 @@ export class Router {
|
||||
};
|
||||
}
|
||||
|
||||
protected static async handleStaticFile({ params, response, raw: { req }}: LensApiRequest): Promise<void> {
|
||||
protected static async handleStaticFile({ params, response }: LensApiRequest): Promise<void> {
|
||||
let filePath = params.path;
|
||||
|
||||
for (let retryCount = 0; retryCount < 5; retryCount += 1) {
|
||||
@ -124,19 +124,6 @@ export class Router {
|
||||
}
|
||||
|
||||
try {
|
||||
const filename = path.basename(req.url);
|
||||
// redirect requests to [appName].js, [appName].html /sockjs-node/ to webpack-dev-server (for hot-reload support)
|
||||
const toWebpackDevServer = filename.includes(appName) || filename.includes("hot-update") || req.url.includes("sockjs-node");
|
||||
|
||||
if (isDevelopment && toWebpackDevServer) {
|
||||
const redirectLocation = `http://localhost:${webpackDevServerPort}${req.url}`;
|
||||
|
||||
response.statusCode = 307;
|
||||
response.setHeader("Location", redirectLocation);
|
||||
|
||||
return response.end();
|
||||
}
|
||||
|
||||
const data = await readFile(asset);
|
||||
|
||||
response.setHeader("Content-Type", getMimeType(asset));
|
||||
|
||||
@ -28,6 +28,8 @@ export interface SendToViewArgs {
|
||||
}
|
||||
|
||||
export class WindowManager extends Singleton {
|
||||
public mainContentUrl = `http://localhost:${LensProxy.getInstance().port}`;
|
||||
|
||||
protected mainWindow: BrowserWindow;
|
||||
protected splashWindow: BrowserWindow;
|
||||
protected windowState: windowStateKeeper.State;
|
||||
@ -41,10 +43,6 @@ export class WindowManager extends Singleton {
|
||||
this.bindEvents();
|
||||
}
|
||||
|
||||
get mainUrl() {
|
||||
return `http://localhost:${LensProxy.getInstance().port}`;
|
||||
}
|
||||
|
||||
private async initMainWindow(showSplash: boolean) {
|
||||
// Manage main window size and position with state persistence
|
||||
if (!this.windowState) {
|
||||
@ -144,8 +142,8 @@ export class WindowManager extends Singleton {
|
||||
|
||||
try {
|
||||
if (showSplash) await this.showSplash();
|
||||
logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainUrl} ...`);
|
||||
await this.mainWindow.loadURL(this.mainUrl);
|
||||
logger.info(`[WINDOW-MANAGER]: Loading Main window from url: ${this.mainContentUrl} ...`);
|
||||
await this.mainWindow.loadURL(this.mainContentUrl);
|
||||
} catch (error) {
|
||||
logger.error("Loading main window failed", { error });
|
||||
dialog.showErrorBox("ERROR!", error.toString());
|
||||
|
||||
@ -9,7 +9,8 @@ import { CatalogCategory, CatalogEntity, CatalogEntityData, catalogCategoryRegis
|
||||
import "../../common/catalog-entities";
|
||||
import type { Cluster } from "../../common/cluster/cluster";
|
||||
import { ClusterStore } from "../../common/cluster-store/cluster-store";
|
||||
import { Disposer, iter } from "../utils";
|
||||
import { iter } from "../utils";
|
||||
import type { Disposer } from "../utils";
|
||||
import { once } from "lodash";
|
||||
import logger from "../../common/logger";
|
||||
import { CatalogRunEvent } from "../../common/catalog/catalog-run-event";
|
||||
|
||||
@ -136,7 +136,14 @@ export async function bootstrap(di: DependencyInjectionContainer) {
|
||||
App = (await import("./frames/cluster-frame/cluster-frame")).ClusterFrame;
|
||||
}
|
||||
|
||||
await initializeApp(rootElem);
|
||||
try {
|
||||
await initializeApp(rootElem);
|
||||
} catch (error) {
|
||||
console.error(`[BOOTSTRAP]: view initialization error: ${error}`, {
|
||||
origin: location.href,
|
||||
isTopFrameView: process.isMainFrame,
|
||||
});
|
||||
}
|
||||
|
||||
render(
|
||||
<DiContextProvider value={{ di }}>
|
||||
|
||||
@ -25,7 +25,7 @@ interface Props<T extends CatalogEntity> {
|
||||
@observer
|
||||
export class CatalogEntityDetails<T extends CatalogEntity> extends Component<Props<T>> {
|
||||
categoryIcon(category: CatalogCategory) {
|
||||
if (category.metadata.icon.includes("<svg")) {
|
||||
if (Icon.isSvg(category.metadata.icon)) {
|
||||
return <Icon svg={category.metadata.icon} smallest />;
|
||||
} else {
|
||||
return <Icon material={category.metadata.icon} smallest />;
|
||||
|
||||
@ -65,7 +65,7 @@ export class CatalogEntityDrawerMenu<T extends CatalogEntity> extends React.Comp
|
||||
continue;
|
||||
}
|
||||
|
||||
const key = menuItem.icon.includes("<svg") ? "svg" : "material";
|
||||
const key = Icon.isSvg(menuItem.icon) ? "svg" : "material";
|
||||
|
||||
items.push(
|
||||
<MenuItem key={menuItem.title} onClick={() => this.onMenuItemClick(menuItem)}>
|
||||
|
||||
@ -28,7 +28,7 @@ function getCategoryIcon(category: CatalogCategory) {
|
||||
const { icon } = category.metadata ?? {};
|
||||
|
||||
if (typeof icon === "string") {
|
||||
return icon.includes("<svg")
|
||||
return Icon.isSvg(icon)
|
||||
? <Icon small svg={icon}/>
|
||||
: <Icon small material={icon}/>;
|
||||
}
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
import { action, observable, reaction, when, makeObservable } from "mobx";
|
||||
import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
|
||||
import { Cluster, clusterApi, getMetricsByNodeNames, IClusterMetrics } from "../../../../common/k8s-api/endpoints";
|
||||
import { Cluster, clusterApi, getMetricsByNodeNames, type IClusterMetrics } from "../../../../common/k8s-api/endpoints";
|
||||
import { autoBind, StorageHelper } from "../../../utils";
|
||||
import { IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
|
||||
import { type IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
|
||||
import { nodesStore } from "../../+nodes/nodes.store";
|
||||
|
||||
export enum MetricType {
|
||||
|
||||
@ -14,7 +14,7 @@ import { boundMethod, stopPropagation } from "../../utils";
|
||||
import { MarkdownViewer } from "../markdown-viewer";
|
||||
import { Spinner } from "../spinner";
|
||||
import { Button } from "../button";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Select, type SelectOption } from "../select";
|
||||
import { Badge } from "../badge";
|
||||
import { Tooltip, withStyles } from "@material-ui/core";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
|
||||
@ -10,7 +10,7 @@ import { observable, makeObservable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { Dialog, DialogProps } from "../dialog";
|
||||
import { Wizard, WizardStep } from "../wizard";
|
||||
import { getReleaseHistory, HelmRelease, IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { getReleaseHistory, HelmRelease, type IReleaseRevision } from "../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Notifications } from "../notifications";
|
||||
import orderBy from "lodash/orderBy";
|
||||
|
||||
@ -10,7 +10,7 @@ import { computed, makeObservable, observable, reaction } from "mobx";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { DrawerItem } from "../drawer";
|
||||
import { boundMethod, cssNames, Disposer } from "../../utils";
|
||||
import { getMetricsForNamespace, IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
|
||||
import { getMetricsForNamespace, type IPodMetrics, Namespace } from "../../../common/k8s-api/endpoints";
|
||||
import type { KubeObjectDetailsProps } from "../kube-object-details";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Spinner } from "../spinner";
|
||||
|
||||
@ -15,7 +15,7 @@ import { ResourceMetrics } from "../resource-metrics";
|
||||
import type { KubeObjectDetailsProps } from "../kube-object-details";
|
||||
import { IngressCharts } from "./ingress-charts";
|
||||
import { KubeObjectMeta } from "../kube-object-meta";
|
||||
import { getBackendServiceNamePort, getMetricsForIngress, IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
|
||||
import { getBackendServiceNamePort, getMetricsForIngress, type IIngressMetrics } from "../../../common/k8s-api/endpoints/ingress.api";
|
||||
import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
|
||||
import { ClusterMetricsResourceType } from "../../../common/cluster-types";
|
||||
import { boundMethod } from "../../utils";
|
||||
|
||||
@ -18,7 +18,7 @@ import { systemName, isUrl, isPath } from "../input/input_validators";
|
||||
import { SubTitle } from "../layout/sub-title";
|
||||
import { Icon } from "../icon";
|
||||
import { Notifications } from "../notifications";
|
||||
import { HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
|
||||
import { type HelmRepo, HelmRepoManager } from "../../../main/helm/helm-repo-manager";
|
||||
import { requestOpenFilePickingDialog } from "../../ipc";
|
||||
|
||||
interface Props extends Partial<DialogProps> {
|
||||
|
||||
@ -15,7 +15,7 @@ import { Link } from "react-router-dom";
|
||||
import { ResourceMetrics } from "../resource-metrics";
|
||||
import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
|
||||
import type { KubeObjectDetailsProps } from "../kube-object-details";
|
||||
import { getMetricsForPvc, IPvcMetrics, PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
|
||||
import { getMetricsForPvc, type IPvcMetrics, PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
|
||||
import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
|
||||
import { ClusterMetricsResourceType } from "../../../common/cluster-types";
|
||||
import { KubeObjectMeta } from "../kube-object-meta";
|
||||
|
||||
@ -15,7 +15,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
|
||||
import { daemonSetStore } from "./daemonsets.store";
|
||||
import { podsStore } from "../+workloads-pods/pods.store";
|
||||
import type { KubeObjectDetailsProps } from "../kube-object-details";
|
||||
import { DaemonSet, getMetricsForDaemonSets, IPodMetrics } from "../../../common/k8s-api/endpoints";
|
||||
import { DaemonSet, getMetricsForDaemonSets, type IPodMetrics } from "../../../common/k8s-api/endpoints";
|
||||
import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
|
||||
import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
|
||||
import { makeObservable, observable, reaction } from "mobx";
|
||||
|
||||
@ -10,7 +10,7 @@ import kebabCase from "lodash/kebabCase";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { DrawerItem } from "../drawer";
|
||||
import { Badge } from "../badge";
|
||||
import { Deployment, getMetricsForDeployments, IPodMetrics } from "../../../common/k8s-api/endpoints";
|
||||
import { Deployment, getMetricsForDeployments, type IPodMetrics } from "../../../common/k8s-api/endpoints";
|
||||
import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
|
||||
import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
|
||||
import { podsStore } from "../+workloads-pods/pods.store";
|
||||
|
||||
@ -17,7 +17,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
|
||||
import { podsStore } from "../+workloads-pods/pods.store";
|
||||
import { jobStore } from "./job.store";
|
||||
import type { KubeObjectDetailsProps } from "../kube-object-details";
|
||||
import { getMetricsForJobs, IPodMetrics, Job } from "../../../common/k8s-api/endpoints";
|
||||
import { getMetricsForJobs, type IPodMetrics, Job } from "../../../common/k8s-api/endpoints";
|
||||
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
|
||||
import { KubeObjectMeta } from "../kube-object-meta";
|
||||
import { makeObservable, observable, reaction } from "mobx";
|
||||
|
||||
@ -10,7 +10,7 @@ import kebabCase from "lodash/kebabCase";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { observable, reaction, makeObservable } from "mobx";
|
||||
import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi, getMetricsForPods } from "../../../common/k8s-api/endpoints";
|
||||
import { type IPodMetrics, nodesApi, Pod, pvcApi, configMapApi, getMetricsForPods } from "../../../common/k8s-api/endpoints";
|
||||
import { DrawerItem, DrawerTitle } from "../drawer";
|
||||
import { Badge } from "../badge";
|
||||
import { boundMethod, cssNames, toJS } from "../../utils";
|
||||
|
||||
@ -15,7 +15,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { podsStore } from "../+workloads-pods/pods.store";
|
||||
import type { KubeObjectDetailsProps } from "../kube-object-details";
|
||||
import { getMetricsForReplicaSets, IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
|
||||
import { getMetricsForReplicaSets, type IPodMetrics, ReplicaSet } from "../../../common/k8s-api/endpoints";
|
||||
import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
|
||||
import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
|
||||
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
|
||||
|
||||
@ -16,7 +16,7 @@ import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities"
|
||||
import { podsStore } from "../+workloads-pods/pods.store";
|
||||
import { statefulSetStore } from "./statefulset.store";
|
||||
import type { KubeObjectDetailsProps } from "../kube-object-details";
|
||||
import { getMetricsForStatefulSets, IPodMetrics, StatefulSet } from "../../../common/k8s-api/endpoints";
|
||||
import { getMetricsForStatefulSets, type IPodMetrics, StatefulSet } from "../../../common/k8s-api/endpoints";
|
||||
import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
|
||||
import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
|
||||
import { PodDetailsList } from "../+workloads-pods/pod-details-list";
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import "./terminal-dock-tab.scss";
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { boundMethod, cssNames } from "../../../utils";
|
||||
|
||||
10
src/renderer/components/dock/terminal/terminal-dock-tab.scss
Normal file
10
src/renderer/components/dock/terminal/terminal-dock-tab.scss
Normal file
@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
.TerminalTab {
|
||||
@include font-preload {
|
||||
font-family: "RobotoMono", monospace;
|
||||
}
|
||||
}
|
||||
@ -11,7 +11,7 @@ import type { TabId } from "../dock/store";
|
||||
import { TerminalApi, TerminalChannels } from "../../../api/terminal-api";
|
||||
import { ThemeStore } from "../../../theme.store";
|
||||
import { disposer } from "../../../utils";
|
||||
import { isMac, defaultTerminalFontFamily } from "../../../../common/vars";
|
||||
import { isMac } from "../../../../common/vars";
|
||||
import { once } from "lodash";
|
||||
import { UserStore } from "../../../../common/user-store";
|
||||
import { clipboard } from "electron";
|
||||
@ -25,14 +25,6 @@ export class Terminal {
|
||||
return document.getElementById("terminal-init");
|
||||
}
|
||||
|
||||
static async preloadFonts() {
|
||||
const fontPath = require("../../fonts/roboto-mono-nerd.ttf").default; // eslint-disable-line @typescript-eslint/no-var-requires
|
||||
const fontFace = new FontFace(defaultTerminalFontFamily, `url(${fontPath})`);
|
||||
|
||||
await fontFace.load();
|
||||
document.fonts.add(fontFace);
|
||||
}
|
||||
|
||||
private xterm: XTerm | null = new XTerm({
|
||||
cursorBlink: true,
|
||||
cursorStyle: "bar",
|
||||
|
||||
@ -15,7 +15,7 @@ import type { UpgradeChartTabStore } from "./store";
|
||||
import { Spinner } from "../../spinner";
|
||||
import { Badge } from "../../badge";
|
||||
import { EditorPanel } from "../editor-panel";
|
||||
import { helmChartStore, IChartVersion } from "../../+helm-charts/helm-chart.store";
|
||||
import { helmChartStore, type IChartVersion } from "../../+helm-charts/helm-chart.store";
|
||||
import type { HelmRelease, IReleaseUpdateDetails, IReleaseUpdatePayload } from "../../../../common/k8s-api/endpoints/helm-releases.api";
|
||||
import { Select, SelectOption } from "../../select";
|
||||
import { IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: block;
|
||||
src: url("../fonts/MaterialIcons-Regular.ttf") format("truetype");
|
||||
src: url("./fonts/MaterialIcons-Regular.woff2") format("woff");
|
||||
src: url("./fonts/MaterialIcons-Regular.ttf") format("truetype");
|
||||
}
|
||||
|
||||
// Patched RobotoMono font with icons
|
||||
@ -21,6 +22,6 @@
|
||||
// https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/RobotoMono
|
||||
@font-face {
|
||||
font-family: 'RobotoMono';
|
||||
src: local('RobotoMono'),
|
||||
url('fonts/roboto-mono-nerd.ttf') format('truetype');
|
||||
font-display: block;
|
||||
src: local('RobotoMono'), url('./fonts/roboto-mono-nerd.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@ export class HotbarEntityIcon extends React.Component<Props> {
|
||||
return <Icon material="bug_report" className={className} />;
|
||||
}
|
||||
|
||||
if (category.metadata.icon.includes("<svg")) {
|
||||
if (Icon.isSvg(category.metadata.icon)) {
|
||||
return <Icon svg={category.metadata.icon} className={className} />;
|
||||
} else {
|
||||
return <Icon material={category.metadata.icon} className={className} />;
|
||||
|
||||
@ -12,7 +12,7 @@ import { cssNames, IClassName } from "../../utils";
|
||||
import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
|
||||
import { HotbarStore } from "../../../common/hotbar-store";
|
||||
import type { CatalogEntity } from "../../api/catalog-entity";
|
||||
import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
|
||||
import { DragDropContext, Draggable, Droppable, type DropResult } from "react-beautiful-dnd";
|
||||
import { HotbarSelector } from "./hotbar-selector";
|
||||
import { HotbarCell } from "./hotbar-cell";
|
||||
import { HotbarIcon } from "./hotbar-icon";
|
||||
|
||||
@ -11,6 +11,7 @@ import type { LocationDescriptor } from "history";
|
||||
import { boundMethod, cssNames } from "../../utils";
|
||||
import { TooltipDecoratorProps, withTooltip } from "../tooltip";
|
||||
import isNumber from "lodash/isNumber";
|
||||
import { decode } from "../../../common/utils/base64";
|
||||
|
||||
export interface IconProps extends React.HTMLAttributes<any>, TooltipDecoratorProps {
|
||||
material?: string; // material-icon, see available names at https://material.io/icons/
|
||||
@ -36,6 +37,10 @@ export class Icon extends React.PureComponent<IconProps> {
|
||||
focusable: true,
|
||||
};
|
||||
|
||||
static isSvg(content: string) {
|
||||
return String(content).includes("svg+xml"); // data-url for raw svg-icon
|
||||
}
|
||||
|
||||
get isInteractive() {
|
||||
const { interactive, onClick, href, link } = this.props;
|
||||
|
||||
@ -58,7 +63,7 @@ export class Icon extends React.PureComponent<IconProps> {
|
||||
switch (evt.nativeEvent.code) {
|
||||
case "Space":
|
||||
|
||||
// fallthrough
|
||||
// fallthrough
|
||||
case "Enter": {
|
||||
this.ref.current?.click();
|
||||
evt.preventDefault();
|
||||
@ -98,9 +103,12 @@ export class Icon extends React.PureComponent<IconProps> {
|
||||
|
||||
// render as inline svg-icon
|
||||
if (typeof svg === "string") {
|
||||
const svgIconText = svg.includes("<svg") ? svg : require(`!!raw-loader!./${svg}.svg`).default;
|
||||
const dataUrlPrefix = "data:image/svg+xml;base64,";
|
||||
const svgIconDataUrl = svg.startsWith(dataUrlPrefix) ? svg : require(`./${svg}.svg`);
|
||||
const svgIconText = typeof svgIconDataUrl == "string" // decode xml from data-url
|
||||
? decode(svgIconDataUrl.replace(dataUrlPrefix, "")) : "";
|
||||
|
||||
iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }}/>;
|
||||
iconContent = <span className="icon" dangerouslySetInnerHTML={{ __html: svgIconText }} />;
|
||||
}
|
||||
|
||||
// render as material-icon
|
||||
@ -128,7 +136,7 @@ export class Icon extends React.PureComponent<IconProps> {
|
||||
}
|
||||
|
||||
if (href) {
|
||||
return <a {...iconProps} href={href} ref={this.ref}/>;
|
||||
return <a {...iconProps} href={href} ref={this.ref} />;
|
||||
}
|
||||
|
||||
return <i {...iconProps} ref={this.ref} />;
|
||||
|
||||
@ -59,3 +59,15 @@
|
||||
@content; // css-modules (*.module.scss)
|
||||
}
|
||||
}
|
||||
|
||||
// Makes custom font available at earlier stages (start preloading)
|
||||
// Element must be in DOM and contain some text of loading font.
|
||||
@mixin font-preload() {
|
||||
&:before {
|
||||
width: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
content: "x"; // required
|
||||
@content; // must contain `font-family`
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,8 +10,10 @@ import "./select.scss";
|
||||
import React, { ReactNode } from "react";
|
||||
import { computed, makeObservable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import ReactSelect, { ActionMeta, components, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
|
||||
import Creatable, { CreatableProps } from "react-select/creatable";
|
||||
import ReactSelect, { components } from "react-select";
|
||||
import ReactSelectCreatable from "react-select/creatable";
|
||||
import type { ActionMeta, OptionTypeBase, Props as ReactSelectProps, Styles } from "react-select";
|
||||
import type { CreatableProps } from "react-select/creatable";
|
||||
|
||||
import { ThemeStore } from "../../theme.store";
|
||||
import { boundMethod, cssNames } from "../../utils";
|
||||
@ -138,7 +140,7 @@ export class Select extends React.Component<SelectProps> {
|
||||
};
|
||||
|
||||
return isCreatable
|
||||
? <Creatable {...selectProps}/>
|
||||
? <ReactSelectCreatable {...selectProps}/>
|
||||
: <ReactSelect {...selectProps}/>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
import type { Cluster } from "../../../../common/cluster/cluster";
|
||||
import type { CatalogEntityRegistry } from "../../../api/catalog-entity-registry";
|
||||
import logger from "../../../../main/logger";
|
||||
import { Terminal } from "../../../components/dock/terminal/terminal";
|
||||
import type { KubernetesCluster } from "../../../../common/catalog-entities";
|
||||
import { Notifications } from "../../../components/notifications";
|
||||
import type { AppEvent } from "../../../../common/app-event-bus/event-bus";
|
||||
@ -40,7 +39,6 @@ export const initClusterFrame =
|
||||
`${logPrefix} Init dashboard, clusterId=${hostedCluster.id}, frameId=${frameRoutingId}`,
|
||||
);
|
||||
|
||||
await Terminal.preloadFonts();
|
||||
await requestSetClusterFrameId(hostedCluster.id);
|
||||
await hostedCluster.whenReady; // cluster.activate() is done at this point
|
||||
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="preload" href="<%= assetPath %>/MaterialIcons-Regular.ttf" as="font" crossorigin>
|
||||
<link rel="preload" href="<%= assetPath %>/roboto-mono-nerd.ttf" as="font" crossorigin>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
14
types/mocks.d.ts
vendored
14
types/mocks.d.ts
vendored
@ -25,7 +25,13 @@ declare module "*.scss" {
|
||||
const content: string;
|
||||
export = content;
|
||||
}
|
||||
declare module "*.ttf" {
|
||||
const content: string;
|
||||
export = content;
|
||||
}
|
||||
|
||||
// Declare everything what's bundled as webpack's type="asset/resource"
|
||||
// Should be mocked for tests support in jestConfig.moduleNameMapper (currently in "/package.json")
|
||||
declare module "*.svg";
|
||||
declare module "*.jpg";
|
||||
declare module "*.png";
|
||||
declare module "*.eot";
|
||||
declare module "*.woff";
|
||||
declare module "*.woff2";
|
||||
declare module "*.ttf";
|
||||
|
||||
55
webpack.dev-server.ts
Normal file
55
webpack.dev-server.ts
Normal file
@ -0,0 +1,55 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
import Webpack from "webpack";
|
||||
import WebpackDevServer from "webpack-dev-server";
|
||||
import { webpackLensRenderer } from "./webpack.renderer";
|
||||
import { buildDir } from "./src/common/vars";
|
||||
import logger from "./src/common/logger";
|
||||
|
||||
export interface DevServer extends WebpackDevServer {
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates `webpack-dev-server`
|
||||
* API docs:
|
||||
* @url https://webpack.js.org/configuration/dev-server/
|
||||
* @url https://github.com/chimurai/http-proxy-middleware
|
||||
*/
|
||||
export function createDevServer(lensProxyPort: number): DevServer {
|
||||
const config = webpackLensRenderer({ showVars: false });
|
||||
const compiler = Webpack(config);
|
||||
|
||||
const server = new WebpackDevServer({
|
||||
headers: {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
allowedHosts: "all",
|
||||
host: "localhost",
|
||||
static: buildDir, // aka `devServer.contentBase` in webpack@4
|
||||
hot: "only", // use HMR only without errors
|
||||
liveReload: false,
|
||||
proxy: {
|
||||
"*": {
|
||||
router(req) {
|
||||
logger.silly(`[WEBPACK-DEV-SERVER]: proxy path ${req.path}`, req.headers);
|
||||
|
||||
return `http://localhost:${lensProxyPort}`;
|
||||
},
|
||||
secure: false, // allow http connections
|
||||
ws: true, // proxy websockets, e.g. terminal
|
||||
logLevel: "error",
|
||||
},
|
||||
},
|
||||
client: {
|
||||
overlay: false, // don't show warnings and errors on top of rendered app view
|
||||
logging: "error",
|
||||
},
|
||||
}, compiler);
|
||||
|
||||
logger.info(`[WEBPACK-DEV-SERVER]: created with options`, server.options);
|
||||
|
||||
return server;
|
||||
}
|
||||
@ -6,9 +6,11 @@
|
||||
|
||||
import path from "path";
|
||||
import type webpack from "webpack";
|
||||
import { sassCommonVars, isDevelopment, isProduction } from "./src/common/vars";
|
||||
import * as vars from "./src/common/vars";
|
||||
import { cssModulesWebpackRule, fontsLoaderWebpackRules, iconsAndImagesWebpackRules } from "./webpack.renderer";
|
||||
|
||||
export default function generateExtensionTypes(): webpack.Configuration {
|
||||
const { isDevelopment } = vars;
|
||||
const entry = "./src/extensions/extension-api.ts";
|
||||
const outDir = "./src/extensions/npm/extensions/dist";
|
||||
|
||||
@ -18,7 +20,7 @@ export default function generateExtensionTypes(): webpack.Configuration {
|
||||
target: "electron-renderer",
|
||||
entry,
|
||||
// this is the default mode, so we should make it explicit to silence the warning
|
||||
mode: isProduction ? "production" : "development",
|
||||
mode: isDevelopment ? "development" : "production",
|
||||
output: {
|
||||
filename: "extension-api.js",
|
||||
// need to be an absolute path
|
||||
@ -31,6 +33,10 @@ export default function generateExtensionTypes(): webpack.Configuration {
|
||||
optimization: {
|
||||
minimize: false, // speed up types compilation
|
||||
},
|
||||
ignoreWarnings: [
|
||||
/Critical dependency: the request of a dependency is an expression/, // see who is using request: "npm ls request"
|
||||
/require.extensions is not supported by webpack./, // handlebars
|
||||
],
|
||||
stats: "errors-warnings",
|
||||
module: {
|
||||
rules: [
|
||||
@ -52,47 +58,9 @@ export default function generateExtensionTypes(): webpack.Configuration {
|
||||
},
|
||||
},
|
||||
},
|
||||
// for src/renderer/components/fonts/roboto-mono-nerd.ttf
|
||||
// in src/renderer/components/dock/terminal.ts 95:25-65
|
||||
{
|
||||
test: /\.(ttf|eot|woff2?)$/,
|
||||
use: {
|
||||
loader: "url-loader",
|
||||
options: {
|
||||
name: "fonts/[name].[ext]",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(jpg|png|svg|map|ico)$/,
|
||||
use: {
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: "images/[name]-[hash:6].[ext]",
|
||||
esModule: false, // handle media imports in <template>, e.g <img src="../assets/logo.svg"> (react)
|
||||
},
|
||||
},
|
||||
},
|
||||
// for import scss files
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
"style-loader",
|
||||
"css-loader",
|
||||
"postcss-loader",
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
additionalData: `@import "${path.basename(sassCommonVars)}";`,
|
||||
sassOptions: {
|
||||
includePaths: [
|
||||
path.dirname(sassCommonVars),
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
cssModulesWebpackRule({ styleLoader: "style-loader" }),
|
||||
...fontsLoaderWebpackRules(),
|
||||
...iconsAndImagesWebpackRules(),
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
|
||||
@ -6,23 +6,23 @@
|
||||
import path from "path";
|
||||
import type webpack from "webpack";
|
||||
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
|
||||
import { isProduction, mainDir, buildDir, isDevelopment } from "./src/common/vars";
|
||||
import nodeExternals from "webpack-node-externals";
|
||||
import ProgressBarPlugin from "progress-bar-webpack-plugin";
|
||||
import * as vars from "./src/common/vars";
|
||||
import getTSLoader from "./src/common/getTSLoader";
|
||||
import CircularDependencyPlugin from "circular-dependency-plugin";
|
||||
import { iconsAndImagesWebpackRules } from "./webpack.renderer";
|
||||
|
||||
const configs: { (): webpack.Configuration }[] = [];
|
||||
|
||||
configs.push((): webpack.Configuration => {
|
||||
console.info("WEBPACK:main", vars);
|
||||
const { mainDir, buildDir, isDevelopment } = vars;
|
||||
|
||||
return {
|
||||
context: __dirname,
|
||||
target: "electron-main",
|
||||
mode: isProduction ? "production" : "development",
|
||||
devtool: isProduction ? "source-map" : "cheap-eval-source-map",
|
||||
mode: isDevelopment ? "development" : "production",
|
||||
devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
|
||||
cache: isDevelopment,
|
||||
entry: {
|
||||
main: path.resolve(mainDir, "index.ts"),
|
||||
@ -43,11 +43,11 @@ configs.push((): webpack.Configuration => {
|
||||
test: /\.node$/,
|
||||
use: "node-loader",
|
||||
},
|
||||
getTSLoader(/\.ts$/),
|
||||
getTSLoader({}, /\.ts$/),
|
||||
...iconsAndImagesWebpackRules(),
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
new ProgressBarPlugin(),
|
||||
new ForkTsCheckerPlugin(),
|
||||
|
||||
new CircularDependencyPlugin({
|
||||
|
||||
@ -4,61 +4,51 @@
|
||||
*/
|
||||
|
||||
import * as vars from "./src/common/vars";
|
||||
import { appName, buildDir, htmlTemplate, isDevelopment, isProduction, publicPath, rendererDir, sassCommonVars, webpackDevServerPort } from "./src/common/vars";
|
||||
import path from "path";
|
||||
import webpack from "webpack";
|
||||
import type webpack from "webpack";
|
||||
import HtmlWebpackPlugin from "html-webpack-plugin";
|
||||
import MiniCssExtractPlugin from "mini-css-extract-plugin";
|
||||
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
|
||||
import ProgressBarPlugin from "progress-bar-webpack-plugin";
|
||||
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
|
||||
import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
|
||||
import getTSLoader from "./src/common/getTSLoader";
|
||||
import CircularDependencyPlugin from "circular-dependency-plugin";
|
||||
|
||||
export default [
|
||||
webpackLensRenderer,
|
||||
];
|
||||
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
|
||||
|
||||
export function webpackLensRenderer({ showVars = true } = {}): webpack.Configuration {
|
||||
if (showVars) {
|
||||
console.info("WEBPACK:renderer", vars);
|
||||
}
|
||||
|
||||
const assetsFolderName = "assets";
|
||||
const { appName, buildDir, htmlTemplate, isDevelopment, publicPath, rendererDir } = vars;
|
||||
|
||||
return {
|
||||
context: __dirname,
|
||||
target: "electron-renderer",
|
||||
devtool: isDevelopment ? "cheap-source-map" : "source-map",
|
||||
devServer: {
|
||||
contentBase: buildDir,
|
||||
port: webpackDevServerPort,
|
||||
host: "localhost",
|
||||
hot: true,
|
||||
// to avoid cors errors when requests is from iframes
|
||||
disableHostCheck: true,
|
||||
headers: { "Access-Control-Allow-Origin": "*" },
|
||||
},
|
||||
name: "lens-app",
|
||||
mode: isProduction ? "production" : "development",
|
||||
mode: isDevelopment ? "development" : "production",
|
||||
// https://webpack.js.org/configuration/devtool/ (see description of each option)
|
||||
devtool: isDevelopment ? "cheap-module-source-map" : "source-map",
|
||||
cache: isDevelopment,
|
||||
entry: {
|
||||
[appName]: path.resolve(rendererDir, "bootstrap.tsx"),
|
||||
},
|
||||
output: {
|
||||
libraryTarget: "global",
|
||||
library: "",
|
||||
globalObject: "this",
|
||||
publicPath,
|
||||
path: buildDir,
|
||||
filename: "[name].js",
|
||||
chunkFilename: "chunks/[name].js",
|
||||
assetModuleFilename: `${assetsFolderName}/[name][ext][query]`,
|
||||
},
|
||||
stats: {
|
||||
warningsFilter: [
|
||||
/Critical dependency: the request of a dependency is an expression/,
|
||||
/export '.*' was not found in/,
|
||||
],
|
||||
watchOptions: {
|
||||
ignored: /node_modules/, // https://webpack.js.org/configuration/watch/
|
||||
},
|
||||
ignoreWarnings: [
|
||||
/Critical dependency: the request of a dependency is an expression/,
|
||||
/require.extensions is not supported by webpack./, // handlebars
|
||||
/\[ReactRefreshPlugin] .*?HMR.*? is not enabled/, // enabled in webpack.dev-server
|
||||
],
|
||||
resolve: {
|
||||
extensions: [
|
||||
".js", ".jsx", ".json",
|
||||
@ -77,71 +67,18 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
test: /\.node$/,
|
||||
use: "node-loader",
|
||||
},
|
||||
getTSLoader(/\.tsx?$/),
|
||||
{
|
||||
test: /\.(jpg|png|svg|map|ico)$/,
|
||||
use: {
|
||||
loader: "file-loader",
|
||||
options: {
|
||||
name: "images/[name]-[hash:6].[ext]",
|
||||
esModule: false, // handle media imports in <template>, e.g <img src="../assets/logo.svg"> (vue/react?)
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(ttf|eot|woff2?)$/,
|
||||
use: {
|
||||
loader: "url-loader",
|
||||
options: {
|
||||
name: "fonts/[name].[ext]",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
sourceMap: isDevelopment,
|
||||
modules: {
|
||||
auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
|
||||
mode: "local", // :local(.selector) by default
|
||||
localIdentName: "[name]__[local]--[hash:base64:5]",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
sourceMap: isDevelopment,
|
||||
postcssOptions: {
|
||||
plugins: [
|
||||
"tailwindcss",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: isDevelopment,
|
||||
additionalData: `@import "${path.basename(sassCommonVars)}";`,
|
||||
sassOptions: {
|
||||
includePaths: [
|
||||
path.dirname(sassCommonVars),
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
getTSLoader({
|
||||
getCustomTransformers: () => ({
|
||||
before: isDevelopment ? [require("react-refresh-typescript")()] : [],
|
||||
}),
|
||||
}),
|
||||
cssModulesWebpackRule(),
|
||||
...iconsAndImagesWebpackRules(),
|
||||
...fontsLoaderWebpackRules(),
|
||||
],
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new ProgressBarPlugin(),
|
||||
new ForkTsCheckerPlugin(),
|
||||
|
||||
// see also: https://github.com/Microsoft/monaco-editor-webpack-plugin#options
|
||||
@ -156,6 +93,10 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
filename: `${appName}.html`,
|
||||
template: htmlTemplate,
|
||||
inject: true,
|
||||
hash: true,
|
||||
templateParameters: {
|
||||
assetPath: `${publicPath}${assetsFolderName}`,
|
||||
},
|
||||
}),
|
||||
|
||||
new CircularDependencyPlugin({
|
||||
@ -168,8 +109,90 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
|
||||
filename: "[name].css",
|
||||
}),
|
||||
|
||||
isDevelopment && new webpack.HotModuleReplacementPlugin(),
|
||||
isDevelopment && new ReactRefreshWebpackPlugin(),
|
||||
].filter(Boolean),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Import icons and image files.
|
||||
* Read more about asset types: https://webpack.js.org/guides/asset-modules/
|
||||
*/
|
||||
export function iconsAndImagesWebpackRules(): webpack.RuleSetRule[] {
|
||||
return [
|
||||
{
|
||||
test: /\.svg$/,
|
||||
type: "asset/inline", // data:image/svg+xml;base64,...
|
||||
},
|
||||
{
|
||||
test: /\.(jpg|png|ico)$/,
|
||||
type: "asset/resource", // path to file, e.g. "/static/build/assets/*"
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Import custom fonts as URL.
|
||||
*/
|
||||
export function fontsLoaderWebpackRules(): webpack.RuleSetRule[] {
|
||||
return [
|
||||
{
|
||||
test: /\.(ttf|eot|woff2?)$/,
|
||||
type: "asset/resource",
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Import CSS or SASS styles with modules support (*.module.scss)
|
||||
* @param {string} styleLoader
|
||||
*/
|
||||
export function cssModulesWebpackRule(
|
||||
{
|
||||
styleLoader = vars.isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
|
||||
} = {}): webpack.RuleSetRule {
|
||||
const { isDevelopment, sassCommonVars } = vars;
|
||||
|
||||
return {
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
styleLoader,
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
sourceMap: isDevelopment,
|
||||
modules: {
|
||||
auto: /\.module\./i, // https://github.com/webpack-contrib/css-loader#auto
|
||||
mode: "local", // :local(.selector) by default
|
||||
localIdentName: "[name]__[local]--[hash:base64:5]",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "postcss-loader",
|
||||
options: {
|
||||
sourceMap: isDevelopment,
|
||||
postcssOptions: {
|
||||
plugins: [
|
||||
"tailwindcss",
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: isDevelopment,
|
||||
additionalData: `@import "${path.basename(sassCommonVars)}";`,
|
||||
sassOptions: {
|
||||
includePaths: [
|
||||
path.dirname(sassCommonVars),
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export default webpackLensRenderer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user