1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

chore: Consolidate infrastructure of webpack to ts to make it scriptable

Co-authored-by: Janne Savolainen <janne.savolainen@live.fi>
Signed-off-by: Iku-turso <mikko.aspiala@gmail.com>
Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Iku-turso 2023-04-27 15:02:25 +03:00
parent f2f6cc500c
commit 9a4b02becb
24 changed files with 230 additions and 190 deletions

21
package-lock.json generated
View File

@ -36585,6 +36585,7 @@
"@types/webpack-env": "^1.18.0",
"css-loader": "^6.7.2",
"fork-ts-checker-webpack-plugin": "^7.3.0",
"fs-extra": "^9.0.1",
"mini-css-extract-plugin": "^2.7.3",
"sass": "^1.62.1",
"sass-loader": "^13.2.0",
@ -36593,6 +36594,18 @@
"ts-loader": "^9.4.1",
"webpack": "^5.81.0",
"webpack-cli": "^4.10.0"
},
"devDependencies": {
"@async-fn/jest": "^1.6.4",
"@k8slens/test-utils": "^1.0.0-alpha.1",
"@k8slens/typescript": "^6.5.0-alpha.2",
"ts-node": "^10.9.1",
"webpack-node-externals": "^3.0.0"
},
"peerDependencies": {
"@ogre-tools/fp": "^15.6",
"@ogre-tools/injectable": "^15.6.1",
"lodash": "^4.17.21"
}
},
"packages/infrastructure/webpack/node_modules/sass-loader": {
@ -41520,17 +41533,23 @@
"@k8slens/webpack": {
"version": "file:packages/infrastructure/webpack",
"requires": {
"@async-fn/jest": "^1.6.4",
"@k8slens/test-utils": "^1.0.0-alpha.1",
"@k8slens/typescript": "^6.5.0-alpha.2",
"@types/webpack-env": "^1.18.0",
"css-loader": "^6.7.2",
"fork-ts-checker-webpack-plugin": "^7.3.0",
"fs-extra": "^9.0.1",
"mini-css-extract-plugin": "^2.7.3",
"sass": "^1.62.1",
"sass-loader": "^13.2.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.3.2",
"ts-loader": "^9.4.1",
"ts-node": "^10.9.1",
"webpack": "^5.81.0",
"webpack-cli": "^4.10.0"
"webpack-cli": "^4.10.0",
"webpack-node-externals": "^3.0.0"
},
"dependencies": {
"sass-loader": {

View File

@ -1,5 +0,0 @@
module.exports = {
configForNode: require("./src/node-config"),
configForReact: require("./src/react-config"),
getMultiExportConfig: require("./src/get-multi-export-config"),
};

View File

@ -0,0 +1,3 @@
export { configForNode } from "./src/node-config";
export { configForReact } from "./src/react-config";
export { getMultiExportConfig } from "./src/get-multi-export-config";

View File

@ -12,7 +12,7 @@
"type": "git",
"url": "git+https://github.com/lensapp/lens.git"
},
"main": "index.js",
"main": "dist/index.js",
"author": {
"name": "OpenLens Authors",
"email": "info@k8slens.dev"
@ -20,12 +20,14 @@
"license": "MIT",
"homepage": "https://github.com/lensapp/lens",
"scripts": {
"build": "webpack",
"test:unit": "jest --coverage --runInBand"
},
"dependencies": {
"@types/webpack-env": "^1.18.0",
"css-loader": "^6.7.2",
"fork-ts-checker-webpack-plugin": "^7.3.0",
"fs-extra": "^9.0.1",
"mini-css-extract-plugin": "^2.7.3",
"sass": "^1.62.1",
"sass-loader": "^13.2.0",
@ -34,5 +36,17 @@
"ts-loader": "^9.4.1",
"webpack": "^5.81.0",
"webpack-cli": "^4.10.0"
},
"peerDependencies": {
"@ogre-tools/fp": "^15.6",
"@ogre-tools/injectable": "^15.6.1",
"lodash": "^4.17.21"
},
"devDependencies": {
"@async-fn/jest": "^1.6.4",
"@k8slens/test-utils": "^1.0.0-alpha.1",
"@k8slens/typescript": "^6.5.0-alpha.2",
"ts-node": "^10.9.1",
"webpack-node-externals": "^3.0.0"
}
}

View File

@ -123,7 +123,7 @@ exports[`get-multi-export-config given maximal package.json, when creating confi
{
test: /\\.s?css$/,
use: [
{ some: 'miniCssExtractPluginLoader' },
'miniCssExtractPluginLoader',
{
loader: 'css-loader',
options: {

View File

@ -1,14 +1,15 @@
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
import getMultiExportConfig from "./get-multi-export-config";
import { getMultiExportConfig } from "./get-multi-export-config";
import path from "path";
import { inspect } from "util";
const getReactConfigFor = require("./get-react-config");
import { getReactConfigFor } from "./get-react-config-for";
import type { Configuration } from "webpack";
const resolvePathFake = path.posix.resolve;
describe("get-multi-export-config", () => {
let configs;
let maximalPackageJson;
let configs: Configuration[];
let maximalPackageJson: any;
beforeEach(() => {
maximalPackageJson = {
@ -61,7 +62,7 @@ describe("get-multi-export-config", () => {
workingDirectory: "/some-working-directory",
getReactConfig: getReactConfigFor({
miniCssExtractPluginLoader: { some: "miniCssExtractPluginLoader" },
miniCssExtractPluginLoader: "miniCssExtractPluginLoader",
}),
});
});
@ -93,10 +94,10 @@ describe("get-multi-export-config", () => {
},
].forEach((scenario) => {
describe(scenario.name, () => {
let config;
let config: Configuration;
beforeEach(() => {
config = configs.find(({ name }) => name === scenario.entrypoint);
config = configs.find(({ name }) => name === scenario.entrypoint)!;
});
it("has correct entrypoint", () => {
@ -112,7 +113,7 @@ describe("get-multi-export-config", () => {
it("has correct declaration directory", () => {
expect(
config.plugins.find(
config.plugins!.find(
({ constructor }) => constructor === ForkTsCheckerPlugin
)
).toHaveProperty(
@ -129,9 +130,7 @@ describe("get-multi-export-config", () => {
expect(() => {
getMultiExportConfig(maximalPackageJson, {
getNodeConfig: () => nodeConfigStub,
getReactConfig: () => reactConfigStub,
joinPath: resolvePathFake,
});
}).toThrow(
'Tried to get multi export config but exports of package.json for "some-name" did not match exactly:'
@ -143,9 +142,7 @@ describe("get-multi-export-config", () => {
expect(() => {
getMultiExportConfig(maximalPackageJson, {
getNodeConfig: () => nodeConfigStub,
getReactConfig: () => reactConfigStub,
joinPath: resolvePathFake,
});
}).toThrow(
'Tried to get multi export config but exports of package.json for "some-name" did not match exactly:'
@ -157,9 +154,7 @@ describe("get-multi-export-config", () => {
expect(() => {
getMultiExportConfig(maximalPackageJson, {
getNodeConfig: () => nodeConfigStub,
getReactConfig: () => reactConfigStub,
joinPath: resolvePathFake,
});
}).toThrow(
'Tried to get multi export config but exports of package.json for "some-name" did not match exactly:'
@ -171,9 +166,7 @@ describe("get-multi-export-config", () => {
expect(() => {
getMultiExportConfig(maximalPackageJson, {
getNodeConfig: () => nodeConfigStub,
getReactConfig: () => reactConfigStub,
joinPath: resolvePathFake,
});
}).toThrow(
'Tried to get multi export config for package "some-name" but configuration is missing.'
@ -185,9 +178,7 @@ describe("get-multi-export-config", () => {
expect(() => {
getMultiExportConfig(maximalPackageJson, {
getNodeConfig: () => nodeConfigStub,
getReactConfig: () => reactConfigStub,
joinPath: resolvePathFake,
});
}).toThrow(
'Tried to get multi export config for package "some-name" but build types "some-invalid" were not any of "node", "react".'
@ -200,9 +191,7 @@ describe("get-multi-export-config", () => {
expect(() => {
getMultiExportConfig(maximalPackageJson, {
getNodeConfig: () => nodeConfigStub,
getReactConfig: () => reactConfigStub,
joinPath: resolvePathFake,
});
}).toThrow(
'Tried to get multi export config for package "some-name" but entrypoint was missing for "./some-entrypoint".'
@ -210,14 +199,6 @@ describe("get-multi-export-config", () => {
});
});
const nodeConfigStub = {
stub: "node",
output: {
some: "value",
path: "/some-build-directory",
},
};
const reactConfigStub = {
stub: "react",
@ -225,4 +206,4 @@ const reactConfigStub = {
some: "other-value",
path: "/some-build-directory",
},
};
} as unknown as Configuration;

View File

@ -1,28 +1,37 @@
const getNodeConfig = require("./get-node-config");
const getReactConfigFor = require("./get-react-config");
const path = require("path");
const {
map,
import {
filter,
fromPairs,
isEqual,
keys,
fromPairs,
toPairs,
reject,
values,
map,
nth,
filter,
} = require("lodash/fp");
const { pipeline } = require("@ogre-tools/fp");
reject,
toPairs,
values,
} from "lodash/fp";
module.exports = (
packageJson,
import { pipeline } from "@ogre-tools/fp";
import path from "path";
import { getReactConfigFor } from "./get-react-config-for";
import { getNodeConfig } from "./get-node-config";
dependencies = {
type Dependencies = {
resolvePath: typeof path.resolve;
workingDirectory: string;
getReactConfig: ReturnType<typeof getReactConfigFor>;
};
export const getMultiExportConfig = (
packageJson: any,
_dependencies: Partial<Dependencies>
) => {
const dependencies: Dependencies = {
resolvePath: path.resolve,
workingDirectory: process.cwd(),
getReactConfig: getReactConfigFor()
}
) => {
getReactConfig: getReactConfigFor(),
..._dependencies,
};
if (!packageJson.lensMultiExportConfig) {
throw new Error(
`Tried to get multi export config for package "${packageJson.name}" but configuration is missing.`
@ -90,7 +99,7 @@ module.exports = (
);
};
const toExpectedExport = (externalImportPath) => {
const toExpectedExport = (externalImportPath: string) => {
const posixJoinForPackageJson = path.posix.join;
const entrypointPath = `./${posixJoinForPackageJson(
@ -116,10 +125,13 @@ const toExpectedExport = (externalImportPath) => {
};
const toExportSpecificWebpackConfigFor =
(dependencies) =>
([externalImportPath, { buildType, entrypoint }]) => {
const outputDirectory = dependencies.resolvePath(
dependencies.workingDirectory,
(dependencies: Dependencies) =>
([externalImportPath, { buildType, entrypoint }]: [
string,
{ buildType: string; entrypoint: string }
]) => {
const outputDirectory = dependencies.resolvePath!(
dependencies.workingDirectory!,
"dist",
externalImportPath
);
@ -129,7 +141,7 @@ const toExportSpecificWebpackConfigFor =
entrypointFilePath: entrypoint,
outputDirectory,
})
: dependencies.getReactConfig({
: dependencies.getReactConfig!({
entrypointFilePath: entrypoint,
outputDirectory,
});

View File

@ -1,12 +1,17 @@
const ForkTsCheckerPlugin = require("fork-ts-checker-webpack-plugin");
const { MakePeerDependenciesExternalPlugin } = require("./plugins/make-peer-dependencies-external");
const { ProtectFromImportingNonDependencies } = require("./plugins/protect-from-importing-non-dependencies");
import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
import type { Configuration } from "webpack";
import { MakePeerDependenciesExternalPlugin } from "./plugins/make-peer-dependencies-external";
import { ProtectFromImportingNonDependencies } from "./plugins/protect-from-importing-non-dependencies";
/**
*
* @returns {import("webpack").Configuration}
*/
module.exports = ({ entrypointFilePath, outputDirectory }) => ({
export type Paths = {
entrypointFilePath: string;
outputDirectory: string;
};
export const getNodeConfig = ({
entrypointFilePath,
outputDirectory,
}: Paths): Configuration => ({
name: entrypointFilePath,
entry: { index: entrypointFilePath },
target: "node",
@ -45,13 +50,13 @@ module.exports = ({ entrypointFilePath, outputDirectory }) => ({
path: outputDirectory,
filename: (pathData) =>
pathData.chunk.name === "index"
pathData.chunk?.name === "index"
? "index.js"
: `${pathData.chunk.name}/index.js`,
: `${pathData.chunk?.name}/index.js`,
library: {
type: "commonjs2"
}
type: "commonjs2",
},
},
externalsPresets: { node: true },

View File

@ -1,18 +1,20 @@
const getNodeConfig = require("./get-node-config");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
import { getNodeConfig, Paths } from "./get-node-config";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import type { Configuration } from "webpack";
module.exports =
export const getReactConfigFor =
({ miniCssExtractPluginLoader = MiniCssExtractPlugin.loader } = {}) =>
({ entrypointFilePath, outputDirectory }) => {
({ entrypointFilePath, outputDirectory }: Paths): Configuration => {
const nodeConfig = getNodeConfig({
entrypointFilePath,
outputDirectory,
});
return {
...nodeConfig,
plugins: [
...nodeConfig.plugins,
...nodeConfig.plugins!,
new MiniCssExtractPlugin({
filename: "[name].css",
@ -23,7 +25,7 @@ module.exports =
...nodeConfig.module,
rules: [
...nodeConfig.module.rules,
...nodeConfig.module!.rules!,
{
test: /\.s?css$/,

View File

@ -1,7 +0,0 @@
const path = require("path");
const getNodeConfig = require("./get-node-config");
module.exports = getNodeConfig({
entrypointFilePath: "./index.ts",
outputDirectory: path.resolve(process.cwd(), "dist"),
});

View File

@ -0,0 +1,7 @@
import path from "path";
import { getNodeConfig } from "./get-node-config";
export const configForNode = getNodeConfig({
entrypointFilePath: "./index.ts",
outputDirectory: path.resolve(process.cwd(), "dist"),
});

View File

@ -1,9 +1,7 @@
const getDependencyName = (requireString) => {
export const getDependencyName = (requireString: string) => {
const [a, b] = requireString.split("/");
const scoped = a.startsWith("@");
return scoped ? `${a}/${b}` : a;
};
module.exports = { getDependencyName };

View File

@ -1,29 +0,0 @@
const ExternalModuleFactoryPlugin = require("webpack/lib/ExternalModuleFactoryPlugin");
const path = require("path");
const {
toModuleMatcherRegExp,
} = require("./to-module-matcher-reg-exp/to-module-matcher-reg-exp");
class MakePeerDependenciesExternalPlugin {
apply(compiler) {
compiler.hooks.compile.tap("compile", (params) => {
const peerDependencies = getPeerDependencies();
new ExternalModuleFactoryPlugin(
compiler.options.output.library.type,
peerDependencies.map(toModuleMatcherRegExp)
).apply(params.normalModuleFactory);
});
}
}
const getPeerDependencies = () => {
const pathToPackageJson = path.resolve(process.cwd(), "package.json");
const packageJson = require(pathToPackageJson);
return Object.keys(packageJson.peerDependencies || {});
};
module.exports = { MakePeerDependenciesExternalPlugin };

View File

@ -0,0 +1,26 @@
// @ts-ignore
import ExternalModuleFactoryPlugin from "webpack/lib/ExternalModuleFactoryPlugin";
import path from "path";
import { toModuleMatcherRegExp } from "./to-module-matcher-reg-exp/to-module-matcher-reg-exp";
import { readJsonSync } from "fs-extra";
export class MakePeerDependenciesExternalPlugin {
apply(compiler: any) {
compiler.hooks.compile.tap("compile", (params: any) => {
const peerDependencies = getPeerDependencies();
new ExternalModuleFactoryPlugin(
compiler.options.output.library.type,
peerDependencies.map(toModuleMatcherRegExp)
).apply(params.normalModuleFactory);
});
}
}
const getPeerDependencies = () => {
const pathToPackageJson = path.resolve(process.cwd(), "package.json");
const packageJson = readJsonSync(pathToPackageJson);
return Object.keys(packageJson.peerDependencies || {});
};

View File

@ -1,58 +0,0 @@
const path = require("path");
const { getDependencyName } = require("./get-dependency-name/get-dependency-name");
const pathToPackageJson = path.resolve(process.cwd(), "package.json");
class ProtectFromImportingNonDependencies {
apply(compiler) {
const dependencies = getDependenciesAndPeerDependencies();
const nodeModulesToBeResolved = new Set();
compiler.hooks.normalModuleFactory.tap("irrelevant", (normalModuleFactory) => {
normalModuleFactory.hooks.resolve.tap("irrelevant", (toBeResolved) => {
const isSassDependency = toBeResolved.request.endsWith(".scss");
const isLocalDependency = toBeResolved.request.startsWith(".");
const isDependencyOfDependency =
toBeResolved.context.includes("node_modules");
const dependencyName = getDependencyName(toBeResolved.request);
const dependencyWeAreInterested =
!isSassDependency && !isLocalDependency && !isDependencyOfDependency && dependencyName;
if (dependencyWeAreInterested) {
nodeModulesToBeResolved.add(dependencyName);
}
});
}
);
compiler.hooks.afterCompile.tap("compile", () => {
const notSpecifiedDependencies = [...nodeModulesToBeResolved].filter(
(x) => !dependencies.includes(x)
);
if (notSpecifiedDependencies.length) {
throw new Error(
`Tried to import dependencies that are not specified in the package.json "${pathToPackageJson}". Add "${notSpecifiedDependencies.join(
'", "'
)}" to dependencies or peerDependencies.`
);
}
});
}
}
const getDependenciesAndPeerDependencies = () => {
const packageJson = require(pathToPackageJson);
const dependencies = Object.keys(packageJson.dependencies || {});
const peerDependencies = Object.keys(packageJson.peerDependencies || {});
return [...dependencies, ...peerDependencies];
};
module.exports = {
ProtectFromImportingNonDependencies,
};

View File

@ -0,0 +1,63 @@
import path from "path";
import { getDependencyName } from "./get-dependency-name/get-dependency-name";
import { readJsonSync } from "fs-extra";
const pathToPackageJson = path.resolve(process.cwd(), "package.json");
export class ProtectFromImportingNonDependencies {
apply(compiler: any) {
const dependencies = getDependenciesAndPeerDependencies();
const nodeModulesToBeResolved = new Set();
compiler.hooks.normalModuleFactory.tap(
"irrelevant",
(normalModuleFactory: any) => {
normalModuleFactory.hooks.resolve.tap(
"irrelevant",
(toBeResolved: any) => {
const isSassDependency = toBeResolved.request.endsWith(".scss");
const isLocalDependency = toBeResolved.request.startsWith(".");
const isDependencyOfDependency =
toBeResolved.context.includes("node_modules");
const dependencyName = getDependencyName(toBeResolved.request);
const dependencyWeAreInterested =
!isSassDependency &&
!isLocalDependency &&
!isDependencyOfDependency &&
dependencyName;
if (dependencyWeAreInterested) {
nodeModulesToBeResolved.add(dependencyName);
}
}
);
}
);
compiler.hooks.afterCompile.tap("compile", () => {
const notSpecifiedDependencies = [...nodeModulesToBeResolved].filter(
(x: any) => !dependencies.includes(x)
);
if (notSpecifiedDependencies.length) {
throw new Error(
`Tried to import dependencies that are not specified in the package.json "${pathToPackageJson}". Add "${notSpecifiedDependencies.join(
'", "'
)}" to dependencies or peerDependencies.`
);
}
});
}
}
const getDependenciesAndPeerDependencies = () => {
const packageJson = readJsonSync(pathToPackageJson);
const dependencies = Object.keys(packageJson.dependencies || {});
const peerDependencies = Object.keys(packageJson.peerDependencies || {});
return [...dependencies, ...peerDependencies];
};

View File

@ -1,3 +0,0 @@
const toModuleMatcherRegExp = x => new RegExp(`^${x}(/.*)*$`);
module.exports = { toModuleMatcherRegExp };

View File

@ -1,7 +1,7 @@
import { toModuleMatcherRegExp } from "./to-module-matcher-reg-exp";
describe('to-module-matcher-reg-exp', () => {
let regExp;
let regExp: RegExp;
beforeEach(() => {
regExp = toModuleMatcherRegExp("some-package");
@ -10,7 +10,7 @@ describe('to-module-matcher-reg-exp', () => {
it('given exactly matching package, matches', () => {
const targetString = 'some-package';
const [match] = targetString.match(regExp);
const [match] = targetString.match(regExp)!;
expect(match).toBeTruthy()
});
@ -18,7 +18,7 @@ describe('to-module-matcher-reg-exp', () => {
it('given matching package with entrypoint, matches', () => {
const targetString = 'some-package/some-entrypoint';
const [match] = targetString.match(regExp);
const [match] = targetString.match(regExp)!;
expect(match).toBeTruthy()
});
@ -26,7 +26,7 @@ describe('to-module-matcher-reg-exp', () => {
it('given matching package with directory, matches', () => {
const targetString = 'some-package/some-directory/some-other-directory';
const [match] = targetString.match(regExp);
const [match] = targetString.match(regExp)!;
expect(match).toBeTruthy()
});

View File

@ -0,0 +1 @@
export const toModuleMatcherRegExp = (x: string) => new RegExp(`^${x}(/.*)*$`);

View File

@ -1,7 +0,0 @@
const path = require("path");
const getReactConfig = require("./get-react-config");
module.exports = getReactConfig()({
entrypointFilePath: "./index.ts",
outputDirectory: path.resolve(process.cwd(), "dist"),
});

View File

@ -0,0 +1,7 @@
import path from "path";
import { getReactConfigFor } from "./get-react-config-for";
export const configForReact = getReactConfigFor()({
entrypointFilePath: "./index.ts",
outputDirectory: path.resolve(process.cwd(), "dist"),
});

View File

@ -0,0 +1,4 @@
{
"extends": "@k8slens/typescript/config/base.json",
"include": ["**/*.ts", "**/*.tsx"],
}

View File

@ -0,0 +1,7 @@
import { configForNode } from "./src/node-config";
import nodeExternals from "webpack-node-externals";
export default {
...configForNode,
externals: [nodeExternals({ modulesFromFile: true })],
};