@pinnacle0/webpack-util 0.3.23 → 0.3.26

package/src/WebpackConfigGenerator/Rule/{core-fe-hmr-babel-plugin.js → core-fe-hmr-babel-plugin.ts}

@@ -1,5 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+import type * as babel from "@babel/core";
+
+interface State extends Pick<babel.PluginPass, "file" | "key" | "opts" | "cwd" | "filename"> {
+    hasInjectedDeclineWebpackHMRNode: boolean;
+}
+
 /**
  * Injects `if (module.hot) module.hot.decline()` code snippet in files that contains "core-fe" Module classes.
  *
@@ -7,39 +11,68 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * otherwise react loses refrence of the MainComponent created by `ModuleProxy` in "core-fe"
  * and throws a runtime error during development (which is bad for developer experience).
  */
-function default_1({ types: t }) {
+export default function ({types: t}: typeof babel): babel.PluginObj<State> {
     return {
         visitor: {
             ImportDeclaration(path, state) {
                 if (state.hasInjectedDeclineWebpackHMRNode) {
                     return;
                 }
-                const { node: { source: { value: importSource }, specifiers: importSpecifiers, }, } = path;
+
+                const {
+                    node: {
+                        source: {value: importSource},
+                        specifiers: importSpecifiers,
+                    },
+                } = path;
+
                 if (importSource !== "core-fe") {
                     return;
                 }
+
                 if (!hasImportSpecifierOfIdentifierModule(t, importSpecifiers)) {
                     return;
                 }
+
                 // We now know the TS/JS file has included `Module`, inject the code snippet
-                const programPath = path.findParent(parentPath => t.isProgram(parentPath.node));
+                const programPath = path.findParent(parentPath => t.isProgram(parentPath.node))! as babel.NodePath<babel.types.Program>;
+
                 // prettier-ignore
-                const declineWebpackHMRNode = t.ifStatement(t.memberExpression(t.identifier("module"), t.identifier("hot")), t.expressionStatement(t.callExpression(t.memberExpression(t.memberExpression(t.identifier("module"), t.identifier("hot")), t.identifier("decline")), [])));
+                const declineWebpackHMRNode = t.ifStatement(
+                    t.memberExpression(
+                        t.identifier("module"),
+                        t.identifier("hot")
+                    ),
+                    t.expressionStatement(
+                        t.callExpression(
+                            t.memberExpression(
+                                t.memberExpression(
+                                    t.identifier("module"),
+                                    t.identifier("hot"),
+                                ),
+                                t.identifier("decline"),
+                            ),
+                            [],
+                        ),
+                    ),
+                );
+
                 // Append `if (module.hot) module.hot.decline()` to end of program body
                 programPath.pushContainer("body", declineWebpackHMRNode);
+
                 // We only need to inject the code snippet once per file, mark as injected
                 state.hasInjectedDeclineWebpackHMRNode = true;
             },
         },
     };
 }
-exports.default = default_1;
+
 /**
  * @param t `babel.types`
  * @param importSpecifiers The "specifier" property of a `babel.types.ImportDeclaration` node
  * @returns true if the import declaration includes the identifier `Module`
  */
-function hasImportSpecifierOfIdentifierModule(t, importSpecifiers) {
+function hasImportSpecifierOfIdentifierModule(t: typeof babel.types, importSpecifiers: babel.types.ImportDeclaration["specifiers"]): boolean {
     const specifier = importSpecifiers.find(specifier => {
         // Check if it is one of:
         // -> `import { <IMPORT_SPECIFIER_NODE> } from "core-fe";`
@@ -48,6 +81,7 @@ function hasImportSpecifierOfIdentifierModule(t, importSpecifiers) {
             const importedSpecifier = specifier.imported;
             return t.isIdentifier(importedSpecifier) && importedSpecifier.name === "Module";
         }
+
         // Check if it is:
         // -> `import * as <IMPORT_NAMESPACE_SPECIFIER_NODE> from "core-fe";`
         if (t.isImportNamespaceSpecifier(specifier)) {
@@ -55,8 +89,8 @@ function hasImportSpecifierOfIdentifierModule(t, importSpecifiers) {
             // Maybe enforce "core-fe" should not be imported with a namespace with an ESLint rule?
             return true;
         }
+
         return false;
     });
     return specifier !== undefined;
 }
-//# sourceMappingURL=core-fe-hmr-babel-plugin.js.map

package/src/WebpackConfigGenerator/Rule/{image.rule.js → image.rule.ts}

@@ -1,7 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.imageRule = void 0;
-const RegExpUtil_1 = require("./RegExpUtil");
+import type webpack from "webpack";
+import {RegExpUtil} from "./RegExpUtil";
+
 /**
  * Handles dependency requests to image assets (".png", ".jpeg", ".jpg", ".gif", ".svg")
  * by inlining as images as DataURL,
@@ -9,9 +8,9 @@ const RegExpUtil_1 = require("./RegExpUtil");
  *
  * @see https://webpack.js.org/guides/asset-modules/
  */
-function imageRule() {
+export function imageRule(): webpack.RuleSetRule {
     return {
-        test: RegExpUtil_1.RegExpUtil.fileExtension(".png", ".jpeg", ".jpg", ".gif", ".svg"),
+        test: RegExpUtil.fileExtension(".png", ".jpeg", ".jpg", ".gif", ".svg"),
         type: "asset",
         generator: {
             filename: "static/img/[name].[hash:8][ext][query]",
@@ -23,5 +22,3 @@ function imageRule() {
         },
     };
 }
-exports.imageRule = imageRule;
-//# sourceMappingURL=image.rule.js.map

package/src/WebpackConfigGenerator/Rule/index.ts

@@ -0,0 +1,17 @@
+import {imageRule} from "./image.rule";
+import {otherRule} from "./other.rule";
+import {stylesheetRule} from "./stylesheet.rule";
+import {tsRule} from "./ts.rule";
+
+/**
+ * Static factories to create `webpack.config#modules.rules` items.
+ */
+export class Rule {
+    static readonly image = imageRule;
+
+    static readonly other = otherRule;
+
+    static readonly ts = tsRule;
+
+    static readonly stylesheet = stylesheetRule;
+}

package/src/WebpackConfigGenerator/Rule/other.rule.ts

@@ -0,0 +1,23 @@
+import type webpack from "webpack";
+import {Constant} from "../../Constant";
+import {RegExpUtil} from "./RegExpUtil";
+
+interface OtherRuleDeps {
+    extraExtensionsForOtherRule: string[];
+}
+
+/**
+ * Handles dependency requests to file assets
+ * by emitting as separate files.
+ *
+ * @see https://webpack.js.org/guides/asset-modules/
+ */
+export function otherRule({extraExtensionsForOtherRule}: OtherRuleDeps): webpack.RuleSetRule {
+    return {
+        test: RegExpUtil.fileExtension(".ico", ...Constant.mediaExtensions, ...Constant.fontExtensions, ...extraExtensionsForOtherRule),
+        type: "asset",
+        generator: {
+            filename: "static/other/[name].[hash:8][ext][query]",
+        },
+    };
+}

package/src/WebpackConfigGenerator/Rule/{stylesheet.rule.js → stylesheet.rule.ts}

@@ -1,12 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.stylesheetRule = void 0;
-const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
-const RegExpUtil_1 = require("./RegExpUtil");
-function cssLoader(importLoaders) {
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import type webpack from "webpack";
+import {RegExpUtil} from "./RegExpUtil";
+
+interface StylesheetRuleDeps {
+    minimize: boolean;
+}
+
+function cssLoader(importLoaders: number): webpack.RuleSetUseItem {
     return {
         loader: require.resolve("css-loader"),
         options: {
@@ -14,7 +14,8 @@ function cssLoader(importLoaders) {
         },
     };
 }
-function lessLoader() {
+
+function lessLoader(): webpack.RuleSetUseItem {
     return {
         loader: require.resolve("less-loader"),
         options: {
@@ -24,12 +25,14 @@ function lessLoader() {
         },
     };
 }
-function miniCssExtractPluginLoader() {
+
+function miniCssExtractPluginLoader(): webpack.RuleSetUseItem {
     return {
-        loader: require.resolve(mini_css_extract_plugin_1.default.loader),
+        loader: require.resolve(MiniCssExtractPlugin.loader),
     };
 }
-function postcssLoader() {
+
+function postcssLoader(): webpack.RuleSetUseItem {
     return {
         loader: require.resolve("postcss-loader"),
         options: {
@@ -42,11 +45,13 @@ function postcssLoader() {
         },
     };
 }
-function styleLoader() {
+
+function styleLoader(): webpack.RuleSetUseItem {
     return {
         loader: require.resolve("style-loader"),
     };
 }
+
 /**
  * Handles dependency requests to stylesheet assets (".css", ".less")
  * with `minimize: true` by `lessc` -> transform to js module -> inject to DOM as <style> tag,
@@ -58,23 +63,24 @@ function styleLoader() {
  * @see https://webpack.js.org/loaders/postcss-loader/
  * @see https://webpack.js.org/loaders/style-loader/
  */
-function stylesheetRule({ minimize }) {
-    const use = minimize
+export function stylesheetRule({minimize}: StylesheetRuleDeps): webpack.RuleSetRule {
+    const use: webpack.RuleSetUseItem[] = minimize
         ? [
-            miniCssExtractPluginLoader(),
-            cssLoader(2),
-            postcssLoader(),
-            lessLoader(),
-            // prettier-format-preserve
-        ]
+              miniCssExtractPluginLoader(),
+              cssLoader(2),
+              postcssLoader(),
+              lessLoader(),
+              // prettier-format-preserve
+          ]
         : [
-            styleLoader(),
-            cssLoader(1),
-            lessLoader(),
-            // prettier-format-preserve
-        ];
+              styleLoader(),
+              cssLoader(1),
+              lessLoader(),
+              // prettier-format-preserve
+          ];
+
     return {
-        test: RegExpUtil_1.RegExpUtil.fileExtension(".css", ".less"),
+        test: RegExpUtil.fileExtension(".css", ".less"),
         use,
         // Declare all css/less imports as side effects (not to be considered
         // as dead code), regardless of the containing package claims to be
@@ -84,5 +90,3 @@ function stylesheetRule({ minimize }) {
         sideEffects: true,
     };
 }
-exports.stylesheetRule = stylesheetRule;
-//# sourceMappingURL=stylesheet.rule.js.map

package/src/WebpackConfigGenerator/Rule/{ts.rule.js → ts.rule.ts}

@@ -1,11 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.tsRule = void 0;
-const path_1 = __importDefault(require("path"));
-const RegExpUtil_1 = require("./RegExpUtil");
+import path from "path";
+import type webpack from "webpack";
+import {RegExpUtil} from "./RegExpUtil";
+
+interface Deps {
+    tsconfigFilepath: string;
+    fastRefresh: boolean;
+}
+
 /**
  * Handles dependency requests to typescript files
  * by compiling with `tsc`.
@@ -17,15 +18,16 @@ const RegExpUtil_1 = require("./RegExpUtil");
  * @see https://github.com/TypeStrong/ts-loader
  * @see https://github.com/pmmmwh/react-refresh-webpack-plugin
  */
-function tsRule({ tsconfigFilepath, fastRefresh }) {
-    const babelLoader = {
+export function tsRule({tsconfigFilepath, fastRefresh}: Deps): webpack.RuleSetRule {
+    const babelLoader: webpack.RuleSetUseItem = {
         loader: require.resolve("babel-loader"),
         options: {
-            plugins: [require.resolve(path_1.default.join(__dirname, "./core-fe-hmr-babel-plugin")), require.resolve("react-refresh/babel")],
+            plugins: [require.resolve(path.join(__dirname, "./core-fe-hmr-babel-plugin")), require.resolve("react-refresh/babel")],
         },
     };
+
     // TODO/Alvis: Check whether ts-loader can be replaced by babel loader
-    const tsLoader = {
+    const tsLoader: webpack.RuleSetUseItem = {
         loader: require.resolve("ts-loader"),
         options: {
             colors: false,
@@ -35,10 +37,11 @@ function tsRule({ tsconfigFilepath, fastRefresh }) {
                 target: "ES5",
                 noEmit: false,
             },
-            transpileOnly: false,
+            transpileOnly: true,
         },
     };
-    const swcLoader = {
+
+    const swcLoader: webpack.RuleSetUseItem = {
         loader: require.resolve("swc-loader"),
         options: {
             jsc: {
@@ -57,10 +60,9 @@ function tsRule({ tsconfigFilepath, fastRefresh }) {
             },
         },
     };
+
     return {
-        test: RegExpUtil_1.RegExpUtil.fileExtension(".ts", ".tsx"),
+        test: RegExpUtil.fileExtension(".ts", ".tsx"),
         use: fastRefresh ? [babelLoader, tsLoader] : [swcLoader],
     };
 }
-exports.tsRule = tsRule;
-//# sourceMappingURL=ts.rule.js.map

package/src/WebpackConfigGenerator/{WebpackConfigSerializationUtil.js → WebpackConfigSerializationUtil.ts}

@@ -1,15 +1,19 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebpackConfigSerializationUtil = void 0;
-const pretty_format_1 = __importDefault(require("pretty-format"));
-class WebpackConfigSerializationUtil {
-    static serializablePlugin(name, PluginConstructor, options) {
+import prettyFormat from "pretty-format";
+import type webpack from "webpack";
+
+interface SerializableWebpackPluginDescriptor {
+    "@@WP_CONFIG_GEN_TYPE": "WebpackPluginConstructorCall";
+    pluginName: string;
+    pluginOptions: any;
+}
+
+export class WebpackConfigSerializationUtil {
+    static serializablePlugin<OptType, T extends {apply(..._: any[]): void}>(name: string, PluginConstructor: new () => T): webpack.WebpackPluginInstance;
+    static serializablePlugin<OptType, T extends {apply(..._: any[]): void}>(name: string, PluginConstructor: new (_: OptType) => T, options: OptType): webpack.WebpackPluginInstance;
+    static serializablePlugin<OptType, T extends {apply(..._: any[]): void}>(name: string, PluginConstructor: new (_?: OptType) => T, options?: OptType): webpack.WebpackPluginInstance {
         const plugin = new PluginConstructor(options);
         return Object.defineProperty(plugin, "toWebpackConfigSerializableType", {
-            value() {
+            value(): SerializableWebpackPluginDescriptor {
                 return {
                     "@@WP_CONFIG_GEN_TYPE": "WebpackPluginConstructorCall",
                     pluginName: name,
@@ -18,8 +22,9 @@ class WebpackConfigSerializationUtil {
             },
         });
     }
-    static configToString(config) {
-        const configString = (0, pretty_format_1.default)(config, {
+
+    static configToString(config: webpack.Configuration): string {
+        const configString = prettyFormat(config, {
             callToJSON: true,
             escapeRegex: false,
             escapeString: false,
@@ -27,23 +32,22 @@ class WebpackConfigSerializationUtil {
             printFunctionName: false,
             plugins: [
                 {
-                    test(val) {
+                    test(val: any) {
                         try {
                             return typeof val.toWebpackConfigSerializableType === "function";
-                        }
-                        catch (_a) {
+                        } catch {
                             return false;
                         }
                     },
-                    serialize(val, config, indentation, depth, refs, printer) {
-                        const _ = val.toWebpackConfigSerializableType();
+                    serialize(val: any, config, indentation, depth, refs, printer) {
+                        const _ = val.toWebpackConfigSerializableType() as SerializableWebpackPluginDescriptor;
                         return `new ${_.pluginName}(${printer(_.pluginOptions, config, indentation, depth, refs)})`;
                     },
                 },
             ],
         });
         try {
-            const { format } = require("prettier");
+            const {format} = require("prettier") as typeof import("prettier");
             return format("module.exports = " + configString, {
                 arrowParens: "avoid",
                 bracketSpacing: false,
@@ -52,12 +56,9 @@ class WebpackConfigSerializationUtil {
                 useTabs: false,
                 filepath: "webpack.config.js",
             });
-        }
-        catch (_a) {
+        } catch {
             // Either prettier cannot be loaded, or formatting failed, return the unformatted config as a fallback.
             return configString;
         }
     }
 }
-exports.WebpackConfigSerializationUtil = WebpackConfigSerializationUtil;
-//# sourceMappingURL=WebpackConfigSerializationUtil.js.map

package/src/WebpackConfigGenerator/WebpackEntryFactory.ts

@@ -0,0 +1,22 @@
+import type webpack from "webpack";
+import type {EntryDescriptor} from "../type";
+
+interface StrictWebpackEntry {
+    [entryName: string]: [string];
+}
+
+interface WebpackEntryFactoryOptions {
+    configEntryDescriptors: EntryDescriptor[];
+}
+
+export class WebpackEntryFactory {
+    static generate({configEntryDescriptors}: WebpackEntryFactoryOptions): NonNullable<webpack.Configuration["entry"]> {
+        const entry: StrictWebpackEntry = {};
+
+        for (const {name, entryPath} of configEntryDescriptors) {
+            entry[name] = [entryPath];
+        }
+
+        return entry;
+    }
+}

package/src/WebpackConfigGenerator/WebpackOutputPublicURLFactory.ts

@@ -0,0 +1,22 @@
+export interface WebpackOutputPublicURLFactoryOptions {
+    env: string | null;
+    /**
+     * Function to dynamically compute additional webpack config from `env`.
+     * Should validates if the config contains `publicUrl` field.
+     */
+    webpackPublicPath: string | ((env: string) => string) | undefined;
+}
+
+export class WebpackOutputPublicURLFactory {
+    static generate({env, webpackPublicPath}: WebpackOutputPublicURLFactoryOptions): string {
+        if (!env || !webpackPublicPath) {
+            return "/";
+        }
+
+        if (typeof webpackPublicPath === "string") {
+            return webpackPublicPath;
+        }
+
+        return webpackPublicPath(env);
+    }
+}

package/src/WebpackConfigGenerator/{WebpackResolveAliasFactory.js → WebpackResolveAliasFactory.ts}

@@ -1,19 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebpackResolveAliasFactory = void 0;
-class WebpackResolveAliasFactory {
-    static generate({ env, resolvers }) {
-        const moduleAliasMap = {};
-        for (const { prefix, resolver } of resolvers) {
+import type {DynamicPathResolver} from "../type";
+
+interface WebpackResolveAliasMapOptions {
+    env: string | null;
+    resolvers: DynamicPathResolver[];
+}
+
+export class WebpackResolveAliasFactory {
+    static generate({env, resolvers}: WebpackResolveAliasMapOptions): {[moduleAlias: string]: string} {
+        const moduleAliasMap: {[moduleAlias: string]: string} = {};
+
+        for (const {prefix, resolver} of resolvers) {
             if (prefix in moduleAliasMap) {
                 throw new Error(`Duplicated resolver prefix: ${prefix}`);
-            }
-            else if (prefix.trim() === "") {
+            } else if (prefix.trim() === "") {
                 throw new Error(`Resolver prefix cannot be empty`);
-            }
-            else if (/\s/.test(prefix)) {
+            } else if (/\s/.test(prefix)) {
                 throw new Error(`Resolver prefix cannot contain whitespace, received: ${prefix}`);
             }
+
             if (resolver) {
                 const resolvedRealPath = typeof resolver === "string" ? resolver : resolver(env);
                 if (resolvedRealPath) {
@@ -21,8 +25,7 @@ class WebpackResolveAliasFactory {
                 }
             }
         }
+
         return moduleAliasMap;
     }
 }
-exports.WebpackResolveAliasFactory = WebpackResolveAliasFactory;
-//# sourceMappingURL=WebpackResolveAliasFactory.js.map

package/src/WebpackConfigGenerator/WebpackResolveExtensionsFactory.ts

@@ -0,0 +1,19 @@
+import {Constant} from "../Constant";
+
+interface WebpackResolveExtensionsFactoryOptions {
+    prioritizedExtensionPrefixes?: string[] | undefined;
+}
+
+export class WebpackResolveExtensionsFactory {
+    static generate({prioritizedExtensionPrefixes = []}: WebpackResolveExtensionsFactoryOptions): string[] {
+        const resolveExtensions = [];
+
+        for (const prefix of prioritizedExtensionPrefixes) {
+            resolveExtensions.push(...Constant.resolveExtensions.map(_ => `.${prefix}${_}`));
+        }
+
+        resolveExtensions.push(...Constant.resolveExtensions);
+
+        return resolveExtensions;
+    }
+}

package/src/WebpackConfigGenerator/{WebpackResolveModulesFactory.js → WebpackResolveModulesFactory.ts}

@@ -1,9 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebpackResolveModulesFactory = void 0;
-class WebpackResolveModulesFactory {
-    static generate({ projectSrcDirectory }) {
+interface WebpackResolveModulesFactoryOptions {
+    projectSrcDirectory: string;
+}
+
+export class WebpackResolveModulesFactory {
+    static generate({projectSrcDirectory}: WebpackResolveModulesFactoryOptions): string[] {
         const resolveModules = [];
+
         /**
          * To let webpack know how to resolve non-relative paths when `tsconfig.json#compilerOptions.baseUrl` is set to "./src"
          * Maybe refactor to a better resolution/aliasing solution later(?)
@@ -24,13 +26,13 @@ class WebpackResolveModulesFactory {
          * ```
          */
         resolveModules.push(projectSrcDirectory);
+
         /**
          * The default behavior to resolve non-relative paths is by looking inside `node_modules` folder.
          * Put at the end so this has the lowest precedence.
          */
         resolveModules.push("node_modules");
+
         return resolveModules;
     }
 }
-exports.WebpackResolveModulesFactory = WebpackResolveModulesFactory;
-//# sourceMappingURL=WebpackResolveModulesFactory.js.map