Contributing to mappings

The mappings repository contains a collection of known Webpack modules with human-readable names. It finds Webpack modules and creates an alias to them, as well as remapping exports.

Remapping in your own extension

In index.ts (not in a Webpack module), you can register extra exports on an existing module using the moonmap global:

moonlight.moonmap.addExport("discord/components/common/index", "AIconButRenamed", {
  type: ModuleExportType.Constant,
  find: "AIcon"
});

If you’re registering your own module, you’ll need to find the Webpack module ID. You can do this in a Webpack module using Spacepack:

moonlight.moonmap.addModule(spacepack.findByCode(/* ... */)[0].id, "discord/my/custom/module");

Contributing upstream

Create a file in src/mappings with the path equal to the module name. Then, use the register function from src/registry.ts to load it:

register((moonmap) => {
  const name = "discord/my/custom/module";
  moonmap.register({
    name,
    find: /* ... */,
    process({ id }) {
      moonmap.addModule(id, name);

      // Custom exports, if you wish

      return true;
    }
  });
});

If you’re creating a type for the module (you should!), export the type as the default export. When adding new types to a mapping:

• Add its path and a name to generate.js
  • Name should be the last part of the path except in cases where it breaks syntax (e.g. highlight.js -> HighlightJS)
  • Mappings for CSS class names should replace .css with CSS
• node generate.js types --write to generate the new type index
• Format with Prettier
• node generate.js declares "@moonlight-mod/wp/" > ../moonlight/packages/types/src/mappings.d.ts to update import statements in moonlight
  • You don’t have to do this unless you’re a moonlight core developer

Finding names

Names in the mappings repo are a combination of:

• Guessing
• Strings in the relevant module (e.g. a Flux store name)
• Code identified from a third party library (e.g. React internal names)
• Strings in the mobile app
  • Use hermes-dec on assets/index.android.bundle. You can download the mobile app using this tool.

If you’re stuck figuring out what something is, feel free to ask! Community members may be able to help make an educated guess.

Embedding into other client mods

After setting up moonmap and LunAST, call the load function before Webpack initializes:

import loadMappings from "@moonlight-mod/mappings";
loadMappings(moonmap, lunast);