src/processes/BuildProcess.ts

import * as fs from "fs";
import * as path from "path";
import chalk from "chalk";
import { Configuration as InternalConfiguration, DefinePlugin, webpack } from "webpack";
import { Configuration as DevServerConfiguration } from "webpack-dev-server";
import WebpackDevServer from "webpack-dev-server";
import CopyWebpackPlugin from "copy-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import TerserPlugin from "terser-webpack-plugin";
import Dotenv from "dotenv-webpack";

// local imports
import Configuration from "../Configuration";

// output directory
const OUTPUT_DIRECTORY_NAME = "dist";

// find the nearest (parent) `node_modules` cache of a directory.
function findNearestNodeModules(startDir: string): string {
    let dir = startDir;
    while (dir !== path.parse(dir).root) {
        const possibleNodeModules = path.join(dir, "node_modules");
        if (fs.existsSync(possibleNodeModules) && fs.statSync(possibleNodeModules).isDirectory()) {
            return possibleNodeModules;
        }
        dir = path.dirname(dir);
    }
    return "";
}

export class BuildProcess {
    constructor(private directory: string, private release: boolean) {
        //
    }

    build(): void {
        this.ensureProjectIsValid();

        // vars
        const { directory } = this;

        // read Webpack configuration
        const configuration = Configuration.directory(directory);

        // create internal configuration
        const internal_config = this.createInternalConfiguration(configuration);

        // output directory
        const output_directory = path.join(directory, OUTPUT_DIRECTORY_NAME);

        // clean
        if (fs.existsSync(output_directory) && fs.statSync(output_directory).isDirectory()) {
            fs.rmSync(output_directory, {
                recursive: true,
                force: true,
            });
        }

        // invoke internal Webpack instance
        webpack(internal_config, (err, stats) => {
            let errors_found = false;

            if (err) {
                errors_found = true;
                console.error(err.stack || err);
                if ((err as any).details) {
                    console.error((err as any).details);
                }
                return;
            }

            if (stats) {
                if (stats.hasErrors()) {
                    console.error(stats.toString({ all: false, errors: true, colors: true }));
                    errors_found = true;
                }
                
                if (stats.hasWarnings()) {
                    console.warn(stats.toString({ all: false, warnings: true, colors: true }));
                }
            }

            if (!errors_found) {
                console.log(chalk.green("Successfuly built project."));
            }
        });
    }

    run(): void {
        this.ensureProjectIsValid();

        // vars
        const { directory } = this;

        // read Webpack configuration
        const configuration = Configuration.directory(directory);

        // create internal configuration
        const internal_config = this.createInternalConfiguration(configuration);

        // internal Webpack instance
        const compiler = webpack(internal_config);

        // server
        const server = new WebpackDevServer(internal_config.devServer, compiler);

        // run server
        const run_server = async () => {
            await server.start();
        };
        run_server();
    }

    private ensureProjectIsValid(): void {
        // Ensure NPM project validity
        const manifest_path = path.resolve(this.directory, "package.json");
        if (!(fs.existsSync(manifest_path) && fs.statSync(manifest_path).isFile())) {
            console.error(chalk.red("Error:") + " " + "Directory must be a NPM project.");
            process.exit(1);
        }
    }

    private createInternalConfiguration(
        configuration: Configuration
    ): InternalConfiguration & { devServer: DevServerConfiguration } {
        // vars
        const { directory, release } = this;

        // detect entry point
        const entry = this.detectEntryPoint(configuration);

        // entry document
        const entry_document = configuration.document || "./src/index.html";

        // output directory
        const output_directory = path.join(directory, OUTPUT_DIRECTORY_NAME);

        // nearest `node_modules` cache
        const nearest_node_modules = findNearestNodeModules(__dirname);

        return {
            entry,
            context: directory,
            ...(release ? {} : {
                devtool: "inline-source-map",
            }),
            mode: release ? "production" : "development",
            output: {
                filename: "js/[name].bundle.js",
                path: output_directory,
                publicPath: "",
            },
            resolve: {
                // Add `.ts` and `.tsx` as a resolvable extension.
                extensions: [".ts", ".tsx", ".js"],
                // Add support for TypeScripts fully qualified ESM imports.
                extensionAlias: {
                    ".js": [".js", ".ts"],
                    ".cjs": [".cjs", ".cts"],
                    ".mjs": [".mjs", ".mts"]
                }
            },
            devServer: {
                static: {
                    directory: output_directory,
                },
                hot: true,
                port: 9000,
            },
            module: {
                rules: [
                    // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
                    {
                        test: /\.([cm]?ts|tsx)$/,
                        loader: path.resolve(nearest_node_modules, "ts-loader"),
                        options: {
                            allowTsInNodeModules: true,
                            transpileOnly: true,
                        },
                    },
        
                    // media files
                    {
                        test: /\.(png|jpe?g|gif|svg|webp|mp4|mp3|woff2?|eot|ttf|otf)$/i,
                        type: "asset",
                        parser: {
                            dataUrlCondition: {
                                maxSize: 16 * 1024, // 16kb threshold
                            },
                        },
                    },

                    // .css files
                    {
                        test: /\.css$/i,
                        use: [
                            path.resolve(nearest_node_modules, "style-loader"),
                            path.resolve(nearest_node_modules, "css-loader"),
                        ],
                    },  

                    // .scss, .sass files
                    {
                        test: /\.s[ac]ss$/i,
                        use: [
                            path.resolve(nearest_node_modules, "style-loader"),
                            path.resolve(nearest_node_modules, "css-loader"),
                            path.resolve(nearest_node_modules, "sass-loader"),
                        ],
                    },

                    // .json files
                    {
                        test: /\.(geo)?json$/i,
                        type: "json",
                    },
                ],
            },
            optimization: {
                minimizer: [
                    new TerserPlugin({
                        extractComments: false,
                        terserOptions: {
                            compress: {
                                drop_console: true,
                            },
                        }
                    }),
                ],
                splitChunks: {
                    chunks: "all",
                },
            },
            plugins: [
                new HtmlWebpackPlugin({
                    template: path.resolve(directory, entry_document),
                    inject: true,
                    minify: false
                }),
                new CopyWebpackPlugin({
                    patterns: [
                        {
                            from: path.resolve(directory, "static"),
                            to: output_directory,
                            noErrorOnMissing: true,
                        },
                    ],
                }),
                new Dotenv({
                    prefix: "import.meta.env.",
                    silent: true,
                }),
                new DefinePlugin({
                    "process.env.NODE_ENV": JSON.stringify(release ? "production" : "development"),
                    "process.platform": JSON.stringify(process.platform),
                    "process.env.IS_PREACT": JSON.stringify("true"),
                    "process.env.NODE_DEBUG": JSON.stringify((!release).toString()),
                }),
            ],
        };
    }

    private detectEntryPoint(configuration: Configuration): string {
        // vars
        const { directory } = this;

        // detect entry point
        let entry = configuration.entry;
        if (!entry) {
            entry = "./src/index.tsx";
            if (!(
                fs.existsSync(path.resolve(directory, entry)) &&
                fs.statSync(path.resolve(directory, entry)).isFile())) {

                entry = "./src/index.ts";

                if (!(
                    fs.existsSync(path.resolve(directory, entry)) &&
                    fs.statSync(path.resolve(directory, entry)).isFile())) {
                    
                    console.error(chalk.red("Error:") + " " + `Could not find TypeScript entry point: tried "src/index.tsx" and "src/index.ts"`);
                    process.exit(1);
                }
            }
        }

        return entry;
    }
}