Cookbook

Exporting from your extension

On the web target (index.ts), you can export patches, Webpack modules, and styles:

import type { ExtensionWebExports } from "@moonlight-mod/types";

export const patches: ExtensionWebExports["patches"] = [];
export const webpackModules: ExtensionWebExports["webpackModules"] = {};
export const styles: ExtensionWebExports["styles"] = [];

All exports are optional.

Extension entrypoints

Extensions can load in three different environments:

In the browser (the “web” environment where Discord lives): index.ts & Webpack modules
On the Node.js side, where DiscordNative and such live: node.ts
On the host, with little sandboxing and access to Electron APIs: host.ts

Most extensions only need to run code in the browser. Use the Node environment if you need access to system APIs, like the filesystem or creating processes. Use the Host environment if you need to use the Electron API.

Remember that you cannot directly import Node.js modules, and should share code with moonlight.getNatives.

Make a node.ts file:

module.exports.doSomething = () => {
  console.log("Doing something...");
};

Then, use it from your extension:

const natives = moonlight.getNatives("your extension ID");
// natives will be null if using moonlight in the browser
natives?.doSomething();

Remember to restart the dev server.

Using another extension as a library

Mark the extension as a dependency of your extension:

{
  "dependencies": ["markdown"]
}

Mark the Webpack module as a dependency of your own Webpack module:

export const webpackModules: ExtensionWebExports["webpackModules"] = {
  someModule: {
    dependencies: [
      {
        ext: "markdown",
        id: "markdown"
      }
    ]
  }
};

Then, import the Webpack module:

import * as markdown from "@moonlight-mod/wp/markdown_markdown";

markdown.addRule(/* ... */);

Remember to restart the dev server.

Making a custom React component

Mark React as a dependency of your own Webpack module:

export const webpackModules: ExtensionWebExports["webpackModules"] = {
  element: {
    dependencies: [
      {
        id: "react"
      }
    ]
  }
};

Then, import React from mappings:

import React from "@moonlight-mod/wp/react";

export default function MyElement() {
  return <span>Hello, world!</span>;
}

React must be imported when using JSX.

Using Spacepack to find code dynamically

import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
const { something } = spacepack.findByCode(...)[0].exports;

Remember to add your find to your extension dependencies and declare Spacepack as a dependency.