diff --git a/src/content/docs/dev/mappings.md b/src/content/docs/dev/mappings.md new file mode 100644 index 0000000..b77b539 --- /dev/null +++ b/src/content/docs/dev/mappings.md @@ -0,0 +1,77 @@ +--- +title: Contributing to mappings +description: How to register your own mappings and contribute upstream +sidebar: + order: 4 +--- + +[The mappings repository](https://github.com/moonlight-mod/mappings) 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](https://github.com/moonlight-mod/moonmap) global: + +```ts +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](/ext-dev/api/#spacepack): + +```ts +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: + +```ts +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](https://github.com/P1sec/hermes-dec) on `assets/index.android.bundle`. You can download the mobile app [using this tool](https://switchboard.marsh.zone/). + +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: + +```ts +import loadMappings from "@moonlight-mod/mappings"; +loadMappings(moonmap, lunast); +```