@workleap/webpack-configs 1.5.2 → 1.5.4

package/src/dev.ts

@@ -0,0 +1,233 @@
+import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
+import type { ReactRefreshPluginOptions } from "@pmmmwh/react-refresh-webpack-plugin/types/lib/types.d.ts";
+import type { Config as SvgrOptions } from "@svgr/core";
+import type { Config as SwcConfig } from "@swc/core";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import { createRequire } from "node:module";
+import path from "node:path";
+import webpack from "webpack";
+import type { ServerOptions } from "webpack-dev-server";
+import { applyTransformers, type WebpackConfigTransformer } from "./transformers/applyTransformers.ts";
+import { isNil, isObject } from "./utils.ts";
+
+// Add the "devServer" option to WebpackConfig typings.
+import "webpack-dev-server";
+import type { WebpackConfig } from "./types.ts";
+
+// Aliases
+const DefinePlugin = webpack.DefinePlugin;
+
+// Using node:module.createRequire until
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve
+// is available
+const require = createRequire(import.meta.url);
+
+export function defineDevHtmlWebpackPluginConfig(options: HtmlWebpackPlugin.Options = {}): HtmlWebpackPlugin.Options {
+    const {
+        template = path.resolve("./public/index.html"),
+        ...rest
+    } = options;
+
+    return {
+        ...rest,
+        template
+    };
+}
+
+export function defineFastRefreshPluginConfig(options: ReactRefreshPluginOptions = {}) {
+    return options;
+}
+
+export interface DefineDevConfigOptions {
+    entry?: string;
+    https?: boolean | ServerOptions | undefined;
+    host?: string;
+    port?: number;
+    publicPath?: `${string}/` | "auto";
+    cache?: boolean;
+    moduleRules?: NonNullable<WebpackConfig["module"]>["rules"];
+    plugins?: WebpackConfig["plugins"];
+    htmlWebpackPlugin?: boolean | HtmlWebpackPlugin.Options;
+    fastRefresh?: boolean | ReactRefreshPluginOptions;
+    cssModules?: boolean;
+    overlay?: false;
+    svgr?: boolean | SvgrOptions;
+    environmentVariables?: Record<string, unknown>;
+    transformers?: WebpackConfigTransformer[];
+    verbose?: boolean;
+}
+
+function preflight() {
+    if (!require.resolve("webpack-dev-server")) {
+        throw new Error("[webpack-configs] To use the \"dev\" config, install https://www.npmjs.com/package/webpack-dev-server as a \"devDependency\".");
+    }
+}
+
+function trySetSwcFastRefresh(config: SwcConfig, enabled: boolean) {
+    if (config?.jsc?.transform?.react) {
+        config.jsc.transform.react.refresh = enabled;
+    }
+
+    return config;
+}
+
+function trySetFastRefreshOverlay(options: ReactRefreshPluginOptions, overlay?: boolean) {
+    if (overlay === false && isNil(options.overlay)) {
+        options.overlay = false;
+    }
+
+    return options;
+}
+
+export function defineDevConfig(swcConfig: SwcConfig, options: DefineDevConfigOptions = {}) {
+    preflight();
+
+    const {
+        entry = path.resolve("./src/index.tsx"),
+        https = false,
+        host = "localhost",
+        port = 8080,
+        publicPath,
+        cache = true,
+        moduleRules = [],
+        plugins = [],
+        htmlWebpackPlugin = defineDevHtmlWebpackPluginConfig(),
+        fastRefresh = true,
+        cssModules = false,
+        overlay,
+        svgr = true,
+        // Using an empty object literal as the default value to ensure
+        // "process.env" is always available.
+        environmentVariables = {},
+        transformers = [],
+        verbose = false
+    } = options;
+
+    const config: WebpackConfig = {
+        mode: "development",
+        target: "web",
+        devtool: "eval-cheap-module-source-map",
+        devServer: {
+            // According to the Fast Refresh plugin documentation, hot should be "true" to enable Fast Refresh:
+            // https://github.com/pmmmwh/react-refresh-webpack-plugin#usage.
+            hot: true,
+            host,
+            port,
+            historyApiFallback: true,
+            client: (overlay === false || fastRefresh) ? {
+                overlay: false
+            } : undefined,
+            server: https ? {
+                type: "https",
+                options: isObject(https) ? https : undefined
+            } : undefined
+        },
+        entry,
+        output: {
+            // The trailing / is very important, otherwise paths will not be resolved correctly.
+            publicPath: publicPath ?? `${https ? "https" : "http"}://${host}:${port}/`
+        },
+        cache: cache && {
+            type: "memory",
+            maxGenerations: 1
+        },
+        // See: https://webpack.js.org/guides/build-performance/#avoid-extra-optimization-steps
+        optimization: {
+            // Keep "runtimeChunk" to false, otherwise it breaks module federation
+            // (at least for the remote application).
+            runtimeChunk: false,
+            removeAvailableModules: false,
+            removeEmptyChunks: false,
+            splitChunks: false
+        },
+        infrastructureLogging: verbose ? {
+            appendOnly: true,
+            level: "verbose",
+            debug: /PackFileCache/
+        } : undefined,
+        module: {
+            rules: [
+                {
+                    test: /\.(js|jsx|ts|tsx)$/i,
+                    exclude: /node_modules/,
+                    loader: require.resolve("swc-loader"),
+                    options: trySetSwcFastRefresh(swcConfig, fastRefresh !== false)
+                },
+                {
+                    // https://stackoverflow.com/questions/69427025/programmatic-webpack-jest-esm-cant-resolve-module-without-js-file-exten
+                    test: /\.js$/i,
+                    include: /node_modules/,
+                    resolve: {
+                        fullySpecified: false
+                    }
+                },
+                {
+                    test: /\.css$/i,
+                    use: [
+                        { loader: require.resolve("style-loader") },
+                        {
+                            loader: require.resolve("css-loader"),
+                            options: cssModules
+                                ? {
+                                    // Must match the number of loaders applied before this one.
+                                    importLoaders: 1,
+                                    modules: true
+                                }
+                                : undefined
+                        },
+                        { loader: require.resolve("postcss-loader") }
+                    ]
+                },
+                ...(svgr
+                    ? [
+                        {
+                            test: /\.svg$/i,
+                            loader: require.resolve("@svgr/webpack"),
+                            options: isObject(svgr) ? svgr : undefined
+                        },
+                        {
+                            test: /\.(png|jpe?g|gif)$/i,
+                            type: "asset/resource"
+                        }
+                    ]
+                    : [
+                        {
+                            test: /\.(png|jpe?g|gif|svg)$/i,
+                            type: "asset/resource"
+                        }
+                    ]),
+                ...moduleRules
+            ]
+        },
+        resolve: {
+            extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
+            alias: {
+                // Fixes Module not found: Error: Can't resolve '@swc/helpers/_/_class_private_field_init'.
+                // View https://github.com/vercel/next.js/pull/38174 for more information and https://github.com/vercel/next.js/issues/48593.
+                "@swc/helpers": path.dirname(require.resolve("@swc/helpers/package.json"))
+            }
+        },
+        plugins: [
+            htmlWebpackPlugin && new HtmlWebpackPlugin(isObject(htmlWebpackPlugin) ? htmlWebpackPlugin : defineDevHtmlWebpackPluginConfig()),
+            // Stringify the environment variables because the plugin does a direct text replacement. Otherwise, "production" would become production
+            // after replacement and cause an undefined var error.
+            // For more information, view: https://webpack.js.org/plugins/define-plugin/.
+            new DefinePlugin({
+                "process.env": Object.keys(environmentVariables).reduce((acc, key) => {
+                    acc[key] = JSON.stringify(environmentVariables[key]);
+
+                    return acc;
+                }, {} as Record<string, string>)
+            }),
+            fastRefresh && new ReactRefreshWebpackPlugin(trySetFastRefreshOverlay(isObject(fastRefresh) ? fastRefresh : defineFastRefreshPluginConfig(), overlay)),
+            ...plugins
+        ].filter(Boolean)
+    };
+
+    const transformedConfig = applyTransformers(config, transformers, {
+        environment: "dev",
+        verbose
+    });
+
+    return transformedConfig;
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from "./build.ts";
+export * from "./dev.ts";
+export type { WebpackConfigTransformer, WebpackConfigTransformerContext } from "./transformers/applyTransformers.ts";
+export * from "./transformers/moduleRules.ts";
+export * from "./transformers/plugins.ts";
+export * from "./types.ts";
+

package/src/transformers/applyTransformers.ts

@@ -0,0 +1,28 @@
+import type { WebpackConfig } from "../types.ts";
+
+export interface WebpackConfigTransformerContext {
+    environment: "dev" | "build";
+    verbose: boolean;
+}
+
+export type WebpackConfigTransformer = (config: WebpackConfig, context: WebpackConfigTransformerContext) => WebpackConfig;
+
+export function applyTransformers(config: WebpackConfig, transformers: WebpackConfigTransformer[], context: WebpackConfigTransformerContext) {
+    let count = 0;
+
+    const transformedConfig = transformers.reduce((acc, transformer) => {
+        const newConfig = transformer(acc, context);
+
+        count += 1;
+
+        return newConfig;
+    }, config);
+
+    if (context.verbose) {
+        if (count > 0) {
+            console.log(`[webpack-configs] Applied ${count} configuration transformers.`);
+        }
+    }
+
+    return transformedConfig;
+}

package/src/transformers/moduleRules.ts

@@ -0,0 +1,229 @@
+import path from "node:path";
+import type { RuleSetRule, RuleSetUseItem } from "webpack";
+import type { WebpackConfig } from "../types.ts";
+
+export type ModuleRuleMatcher = (moduleRule: RuleSetRule | RuleSetUseItem, index: number, array: RuleSetRule[] | RuleSetUseItem[]) => boolean;
+
+export type WithModuleRuleMatcherInfo = {
+    info: {
+        type: string;
+        value: string;
+    };
+} & ModuleRuleMatcher;
+
+function isNameMatchingLoader(loader: string, name: string) {
+    return loader === name || loader.indexOf(`${path.sep}${name}${path.sep}`) !== -1 || loader.indexOf(`@${name}${path.sep}`) !== -1;
+}
+
+export function matchLoaderName(name: string): ModuleRuleMatcher {
+    const matcher: WithModuleRuleMatcherInfo = moduleRule => {
+        if (typeof moduleRule === "string") {
+            return isNameMatchingLoader(moduleRule, name);
+        } else {
+            if ("loader" in moduleRule && moduleRule.loader) {
+                return isNameMatchingLoader(moduleRule.loader, name);
+            }
+        }
+
+        return false;
+    };
+
+    // Add contextual information about the matcher for debugging.
+    matcher.info = {
+        type: matchLoaderName.name,
+        value: name
+    };
+
+    return matcher;
+}
+
+export type AssetModuleType =
+  | "javascript/auto"
+  | "javascript/dynamic"
+  | "javascript/esm"
+  | "json"
+  | "webassembly/sync"
+  | "webassembly/async"
+  | "asset"
+  | "asset/source"
+  | "asset/resource"
+  | "asset/inline";
+
+export function matchAssetModuleType(type: AssetModuleType): ModuleRuleMatcher {
+    const matcher: WithModuleRuleMatcherInfo = moduleRule => {
+        if (typeof moduleRule !== "string" && "type" in moduleRule) {
+            return moduleRule.type === type;
+        }
+
+        return false;
+    };
+
+    // Add contextual information about the matcher for debugging.
+    matcher.info = {
+        type: matchAssetModuleType.name,
+        value: type
+    };
+
+    return matcher;
+}
+
+export function matchTest(test: string | RegExp): ModuleRuleMatcher {
+    const matcher: WithModuleRuleMatcherInfo = moduleRule => {
+        if (typeof moduleRule !== "string" && "test" in moduleRule) {
+            if (typeof moduleRule.test === "object" && typeof test === "object") {
+                // Assuming it's regular expressions.
+                return moduleRule.test.toString() === test.toString();
+            }
+
+            return moduleRule.test === test;
+        }
+
+        return false;
+    };
+
+    // Add contextual information about the matcher for debugging.
+    matcher.info = {
+        type: matchTest.name,
+        value: test.toString()
+    };
+
+    return matcher;
+}
+
+export interface ModuleRuleMatch {
+    moduleRule: RuleSetRule | RuleSetUseItem;
+    index: number;
+    parent: RuleSetRule[] | RuleSetUseItem[];
+}
+
+function toMatch(moduleRule: RuleSetRule | RuleSetUseItem, index: number, parent: RuleSetRule[] | RuleSetUseItem[]) {
+    return {
+        moduleRule,
+        index,
+        parent
+    };
+}
+
+function isRuleSetRule(value: RuleSetRule | RuleSetUseItem): value is RuleSetRule {
+    return (value as RuleSetRule).use !== undefined || (value as RuleSetRule).oneOf !== undefined;
+}
+
+function findModuleRulesRecursively(moduleRules: RuleSetRule[] | RuleSetUseItem[], matcher: ModuleRuleMatcher, parent: RuleSetRule[] | RuleSetUseItem[], matches: ModuleRuleMatch[]) {
+    moduleRules.forEach((x, index, array) => {
+        if (x) {
+            if (matcher(x, index, array)) {
+                matches.push(toMatch(x, index, parent));
+            } else {
+                if (isRuleSetRule(x)) {
+                    if (x.use) {
+                        findModuleRulesRecursively(x.use as RuleSetUseItem[], matcher, x.use as RuleSetUseItem[], matches);
+                    } else if (x.oneOf) {
+                        // This error seems to have been introduced by either TS 5.2. or webpack 5.88.1 (https://github.com/webpack/webpack/releases/tag/v5.88.1),
+                        // I am not sure what changed thought.
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        findModuleRulesRecursively(x.oneOf, matcher, x.oneOf, matches);
+                    }
+                }
+            }
+        }
+    });
+}
+
+export function findModuleRule(config: WebpackConfig, matcher: ModuleRuleMatcher) {
+    const moduleRules = config.module?.rules;
+
+    if (!moduleRules) {
+        return;
+    }
+
+    const matches: ModuleRuleMatch[] = [];
+
+    findModuleRulesRecursively(moduleRules as RuleSetRule[], matcher, moduleRules as RuleSetRule[], matches);
+
+    if (matches.length > 1) {
+        const matcherInfo = (matcher as WithModuleRuleMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Found more than 1 matching module rule.\n[webpack-configs] Matcher: "${JSON.stringify(matcherInfo)}"\n[webpack-configs] Matches: "${JSON.stringify(matches.map(x => x.moduleRule))}"`);
+    }
+
+    return matches[0];
+}
+
+export function findModuleRules(config: WebpackConfig, matcher: ModuleRuleMatcher) {
+    const moduleRules = config.module?.rules;
+
+    if (!moduleRules) {
+        return;
+    }
+
+    const matches: ModuleRuleMatch[] = [];
+
+    findModuleRulesRecursively(moduleRules as RuleSetRule[], matcher, moduleRules as RuleSetRule[], matches);
+
+    return matches;
+}
+
+export function addBeforeModuleRule(config: WebpackConfig, matcher: ModuleRuleMatcher, newModuleRules: RuleSetRule[] | RuleSetUseItem[]) {
+    const match = findModuleRule(config, matcher);
+
+    if (match) {
+        match.parent.splice(match.index, 0, ...newModuleRules);
+    } else {
+        const matcherInfo = (matcher as WithModuleRuleMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Couldn't add the new module rules because no match has been found.\n[webpack-configs] Matcher: "${JSON.stringify(matcherInfo)}"`);
+    }
+}
+
+export function addAfterModuleRule(config: WebpackConfig, matcher: ModuleRuleMatcher, newModuleRules: RuleSetRule[] | RuleSetUseItem[]) {
+    const match = findModuleRule(config, matcher);
+
+    if (match) {
+        match.parent.splice(match.index + 1, 0, ...newModuleRules);
+    } else {
+        const matcherInfo = (matcher as WithModuleRuleMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Couldn't add the new module rules because no match has been found.\n[webpack-configs] Matcher: "${JSON.stringify(matcherInfo)}"`);
+    }
+}
+
+export function replaceModuleRule(config: WebpackConfig, matcher: ModuleRuleMatcher, newModuleRule: RuleSetRule | RuleSetUseItem) {
+    const match = findModuleRule(config, matcher);
+
+    if (match) {
+        match.parent[match.index] = newModuleRule;
+    } else {
+        const matcherInfo = (matcher as WithModuleRuleMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Couldn't replace the module rule because no match has been found.\n[webpack-configs] Matcher: "${JSON.stringify(matcherInfo)}"`);
+    }
+}
+
+export function removeModuleRules(config: WebpackConfig, matcher: ModuleRuleMatcher) {
+    const moduleRules = config.module?.rules;
+
+    if (!moduleRules) {
+        return;
+    }
+
+    const matches: ModuleRuleMatch[] = [];
+
+    findModuleRulesRecursively(moduleRules as RuleSetRule[], matcher, moduleRules as RuleSetRule[], matches);
+
+    if (matches.length > 0) {
+        // Must keep the initial parent arrays' length to calculate the adjustment
+        // once the first match has been deleted.
+        const initialParentLengths = new Map<RuleSetRule[] | RuleSetUseItem[], number>(matches.map(x => [x.parent, x.parent.length]));
+
+        matches.forEach(x => {
+            const positionAdjustment = initialParentLengths.get(x.parent)! - x.parent.length;
+
+            x.parent.splice(x.index - positionAdjustment, 1);
+        });
+    } else {
+        const matcherInfo = (matcher as WithModuleRuleMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Didn't remove any module rules because no match has been found.\n[webpack-configs] Matcher: "${matcherInfo}"`);
+    }
+}

package/src/transformers/plugins.ts

@@ -0,0 +1,102 @@
+import type { WebpackConfig } from "../types.ts";
+
+export type WebpackPlugin = NonNullable<WebpackConfig["plugins"]>[number];
+
+export type PluginMatcher = (plugin: WebpackPlugin, index: number, array: WebpackPlugin[]) => boolean;
+
+export type WithPluginMatcherInfo = {
+    info: {
+        type: string;
+        value: string;
+    };
+} & PluginMatcher;
+
+export function matchConstructorName(name: string): PluginMatcher {
+    const matcher: WithPluginMatcherInfo = plugin => {
+        return plugin?.constructor.name === name;
+    };
+
+    // Add contextual information about the matcher for debugging.
+    matcher.info = {
+        type: matchConstructorName.name,
+        value: name
+    };
+
+    return matcher;
+}
+
+export interface PluginMatch {
+    plugin: WebpackPlugin;
+    index: number;
+}
+
+export function findPlugin(config: WebpackConfig, matcher: PluginMatcher) {
+    const matches: PluginMatch[] = [];
+
+    config.plugins?.forEach((x, index, array) => {
+        if (matcher(x, index, array)) {
+            matches.push({
+                plugin: x,
+                index
+            });
+        }
+    });
+
+    if (matches.length > 1) {
+        const matcherInfo = (matcher as WithPluginMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Found more than 1 matching plugin.\n[webp-configs] Matcher: "${JSON.stringify(matcherInfo)}"\n[webpack-configs] Matches: "${JSON.stringify(matches.map(x => x.plugin))}"`);
+    }
+
+    return matches[0];
+}
+
+export function replacePlugin(config: WebpackConfig, matcher: PluginMatcher, newPlugin: WebpackPlugin) {
+    const match = findPlugin(config, matcher);
+
+    if (match) {
+        config.plugins![match.index] = newPlugin;
+    } else {
+        const matcherInfo = (matcher as WithPluginMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Couldn't replace the plugin because no match has been found.\n[webpack-configs] Matcher: "${JSON.stringify(matcherInfo)}"`);
+    }
+}
+
+export function addBeforePlugin(config: WebpackConfig, matcher: PluginMatcher, newPlugins: WebpackPlugin[]) {
+    const match = findPlugin(config, matcher);
+
+    if (match) {
+        config.plugins?.splice(match.index, 0, ...newPlugins);
+    } else {
+        const matcherInfo = (matcher as WithPluginMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Couldn't add the new plugins because no match has been found.\n[webpack-configs] Matcher: "${JSON.stringify(matcherInfo)}"`);
+    }
+}
+
+export function addAfterPlugin(config: WebpackConfig, matcher: PluginMatcher, newPlugins: WebpackPlugin[]) {
+    const match = findPlugin(config, matcher);
+
+    if (match) {
+        config.plugins?.splice(match.index + 1, 0, ...newPlugins);
+    } else {
+        const matcherInfo = (matcher as WithPluginMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Couldn't add the new plugins because no match has been found.\n[webpack-configs] Matcher: "${JSON.stringify(matcherInfo)}"`);
+    }
+}
+
+export function removePlugin(config: WebpackConfig, matcher: PluginMatcher) {
+    const countBefore = config.plugins?.length ?? 0;
+
+    config.plugins = config.plugins?.filter((...args) => !matcher(...args));
+
+    const countAfter = config.plugins?.length ?? 0;
+
+    if (countBefore === countAfter) {
+        const matcherInfo = (matcher as WithPluginMatcherInfo).info;
+
+        throw new Error(`[webpack-configs] Didn't remove any plugin because no match has been found.\n[webpack-configs] Matcher: "${JSON.stringify(matcherInfo)}"`);
+    }
+}

package/src/types.ts

@@ -0,0 +1 @@
+export type { Configuration as WebpackConfig } from "webpack";

package/src/utils.ts

@@ -0,0 +1,19 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isObject(value: any): value is Record<string, unknown> {
+    return typeof value === "object" && !Array.isArray(value) && value != null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isNull(value: any): value is null {
+    return value == null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isUndefined(value: any): value is undefined {
+    return typeof value === "undefined" || value === undefined;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function isNil(value: any): value is null | undefined {
+    return isNull(value) || isUndefined(value);
+}

package/dist/chunk-2YARCRX5.js

@@ -1,15 +0,0 @@
-// src/utils.ts
-function isObject(value) {
-  return typeof value === "object" && !Array.isArray(value) && value != null;
-}
-function isNull(value) {
-  return value == null;
-}
-function isUndefined(value) {
-  return typeof value === "undefined" || value === void 0;
-}
-function isNil(value) {
-  return isNull(value) || isUndefined(value);
-}
-
-export { isNil, isNull, isObject, isUndefined };