zulip/tools/debug-require-webpack-plugin.ts

// This plugin exposes a version of require() to the browser console to assist
// debugging.  It also exposes the list of modules it knows about as the keys
// of the require.ids object.

import webpack, { Template } from "webpack";
import path from "path";

export default class DebugRequirePlugin {
    apply(compiler: webpack.Compiler): void {
        const resolved = new Map();
        const nameSymbol = Symbol("DebugRequirePluginName");

        (compiler as any).resolverFactory.hooks.resolver
            .for("normal")
            .tap("DebugRequirePlugin", (resolver: any) => {
                resolver.getHook("beforeRawModule").tap("DebugRequirePlugin", (req: any) => {
                    req[nameSymbol] = req[nameSymbol] || req.request;
                });

                resolver.getHook("beforeRelative").tap("DebugRequirePlugin", (req: any) => {
                    const inPath = path.relative(compiler.context, req.path);
                    if (!inPath.startsWith("../")) {
                        req[nameSymbol] = req[nameSymbol] || "./" + inPath;
                    }
                });

                resolver.getHook("beforeResolved").tap("DebugRequirePlugin", (req: any) => {
                    if (req[nameSymbol]) {
                        const names = resolved.get(req.path);
                        if (names) {
                            names.add(req[nameSymbol]);
                        } else {
                            resolved.set(req.path, new Set([req[nameSymbol]]));
                        }
                    }
                });
            });

        compiler.hooks.compilation.tap("DebugRequirePlugin", (compilation: any) => {
            compilation.mainTemplate.hooks.beforeStartup.tap(
                "DebugRequirePlugin",
                (source: string, chunk: webpack.compilation.Chunk) => {
                    const ids: [string, string | number][] = [];
                    chunk.hasModuleInGraph(
                        (mod: any) => {
                            const { resource, rawRequest, id } = mod;
                            for (const name of resolved.get(resource) || []) {
                                if (name === "./static/js/debug.js") {
                                    console.log(name, id, mod);
                                }
                                ids.push([
                                    rawRequest.slice(0, rawRequest.lastIndexOf("!") + 1) + name,
                                    id,
                                ]);
                            }
                            return false;
                        },
                        () => true
                    );
                    ids.sort();

                    const {
                        outputOptions: { globalObject },
                        requireFn,
                    } = compilation.mainTemplate;

                    return Template.asString([
                        source,
                        `function debugRequire(request) {`,
                        Template.indent(`return ${requireFn}(debugRequire.ids[request]);`),
                        "};",
                        `debugRequire.ids = ${JSON.stringify(
                            Object.fromEntries(ids),
                            null,
                            "\t"
                        )};`,
                        `if (typeof ${globalObject} !== "undefined") {`,
                        Template.indent(
                            `${globalObject}.require = ${globalObject}.require || debugRequire;`
                        ),
                        "}",
                    ]);
                }
            );
        });
    }
}