config.ts

/* spell-checker: disable */
import webpack from 'webpack'
const { ProvidePlugin, DefinePlugin, EnvironmentPlugin } = webpack
import type { Configuration as DevServerConfiguration } from 'webpack-dev-server'

import WebExtensionPlugin from 'webpack-target-webextension'
import TerserPlugin from 'terser-webpack-plugin'
import DevtoolsIgnorePlugin from 'devtools-ignore-webpack-plugin'
import CopyPlugin from 'copy-webpack-plugin'
import HTMLPlugin from 'html-webpack-plugin'
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
import { emitJSONFile } from '@nice-labs/emit-file-webpack-plugin'
import { emitManifestFile } from './plugins/manifest.js'
import { getGitInfo } from './git-info.js'

import { dirname, join } from 'node:path'
import { fileURLToPath } from 'node:url'
import { readFile, readdir } from 'node:fs/promises'
import { createRequire } from 'node:module'

import { type EntryDescription, normalizeEntryDescription, joinEntryItem } from './utils.js'
import { type BuildFlags, normalizeBuildFlags, computedBuildFlags, computeCacheKey } from './flags.js'
import { ProfilingPlugin } from './plugins/ProfilingPlugin.js'

import './clean-hmr.js'

const __dirname = fileURLToPath(dirname(import.meta.url))
const require = createRequire(import.meta.url)
const patchesDir = join(__dirname, '../../../patches')
const templateContent = readFile(join(__dirname, './template.html'), 'utf8')
const popupTemplateContent = readFile(join(__dirname, './popups.html'), 'utf8')

export async function createConfiguration(_inputFlags: BuildFlags): Promise<webpack.Configuration> {
    const VERSION = JSON.parse(await readFile(new URL('../../../package.json', import.meta.url), 'utf-8')).version
    const flags = normalizeBuildFlags(_inputFlags)
    const computedFlags = computedBuildFlags(flags)
    const cacheKey = computeCacheKey(flags, computedFlags)

    const productionLike = flags.mode === 'production' || flags.profiling

    const nonWebpackJSFiles = join(flags.outputPath, './js')
    const polyfillFolder = join(nonWebpackJSFiles, './polyfill')

    const pnpmPatches = readdir(patchesDir).then((files) => files.map((x) => join(patchesDir, x)))
    const baseConfig = {
        name: 'mask',
        // to set a correct base path for source map
        context: join(__dirname, '../../../'),
        mode: flags.mode,
        devtool: computedFlags.sourceMapKind,
        target: ['web', 'es2022'],
        entry: {},
        node: {
            global: true,
            __dirname: false,
            __filename: false,
        },
        experiments: {
            futureDefaults: true,
            syncImportAssertion: true,
            deferImport: { asyncModule: 'error' },
        },
        cache: {
            type: 'filesystem',
            buildDependencies: {
                config: [fileURLToPath(import.meta.url)],
                patches: await pnpmPatches,
            },
            version: cacheKey,
        },
        resolve: {
            extensionAlias: {
                '.js': ['.js', '.tsx', '.ts'],
                '.mjs': ['.mjs', '.mts'],
            },
            extensions: ['.js', '.ts', '.tsx'],
            alias: (() => {
                const alias: Record<string, string> = {
                    // conflict with SES
                    'error-polyfill': require.resolve('./package-overrides/null.mjs'),
                }
                if (computedFlags.reactProductionProfiling) alias['react-dom$'] = require.resolve('react-dom/profiling')
                if (flags.devtools) {
                    // Note: when devtools is enabled, we will install react-refresh/runtime manually to keep the correct react global hook installation order.
                    // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/680
                    alias[require.resolve('@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js')] =
                        require.resolve('./package-overrides/null.mjs')
                }
                return alias
            })(),
            // Polyfill those Node built-ins
            fallback: {
                http: require.resolve('stream-http'),
                https: require.resolve('https-browserify'),
                stream: require.resolve('stream-browserify'),
                crypto: require.resolve('crypto-browserify'),
                zlib: require.resolve('zlib-browserify'),
                'text-encoding': require.resolve('@sinonjs/text-encoding'),
            },
            conditionNames: ['mask-src', '...'],
        },
        module: {
            parser: {
                javascript: {
                    // Treat as missing export as error
                    strictExportPresence: true,
                },
            },
            rules: [
                // Source map for libraries
                computedFlags.sourceMapKind ?
                    { test: /\.js$/, enforce: 'pre', use: [require.resolve('source-map-loader')] }
                :   null,
                // Patch old regenerator-runtime
                {
                    test: /\..?js$/,
                    loader: require.resolve('./loaders/fix-regenerator-runtime.ts'),
                },
                // TypeScript
                {
                    test: /\.tsx?$/,
                    parser: { worker: ['OnDemandWorker', '...'] },
                    // Compile all ts files in the workspace
                    include: join(__dirname, '../../'),
                    loader: require.resolve('swc-loader'),
                    options: {
                        sourceMaps: !!computedFlags.sourceMapKind,
                        // https://swc.rs/docs/configuring-swc/
                        jsc: {
                            preserveAllComments: true,
                            parser: {
                                syntax: 'typescript',
                                dynamicImport: true,
                                tsx: true,
                            },
                            target: 'es2022',
                            externalHelpers: true,
                            transform: {
                                react: {
                                    runtime: 'automatic',
                                    development: !productionLike,
                                    refresh: flags.reactRefresh && {
                                        refreshReg: '$RefreshReg$',
                                        refreshSig: '$RefreshSig$',
                                        emitFullSignatures: true,
                                    },
                                },
                            },
                            experimental: {
                                keepImportAssertions: true,
                            },
                        },
                    },
                },
                // compress svg files
                flags.mode === 'production' ?
                    {
                        test: /\.svg$/,
                        loader: require.resolve('svgo-loader'),
                        // overrides
                        options: {
                            js2svg: {
                                pretty: false,
                            },
                        },
                        dependency(data) {
                            if (data === '') return false
                            if (data !== 'url')
                                throw new TypeError(
                                    'The only import mode valid for a non-JS file is via new URL(). Current import mode: ' +
                                        data,
                                )
                            return true
                        },
                        type: 'asset/resource',
                    }
                :   null,
            ],
        },
        plugins: [
            new WebExtensionPlugin({ background: { pageEntry: 'background', serviceWorkerEntry: 'backgroundWorker' } }),
            flags.sourceMapHideFrameworks !== false &&
                new DevtoolsIgnorePlugin({
                    shouldIgnorePath: (path) => {
                        if (path.includes('masknet') || path.includes('dimensiondev')) return false
                        return path.includes('/node_modules/') || path.includes('/webpack/')
                    },
                }),
            new ProvidePlugin({
                // Polyfill for Node global "Buffer" variable
                Buffer: [require.resolve('buffer'), 'Buffer'],
                'process.nextTick': require.resolve('next-tick'),
            }),
            new EnvironmentPlugin({
                NODE_ENV: productionLike ? 'production' : flags.mode,
                NODE_DEBUG: false,
                WEB3_CONSTANTS_RPC: process.env.WEB3_CONSTANTS_RPC ?? '',
                MASK_SENTRY_DSN: process.env.MASK_SENTRY_DSN ?? '',
            }),
            new DefinePlugin({
                'process.browser': 'true',
                'process.version': JSON.stringify('v20.0.0'),
                // MetaMaskInpageProvider => extension-port-stream => readable-stream depends on stdin and stdout
                'process.stdout': '/* stdout */ null',
                'process.stderr': '/* stdin */ null',
            }),
            flags.reactRefresh && new ReactRefreshWebpackPlugin({ overlay: false, esModule: true }),
            flags.profiling && new ProfilingPlugin(),
            ...emitManifestFile(flags, computedFlags),
            new CopyPlugin({
                patterns: [
                    { from: join(__dirname, '../public/'), to: flags.outputPath },
                    {
                        from: join(__dirname, '../../injected-script/dist/injected-script.js'),
                        to: nonWebpackJSFiles,
                    },
                    { from: join(__dirname, '../../gun-utils/gun.js'), to: nonWebpackJSFiles },
                    { from: join(__dirname, '../../mask-sdk/dist/mask-sdk.js'), to: nonWebpackJSFiles },
                    {
                        context: join(__dirname, '../../polyfills/dist/'),
                        from: '*.js',
                        to: polyfillFolder,
                    },
                    { from: require.resolve('webextension-polyfill/dist/browser-polyfill.js'), to: polyfillFolder },
                    {
                        from:
                            productionLike ?
                                require.resolve('../../../node_modules/ses/dist/lockdown.umd.min.js')
                            :   require.resolve('../../../node_modules/ses/dist/lockdown.umd.js'),
                        to: join(polyfillFolder, 'lockdown.js'),
                    },
                    {
                        from: join(__dirname, '../../sentry/dist/sentry.js'),
                        to: nonWebpackJSFiles,
                    },
                ],
            }),
            ...(() => {
                const { BRANCH_NAME, BUILD_DATE, COMMIT_DATE, COMMIT_HASH, DIRTY } = getGitInfo()
                const json = {
                    BRANCH_NAME,
                    BUILD_DATE,
                    channel: flags.channel,
                    COMMIT_DATE,
                    COMMIT_HASH,
                    DIRTY,
                    VERSION,
                    REACT_DEVTOOLS_EDITOR_URL: flags.devtools ? flags.devtoolsEditorURI : undefined,
                }
                return [
                    emitJSONFile({ content: json, name: 'build-info.json' }),
                    emitJSONFile({ content: { ...json, channel: 'beta' }, name: 'build-info-beta.json' }),
                ]
            })(),
        ],
        // Focus on performance optimization. Not for download size/cache stability optimization.
        optimization: {
            // we don't need deterministic, and we also don't have chunk request at init we don't need "size"
            chunkIds: productionLike ? 'total-size' : 'named',
            concatenateModules: productionLike,
            flagIncludedChunks: productionLike,
            mangleExports: false,
            minimize: productionLike,
            minimizer: [
                new TerserPlugin({
                    minify: TerserPlugin.swcMinify,
                    // https://swc.rs/docs/config-js-minify
                    terserOptions: {
                        compress: {
                            drop_debugger: false,
                            ecma: 2020,
                            keep_classnames: true,
                            keep_fnames: true,
                            keep_infinity: true,
                            passes: 3,
                            pure_getters: false,
                            sequences: false,
                        },
                        mangle: false,
                    },
                }),
            ],
            moduleIds: flags.channel === 'stable' && flags.mode === 'production' ? 'deterministic' : 'named',
            nodeEnv: false, // provided in EnvironmentPlugin
            realContentHash: false,
            removeAvailableModules: productionLike,
            runtimeChunk: 'single',
            splitChunks:
                productionLike ? undefined : (
                    {
                        maxInitialRequests: Infinity,
                        chunks: 'all',
                        cacheGroups: {
                            // split each npm package into a chunk to give better debug experience.
                            defaultVendors: {
                                test: /[/\\]node_modules[/\\]/,
                                name(module: any) {
                                    const path = (module.context as string)
                                        .replace(/\\/g, '/')
                                        .match(/node_modules\/\.pnpm\/(.+)/)![1]
                                        .split('/')
                                    // [@org+pkgname@version, node_modules, @org, pkgname, ...inner path]
                                    if (path[0].startsWith('@')) return `npm-ns.${path[2].replace('@', '')}.${path[3]}`
                                    // [pkgname@version, node_modules, pkgname, ...inner path]
                                    return `npm.${path[2]}`
                                },
                            },
                        },
                    }
                ),
        },
        output: {
            environment: {
                module: false,
                dynamicImport: true,
            },
            path: flags.outputPath,
            filename: 'entry/[name].js',
            chunkFilename: productionLike ? 'bundled/[id].js' : 'bundled/chunk-[name].js',
            assetModuleFilename: 'assets/[hash][ext][query]',
            webassemblyModuleFilename: 'assets/[hash].wasm',
            hotUpdateMainFilename: 'hot/[runtime].[fullhash].json',
            hotUpdateChunkFilename: 'hot/[id].[fullhash].js',
            devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]',
            globalObject: 'globalThis',
            publicPath: '/',
            clean: flags.mode === 'production',
            trustedTypes:
                String(computedFlags.sourceMapKind).includes('eval') ?
                    {
                        policyName: 'webpack',
                    }
                :   undefined,
        },
        ignoreWarnings: [
            /Failed to parse source map/,
            /Critical dependency: the request of a dependency is an expression/,
        ],
        devServer: {
            hot: flags.hmr ? 'only' : false,
            liveReload: false,
            client: flags.hmr ? undefined : false,
        } as DevServerConfiguration,
        stats: flags.mode === 'production' ? 'errors-only' : undefined,
    } satisfies webpack.Configuration

    const entries: Record<string, EntryDescription> = (baseConfig.entry = {
        dashboard: withReactDevTools(join(__dirname, '../dashboard/initialization/index.ts')),
        popups: withReactDevTools(join(__dirname, '../popups/initialization/index.ts')),
        contentScript: withReactDevTools(join(__dirname, '../content-script/index.ts')),
        background: normalizeEntryDescription(join(__dirname, '../background/initialization/mv2-entry.ts')),
        backgroundWorker: normalizeEntryDescription(join(__dirname, '../background/initialization/mv3-entry.ts')),
    })
    baseConfig.plugins.push(
        await addHTMLEntry({ chunks: ['dashboard'], filename: 'dashboard.html', perf: flags.profiling }),
        await addHTMLEntry({ chunks: ['popups'], filename: 'popups.html', perf: flags.profiling }),
        await addHTMLEntry({
            chunks: ['contentScript'],
            filename: 'generated__content__script.html',
            perf: flags.profiling,
        }),
        await addHTMLEntry({ chunks: ['background'], filename: 'background.html', gun: true, perf: flags.profiling }),
    )
    if (flags.devtools) {
        entries.devtools = normalizeEntryDescription(join(__dirname, '../devtools/panels/index.tsx'))
        baseConfig.plugins.push(
            await addHTMLEntry({ chunks: ['devtools'], filename: 'devtools-background.html', perf: flags.profiling }),
        )
    }
    return baseConfig

    function withReactDevTools(entry: string | string[] | EntryDescription): EntryDescription {
        if (!flags.devtools) return normalizeEntryDescription(entry)
        entry = normalizeEntryDescription(entry)
        entry.import = joinEntryItem(join(__dirname, '../devtools/content-script/index.ts'), entry.import)
        return entry
    }
}
async function addHTMLEntry({
    gun,
    perf,
    ...options
}: HTMLPlugin.Options & {
    gun?: boolean
    perf: boolean
}) {
    let template = await (options.filename === 'popups.html' && !perf ? popupTemplateContent : templateContent)
    if (gun) template = template.replace(`<!-- Gun -->`, '<script src="/js/gun.js"></script>')
    if (perf) template = template.replace(`<!-- Profiling -->`, '<script src="/js/perf-measure.js"></script>')
    return new HTMLPlugin({
        templateContent: template,
        inject: 'body',
        scriptLoading: 'defer',
        minify: false,
        ...options,
    })
}